@canlooks/can-ui 0.0.205 → 0.0.206

package/dist/cjs/components/selectedList/selectedItem.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 const react_1 = require("react");
 const transitionBase_1 = require("../transitionBase");
 const selectedList_style_1 = require("./selectedList.style");
+const sortableItem_1 = require("../sortableItem");
 function SelectedItem({ value, index, itemProps, onClose, ...props }) {
     const [alertProps, setAlertProps] = (0, utils_1.useSyncState)();
     const [loading, requestFn] = (0, utils_1.useLoading)(async () => {
@@ -17,5 +18,5 @@ function SelectedItem({ value, index, itemProps, onClose, ...props }) {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...props, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(alert_1.Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...props, className: selectedList_style_1.classes.option, children: (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: alert_1.Alert, id: value, index: index, closable: true, color: "info", showIcon: false, ...alertProps.current, className: (0, utils_1.clsx)(selectedList_style_1.classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

package/dist/cjs/components/selectedList/selectedList.js

@@ -8,6 +8,7 @@ const selectedList_style_1 = require("./selectedList.style");
 const react_transition_group_1 = require("react-transition-group");
 const selectionContext_1 = require("../selectionContext");
 const selectedItem_1 = require("./selectedItem");
+const react_2 = require("@dnd-kit/react");
 exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, ...props }) => {
     const { value: innerValue, setValue: setInnerValue } = (0, selectionContext_1.useSelectionContext)();
     const arr = (0, utils_1.toArray)(value || innerValue);
@@ -15,5 +16,9 @@ exports.SelectedList = (0, react_1.memo)(({ value, itemProps, onClose, ...props
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+    const dragEndHandler = e => {
+        const newValue = (0, utils_1.onDndDragEnd)(e, arr);
+        newValue && setInnerValue(newValue);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { ...props, css: selectedList_style_1.style, className: (0, utils_1.clsx)(selectedList_style_1.classes.root, props.className), children: arr?.map((v, i) => (0, jsx_runtime_1.jsx)(selectedItem_1.SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }) }));
 });

package/dist/cjs/utils/dnd.d.ts

@@ -13,6 +13,7 @@ export declare const defaultSensors: Customizable<Sensors>;
  * @param primaryKey 索引用的主键，默认为`id`
  * @return 返回新的数组，但如果顺序未改变，会得到null
  */
+export declare function onDndDragEnd<T>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[]): T[] | null;
 export declare function onDndDragEnd<T extends Obj>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[], primaryKey?: keyof T): T[] | null;
 export declare function arrayMove<T>(array: T[], from: number, to: number): T[];
 /**

package/dist/cjs/utils/dnd.js

@@ -21,20 +21,23 @@ const defaultSensors = defaults => [
     })
 ];
 exports.defaultSensors = defaultSensors;
-/**
- * <DragDropProvider>组件通用的onDragEnd方法
- * @param e 事件
- * @param items 传入需要排序的数组
- * @param primaryKey 索引用的主键，默认为`id`
- * @return 返回新的数组，但如果顺序未改变，会得到null
- */
 function onDndDragEnd({ operation }, items, primaryKey = 'id') {
     const { source, target, canceled } = operation;
     if (!source || !target || canceled) {
         return null;
     }
-    const sourceIndex = items.findIndex(item => item[primaryKey] === source.id);
-    const targetIndex = items.findIndex(item => item[primaryKey] === target.id);
+    const sourceIndex = items.findIndex(item => {
+        if (typeof item === 'object' && item !== null) {
+            return item[primaryKey] === source.id;
+        }
+        return item === source.id;
+    });
+    const targetIndex = items.findIndex(item => {
+        if (typeof item === 'object' && item !== null) {
+            return item[primaryKey] === target.id;
+        }
+        return item === target.id;
+    });
     if (sourceIndex === -1 || targetIndex === -1) {
         if (typeof source.initialIndex === 'number' && typeof source.index === 'number') {
             const from = source.initialIndex;

package/dist/esm/components/selectedList/selectedItem.js

@@ -4,6 +4,7 @@ import { clsx, useLoading, useSyncState } from '../../utils/index.js';
 import { useMemo } from 'react';
 import { Collapse } from '../transitionBase/index.js';
 import { classes } from './selectedList.style.js';
+import { SortableItem } from '../sortableItem/index.js';
 export function SelectedItem({ value, index, itemProps, onClose, ...props }) {
     const [alertProps, setAlertProps] = useSyncState();
     const [loading, requestFn] = useLoading(async () => {
@@ -14,5 +15,5 @@ export function SelectedItem({ value, index, itemProps, onClose, ...props }) {
         alertProps.current?.onClose?.(e);
         onClose?.(value, index);
     };
-    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(Alert, { closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
+    return (_jsx(Collapse, { ...props, className: classes.option, children: _jsx(SortableItem, { component: Alert, id: value, index: index, closable: true, color: "info", showIcon: false, ...alertProps.current, className: clsx(classes.optionWrap, alertProps.current?.className), onClose: closeHandler, loading: loading.current }) }));
 }

package/dist/esm/components/selectedList/selectedList.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { clsx, toArray } from '../../utils/index.js';
+import { clsx, defaultSensors, onDndDragEnd, toArray } from '../../utils/index.js';
 import { classes, style } from './selectedList.style.js';
 import { TransitionGroup } from 'react-transition-group';
 import { useSelectionContext } from '../selectionContext/index.js';
 import { SelectedItem } from './selectedItem.js';
+import { DragDropProvider } from '@dnd-kit/react';
 export const SelectedList = memo(({ value, itemProps, onClose, ...props }) => {
     const { value: innerValue, setValue: setInnerValue } = useSelectionContext();
     const arr = toArray(value || innerValue);
@@ -12,5 +13,9 @@ export const SelectedList = memo(({ value, itemProps, onClose, ...props }) => {
         onClose?.(v, i);
         setInnerValue?.(arr?.filter(_v => _v !== v));
     };
-    return (_jsx(TransitionGroup, { ...props, css: style, className: clsx(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }));
+    const dragEndHandler = e => {
+        const newValue = onDndDragEnd(e, arr);
+        newValue && setInnerValue(newValue);
+    };
+    return (_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(TransitionGroup, { ...props, css: style, className: clsx(classes.root, props.className), children: arr?.map((v, i) => _jsx(SelectedItem, { value: v, index: i, itemProps: itemProps, onClose: closeHandler }, v)) }) }));
 });

package/dist/esm/utils/dnd.d.ts

@@ -13,6 +13,7 @@ export declare const defaultSensors: Customizable<Sensors>;
  * @param primaryKey 索引用的主键，默认为`id`
  * @return 返回新的数组，但如果顺序未改变，会得到null
  */
+export declare function onDndDragEnd<T>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[]): T[] | null;
 export declare function onDndDragEnd<T extends Obj>({ operation }: Parameters<DragDropEvents<any, any, any>['dragend']>[0], items: T[], primaryKey?: keyof T): T[] | null;
 export declare function arrayMove<T>(array: T[], from: number, to: number): T[];
 /**

package/dist/esm/utils/dnd.js

@@ -13,20 +13,23 @@ export const defaultSensors = defaults => [
         ]
     })
 ];
-/**
- * <DragDropProvider>组件通用的onDragEnd方法
- * @param e 事件
- * @param items 传入需要排序的数组
- * @param primaryKey 索引用的主键，默认为`id`
- * @return 返回新的数组，但如果顺序未改变，会得到null
- */
 export function onDndDragEnd({ operation }, items, primaryKey = 'id') {
     const { source, target, canceled } = operation;
     if (!source || !target || canceled) {
         return null;
     }
-    const sourceIndex = items.findIndex(item => item[primaryKey] === source.id);
-    const targetIndex = items.findIndex(item => item[primaryKey] === target.id);
+    const sourceIndex = items.findIndex(item => {
+        if (typeof item === 'object' && item !== null) {
+            return item[primaryKey] === source.id;
+        }
+        return item === source.id;
+    });
+    const targetIndex = items.findIndex(item => {
+        if (typeof item === 'object' && item !== null) {
+            return item[primaryKey] === target.id;
+        }
+        return item === target.id;
+    });
     if (sourceIndex === -1 || targetIndex === -1) {
         if (typeof source.initialIndex === 'number' && typeof source.index === 'number') {
             const from = source.initialIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.205",
+  "version": "0.0.206",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",