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

package/src/component/level_list/level_list.tsx

@@ -1,123 +1,123 @@
-import React, { ReactElement, useEffect, useState } from 'react'
-import classNames from 'classnames'
-import { BaseLevelListProps, LevelListProps } from './types'
-import LevelItem from './level_item'
-import { Flex } from '../flex'
-import { getLevel } from './utils'
-import { TreeDataItem } from '../../types'
-import { judgeFunction } from '../../common/utils'
-
-function BaseLevelList<V = any>({
-  titles = [],
-  data = [],
-  selected = [],
-  onSelect,
-  willActiveSelected,
-  onWillActiveSelect,
-  isReverse,
-  onlySelectLeaf,
-  isForFunctionSet,
-  className,
-  ...rest
-}: BaseLevelListProps<V>): ReactElement {
-  const handleSelect = () => {
-    judgeFunction(onSelect, willActiveSelected)
-  }
-
-  const handleListItemMouseEnter = (index: number, item: TreeDataItem<V>) => {
-    // slice 避免引用
-    const newWill = willActiveSelected.slice(0, index + 1)
-    newWill[index] = item.value
-    onWillActiveSelect(newWill)
-  }
-
-  const handleMouseLeave = (): void => {
-    // 离开的时候要重置下 willActiveSelected 为 selected
-    // slice 避免引用
-    onWillActiveSelect(selected.slice())
-  }
-
-  const level = getLevel<V>(data, willActiveSelected)
-  let gaps: number[] = []
-  if (isForFunctionSet) {
-    let indexes = willActiveSelected.map((value, index) =>
-      level[index].findIndex((vv) => vv.value === value)
-    )
-    indexes = [0, ...indexes]
-    let top = 0
-    gaps = indexes.map((value) => {
-      top += value
-      return top
-    })
-  }
-
-  let items = level.map((item, index) => (
-    <LevelItem<V>
-      data={item}
-      key={index}
-      title={titles![index]}
-      selected={selected[index]}
-      onSelect={handleSelect}
-      willActiveSelected={willActiveSelected[index]}
-      onListItemMouseEnter={(item) => {
-        handleListItemMouseEnter(index, item)
-      }}
-      onlySelectLeaf={onlySelectLeaf}
-      style={{ paddingTop: gaps[index] ? gaps[index] * 32 : 0 }}
-    />
-  ))
-
-  if (isReverse) {
-    items = items.reverse()
-  }
-
-  return (
-    <Flex
-      {...rest}
-      className={classNames(
-        'gm-level-list',
-        {
-          'gm-level-list-for-function-set': isForFunctionSet,
-        },
-        className
-      )}
-      onMouseLeave={handleMouseLeave}
-    >
-      {items}
-    </Flex>
-  )
-}
-
-function LevelList<V = any>({
-  data = [],
-  willActiveSelected,
-  onWillActiveSelect,
-  ...rest
-}: LevelListProps<V>) {
-  const [will, setWill] = useState(willActiveSelected || [])
-
-  useEffect(() => {
-    if (willActiveSelected) {
-      setWill(willActiveSelected)
-    }
-  }, [data, willActiveSelected])
-
-  const handleWill = (newWill: V[]) => {
-    if (onWillActiveSelect) {
-      onWillActiveSelect(newWill)
-    } else {
-      setWill(newWill)
-    }
-  }
-
-  return (
-    <BaseLevelList<V>
-      {...rest}
-      data={data}
-      willActiveSelected={will}
-      onWillActiveSelect={handleWill}
-    />
-  )
-}
-
-export default LevelList
+import React, { ReactElement, useEffect, useState } from 'react'
+import classNames from 'classnames'
+import { BaseLevelListProps, LevelListProps } from './types'
+import LevelItem from './level_item'
+import { Flex } from '../flex'
+import { getLevel } from './utils'
+import { TreeDataItem } from '../../types'
+import { judgeFunction } from '../../common/utils'
+
+function BaseLevelList<V = any>({
+  titles = [],
+  data = [],
+  selected = [],
+  onSelect,
+  willActiveSelected,
+  onWillActiveSelect,
+  isReverse,
+  onlySelectLeaf,
+  isForFunctionSet,
+  className,
+  ...rest
+}: BaseLevelListProps<V>): ReactElement {
+  const handleSelect = () => {
+    judgeFunction(onSelect, willActiveSelected)
+  }
+
+  const handleListItemMouseEnter = (index: number, item: TreeDataItem<V>) => {
+    // slice 避免引用
+    const newWill = willActiveSelected.slice(0, index + 1)
+    newWill[index] = item.value
+    onWillActiveSelect(newWill)
+  }
+
+  const handleMouseLeave = (): void => {
+    // 离开的时候要重置下 willActiveSelected 为 selected
+    // slice 避免引用
+    onWillActiveSelect(selected.slice())
+  }
+
+  const level = getLevel<V>(data, willActiveSelected)
+  let gaps: number[] = []
+  if (isForFunctionSet) {
+    let indexes = willActiveSelected.map((value, index) =>
+      level[index].findIndex((vv) => vv.value === value)
+    )
+    indexes = [0, ...indexes]
+    let top = 0
+    gaps = indexes.map((value) => {
+      top += value
+      return top
+    })
+  }
+
+  let items = level.map((item, index) => (
+    <LevelItem<V>
+      data={item}
+      key={index}
+      title={titles![index]}
+      selected={selected[index]}
+      onSelect={handleSelect}
+      willActiveSelected={willActiveSelected[index]}
+      onListItemMouseEnter={(item) => {
+        handleListItemMouseEnter(index, item)
+      }}
+      onlySelectLeaf={onlySelectLeaf}
+      style={{ paddingTop: gaps[index] ? gaps[index] * 32 : 0 }}
+    />
+  ))
+
+  if (isReverse) {
+    items = items.reverse()
+  }
+
+  return (
+    <Flex
+      {...rest}
+      className={classNames(
+        'gm-level-list',
+        {
+          'gm-level-list-for-function-set': isForFunctionSet,
+        },
+        className
+      )}
+      onMouseLeave={handleMouseLeave}
+    >
+      {items}
+    </Flex>
+  )
+}
+
+function LevelList<V = any>({
+  data = [],
+  willActiveSelected,
+  onWillActiveSelect,
+  ...rest
+}: LevelListProps<V>) {
+  const [will, setWill] = useState(willActiveSelected || [])
+
+  useEffect(() => {
+    if (willActiveSelected) {
+      setWill(willActiveSelected)
+    }
+  }, [data, willActiveSelected])
+
+  const handleWill = (newWill: V[]) => {
+    if (onWillActiveSelect) {
+      onWillActiveSelect(newWill)
+    } else {
+      setWill(newWill)
+    }
+  }
+
+  return (
+    <BaseLevelList<V>
+      {...rest}
+      data={data}
+      willActiveSelected={will}
+      onWillActiveSelect={handleWill}
+    />
+  )
+}
+
+export default LevelList

package/src/component/level_list/stories/constants.ts

@@ -1,72 +1,72 @@
-import { TreeDataItem } from '../../../types'
-
-export const areaData: TreeDataItem<string>[] = [
-  {
-    value: '0',
-    text: '宝安',
-    children: [
-      {
-        value: '01',
-        text: '西乡',
-      },
-      {
-        value: '02',
-        text: '固戍',
-      },
-    ],
-  },
-  {
-    value: '1',
-    text: '南山',
-    children: [
-      {
-        value: '11',
-        text: '科技园科技园科技园科技园科技园科技园科技园科技园科技园科技园',
-        children: [
-          {
-            value: '111',
-            text: '东区',
-          },
-          {
-            value: '112',
-            text: '西区',
-          },
-        ],
-      },
-      {
-        value: '112',
-        text: '科技园科',
-        children: [
-          {
-            value: '1112',
-            text: '东区',
-          },
-          {
-            value: '1122',
-            text: '西区',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: '2',
-    text: '福田',
-    children: [
-      {
-        value: '21',
-        text: '竹子林',
-        children: [
-          {
-            value: '211',
-            text: '东区',
-          },
-          {
-            value: '212',
-            text: '西区',
-          },
-        ],
-      },
-    ],
-  },
-]
+import { TreeDataItem } from '../../../types'
+
+export const areaData: TreeDataItem<string>[] = [
+  {
+    value: '0',
+    text: '宝安',
+    children: [
+      {
+        value: '01',
+        text: '西乡',
+      },
+      {
+        value: '02',
+        text: '固戍',
+      },
+    ],
+  },
+  {
+    value: '1',
+    text: '南山',
+    children: [
+      {
+        value: '11',
+        text: '科技园科技园科技园科技园科技园科技园科技园科技园科技园科技园',
+        children: [
+          {
+            value: '111',
+            text: '东区',
+          },
+          {
+            value: '112',
+            text: '西区',
+          },
+        ],
+      },
+      {
+        value: '112',
+        text: '科技园科',
+        children: [
+          {
+            value: '1112',
+            text: '东区',
+          },
+          {
+            value: '1122',
+            text: '西区',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '2',
+    text: '福田',
+    children: [
+      {
+        value: '21',
+        text: '竹子林',
+        children: [
+          {
+            value: '211',
+            text: '东区',
+          },
+          {
+            value: '212',
+            text: '西区',
+          },
+        ],
+      },
+    ],
+  },
+]

package/src/component/level_list/stories/stories.tsx

@@ -1,87 +1,87 @@
-import React from 'react'
-import LevelList from '../level_list'
-import { observable } from 'mobx'
-import { areaData } from './constants'
-
-const store = observable({
-  data: areaData,
-  selected: ['1'],
-  willActiveSelected: ['1'],
-  setSelected(selected: any) {
-    console.log(selected)
-    this.selected = selected
-  },
-  setWillActiveSelected(willActiveSelected: any) {
-    this.willActiveSelected = willActiveSelected
-  },
-})
-
-export const ComLevelList = () => (
-  <div className='gm-inline-block'>
-    <LevelList
-      data={store.data.slice()}
-      selected={store.selected.slice()}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-    />
-  </div>
-)
-
-export const ComLevelListWithOnlySelectLeaf = () => (
-  <div className='gm-inline-block'>
-    <LevelList
-      data={store.data.slice()}
-      selected={store.selected.slice()}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-      onlySelectLeaf
-    />
-  </div>
-)
-
-export const ComLevelListWithIsReverse = () => (
-  <div
-    style={{
-      position: 'absolute',
-      right: 0,
-    }}
-  >
-    <LevelList
-      data={store.data.slice()}
-      selected={store.selected.slice()}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-      willActiveSelected={store.willActiveSelected.slice()}
-      onWillActiveSelect={(willActiveSelected) => {
-        console.log(willActiveSelected)
-        store.setWillActiveSelected(willActiveSelected)
-      }}
-      isReverse
-    />
-  </div>
-)
-
-export const ComLevelListWithIsForFunctionSet = () => (
-  <div className='gm-inline-block'>
-    <LevelList
-      data={store.data.slice()}
-      selected={store.selected.slice()}
-      onSelect={(selected) => {
-        store.setSelected(selected)
-      }}
-      willActiveSelected={store.willActiveSelected.slice()}
-      onWillActiveSelect={(willActiveSelected) => {
-        console.log(willActiveSelected)
-        store.setWillActiveSelected(willActiveSelected)
-      }}
-      isForFunctionSet
-    />
-  </div>
-)
-
-export default {
-  title: '表单/LevelList',
-}
+import React from 'react'
+import LevelList from '../level_list'
+import { observable } from 'mobx'
+import { areaData } from './constants'
+
+const store = observable({
+  data: areaData,
+  selected: ['1'],
+  willActiveSelected: ['1'],
+  setSelected(selected: any) {
+    console.log(selected)
+    this.selected = selected
+  },
+  setWillActiveSelected(willActiveSelected: any) {
+    this.willActiveSelected = willActiveSelected
+  },
+})
+
+export const ComLevelList = () => (
+  <div className='gm-inline-block'>
+    <LevelList
+      data={store.data.slice()}
+      selected={store.selected.slice()}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+    />
+  </div>
+)
+
+export const ComLevelListWithOnlySelectLeaf = () => (
+  <div className='gm-inline-block'>
+    <LevelList
+      data={store.data.slice()}
+      selected={store.selected.slice()}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+      onlySelectLeaf
+    />
+  </div>
+)
+
+export const ComLevelListWithIsReverse = () => (
+  <div
+    style={{
+      position: 'absolute',
+      right: 0,
+    }}
+  >
+    <LevelList
+      data={store.data.slice()}
+      selected={store.selected.slice()}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+      willActiveSelected={store.willActiveSelected.slice()}
+      onWillActiveSelect={(willActiveSelected) => {
+        console.log(willActiveSelected)
+        store.setWillActiveSelected(willActiveSelected)
+      }}
+      isReverse
+    />
+  </div>
+)
+
+export const ComLevelListWithIsForFunctionSet = () => (
+  <div className='gm-inline-block'>
+    <LevelList
+      data={store.data.slice()}
+      selected={store.selected.slice()}
+      onSelect={(selected) => {
+        store.setSelected(selected)
+      }}
+      willActiveSelected={store.willActiveSelected.slice()}
+      onWillActiveSelect={(willActiveSelected) => {
+        console.log(willActiveSelected)
+        store.setWillActiveSelected(willActiveSelected)
+      }}
+      isForFunctionSet
+    />
+  </div>
+)
+
+export default {
+  title: '表单/LevelList',
+}

package/src/component/level_list/style.less

@@ -1,41 +1,41 @@
-.gm-level-list {
-  height: 220px;
-
-  .gm-level-list-item {
-    min-width: 120px;
-    max-width: 180px;
-    border: 1px solid var(--gm-color-border);
-    margin-left: -1px;
-    background: white;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    .gm-level-list-item-title {
-      color: var(--gm-color-secondary);
-      padding: 5px;
-    }
-
-    .gm-list {
-      border: none;
-      height: 218px;
-    }
-  }
-
-  &.gm-level-list-for-function-set {
-    height: auto;
-    background-color: transparent;
-
-    .gm-level-list-item {
-      border: none;
-      max-width: none;
-      background: transparent;
-
-      .gm-list {
-        border: 1px solid var(--gm-color-border);
-        height: auto;
-      }
-    }
-  }
-}
+.gm-level-list {
+  height: 220px;
+
+  .gm-level-list-item {
+    min-width: 120px;
+    max-width: 180px;
+    border: 1px solid var(--gm-color-border);
+    margin-left: -1px;
+    background: white;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .gm-level-list-item-title {
+      color: var(--gm-color-secondary);
+      padding: 5px;
+    }
+
+    .gm-list {
+      border: none;
+      height: 218px;
+    }
+  }
+
+  &.gm-level-list-for-function-set {
+    height: auto;
+    background-color: transparent;
+
+    .gm-level-list-item {
+      border: none;
+      max-width: none;
+      background: transparent;
+
+      .gm-list {
+        border: 1px solid var(--gm-color-border);
+        height: auto;
+      }
+    }
+  }
+}