81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/components/Lists';
|
||
|
|
|
||
|
|
export const ActionsList = styled.ul`
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const ActionItem = styled.li`
|
||
|
|
position: relative;
|
||
|
|
padding-left: 4px;
|
||
|
|
padding-right: 4px;
|
||
|
|
padding-top: 0.5rem;
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 14px;
|
||
|
|
&:hover {
|
||
|
|
background: rgb(115, 103, 240);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const ActionTitle = styled.span`
|
||
|
|
margin-left: 20px;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const ActionItemSeparator = styled.li`
|
||
|
|
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||
|
|
font-size: 12px;
|
||
|
|
padding-left: 4px;
|
||
|
|
padding-right: 4px;
|
||
|
|
padding-top: 0.75rem;
|
||
|
|
padding-bottom: 0.25rem;
|
||
|
|
`;
|
||
|
|
|
||
|
|
type SortPopupProps = {
|
||
|
|
sorting: TaskSorting;
|
||
|
|
onChangeTaskSorting: (taskSorting: TaskSorting) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
|
||
|
|
const [currentSorting, setSorting] = useState(sorting);
|
||
|
|
const handleSetSorting = (s: TaskSorting) => {
|
||
|
|
setSorting(s);
|
||
|
|
onChangeTaskSorting(s);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<ActionsList>
|
||
|
|
<ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
|
||
|
|
<ActionTitle>None</ActionTitle>
|
||
|
|
</ActionItem>
|
||
|
|
<ActionItem
|
||
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
|
||
|
|
>
|
||
|
|
<ActionTitle>Due date</ActionTitle>
|
||
|
|
</ActionItem>
|
||
|
|
<ActionItem
|
||
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
|
||
|
|
>
|
||
|
|
<ActionTitle>Members</ActionTitle>
|
||
|
|
</ActionItem>
|
||
|
|
<ActionItem
|
||
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
|
||
|
|
>
|
||
|
|
<ActionTitle>Labels</ActionTitle>
|
||
|
|
</ActionItem>
|
||
|
|
<ActionItem
|
||
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
|
||
|
|
>
|
||
|
|
<ActionTitle>Task title</ActionTitle>
|
||
|
|
</ActionItem>
|
||
|
|
</ActionsList>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SortPopup;
|