From a4d07a5aec55fb102e7534584a61c0945d3170f6 Mon Sep 17 00:00:00 2001 From: liaoxuezhi Date: Sun, 10 Nov 2019 11:18:22 +0800 Subject: [PATCH] =?UTF-8?q?Tree=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/form/_tree.scss | 14 +++- src/components/Tree.tsx | 116 +++++++++++++++++------------- src/renderers/Form/Options.tsx | 9 ++- src/renderers/Form/Tree.tsx | 5 +- src/renderers/Form/TreeSelect.tsx | 1 + src/utils/helper.ts | 13 ++++ 6 files changed, 105 insertions(+), 53 deletions(-) diff --git a/scss/components/form/_tree.scss b/scss/components/form/_tree.scss index c3274746..8949898e 100644 --- a/scss/components/form/_tree.scss +++ b/scss/components/form/_tree.scss @@ -54,6 +54,15 @@ } } + &-rootItem { + line-height: $Tree-itemHeight; + } + + &-item>div:hover>.#{$ns}Tree-item-icons, + &-rootItem>div:hover>.#{$ns}Tree-item-icons { + visibility: visible; + } + &-itemLabel { &:hover { background: $Tree-item-onHover-bg; @@ -200,7 +209,6 @@ &-itemLabel { user-select: none; - cursor: pointer; &.is-checked, &.is-children-checked { @@ -212,6 +220,10 @@ } } + &-itemText { + cursor: pointer; + } + &-placeholder { color: $text--muted-color; } diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx index fce4bee8..7982fabf 100644 --- a/src/components/Tree.tsx +++ b/src/components/Tree.tsx @@ -5,7 +5,14 @@ */ import React from 'react'; -import {eachTree, isVisible, autobind, findTreeIndex} from '../utils/helper'; +import { + eachTree, + isVisible, + autobind, + findTreeIndex, + hasAbility, + createObject +} from '../utils/helper'; import {Option, Options, value2array} from './Checkboxes'; import {ClassNamesFn, themeable} from '../theme'; import {highlight} from '../renderers/Form/Options'; @@ -35,10 +42,10 @@ interface TreeSelectorProps { // 名称、取值等字段名映射 labelField: string; valueField: string; - iconField?: string; - unfoldedField?: string; - foldedField?: string; - disabledField?: string; + iconField: string; + unfoldedField: string; + foldedField: string; + disabledField: string; className?: string; itemClassName?: string; @@ -59,6 +66,7 @@ interface TreeSelectorProps { // 是否为内建 增、改、删。当有复杂表单的时候直接抛出去让外层能统一处理 bultinCUD?: boolean; + rootCreatable?: boolean; creatable?: boolean; onAdd?: ( idx?: number | Array, @@ -444,16 +452,16 @@ export class TreeSelector extends React.Component< showRadio, multiple, disabled, - labelField: nameField = '', - valueField = '', - iconField = '', - disabledField = '', + labelField, + valueField, + iconField, + disabledField, cascade, selfDisabledAffectChildren, onlyChildren, classnames: cx, highlightTxt, - options: data, + options, maxLength, minLength, creatable, @@ -471,7 +479,7 @@ export class TreeSelector extends React.Component< let childrenChecked = 0; let ret = list.map((item, key) => { - if (!isVisible(item as any, data)) { + if (!isVisible(item as any, options)) { return null; } @@ -584,12 +592,13 @@ export class TreeSelector extends React.Component< ) : null} {highlightTxt - ? highlight(item[nameField], highlightTxt) - : item[nameField]} + ? highlight(item[labelField], highlightTxt) + : item[labelField]} + {!nodeDisabled && !isAdding && !isEditing ? (
- {creatable ? ( + {creatable && hasAbility(item, 'creatable') ? ( ) : null} - {removable ? ( + + {removable && hasAbility(item, 'removable') ? ( ) : null} - {editable ? ( + + {editable && hasAbility(item, 'editable') ? ( - - - 添加一级节点 - - + + + 添加一级节点 + ); } return (
- {data && data.length ? ( + {options && options.length ? (
    {hideRoot ? ( <> @@ -687,34 +698,43 @@ export class TreeSelector extends React.Component< {isAdding && !addingParent ? (
  • {this.renderInput()}
    • ) : null} - {this.renderList(data, value, false).dom} + {this.renderList(options, value, false).dom} ) : (
  • - - {showIcon ? ( - +
      {isAdding && !addingParent ? (
    • {this.renderInput()}
      • ) : null} - {this.renderList(data, value, false).dom} + {this.renderList(options, value, false).dom}
    • )} diff --git a/src/renderers/Form/Options.tsx b/src/renderers/Form/Options.tsx index 675845fb..2a0d36de 100644 --- a/src/renderers/Form/Options.tsx +++ b/src/renderers/Form/Options.tsx @@ -67,6 +67,7 @@ export interface OptionsProps extends FormControlProps, OptionProps { editControls?: Array; deleteApi?: Api; deleteConfirmText?: string; + optionLabel?: string; } export function registerOptionsControl(config: OptionsConfig) { @@ -478,6 +479,7 @@ export function registerOptionsControl(config: OptionsConfig) { disabled, labelField, onOpenDialog, + optionLabel, addApi, source, data, @@ -509,7 +511,7 @@ export function registerOptionsControl(config: OptionsConfig) { : await onOpenDialog( { type: 'dialog', - title: createBtnLabel || '新增选项', + title: createBtnLabel || `新增${optionLabel || '选项'}`, body: { type: 'form', api: addApi, @@ -580,7 +582,8 @@ export function registerOptionsControl(config: OptionsConfig) { editApi, source, data, - formItem: model + formItem: model, + optionLabel } = this.props; if (disabled || !model) { @@ -603,7 +606,7 @@ export function registerOptionsControl(config: OptionsConfig) { : await onOpenDialog( { type: 'dialog', - title: '编辑选项', + title: `编辑${optionLabel || '选项'}`, body: { type: 'form', api: editApi, diff --git a/src/renderers/Form/Tree.tsx b/src/renderers/Form/Tree.tsx index c84c23a7..b3566707 100644 --- a/src/renderers/Form/Tree.tsx +++ b/src/renderers/Form/Tree.tsx @@ -15,6 +15,7 @@ export interface TreeProps extends OptionsControlProps { onlyChildren?: boolean; // 选父级的时候，是否只把子节点的值包含在内 addControls?: Array; updateControls?: Array; + rootCreatable?: boolean; } export default class TreeControl extends React.Component { @@ -63,7 +64,8 @@ export default class TreeControl extends React.Component { editable, editControls, removable, - onDelete + onDelete, + rootCreatable } = this.props; return ( @@ -97,6 +99,7 @@ export default class TreeControl extends React.Component { selfDisabledAffectChildren={false} onAdd={onAdd} creatable={creatable} + rootCreatable={rootCreatable} onEdit={onEdit} editable={editable} removable={removable} diff --git a/src/renderers/Form/TreeSelect.tsx b/src/renderers/Form/TreeSelect.tsx index 3d66a3dc..c51b9645 100644 --- a/src/renderers/Form/TreeSelect.tsx +++ b/src/renderers/Form/TreeSelect.tsx @@ -6,6 +6,7 @@ import PopOver from '../../components/PopOver'; import {OptionsControl, OptionsControlProps, Option} from './Options'; import {Icon} from '../../components/icons'; import TreeSelector from '../../components/Tree'; +// @ts-ignore import matchSorter from 'match-sorter'; import debouce = require('lodash/debounce'); import find = require('lodash/find'); diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 306f618b..9aee998c 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -373,6 +373,19 @@ export function isDisabled( ); } +export function hasAbility( + schema: any, + ability: string, + data?: object, + defaultValue: boolean = true +): boolean { + return schema.hasOwnProperty(ability) + ? schema[ability] + : schema.hasOwnProperty(`${ability}On`) + ? evalExpression(schema[`${ability}On`], data || schema) + : defaultValue; +} + export function makeHorizontalDeeper( horizontal: { left: string;