feat: Select add showTip to show option title (#229)

kubesphere · May 28, 2024 · dc7541a · dc7541a
1 parent d9cfeea
commit dc7541a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/.storybook/stories/Components/Select.stories.mdx b/.storybook/stories/Components/Select.stories.mdx
@@ -65,6 +65,10 @@ Basic usages for `Select` component.
             <p>Normal</p>
             <Select name="select" options={options3} value={43200} />
           </div>
+          <div>
+            <p>ShowTip</p>
+            <Select name="select" options={options3} showTip={true} />
+          </div>
           <div style={{ marginTop: "10px" }}>
             <p>Disabled</p>
             <Select name="select" disabled options={options} />

diff --git 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()}
-        <span className="select-option-label">{children}</span>
+        <span
+          className="select-option-label"
+          title={showTip ? children || "" : ""}
+        >
+          {children}
+        </span>
       </>
     ) : (
       <>
-        <span className="select-option-label">{children}</span>
+        <span
+          className="select-option-label"
+          title={showTip ? children || "" : ""}
+        >
+          {children}
+        </span>
         {this.renderIcon()}
       </>
     );

diff --git 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}
           </Option>
@@ -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 (
       <div className={multiClassName}>
         <input
@@ -554,6 +571,7 @@ export default class Select extends React.Component {
           onChange={this.handleInputChange}
           readOnly={!searchable}
           autoComplete="off"
+          title={showTip ? option?.label || "" : ""}
         />
         <span className="select-input-search" ref={this.inputValueRef}>
           {inputValue}