Merge branch 'feat-select-tips' of github.com:ShuyunFF2E/cloud-react into feat-imageText-mly

Author: liyuan-meng

src/components/c-cascader/demos/basic.md

@@ -6,16 +6,18 @@ desc: 默认样式
 
 ```jsx
 import React, { useState, useEffect } from "react";
-import { CCascader } from "cloud-react";
+import { CCascader, Tooltip, Icon } from "cloud-react";
 const addressOptions = [
   {
     value: "zhejiang",
     label: "Zhejiang",
+    info: "说明",
 
     children: [
       {
         value: "hangzhou",
         label: "Hangzhou",
+        info: "说明",
         children: [
           {
             value: "xihu",
@@ -128,6 +130,23 @@ export default function Demo() {
         onChange={onChange}
         placeholder="Please select"
         style={{ width: 328 }}
+        optionRender={(option) => {
+          return (
+            <label title={option.title} style={{ display: "flex", gap: 4 }}>
+              {option.label}
+              {option.info && (
+                <Tooltip
+                  content={option.info}
+                  theme="light"
+                  placement="right"
+                  overlayStyle={{ zIndex: 10000 }}
+                >
+                  <Icon type="question-circle" />
+                </Tooltip>
+              )}
+            </label>
+          );
+        }}
       />
       <div style={{ marginBottom: 24, marginTop: 40 }}>任意选项支持选择</div>
       <CCascader

src/components/c-table/js/rowTooltip.js

@@ -60,6 +60,8 @@ class RowTooltip extends Component {
           tooltipEle,
           checkboxEle || radioEle,
           'top-left',
+          undefined,
+          'top',
         );
 
         const isInModal = document.querySelector(`.${prefixCls}-modal-mask`);

src/components/select/demos/info.md

@@ -0,0 +1,118 @@
+---
+order: 2
+title: 基本使用
+desc: 基本使用
+---
+
+```jsx
+/**
+ * title: 下拉选项释义
+ * desc: 下拉选项释义
+ */
+import React, { useState } from 'react';
+import { Select } from 'cloud-react';
+
+const Option = Select.Option;
+
+const dataList = [
+  {
+    label: 'JQuery',
+    value: '1',
+    selectInfo: 'JQueryJQueryJQueryJQueryJQueryJQueryJQueryJQueryJQuery'
+  },
+  {
+    label: 'Vue',
+    value: '2'
+  },
+  {
+    label: 'React',
+    value: '3',
+    selectInfo: 'ReactReactReactReactReactReactReactReactReact'
+  },
+  {
+    label: 'Angular',
+    value: '4',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular1',
+    value: '41',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular2',
+    value: '42',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular3',
+    value: '43',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular4',
+    value: '44',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular5',
+    value: '45',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular6',
+    value: '46',
+    selectInfo: '11212122'
+  },
+  {
+    label: 'Angular7',
+    value: '47',
+    selectInfo: '11212122'
+  },
+];
+
+export default function SelectDemo() {
+  const handleChange = (value, prevValue) => {
+    console.log('select --- ' + value);
+    console.log('prevSelect --- ' + prevValue);
+  };
+
+  return (
+    <div className="demo">
+      <div style={{ display: 'flex', gap: 30, flexWrap: 'wrap' }}>
+        <div>
+          <h5>单选</h5>
+          <Select
+            style={{ width: 328 }}
+            dropdownConfig={{
+              width: 328,
+              leftWidth: 128,
+              rightWidth: 200
+            }}
+            allowClear
+            onChange={handleChange}
+            dataSource={dataList}
+            // selectInfoKey="info"
+          />
+        </div>
+        <div>
+          <h5>多选</h5>
+          <Select
+            style={{ width: 328 }}
+            dropdownConfig={{
+              width: 328,
+              leftWidth: 148,
+              rightWidth: 180
+            }}
+            multiple
+            allowClear
+            onChange={handleChange}
+            dataSource={dataList}
+            // selectInfoKey="info"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+```

src/components/select/index.js

@@ -95,6 +95,7 @@ class Select extends Component {
       style: {},
       searchValue: '',
       isSearch: false,
+      hoveredOption: null,
     };
     this.node = React.createRef();
     this.optionsNode = React.createRef();
@@ -506,6 +507,10 @@ class Select extends Component {
     this.setState({ searchValue: v });
   };
 
+  onHoverChange = (item) => {
+    this.setState({ hoveredOption: item });
+  };
+
   renderOptions() {
     const { multiple, confirmTemplate, dataSource } = this.props;
     const { value } = this.state;
@@ -523,6 +528,8 @@ class Select extends Component {
           onSearchValueChange={this.onSearchValueChange}
           handleSelect={this.handleSelect}
           searchValue={this.state.searchValue}
+          onHoverChange={this.onHoverChange}
+          open={this.state.open}
         />
       );
     }
@@ -548,6 +555,8 @@ class Select extends Component {
         onChange={this.onSimpleOptionChange}
         searchValue={this.state.searchValue}
         onSearchValueChange={this.onSearchValueChange}
+        onHoverChange={this.onHoverChange}
+        open={this.state.open}
       />
     );
   }
@@ -567,9 +576,10 @@ class Select extends Component {
       supportUnlimited,
       formSize,
       dataSource,
+      dropdownConfig,
       ...otherProps
     } = this.props;
-    const { selected, open, style: popupStyle } = this.state;
+    const { selected, open, style: popupStyle, hoveredOption } = this.state;
     const { width } = this.selectedContainerStyle;
     const classNames = classnames(
       `${selector}`,
@@ -581,7 +591,13 @@ class Select extends Component {
       <div
         className={`${selector}-option-container ${dropdownClassName}`}
         ref={this.optionsNode}
-        style={{ ...popupStyle, width: `${width}px`, ...dropdownStyle }}
+        style={{
+          ...popupStyle,
+          width: hoveredOption?.[this.props.selectInfoKey]
+            ? dropdownConfig?.width
+            : dropdownConfig?.leftWidth || dropdownStyle?.width || `${width}px`,
+          ...dropdownStyle,
+        }}
       >
         {this.renderOptions()}
       </div>
@@ -676,6 +692,8 @@ Select.propTypes = {
   selectAllText: PropTypes.string,
   borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large']),
   checkboxStyle: PropTypes.object,
+  dropdownConfig: PropTypes.object,
+  selectInfoKey: PropTypes.string,
 };
 
 Select.defaultProps = {
@@ -726,6 +744,7 @@ Select.defaultProps = {
   selectAllText: '全选',
   borderRadiusSize: 'default',
   checkboxStyle: {},
+  selectInfoKey: 'selectInfo',
 };
 
 export default Select;

src/components/select/index.less

@@ -627,3 +627,33 @@
     font-size: 12px;
   }
 }
+
+
+.@{select-prefix-cls}-select-panel-container {
+  display: flex;
+  position: relative;
+
+  .@{select-prefix-cls}-info-panel {
+    position: relative;
+    left: -2px;
+    padding: 0 12px 14px 12px;
+    color: #222;
+    font-size: 14px;
+    line-height: 22px;
+    z-index: 10;
+    border-left: 1px solid #E8E8E8;
+
+    &-title {
+      font-weight: 600;
+      font-size: 16px;
+      margin-bottom: 8px;
+      word-break: break-all;
+    }
+
+    &-content {
+      color: #666;
+      white-space: pre-line;
+      word-break: break-all;
+    }
+  }
+}