Spaces:
Sleeping
Sleeping
File size: 3,277 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 | // 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 {Constants} from '../../constants'
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'
type Props = {
properties: readonly IPropertyTemplate[]
activeView: BoardView
}
const ViewHeaderPropertiesMenu = (props: Props) => {
const {properties, activeView} = props
const intl = useIntl()
const {viewType, visiblePropertyIds} = activeView.fields
const canShowBadges = viewType === 'board' || viewType === 'gallery' || viewType === 'calendar'
const toggleVisibility = (propertyId: string) => {
let newVisiblePropertyIds = []
if (visiblePropertyIds.includes(propertyId)) {
newVisiblePropertyIds = visiblePropertyIds.filter((o: string) => o !== propertyId)
} else {
newVisiblePropertyIds = [...visiblePropertyIds, propertyId]
}
mutator.changeViewVisibleProperties(activeView.boardId, activeView.id, visiblePropertyIds, newVisiblePropertyIds)
}
return (
<MenuWrapper label={intl.formatMessage({id: 'ViewHeader.properties-menu', defaultMessage: 'Properties menu'})}>
<Button>
<FormattedMessage
id='ViewHeader.properties'
defaultMessage='Properties'
/>
</Button>
<Menu>
{activeView.fields.viewType === 'gallery' &&
<Menu.Switch
key={Constants.titleColumnId}
id={Constants.titleColumnId}
name={intl.formatMessage({id: 'default-properties.title', defaultMessage: 'Title'})}
isOn={visiblePropertyIds.includes(Constants.titleColumnId)}
suppressItemClicked={true}
onClick={toggleVisibility}
/>}
{properties?.map((option: IPropertyTemplate) => (
<Menu.Switch
key={option.id}
id={option.id}
name={option.name}
isOn={visiblePropertyIds.includes(option.id)}
suppressItemClicked={true}
onClick={toggleVisibility}
/>
))}
{canShowBadges &&
<Menu.Switch
key={Constants.badgesColumnId}
id={Constants.badgesColumnId}
name={intl.formatMessage({id: 'default-properties.badges', defaultMessage: 'Comments and description'})}
isOn={visiblePropertyIds.includes(Constants.badgesColumnId)}
suppressItemClicked={true}
onClick={toggleVisibility}
/>}
</Menu>
</MenuWrapper>
)
}
export default React.memo(ViewHeaderPropertiesMenu)
|