@gm-pc/react 1.27.1-beta.0 → 1.27.2-beta.0

package/src/component/tree/stories.tsx

@@ -1,309 +1,309 @@
-import React from 'react'
-import _ from 'lodash'
-import { observable } from 'mobx'
-import Tree, { TreeUtil } from './tree'
-import { Flex } from '../flex'
-import { TreeListItem } from './types'
-
-const treeData = [
-  {
-    value: 'A33792',
-    children: [
-      {
-        value: 'B119099',
-        children: [
-          { value: 'C4125709', text: '腿肉（冷鲜）', label: 'A' },
-          { value: 'C4125717', text: '肉片（冷鲜）', label: 'B' },
-          { value: 'C4125676', text: '带皮五花肉（冷鲜）', label: 'C' },
-          { value: 'C4125698', text: '去皮五花肉（冷鲜）', label: 'D' },
-          { value: 'C4125706', text: '瘦肉（冷鲜）', label: 'E' },
-        ],
-        text: '冷鲜肉',
-      },
-    ],
-    text: '冷鲜肉类',
-  },
-  {
-    value: 'A6982',
-    children: [
-      {
-        value: 'B34032',
-        children: [
-          { value: 'C1292441', text: '中排骨', label: 'A' },
-          { value: 'C3125818', text: '保鲜筒子骨', label: 'B' },
-          { value: 'C1292444', text: '排骨 不砍' },
-          { value: 'C1292448', text: '棒骨（带肉）' },
-          { value: 'C1292443', text: '仔排' },
-          { value: 'C1292449', text: '棒骨（不带扇骨）' },
-          { value: 'C1292451', text: '肉脊骨（20%肉）' },
-          { value: 'C1292445', text: '排骨 砍块' },
-          { value: 'C1292455', text: '猪脆骨 ' },
-          { value: 'C1292456', text: '猪腔骨 ' },
-          { value: 'C1292454', text: '猪肋骨（二级）' },
-          { value: 'C1292453', text: '猪头骨(7斤/只）' },
-          { value: 'C1292446', text: '猪前排（去颈/1.25kg/块）' },
-          { value: 'C1292447', text: '棒骨  （砍断）' },
-          { value: 'C1292442', text: '排骨块（老排/约3-5厘米）' },
-          { value: 'C1292452', text: '扇骨（剁块）' },
-          { value: 'C1292450', text: '前腿骨头（带肉）' },
-        ],
-        text: '猪排骨类',
-      },
-      {
-        value: 'B34021',
-        children: [
-          { value: 'C1292514', text: '土鸡  （鲜 2斤/只 去内脏）' },
-          { value: 'C1354435', text: '老鸡' },
-          { value: 'C1634180', text: '黄油鸡' },
-          { value: 'C1292516', text: '叫鸡  （鲜 3斤/只 去内脏）' },
-          { value: 'C1292509', text: '老母鸡（鲜 3斤/只 去内脏）' },
-          { value: 'C1634561', text: '活  乌鸡' },
-          { value: 'C1620471', text: '蛋鸡' },
-          { value: 'C1292518', text: '草鸡  （鲜 3斤/只 去内脏）' },
-          { value: 'C1292513', text: '黑脚鸡  （鲜 3斤/只去内脏）' },
-          { value: 'C1880029', text: '正宗土鸡' },
-          { value: 'C1292507', text: '乌鸡 （鲜 2斤/只 去内脏）' },
-          { value: 'C1292512', text: '矮脚鸡（鲜 2斤/只 去内脏）' },
-          { value: 'C1292515', text: '肉鸡  （鲜 3斤/只 去内脏）' },
-          { value: 'C1292511', text: '清远鸡 （鲜 2斤/只 去内脏）' },
-          { value: 'C1292510', text: '黑毛鸡 （鲜 2斤/只 去内脏）' },
-          { value: 'C1354096', text: '仔鸡' },
-          { value: 'C1292517', text: '老公鸡  （鲜 3斤/只 去内脏）' },
-          { value: 'C1292505', text: '三黄鸡 （鲜 2斤/只 去内脏）' },
-        ],
-        text: '整鸡类',
-      },
-    ],
-    text: '肉禽类',
-  },
-  {
-    value: 'A111',
-    text: '水果类',
-    children: [
-      {
-        value: 'C111',
-        text: '雪梨',
-      },
-      {
-        value: 'C222',
-        text: '葡萄',
-      },
-      {
-        value: 'C333',
-        text: '西瓜',
-      },
-    ],
-  },
-]
-
-const flatData = (() => {
-  const flat: TreeListItem[] = []
-  _.each(treeData, (one) => {
-    if (one.children) {
-      _.each(one.children, (two: TreeListItem) => {
-        if (two.children) {
-          _.each(two.children, (there) => {
-            flat.push(there)
-          })
-        } else {
-          flat.push(two)
-        }
-      })
-    } else {
-      flat.push(one)
-    }
-  })
-  return flat
-})()
-
-const store = observable({
-  selectedValues: [],
-  setSelectedValues(values: any) {
-    this.selectedValues = values
-  },
-  activeValue: null,
-  setActiveValue(value: any) {
-    this.activeValue = value
-  },
-})
-
-export const ComTree = () => (
-  <Flex>
-    <div style={{ height: '500px', width: '300px' }}>
-      <Tree
-        title='树状数据'
-        list={treeData}
-        selectedValues={store.selectedValues.slice()}
-        onSelectValues={(values) => store.setSelectedValues(values)}
-      />
-    </div>
-    <div style={{ height: '500px', width: '300px' }}>
-      <Tree
-        title='扁平的数据'
-        list={flatData}
-        selectedValues={store.selectedValues.slice()}
-        onSelectValues={(values) => store.setSelectedValues(values)}
-      />
-    </div>
-  </Flex>
-)
-
-export const ComTreeBorder = () => (
-  <Flex>
-    <div style={{ height: '500px', width: '300px', padding: '10px' }}>
-      <Tree
-        // border={false}
-        // withFilter={false}
-        showFind
-        list={treeData}
-        selectedValues={store.selectedValues.slice()}
-        onSelectValues={(values) => store.setSelectedValues(values)}
-      />
-    </div>
-  </Flex>
-)
-
-export const ComTreeWithFindFilter = () => {
-  return (
-    <div style={{ height: '500px', width: '300px' }}>
-      <Tree
-        list={treeData}
-        selectedValues={store.selectedValues.slice()}
-        onSelectValues={(values) => store.setSelectedValues(values)}
-        title='showFind'
-        showFind
-        withFilter={false}
-        activeValue={store.activeValue}
-        onActiveValue={(value, item) => {
-          store.setActiveValue(value)
-          console.log(value, item)
-        }}
-      />
-    </div>
-  )
-}
-
-export const ComTreeForRenderItem = () => (
-  <div style={{ height: '500px', display: 'flex' }}>
-    <Tree
-      style={{ width: '300px', marginRight: '30px' }}
-      list={treeData}
-      selectedValues={store.selectedValues.slice()}
-      onSelectValues={(values) => store.setSelectedValues(values)}
-      title='renderLeafItem renderGroupItem'
-      renderLeafItem={(data) => (
-        <div>
-          <span
-            style={{
-              backgroundColor: '#56a3f2',
-              color: 'white',
-              padding: '1px',
-              borderRadius: '2px',
-            }}
-          >
-            上架
-          </span>
-          {data.text}
-        </div>
-      )}
-      renderGroupItem={(data) => (
-        <div>
-          <img
-            src='https://img.guanmai.cn/product_pic/cdd0870bc403069b.jpeg'
-            style={{ width: '30px', height: '30px' }}
-            alt=''
-          />
-          {`${data.text}`}
-        </div>
-      )}
-    />
-  </div>
-)
-
-export const ComTreeWithWithFilter = () => (
-  <div style={{ height: '500px', width: '300px' }}>
-    <Tree
-      list={treeData}
-      selectedValues={store.selectedValues.slice()}
-      onSelectValues={(values) => store.setSelectedValues(values)}
-      title='withFilter'
-      withFilter={(list, query) => {
-        let result = list
-
-        let label: any
-        let search = query
-        if (query.startsWith('label:')) {
-          const arr = query.split(' ')
-          if (arr[0]) {
-            label = arr[0].slice('label:'.length)
-            search = arr[1]
-          }
-        }
-
-        console.log(label, search)
-
-        if (label || search) {
-          result = TreeUtil.filterGroupList(result, (v) => {
-            let flag = true
-            if (label && v.label !== label) {
-              flag = false
-            }
-            if (search && !v.text.includes(search)) {
-              flag = false
-            }
-
-            console.log(flag)
-
-            return flag
-          })
-        }
-        return result
-      }}
-    />
-  </div>
-)
-
-export const ComTreeForStatic = () => (
-  <div>
-    <div style={{ height: '500px', width: '300px' }}>
-      <Tree
-        title='树状数据'
-        list={treeData}
-        selectedValues={store.selectedValues.slice()}
-        onSelectValues={(values) => store.setSelectedValues(values)}
-      />
-    </div>
-    <button
-      onClick={() => {
-        console.log(
-          TreeUtil.selectedValues2SelectedList(treeData, store.selectedValues.slice())
-        )
-      }}
-    >
-      selectedValues2SelectedList
-    </button>
-  </div>
-)
-
-export const ComTreeWithDisabledCheckbox = () => {
-  return (
-    <div style={{ height: '500px', width: '300px' }}>
-      <Tree
-        title='树状数据'
-        list={treeData}
-        selectedValues={store.selectedValues.slice()}
-        onSelectValues={(values) => store.setSelectedValues(values)}
-        disabledCheckbox
-        activeValue={store.activeValue}
-        onActiveValue={(value, item) => {
-          store.setActiveValue(value)
-          console.log(value, item)
-        }}
-      />
-    </div>
-  )
-}
-
-export default {
-  title: '表单/Tree',
-}
+import React from 'react'
+import _ from 'lodash'
+import { observable } from 'mobx'
+import Tree, { TreeUtil } from './tree'
+import { Flex } from '../flex'
+import { TreeListItem } from './types'
+
+const treeData = [
+  {
+    value: 'A33792',
+    children: [
+      {
+        value: 'B119099',
+        children: [
+          { value: 'C4125709', text: '腿肉（冷鲜）', label: 'A' },
+          { value: 'C4125717', text: '肉片（冷鲜）', label: 'B' },
+          { value: 'C4125676', text: '带皮五花肉（冷鲜）', label: 'C' },
+          { value: 'C4125698', text: '去皮五花肉（冷鲜）', label: 'D' },
+          { value: 'C4125706', text: '瘦肉（冷鲜）', label: 'E' },
+        ],
+        text: '冷鲜肉',
+      },
+    ],
+    text: '冷鲜肉类',
+  },
+  {
+    value: 'A6982',
+    children: [
+      {
+        value: 'B34032',
+        children: [
+          { value: 'C1292441', text: '中排骨', label: 'A' },
+          { value: 'C3125818', text: '保鲜筒子骨', label: 'B' },
+          { value: 'C1292444', text: '排骨 不砍' },
+          { value: 'C1292448', text: '棒骨（带肉）' },
+          { value: 'C1292443', text: '仔排' },
+          { value: 'C1292449', text: '棒骨（不带扇骨）' },
+          { value: 'C1292451', text: '肉脊骨（20%肉）' },
+          { value: 'C1292445', text: '排骨 砍块' },
+          { value: 'C1292455', text: '猪脆骨 ' },
+          { value: 'C1292456', text: '猪腔骨 ' },
+          { value: 'C1292454', text: '猪肋骨（二级）' },
+          { value: 'C1292453', text: '猪头骨(7斤/只）' },
+          { value: 'C1292446', text: '猪前排（去颈/1.25kg/块）' },
+          { value: 'C1292447', text: '棒骨  （砍断）' },
+          { value: 'C1292442', text: '排骨块（老排/约3-5厘米）' },
+          { value: 'C1292452', text: '扇骨（剁块）' },
+          { value: 'C1292450', text: '前腿骨头（带肉）' },
+        ],
+        text: '猪排骨类',
+      },
+      {
+        value: 'B34021',
+        children: [
+          { value: 'C1292514', text: '土鸡  （鲜 2斤/只 去内脏）' },
+          { value: 'C1354435', text: '老鸡' },
+          { value: 'C1634180', text: '黄油鸡' },
+          { value: 'C1292516', text: '叫鸡  （鲜 3斤/只 去内脏）' },
+          { value: 'C1292509', text: '老母鸡（鲜 3斤/只 去内脏）' },
+          { value: 'C1634561', text: '活  乌鸡' },
+          { value: 'C1620471', text: '蛋鸡' },
+          { value: 'C1292518', text: '草鸡  （鲜 3斤/只 去内脏）' },
+          { value: 'C1292513', text: '黑脚鸡  （鲜 3斤/只去内脏）' },
+          { value: 'C1880029', text: '正宗土鸡' },
+          { value: 'C1292507', text: '乌鸡 （鲜 2斤/只 去内脏）' },
+          { value: 'C1292512', text: '矮脚鸡（鲜 2斤/只 去内脏）' },
+          { value: 'C1292515', text: '肉鸡  （鲜 3斤/只 去内脏）' },
+          { value: 'C1292511', text: '清远鸡 （鲜 2斤/只 去内脏）' },
+          { value: 'C1292510', text: '黑毛鸡 （鲜 2斤/只 去内脏）' },
+          { value: 'C1354096', text: '仔鸡' },
+          { value: 'C1292517', text: '老公鸡  （鲜 3斤/只 去内脏）' },
+          { value: 'C1292505', text: '三黄鸡 （鲜 2斤/只 去内脏）' },
+        ],
+        text: '整鸡类',
+      },
+    ],
+    text: '肉禽类',
+  },
+  {
+    value: 'A111',
+    text: '水果类',
+    children: [
+      {
+        value: 'C111',
+        text: '雪梨',
+      },
+      {
+        value: 'C222',
+        text: '葡萄',
+      },
+      {
+        value: 'C333',
+        text: '西瓜',
+      },
+    ],
+  },
+]
+
+const flatData = (() => {
+  const flat: TreeListItem[] = []
+  _.each(treeData, (one) => {
+    if (one.children) {
+      _.each(one.children, (two: TreeListItem) => {
+        if (two.children) {
+          _.each(two.children, (there) => {
+            flat.push(there)
+          })
+        } else {
+          flat.push(two)
+        }
+      })
+    } else {
+      flat.push(one)
+    }
+  })
+  return flat
+})()
+
+const store = observable({
+  selectedValues: [],
+  setSelectedValues(values: any) {
+    this.selectedValues = values
+  },
+  activeValue: null,
+  setActiveValue(value: any) {
+    this.activeValue = value
+  },
+})
+
+export const ComTree = () => (
+  <Flex>
+    <div style={{ height: '500px', width: '300px' }}>
+      <Tree
+        title='树状数据'
+        list={treeData}
+        selectedValues={store.selectedValues.slice()}
+        onSelectValues={(values) => store.setSelectedValues(values)}
+      />
+    </div>
+    <div style={{ height: '500px', width: '300px' }}>
+      <Tree
+        title='扁平的数据'
+        list={flatData}
+        selectedValues={store.selectedValues.slice()}
+        onSelectValues={(values) => store.setSelectedValues(values)}
+      />
+    </div>
+  </Flex>
+)
+
+export const ComTreeBorder = () => (
+  <Flex>
+    <div style={{ height: '500px', width: '300px', padding: '10px' }}>
+      <Tree
+        // border={false}
+        // withFilter={false}
+        showFind
+        list={treeData}
+        selectedValues={store.selectedValues.slice()}
+        onSelectValues={(values) => store.setSelectedValues(values)}
+      />
+    </div>
+  </Flex>
+)
+
+export const ComTreeWithFindFilter = () => {
+  return (
+    <div style={{ height: '500px', width: '300px' }}>
+      <Tree
+        list={treeData}
+        selectedValues={store.selectedValues.slice()}
+        onSelectValues={(values) => store.setSelectedValues(values)}
+        title='showFind'
+        showFind
+        withFilter={false}
+        activeValue={store.activeValue}
+        onActiveValue={(value, item) => {
+          store.setActiveValue(value)
+          console.log(value, item)
+        }}
+      />
+    </div>
+  )
+}
+
+export const ComTreeForRenderItem = () => (
+  <div style={{ height: '500px', display: 'flex' }}>
+    <Tree
+      style={{ width: '300px', marginRight: '30px' }}
+      list={treeData}
+      selectedValues={store.selectedValues.slice()}
+      onSelectValues={(values) => store.setSelectedValues(values)}
+      title='renderLeafItem renderGroupItem'
+      renderLeafItem={(data) => (
+        <div>
+          <span
+            style={{
+              backgroundColor: '#56a3f2',
+              color: 'white',
+              padding: '1px',
+              borderRadius: '2px',
+            }}
+          >
+            上架
+          </span>
+          {data.text}
+        </div>
+      )}
+      renderGroupItem={(data) => (
+        <div>
+          <img
+            src='https://img.guanmai.cn/product_pic/cdd0870bc403069b.jpeg'
+            style={{ width: '30px', height: '30px' }}
+            alt=''
+          />
+          {`${data.text}`}
+        </div>
+      )}
+    />
+  </div>
+)
+
+export const ComTreeWithWithFilter = () => (
+  <div style={{ height: '500px', width: '300px' }}>
+    <Tree
+      list={treeData}
+      selectedValues={store.selectedValues.slice()}
+      onSelectValues={(values) => store.setSelectedValues(values)}
+      title='withFilter'
+      withFilter={(list, query) => {
+        let result = list
+
+        let label: any
+        let search = query
+        if (query.startsWith('label:')) {
+          const arr = query.split(' ')
+          if (arr[0]) {
+            label = arr[0].slice('label:'.length)
+            search = arr[1]
+          }
+        }
+
+        console.log(label, search)
+
+        if (label || search) {
+          result = TreeUtil.filterGroupList(result, (v) => {
+            let flag = true
+            if (label && v.label !== label) {
+              flag = false
+            }
+            if (search && !v.text.includes(search)) {
+              flag = false
+            }
+
+            console.log(flag)
+
+            return flag
+          })
+        }
+        return result
+      }}
+    />
+  </div>
+)
+
+export const ComTreeForStatic = () => (
+  <div>
+    <div style={{ height: '500px', width: '300px' }}>
+      <Tree
+        title='树状数据'
+        list={treeData}
+        selectedValues={store.selectedValues.slice()}
+        onSelectValues={(values) => store.setSelectedValues(values)}
+      />
+    </div>
+    <button
+      onClick={() => {
+        console.log(
+          TreeUtil.selectedValues2SelectedList(treeData, store.selectedValues.slice())
+        )
+      }}
+    >
+      selectedValues2SelectedList
+    </button>
+  </div>
+)
+
+export const ComTreeWithDisabledCheckbox = () => {
+  return (
+    <div style={{ height: '500px', width: '300px' }}>
+      <Tree
+        title='树状数据'
+        list={treeData}
+        selectedValues={store.selectedValues.slice()}
+        onSelectValues={(values) => store.setSelectedValues(values)}
+        disabledCheckbox
+        activeValue={store.activeValue}
+        onActiveValue={(value, item) => {
+          store.setActiveValue(value)
+          console.log(value, item)
+        }}
+      />
+    </div>
+  )
+}
+
+export default {
+  title: '表单/Tree',
+}