From db21de1c54f1722d308abd278677b642a8f9a2b4 Mon Sep 17 00:00:00 2001 From: rickcole Date: Mon, 20 Apr 2020 11:33:06 +0800 Subject: [PATCH] =?UTF-8?q?nested-select=E6=94=AF=E6=8C=81=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=EF=BC=8C=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/renderers/Form/NestedSelect.md | 27 +- scss/components/form/_nested-select.scss | 40 ++- src/renderers/Form/NestedSelect.tsx | 353 ++++++++++++++++------- src/renderers/Page.tsx | 2 +- src/utils/helper.ts | 30 ++ 5 files changed, 323 insertions(+), 129 deletions(-) diff --git a/docs/renderers/Form/NestedSelect.md b/docs/renderers/Form/NestedSelect.md index aaebdc65..17a09c9f 100644 --- a/docs/renderers/Form/NestedSelect.md +++ b/docs/renderers/Form/NestedSelect.md @@ -2,18 +2,21 @@ 树形结构选择框。 -- `type` 请设置成 `nested-select` -- `options` 类似于 [select](./Select.md) 中 `options`, 并且支持通过 `children` 无限嵌套。 -- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。 -- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。 -- `joinValues` 默认为 `true` -- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。 -- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。 -- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。 -- `delimiter` 默认为 `,` -- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中，只在单选时有效 - - `autoFill`的格式为`{address: "${label}"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name` 为`address` 中 -- **还有更多通用配置请参考** [FormItem](./FormItem.md) +- `type` 请设置成 `nested-select` +- `options` 类似于 [select](./Select.md) 中 `options`, 并且支持通过 `children` 无限嵌套。 +- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。 +- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。 +- `searchable` 默认为 `false`, 是否可搜索 +- `joinValues` 默认为 `true` +- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。 +- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。 +- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。 +- `delimiter` 默认为 `,` +- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中，只在单选时有效 + - `autoFill`的格式为`{address: "${label}"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name` 为`address` 中 +- `cascade` 设置成 `true` 时当选中父节点时不自动选择子节点。 +- `withChildren` 是指成 `true`，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 +- **还有更多通用配置请参考** [FormItem](./FormItem.md) ```schema:height="300" scope="form-item" { diff --git a/scss/components/form/_nested-select.scss b/scss/components/form/_nested-select.scss index 6b8230ae..49d0574b 100644 --- a/scss/components/form/_nested-select.scss +++ b/scss/components/form/_nested-select.scss @@ -52,6 +52,12 @@ flex-grow: 1; } + .#{$ns}Select-arrow { + position: absolute; + right: 0; + top: px2rem(10px); + } + &-clear { padding: px2rem(3px); cursor: pointer; @@ -84,15 +90,25 @@ } } - &-menuOuter, - &-childrenOuter { - z-index: 10; - position: absolute; + &-menuOuter { + display: flex; + } + + &-menu { + width: 160px; + max-width: 160px; + max-height: px2rem(300px); background: $Form-select-menu-bg; color: $Form-select-menu-color; border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor; box-shadow: $Form-select-outer-boxShadow; + overflow-y: auto; + overflow-x: hidden; + + &:not(:first-child) { + border-left: 0; + } .#{$ns}NestedSelect-option { position: relative; @@ -100,6 +116,12 @@ height: $Form-input-height; line-height: $Form-input-height; cursor: pointer; + display: flex; + + > label { + flex: 1; + cursor: pointer; + } &.is-active { color: $Form-select-menu-onActive-color; @@ -125,14 +147,4 @@ } } } - - &-childrenOuter { - display: none; - position: relative; - width: 100%; - left: 100%; - transform: translateY(-$Form-input-height); - padding: 0; - margin: 0; - } } diff --git a/src/renderers/Form/NestedSelect.tsx b/src/renderers/Form/NestedSelect.tsx index 07e38f3d..115aaee7 100644 --- a/src/renderers/Form/NestedSelect.tsx +++ b/src/renderers/Form/NestedSelect.tsx @@ -6,10 +6,17 @@ import Checkbox from '../../components/Checkbox'; import PopOver from '../../components/PopOver'; import {RootCloseWrapper} from 'react-overlays'; import {Icon} from '../../components/icons'; -import {autobind, flattenTree, isEmpty} from '../../utils/helper'; +import { + autobind, + flattenTree, + isEmpty, + filterTreeWithChildren +} from '../../utils/helper'; import {dataMapping} from '../../utils/tpl-builtin'; - import {OptionsControl, OptionsControlProps, Option} from '../Form/Options'; +import Input from '../../components/Input'; +import {findDOMNode} from 'react-dom'; +import {cloneDeep} from 'lodash'; export interface NestedSelectProps extends OptionsControlProps { cascade?: boolean; @@ -18,6 +25,9 @@ export interface NestedSelectProps extends OptionsControlProps { export interface NestedSelectState { isOpened?: boolean; + isFocused?: boolean; + inputValue?: string; + stack?: Array; } export default class NestedSelectControl extends React.Component< @@ -26,12 +36,17 @@ export default class NestedSelectControl extends React.Component< > { static defaultProps: Partial = { cascade: false, - withChildren: false + withChildren: false, + searchPromptText: '输入内容进行检索' }; target: any; + input: HTMLInputElement; alteredOptions: any; state = { - isOpened: false + isOpened: false, + isFocused: false, + inputValue: '', + stack: [] }; @autobind @@ -41,9 +56,11 @@ export default class NestedSelectControl extends React.Component< @autobind open() { - if (!this.props.disabled) { + const {options, disabled} = this.props; + if (!disabled) { this.setState({ - isOpened: true + isOpened: true, + stack: [options] }); } } @@ -51,7 +68,8 @@ export default class NestedSelectControl extends React.Component< @autobind close() { this.setState({ - isOpened: false + isOpened: false, + stack: [] }); } @@ -101,6 +119,10 @@ export default class NestedSelectControl extends React.Component< onBulkChange } = this.props; + if (multiple) { + return; + } + e.stopPropagation(); const sendTo = @@ -120,7 +142,7 @@ export default class NestedSelectControl extends React.Component< !multiple && this.close(); } - handleCheck(option: any | Array) { + handleCheck(option: any | Array, index?: number) { const { onChange, selectedOptions, @@ -129,8 +151,27 @@ export default class NestedSelectControl extends React.Component< delimiter, extractValue, withChildren, - cascade + cascade, + multiple } = this.props; + const {stack} = this.state; + + if ( + option.children && + option.children.length && + typeof index === 'number' + ) { + const checked = selectedOptions.some(o => o.value == option.value); + const uncheckable = cascade + ? false + : option.uncheckable || (multiple && !checked); + const children = option.children.map(c => ({...c, uncheckable})); + if (stack[index]) { + stack.splice(index + 1, 1, children); + } else { + stack.push(children); + } + } const items = selectedOptions.concat(); let newValue; @@ -148,13 +189,18 @@ export default class NestedSelectControl extends React.Component< newValue = xorBy(items, [option], valueField || 'value'); } else if (withChildren) { option = flattenTree([option]); - const fn = option.every((opt: any) => !!~items.indexOf(opt)) + const fn = option.every( + (opt: any) => !!~items.findIndex(item => item.value === opt.value) + ) ? xorBy : unionBy; newValue = fn(items, option, valueField || 'value'); } else { - newValue = items.filter(item => !~flattenTree([option]).indexOf(item)); - !~items.indexOf(option) && newValue.push(option); + newValue = items.filter( + item => !~flattenTree([option], i => i.value).indexOf(item.value) + ); + !~items.map(item => item.value).indexOf(option.value) && + newValue.push(option); } } else { newValue = xorBy(items, [option], valueField || 'value'); @@ -172,22 +218,24 @@ export default class NestedSelectControl extends React.Component< } allChecked(options: Array): boolean { + const {selectedOptions, withChildren} = this.props; return options.every((option: any) => { - if (option.children) { + if (withChildren && option.children) { return this.allChecked(option.children); } - return this.props.selectedOptions.some( + return selectedOptions.some( selectedOption => selectedOption.value == option.value ); }); } partialChecked(options: Array): boolean { + const {selectedOptions, withChildren} = this.props; return options.some((option: any) => { - if (option.children) { + if (withChildren && option.children) { return this.partialChecked(option.children); } - return this.props.selectedOptions.some( + return selectedOptions.some( selectedOption => selectedOption.value == option.value ); }); @@ -198,11 +246,79 @@ export default class NestedSelectControl extends React.Component< reload && reload(); } - renderOptions( - newOptions: Array, - isChildren: boolean, - uncheckable: boolean - ): any { + @autobind + onFocus(e: any) { + this.props.disabled || + this.state.isOpened || + this.setState( + { + isFocused: true + }, + this.focus + ); + + this.props.onFocus && this.props.onFocus(e); + } + + @autobind + onBlur(e: any) { + this.setState({ + isFocused: false + }); + + this.props.onBlur && this.props.onBlur(e); + } + + @autobind + focus() { + this.input + ? this.input.focus() + : this.getTarget() && this.getTarget().focus(); + } + + @autobind + blur() { + this.input + ? this.input.blur() + : this.getTarget() && this.getTarget().blur(); + } + + @autobind + getTarget() { + if (!this.target) { + this.target = findDOMNode(this) as HTMLElement; + } + return this.target as HTMLElement; + } + + @autobind + inputRef(ref: HTMLInputElement) { + this.input = ref; + } + + @autobind + handleInputChange(evt: React.ChangeEvent) { + const inputValue = evt.currentTarget.value; + const {options, labelField, valueField} = this.props; + + let filtedOptions = + inputValue && this.state.isOpened + ? filterTreeWithChildren(cloneDeep(options), option => { + const reg = new RegExp(`${inputValue}`, 'i'); + return ( + reg.test(option[labelField || 'label']) || + reg.test(option[valueField || 'value']) + ); + }) + : options.concat(); + + this.setState({ + inputValue, + stack: [filtedOptions] + }); + } + + renderOptions(): any { const { multiple, selectedOptions, @@ -210,87 +326,119 @@ export default class NestedSelectControl extends React.Component< value, options, disabled, - cascade + searchable, + searchPromptText } = this.props; - if (multiple) { - let partialChecked = this.partialChecked(options); - let allChecked = this.allChecked(options); + const stack = this.state.stack; - return ( -
- {!isChildren ? ( -
- - 全选 - -
- ) : null} - {newOptions.map((option, idx) => { - const checked = selectedOptions.some(o => o.value == option.value); - const selfChecked = !!uncheckable || checked; - let nodeDisabled = !!uncheckable || !!disabled; + const searchInput = searchable ? ( +
+ + +
+ ) : null; - return ( -
- - {option.label} - - {option.children ? ( -
- -
- ) : null} - {option.children && option.children.length - ? this.renderOptions( - option.children, - true, - cascade ? false : uncheckable || (multiple && checked) - ) - : null} -
- ); - })} -
- ); - } + let partialChecked = this.partialChecked(options); + let allChecked = this.allChecked(options); return ( -
- {newOptions.map((option, idx) => ( -
- {option.label} - {option.children ? ( -
- + <> + {stack.map((options, index) => ( +
+ {index === 0 ? searchInput : null} + {multiple && index === 0 ? ( +
+ + 全选 +
) : null} - {option.children && option.children.length - ? this.renderOptions(option.children, true, false) - : null} + + {options.map((option, idx) => { + const checked = selectedOptions.some( + o => o.value == option.value + ); + const selfChecked = !!option.uncheckable || checked; + let nodeDisabled = !!option.uncheckable || !!disabled; + + return ( +
+ {multiple ? ( + + {option.label} + + ) : ( + {option.label} + )} + + {option.children && option.children.length ? ( +
+ +
+ ) : null} +
+ ); + })}
))} -
+ ); } + onMouseEnter(option: Option, index: number, e: MouseEvent) { + let {stack} = this.state; + let {cascade, multiple, selectedOptions} = this.props; + index = index + 1; + + if (option.children && option.children.length) { + const checked = selectedOptions.some(o => o.value == option.value); + const uncheckable = cascade + ? false + : option.uncheckable || (multiple && checked); + const children = option.children.map(c => ({...c, uncheckable})); + if (stack[index]) { + stack.splice(index, 1, children); + } else { + stack.push(children); + } + } else { + stack[index] && stack.splice(index, 1); + } + + this.setState({stack}); + } + renderOuter() { - const {popOverContainer, options, classnames: cx} = this.props; + const {popOverContainer, classnames: cx} = this.props; let body = ( - {this.renderOptions(options, false, false)} + {this.renderOptions()}
); - if (popOverContainer) { - return ( - this.target} show> - - {body} - - - ); - } - return body; + return ( + + + {body} + + + ); } render() { diff --git a/src/renderers/Page.tsx b/src/renderers/Page.tsx index e41fbfa4..6adf0d98 100644 --- a/src/renderers/Page.tsx +++ b/src/renderers/Page.tsx @@ -66,7 +66,7 @@ export default class Page extends React.Component { static propsList: Array = [ 'title', - 'subtitle', + 'subTitle', 'initApi', 'initFetchOn', 'initFetch', diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 3d0db117..df9c3b07 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -848,6 +848,36 @@ export function filterTree( }); } +/** + * 这个和 filterTree 的区别是，这个会保留 children 也符合匹配的节点 + * + * @param tree + * @param iterator + * @param level + */ +export function filterTreeWithChildren( + tree: Array, + iterator: (item: T, key: number, level: number) => boolean, + level: number = 1 +): Array { + return tree.filter((item, index) => { + if (iterator(item, index, level)) { + return true; + } + + if (item.children && item.children.splice) { + item.children = filterTreeWithChildren( + item.children, + iterator, + level + 1 + ); + return item.children?.length; + } + + return false; + }); +} + /** * 判断树中每个节点是否满足某个条件。 * @param tree