Refactor TreeSelect #113
Refactor TreeSelect #113
Conversation
README.md
Outdated
| @@ -67,7 +67,8 @@ online example: http://react-component.github.io/tree-select/ | |||
| |maxTagTextLength | max tag text length to show | number | - | | |||
| |multiple | whether multiple select (true when enable treeCheckable) | bool | false | | |||
| |disabled | whether disabled select | bool | false | | |||
| |inputValue | if enable search, you can set default input's value, if set to null, auto clear input value when finish select/unselect operation | string/null | '' | | |||
| |inputValue | [Deprecated] Please use `searchValue` instead. | string/null | '' | | |||
| const { valueList, valueEntities, keyEntities, filteredTreeNodes } = nextProps; | ||
|
|
||
| const newState = { | ||
| prevProps: nextProps, |
| $treeNodes = treeNodes; | ||
| } | ||
|
|
||
| let $tree; |
There was a problem hiding this comment.
@afc163 ， 用 $ 来表示 element 相关变量会比较容易区分些 😕
src/Base/BasePopup.jsx
Outdated
| treeIcon, treeLine, treeCheckable, treeCheckStrictly, multiple, | ||
| loadData, | ||
| ariaId, | ||
|
|
src/Base/BasePopup.jsx
Outdated
| expandedKeys={expandedKeyList} | ||
|
|
||
| filterTreeNode={this.filterTreeNode} | ||
|
|
src/Base/BaseSelector.jsx
Outdated
|
|
||
| renderArrow() { | ||
| const { prefixCls, showArrow } = this.props; | ||
| if (!showArrow) return null; |
src/Base/BaseSelector.jsx
Outdated
| onClick={onClick} | ||
| className={classNames({ | ||
| [className]: !!className, | ||
| [prefixCls]: 1, |
src/Base/BaseSelector.jsx
Outdated
|
|
||
| ref={this.domRef} | ||
|
|
||
| role="combobox" |
src/Popup/MultiplePopup.jsx
Outdated
|
|
||
| MultiplePopup.propTypes = BasePopup.propTypes; | ||
|
|
||
| export default MultiplePopup; |
There was a problem hiding this comment.
这个直接 MultiplePopup = BasePopup 是不是就可以了。
src/Popup/SinglePopup.jsx
Outdated
| renderPlaceholder = () => { | ||
| const { searchPlaceholder, searchValue, prefixCls } = this.props; | ||
|
|
||
| if (!searchPlaceholder) return null; |
src/Popup/SinglePopup.jsx
Outdated
| <BasePopup | ||
| {...this.props} | ||
|
|
||
| renderSearch={this.renderSearch} |
| } else { | ||
| inputNode.style.width = ''; | ||
| static getDerivedStateFromProps(nextProps, prevState) { | ||
| const { prevProps = {} } = prevState; |
There was a problem hiding this comment.
发现这里用到了，这个东西直接放 this 下好了，放 state 里好像意义不大。
There was a problem hiding this comment.
static 方法拿不到 this，用了 getDerivedStateFromProps 要对比的内容都需要在 state 里存着。
|
把 antd 的也升了吧。 |
|
update: update2: |
|
@zombieJ |
|
@hye ，api 文档 |
|
这个默认行为感觉有问题，我觉得可以改。 |
|
不过有个坑，如果 title 给的是 ReactNode，其实是没法搜索的。value 限定了 string 类型。 默认行为可以优化为这样，treeNodeFilterProp 默认为 title。如果 treeNodeFilterProp 为 title 时， title 是 string 类型，那么按 title 搜索，否则 fallback 为 value 搜索。 |
|
我想法是改进一下这个属性，可以接受一个数组。默认做成 |
修复的东西有点多，中文写描述了。
另外，TreeSelect 允许在 Tree 没有初始化时就可以设置 Value，这一块我还会多加一些 Test Case 来校验。代码可以先 Review 起来了~
inputValuedeprecated（仍然支持）。推荐用searchValue代替以和 Select 组件的autoClearSearchValue匹配autoClearSearchValue属性，以和Select组件匹配open现在是完全可控的了searchValue现在是完全可控的了treeDataSimpleMode会丢失节点的问题label改为 deprecated 以避免和 title 冲突（仍然支持）animate会被 re-render 影响 （rc-trigger@3.0.0-rc, rc-aniamte@3.0.0-rc）dropdownMatchSelectWidth逻辑，现在默认会展示足够空间treeDataSimpleMode，用空间换效率。treeDataSimpleMode同treeData一样都是 props 更新才会触发的行为onDeselect逻辑，而非某些情况下才会触发