fix: remove useless option and fix the Select value logic

Author: wewoor

src/components/select/option.tsx

@@ -7,7 +7,7 @@ import { selectClassName } from './select';
 
 export interface ISelectOption extends ComponentProps<'option'> {
     value?: string;
-    title?: string;
+    name?: string;
     description?: string;
     disabled?: boolean;
 }
@@ -23,6 +23,7 @@ export function Option(props: ISelectOption) {
         className,
         value,
         title,
+        name,
         description,
         disabled,
         children,
@@ -34,16 +35,16 @@ export function Option(props: ISelectOption) {
         className,
         disabled ? selectOptionDisabledClassName : ''
     );
-    const content = children || title;
     return (
         <div
             className={claNames}
-            title={content}
+            title={title}
+            data-name={name || children}
             data-value={value}
             data-desc={description}
             {...(custom as any)}
         >
-            {content}
+            {children}
         </div>
     );
 }

src/components/select/select.tsx

@@ -34,15 +34,14 @@ export interface ISelect extends ComponentProps<any> {
 const initialValue = {
     isOpen: false,
     option: {
-        title: '',
+        name: '',
         value: '',
         description: '',
     },
 };
 
 type IState = {
     isOpen: boolean;
-    lastUpdate?: number;
     option: ISelectOption;
 };
 
@@ -65,7 +64,7 @@ export class Select extends PureComponent<ISelect, IState> {
         this.contextView = useContextView({
             shadowOutline: false,
         });
-        this.state = this.getDefaultState();
+        this.state = this.getDefaultState(this.props);
         this.selectElm = React.createRef();
         this.selectInput = React.createRef();
     }
@@ -80,48 +79,50 @@ export class Select extends PureComponent<ISelect, IState> {
         });
     }
 
-    public getDefaultState() {
-        const defaultSelectedOption: ISelectOption = {};
-        const options = Children.toArray(this.props.children);
+    public getDefaultState(props) {
+        let defaultSelectedOption: ISelectOption = {};
+        const defaultValue = props.value || props.defaultValue;
+        const options = Children.toArray(props.children);
         for (const option of options) {
             if (isValidElement(option)) {
                 const optionProps = option.props as ISelectOption;
                 if (
                     optionProps.value &&
-                    optionProps.value === this.props.defaultValue
+                    optionProps.value === defaultValue
                 ) {
-                    defaultSelectedOption.title = optionProps.children as string;
-                    defaultSelectedOption.value = optionProps.value;
+                    defaultSelectedOption = { ...optionProps, name: optionProps.name || optionProps.children as string };
                     break;
                 }
             }
         }
         return {
             ...initialValue,
-            option: defaultSelectedOption,
+            option: { ...defaultSelectedOption },
         };
     }
 
     public handleOnClickOption = (e: React.MouseEvent) => {
         const option = e.target as HTMLDivElement;
         const value = getAttr(option, 'data-value');
-        const title = getAttr(option, 'title');
+        const name = getAttr(option, 'data-name');
         const desc = getAttr(option, 'data-desc');
-        const optionItem: ISelectOption = {
-            value: value,
-            title: title,
-            description: desc,
-        };
-
-        this.setState(
-            {
-                option: optionItem,
-            },
-            () => {
-                this.props.onSelect?.(e, optionItem);
-                this.contextView.hide();
-            }
-        );
+        if (name) {
+            const optionItem: ISelectOption = {
+                value: value,
+                name: name,
+                description: desc,
+            };
+
+            this.setState(
+                {
+                    option: optionItem,
+                },
+                () => {
+                    this.props.onSelect?.(e, optionItem);
+                    this.contextView.hide();
+                }
+            );
+        }
     };
 
     public handleOnHoverOption = (e: React.MouseEvent) => {
@@ -173,11 +174,7 @@ export class Select extends PureComponent<ISelect, IState> {
         const { option, isOpen } = this.state;
         const {
             className,
-            children,
-            defaultValue = '',
             placeholder,
-            value,
-            onSelect,
             ...custom
         } = this.props;
 
@@ -192,7 +189,7 @@ export class Select extends PureComponent<ISelect, IState> {
                     autoComplete="off"
                     placeholder={placeholder}
                     className={inputClassName}
-                    value={option.title}
+                    value={option.name}
                     readOnly
                 />
                 <span className={selectArrowClassName}>

stories/components/15-Select.stories.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { propsTable } from '../common/propsTable';
 import { Select, Option } from 'mo/components/select';
+import { useState } from 'react';
 
 const stories = storiesOf('Select', module);
 stories.addDecorator(withKnobs);
@@ -20,9 +21,14 @@ const propDefinitions = [
 stories.add(
     'Basic Usage',
     () => {
+        const [selectedVal3, setSelectedVal3] = useState('');
         const onSelectOption = (e, option) => {
             console.log('onSelectOption', e, option);
+            if (option) {
+                setSelectedVal3(option.value)
+            }
         };
+
         return (
             <div
                 style={{
@@ -74,6 +80,28 @@ stories.add(
                             option - 4
                         </Option>
                     </Select>
+
+                    <h3>使用示例 - 3 Change Select Value</h3>
+                    <Select
+                        id="demo3"
+                        style={{
+                            width: 200,
+                            color: 'rgba(255, 255, 255, 0.4)',
+                            background: '#252526',
+                        }}
+                        placeholder="请选择"
+                        value={selectedVal3}
+                        key={`demo3-${selectedVal3}`}
+                        defaultValue={"1"}
+                        onSelect={onSelectOption}
+                    >
+                        <Option value="1">option - 1</Option>
+                        <Option value="2">option - 2</Option>
+                        <Option value="3">option - 3</Option>
+                        <Option value="4" description="Test option one">
+                            option - 4
+                        </Option>
+                    </Select>
                 </div>
             </div>
         );