@gm-pc/sortable 1.24.9-beta.11 → 1.24.9-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/sortable",
-  "version": "1.24.9-beta.11",
+  "version": "1.24.9-beta.13",
   "description": "观麦科技拖拽组件",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/react": "^1.24.9-beta.11",
+    "@gm-pc/react": "^1.24.9-beta.13",
     "lodash": "^4.17.19",
     "sortablejs": "^1.12.0"
   },
-  "gitHead": "7c93cbae57353cc67b9bdce650e22312882a1b4a",
+  "gitHead": "b773c85a7a6d591837f7f90058bbbc3c596f5a8c",
   "devDependencies": {
     "@types/sortablejs": "^1.13.0"
   }

package/src/components/sortable.tsx

@@ -1,69 +1,69 @@
-import React, { useMemo } from 'react'
-import classNames from 'classnames'
-import { devWarnForHook } from '@gm-common/tool'
-import { Value, SortableDataItem, SortableProps } from './types'
-import SortableBase from './sortable_base'
-import { Options } from 'sortablejs'
-
-const Sortable = ({
-  data,
-  onChange,
-  groupValues,
-  renderItem = (item: SortableDataItem) => item.text,
-  itemProps = {},
-  tag,
-  options = {},
-  ...rest
-}: SortableProps) => {
-  devWarnForHook(() => {
-    if (groupValues && !options.group) {
-      console.warn('groupValues need options.group')
-    }
-  })
-
-  let filterData = data
-  if (groupValues) {
-    filterData = data.filter((value) => groupValues.includes(value.value))
-  }
-
-  const handleChange = (values: string[]) => {
-    // 因为 SortableJS 默认吐出来都是 string，所以需要反编译拿回原来的类型
-    const newValues: Value[] = values.map((value) => JSON.parse(value))
-    const newValuesMap = new Map<string, SortableDataItem>()
-    data.forEach((value) => {
-      newValuesMap.set(value.value, value)
-    })
-    const newData: SortableDataItem[] = newValues.map((value) => newValuesMap.get(value)!)
-    onChange(newData)
-  }
-
-  const items = useMemo(
-    () =>
-      filterData.map((value, index) => (
-        <div
-          key={value.value as any}
-          data-id={JSON.stringify(value.value)}
-          {...itemProps}
-          className={classNames(
-            { 'gm-cursor-grab': !options.handle },
-            itemProps.className
-          )}
-        >
-          {renderItem(value, index)}
-        </div>
-      )),
-    [filterData, renderItem, itemProps, options.handle]
-  )
-
-  return (
-    <SortableBase
-      {...rest}
-      tag={tag}
-      options={{ animation: 150, ...options }}
-      onChange={handleChange}
-    >
-      {items}
-    </SortableBase>
-  )
-}
-export default Sortable
+import React, { useMemo } from 'react'
+import classNames from 'classnames'
+import { devWarnForHook } from '@gm-common/tool'
+import { Value, SortableDataItem, SortableProps } from './types'
+import SortableBase from './sortable_base'
+import { Options } from 'sortablejs'
+
+const Sortable = ({
+  data,
+  onChange,
+  groupValues,
+  renderItem = (item: SortableDataItem) => item.text,
+  itemProps = {},
+  tag,
+  options = {},
+  ...rest
+}: SortableProps) => {
+  devWarnForHook(() => {
+    if (groupValues && !options.group) {
+      console.warn('groupValues need options.group')
+    }
+  })
+
+  let filterData = data
+  if (groupValues) {
+    filterData = data.filter((value) => groupValues.includes(value.value))
+  }
+
+  const handleChange = (values: string[]) => {
+    // 因为 SortableJS 默认吐出来都是 string，所以需要反编译拿回原来的类型
+    const newValues: Value[] = values.map((value) => JSON.parse(value))
+    const newValuesMap = new Map<string, SortableDataItem>()
+    data.forEach((value) => {
+      newValuesMap.set(value.value, value)
+    })
+    const newData: SortableDataItem[] = newValues.map((value) => newValuesMap.get(value)!)
+    onChange(newData)
+  }
+
+  const items = useMemo(
+    () =>
+      filterData.map((value, index) => (
+        <div
+          key={value.value as any}
+          data-id={JSON.stringify(value.value)}
+          {...itemProps}
+          className={classNames(
+            { 'gm-cursor-grab': !options.handle },
+            itemProps.className
+          )}
+        >
+          {renderItem(value, index)}
+        </div>
+      )),
+    [filterData, renderItem, itemProps, options.handle]
+  )
+
+  return (
+    <SortableBase
+      {...rest}
+      tag={tag}
+      options={{ animation: 150, ...options }}
+      onChange={handleChange}
+    >
+      {items}
+    </SortableBase>
+  )
+}
+export default Sortable

package/src/components/sortable_base.tsx

@@ -1,127 +1,127 @@
-import React, { Component } from 'react'
-import Sortable, { Options, SortableEvent, MoveEvent } from 'sortablejs'
-import { SortableBaseProps } from './types'
-
-type SortableEventType = Extract<
-  keyof Options,
-  | 'onChoose'
-  | 'onStart'
-  | 'onEnd'
-  | 'onAdd'
-  | 'onUpdate'
-  | 'onSort'
-  | 'onRemove'
-  | 'onFilter'
-  | 'onMove'
-  | 'onClone'
->
-
-const SORTABLE_EVENTS: SortableEventType[] = [
-  'onChoose',
-  'onStart',
-  'onEnd',
-  'onAdd',
-  'onUpdate',
-  'onSort',
-  'onRemove',
-  'onFilter',
-  'onMove',
-  'onClone',
-]
-
-interface Store {
-  nextSibling: Element | null
-  activeComponent: SortableBase | null
-}
-
-const store: Store = { nextSibling: null, activeComponent: null }
-
-class SortableBase extends Component<SortableBaseProps> {
-  static defaultProps = {
-    options: {},
-    tag: 'div',
-    style: {},
-  }
-
-  private _node: HTMLElement | undefined
-  private _sortable: Sortable | undefined
-
-  componentDidMount() {
-    const option: Options = { ...this.props.options, disabled: this.props.disabled }
-    SORTABLE_EVENTS.forEach((name) => {
-      const eventHandler = option[name] as (
-        event: SortableEvent | MoveEvent,
-        originalEvent?: Event
-      ) => void | boolean | -1 | 1
-      ;(option[name] as (
-        event: SortableEvent | MoveEvent,
-        originalEvent?: Event
-      ) => void | boolean | -1 | 1) = (event, originalEvent) => {
-        const _evt = event as SortableEvent
-        if (name === 'onChoose') {
-          store.nextSibling = _evt.item.nextElementSibling
-          store.activeComponent = this
-        } else if ((name === 'onAdd' || name === 'onUpdate') && this.props.onChange) {
-          const items = this._sortable?.toArray()
-          const remote = store.activeComponent
-          const remoteItems = remote?._sortable?.toArray()
-          const referenceNode =
-            store.nextSibling && store.nextSibling.parentNode !== null
-              ? store.nextSibling
-              : null
-          _evt.from.insertBefore(_evt.item, referenceNode)
-          if (remote !== this) {
-            const remoteOptions = remote?.props.options ?? {}
-            if (
-              typeof remoteOptions.group === 'object' &&
-              remoteOptions.group.pull === 'clone'
-            ) {
-              // remove the node with the same data-id
-              // eslint-disable-next-line
-              _evt.item.parentNode?.removeChild(_evt.item)
-            }
-            remote?.props.onChange &&
-              remote.props.onChange(remoteItems!, remote._sortable!, _evt)
-          }
-          this.props.onChange && this.props.onChange(items!, this._sortable!, _evt)
-        }
-
-        if ((event as MoveEvent).type === 'move') {
-          return eventHandler ? eventHandler(event, originalEvent) : true
-        }
-        setTimeout(() => {
-          eventHandler && eventHandler(event)
-        }, 0)
-      }
-    })
-    this._sortable = Sortable.create(this._node!, option) // 不可直接解构使用 create，原因未知
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: Readonly<SortableBaseProps>) {
-    if (nextProps.disabled !== this.props.disabled) {
-      // eslint-disable-next-line
-      this._sortable?.option('disabled', nextProps.disabled)
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Readonly<SortableBaseProps>): boolean {
-    // If onChange is null, it is an UnControlled component
-    // Don't let React re-render it by setting return to false
-    return !!nextProps.onChange
-  }
-
-  componentWillUnmount() {
-    if (this._sortable) {
-      this._sortable.destroy()
-      this._sortable = undefined
-    }
-  }
-
-  render() {
-    const { tag: Tag, options, onChange, disabled, ...rest } = this.props
-    return <Tag {...rest} ref={(ref: HTMLElement) => (this._node = ref)} />
-  }
-}
-
-export default SortableBase
+import React, { Component } from 'react'
+import Sortable, { Options, SortableEvent, MoveEvent } from 'sortablejs'
+import { SortableBaseProps } from './types'
+
+type SortableEventType = Extract<
+  keyof Options,
+  | 'onChoose'
+  | 'onStart'
+  | 'onEnd'
+  | 'onAdd'
+  | 'onUpdate'
+  | 'onSort'
+  | 'onRemove'
+  | 'onFilter'
+  | 'onMove'
+  | 'onClone'
+>
+
+const SORTABLE_EVENTS: SortableEventType[] = [
+  'onChoose',
+  'onStart',
+  'onEnd',
+  'onAdd',
+  'onUpdate',
+  'onSort',
+  'onRemove',
+  'onFilter',
+  'onMove',
+  'onClone',
+]
+
+interface Store {
+  nextSibling: Element | null
+  activeComponent: SortableBase | null
+}
+
+const store: Store = { nextSibling: null, activeComponent: null }
+
+class SortableBase extends Component<SortableBaseProps> {
+  static defaultProps = {
+    options: {},
+    tag: 'div',
+    style: {},
+  }
+
+  private _node: HTMLElement | undefined
+  private _sortable: Sortable | undefined
+
+  componentDidMount() {
+    const option: Options = { ...this.props.options, disabled: this.props.disabled }
+    SORTABLE_EVENTS.forEach((name) => {
+      const eventHandler = option[name] as (
+        event: SortableEvent | MoveEvent,
+        originalEvent?: Event
+      ) => void | boolean | -1 | 1
+      ;(option[name] as (
+        event: SortableEvent | MoveEvent,
+        originalEvent?: Event
+      ) => void | boolean | -1 | 1) = (event, originalEvent) => {
+        const _evt = event as SortableEvent
+        if (name === 'onChoose') {
+          store.nextSibling = _evt.item.nextElementSibling
+          store.activeComponent = this
+        } else if ((name === 'onAdd' || name === 'onUpdate') && this.props.onChange) {
+          const items = this._sortable?.toArray()
+          const remote = store.activeComponent
+          const remoteItems = remote?._sortable?.toArray()
+          const referenceNode =
+            store.nextSibling && store.nextSibling.parentNode !== null
+              ? store.nextSibling
+              : null
+          _evt.from.insertBefore(_evt.item, referenceNode)
+          if (remote !== this) {
+            const remoteOptions = remote?.props.options ?? {}
+            if (
+              typeof remoteOptions.group === 'object' &&
+              remoteOptions.group.pull === 'clone'
+            ) {
+              // remove the node with the same data-id
+              // eslint-disable-next-line
+              _evt.item.parentNode?.removeChild(_evt.item)
+            }
+            remote?.props.onChange &&
+              remote.props.onChange(remoteItems!, remote._sortable!, _evt)
+          }
+          this.props.onChange && this.props.onChange(items!, this._sortable!, _evt)
+        }
+
+        if ((event as MoveEvent).type === 'move') {
+          return eventHandler ? eventHandler(event, originalEvent) : true
+        }
+        setTimeout(() => {
+          eventHandler && eventHandler(event)
+        }, 0)
+      }
+    })
+    this._sortable = Sortable.create(this._node!, option) // 不可直接解构使用 create，原因未知
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: Readonly<SortableBaseProps>) {
+    if (nextProps.disabled !== this.props.disabled) {
+      // eslint-disable-next-line
+      this._sortable?.option('disabled', nextProps.disabled)
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<SortableBaseProps>): boolean {
+    // If onChange is null, it is an UnControlled component
+    // Don't let React re-render it by setting return to false
+    return !!nextProps.onChange
+  }
+
+  componentWillUnmount() {
+    if (this._sortable) {
+      this._sortable.destroy()
+      this._sortable = undefined
+    }
+  }
+
+  render() {
+    const { tag: Tag, options, onChange, disabled, ...rest } = this.props
+    return <Tag {...rest} ref={(ref: HTMLElement) => (this._node = ref)} />
+  }
+}
+
+export default SortableBase

package/src/components/sortable_group.tsx

@@ -1,63 +1,63 @@
-import React, { useMemo, useRef } from 'react'
-import _ from 'lodash'
-import { GroupSortableProps, SortableDataItem } from './types'
-import Sortable from './sortable'
-
-const GroupSortable = ({
-  data,
-  onChange,
-  renderItem,
-  itemProps,
-  tag,
-  options,
-  children,
-}: GroupSortableProps) => {
-  /**
-   * 两个列表之间的拖动，中间变量
-   */
-  const dataRef = useRef<SortableDataItem[][]>([])
-  const flatData = useMemo(() => _.flatten(data), [data])
-  const items = data.map((subData, index) => {
-    const handleChange = (newSubData: SortableDataItem[]): void => {
-      // 变化的才会触发 change，
-      // 单个列表内拖动只一次 change，此时 newSubData 长度和原先一样
-      // 如果列表之间拖动，当且仅当两次 change，此时 newSubData 长度和原先不一样
-      if (newSubData.length === data[index].length) {
-        const newData = data.slice()
-        newData[index] = newSubData
-        onChange(newData)
-      } else {
-        // 初次进入，会先修改被拖出的数组
-        if (dataRef.current.length === 0) {
-          // 第一次会先将 dataRef 填充，并将被拖出的那一项修改为 newSubData
-          dataRef.current = data.slice()
-          dataRef.current[index] = newSubData
-        } else {
-          // 第二次会拿到 dataRef，并将被拖入的那一项修改为 newSubData
-          dataRef.current[index] = newSubData
-          // 避免引用 slice
-          const newData = dataRef.current.slice()
-          // 还原
-          dataRef.current = []
-          onChange(newData)
-        }
-      }
-    }
-
-    return (
-      <Sortable
-        key={_.uniqueId()}
-        data={flatData}
-        groupValues={subData.map((val) => val.value)}
-        onChange={handleChange}
-        renderItem={renderItem}
-        itemProps={itemProps}
-        tag={tag}
-        options={{ group: 'group', ...options }}
-      />
-    )
-  })
-  return children(items)
-}
-
-export default GroupSortable
+import React, { useMemo, useRef } from 'react'
+import _ from 'lodash'
+import { GroupSortableProps, SortableDataItem } from './types'
+import Sortable from './sortable'
+
+const GroupSortable = ({
+  data,
+  onChange,
+  renderItem,
+  itemProps,
+  tag,
+  options,
+  children,
+}: GroupSortableProps) => {
+  /**
+   * 两个列表之间的拖动，中间变量
+   */
+  const dataRef = useRef<SortableDataItem[][]>([])
+  const flatData = useMemo(() => _.flatten(data), [data])
+  const items = data.map((subData, index) => {
+    const handleChange = (newSubData: SortableDataItem[]): void => {
+      // 变化的才会触发 change，
+      // 单个列表内拖动只一次 change，此时 newSubData 长度和原先一样
+      // 如果列表之间拖动，当且仅当两次 change，此时 newSubData 长度和原先不一样
+      if (newSubData.length === data[index].length) {
+        const newData = data.slice()
+        newData[index] = newSubData
+        onChange(newData)
+      } else {
+        // 初次进入，会先修改被拖出的数组
+        if (dataRef.current.length === 0) {
+          // 第一次会先将 dataRef 填充，并将被拖出的那一项修改为 newSubData
+          dataRef.current = data.slice()
+          dataRef.current[index] = newSubData
+        } else {
+          // 第二次会拿到 dataRef，并将被拖入的那一项修改为 newSubData
+          dataRef.current[index] = newSubData
+          // 避免引用 slice
+          const newData = dataRef.current.slice()
+          // 还原
+          dataRef.current = []
+          onChange(newData)
+        }
+      }
+    }
+
+    return (
+      <Sortable
+        key={_.uniqueId()}
+        data={flatData}
+        groupValues={subData.map((val) => val.value)}
+        onChange={handleChange}
+        renderItem={renderItem}
+        itemProps={itemProps}
+        tag={tag}
+        options={{ group: 'group', ...options }}
+      />
+    )
+  })
+  return children(items)
+}
+
+export default GroupSortable

package/src/components/types.ts

@@ -1,50 +1,50 @@
-import Sortable, { Options, SortableEvent } from 'sortablejs'
-import { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react'
-
-type Value = any
-
-interface SortableBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
-  options: Options
-  onChange?(remoteItems: string[], sortable: Sortable, event: SortableEvent): void
-  tag: ElementType
-  disabled?: boolean
-}
-
-interface SortableDataItem {
-  value: Value
-  text: string
-  [key: string]: any
-}
-
-interface SortableCommonProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
-  /**
-   * options.group 有值的时候要传。
-   * 此时 data 是 group 集合数据，groupValues 是当前组件的数据
-   */
-  groupValues?: Value[]
-  renderItem?(value: SortableDataItem, index: number): ReactNode
-  itemProps?: HTMLAttributes<HTMLDivElement>
-  tag?: ElementType
-  options?: Options
-  disabled?: boolean
-}
-
-interface SortableProps extends SortableCommonProps {
-  data: SortableDataItem[]
-  onChange(data: SortableDataItem[]): void
-}
-
-interface GroupSortableProps extends SortableCommonProps {
-  /* 二维数组 */
-  data: SortableDataItem[][]
-  onChange(data: SortableDataItem[][]): void
-  children: (items: ReactElement<SortableProps>[]) => ReactElement
-}
-
-export type {
-  Value,
-  SortableBaseProps,
-  SortableDataItem,
-  SortableProps,
-  GroupSortableProps,
-}
+import Sortable, { Options, SortableEvent } from 'sortablejs'
+import { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react'
+
+type Value = any
+
+interface SortableBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  options: Options
+  onChange?(remoteItems: string[], sortable: Sortable, event: SortableEvent): void
+  tag: ElementType
+  disabled?: boolean
+}
+
+interface SortableDataItem {
+  value: Value
+  text: string
+  [key: string]: any
+}
+
+interface SortableCommonProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * options.group 有值的时候要传。
+   * 此时 data 是 group 集合数据，groupValues 是当前组件的数据
+   */
+  groupValues?: Value[]
+  renderItem?(value: SortableDataItem, index: number): ReactNode
+  itemProps?: HTMLAttributes<HTMLDivElement>
+  tag?: ElementType
+  options?: Options
+  disabled?: boolean
+}
+
+interface SortableProps extends SortableCommonProps {
+  data: SortableDataItem[]
+  onChange(data: SortableDataItem[]): void
+}
+
+interface GroupSortableProps extends SortableCommonProps {
+  /* 二维数组 */
+  data: SortableDataItem[][]
+  onChange(data: SortableDataItem[][]): void
+  children: (items: ReactElement<SortableProps>[]) => ReactElement
+}
+
+export type {
+  Value,
+  SortableBaseProps,
+  SortableDataItem,
+  SortableProps,
+  GroupSortableProps,
+}

package/src/index.ts

@@ -1,10 +1,10 @@
-export { default as Sortable } from './components/sortable'
-export { default as SortableBase } from './components/sortable_base'
-export { default as GroupSortable } from './components/sortable_group'
-
-export type {
-  SortableProps,
-  SortableBaseProps,
-  SortableDataItem,
-  GroupSortableProps,
-} from './components/types'
+export { default as Sortable } from './components/sortable'
+export { default as SortableBase } from './components/sortable_base'
+export { default as GroupSortable } from './components/sortable_group'
+
+export type {
+  SortableProps,
+  SortableBaseProps,
+  SortableDataItem,
+  GroupSortableProps,
+} from './components/types'