Merge pull request #456 from RickCole21/master

补了点文档、还有小修改

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"

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)
           ) : (
-            <div
-              className={cx('Tree-itemLabel', {
-                'is-children-checked':
-                  multiple && !cascade && tmpChildrenChecked && !nodeDisabled,
-                'is-checked': checked,
-                'is-disabled': nodeDisabled
-              })}
-            >
-              {!isLeaf ? (
-                <i
-                  onClick={() => this.toggleUnfolded(item)}
-                  className={cx('Tree-itemArrow', {
-                    'is-folded': !unfolded[item[valueField]]
-                  })}
-                />
-              ) : (
-                <span className={cx('Tree-itemArrowPlaceholder')} />
-              )}
-
-              {checkbox}
-
-              <span
-                className={cx('Tree-itemText')}
-                onClick={() =>
-                  !nodeDisabled &&
-                  (multiple
-                    ? this.handleCheck(item, !selfChecked)
-                    : this.handleSelect(item))
-                }
+              <div
+                className={cx('Tree-itemLabel', {
+                  'is-children-checked':
+                    multiple && !cascade && tmpChildrenChecked && !nodeDisabled,
+                  'is-checked': checked,
+                  'is-disabled': nodeDisabled
+                })}
               >
-                {showIcon ? (
+                {!isLeaf ? (
                   <i
-                    className={cx(
-                      `Tree-itemIcon ${item[iconField] ||
-                        (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')}`
-                    )}
+                    onClick={() => this.toggleUnfolded(item)}
+                    className={cx('Tree-itemArrow', {
+                      'is-folded': !unfolded[item[valueField]]
+                    })}
                   />
+                ) : (
+                    <span className={cx('Tree-itemArrowPlaceholder')} />
+                  )}
+
+                {checkbox}
+
+                <span
+                  className={cx('Tree-itemText')}
+                  onClick={() =>
+                    !nodeDisabled &&
+                    (multiple
+                      ? this.handleCheck(item, !selfChecked)
+                      : this.handleSelect(item))
+                  }
+                >
+                  {showIcon ? (
+                    <i
+                      className={cx(
+                        `Tree-itemIcon ${item[iconField] ||
+                        (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')}`
+                      )}
+                    />
+                  ) : null}
+
+                  {highlightTxt
+                    ? highlight(item[labelField], highlightTxt)
+                    : item[labelField]}
+                </span>
+
+                {!nodeDisabled && !isAdding && !isEditing ? (
+                  <div className={cx('Tree-item-icons')}>
+                    {creatable && hasAbility(item, 'creatable') ? (
+                      <a
+                        onClick={this.handleAdd.bind(this, item)}
+                        data-tooltip={createTip}
+                      >
+                        <Icon icon="plus" className="icon" />
+                      </a>
+                    ) : null}
+
+                    {removable && hasAbility(item, 'removable') ? (
+                      <a
+                        onClick={this.handleRemove.bind(this, item)}
+                        data-tooltip={removeTip}
+                      >
+                        <Icon icon="minus" className="icon" />
+                      </a>
+                    ) : null}
+
+                    {editable && hasAbility(item, 'editable') ? (
+                      <a
+                        onClick={this.handleEdit.bind(this, item)}
+                        data-tooltip={editTip}
+                      >
+                        <Icon icon="pencil" className="icon" />
+                      </a>
+                    ) : null}
+                  </div>
                 ) : null}
-
-                {highlightTxt
-                  ? highlight(item[labelField], highlightTxt)
-                  : item[labelField]}
-              </span>
-
-              {!nodeDisabled && !isAdding && !isEditing ? (
-                <div className={cx('Tree-item-icons')}>
-                  {creatable && hasAbility(item, 'creatable') ? (
-                    <a
-                      onClick={this.handleAdd.bind(this, item)}
-                      data-tooltip={createTip}
-                    >
-                      <Icon icon="plus" className="icon" />
-                    </a>
-                  ) : null}
-
-                  {removable && hasAbility(item, 'removable') ? (
-                    <a
-                      onClick={this.handleRemove.bind(this, item)}
-                      data-tooltip={deleteTip}
-                    >
-                      <Icon icon="minus" className="icon" />
-                    </a>
-                  ) : null}
-
-                  {editable && hasAbility(item, 'editable') ? (
-                    <a
-                      onClick={this.handleEdit.bind(this, item)}
-                      data-tooltip={editTip}
-                    >
-                      <Icon icon="pencil" className="icon" />
-                    </a>
-                  ) : null}
-                </div>
-              ) : null}
-            </div>
-          )}
+              </div>
+            )}
           {/* 有children而且为展开状态 或者 添加child时 */}
           {(childrenItems && unfolded[item[valueField]]) ||
-          (isAdding && addingParent === item) ? (
-            <ul className={cx('Tree-sublist')}>
-              {isAdding && addingParent === item ? (
-                <li className={cx('Tree-item')}>
-                  {this.renderInput(
-                    checkbox
-                      ? React.cloneElement(checkbox, {
+            (isAdding && addingParent === item) ? (
+              <ul className={cx('Tree-sublist')}>
+                {isAdding && addingParent === item ? (
+                  <li className={cx('Tree-item')}>
+                    {this.renderInput(
+                      checkbox
+                        ? React.cloneElement(checkbox, {
                           checked: false,
                           disabled: true
                         })
-                      : null
-                  )}
-                </li>
+                        : null
+                    )}
+                  </li>
+                ) : null}
+                {childrenItems}
+              </ul>
+            ) : !childrenItems &&
+              item.placeholder &&
+              unfolded[item[valueField]] ? (
+                <ul className={cx('Tree-sublist')}>
+                  <li className={cx('Tree-item')}>
+                    <div className={cx('Tree-placeholder')}>{item.placeholder}</div>
+                  </li>
+                </ul>
               ) : null}
-              {childrenItems}
-            </ul>
-          ) : !childrenItems &&
-            item.placeholder &&
-            unfolded[item[valueField]] ? (
-            <ul className={cx('Tree-sublist')}>
-              <li className={cx('Tree-item')}>
-                <div className={cx('Tree-placeholder')}>{item.placeholder}</div>
-              </li>
-            </ul>
-          ) : null}
         </li>
       );
     });
@@ -722,47 +722,47 @@ export class TreeSelector extends React.Component<
                 {this.renderList(options, value, false).dom}
               </>
             ) : (
-              <li
-                className={cx('Tree-rootItem', {
-                  'is-checked': !value || !value.length
-                })}
-              >
-                <div className={cx('Tree-itemLabel')}>
-                  <span className={cx('Tree-itemText')} onClick={this.clearSelect}>
-                    {showIcon ? (
-                      <i className={cx('Tree-itemIcon Tree-rootIcon')} />
-                    ) : null}
-                    {rootLabel}
-                  </span>
-                  {!disabled &&
-                  creatable &&
-                  rootCreatable !== false &&
-                  !isAdding &&
-                  !isEditing ? (
-                    <div className={cx('Tree-item-icons')}>
-                      {creatable ? (
-                        <a
-                          onClick={this.handleAdd.bind(this, null)}
-                          data-tooltip={rootCreateTip}
-                        >
-                          <Icon icon="plus" className="icon" />
-                        </a>
+                <li
+                  className={cx('Tree-rootItem', {
+                    'is-checked': !value || !value.length
+                  })}
+                >
+                  <div className={cx('Tree-itemLabel')}>
+                    <span className={cx('Tree-itemText')} onClick={this.clearSelect}>
+                      {showIcon ? (
+                        <i className={cx('Tree-itemIcon Tree-rootIcon')} />
                       ) : null}
-                    </div>
-                  ) : null}
-                </div>
-                <ul className={cx('Tree-sublist')}>
-                  {isAdding && !addingParent ? (
-                    <li className={cx('Tree-item')}>{this.renderInput()}</li>
-                  ) : null}
-                  {this.renderList(options, value, false).dom}
-                </ul>
-              </li>
-            )}
+                      {rootLabel}
+                    </span>
+                    {!disabled &&
+                      creatable &&
+                      rootCreatable !== false &&
+                      !isAdding &&
+                      !isEditing ? (
+                        <div className={cx('Tree-item-icons')}>
+                          {creatable ? (
+                            <a
+                              onClick={this.handleAdd.bind(this, null)}
+                              data-tooltip={rootCreateTip}
+                            >
+                              <Icon icon="plus" className="icon" />
+                            </a>
+                          ) : null}
+                        </div>
+                      ) : null}
+                  </div>
+                  <ul className={cx('Tree-sublist')}>
+                    {isAdding && !addingParent ? (
+                      <li className={cx('Tree-item')}>{this.renderInput()}</li>
+                    ) : null}
+                    {this.renderList(options, value, false).dom}
+                  </ul>
+                </li>
+              )}
           </ul>
         ) : (
-          <div className={cx('Tree-placeholder')}>{placeholder}</div>
-        )}
+            <div className={cx('Tree-placeholder')}>{placeholder}</div>
+          )}
       </div>
     );
   }

src/renderers/Form/Tree.tsx

@@ -66,7 +66,7 @@ export default class TreeControl extends React.Component<TreeProps> {
       editTip,
       editControls,
       removable,
-      deleteTip,
+      removeTip,
       onDelete,
       rootCreatable,
       rootCreateTip
@@ -110,7 +110,7 @@ export default class TreeControl extends React.Component<TreeProps> {
             editable={editable}
             editTip={editTip}
             removable={removable}
-            deleteTip={deleteTip}
+            removeTip={removeTip}
             onDelete={onDelete}
             bultinCUD={!addControls && !editControls}
           />