diff --git a/docs/renderers/Form/Tree.md b/docs/renderers/Form/Tree.md index 55a8e4aab..2460f17d2 100644 --- a/docs/renderers/Form/Tree.md +++ b/docs/renderers/Form/Tree.md @@ -17,6 +17,18 @@ - 多选模式:选中的多个选项的 `value` 会通过 `delimiter` 连接起来,否则直接将以数组的形式提交值。 - `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。 - `delimiter` 默认为 `,` +- `selfDisabledAffectChildren` 默认为 `true`,当前节点禁用是否会禁用子节点 +- `rootCreatable` 默认为 `false`, 是否可以创建顶级节点 +- `rootCreateTip` 默认为 `"添加一级节点"`, 创建顶级节点的悬浮提示 +- `creatable` 默认为 `false`,是否可以创建子节点 +- `addApi` 创建节点接口,格式参考 [api](../Types.md#api) +- `createTip` 默认为 `"添加孩子节点"`,添加节点按钮的鼠标悬浮提示 +- `editable` 默认为 `false`,是否可以编辑节点 +- `editApi` 编辑节点接口,格式参考 [api](../Types.md#api) +- `editTip` 默认为 `"编辑该节点"`,编辑节点按钮的鼠标悬浮提示 +- `removable` 默认为 `false`,是否可以删除节点 +- `deleteApi` 删除节点接口,格式参考 [api](../Types.md#api) +- `removeTip` 默认为 `"移除该节点"`,删除节点按钮的鼠标悬浮提示 - **还有更多通用配置请参考** [FormItem](./FormItem.md) ```schema:height="300" scope="form-item" diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx index b0d342f2b..d6d77643e 100644 --- a/src/components/Tree.tsx +++ b/src/components/Tree.tsx @@ -79,7 +79,7 @@ interface TreeSelectorProps { editTip?: string; onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void; removable?: boolean; - deleteTip?: string; + removeTip?: string; onDelete?: (value: Option) => void; } @@ -97,7 +97,7 @@ interface TreeSelectorState { export class TreeSelector extends React.Component< TreeSelectorProps, TreeSelectorState -> { + > { static defaultProps = { showIcon: true, initiallyOpen: true, @@ -124,7 +124,7 @@ export class TreeSelector extends React.Component< rootCreateTip: '添加一级节点', createTip: '添加孩子节点', editTip: '编辑该节点', - deleteTip: '移除该节点' + removeTip: '移除该节点' }; componentWillMount() { @@ -322,8 +322,8 @@ export class TreeSelector extends React.Component< joinValues ? value.map(item => item[valueField as string]).join(delimiter) : extractValue - ? value.map(item => item[valueField as string]) - : value + ? value.map(item => item[valueField as string]) + : value ); } ); @@ -477,7 +477,7 @@ export class TreeSelector extends React.Component< removable, createTip, editTip, - deleteTip + removeTip } = this.props; const { unfolded, @@ -507,8 +507,8 @@ export class TreeSelector extends React.Component< cascade ? false : uncheckable || - (selfDisabledAffectChildren ? selfDisabled : false) || - (multiple && checked) + (selfDisabledAffectChildren ? selfDisabled : false) || + (multiple && checked) ); tmpChildrenChecked = !!childrenItems.childrenChecked; if ( @@ -564,109 +564,109 @@ export class TreeSelector extends React.Component< {isEditing && editingItem === item ? ( this.renderInput(checkbox) ) : ( -
- {!isLeaf ? ( - this.toggleUnfolded(item)} - className={cx('Tree-itemArrow', { - 'is-folded': !unfolded[item[valueField]] - })} - /> - ) : ( - - )} - - {checkbox} - - - !nodeDisabled && - (multiple - ? this.handleCheck(item, !selfChecked) - : this.handleSelect(item)) - } +
- {showIcon ? ( + {!isLeaf ? ( this.toggleUnfolded(item)} + className={cx('Tree-itemArrow', { + 'is-folded': !unfolded[item[valueField]] + })} /> + ) : ( + + )} + + {checkbox} + + + !nodeDisabled && + (multiple + ? this.handleCheck(item, !selfChecked) + : this.handleSelect(item)) + } + > + {showIcon ? ( + + ) : null} + + {highlightTxt + ? highlight(item[labelField], highlightTxt) + : item[labelField]} + + + {!nodeDisabled && !isAdding && !isEditing ? ( +
+ {creatable && hasAbility(item, 'creatable') ? ( + + + + ) : null} + + {removable && hasAbility(item, 'removable') ? ( + + + + ) : null} + + {editable && hasAbility(item, 'editable') ? ( + + + + ) : null} +
) : null} - - {highlightTxt - ? highlight(item[labelField], highlightTxt) - : item[labelField]} -
- - {!nodeDisabled && !isAdding && !isEditing ? ( -
- {creatable && hasAbility(item, 'creatable') ? ( - - - - ) : null} - - {removable && hasAbility(item, 'removable') ? ( - - - - ) : null} - - {editable && hasAbility(item, 'editable') ? ( - - - - ) : null} -
- ) : null} -
- )} +
+ )} {/* 有children而且为展开状态 或者 添加child时 */} {(childrenItems && unfolded[item[valueField]]) || - (isAdding && addingParent === item) ? ( -
    - {isAdding && addingParent === item ? ( -
  • - {this.renderInput( - checkbox - ? React.cloneElement(checkbox, { + (isAdding && addingParent === item) ? ( +
      + {isAdding && addingParent === item ? ( +
    • + {this.renderInput( + checkbox + ? React.cloneElement(checkbox, { checked: false, disabled: true }) - : null - )} -
    • + : null + )} + + ) : null} + {childrenItems} +
    + ) : !childrenItems && + item.placeholder && + unfolded[item[valueField]] ? ( +
      +
    • +
      {item.placeholder}
      +
    • +
    ) : null} - {childrenItems} -
- ) : !childrenItems && - item.placeholder && - unfolded[item[valueField]] ? ( -
    -
  • -
    {item.placeholder}
    -
  • -
- ) : null} ); }); @@ -722,47 +722,47 @@ export class TreeSelector extends React.Component< {this.renderList(options, value, false).dom} ) : ( -
  • -
    - - {showIcon ? ( - - ) : null} - {rootLabel} - - {!disabled && - creatable && - rootCreatable !== false && - !isAdding && - !isEditing ? ( -
    - {creatable ? ( - - - +
  • +
    + + {showIcon ? ( + ) : null} -
    - ) : null} - -
      - {isAdding && !addingParent ? ( -
    • {this.renderInput()}
    • - ) : null} - {this.renderList(options, value, false).dom} -
    -
  • - )} + {rootLabel} + + {!disabled && + creatable && + rootCreatable !== false && + !isAdding && + !isEditing ? ( +
    + {creatable ? ( + + + + ) : null} +
    + ) : null} + +
      + {isAdding && !addingParent ? ( +
    • {this.renderInput()}
    • + ) : null} + {this.renderList(options, value, false).dom} +
    + + )} ) : ( -
    {placeholder}
    - )} +
    {placeholder}
    + )} ); } diff --git a/src/renderers/Form/Tree.tsx b/src/renderers/Form/Tree.tsx index 38af8a177..5a92f4e72 100644 --- a/src/renderers/Form/Tree.tsx +++ b/src/renderers/Form/Tree.tsx @@ -66,7 +66,7 @@ export default class TreeControl extends React.Component { editTip, editControls, removable, - deleteTip, + removeTip, onDelete, rootCreatable, rootCreateTip @@ -110,7 +110,7 @@ export default class TreeControl extends React.Component { editable={editable} editTip={editTip} removable={removable} - deleteTip={deleteTip} + removeTip={removeTip} onDelete={onDelete} bultinCUD={!addControls && !editControls} />