From 35ef2b0b2d4d9b3ea0b179aff801d528c73e6c6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:16:02 +0800 Subject: [PATCH 1/4] add tree-select --- components/tree-select/demo/basic.md | 55 ++++++++++++++ components/tree-select/demo/enhance.md | 99 ++++++++++++++++++++++++++ components/tree-select/index.jsx | 57 +++++++++++++++ components/tree-select/index.md | 28 ++++++++ index.js | 1 + package.json | 3 +- 6 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 components/tree-select/demo/basic.md create mode 100644 components/tree-select/demo/enhance.md create mode 100644 components/tree-select/index.jsx create mode 100644 components/tree-select/index.md diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md new file mode 100644 index 0000000000..211f7b4cf8 --- /dev/null +++ b/components/tree-select/demo/basic.md @@ -0,0 +1,55 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +import { TreeSelect } from 'antd'; +const TreeNode = TreeSelect.TreeNode; + +const Demo = React.createClass({ + getInitialState() { + return { + value: '1', + }; + }, + onChange(e) { + let value; + if (e.target) { + value = e.target.value; + } else { + value = e; + } + this.setState({value}); + }, + render() { + return ( +
+

Single Select

+ + + + + + + + sss} /> + + + +
+ ); + }, +}); + +ReactDOM.render( + +, document.getElementById('components-tree-select-demo-basic')); +```` diff --git a/components/tree-select/demo/enhance.md b/components/tree-select/demo/enhance.md new file mode 100644 index 0000000000..f6a3096996 --- /dev/null +++ b/components/tree-select/demo/enhance.md @@ -0,0 +1,99 @@ +# 更多功能 + +- order: 1 + +更多功能。 + +--- + +````jsx +import { TreeSelect } from 'antd'; +const TreeNode = TreeSelect.TreeNode; + +const x = 5; +const y = 3; +const z = 2; +const gData = []; +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({title: key, key: key}); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const __level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(__level, key, tns[index].children); + }); +}; +generateData(z); + +const Demo = React.createClass({ + getInitialState() { + return { + value: [], + }; + }, + onDeselect(selectedValue) { + console.log('onDeselect', selectedValue); + const newVal = [...this.state.value]; + newVal.splice(newVal.indexOf(selectedValue), 1); + this.setState({ + value: newVal, + }); + }, + onSelect(selectedKey, node, selectedKeys) { + console.log('selected: ', selectedKey, selectedKeys); + this.setState({ + value: selectedKeys, + }); + }, + onCheck(checkedKey, node, checkedKeys) { + console.log('onCheck:', checkedKey); + this.setState({ + value: checkedKeys, + }); + }, + render() { + const loop = data => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); + }; + const treeProps = { + showIcon: false, + showLine: true, + checkable: true, + defaultCheckedKeys: this.state.value, + defaultSelectedKeys: this.state.value, + // selectedKeys: this.state.value, + // checkedKeys: this.state.value, + // onCheck: this.onCheck, + }; + return (
+

more

+ + {loop(gData)} + +
); + }, +}); + +ReactDOM.render(
+ +
+, document.getElementById('components-tree-select-demo-enhance')); +```` diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx new file mode 100644 index 0000000000..aea1760da6 --- /dev/null +++ b/components/tree-select/index.jsx @@ -0,0 +1,57 @@ +import React from 'react'; +import TreeSelect, { TreeNode } from 'rc-tree-select'; +import classNames from 'classnames'; +import assign from 'object-assign'; +import animation from '../common/openAnimation'; + +const AntTreeSelect = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-select', + transitionName: 'slide-up', + optionLabelProp: 'value', + choiceTransitionName: 'zoom', + showSearch: false, + size: 'default' + }; + }, + render() { + const props = this.props; + let { + size, className, combobox, notFoundContent + } = this.props; + + const cls = classNames({ + 'ant-select-lg': size === 'large', + 'ant-select-sm': size === 'small', + [className]: !!className, + }); + + if (combobox) { + notFoundContent = null; + } + + const treeProps = { + prefixCls: 'ant-tree', + checkable: false, + showIcon: false, + openAnimation: animation + }; + assign(treeProps, props.treeProps); + + let checkable = treeProps.checkable; + if (checkable) { + treeProps.checkable = ; + } + + return ( + + ); + } +}); + +AntTreeSelect.TreeNode = TreeNode; +export default AntTreeSelect; diff --git a/components/tree-select/index.md b/components/tree-select/index.md new file mode 100644 index 0000000000..3e4cf4e5e1 --- /dev/null +++ b/components/tree-select/index.md @@ -0,0 +1,28 @@ +# TreeSelect + +- category: Components +- chinese: 树选择控件 +- type: 表单 + +--- + +## 何时使用 + +当需要从树控件中灵活地筛选数据时 + +## API + +### Tree props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|multiple | 是否支持多选 | bool | false | +|[select-props](http://ant.design/components/select/#select-props) | the same as select props | || +|treeProps | 和tree props相同（除了onSelect、onCheck） | | [tree-props](http://ant.design/components/tree/#tree-props) | + +### TreeNode props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|value | default as optionFilterProp | String | 'value' | +|[treenode-props](http://ant.design/components/tree/#treenode-props) |和 treeNode props 相同||| diff --git a/index.js b/index.js index 0b5a8bbbbc..0b37921669 100644 --- a/index.js +++ b/index.js @@ -29,6 +29,7 @@ const antd = { Alert: require('./components/alert'), Validation: require('./components/validation'), Tree: require('./components/tree'), + TreeSelect: require('./components/tree-select'), Upload: require('./components/upload'), Badge: require('./components/badge'), Menu: require('./components/menu'), diff --git a/package.json b/package.json index e136f00b41..d81846da3c 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "rc-tabs": "~5.5.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", - "rc-tree": "~0.19.0", + "rc-tree": "^0.21.2", + "rc-tree-select": "~0.2.1", "rc-trigger": "~1.0.6", "rc-upload": "~1.7.0", "rc-util": "~3.0.1", From fb111e585a504b29464a37d8ef342b95e2b64e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:19:02 +0800 Subject: [PATCH 2/4] fix demo --- components/tree-select/demo/basic.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index 211f7b4cf8..01b94d91e2 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -37,10 +37,10 @@ const Demo = React.createClass({ - + - - sss} /> + + sss} key="random3" /> From edad25b8f656099dd178fcff5f68470668113ae3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Tue, 29 Dec 2015 15:33:09 +0800 Subject: [PATCH 3/4] up demo --- components/tree-select/demo/basic.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index 01b94d91e2..e395225ae8 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -13,7 +13,7 @@ const TreeNode = TreeSelect.TreeNode; const Demo = React.createClass({ getInitialState() { return { - value: '1', + value: 'leaf1', }; }, onChange(e) { @@ -30,14 +30,14 @@ const Demo = React.createClass({

Single Select

- - + + sss} key="random3" /> From f40d5ff36b53493d9422645b90c76d9a7d007b2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Thu, 31 Dec 2015 14:38:35 +0800 Subject: [PATCH 4/4] big change --- components/tree-select/demo/basic.md | 2 +- components/tree-select/demo/enhance.md | 42 +- components/tree-select/index.jsx | 20 +- components/tree-select/index.md | 31 +- package.json | 4 +- style/components/index.less | 1 + style/components/treeSelect.less | 580 +++++++++++++++++++++++++ 7 files changed, 632 insertions(+), 48 deletions(-) create mode 100644 style/components/treeSelect.less diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index e395225ae8..4562aade6f 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -32,7 +32,7 @@ const Demo = React.createClass({ diff --git a/components/tree-select/demo/enhance.md b/components/tree-select/demo/enhance.md index f6a3096996..cd6e59543a 100644 --- a/components/tree-select/demo/enhance.md +++ b/components/tree-select/demo/enhance.md @@ -10,9 +10,9 @@ import { TreeSelect } from 'antd'; const TreeNode = TreeSelect.TreeNode; -const x = 5; -const y = 3; -const z = 2; +const x = 3; +const y = 2; +const z = 1; const gData = []; const generateData = (_level, _preKey, _tns) => { const preKey = _preKey || '0'; @@ -40,27 +40,19 @@ generateData(z); const Demo = React.createClass({ getInitialState() { return { - value: [], + value: ['0-0'], }; }, - onDeselect(selectedValue) { - console.log('onDeselect', selectedValue); - const newVal = [...this.state.value]; - newVal.splice(newVal.indexOf(selectedValue), 1); - this.setState({ - value: newVal, - }); - }, onSelect(selectedKey, node, selectedKeys) { console.log('selected: ', selectedKey, selectedKeys); this.setState({ value: selectedKeys, }); }, - onCheck(checkedKey, node, checkedKeys) { - console.log('onCheck:', checkedKey); + onChange(value) { + console.log('selected ' + value); this.setState({ - value: checkedKeys, + value: value, }); }, render() { @@ -72,20 +64,18 @@ const Demo = React.createClass({ return ; }); }; - const treeProps = { - showIcon: false, - showLine: true, - checkable: true, - defaultCheckedKeys: this.state.value, - defaultSelectedKeys: this.state.value, - // selectedKeys: this.state.value, - // checkedKeys: this.state.value, - // onCheck: this.onCheck, + const tProps = { + // defaultValue: this.state.value, + value: this.state.value, + onChange: this.onChange, + onSelect: this.onSelect, + multiple: true, + // treeCheckable: true, + treeDefaultExpandAll: true, }; return (

more

- + {loop(gData)}
); diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index aea1760da6..56e1d5ccc0 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,13 +1,13 @@ import React from 'react'; import TreeSelect, { TreeNode } from 'rc-tree-select'; import classNames from 'classnames'; -import assign from 'object-assign'; -import animation from '../common/openAnimation'; +// import assign from 'object-assign'; +// import animation from '../common/openAnimation'; const AntTreeSelect = React.createClass({ getDefaultProps() { return { - prefixCls: 'ant-select', + prefixCls: 'ant-tree-select', transitionName: 'slide-up', optionLabelProp: 'value', choiceTransitionName: 'zoom', @@ -31,22 +31,14 @@ const AntTreeSelect = React.createClass({ notFoundContent = null; } - const treeProps = { - prefixCls: 'ant-tree', - checkable: false, - showIcon: false, - openAnimation: animation - }; - assign(treeProps, props.treeProps); - - let checkable = treeProps.checkable; + let checkable = props.treeCheckable; if (checkable) { - treeProps.checkable = ; + checkable = ; } return ( ); diff --git a/components/tree-select/index.md b/components/tree-select/index.md index 3e4cf4e5e1..8f389fc216 100644 --- a/components/tree-select/index.md +++ b/components/tree-select/index.md @@ -16,13 +16,34 @@ | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -|multiple | 是否支持多选 | bool | false | -|[select-props](http://ant.design/components/select/#select-props) | the same as select props | || -|treeProps | 和tree props相同（除了onSelect、onCheck） | | [tree-props](http://ant.design/components/tree/#tree-props) | +| value | 指定当前选中的条目 | string/Array | 无 | +| defaultValue | 指定默认选中的条目 | string/Array | 无 | +| multiple | 支持多选 | boolean | false | +| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false | +| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 | +| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 | +| allowClear | 显示清除按钮 | boolean | false | +| onSearch | 文本框值变化时回调 | function(value: String) | | +| placeholder | 选择框默认文字 | string | 无 | +| searchPlaceholder | 搜索框默认文字 | string | 无 | +| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | +| combobox | 输入框自动提示模式 | boolean | false | +| size | 选择框大小，可选 `large` `small` | String | default | +| showSearch | 在下拉中显示搜索框 | boolean | false | +| disabled | 是否禁用 | boolean | false | +| treeDefaultExpandAll | 默认展开所有树节点 | bool | false | +| treeCheckable | 显示checkbox | bool | false | +| filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - | +| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' | +| treeNodeLabelProp | 作为显示的prop设置 | String | 'value' | +| loadData | 异步加载数据 | function(node) | - | ### TreeNode props | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -|value | default as optionFilterProp | String | 'value' | -|[treenode-props](http://ant.design/components/tree/#treenode-props) |和 treeNode props 相同||| +| disabled | 是否禁用 | Boolean | false | +| key | 此项必须设置 | String | | +| value | 默认根据此属性值进行筛选 | String | - | +| title | 树节点显示的内容 | String | '---' | +| isLeaf | 是否是叶子节点 | bool | false | diff --git a/package.json b/package.json index d81846da3c..51d55791fa 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,8 @@ "rc-tabs": "~5.5.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", - "rc-tree": "^0.21.2", - "rc-tree-select": "~0.2.1", + "rc-tree": "^0.23.1", + "rc-tree-select": "^0.3.3", "rc-trigger": "~1.0.6", "rc-upload": "~1.7.0", "rc-util": "~3.0.1", diff --git a/style/components/index.less b/style/components/index.less index 0048394171..fb3d57d20b 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -27,6 +27,7 @@ @import "tag"; @import "alert"; @import "tree"; +@import "treeSelect"; @import "carousel/slick"; @import "carousel/slick-theme"; @import "upload"; diff --git a/style/components/treeSelect.less b/style/components/treeSelect.less new file mode 100644 index 0000000000..6bf36e14f3 --- /dev/null +++ b/style/components/treeSelect.less @@ -0,0 +1,580 @@ +@tree-select-tree-prefix-cls: ant-tree-select-tree; +.antCheckboxFn(@checkbox-prefix-cls: ant-tree-select-tree-checkbox); +@import "../mixins/iconfont"; +.antTreeSwitcherIcon() { + position: relative; + &:after { + .iconfont-size-under-12px(6px); + content: '\e611'; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + position: absolute; + top: 10px; + right: 4px; + color: #666; + transition: transform .3s ease; + } +} +.@{tree-select-tree-prefix-cls} { + margin: 0; + padding: 5px; + font-size: 12px; + li { + padding: 0; + margin: 0; + list-style: none; + white-space: nowrap; + outline: 0; + ul { + margin: 0; + padding: 0 0 0 18px; + } + a { + display: inline-block; + padding: 1px 4px; + border-radius: 2px; + margin: 0; + cursor: pointer; + height: 20px; + text-decoration: none; + vertical-align: top; + color: #666; + } + span { + &.@{tree-select-tree-prefix-cls}-checkbox { + margin: 3px 4px 0 0; + } + &.@{tree-select-tree-prefix-cls}-switcher-noop, + &.@{tree-select-tree-prefix-cls}-switcher, + &.@{tree-select-tree-prefix-cls}-iconEle { + line-height: 0; + margin: 0; + width: 16px; + height: 18px; + display: inline-block; + vertical-align: middle; + border: 0 none; + cursor: pointer; + outline: none; + } + &.@{tree-select-tree-prefix-cls}-icon_loading { + &:after { + content: '\e6a1'; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + .animation(loadingCircle 1s infinite linear); + margin-top: 8px; + } + } + &.@{tree-select-tree-prefix-cls}-switcher { + &-disabled { + background: #fff; + position: relative; + &:after { + content: '-'; + position: absolute; + top: 8px; + left: 6px; + color: gray; + } + } + &.@{tree-select-tree-prefix-cls}-roots_open, + &.@{tree-select-tree-prefix-cls}-center_open, + &.@{tree-select-tree-prefix-cls}-bottom_open, + &.@{tree-select-tree-prefix-cls}-noline_open { + .antTreeSwitcherIcon(); + } + &.@{tree-select-tree-prefix-cls}-roots_close, + &.@{tree-select-tree-prefix-cls}-center_close, + &.@{tree-select-tree-prefix-cls}-bottom_close, + &.@{tree-select-tree-prefix-cls}-noline_close { + .antTreeSwitcherIcon(); + .ie-rotate(3); + &:after { + transform: rotate(270deg) scale(0.5); + } + } + } + } + } + &-child-tree { + display: none; + &-open { + display: block; + } + } + &-treenode-disabled { + >span, + >a { + color: gray; + } + } + &-node-selected { + background-color: tint(@primary-color, 90%); + } + &-icon__open { + margin-right: 2px; + vertical-align: top; + } + &-icon__close { + margin-right: 2px; + vertical-align: top; + } +} + + +@tree-select-prefix-cls: ant-tree-select; + +@duration: .3s; + +@import "../mixins/iconfont"; +//mixin +.selection__clear() { + cursor: pointer; + float: right; + font-weight: bold; +} + +.@{tree-select-prefix-cls} { + box-sizing: border-box; + display: inline-block; + margin: 0; + position: relative; + vertical-align: middle; + color: #666; + font-size: @font-size-base; + + > ul > li > a { + padding: 0; + background-color: #fff; + } + + // arrow + &-arrow { + .iconfont-mixin(); + position: absolute; + top: 50%; + right: 8px; + line-height: 1; + margin-top: -5px; + .iconfont-size-under-12px(8px); + + * { + display: none; + } + + &:before { + content: '\e603'; + transition: transform 0.2s ease; + } + } + + &-selection { + outline: none; + user-select: none; + + box-sizing: border-box; + display: block; + + background-color: #fff; + border-radius: @border-radius-base; + border: 1px solid #d9d9d9; + .transition(all .3s @ease-in-out); + + &:hover { + .hover; + } + &:active { + .active; + } + } + + &-disabled { + color: #ccc; + } + + &-disabled &-selection { + &:hover, + &:active { + border-color: #d9d9d9; + } + } + + &-disabled &-selection--single { + cursor: not-allowed; + } + + &-selection--single { + height: 28px; + cursor: pointer; + + .@{tree-select-prefix-cls}-selection__rendered { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 8px; + padding-right: 24px; + line-height: 26px; + } + + .@{tree-select-prefix-cls}-selection__clear { + .selection__clear(); + } + + .@{tree-select-prefix-cls}-selection__placeholder { + color: #ccc; + } + } + + &-lg { + .ant-select-selection--single { + height: 32px; + .ant-select-selection__rendered { + line-height: 30px; + } + } + + .ant-select-selection--multiple { + min-height: 32px; + .ant-select-selection__rendered { + li { + height: 24px; + .ant-select-selection__choice__content { + font-size: 14px; + line-height: 24px; + } + } + } + } + } + + &-sm { + .ant-select-selection--single { + height: 22px; + .ant-select-selection__rendered { + line-height: 20px; + } + } + .ant-select-selection--multiple { + min-height: 22px; + .ant-select-selection__rendered { + li { + height: 14px; + .ant-select-selection__choice__content { + line-height: 14px; + position: relative; + top: -3px; + } + .ant-select-selection__choice__remove { + position: relative; + top: -4px; + } + } + } + } + } + + &-disabled &-selection__choice__remove { + color: #ccc; + cursor: default; + &:hover { + color: #ccc; + } + } + + &-search__field__wrap { + display: inline-block; + position: relative; + } + + &-search__field__placeholder { + position: absolute; + top: 0; + left: 3px; + color: #aaa; + } + + &-search--inline { + float: left; + + .@{tree-select-prefix-cls}-search__field__wrap { + width: 100%; + } + + .@{tree-select-prefix-cls}-search__field { + border: 0; + font-size: 100%; + background: transparent; + outline: 0; + } + > i { + float: right; + } + } + + &-selection--multiple { + min-height: 28px; + cursor: text; + + .@{tree-select-prefix-cls}-search__field__placeholder { + top: 6px; + left: 10px; + } + + .@{tree-select-prefix-cls}-search--inline { + width: auto; + .@{tree-select-prefix-cls}-search__field { + width: 0.75em; + } + } + + .@{tree-select-prefix-cls}-selection__rendered { + overflow: hidden; + text-overflow: ellipsis; + padding-left: 6px; + padding-bottom: 4px; + } + + .@{tree-select-prefix-cls}-selection__clear { + .selection__clear(); + margin-top: 5px; + margin-right: 10px; + } + + > ul > li { + margin-top: 4px; + height: 20px; + line-height: 20px; + } + + .@{tree-select-prefix-cls}-selection__choice { + background-color: #f3f3f3; + border-radius: 4px; + cursor: default; + float: left; + padding: 0 15px; + margin-right: 4px; + max-width: 99%; + position: relative; + overflow: hidden; + transition: padding @duration @ease-in-out; + padding: 0 20px 0 10px; + } + + .@{tree-select-prefix-cls}-selection__choice__content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + transition: margin @duration @ease-in-out; + } + + .@{tree-select-prefix-cls}-selection__choice__remove { + .iconfont-mixin(); + color: #999; + line-height: 20px; + cursor: pointer; + display: inline-block; + font-weight: bold; + transition: all 0.3s @ease-in-out; + .iconfont-size-under-12px(8px); + position: absolute; + right: 4px; + padding: 0 0 0 8px; + &:hover { + color: #404040; + } + &:before { + content: "\e62d"; + } + } + } + + &-open { + .@{tree-select-prefix-cls}-arrow { + .ie-rotate(2); + -ms-transform: rotate(180deg); + &:before { + .rotate(180deg); + } + } + .@{tree-select-prefix-cls}-selection { + .active(); + } + } + + &-combobox { + .@{tree-select-prefix-cls}-arrow { + display: none; + } + .@{tree-select-prefix-cls}-search--inline { + height: 100%; + float: none; + } + .@{tree-select-prefix-cls}-search__field__placeholder { + left: 10px; + cursor: text; + } + .@{tree-select-prefix-cls}-search__field__wrap { + width: 100%; + height: 100%; + } + .@{tree-select-prefix-cls}-search__field { + padding: 0 10px; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + } + .@{tree-select-prefix-cls}-selection__rendered { + padding: 0; + height: 100%; + } + } +} + +.@{tree-select-prefix-cls}-dropdown { + &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, + &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { + animation-name: antSlideUpIn; + } + + &.slide-up-enter.slide-up-enter-active&-placement-topLeft, + &.slide-up-appear.slide-up-appear-active&-placement-topLeft { + animation-name: antSlideDownIn; + } + + &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { + animation-name: antSlideUpOut; + } + + &.slide-up-leave.slide-up-leave-active&-placement-topLeft { + animation-name: antSlideDownOut; + } + + &-hidden { + display: none; + } + + background-color: white; + border: 1px solid #d9d9d9; + box-shadow: @box-shadow-base; + border-radius: @border-radius-base; + box-sizing: border-box; + z-index: 1070; + left: -9999px; + top: -9999px; + position: absolute; + outline: none; + overflow: hidden; + font-size: @font-size-base; + + &-menu { + outline: none; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + max-height: 250px; + overflow: auto; + + &-item-group-list { + margin: 0; + padding: 0; + + > .@{tree-select-prefix-cls}-dropdown-menu-item { + padding-left: 24px; + } + } + + &-item-group-title { + color: #999; + line-height: 1.5; + padding: 8px 15px; + } + + &-item { + position: relative; + display: block; + padding: 7px 15px; + font-weight: normal; + color: #666; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + transition: background 0.3s ease; + + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + &:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + &:hover, + &-active { + background-color: tint(@primary-color, 90%); + } + + &-selected { + background-color: tint(@primary-color, 80%); + &:hover { + background-color: tint(@primary-color, 80%); + } + } + + &-disabled { + color: #ccc; + cursor: not-allowed; + + &:hover { + color: #ccc; + background-color: #fff; + cursor: not-allowed; + } + } + + &-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + background-color: #e5e5e5; + line-height: 0; + } + } + } + + &-container-open, + &-open { + .@{tree-select-prefix-cls}-dropdown { + display: block; + } + } + + .@{tree-select-prefix-cls}-dropdown-search { + display: block; + padding: 4px; + .@{tree-select-prefix-cls}-search__field__placeholder { + left: 7px; + top: 5px; + } + .@{tree-select-prefix-cls}-search__field__wrap { + width: 100%; + } + .@{tree-select-prefix-cls}-search__field { + padding: 4px 7px; + width: 100%; + box-sizing: border-box; + border: 1px solid #d9d9d9; + border-radius: 4px; + outline: none; + } + &.@{tree-select-prefix-cls}-search--hide { + display: none; + } + } +}