tree selectTree 增加 format、 prediction

site/chunks/Components/Tree.js

@@ -67,6 +67,15 @@ const examples = [
     component: require('doc/pages/components/Tree/example-06-change.js').default,
     rawText: require('!raw-loader!doc/pages/components/Tree/example-06-change.js'),
   },
+  {
+    name: '06-d-format',
+    title: locate(
+      '复杂数据 \n 复杂的数据可以使用 format 处理 value',
+      'Complex data \n Complex data can use format to process value.'
+    ),
+    component: require('doc/pages/components/Tree/example-06-d-format.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Tree/example-06-d-format.js'),
+  },
   {
     name: '07-disabled',
     title: locate(

site/chunks/Components/TreeSelect.js

@@ -31,6 +31,15 @@ const examples = [
     component: require('doc/pages/components/TreeSelect/example-02-mutiple.js').default,
     rawText: require('!raw-loader!doc/pages/components/TreeSelect/example-02-mutiple.js'),
   },
+  {
+    name: '02-o-format',
+    title: locate(
+      '复杂数据 \n 复杂的数据可以使用 format 处理 value',
+      'Complex data \n Complex data can use format to process value.'
+    ),
+    component: require('doc/pages/components/TreeSelect/example-02-o-format.js').default,
+    rawText: require('!raw-loader!doc/pages/components/TreeSelect/example-02-o-format.js'),
+  },
   {
     name: '03-filter',
     title: locate(

site/pages/components/Tree/cn.md

@@ -1,6 +1,6 @@
 # Tree *树形选择*
 
-## 
+##
 
 #### 本页面中用到的数据如下（数据量比较大，请谨慎点开）
 <example name="data" />
@@ -18,15 +18,17 @@
 | disabled | (data: any) => boolean \| boolean | false | 显示选择框时有效，为 true 时，所有节点禁用选择，为函数时，根据函数返回结果确定是否禁用 |
 | expanded | string[] | 无 | 展开的节点 key （受控） |
 | keygen | ((data: any, parentKey: string) => string) \| string | 必填 | 生成key的辅助方法<br />为函数时，使用此函数返回值<br />为string时，使用这个string对应的数据值。如 'id'，相当于 (d) => d.id |
+| format | (data: any) => any \| string | - | 格式化 value<br />默认值，返回原始数据<br />为string时，会作为key从原始数据中获取值，相当于 (d) => d\[format\]<br /> 为函数时，以函数返回结果作为 value |
+| prediction | (value: any, data: any) => boolean | (val, d) => val===format(d) | 默认使用 format 函数执行的结果来比较是否匹配，在某些情况下（例如返回原始数据的对象，更新数据时，生成了一个值相同，非同一个对象的选项），需要借助 prediction 函数来判断是否匹配 |
 | line | boolean | true | 是否显示连接线 |
 | loader | (key: string) => void | 无 | 设置loader属性后，未定义children的节点视为动态加载节点，点击展开触发 loader事件，children 为 null 或者长度为 0 视为叶子节点 |
 | mode | 0 \| 1 \| 2 \| 3 \| 4 | 1 | 选中值模式<br />0: 只返回完全选中的节点，包含父节点<br />1: 返回全部选中的节点和半选中的父节点<br />2: 只返回选中的子节点<br />3: 如果父节点选中，只返回父节点<br />4: 所选即所得 |
 | onExpand | (value: string[]) => void | 无 | 节点展开回调，参数为当前展开节点 key 数组 |
 | renderItem | (data: object) => ReactNode | 必填 | 为 string 时，返回 d\[string]<br />为 function 时，返回函数结果 |
-| defaultValue | string[] | 无 | 默认选中的 key （非受控） | 
-| value | string[] | 无 | 选中的 key （受控） | 
-| onDrop | (data: object, key: string, targetKey: string, position: number) => void | 无 | 设置 onDrop 属性时，为可拖动状态<br />data: 拖动后重新排序的完整数据<br />key: 拖动的节点key<br />targetKey: 目标节点 key<br />position: 在目标节点的位置，以 0 开始 | 
-| defaultExpandAll | boolean | false | 默认展开所有节点 | 
+| defaultValue | string[] | 无 | 默认选中的 key （非受控） |
+| value | string[] | 无 | 选中的 key （受控） |
+| onDrop | (data: object, key: string, targetKey: string, position: number) => void | 无 | 设置 onDrop 属性时，为可拖动状态<br />data: 拖动后重新排序的完整数据<br />key: 拖动的节点key<br />targetKey: 目标节点 key<br />position: 在目标节点的位置，以 0 开始 |
+| defaultExpandAll | boolean | false | 默认展开所有节点 |
 | childrenKey | string | 'children' | 指定子数据的属性名 |
 | expandIcons | \[ReactNode, ReactNode] | 无 | 自定义展开/收起按钮 |
 | dragImageSelector | (data: object) => string \| string | 无 | 定义拖拽图片的选择器 |

site/pages/components/Tree/en.md

@@ -17,17 +17,19 @@
 | disabled | (data: any) => boolean \| boolean | false | When it is true, all nodes disable the selection; when it is a function, it determines whether it is disabled according to the return result of the function. |
 | expanded | string[] | - | Expanded node key (controlled) |
 | keygen | ((data: any, parentKey: string) => string) \| string | required | Auxiliary method for generating key. <br />When it is a function, use the return value of this function. <br /> When it is a string, use the data value corresponding to this string. For example, 'id' is the same thing as (d) => d.id. |
+| format | data: any) => any \| string | - | Format value<br />The defaule value is return the original data.<br />When it is a string, the value is fetched from the original data as a key equivalent to (d) => d\[format\]<br />When it is a function, use its return value.  |
+| prediction | (value: any, data: any) => boolean | (val, d) => val===format(d) | By default, the result of the format function is used to compare whether it matches. In some cases (for example, whe an object that returns the original data is updated, an different option with the same value  is generated), the prediction function needs to be used to determine whether match |
 | line | boolean | true | Whether to display the connection line. |
 | loader | (key: string) => void | - | If the loader attribute is a function, the node with no children is regarded as dynamically loaded node. Click expanded button to trigger the loader event. The children property is null or its length is 0 will be regarded as a leaf node. |
 | mode | 0 \| 1 \| 2 \| 3 \| 4 | 1 | mode <br />0: Returns only the fully selected node including the parent node. <br />1: Returns all selected nodes and semi-selected nodes. <br />2: Return only the selected child nodes. <br />3: If the parent node is full selected, only return the parent node.<br />4: What you choose is what you get. |
 | onChange | (value: string[]) => void | - | When the onChange property is set, the selection box is displayed. The parameter is the current selected value, which is related to the mode property. |
 | onExpand |  (value: string[]) => void | - | The callback function for expanding the node. The parameter is the key array of the currently expanded nodes. |
 | renderItem | (data: object) => ReactNode | required | When it is a string, return d\[string].<br /> When it is a function, return the result of this function. |
-| defaultValue | string[] | - | Default selected key (not controlled) | 
+| defaultValue | string[] | - | Default selected key (not controlled) |
 | value | string[] | - | Selected key (controlled) |
-| onDrop | (data: object, key: string, targetKey: string, position: number) => void | - | It is draggable when setting the onDrop property. <br />data: Full data after dragging.<br />key: the key of dragged node<br />targetKey: the key of target node<br />position: The position of the target node. start at 0. | 
-| defaultExpandAll | boolean | false | default expand all nodes | 
-| childrenKey | string | 'children' | the key of the children data name | 
+| onDrop | (data: object, key: string, targetKey: string, position: number) => void | - | It is draggable when setting the onDrop property. <br />data: Full data after dragging.<br />key: the key of dragged node<br />targetKey: the key of target node<br />position: The position of the target node. start at 0. |
+| defaultExpandAll | boolean | false | default expand all nodes |
+| childrenKey | string | 'children' | the key of the children data name |
 | expandIcons | \[ReactNode, ReactNode] | none | custom expand/collapse button |
 | dragImageSelector | (data: object) => string \| string | - | the selector of drag image |
 | dragImageStyle | object | - | the style of drag Image |
@@ -37,4 +39,4 @@
 | onClick | (data: object) => void | none | node click |
 | iconClass | string | - | expand/collapse button's class |
 | nodeClass | string \| ((data: any) => string) | - | The class of the node, if it is a function, the parameter is the node data. |
-| dragSibling | boolean  | - | whether drag can only be level |
+| dragSibling | boolean  | - | whether drag can only be level |

site/pages/components/Tree/example-06-d-format.js

@@ -0,0 +1,62 @@
+/**
+ * cn - 复杂数据
+ *    -- 复杂的数据可以使用 format 处理 value
+ * en - Complex data
+ *    -- Complex data can use format to process value.
+ */
+import React, { Component } from 'react'
+import { Tree } from 'shineout'
+import data from 'doc/data/tree'
+
+const resultStyle = {
+  position: 'absolute',
+  right: 30,
+  top: 100,
+  bottom: 40,
+  width: 240,
+  overflow: 'auto',
+  background: '#f2f2f2',
+  padding: 10,
+  zIndex: 100,
+}
+
+export default class extends Component {
+  constructor(props) {
+    super(props)
+
+    const value = []
+    // getValue(data, value)
+
+    this.state = { mode: 1, value }
+  }
+
+  handleChange = value => {
+    this.setState({ value })
+  }
+
+  renderItem = node => `node ${node.id}`
+
+  render() {
+    const { value } = this.state
+
+    return (
+      <div>
+        <Tree
+          data={data}
+          defaultExpanded={['0', '2']}
+          format={d => `node-${d.id}`}
+          keygen="id"
+          mode={1}
+          onChange={this.handleChange}
+          renderItem={this.renderItem}
+          value={value}
+        />
+
+        <div style={resultStyle}>
+          Current select value:
+          <pre style={{ background: '#f2f2f2' }}>{JSON.stringify(value, null, 2)}</pre>
+        </div>
+      </div>
+    )
+  }
+}

site/pages/components/TreeSelect/cn.md

@@ -19,6 +19,8 @@ TreeSelect 用来选择树形数据结构，若需要非关联树形结构选择
 | filterDelay | number | 400 | 毫秒。用户输入触发 fitler 事件的延时 |
 | name | string | 无 | Form 存取数据的名称 |
 | keygen | （(data: object) => string） \| string \| true | 必填 | 生成每一项key的辅助方法<br />为 true 时，以数据项本身作为key，相当于 (d => d)<br />为函数时，使用此函数返回值<br />为string时，使用这个string对应的数据值。如 'id'，相当于 (d => d.id) |
+| format | (data: any) => any \| string | - | 格式化 value<br />默认值，返回原始数据<br />为string时，会作为key从原始数据中获取值，相当于 (d) => d\[format\]<br /> 为函数时，以函数返回结果作为 value |
+| prediction | (value: any, data: any) => boolean | (val, d) => val===format(d) | 默认使用 format 函数执行的结果来比较是否匹配，在某些情况下（例如返回原始数据的对象，更新数据时，生成了一个值相同，非同一个对象的选项），需要借助 prediction 函数来判断是否匹配 |
 | expanded | string[] | 无 | 展开的节点 key （受控） |
 | loader | (key: string) => void | 无 | 设置loader属性后，未定义children的节点视为动态加载节点，点击展开触发 loader事件，children 为 null 或者长度为 0 视为叶子节点 |
 | mode | 0 \| 1 \| 2 \| 3 | 1 | 选中值模式<br />0: 只返回完全选中的节点，包含父节点<br />1: 返回全部选中的节点和半选中的父节点<br />2: 只返回选中的子节点<br />3: 如果父节点选中，只返回父节点 |
@@ -30,8 +32,8 @@ TreeSelect 用来选择树形数据结构，若需要非关联树形结构选择
 | compressed | boolean | false | 将选中值合并，只在多选模式下有效；为'no-repeat'时弹出框中不重复展示值 |
 | absolute | boolean | false | 为 true 时，选项弹出层在 DOM 中独立 render |
 | zIndex | number | 1000 | 选项列表 z-index 值 |
-| childrenKey | string | 'children' | 指定子数据的属性名 | 
-| defaultExpandAll | boolean | false | 默认全部展开节点 | 
+| childrenKey | string | 'children' | 指定子数据的属性名 |
+| defaultExpandAll | boolean | false | 默认全部展开节点 |
 | showHitDescendants | boolean | false | 筛选后是否展示命中节点的后代节点 |
 | renderUnmatched | (data: any) => ReactNode | 无 | 渲染未匹配值的方式 |
 | onCollapse | (collapse: boolean) => void | 无 | 下拉列表展开/收起回调 |

site/pages/components/TreeSelect/en.md

@@ -17,6 +17,8 @@
 | filterDelay | number | 400 | ms. The delay of user input triggering filter events |
 | name | string | - | The name of a Form that accesses data |
 | keygen | ((data: object) => string) \| string \| true | index | Generate a auxiliary method for each key<br />If not filled, index will be used(not recommended,there may be problems with more than 10 data)<br />When it is a function, use its return value.<br />When it is a string，ues the value of the string.For example, 'id' is the same thing as (d) => d.id. |
+| format | (data: any) => any \| string | - | Format value<br />The defaule value is return the original data.<br />When it is a string, the value is fetched from the original data as a key equivalent to (d) => d\[format\]<br />When it is a function, use its return value.  |
+| prediction | (value: any, data: any) => boolean | (val, d) => val===format(d) | By default, the result of the format function is used to compare whether it matches. In some cases (for example, whe an object that returns the original data is updated, an different option with the same value  is generated), the prediction function needs to be used to determine whether match |
 | expanded | string[] | - | Expanded node key (controlled) |
 | loader | (key: string) => void | - | If the loader attribute is a function, the node with no children is regarded as dynamically loaded node. Click expanded button to trigger the loader event. The children property is null or its length is 0 will be regarded as a leaf node. |
 | mode | 0 \| 1 \| 2 \| 3 | 1 | mode <br />0: Returns only the fully selected node including the parent node. <br />1: Returns all selected nodes and semi-selected nodes. <br />2: Return only the selected child nodes. <br />3: If the parent node is full selected, only return the parent node. |
@@ -28,12 +30,12 @@
 | compressed | boolean \| 'no-repeat' | false | Merges selected values, valid only in multiselect mode; the repeat value will not appear in the Popover when it is'no-repeat'. |
 | absolute | boolean | false | When it is true, the pop-up layer of option append into document.body. |
 | zIndex | number | 1000 | options z-index |
-| childrenKey | string | 'children' | the key of the children data name | 
+| childrenKey | string | 'children' | the key of the children data name |
 | defaultExpandAll | boolean | false | default expand all node |
 | showHitDescendants | boolean | false | Whether to show the descendant nodes of the hit node after filtering |
 | renderUnmatched | (data: any) => ReactNode | none | render unmatched value |
 | onCollapse | (collapse: boolean) => void | none | option collapse callback |
 | rules | any[] | null | Validation rules |
 | unmatch | boolean | none | render unmatch value |
 | underline | boolean | false | only display border bottom  |
-| onAdvancedFilter | (text: string) => (data: any) => boolean | 无 | In the advanced filter mode, you can switch between the filter results and the original data for the current level by pressing the button |
+| onAdvancedFilter | (text: string) => (data: any) => boolean | 无 | In the advanced filter mode, you can switch between the filter results and the original data for the current level by pressing the button |

site/pages/components/TreeSelect/example-01-base.js

@@ -39,6 +39,7 @@ export default class extends React.Component {
       <TreeSelect
         value={this.state.value}
         onChange={this.handleChange}
+        format={d => d.title}
         clearable
         style={{ width: 250 }}
         keygen="id"

site/pages/components/TreeSelect/example-02-o-format.js

@@ -0,0 +1,50 @@
+/**
+ * cn - 复杂数据
+ *    -- 复杂的数据可以使用 format 处理 value
+ * en - Complex data
+ *    -- Complex data can use format to process value.
+ */
+import React from 'react'
+import { TreeSelect } from 'shineout'
+
+const data = [
+  {
+    id: '1',
+    title: '1',
+    children: [
+      { id: '1-1', title: '1-1', children: [{ id: '1-1-1', title: '1-1-1' }, { id: '1-1-2', title: '1-1-2' }] },
+      { id: '1-2', title: '1-2' },
+    ],
+  },
+  { id: '2', title: '2', children: [{ id: '2-1', title: '2-1' }, { id: '2-2', title: '2-2' }] },
+  { id: '3', title: '3', children: [{ id: '3-1', title: '3-1' }] },
+]
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: '',
+    }
+  }
+
+  handleChange = v => {
+    this.setState({
+      value: v,
+    })
+  }
+
+  render() {
+    return (
+      <TreeSelect
+        value={this.state.value}
+        onChange={this.handleChange}
+        clearable
+        style={{ width: 250 }}
+        keygen="id"
+        renderItem={node => `node ${node.title}`}
+        data={data}
+      />
+    )
+  }
+}