diff --git a/README.md b/README.md index 9c963d01..45c2a04e 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ 目前在百度大量用于内部平台的前端开发，已有 100+ 部门使用，创建了 2.5w+ 页面。 通过 amis 搭建自己的后台系统，可以参考这： https://github.com/fex-team/amis-admin -包含：fis3版本、webpack版本和 jssdk 版本。 +包含：fis3 版本、webpack 版本和 jssdk 版本。 ## 快速开始 @@ -13,6 +13,8 @@ ## 开发指南 +> 如果 github 下载慢可以使用 [gitee](https://gitee.com/baidu/amis) 上的镜像。 + 推荐使用 node 10，node 6 和 node 8 也可以。node 12 未测试，可能 fis3 还有些插件不支持。 ```bash @@ -46,9 +48,9 @@ npm run coverage ## 维护者 -- [2betop](https://github.com/2betop) -- [RickCole21](https://github.com/RickCole21) -- [catchonme](https://github.com/catchonme) +- [2betop](https://github.com/2betop) +- [RickCole21](https://github.com/RickCole21) +- [catchonme](https://github.com/catchonme) ## 讨论 diff --git a/docs/renderers/Form/NestedSelect.md b/docs/renderers/Form/NestedSelect.md index aaebdc65..c53393da 100644 --- a/docs/renderers/Form/NestedSelect.md +++ b/docs/renderers/Form/NestedSelect.md @@ -1,19 +1,20 @@ ### NestedSelect -树形结构选择框。 +嵌套选择框。 -- `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` 默认为 `,` +- `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..77d0ad4d 100644 --- a/src/renderers/Form/NestedSelect.tsx +++ b/src/renderers/Form/NestedSelect.tsx @@ -6,10 +6,12 @@ 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, filterTree} from '../../utils/helper'; import {dataMapping} from '../../utils/tpl-builtin'; - -import {OptionsControl, OptionsControlProps, Option} from '../Form/Options'; +import {OptionsControl, OptionsControlProps} from '../Form/Options'; +import {Option, Options} from '../../components/Select'; +import Input from '../../components/Input'; +import {findDOMNode} from 'react-dom'; export interface NestedSelectProps extends OptionsControlProps { cascade?: boolean; @@ -18,6 +20,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 +31,16 @@ export default class NestedSelectControl extends React.Component< > { static defaultProps: Partial = { cascade: false, - withChildren: false + withChildren: false, + searchPromptText: '输入内容进行检索' }; target: any; - alteredOptions: any; - state = { - isOpened: false + input: HTMLInputElement; + state: NestedSelectState = { + isOpened: false, + isFocused: false, + inputValue: '', + stack: [] }; @autobind @@ -41,9 +50,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 +62,8 @@ export default class NestedSelectControl extends React.Component< @autobind close() { this.setState({ - isOpened: false + isOpened: false, + stack: [] }); } @@ -101,6 +113,10 @@ export default class NestedSelectControl extends React.Component< onBulkChange } = this.props; + if (multiple) { + return; + } + e.stopPropagation(); const sendTo = @@ -120,7 +136,7 @@ export default class NestedSelectControl extends React.Component< !multiple && this.close(); } - handleCheck(option: any | Array) { + handleCheck(option: Option | Options, index?: number) { const { onChange, selectedOptions, @@ -129,11 +145,33 @@ export default class NestedSelectControl extends React.Component< delimiter, extractValue, withChildren, - cascade + cascade, + multiple } = this.props; + const {stack} = this.state; + + if ( + !Array.isArray(option) && + option.children && + option.children.length && + typeof index === 'number' + ) { + const checked = selectedOptions.some( + o => o.value == (option as 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; + let newValue: Option | Options | string; // 三种情况： // 1.全选，option为数组 @@ -148,46 +186,56 @@ 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: Option) => !!~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 as Option).value).indexOf( + item.value + ) + ); + !~items.map(item => item.value).indexOf(option.value) && + newValue.push(option); } } else { newValue = xorBy(items, [option], valueField || 'value'); } if (joinValues) { - newValue = newValue - .map((item: any) => item[valueField || 'value']) + newValue = (newValue as Options) + .map(item => item[valueField || 'value']) .join(delimiter || ','); } else if (extractValue) { - newValue = newValue.map((item: any) => item[valueField || 'value']); + newValue = (newValue as Options).map(item => item[valueField || 'value']); } onChange(newValue); } - allChecked(options: Array): boolean { - return options.every((option: any) => { - if (option.children) { + allChecked(options: Options): boolean { + const {selectedOptions, withChildren} = this.props; + return options.every(option => { + 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 { - return options.some((option: any) => { - if (option.children) { + partialChecked(options: Options): boolean { + const {selectedOptions, withChildren} = this.props; + return options.some(option => { + 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,83 @@ 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; + + const regexp = new RegExp(`${inputValue}`, 'i'); + + let filtedOptions = + inputValue && this.state.isOpened + ? filterTree( + options, + option => + regexp.test(option[labelField || 'label']) || + regexp.test(option[valueField || 'value']) || + !!(option.children && option.children.length), + 1, + true + ) + : options.concat(); + + this.setState({ + inputValue, + stack: [filtedOptions] + }); + } + + renderOptions() { const { multiple, selectedOptions, @@ -210,87 +330,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: Option, idx: number) => { + 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 4631a1ef..6d040cbd 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -833,19 +833,32 @@ export function getTree( export function filterTree( tree: Array, iterator: (item: T, key: number, level: number) => boolean, - level: number = 1 + level: number = 1, + depthFirst: boolean = false ) { - return tree.filter((item, index) => { - if (!iterator(item, index, level)) { - return false; - } + if (depthFirst) { + return tree + .map(item => { + let children: TreeArray | undefined = item.children + ? filterTree(item.children, iterator, level + 1, depthFirst) + : undefined; + children && (item = {...item, children: children}); + return item; + }) + .filter((item, index) => iterator(item, index, level)); + } - if (item.children && item.children.splice) { - item.children = filterTree(item.children, iterator, level + 1); - } - - return true; - }); + return tree + .filter((item, index) => iterator(item, index, level)) + .map(item => { + if (item.children && item.children.splice) { + item = { + ...item, + children: filterTree(item.children, iterator, level + 1, depthFirst) + }; + } + return item; + }); } /**