diff --git a/src/components/c-cascader/demos/basic.md b/src/components/c-cascader/demos/basic.md index c64b1fd5..d362c4f1 100644 --- a/src/components/c-cascader/demos/basic.md +++ b/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 ( + + ); + }} />
任意选项支持选择
{ + console.log('select --- ' + value); + console.log('prevSelect --- ' + prevValue); + }; + + return ( +
+
+
+
单选
+ +
+
+
+ ); +} +``` diff --git a/src/components/select/index.js b/src/components/select/index.js index 41b31298..3b0567fe 100644 --- a/src/components/select/index.js +++ b/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 {
{this.renderOptions()}
@@ -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; diff --git a/src/components/select/index.less b/src/components/select/index.less index 55fa922b..dc60e884 100644 --- a/src/components/select/index.less +++ b/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; + } + } +} diff --git a/src/components/select/index.md b/src/components/select/index.md index 394e8a96..9ff7f6f3 100644 --- a/src/components/select/index.md +++ b/src/components/select/index.md @@ -26,42 +26,61 @@ group: ### Select Props -| 属性 | 说明 | 类型 | 默认值 | -| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ----------------- | -| allowClear | 是否支持一键清除 | boolean | false | -| multiple | 是否为多选 | boolean | false | -| disabled | 下拉禁用状态 | boolean | false | -| size | 输入框大小，可选值为 `large` `default` `small` | string | `default` | -| dataSource | 需要展示的数据，dataSource 和 children 同时存在时以 children 为准 | array | [] | -| labelKey | 指定使用的 label 键值，仅在使用 dataSource 生成组件时生效 | string | 'label' | -| valueKey | 指定使用的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | -| descKey | 指定次要信息的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | -| defaultOpen | 默认下拉菜单展开状态 | boolean | false | -| open | 下拉菜单展开状态，当使用此属性时组件本身 open 行为失效 | boolean | false | -| placeholder | 选择框默认文案 | string | - | -| searchable | 支持搜索 | boolean | false | -| showTag | 多选下拉已选项为 tag 形式，如果设置成 `false`，则已选项为逗号分隔的形式，超长展示省略号 | boolean | true | -| scrollSelected | 设置 `scrollSelected` 为 `true`，则已选项超长可滚动 | boolean | false | -| scrollItem | 设置 `scrollItem` 为 `true`，则下拉选项超长可滚动 | boolean | false | -| maxTagCount | 多选下拉最多显示多少个 tag | number | 1 | -| maxHeight | 多选下拉框最大高度 | number | - | -| searchPlaceholder | 搜索框默认文案 | string | - | -| emptyRender | 数据为空时下拉框显示内容 | string \| node | '暂无数据'+缺省图 | -| defaultValue | 默认选中的项 | string \| number \| array | - | -| value | 选中的项 | string \| number \| array | - | -| labelInValue | 是否把每个选项的 label 包装到 value 中 | boolean | false | -| hasSelectAll | 多选时是否有全选 | boolean | false | -| hasConfirmButton | 多选时是否有确认按钮 | boolean | false | -| isSupportTitle | 鼠标 hover 选项是否显示完整内容 | boolean | false | -| okBtnText | 多选时确认操作按钮文案 | string | '确认' | -| cancelBtnText | 多选时取消操作按钮文案 | string | '取消' | -| className | 组件的 className 属性 | string | - | -| trigger | 下拉触发方式，支持 click 和 hover | string | 'click' | -| showArrow | 下拉 icon 是否显示 | boolean | true | -| showSelectStyle | 选择器样式是否显示 | boolean | true | -| isAppendToBody | 下拉框是否渲染在 body 上 | boolean | false | -| position | 下拉框定位：`top` `bottom` `auto`（是否启用自动定位，如需使用可设置为`auto`） | string | `bottom` | -| onChange | 选中 option 变化时回调此函数，普通单选树回调包含第三个参数返回当前点击选项的原始数据，如不使用 dataSource 生成组件，则需手动指定 option 的 item 属性 | function(value, oldValue) | - | +| 属性 | 说明 | 类型 | 默认值 | +| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------ | ----------------- | --- | +| allowClear | 是否支持一键清除 | boolean | false | +| multiple | 是否为多选 | boolean | false | +| disabled | 下拉禁用状态 | boolean | false | +| size | 输入框大小，可选值为 `large` `default` `small` | string | `default` | +| dataSource | 需要展示的数据，dataSource 和 children 同时存在时以 children 为准 | array | [] | +| labelKey | 指定使用的 label 键值，仅在使用 dataSource 生成组件时生效 | string | 'label' | +| valueKey | 指定使用的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | +| descKey | 指定次要信息的 value 键值，仅在使用 dataSource 生成组件时生效 | string | 'value' | +| defaultOpen | 默认下拉菜单展开状态 | boolean | false | +| open | 下拉菜单展开状态，当使用此属性时组件本身 open 行为失效 | boolean | false | +| placeholder | 选择框默认文案 | string | - | +| searchable | 支持搜索 | boolean | false | +| showTag | 多选下拉已选项为 tag 形式，如果设置成 `false`，则已选项为逗号分隔的形式，超长展示省略号 | boolean | true | +| scrollSelected | 设置 `scrollSelected` 为 `true`，则已选项超长可滚动 | boolean | false | +| scrollItem | 设置 `scrollItem` 为 `true`，则下拉选项超长可滚动 | boolean | false | +| maxTagCount | 多选下拉最多显示多少个 tag | number | 1 | +| maxHeight | 多选下拉框最大高度 | number | - | +| searchPlaceholder | 搜索框默认文案 | string | - | +| emptyRender | 数据为空时下拉框显示内容 | string \ | node | '暂无数据'+缺省图 | +| defaultValue | 默认选中的项 | string \ | number \ | array | - | +| value | 选中的项 | string \ | number \ | array | - | +| labelInValue | 是否把每个选项的 label 包装到 value 中 | boolean | false | +| hasSelectAll | 多选时是否有全选 | boolean | false | +| hasConfirmButton | 多选时是否有确认按钮 | boolean | false | +| isSupportTitle | 鼠标 hover 选项是否显示完整内容 | boolean | false | +| okBtnText | 多选时确认操作按钮文案 | string | '确认' | +| cancelBtnText | 多选时取消操作按钮文案 | string | '取消' | +| className | 组件的 className 属性 | string | - | +| trigger | 下拉触发方式，支持 click 和 hover | string | 'click' | +| showArrow | 下拉 icon 是否显示 | boolean | true | +| showSelectStyle | 选择器样式是否显示 | boolean | true | +| isAppendToBody | 下拉框是否渲染在 body 上 | boolean | false | | +| position | 下拉框定位：`top` `bottom` `auto`（是否启用自动定位，如需使用可设置为`auto`） | string | `bottom` | +| onChange | 选中 option 变化时回调此函数，普通单选树回调包含第三个参数返回当前点击选项的原始数据，如不使用 dataSource 生成组件，则需手动指定 option 的 item 属性 | function(value, oldValue) | - | +| onOk | 多选时确认操作回调函数 | function(value: array, oldValue: array) | - | +| onCancel | 多选时取消操作回调函数 | function | - | +| onSearch | 搜索文本框变化时回调此函数 | function(value: string) | - | +| onSelectOpen | 下拉选择框弹开的时候回调此函数 | function | - | +| onSelectClose | 下拉选择框关闭的时候回调此函数 | function | - | +| onBeforeChange | 确认选择值之前回调此函数，仅支持单选 | function(value) | - | +| confirmTemplate | 自定义确认取消按钮模板(适用于多选下拉) | function:({ onOk, onCancel }) | 组件默认模板 | +| supportLightText | 是否支持搜索高亮关键字 | boolean | false | +| lightTextColor | 高亮关键字颜色 | string | #0055CC | +| supportUnlimited | 多选下拉是否支持不限 | boolean | false | +| unlimitedLabel | 修改"不限"文本 | string | 不限 | +| dropdownClassName | 下拉框类名 | string | - | +| dropdownStyle | 下拉框样式 | object | {} | +| selectAllText | 全选文案 | string | '全选' | +| borderRadiusSize | 边框圆角 `default` `medium` `large` | string | `default` | +| optionRender | 自定义下拉回填选项 | function | - | +| checkboxStyle | 多选框样式 | object | {} | +| dropdownConfig | 下拉框配置，使用方法查看 `下拉选项释义demo` | object | {} | +| selectInfoKey | 下拉释义字段 key | string | `selectInfo` | ### Option Props @@ -110,6 +129,10 @@ group: +### 下拉选项释义 + + + ### 自定义下拉选项 diff --git a/src/components/select/views/option.js b/src/components/select/views/option.js index 048665d8..4143d075 100644 --- a/src/components/select/views/option.js +++ b/src/components/select/views/option.js @@ -26,6 +26,8 @@ export default function Option(props) { scrollItem, searchable, optionRender, + onHover = noop, + item, ...otherProps } = props; @@ -56,6 +58,7 @@ export default function Option(props) { if (disabled) return; onChange(props); + onHover(null); }; const classNames = classnames( `${selector}-option ${scrollItem ? 'scroll-item' : 'overflow-ellipsis'}`, @@ -63,18 +66,34 @@ export default function Option(props) { className, ); + const handleMouseEnter = () => { + if (onHover && item) { + onHover(item); + } + }; + const handleMouseLeave = () => { + if (onHover) { + onHover(null); + } + }; + if (multiple) { const { value, children, checkboxStyle } = otherProps; return hideCheckbox ? ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions ) : ( -