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

package/src/component/list/base.tsx

@@ -1,129 +1,129 @@
-import React, { Component, createRef } from 'react'
-import classNames from 'classnames'
-import { xor, flatMap, isNil, noop } from 'lodash'
-import { ListBaseProps } from './types'
-import { ListDataItem } from '../../types'
-import { ConfigConsumer } from '../config_provider'
-
-class Base<V = any> extends Component<ListBaseProps<V>> {
-  static defaultProps = {
-    onSelect: noop,
-    renderItem: (value: any) => value.text,
-    getItemProps: () => ({}),
-  }
-
-  private _listRef = createRef<HTMLDivElement>()
-  private _isUnMounted = false
-
-  componentDidMount() {
-    if (this.props.isScrollTo) {
-      this._doScrollToSelected('.active')
-      this._doScrollToSelected('.will-active')
-    }
-  }
-
-  componentWillUnmount() {
-    this._isUnMounted = true
-  }
-
-  componentDidUpdate() {
-    if (this.props.isScrollTo) {
-      this._doScrollToSelected('.will-active')
-    }
-  }
-
-  public apiDoSelectWillActive = (): void => {
-    const flatList = this._getFlatData()
-    const { willActiveIndex } = this.props
-    if (!isNil(willActiveIndex) && willActiveIndex < flatList.length) {
-      this._handleSelect(flatList[willActiveIndex])
-    }
-  }
-
-  private _getFlatData = () => {
-    return flatMap(this.props.data, (v) => v.children)
-  }
-
-  private _doScrollToSelected = (selector: string): void => {
-    // 找到第一个即可
-    if (!this._isUnMounted) {
-      const $active = this._listRef.current!.querySelector(selector)
-      if ($active) {
-        // @ts-ignore
-        $active.scrollIntoViewIfNeeded(false)
-      }
-    }
-  }
-
-  private _handleSelect = (item: ListDataItem<V>): void => {
-    if (item.disabled) {
-      return
-    }
-    const { multiple, selected, onSelect } = this.props
-    if (multiple) {
-      onSelect && onSelect(xor(selected, [item.value]))
-    } else {
-      onSelect && onSelect([item.value])
-    }
-  }
-
-  render() {
-    const {
-      data,
-      isGroupList,
-      selected,
-      multiple,
-      onSelect,
-      isScrollTo,
-      renderItem,
-      className,
-      willActiveIndex,
-      getItemProps,
-      ...rest
-    } = this.props
-
-    let sequenceDataIndex = -1
-    return (
-      <ConfigConsumer>
-        {({ fontSize }) => (
-          <div
-            {...rest}
-            ref={this._listRef}
-            className={classNames(
-              'gm-list',
-              {
-                'gm-list-group': isGroupList,
-                [`gm-list-text-${fontSize}`]: fontSize,
-              },
-              className
-            )}
-          >
-            {data.map((group, gIndex) => (
-              <div key={gIndex} className='gm-list-group-item'>
-                <div className='gm-list-label'>{group.label}</div>
-                {group.children.map((item, index) => {
-                  sequenceDataIndex++
-                  return (
-                    <div
-                      key={`${index}_${item.value}`}
-                      {...getItemProps!(item)}
-                      className={classNames('gm-list-item', {
-                        active: selected.includes(item.value),
-                        'will-active': willActiveIndex === sequenceDataIndex,
-                        disabled: item.disabled,
-                      })}
-                      onClick={() => this._handleSelect(item)}
-                    >
-                      {renderItem!(item, index)}
-                    </div>
-                  )
-                })}
-              </div>
-            ))}
-          </div>
-        )}
-      </ConfigConsumer>
-    )
-  }
-}
-export default Base
+import React, { Component, createRef } from 'react'
+import classNames from 'classnames'
+import { xor, flatMap, isNil, noop } from 'lodash'
+import { ListBaseProps } from './types'
+import { ListDataItem } from '../../types'
+import { ConfigConsumer } from '../config_provider'
+
+class Base<V = any> extends Component<ListBaseProps<V>> {
+  static defaultProps = {
+    onSelect: noop,
+    renderItem: (value: any) => value.text,
+    getItemProps: () => ({}),
+  }
+
+  private _listRef = createRef<HTMLDivElement>()
+  private _isUnMounted = false
+
+  componentDidMount() {
+    if (this.props.isScrollTo) {
+      this._doScrollToSelected('.active')
+      this._doScrollToSelected('.will-active')
+    }
+  }
+
+  componentWillUnmount() {
+    this._isUnMounted = true
+  }
+
+  componentDidUpdate() {
+    if (this.props.isScrollTo) {
+      this._doScrollToSelected('.will-active')
+    }
+  }
+
+  public apiDoSelectWillActive = (): void => {
+    const flatList = this._getFlatData()
+    const { willActiveIndex } = this.props
+    if (!isNil(willActiveIndex) && willActiveIndex < flatList.length) {
+      this._handleSelect(flatList[willActiveIndex])
+    }
+  }
+
+  private _getFlatData = () => {
+    return flatMap(this.props.data, (v) => v.children)
+  }
+
+  private _doScrollToSelected = (selector: string): void => {
+    // 找到第一个即可
+    if (!this._isUnMounted) {
+      const $active = this._listRef.current!.querySelector(selector)
+      if ($active) {
+        // @ts-ignore
+        $active.scrollIntoViewIfNeeded(false)
+      }
+    }
+  }
+
+  private _handleSelect = (item: ListDataItem<V>): void => {
+    if (item.disabled) {
+      return
+    }
+    const { multiple, selected, onSelect } = this.props
+    if (multiple) {
+      onSelect && onSelect(xor(selected, [item.value]))
+    } else {
+      onSelect && onSelect([item.value])
+    }
+  }
+
+  render() {
+    const {
+      data,
+      isGroupList,
+      selected,
+      multiple,
+      onSelect,
+      isScrollTo,
+      renderItem,
+      className,
+      willActiveIndex,
+      getItemProps,
+      ...rest
+    } = this.props
+
+    let sequenceDataIndex = -1
+    return (
+      <ConfigConsumer>
+        {({ fontSize }) => (
+          <div
+            {...rest}
+            ref={this._listRef}
+            className={classNames(
+              'gm-list',
+              {
+                'gm-list-group': isGroupList,
+                [`gm-list-text-${fontSize}`]: fontSize,
+              },
+              className
+            )}
+          >
+            {data.map((group, gIndex) => (
+              <div key={gIndex} className='gm-list-group-item'>
+                <div className='gm-list-label'>{group.label}</div>
+                {group.children.map((item, index) => {
+                  sequenceDataIndex++
+                  return (
+                    <div
+                      key={`${index}_${item.value}`}
+                      {...getItemProps!(item)}
+                      className={classNames('gm-list-item', {
+                        active: selected.includes(item.value),
+                        'will-active': willActiveIndex === sequenceDataIndex,
+                        disabled: item.disabled,
+                      })}
+                      onClick={() => this._handleSelect(item)}
+                    >
+                      {renderItem!(item, index)}
+                    </div>
+                  )
+                })}
+              </div>
+            ))}
+          </div>
+        )}
+      </ConfigConsumer>
+    )
+  }
+}
+export default Base

package/src/component/list/index.ts

@@ -1,3 +1,3 @@
-export { default as List } from './list'
-export { default as ListBase } from './base'
-export type { ListProps, ListBaseProps } from './types'
+export { default as List } from './list'
+export { default as ListBase } from './base'
+export type { ListProps, ListBaseProps } from './types'

package/src/component/list/list.tsx

@@ -1,61 +1,61 @@
-import React, { Component, createRef } from 'react'
-import { ListProps } from './types'
-import Base from './base'
-import _ from 'lodash'
-import { ListDataItem, ListGroupDataItem } from '../../types'
-
-class List<V = any> extends Component<ListProps<V>> {
-  static defaultProps = {
-    onSelect: _.noop,
-    renderItem: (value: any) => value.text,
-    getItemProps: () => ({}),
-  }
-
-  private _baseRef = createRef<Base<V>>()
-
-  public apiDoSelectWillActive = (): void => {
-    this._baseRef.current!.apiDoSelectWillActive()
-  }
-
-  private _handleSelect = (selected: V[]): void => {
-    const { multiple, onSelect } = this.props
-    if (multiple) {
-      // @ts-ignore
-      onSelect && onSelect(selected)
-    } else {
-      // @ts-ignore
-      onSelect && onSelect(selected[0])
-    }
-  }
-
-  render() {
-    const { data, selected, multiple, isGroupList, ...rest } = this.props
-
-    let oData: ListGroupDataItem<V>[]
-    if (isGroupList) {
-      oData = data as ListGroupDataItem<V>[]
-    } else {
-      oData = [{ label: '', children: data as ListDataItem<V>[] }]
-    }
-
-    let oSelected: V[]
-    if (multiple) {
-      oSelected = (selected as V[]) ?? []
-    } else {
-      oSelected = _.isNil(selected) ? [] : [selected as V]
-    }
-    return (
-      <Base<V>
-        {...rest}
-        ref={this._baseRef}
-        selected={oSelected}
-        data={oData}
-        onSelect={this._handleSelect}
-        multiple={multiple}
-        isGroupList={isGroupList}
-      />
-    )
-  }
-}
-
-export default List
+import React, { Component, createRef } from 'react'
+import { ListProps } from './types'
+import Base from './base'
+import _ from 'lodash'
+import { ListDataItem, ListGroupDataItem } from '../../types'
+
+class List<V = any> extends Component<ListProps<V>> {
+  static defaultProps = {
+    onSelect: _.noop,
+    renderItem: (value: any) => value.text,
+    getItemProps: () => ({}),
+  }
+
+  private _baseRef = createRef<Base<V>>()
+
+  public apiDoSelectWillActive = (): void => {
+    this._baseRef.current!.apiDoSelectWillActive()
+  }
+
+  private _handleSelect = (selected: V[]): void => {
+    const { multiple, onSelect } = this.props
+    if (multiple) {
+      // @ts-ignore
+      onSelect && onSelect(selected)
+    } else {
+      // @ts-ignore
+      onSelect && onSelect(selected[0])
+    }
+  }
+
+  render() {
+    const { data, selected, multiple, isGroupList, ...rest } = this.props
+
+    let oData: ListGroupDataItem<V>[]
+    if (isGroupList) {
+      oData = data as ListGroupDataItem<V>[]
+    } else {
+      oData = [{ label: '', children: data as ListDataItem<V>[] }]
+    }
+
+    let oSelected: V[]
+    if (multiple) {
+      oSelected = (selected as V[]) ?? []
+    } else {
+      oSelected = _.isNil(selected) ? [] : [selected as V]
+    }
+    return (
+      <Base<V>
+        {...rest}
+        ref={this._baseRef}
+        selected={oSelected}
+        data={oData}
+        onSelect={this._handleSelect}
+        multiple={multiple}
+        isGroupList={isGroupList}
+      />
+    )
+  }
+}
+
+export default List

package/src/component/list/stories.tsx

@@ -1,113 +1,113 @@
-import React from 'react'
-import List from './list'
-import { observable } from 'mobx'
-import { ListDataItem, ListGroupDataItem } from '../../types'
-
-const data: ListDataItem<string>[] = [
-  { value: '南山', text: '南山' },
-  { value: '福田', text: '福田', disabled: true },
-  { value: '龙岗', text: '龙岗' },
-  { value: '罗湖', text: '罗湖' },
-  { value: '罗湖1', text: '罗湖1' },
-  { value: '罗湖2', text: '罗湖2' },
-  { value: '罗湖3', text: '罗湖3' },
-  { value: '罗湖4', text: '罗湖4' },
-  { value: '罗湖5', text: '罗湖5' },
-]
-
-const groupData: ListGroupDataItem<string>[] = [
-  {
-    label: '分组二',
-    children: [
-      { value: '南山', text: '南山' },
-      { value: '福田', text: '福田' },
-    ],
-  },
-  {
-    label: '分组一',
-    children: [
-      { value: '龙岗', text: '龙岗' },
-      { value: '罗湖', text: '罗湖' },
-    ],
-  },
-]
-
-const store = observable({
-  selected: null,
-  setSelected(selected: string | string[]) {
-    console.log(selected)
-    // @ts-ignore
-    this.selected = selected
-  },
-})
-
-export const ComList = () => (
-  <div>
-    <div className='gm-inline-block'>
-      <List
-        data={data}
-        selected={store.selected}
-        onSelect={(selected: string) => {
-          store.setSelected(selected)
-        }}
-      />
-    </div>
-    <div>renderItem</div>
-    <div className='gm-inline-block'>
-      <List
-        data={data}
-        selected={store.selected}
-        onSelect={(selected: string) => {
-          store.setSelected(selected)
-        }}
-        renderItem={(item, index) => item.text + index}
-      />
-    </div>
-  </div>
-)
-export const ComListWithMultiple = () => (
-  <div className='gm-inline-block'>
-    <List<string>
-      multiple
-      data={data}
-      selected={store.selected || []}
-      onSelect={(selected: string[]) => {
-        store.setSelected(selected)
-      }}
-    />
-  </div>
-)
-
-export const ComListWithIsGroupList = () => (
-  <div className='gm-inline-block'>
-    <List<string>
-      data={groupData}
-      isGroupList
-      selected={store.selected || ''}
-      onSelect={(selected: string) => {
-        store.setSelected(selected)
-      }}
-    />
-  </div>
-)
-
-export const ComListWithIsScrollTo = () => (
-  <div className='gm-inline-block'>
-    <List
-      data={data}
-      selected='罗湖5'
-      onSelect={(selected: string) => {
-        store.setSelected(selected)
-      }}
-      renderItem={(item, index) => item.text + index}
-      isScrollTo
-      style={{
-        maxHeight: '100px',
-      }}
-    />
-  </div>
-)
-
-export default {
-  title: '表单/List',
-}
+import React from 'react'
+import List from './list'
+import { observable } from 'mobx'
+import { ListDataItem, ListGroupDataItem } from '../../types'
+
+const data: ListDataItem<string>[] = [
+  { value: '南山', text: '南山' },
+  { value: '福田', text: '福田', disabled: true },
+  { value: '龙岗', text: '龙岗' },
+  { value: '罗湖', text: '罗湖' },
+  { value: '罗湖1', text: '罗湖1' },
+  { value: '罗湖2', text: '罗湖2' },
+  { value: '罗湖3', text: '罗湖3' },
+  { value: '罗湖4', text: '罗湖4' },
+  { value: '罗湖5', text: '罗湖5' },
+]
+
+const groupData: ListGroupDataItem<string>[] = [
+  {
+    label: '分组二',
+    children: [
+      { value: '南山', text: '南山' },
+      { value: '福田', text: '福田' },
+    ],
+  },
+  {
+    label: '分组一',
+    children: [
+      { value: '龙岗', text: '龙岗' },
+      { value: '罗湖', text: '罗湖' },
+    ],
+  },
+]
+
+const store = observable({
+  selected: null,
+  setSelected(selected: string | string[]) {
+    console.log(selected)
+    // @ts-ignore
+    this.selected = selected
+  },
+})
+
+export const ComList = () => (
+  <div>
+    <div className='gm-inline-block'>
+      <List
+        data={data}
+        selected={store.selected}
+        onSelect={(selected: string) => {
+          store.setSelected(selected)
+        }}
+      />
+    </div>
+    <div>renderItem</div>
+    <div className='gm-inline-block'>
+      <List
+        data={data}
+        selected={store.selected}
+        onSelect={(selected: string) => {
+          store.setSelected(selected)
+        }}
+        renderItem={(item, index) => item.text + index}
+      />
+    </div>
+  </div>
+)
+export const ComListWithMultiple = () => (
+  <div className='gm-inline-block'>
+    <List<string>
+      multiple
+      data={data}
+      selected={store.selected || []}
+      onSelect={(selected: string[]) => {
+        store.setSelected(selected)
+      }}
+    />
+  </div>
+)
+
+export const ComListWithIsGroupList = () => (
+  <div className='gm-inline-block'>
+    <List<string>
+      data={groupData}
+      isGroupList
+      selected={store.selected || ''}
+      onSelect={(selected: string) => {
+        store.setSelected(selected)
+      }}
+    />
+  </div>
+)
+
+export const ComListWithIsScrollTo = () => (
+  <div className='gm-inline-block'>
+    <List
+      data={data}
+      selected='罗湖5'
+      onSelect={(selected: string) => {
+        store.setSelected(selected)
+      }}
+      renderItem={(item, index) => item.text + index}
+      isScrollTo
+      style={{
+        maxHeight: '100px',
+      }}
+    />
+  </div>
+)
+
+export default {
+  title: '表单/List',
+}