diff --git a/src/apollo-table/component/Cell.tsx b/src/apollo-table/component/Cell.tsx
index 5a492f8246173125624ae7f049d3a357da765680..c71dfa7a5a476a23e44100e0b142268461a5bd09 100644
--- a/src/apollo-table/component/Cell.tsx
+++ b/src/apollo-table/component/Cell.tsx
@@ -32,7 +32,6 @@ const Cell = (props: CellProps) => {
cellData.map((item) => {
temp.push({ text: item.text, value: item.value });
});
- debugger
if (_.isEqual(temp, changedValue)) {
setStatus('detail');
return;
diff --git a/src/apollo-table/component/base/_utils/getFormatter.tsx b/src/apollo-table/component/base/_utils/getFormatter.tsx
index 8e5abe0fe05e2f8e427e34f158b931be8a210292..62d5f652508246580d5f763f3b7428e37b7a2ae5 100644
--- a/src/apollo-table/component/base/_utils/getFormatter.tsx
+++ b/src/apollo-table/component/base/_utils/getFormatter.tsx
@@ -6,10 +6,8 @@ export const GetFormatter = {
return obj.value;
},
SEARCH: (val) => {
- if (!Array.isArray(val)) return void 0;
- return val
- .map((item) => ({ value: item.value, label: item.text }))
- .filter((item) => item.value || item.value === 0);
+ if (!Array.isArray(val) || val.length === 0) return void 0;
+ return { value: val[0].value, label: val[0].text };
},
TEXTAREA: (val) => {
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
@@ -40,6 +38,7 @@ export const GetFormatter = {
},
SELECT: (val) => {
// 处理成[{}]结构
+ if (!Array.isArray(val) || val.length === 0) return undefined;
const obj = val[0] || {};
return { key: obj.value, label: obj.text };
},
@@ -48,6 +47,9 @@ export const GetFormatter = {
const obj = val[0] || {};
return { key: obj.value, label: obj.text };
},
+ TEXT_SELECT: (val) => {
+ return GetFormatter.SELECT(val);
+ },
RATE: (val) => {
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
return obj.value || 0;
@@ -65,25 +67,15 @@ export const GetFormatter = {
return obj.value ? moment(obj.value) : void 0;
},
LINK: (val) => {
- return Array.isArray(val) && val.length > 0 ? val : [];
+ return Array.isArray(val) && val.length > 0 ? val : [];
},
MULTIPLE_SEARCH: (val) => {
if (!Array.isArray(val)) return void 0;
- return val
- .map((item) => ({ value: item.value, label: item.text }))
- .filter((item) => item.value || item.value === 0);
+ return val.map((item) => ({ value: item.value, label: item.text }));
},
TREE_SELECT: (val) => {
+ debugger
if (!Array.isArray(val)) return void 0;
return val.map((item) => ({ value: item.value, label: item.text }));
},
- TEXT_SELECT: (val) => {
- if (!Array.isArray(val)) return void 0;
- return val
- .map((item) => ({
- value: item.value,
- label: item.text,
- }))
- .filter((item) => item.value || item.value === 0 || item.label);
- },
};
diff --git a/src/apollo-table/component/base/_utils/setFormatter.tsx b/src/apollo-table/component/base/_utils/setFormatter.tsx
index 793e7e0e219051f7558f60e32b288a270d3ffaf9..70399a923270a2d4527fe9e21fe5fe63da81ff67 100644
--- a/src/apollo-table/component/base/_utils/setFormatter.tsx
+++ b/src/apollo-table/component/base/_utils/setFormatter.tsx
@@ -1,3 +1,5 @@
+import { isNumber } from '@/apollo-table/utils/utils';
+
export const formatStr = 'YYYY-MM-DD HH:mm:ss';
export const emptyModel = [{ text: '', value: '' }];
@@ -8,16 +10,6 @@ export const SetFormatter = {
}
return [{ value: value, text: value }];
},
- SEARCH: (val) => {
- if (!val || typeof val !== 'object') return val;
- if (typeof val === 'object') {
- const values = Array.isArray(val) ? val : [val];
- return values.map((item) => ({
- value: item.fieldValueValue || item.key,
- text: item.fieldValueName || item.label,
- }));
- }
- },
TEXTAREA: (value) => {
if (!value) {
return emptyModel;
@@ -41,26 +33,32 @@ export const SetFormatter = {
},
SELECT: (val) => {
// 处理成[{}]结构
- if (!val) return val;
- if (typeof val === 'object') {
- const values = Array.isArray(val) ? val : [val];
- return values.map((item) => ({ value: item.key, text: item.label }));
- }
- return val;
+ if (!val || typeof val !== 'object') return emptyModel;
+ const values = Array.isArray(val) ? val : [val];
+ return values.map((item) => ({ value: item.key, text: item.label }));
},
MULTIPLE_SELECT: (val) => {
- // 处理成[{}]结构
- if (!val) return val;
- if (typeof val === 'object') {
- const values = Array.isArray(val) ? val : [val];
- return values.map((item) => ({ value: item.key, text: item.label }));
- }
- return val;
+ return SetFormatter.SELECT(val);
+ },
+ TEXT_SELECT: (val) => {
+ return SetFormatter.SELECT(val);
+ },
+ SEARCH: (val) => {
+ if (!val || typeof val !== 'object') return emptyModel;
+ const values = Array.isArray(val) ? val : [val];
+ return values.map((item) => ({
+ value: item.fieldValueValue || item.key,
+ text: item.fieldValueName || item.label,
+ }));
+ },
+ MULTIPLE_SEARCH: (val) => {
+ return SetFormatter.SEARCH(val);
},
RATE: (val) => {
return [{ value: val, text: val }];
},
NUMBER: (val) => {
+ if (!isNumber(val)) return emptyModel;
return [{ value: val, text: val }];
},
PERCENTAGE: (event) => {
@@ -87,16 +85,6 @@ export const SetFormatter = {
LINK: (val) => {
return Array.isArray(val) && val.length > 0 ? val : [emptyModel];
},
- MULTIPLE_SEARCH: (val) => {
- if (!val || typeof val !== 'object') return val;
- if (typeof val === 'object') {
- const values = Array.isArray(val) ? val : [val];
- return values.map((item) => ({
- value: item.fieldValueValue || item.key,
- text: item.fieldValueName || item.label,
- }));
- }
- },
TREE_SELECT: (val) => {
if (!val || typeof val !== 'object') return val;
if (typeof val === 'object') {
@@ -104,13 +92,4 @@ export const SetFormatter = {
return values.map((item) => ({ value: item.value, text: item.label }));
}
},
- TEXT_SELECT: (val) => {
- // 处理成[{}]结构
- if (!val) return val;
- if (typeof val === 'object') {
- const values = Array.isArray(val) ? val : [val];
- return values.map((item) => ({ value: item.value, text: item.label }));
- }
- return val;
- },
};
diff --git a/src/apollo-table/component/base/config.tsx b/src/apollo-table/component/base/config.tsx
index 9e1053b399e7832e0828dd275f257879f04c6869..cdf6bd231434898ca54a6392a88d6577dbd10089 100644
--- a/src/apollo-table/component/base/config.tsx
+++ b/src/apollo-table/component/base/config.tsx
@@ -133,17 +133,18 @@ export const config: any = {
setFormatter: SetFormatter['MULTIPLE_SEARCH'],
componentAttr: {
allowClear: true,
+ emitTrigger: 'onBlur',
},
detail: require('./detail/multiple-search').default,
},
- // '14': {
- // name: '树组件',
- // component: require('./edit/tree-select').default,
- // placeholder: '请选择',
- // getFormatter: GetFormatter['TREE_SELECT'],
- // setFormatter: SetFormatter['TREE_SELECT'],
- // detail: require('./detail/tree-select').default,
- // },
+ '14': {
+ name: '树组件',
+ component: require('./edit/tree-select').default,
+ placeholder: '请选择',
+ getFormatter: GetFormatter['TREE_SELECT'],
+ setFormatter: SetFormatter['TREE_SELECT'],
+ detail: require('./detail/tree-select').default,
+ },
'15': {
name: '文本选择',
component: require('./edit/text-select').default,
@@ -151,6 +152,7 @@ export const config: any = {
setFormatter: SetFormatter['TEXT_SELECT'],
componentAttr: {
allowClear: true,
+ emitTrigger: 'onBlur',
},
detail: require('./detail/text-select').default,
},
diff --git a/src/apollo-table/component/base/edit/checkbox/index.tsx b/src/apollo-table/component/base/edit/checkbox/index.tsx
index 0f5ec025a6a53ea8f354ac52f78dcd47533d9886..a267635ff381280bf823be6b468966574694c666 100644
--- a/src/apollo-table/component/base/edit/checkbox/index.tsx
+++ b/src/apollo-table/component/base/edit/checkbox/index.tsx
@@ -42,10 +42,11 @@ const ApolloCheckboxGroup = (props: ApolloCheckboxGroupProps) => {
const { onChange, emitTrigger, onEmitChange } = props;
const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
const [value, setValue] = useState(props.value);
+ const dom = useRef(value);
useEffect(() => {
setValue(props.value);
}, [props.value]);
- const dom = useRef();
+
const changeValue = (value) => {
setValue(value);
dom.current = value;
diff --git a/src/apollo-table/component/base/edit/editInterface.tsx b/src/apollo-table/component/base/edit/editInterface.tsx
index 0e234235705e297351fb69cf9099d54ae1f399c4..84a3544a2b51986e0d4e537a6224b1c72a2e76ea 100644
--- a/src/apollo-table/component/base/edit/editInterface.tsx
+++ b/src/apollo-table/component/base/edit/editInterface.tsx
@@ -3,6 +3,7 @@ import { TextAreaProps, InputProps } from 'antd/es/input';
import { InputNumberProps } from 'antd/es/input-number';
import { SelectProps } from 'antd/es/select';
import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
+import { TreeSelectProps } from 'antd/es/tree-select';
export interface LinkData {
text?: string;
@@ -23,12 +24,15 @@ export interface ApolloLinkProps extends CommonProps {
export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
value: string | undefined;
}
-export interface SearchProps extends CommonProps {
+export interface ApolloSearchProps extends SelectProps, CommonProps {
type: string;
+ request: Function;
isMultiple?: boolean;
maxCount?: number;
- tableId?: number;
- paramsJson?: any;
+}
+export interface ApolloInputSearchProps extends SelectProps, CommonProps {
+ type: string;
+ request: Function;
}
export interface ApolloSelectProps extends SelectProps, CommonProps {
isMultiple?: boolean;
@@ -51,3 +55,8 @@ export interface ApolloCheckboxProps extends CheckboxProps, CommonProps {
label: string;
}
export interface ApolloCheckboxGroupProps extends CheckboxGroupProps, CommonProps {}
+export interface ApolloTreeSelectProps extends CommonProps {
+ isMultiple?: boolean;
+ onChange: Function;
+ value: any;
+}
diff --git a/src/apollo-table/component/base/edit/search/index.less b/src/apollo-table/component/base/edit/search/index.less
index 44b2ebb5dc594a4de6bd94ace6ac1e12120ae297..acaeaf73e596a66456872374132064c21c574d55 100644
--- a/src/apollo-table/component/base/edit/search/index.less
+++ b/src/apollo-table/component/base/edit/search/index.less
@@ -1,4 +1,19 @@
.searchContainer {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 0;
+ .select {
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ :global(.ant-select-selection--single) {
+ height: 100%;
+ border-radius: 0;
+ }
+ }
:global(.ant-select-selection--multiple .ant-select-selection__choice) {
background: rgb(233, 238, 249);
}
diff --git a/src/apollo-table/component/base/edit/search/index.tsx b/src/apollo-table/component/base/edit/search/index.tsx
index 4bf166fd11bd45228e144cc161e2f5a141b52313..8b0d262ddea96366a6037f310392f0cf437ecd55 100644
--- a/src/apollo-table/component/base/edit/search/index.tsx
+++ b/src/apollo-table/component/base/edit/search/index.tsx
@@ -1,42 +1,67 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import Search from '../../extra/associationSearch';
-import { approvalBusinessData } from '../../../../services/globalSearchApi';
-import s from './index.less';
import { message } from 'antd';
-import { SearchProps } from '../editInterface';
+import { ApolloSearchProps } from '../editInterface';
+import { antiAssign } from '@/apollo-table/utils/utils';
+import s from './index.less';
-export default function(props: SearchProps) {
- const { value = [], onChange, maxCount, isMultiple, paramsJson = {}, type, tableId } = props;
- const changeValue = (...arg) => {
- const currentValue = arg[0] || [];
- if (maxCount && maxCount <= value.length && currentValue.length > value.length) {
- message.warn(`最多选择${maxCount}`);
+const ApolloSearch = (props: ApolloSearchProps) => {
+ const { onChange, maxCount, isMultiple, request, type, emitTrigger, onEmitChange } = props;
+ const selfProps = antiAssign(props, [
+ 'columnConfig',
+ 'value',
+ 'onChange',
+ 'emitTrigger',
+ 'onEmitChange',
+ 'isMultiple',
+ 'options',
+ 'request',
+ ]);
+ const [value, setValue] = useState(props.value);
+ useEffect(() => {
+ setValue(props.value);
+ }, [props.value]);
+ const changeValue = (value) => {
+ if (maxCount && maxCount < value.length) {
+ message.warn(`最多选择${maxCount}个`);
return;
}
+ setValue(value);
if (typeof onChange === 'function') {
- onChange(...arg);
+ onChange(value, value);
+ }
+ if (!emitTrigger || emitTrigger === 'onChange') {
+ emitChange(value, value);
}
};
- if (tableId) {
- paramsJson.tableId = tableId;
+ const emitChange = (value, option) => {
+ if (typeof onEmitChange === 'function') {
+ onEmitChange(value, option);
+ }
+ };
+ const onBlur = () => {
+ emitChange(value, value);
+ };
+ if (emitTrigger === 'onBlur') {
+ selfProps.onBlur = onBlur;
+ }
+ if (isMultiple) {
+ selfProps.mode = 'multiple';
}
return (
{
- return approvalBusinessData({
- name: val,
- fieldValueName: type,
- paramsJson: JSON.stringify(paramsJson),
- });
+ return request({ name: val, fieldValueName: type });
}}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
- {...props}
+ {...selfProps}
+ value={value}
onChange={changeValue}
initDataType="onfocus"
/>
);
-}
+};
+export default ApolloSearch;
diff --git a/src/apollo-table/component/base/edit/text-select/index.less b/src/apollo-table/component/base/edit/text-select/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..acaeaf73e596a66456872374132064c21c574d55
--- /dev/null
+++ b/src/apollo-table/component/base/edit/text-select/index.less
@@ -0,0 +1,20 @@
+.searchContainer {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 0;
+ .select {
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ :global(.ant-select-selection--single) {
+ height: 100%;
+ border-radius: 0;
+ }
+ }
+ :global(.ant-select-selection--multiple .ant-select-selection__choice) {
+ background: rgb(233, 238, 249);
+ }
+}
diff --git a/src/apollo-table/component/base/edit/text-select/index.tsx b/src/apollo-table/component/base/edit/text-select/index.tsx
index ce90e9ca2b5ca0a8b1d9d32d2e1d8a9921359fb2..8a2346b0555ab460933d1e26cead23b80f6bb489 100644
--- a/src/apollo-table/component/base/edit/text-select/index.tsx
+++ b/src/apollo-table/component/base/edit/text-select/index.tsx
@@ -1,18 +1,69 @@
-import React from 'react';
-import Search from '../../extra/dataEntry/textSelect';
-import { approvalBusinessData } from '../../../../services/globalSearchApi';
-export default function(props) {
- const onChange = (...arg) => {
- props.onChange && props.onChange(...arg);
+import React, { useEffect, useRef, useState } from 'react';
+import InputSearch from '../../extra/dataEntry/textSelect';
+import { ApolloInputSearchProps } from '../editInterface';
+import { antiAssign } from '@/apollo-table/utils/utils';
+import s from './index.less';
+
+const ApolloInputSearch = (props: ApolloInputSearchProps) => {
+ const { onChange, request, type, emitTrigger, onEmitChange } = props;
+ const selfProps = antiAssign(props, [
+ 'columnConfig',
+ 'value',
+ 'onChange',
+ 'emitTrigger',
+ 'onEmitChange',
+ 'request',
+ ]);
+ const [value, setValue] = useState(props.value);
+ const dom = useRef(value);
+ useEffect(() => {
+ setValue(props.value);
+ }, [props.value]);
+ const changeValue = (value) => {
+ setValue(value);
+ dom.current = value;
+ if (typeof onChange === 'function') {
+ onChange(value, value);
+ }
+ if (!emitTrigger || emitTrigger === 'onChange') {
+ emitChange(value, value);
+ }
+ };
+ const emitChange = (value, option) => {
+ if (typeof onEmitChange === 'function') {
+ onEmitChange(value, option);
+ }
+ };
+ const onBlur = () => {
+ if (!dom.current) {
+ }
+ emitChange(dom.current, dom.current);
+ };
+ if (emitTrigger === 'onBlur') {
+ selfProps.onBlur = onBlur;
+ }
+ useEffect(() => {
+ document.addEventListener('click', onBlur, false);
+ return () => {
+ document.removeEventListener('click', onBlur, false);
+ };
+ }, []);
+ const onClick = (e) => {
+ e.stopPropagation(); //阻止事件冒泡
+ e.nativeEvent.stopImmediatePropagation();
};
return (
-
-
approvalBusinessData({ name: val, fieldValueName: props.type })}
+
+ request({ name: val, fieldValueName: type })}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
- {...props}
- onChange={onChange}
- >
+ {...selfProps}
+ onChange={changeValue}
+ value={value}
+ initDataType="onfocus"
+ />
);
-}
+};
+export default ApolloInputSearch;
diff --git a/src/apollo-table/component/base/edit/tree-select/index.less b/src/apollo-table/component/base/edit/tree-select/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..74288faaa9232ff445b8f147b69a76197f71e3c0
--- /dev/null
+++ b/src/apollo-table/component/base/edit/tree-select/index.less
@@ -0,0 +1,20 @@
+.container {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 0;
+ .search {
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ :global(.ant-select-selection--single) {
+ height: 100%;
+ border-radius: 0;
+ }
+ }
+ :global(.ant-select-selection--multiple .ant-select-selection__choice) {
+ background: rgb(233, 238, 249);
+ }
+}
diff --git a/src/apollo-table/component/base/edit/tree-select/index.tsx b/src/apollo-table/component/base/edit/tree-select/index.tsx
index 5346a9dba2fcfc2ea5328f687fbdd14e54748388..b678b136f14ec9387319693cc338358f97e80098 100644
--- a/src/apollo-table/component/base/edit/tree-select/index.tsx
+++ b/src/apollo-table/component/base/edit/tree-select/index.tsx
@@ -1,14 +1,70 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import Search from '../../extra/orgTreeSelect';
+import { ApolloTreeSelectProps } from '../editInterface';
+import { antiAssign } from '@/apollo-table/utils/utils';
+import s from './index.less';
-export default function(props) {
- const isMultiple = props.isMultiple || false;
+const ApolloTreeSelect = (props: ApolloTreeSelectProps) => {
+ const { onChange, emitTrigger, onEmitChange, isMultiple } = props;
+ debugger
+ const selfProps = antiAssign(props, [
+ 'columnConfig',
+ 'value',
+ 'onChange',
+ 'emitTrigger',
+ 'onEmitChange',
+ 'isMultiple',
+ ]);
+ const [value, setValue] = useState(props.value);
+ const dom = useRef(value);
+ useEffect(() => {
+ setValue(props.value);
+ }, [props.value]);
+ const changeValue = (value) => {
+ setValue(value);
+ dom.current = value;
+ if (typeof onChange === 'function') {
+ onChange(value, value);
+ }
+ if (!emitTrigger || emitTrigger === 'onChange') {
+ emitChange(value, value);
+ }
+ };
+ const emitChange = (value, option) => {
+ if (typeof onEmitChange === 'function') {
+ onEmitChange(value, option);
+ }
+ };
+ const onBlur = () => {
+ if (!dom.current) {
+ }
+ emitChange(dom.current, dom.current);
+ };
+ if (emitTrigger === 'onBlur') {
+ selfProps.onBlur = onBlur;
+ }
+ useEffect(() => {
+ document.addEventListener('click', onBlur, false);
+ return () => {
+ document.removeEventListener('click', onBlur, false);
+ };
+ }, []);
+ const onClick = (e) => {
+ e.stopPropagation(); //阻止事件冒泡
+ e.nativeEvent.stopImmediatePropagation();
+ };
return (
-
+
+
+
);
-}
+};
+export default ApolloTreeSelect;
diff --git a/src/apollo-table/component/base/extra/associationSearch/index.tsx b/src/apollo-table/component/base/extra/associationSearch/index.tsx
index dc4a96bcd5780c813b518c67fcb4f3a286f12b9f..82aeef1c7060d49eb71b06d5f21765a8b1762808 100644
--- a/src/apollo-table/component/base/extra/associationSearch/index.tsx
+++ b/src/apollo-table/component/base/extra/associationSearch/index.tsx
@@ -10,6 +10,7 @@ interface Props {
selfCom?: any;
dataSource?: [];
onChange: Function;
+ onBlur?: Function;
value?: any;
autoFocus?: boolean;
mode?: 'multiple' | 'tags' | undefined;
@@ -104,7 +105,11 @@ class AssociationSearch extends React.Component {
};
onBlur = () => {
+ const { onBlur } = this.props;
this.setState({ searchStr: '', canFocus: true });
+ if (typeof onBlur === 'function') {
+ onBlur();
+ }
};
formaterData = (data: any) => {
diff --git a/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx b/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx
index f89d55a76391db704b1596ff9c59f5c29d56aa3f..84b8e41fc10af911e28e574894caf1efde6885a7 100644
--- a/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx
+++ b/src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx
@@ -28,8 +28,8 @@ interface State {
searchStr: string;
list: any[];
loading: boolean;
- selected: any[] | undefined;
- tempSelected: any[] | undefined;
+ selected: any;
+ tempSelected: any;
tempVisible: boolean;
}
class TextSelect extends React.Component {
@@ -54,11 +54,11 @@ class TextSelect extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (JSON.stringify(nextProps.value) !== JSON.stringify(prevState.tempSelected)) {
- const [first] = nextProps.value || [];
- const searchStr = first ? first.label || first.text : '';
+ const data = nextProps.value || {};
+ const searchStr = data.label || data.text;
return {
- tempSelected: nextProps.value || [],
- selected: nextProps.value,
+ tempSelected: data,
+ selected: data,
searchStr,
};
}
@@ -106,7 +106,7 @@ class TextSelect extends React.Component {
};
onResetValue = (searchStr) => {
- return [{ value: '', label: searchStr }];
+ return { value: '', label: searchStr };
};
onSearch = (e) => {
@@ -126,7 +126,7 @@ class TextSelect extends React.Component {
onClickMenu = ({ item, key }) => {
const { props } = item || {};
const { title } = props || {};
- const selected = [{ label: title, value: key }];
+ const selected = { label: title, value: key };
this.setState({ selected, searchStr: title });
this.onVisibleChange(false);
this.onChange(selected);
@@ -162,7 +162,7 @@ class TextSelect extends React.Component {