393b961a6b
* Initial commit for refactoring properties * More work on isolating properties * Some other fixes in tests! * Handle gracefully the unknown properties * Moving properties outside components folder * Finishing changes to move the properties out of components * Moving more things to the property logic * Some improvements on properties * Cleaner class based approach for property types * Removing accidentally added people prop * A bit of simplification * Fixing some tests * Fixing more tests * Fixing more tests * All tests working * Fixing eslint errors * Adding the filtering logic for text and boolean properties * Adding support for searching by title * Fixing some tests and adding others * Fixing tests * Removing TODO * Addressing PR review comments * Fixing filterValue test after merge * Removing accidentailly included typo * Fixing typo introduced
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
import React from 'react'
|
|
import {useIntl, IntlShape} from 'react-intl'
|
|
|
|
import Menu from '../widgets/menu'
|
|
import propsRegistry from '../properties'
|
|
import {PropertyType} from '../properties/types'
|
|
import './propertyMenu.scss'
|
|
|
|
type Props = {
|
|
propertyId: string
|
|
propertyName: string
|
|
propertyType: PropertyType
|
|
onTypeAndNameChanged: (newType: PropertyType, newName: string) => void
|
|
onDelete: (id: string) => void
|
|
}
|
|
|
|
function typeMenuTitle(intl: IntlShape, type: PropertyType): string {
|
|
return `${intl.formatMessage({id: 'PropertyMenu.typeTitle', defaultMessage: 'Type'})}: ${type.displayName(intl)}`
|
|
}
|
|
|
|
type TypesProps = {
|
|
label: string
|
|
onTypeSelected: (type: PropertyType) => void
|
|
}
|
|
|
|
export const PropertyTypes = (props: TypesProps): JSX.Element => {
|
|
const intl = useIntl()
|
|
return (
|
|
<>
|
|
<Menu.Label>
|
|
<b>{props.label}</b>
|
|
</Menu.Label>
|
|
|
|
<Menu.Separator/>
|
|
|
|
{
|
|
propsRegistry.list().map((p) => (
|
|
<Menu.Text
|
|
key={p.type}
|
|
id={p.type}
|
|
name={p.displayName(intl)}
|
|
onClick={() => props.onTypeSelected(p)}
|
|
/>
|
|
))
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const PropertyMenu = (props: Props) => {
|
|
const intl = useIntl()
|
|
let currentPropertyName = props.propertyName
|
|
|
|
const deleteText = intl.formatMessage({
|
|
id: 'PropertyMenu.Delete',
|
|
defaultMessage: 'Delete',
|
|
})
|
|
|
|
return (
|
|
<Menu>
|
|
<Menu.TextInput
|
|
initialValue={props.propertyName}
|
|
onConfirmValue={(n) => {
|
|
props.onTypeAndNameChanged(props.propertyType, n)
|
|
currentPropertyName = n
|
|
}}
|
|
onValueChanged={(n) => currentPropertyName = n}
|
|
/>
|
|
<Menu.SubMenu
|
|
id='type'
|
|
name={typeMenuTitle(intl, props.propertyType)}
|
|
>
|
|
<PropertyTypes
|
|
label={intl.formatMessage({id: 'PropertyMenu.changeType', defaultMessage: 'Change property type'})}
|
|
onTypeSelected={(type: PropertyType) => props.onTypeAndNameChanged(type, currentPropertyName)}
|
|
/>
|
|
</Menu.SubMenu>
|
|
<Menu.Text
|
|
id='delete'
|
|
name={deleteText}
|
|
onClick={() => props.onDelete(props.propertyId)}
|
|
/>
|
|
</Menu>
|
|
)
|
|
}
|
|
|
|
export default React.memo(PropertyMenu)
|