1
0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00

Improving the value selector performance, only initializing it on activation

This commit is contained in:
Jesús Espino 2020-11-04 11:50:18 +01:00
parent 31cd68bade
commit 7368edc160
3 changed files with 35 additions and 1 deletions

View File

@ -71,6 +71,7 @@ export default class PropertyValueElement extends React.Component<Props, State>
}
return (
<ValueSelector
emptyValue={emptyDisplayValue}
options={propertyTemplate.options}
value={propertyTemplate.options.find((p) => p.id === propertyValue)}
onChange={(value) => {

View File

@ -6,6 +6,13 @@
background-color: rgba(var(--main-fg), 0.1),
}
> .octo-label {
margin: 0 10px;
&.empty {
color: rgba(var(--main-fg), 0.6);
}
}
.value-menu-option {
display: flex;
width: 100%;

View File

@ -19,6 +19,7 @@ import './valueSelector.scss'
type Props = {
options: IPropertyOption[]
value: IPropertyOption;
emptyValue: string;
onCreate?: (value: string) => void
onChange?: (value: string) => void
onChangeColor?: (option: IPropertyOption, color: string) => void
@ -26,7 +27,18 @@ type Props = {
intl: IntlShape
}
class ValueSelector extends React.Component<Props> {
type State = {
activated: boolean
}
class ValueSelector extends React.Component<Props, State> {
public constructor(props: Props) {
super(props)
this.state = {
activated: false,
}
}
public shouldComponentUpdate(): boolean {
return true
}
@ -65,6 +77,18 @@ class ValueSelector extends React.Component<Props> {
}
public render(): JSX.Element {
if (!this.state.activated) {
return (
<div
className='ValueSelector'
onClick={() => this.setState({activated: true})}
>
<span className={`octo-label ${this.props.value ? this.props.value.color : 'empty'}`}>
{this.props.value ? this.props.value.value : this.props.emptyValue}
</span>
</div>
)
}
return (
<CreatableSelect
styles={{
@ -119,6 +143,8 @@ class ValueSelector extends React.Component<Props> {
autoFocus={true}
value={this.props.value}
closeMenuOnSelect={true}
placeholder={this.props.emptyValue}
defaultMenuIsOpen={true}
/>
)
}