83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
|
/**
|
||
|
|
* Copyright (c) 2014-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @flow
|
||
|
|
* @format
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, {Component} from 'react';
|
||
|
|
import yoga from 'yoga-layout';
|
||
|
|
import {Radio, Menu, Dropdown, Button, Icon} from 'antd';
|
||
|
|
import './YogaEnumSelect.css';
|
||
|
|
const RadioButton = Radio.Button;
|
||
|
|
const RadioGroup = Radio.Group;
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
property: string,
|
||
|
|
disabled?: boolean,
|
||
|
|
value: string | number,
|
||
|
|
onChange: (value: number) => void,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default class YogaEnumSelect extends Component<Props> {
|
||
|
|
values: Array<{key: string, value: number}>;
|
||
|
|
|
||
|
|
constructor({property}: Props) {
|
||
|
|
super();
|
||
|
|
// $FlowFixMe
|
||
|
|
this.values = Object.keys(yoga)
|
||
|
|
.map(key => ({key, value: yoga[key]}))
|
||
|
|
.filter(
|
||
|
|
({key}) => key.startsWith(property) && key !== `${property}_COUNT`,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleMenuClick = ({key}: {key: string}) => {
|
||
|
|
this.props.onChange(yoga[key]);
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {property, ...props} = this.props;
|
||
|
|
const selected = this.values.find(
|
||
|
|
({key, value}) => value === this.props.value,
|
||
|
|
);
|
||
|
|
const replacer = new RegExp(`^${property}_`);
|
||
|
|
|
||
|
|
return this.values.length > 3 ? (
|
||
|
|
<Dropdown
|
||
|
|
disabled={props.disabled}
|
||
|
|
overlay={
|
||
|
|
<Menu onClick={this.handleMenuClick}>
|
||
|
|
{this.values.map(({key, value}) => (
|
||
|
|
<Menu.Item key={key} value={value}>
|
||
|
|
{key.replace(replacer, '')}
|
||
|
|
</Menu.Item>
|
||
|
|
))}
|
||
|
|
</Menu>
|
||
|
|
}>
|
||
|
|
<Button>
|
||
|
|
{selected ? selected.key.replace(replacer, '') : 'undefiend'}{' '}
|
||
|
|
<Icon type="down" />
|
||
|
|
</Button>
|
||
|
|
</Dropdown>
|
||
|
|
) : (
|
||
|
|
<RadioGroup
|
||
|
|
{...props}
|
||
|
|
onChange={e => this.props.onChange(e.target.value)}
|
||
|
|
defaultValue="a"
|
||
|
|
className="YogaEnumSelect">
|
||
|
|
{this.values.map(({key, value}) => (
|
||
|
|
<RadioButton key={key} value={value}>
|
||
|
|
{key.replace(new RegExp(`^${property}_`), '')}
|
||
|
|
</RadioButton>
|
||
|
|
))}
|
||
|
|
</RadioGroup>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|