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

package/src/component/more_select/stories.tsx

@@ -1,323 +1,323 @@
-import React from 'react'
-import MoreSelect from './more_select'
-import _ from 'lodash'
-import { observable, toJS } from 'mobx'
-
-const store = observable({
-  data: [
-    {
-      value: 1,
-      text: '南山',
-    },
-    {
-      value: 2,
-      text: '福田',
-    },
-    {
-      value: 3,
-      text: '罗湖',
-    },
-    {
-      value: 4,
-      text: '宝安',
-    },
-    {
-      value: 5,
-      text: '福永',
-    },
-    {
-      value: 6,
-      text: '坪洲',
-    },
-    {
-      value: 7,
-      text:
-        '西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡',
-    },
-    {
-      value: 8,
-      text: '西乡8',
-    },
-    {
-      value: 9,
-      text: '西乡9',
-    },
-    {
-      value: 10,
-      text: '西乡10',
-    },
-    {
-      value: 11,
-      text: '西乡11',
-    },
-  ],
-  dataGroup: [
-    {
-      label: '南山',
-      children: [
-        {
-          value: 1,
-          text: '科技园',
-        },
-        {
-          value: 2,
-          text: '大冲',
-        },
-        {
-          value: 3,
-          text: '大新',
-        },
-      ],
-    },
-    {
-      label: '宝安',
-      children: [
-        {
-          value: 21,
-          text: '西乡',
-        },
-        {
-          value: 22,
-          text: '固戍',
-        },
-      ],
-    },
-  ],
-  selected: undefined,
-  value: undefined,
-  onChange(value: any) {
-    this.value = value
-  },
-  setSelected(selected: any) {
-    this.selected = selected
-  },
-  mulSelected: [],
-  setMulSelected(selected: any) {
-    this.mulSelected = selected
-  },
-  clickFn(selected: any) {
-    this.selected = selected
-  },
-})
-
-export const ComMoreSelect = () => (
-  <div style={{ width: '200px' }}>
-    <MoreSelect<number>
-      data={store.data}
-      selected={store.selected}
-      onSelect={(selected) => {
-        console.log({ selected })
-        store.setSelected(selected)
-      }}
-    />
-    <div>不传任何prop，也不会报错</div>
-    <MoreSelect placeholder='不传任何prop，也不会报错' />
-    <div>disabled</div>
-    <MoreSelect<number>
-      disabled
-      data={store.data}
-      selected={store.selected}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-    />
-    <div>disabledClose</div>
-    <MoreSelect<number>
-      disabledClose
-      data={store.data}
-      selected={store.selected}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-    />
-  </div>
-)
-export const ComMoreSelectByValue = () => (
-  <div style={{ width: '200px' }}>
-    <MoreSelect<number>
-      data={store.data}
-      value={store.value}
-      onChange={(value) => store.onChange(value)}
-      onSelect={console.log}
-    />
-    <div>disabled</div>
-    <MoreSelect<number>
-      disabled
-      data={store.data}
-      value={store.value}
-      onChange={(value) => store.onChange(value)}
-    />
-    <div>disabledClose</div>
-    <MoreSelect<number>
-      disabledClose
-      data={store.data}
-      value={store.value}
-      onChange={(value) => store.onChange(value)}
-    />
-  </div>
-)
-export const ComMoreSelectForLongText = () => (
-  <div style={{ width: '200px' }}>
-    <MoreSelect<number>
-      data={store.data}
-      selected={{
-        value: 7,
-        text:
-          '西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡',
-      }}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-    />
-  </div>
-)
-
-export const ComMoreSelectWithRenderListFilterType = () => (
-  <MoreSelect<number>
-    data={store.data}
-    selected={store.selected}
-    onSelect={(selected) => {
-      store.setSelected(selected)
-    }}
-    renderListFilterType='pinyin'
-  />
-)
-export const ComMoreSelectForScrollToSelected = () => (
-  <MoreSelect<number>
-    data={store.data}
-    selected={{ value: 11, text: '西乡11' }}
-    onSelect={(selected) => {
-      store.setSelected(selected)
-    }}
-  />
-)
-
-export const ComMoreSelectWithOnSearch = () => (
-  <MoreSelect<number>
-    data={store.data}
-    selected={store.selected}
-    onSelect={(selected) => {
-      store.setSelected(selected)
-    }}
-    onSearch={(searchValue) => {
-      // 同步直接改变 data
-      store.setSelected(
-        // @ts-ignore
-        _.filter(store.data, (item) => item.text.includes(searchValue))
-      )
-    }}
-  />
-)
-
-export const ComMoreSelectWithOnSearchAsync = () => (
-  <MoreSelect<number>
-    data={store.data}
-    selected={store.selected}
-    onSelect={(selected) => {
-      store.setSelected(selected)
-    }}
-    onSearch={(searchValue) => {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(
-            // @ts-ignore
-            _.filter(store.data, (item) => item.text.includes(searchValue))
-          )
-        }, 1000)
-      })
-    }}
-  />
-)
-
-export const ComMoreSelectWithMultiple = () => (
-  <MoreSelect<number>
-    multiple
-    data={store.data}
-    selected={store.mulSelected}
-    onSelect={(selected) => {
-      store.setMulSelected(selected)
-    }}
-  />
-)
-
-export const ComMoreSelectWithMultipleByValue = () => (
-  <div>
-    <div>不传selected和onSelect，改为value和onChange</div>
-    <MoreSelect<number>
-      multiple
-      data={store.data}
-      value={store.value}
-      onChange={(value) => store.onChange(value)}
-      onSelect={console.log}
-    />
-  </div>
-)
-
-export const ComMoreSelectClick = () => (
-  <>
-    <MoreSelect<number>
-      isGroupList
-      multiple
-      data={store.dataGroup.slice()}
-      onClick={store.clickFn}
-      selected={store.selected}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-    />
-    <div>{_.map(store.selected, (item) => item.text).join('')}</div>
-  </>
-)
-
-export const ComMoreSelectWithMultipleAndOnSearch = () => {
-  return (
-    <MoreSelect<number>
-      multiple
-      data={toJS(store.data)}
-      selected={toJS(store.mulSelected)}
-      onSelect={(selected) => {
-        store.setMulSelected(selected)
-      }}
-      onSearch={() => {
-        store.data = [
-          {
-            value: 7,
-            text:
-              '西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡',
-          },
-          {
-            value: 8,
-            text: '西乡8',
-          },
-        ]
-      }}
-    />
-  )
-}
-
-export const ComMoreSelectWithIsGroupList = () => (
-  <MoreSelect<number>
-    isGroupList
-    data={store.dataGroup.slice()}
-    selected={store.selected}
-    onSelect={(selected) => {
-      store.setSelected(selected)
-    }}
-  />
-)
-
-export const ComMoreSelectWithIsGroupListMultiple = () => (
-  <MoreSelect<number>
-    isGroupList
-    multiple
-    data={store.dataGroup.slice()}
-    selected={store.mulSelected}
-    onSelect={(selected) => {
-      store.setMulSelected(selected)
-    }}
-  />
-)
-
-export default {
-  title: '表单/MoreSelect',
-}
+import React from 'react'
+import MoreSelect from './more_select'
+import _ from 'lodash'
+import { observable, toJS } from 'mobx'
+
+const store = observable({
+  data: [
+    {
+      value: 1,
+      text: '南山',
+    },
+    {
+      value: 2,
+      text: '福田',
+    },
+    {
+      value: 3,
+      text: '罗湖',
+    },
+    {
+      value: 4,
+      text: '宝安',
+    },
+    {
+      value: 5,
+      text: '福永',
+    },
+    {
+      value: 6,
+      text: '坪洲',
+    },
+    {
+      value: 7,
+      text:
+        '西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡',
+    },
+    {
+      value: 8,
+      text: '西乡8',
+    },
+    {
+      value: 9,
+      text: '西乡9',
+    },
+    {
+      value: 10,
+      text: '西乡10',
+    },
+    {
+      value: 11,
+      text: '西乡11',
+    },
+  ],
+  dataGroup: [
+    {
+      label: '南山',
+      children: [
+        {
+          value: 1,
+          text: '科技园',
+        },
+        {
+          value: 2,
+          text: '大冲',
+        },
+        {
+          value: 3,
+          text: '大新',
+        },
+      ],
+    },
+    {
+      label: '宝安',
+      children: [
+        {
+          value: 21,
+          text: '西乡',
+        },
+        {
+          value: 22,
+          text: '固戍',
+        },
+      ],
+    },
+  ],
+  selected: undefined,
+  value: undefined,
+  onChange(value: any) {
+    this.value = value
+  },
+  setSelected(selected: any) {
+    this.selected = selected
+  },
+  mulSelected: [],
+  setMulSelected(selected: any) {
+    this.mulSelected = selected
+  },
+  clickFn(selected: any) {
+    this.selected = selected
+  },
+})
+
+export const ComMoreSelect = () => (
+  <div style={{ width: '200px' }}>
+    <MoreSelect<number>
+      data={store.data}
+      selected={store.selected}
+      onSelect={(selected) => {
+        console.log({ selected })
+        store.setSelected(selected)
+      }}
+    />
+    <div>不传任何prop，也不会报错</div>
+    <MoreSelect placeholder='不传任何prop，也不会报错' />
+    <div>disabled</div>
+    <MoreSelect<number>
+      disabled
+      data={store.data}
+      selected={store.selected}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+    />
+    <div>disabledClose</div>
+    <MoreSelect<number>
+      disabledClose
+      data={store.data}
+      selected={store.selected}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+    />
+  </div>
+)
+export const ComMoreSelectByValue = () => (
+  <div style={{ width: '200px' }}>
+    <MoreSelect<number>
+      data={store.data}
+      value={store.value}
+      onChange={(value) => store.onChange(value)}
+      onSelect={console.log}
+    />
+    <div>disabled</div>
+    <MoreSelect<number>
+      disabled
+      data={store.data}
+      value={store.value}
+      onChange={(value) => store.onChange(value)}
+    />
+    <div>disabledClose</div>
+    <MoreSelect<number>
+      disabledClose
+      data={store.data}
+      value={store.value}
+      onChange={(value) => store.onChange(value)}
+    />
+  </div>
+)
+export const ComMoreSelectForLongText = () => (
+  <div style={{ width: '200px' }}>
+    <MoreSelect<number>
+      data={store.data}
+      selected={{
+        value: 7,
+        text:
+          '西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡',
+      }}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+    />
+  </div>
+)
+
+export const ComMoreSelectWithRenderListFilterType = () => (
+  <MoreSelect<number>
+    data={store.data}
+    selected={store.selected}
+    onSelect={(selected) => {
+      store.setSelected(selected)
+    }}
+    renderListFilterType='pinyin'
+  />
+)
+export const ComMoreSelectForScrollToSelected = () => (
+  <MoreSelect<number>
+    data={store.data}
+    selected={{ value: 11, text: '西乡11' }}
+    onSelect={(selected) => {
+      store.setSelected(selected)
+    }}
+  />
+)
+
+export const ComMoreSelectWithOnSearch = () => (
+  <MoreSelect<number>
+    data={store.data}
+    selected={store.selected}
+    onSelect={(selected) => {
+      store.setSelected(selected)
+    }}
+    onSearch={(searchValue) => {
+      // 同步直接改变 data
+      store.setSelected(
+        // @ts-ignore
+        _.filter(store.data, (item) => item.text.includes(searchValue))
+      )
+    }}
+  />
+)
+
+export const ComMoreSelectWithOnSearchAsync = () => (
+  <MoreSelect<number>
+    data={store.data}
+    selected={store.selected}
+    onSelect={(selected) => {
+      store.setSelected(selected)
+    }}
+    onSearch={(searchValue) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(
+            // @ts-ignore
+            _.filter(store.data, (item) => item.text.includes(searchValue))
+          )
+        }, 1000)
+      })
+    }}
+  />
+)
+
+export const ComMoreSelectWithMultiple = () => (
+  <MoreSelect<number>
+    multiple
+    data={store.data}
+    selected={store.mulSelected}
+    onSelect={(selected) => {
+      store.setMulSelected(selected)
+    }}
+  />
+)
+
+export const ComMoreSelectWithMultipleByValue = () => (
+  <div>
+    <div>不传selected和onSelect，改为value和onChange</div>
+    <MoreSelect<number>
+      multiple
+      data={store.data}
+      value={store.value}
+      onChange={(value) => store.onChange(value)}
+      onSelect={console.log}
+    />
+  </div>
+)
+
+export const ComMoreSelectClick = () => (
+  <>
+    <MoreSelect<number>
+      isGroupList
+      multiple
+      data={store.dataGroup.slice()}
+      onClick={store.clickFn}
+      selected={store.selected}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+    />
+    <div>{_.map(store.selected, (item) => item.text).join('')}</div>
+  </>
+)
+
+export const ComMoreSelectWithMultipleAndOnSearch = () => {
+  return (
+    <MoreSelect<number>
+      multiple
+      data={toJS(store.data)}
+      selected={toJS(store.mulSelected)}
+      onSelect={(selected) => {
+        store.setMulSelected(selected)
+      }}
+      onSearch={() => {
+        store.data = [
+          {
+            value: 7,
+            text:
+              '西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡西乡',
+          },
+          {
+            value: 8,
+            text: '西乡8',
+          },
+        ]
+      }}
+    />
+  )
+}
+
+export const ComMoreSelectWithIsGroupList = () => (
+  <MoreSelect<number>
+    isGroupList
+    data={store.dataGroup.slice()}
+    selected={store.selected}
+    onSelect={(selected) => {
+      store.setSelected(selected)
+    }}
+  />
+)
+
+export const ComMoreSelectWithIsGroupListMultiple = () => (
+  <MoreSelect<number>
+    isGroupList
+    multiple
+    data={store.dataGroup.slice()}
+    selected={store.mulSelected}
+    onSelect={(selected) => {
+      store.setMulSelected(selected)
+    }}
+  />
+)
+
+export default {
+  title: '表单/MoreSelect',
+}