Refactor tasks-list to TypeScript
[MAILPOET-5755]
This commit is contained in:
committed by
Ján Mikláš
parent
2dc036007e
commit
66e6de9be9
@ -1,54 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { MailPoet } from 'mailpoet';
|
||||
import { TasksListDataRow } from './tasks-list-data-row.jsx';
|
||||
import { TasksListLabelsRow } from './tasks-list-labels-row.jsx';
|
||||
|
||||
function TasksList(props) {
|
||||
const colsCount = props.show_scheduled_at || props.show_cancelled_at ? 7 : 5;
|
||||
|
||||
return (
|
||||
<table className="widefat fixed striped">
|
||||
<thead>
|
||||
<TasksListLabelsRow
|
||||
show_scheduled_at={props.show_scheduled_at}
|
||||
show_cancelled_at={props.show_cancelled_at}
|
||||
/>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.tasks.length ? (
|
||||
props.tasks.map((task) => (
|
||||
<TasksListDataRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
show_scheduled_at={props.show_scheduled_at}
|
||||
show_cancelled_at={props.show_cancelled_at}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<tr className="mailpoet-listing-no-items">
|
||||
<td colSpan={colsCount}>{MailPoet.I18n.t('nothingToShow')}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<TasksListLabelsRow
|
||||
show_scheduled_at={props.show_scheduled_at}
|
||||
show_cancelled_at={props.show_cancelled_at}
|
||||
/>
|
||||
</tfoot>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
TasksList.propTypes = {
|
||||
show_scheduled_at: PropTypes.bool,
|
||||
show_cancelled_at: PropTypes.bool,
|
||||
tasks: PropTypes.arrayOf(TasksListDataRow.propTypes.task).isRequired,
|
||||
};
|
||||
|
||||
TasksList.defaultProps = {
|
||||
show_scheduled_at: false,
|
||||
show_cancelled_at: false,
|
||||
};
|
||||
|
||||
export { TasksList };
|
54
mailpoet/assets/js/src/help/tasks-list/tasks-list.tsx
Normal file
54
mailpoet/assets/js/src/help/tasks-list/tasks-list.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { MailPoet } from 'mailpoet';
|
||||
import {
|
||||
TasksListDataRow,
|
||||
Props as TasksListLabelsRowProps,
|
||||
} from './tasks-list-data-row';
|
||||
import { TasksListLabelsRow } from './tasks-list-labels-row';
|
||||
|
||||
type Props = {
|
||||
showScheduledAt?: boolean;
|
||||
showCancelledAt?: boolean;
|
||||
tasks: TasksListLabelsRowProps['task'][];
|
||||
};
|
||||
function TasksList({
|
||||
showScheduledAt = false,
|
||||
showCancelledAt = false,
|
||||
tasks,
|
||||
}: Props): JSX.Element {
|
||||
const colsCount = showScheduledAt || showCancelledAt ? 7 : 5;
|
||||
|
||||
return (
|
||||
<table className="widefat fixed striped">
|
||||
<thead>
|
||||
<TasksListLabelsRow
|
||||
showScheduledAt={showScheduledAt}
|
||||
showCancelledAt={showCancelledAt}
|
||||
/>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tasks.length ? (
|
||||
tasks.map((task) => (
|
||||
<TasksListDataRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
showScheduledAt={showScheduledAt}
|
||||
showCancelledAt={showCancelledAt}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<tr className="mailpoet-listing-no-items">
|
||||
<td colSpan={colsCount}>{MailPoet.I18n.t('nothingToShow')}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<TasksListLabelsRow
|
||||
showScheduledAt={showScheduledAt}
|
||||
showCancelledAt={showCancelledAt}
|
||||
/>
|
||||
</tfoot>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
export { TasksList };
|
Reference in New Issue
Block a user