V9 select

packages/zent/src/select/KeySelect.tsx

@@ -0,0 +1,67 @@
+import Select, { ISelectCommonProps } from './Select';
+import { useMemo, useCallback } from 'react';
+
+type IValueType = number | string;
+type IValue = IValueType | IValueType[] | null;
+
+interface ISelectProps extends ISelectCommonProps {
+  value?: IValue;
+  onChange?: (value: IValue) => void;
+}
+
+export const KeySelect = ({
+  value = null,
+  onChange,
+  options,
+  ...restProps
+}: ISelectProps) => {
+  const validValue = useMemo(() => {
+    if (value === null) {
+      return null;
+    }
+    if (!Array.isArray(value)) {
+      const item = options.find(v => v.key === value);
+      if (item) {
+        return {
+          key: value,
+          text: item.text,
+        };
+      }
+      return {
+        key: value,
+        text: value,
+      };
+    }
+    return value.reduce((old, key) => {
+      const item = options.find(v => v.key === key);
+      if (item) {
+        const v = {
+          key,
+          text: item.text,
+        };
+        old.push(v);
+      }
+      return old;
+    }, []);
+  }, [options, value]);
+  const keysOnChange = useCallback(
+    value => {
+      if (value === null) {
+        return onChange(null);
+      }
+      if (!Array.isArray(value)) {
+        return onChange(value.key);
+      }
+      return onChange(value.map(v => v.key));
+    },
+    [onChange]
+  );
+  return (
+    <Select
+      value={validValue}
+      onChange={keysOnChange}
+      options={options}
+      {...restProps}
+    />
+  );
+};

packages/zent/src/select/demos/12.key-select.md

@@ -0,0 +1,64 @@
+---
+order: 12
+zh-CN:
+	title: value为key值的keySelect
+en-US:
+	title: select value with key
+---
+
+```js
+import { KeySelect, Button } from 'zent';
+
+const options = [
+	{ key: '1', text: 'Option 1' },
+	{ key: '2', text: 'Option 2' },
+	{ key: '3', text: 'Option 3' },
+];
+
+class Demo extends Component {
+	state = {
+		value: '1',
+		multiValue: null
+	};
+
+	onChange = value => {
+    console.log('value change', value);
+		this.setState({
+			value,
+		});
+	};
+
+  onMutiChange = multiValue => {
+		console.log('mutl value change', multiValue);
+		this.setState({
+			multiValue,
+		});
+	}
+
+	render() {
+		const { value, multiValue } = this.state;
+		return (
+			<div>
+				<KeySelect
+					placeholder="请选择"
+					options={options}
+					onChange={this.onChange}
+					value={value}
+					clearable
+				/>
+				<br/>
+				<KeySelect
+					placeholder="请选择"
+					options={options}
+					onChange={this.onMutiChange}
+					value={multiValue}
+					clearable
+					multiple
+				/>
+			</div>
+		);
+	}
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```

packages/zent/src/select/index.ts

@@ -1,6 +1,7 @@
 import Select from './Select';
 
 export * from './Select';
+export * from './KeySelect';
 
 export type { ISelectTagListProps } from './TagList';