Spaces:
Sleeping
Sleeping
File size: 3,084 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {FormattedMessage, useIntl} from 'react-intl'
import {DatePropertyType} from '../../properties/types'
import {IPropertyTemplate} from '../../blocks/board'
import {BoardView} from '../../blocks/boardView'
import mutator from '../../mutator'
import Button from '../../widgets/buttons/button'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import CheckIcon from '../../widgets/icons/check'
import propsRegistry from '../../properties'
type Props = {
properties: readonly IPropertyTemplate[]
activeView: BoardView
dateDisplayPropertyName?: string
}
const ViewHeaderDisplayByMenu = (props: Props) => {
const {properties, activeView, dateDisplayPropertyName} = props
const intl = useIntl()
const createdDateName = propsRegistry.get('createdTime').displayName(intl)
const getDateProperties = (): IPropertyTemplate[] => {
return properties?.filter((o: IPropertyTemplate) => propsRegistry.get(o.type) instanceof DatePropertyType)
}
return (
<MenuWrapper>
<Button>
<FormattedMessage
id='ViewHeader.display-by'
defaultMessage='Display by: {property}'
values={{
property: (
<span
style={{color: 'rgb(var(--center-channel-color-rgb))'}}
id='displayByLabel'
>
{dateDisplayPropertyName || createdDateName}
</span>
),
}}
/>
</Button>
<Menu>
{getDateProperties().length > 0 && getDateProperties().map((date: IPropertyTemplate) => (
<Menu.Text
key={date.id}
id={date.id}
name={date.name}
rightIcon={activeView.fields.dateDisplayPropertyId === date.id ? <CheckIcon/> : undefined}
onClick={(id) => {
if (activeView.fields.dateDisplayPropertyId === id) {
return
}
mutator.changeViewDateDisplayPropertyId(activeView.boardId, activeView.id, activeView.fields.dateDisplayPropertyId, id)
}}
/>
))}
{getDateProperties().length === 0 &&
<Menu.Text
key={'createdDate'}
id={'createdDate'}
name={createdDateName}
rightIcon={<CheckIcon/>}
onClick={() => {}}
/>
}
</Menu>
</MenuWrapper>
)
}
export default React.memo(ViewHeaderDisplayByMenu)
|