diff --git a/.storybook/stories/Components/Select.stories.mdx b/.storybook/stories/Components/Select.stories.mdx index 9c7411d0..36c03846 100644 --- a/.storybook/stories/Components/Select.stories.mdx +++ b/.storybook/stories/Components/Select.stories.mdx @@ -65,6 +65,10 @@ Basic usages for `Select` component.
Normal
+ShowTip
+ +Disabled
diff --git a/src/components/Select/Option.jsx b/src/components/Select/Option.jsx index 8f3a536d..88f8eb56 100644 --- a/src/components/Select/Option.jsx +++ b/src/components/Select/Option.jsx @@ -39,15 +39,25 @@ export default class Option extends React.Component { }; renderContent = () => { - const { multi, children } = this.props; + const { multi, children, showTip } = this.props; return multi ? ( <> {this.renderCheckbox()} - {children} + + {children} + > ) : ( <> - {children} + + {children} + {this.renderIcon()} > ); diff --git a/src/components/Select/Select.jsx b/src/components/Select/Select.jsx index db41812d..44d1bf94 100644 --- a/src/components/Select/Select.jsx +++ b/src/components/Select/Select.jsx @@ -46,6 +46,7 @@ export default class Select extends React.Component { valueRenderer: PropTypes.func, dorpdownRender: PropTypes.func, disableRemoteSearch: PropTypes.bool, + showTip: PropTypes.bool, }; static defaultProps = { @@ -63,6 +64,7 @@ export default class Select extends React.Component { onChange() {}, onPaging() {}, disableRemoteSearch: false, + showTip: false, }; state = { @@ -494,7 +496,7 @@ export default class Select extends React.Component { renderOption = (options) => { const { value } = this.state; - const { multi, optionRenderer } = this.props; + const { multi, optionRenderer, showTip } = this.props; const isActive = (v) => multi ? value.includes(v.value) : v.disabled ? false : v.value === value; @@ -515,6 +517,7 @@ export default class Select extends React.Component { onClick={this.handleOptionClick} isActive={isActive(item)} option={item} + showTip={showTip} > {optionRenderer ? optionRenderer(item) : item.label} @@ -524,8 +527,9 @@ export default class Select extends React.Component { }; renderInput = () => { - const { searchable, name, placeholder, multi } = this.props; - const { inputVisible, inputValue, value } = this.state; + const { searchable, name, placeholder, multi, showTip } = this.props; + const { inputVisible, inputValue, value, options } = this.state; + const multiClassName = multi && searchable ? classNames("select-input", { @@ -544,6 +548,19 @@ export default class Select extends React.Component { : "" : localePlaceholder; + let option = { label: value, value }; + options.forEach((item) => { + if (item.value === value) { + option = item; + } else if (item.options) { + item.options.forEach((op) => { + if (op.value === value) { + option = op; + } + }); + } + }); + return (