import React , { useState , useEffect } from 'react' ; import styled , { css } from 'styled-components' ; import { Checkmark , User , Calendar , Tags , Clock } from 'shared/icons' ; import { TaskMetaFilters , TaskMeta , TaskMetaMatch , DueDateFilterType } from 'shared/components/Lists' ; import Input from 'shared/components/ControlledInput' ; import { Popup , usePopup } from 'shared/components/PopupMenu' ; import produce from 'immer' ; import { mixin } from 'shared/utils/styles' ; import Member from 'shared/components/Member' ; import { MyTasksSort } from 'shared/generated/graphql' ; const FilterMember = styled ( Member ) `
  margin: 2px 0;
  &:hover {
    cursor: pointer;
    background: ${ props => props . theme . colors . primary };
  }
` ; export const Labels = styled . ul `
  list-style: none;
  margin: 0 8px;
  padding: 0;
  margin-bottom: 8px;
` ; export const Label = styled . li `
  position: relative;
` ; export const CardLabel = styled . span < { active : boolean ; color : string ; } > `
  ${ props => props . active && css `
      margin-left: 4px;
      box-shadow: -8px 0 ${ mixin . darken ( props . color , 0.12 ) };
      border-radius: 3px;
    ` }

  cursor: pointer;
  font-weight: 700;
  margin: 0 0 4px;
  min-height: 20px;
  padding: 6px 12px;
  position: relative;
  transition: padding 85ms, margin 85ms, box-shadow 85ms;
  background-color: ${ props => props . color };
  color: #fff;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 31px;
` ; 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: ${ props => props . theme . colors . primary };
  }
` ; export const ActionTitle = styled . span `
  margin-left: 20px;
` ; const ActionItemSeparator = styled . li `
  color: ${ props => mixin . rgba ( props . theme . colors . text . primary , 0.4 ) };
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
` ; const ActiveIcon = styled ( Checkmark ) `
  position: absolute;
  right: 4px;
` ; const ItemIcon = styled . div `
  position: absolute;
` ; const TaskNameInput = styled ( Input ) `
  margin: 0;
` ; const ActionItemLine = styled . div `
  height: 1px;
  border-top: 1px solid #414561;
  margin: 0.25rem !important;
` ; type MyTasksSortProps = { sort : MyTasksSort ; onChangeSort : ( sort : MyTasksSort ) => void ; } ; const MyTasksSortPopup = ( { sort : initialSort , onChangeSort } ) => { const [ sort , setSort ] = useState ( initialSort ) ; const handleChangeSort = ( f ) => { setSort ( f ) ; onChangeSort ( f ) ; } ; return ( < > < Popup tab = { 0 } title = { null } > < ActionsList > < ActionItem onClick = { ( ) => handleChangeSort ( MyTasksSort . None ) } > { sort === MyTasksSort . None && < ActiveIcon width = { 16 } height = { 16 } / > } < ActionTitle > None < /ActionTitle> < /ActionItem> < ActionItem onClick = { ( ) => handleChangeSort ( MyTasksSort . Project ) } > { sort === MyTasksSort . Project && < ActiveIcon width = { 16 } height = { 16 } / > } < ActionTitle > Project < /ActionTitle> < /ActionItem> < ActionItem onClick = { ( ) => handleChangeSort ( MyTasksSort . DueDate ) } > { sort === MyTasksSort . DueDate && < ActiveIcon width = { 16 } height = { 16 } / > } < ActionTitle > Due Date < /ActionTitle> < /ActionItem> < /ActionsList> < /Popup> < />); } ; export default MyTasksSortPopup ;