@steedos-widgets/sortable 1.0.1

package/src/components/components/Item/components/Remove/Remove.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {Action, ActionProps} from '../Action';
+
+export function Remove(props: ActionProps) {
+  return (
+    <Action
+      {...props}
+      active={{
+        fill: 'rgba(255, 70, 70, 0.95)',
+        background: 'rgba(255, 70, 70, 0.1)',
+      }}
+    >
+      <svg width="8" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
+      </svg>
+    </Action>
+  );
+}

package/src/components/components/Item/components/Remove/index.ts

@@ -0,0 +1 @@
+export {Remove} from './Remove';

package/src/components/components/Item/components/index.ts

@@ -0,0 +1,3 @@
+export {Action} from './Action';
+export {Handle} from './Handle';
+export {Remove} from './Remove';

package/src/components/components/Item/index.ts

@@ -0,0 +1,2 @@
+export {Item} from './Item';
+export {Action, Handle, Remove} from './components';

package/src/components/components/index.ts

@@ -0,0 +1,6 @@
+
+export {Grid} from './Grid';
+export {GridContainer} from './GridContainer';
+export {Container} from './Container';
+export type {ContainerProps} from './Container';
+export {Item} from './Item';

package/src/components/index.ts

@@ -0,0 +1 @@
+export {MultipleContainers} from './MultipleContainers'

package/src/components/multipleContainersKeyboardCoordinates.ts

@@ -0,0 +1,116 @@
+//@ts-nocheck
+
+import {
+  closestCorners,
+  getFirstCollision,
+  KeyboardCode,
+  DroppableContainer,
+  KeyboardCoordinateGetter,
+} from '@dnd-kit/core';
+
+const directions: string[] = [
+  KeyboardCode.Down,
+  KeyboardCode.Right,
+  KeyboardCode.Up,
+  KeyboardCode.Left,
+];
+
+export const coordinateGetter: KeyboardCoordinateGetter = (
+  event,
+  {context: {active, droppableRects, droppableContainers, collisionRect}}
+) => {
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+
+    if (!active || !collisionRect) {
+      return;
+    }
+
+    const filteredContainers: DroppableContainer[] = [];
+
+    droppableContainers.getEnabled().forEach((entry) => {
+      if (!entry || entry?.disabled) {
+        return;
+      }
+
+      const rect = droppableRects.get(entry.id);
+
+      if (!rect) {
+        return;
+      }
+
+      const data = entry.data.current;
+
+      if (data) {
+        const {type, children} = data;
+
+        if (type === 'container' && children?.length > 0) {
+          if (active.data.current?.type !== 'container') {
+            return;
+          }
+        }
+      }
+
+      switch (event.code) {
+        case KeyboardCode.Down:
+          if (collisionRect.top < rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Up:
+          if (collisionRect.top > rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Left:
+          if (collisionRect.left >= rect.left + rect.width) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Right:
+          if (collisionRect.left + collisionRect.width <= rect.left) {
+            filteredContainers.push(entry);
+          }
+          break;
+      }
+    });
+
+    const collisions = closestCorners({
+      active,
+      collisionRect: collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null,
+    });
+    const closestId = getFirstCollision(collisions, 'id');
+
+    if (closestId != null) {
+      const newDroppable = droppableContainers.get(closestId);
+      const newNode = newDroppable?.node.current;
+      const newRect = newDroppable?.rect.current;
+
+      if (newNode && newRect) {
+        if (newDroppable.id === 'placeholder') {
+          return {
+            x: newRect.left + (newRect.width - collisionRect.width) / 2,
+            y: newRect.top + (newRect.height - collisionRect.height) / 2,
+          };
+        }
+
+        if (newDroppable.data.current?.type === 'container') {
+          return {
+            x: newRect.left + 20,
+            y: newRect.top + 74,
+          };
+        }
+
+        return {
+          x: newRect.left,
+          y: newRect.top,
+        };
+      }
+    }
+  }
+
+  return undefined;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/meta.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: baozhoutao@steedos.com
+ * @Date: 2022-08-31 16:32:35
+ * @LastEditors: baozhoutao@steedos.com
+ * @LastEditTime: 2022-09-01 18:46:29
+ * @Description: 
+ */
+import MultipleContainers from "./metas/MultipleContainers";
+const components = [MultipleContainers];
+const componentList = [
+  {
+    title: "Steedos",
+    icon: "",
+    children: [MultipleContainers]
+  }
+];
+export default {
+  componentList,
+  components
+};

package/src/metas/MultipleContainers.tsx

@@ -0,0 +1,131 @@
+const config: any = {
+    group: "华炎魔方",
+    componentName: "MultipleContainers",
+    title: "容器排序",
+    docUrl: "",
+    screenshot: "",
+    npm: {
+      package: "@steedos-widgets/sortable",
+      version: "{{version}}",
+      exportName: "MultipleContainers",
+      main: "",
+      destructuring: true,
+      subName: ""
+    },
+    // props: [
+    //   {
+    //     name: "title",
+    //     propType: "string",
+    //     description: '标题',
+    //   }
+    // ],
+    preview: {
+    },
+    targets: ["steedos__RecordPage", "steedos__AppPage", "steedos__HomePage"],
+    engines: ["amis"],
+    // settings for amis.
+    amis: {
+      name: 'sortable-multiple-containers',
+      icon: "fa-fw fa fa-list-alt"
+    }
+  };
+  
+  export default {
+    ...config,
+    snippets: [
+      {
+        title: config.title,
+        screenshot: "",
+        schema: {
+          componentName: config.componentName,
+          props: config.preview
+        }
+      }
+    ],
+    amis: {
+      render: {
+        type: config.amis.name,
+        usage: "formitem",
+        weight: 1,
+        framework: "react"
+      },
+      plugin: {
+        rendererName: config.amis.name,
+        $schema: '/schemas/UnkownSchema.json',
+        name: config.title,
+        description: config.title,
+        tags: [config.group],
+        order: -9999,
+        icon: config.amis.icon,
+        scaffold: {
+          type: config.amis.name,
+          label: config.title,
+          name: 'board',
+          columns: 1,
+          vertical: false,
+          "value": {
+            "A": [
+              "A1",
+              "B1"
+            ],
+            "B": [
+              "A2",
+              "B2"
+            ]
+          },
+          "containerSource": [
+            {
+              "id": "A",
+              "label": "Board A"
+            },
+            {
+              "id": "B",
+              "label": "Board B"
+            }
+          ],
+          "itemSource": [
+            {
+              "id": "A1",
+              "label": "Item A1",
+              "columnSpan": 2,
+              "color": "red"
+            },
+            {
+              "id": "A2",
+              "label": "Item A2",
+              "columnSpan": 1,
+              "color": "blue"
+            },
+            {
+              "id": "B1",
+              "label": "Item B1",
+              "color": "green"
+            },
+            {
+              "id": "B2",
+              "label": "Item B2",
+              "color": "silver"
+            }
+          ],
+        },
+        previewSchema: {
+          type: config.amis.name,
+        },
+        panelTitle: "设置",
+        panelControls: [,
+          {
+            "name": "columns",
+            "type": "input-number",
+            "label": "列数",
+          },
+          {
+            "name": "vertical",
+            "type": "checkbox",
+            "label": "布局",
+            "option": "纵向"
+          }
+        ]
+      }
+    }
+  };
+  

package/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const content: {[key: string]: string};
+  export default content;
+}

package/src/types/global.d.ts

@@ -0,0 +1,6 @@
+// Declare global variables for TypeScript and VSCode.
+// Do not rename this file or move these types into index.d.ts
+// @see https://code.visualstudio.com/docs/nodejs/working-with-javascript#_global-variables-and-type-checking
+declare const __DEV__: boolean;
+declare const __VERSION__: string;
+declare const $FixMe: any;

package/src/utilities/createRange.ts

@@ -0,0 +1,15 @@
+const defaultInitializer = (index: number) => index;
+
+export function createRange<T = number>(
+  length: number,
+  initializer: (index: number) => any = defaultInitializer
+): T[] {
+  let array = [];
+  let index = 0;
+
+  while(index < length){
+    array.push(initializer(index));
+    index++;
+  }
+  return array;
+}

package/src/utilities/index.ts

@@ -0,0 +1 @@
+export {createRange} from './createRange';

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "declarationDir": "dist/types",
+    "declaration": true,
+    "outDir": "dist/cjs"
+  },
+  "include": ["src"],
+  "exclude": ["dist"]
+}