Refactor tasks-list to TypeScript

[MAILPOET-5755]
This commit is contained in:
 Ján Mikláš
2024-06-17 18:03:05 +02:00
committed by Ján Mikláš
parent 2dc036007e
commit 66e6de9be9
2 changed files with 54 additions and 54 deletions

View File

@ -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 };

View 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 };