@licklist/design 0.44.485-dev.81 → 0.44.485-dev.82

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from "./sales";
 export * from "./setting";
 export * from "./sidebar";
 export * from "./snippet";
+export * from "./sortable-fields";
 export * from "./sortable-list";
 export * from "./sortable-tree";
 export * from "./static";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}

package/dist/sortable-fields/SortableFieldItem.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import "./style.scss";
+interface Props {
+    id: UniqueIdentifier;
+}
+export declare function SortableFieldItem({ children, id }: PropsWithChildren<Props>): JSX.Element;
+export declare function DragHandle(): JSX.Element;
+export {};
+//# sourceMappingURL=SortableFieldItem.d.ts.map

package/dist/sortable-fields/SortableFieldItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableFieldItem.d.ts","sourceRoot":"","sources":["../../src/sortable-fields/SortableFieldItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAEV,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAGvB,OAAO,cAAc,CAAC;AAEtB,UAAU,KAAK;IACb,EAAE,EAAE,gBAAgB,CAAC;CACtB;AAYD,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,eAsB3E;AAED,wBAAgB,UAAU,gBAYzB"}

package/dist/sortable-fields/SortableFieldList.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { SortableFieldItem } from "./SortableFieldItem";
+interface BaseItem {
+    id: UniqueIdentifier;
+}
+interface Props<T extends BaseItem> {
+    items: T[];
+    onChange(activeIndex: number, overIndex: number): void;
+    renderItem(item: T, index: number): ReactNode;
+}
+export declare function SortableFieldList<T extends BaseItem>({ items, onChange, renderItem, }: Props<T>): JSX.Element;
+export declare namespace SortableFieldList {
+    var Item: typeof SortableFieldItem;
+    var DragHandle: typeof import("./SortableFieldItem").DragHandle;
+}
+export {};
+//# sourceMappingURL=SortableFieldList.d.ts.map

package/dist/sortable-fields/SortableFieldList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableFieldList.d.ts","sourceRoot":"","sources":["../../src/sortable-fields/SortableFieldList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMtD,OAAO,EAAc,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,QAAQ;IAChB,EAAE,EAAE,gBAAgB,CAAC;CACtB;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,QAAQ;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACvD,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,QAAQ,EAAE,EACpD,KAAK,EACL,QAAQ,EACR,UAAU,GACX,EAAE,KAAK,CAAC,CAAC,CAAC,eA2BV;yBA/Be,iBAAiB"}

package/dist/sortable-fields/index.d.ts

@@ -0,0 +1,2 @@
+export type { SortableFieldList } from "./SortableFieldList";
+//# sourceMappingURL=index.d.ts.map

package/dist/sortable-fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sortable-fields/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/styles/packages.scss

@@ -8,6 +8,7 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
+@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";

package/dist/styles/sortable-field/SortableField.scss

@@ -0,0 +1,21 @@
+.sortable-field-list {
+    display: flex;
+
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
+
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
+    }
+
+    .form-group {
+        width: 100%;
+    }
+}

package/dist/styles/sortable-field/_index.scss

@@ -0,0 +1 @@
+@import "./SortableField";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.81",
+  "version": "0.44.485-dev.82",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./sales";
 export * from "./setting";
 export * from "./sidebar";
 export * from "./snippet";
+export * from "./sortable-fields";
 export * from "./sortable-list";
 export * from "./sortable-tree";
 export * from "./static";

package/src/sortable-fields/SortableFieldItem.tsx

@@ -0,0 +1,61 @@
+import React, { createContext, useContext, useMemo } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
+import type {
+  DraggableSyntheticListeners,
+  UniqueIdentifier,
+} from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import "./style.scss";
+
+interface Props {
+  id: UniqueIdentifier;
+}
+
+interface Context {
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}
+
+const SortableItemContext = createContext<Context>({
+  listeners: undefined,
+  ref: () => {},
+});
+
+export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
+  const { isDragging, listeners, setNodeRef, setDraggableNodeRef, transform } =
+    useSortable({ id });
+  const context = useMemo(
+    () => ({
+      listeners,
+      ref: setDraggableNodeRef,
+    }),
+    [listeners, setDraggableNodeRef]
+  );
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <SortableItemContext.Provider value={context}>
+      <div ref={setNodeRef} className="sortable-field-list" style={style}>
+        {children}
+      </div>
+    </SortableItemContext.Provider>
+  );
+}
+
+export function DragHandle() {
+  const { listeners, ref } = useContext(SortableItemContext);
+
+  return (
+    <div {...listeners} ref={ref}>
+      <div className="icon-container">
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+}

package/src/sortable-fields/SortableFieldList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type { ReactNode } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+
+import { DragHandle, SortableFieldItem } from "./SortableFieldItem";
+
+interface BaseItem {
+  id: UniqueIdentifier;
+}
+
+interface Props<T extends BaseItem> {
+  items: T[];
+  onChange(activeIndex: number, overIndex: number): void;
+  renderItem(item: T, index: number): ReactNode;
+}
+
+export function SortableFieldList<T extends BaseItem>({
+  items,
+  onChange,
+  renderItem,
+}: Props<T>) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={({ active, over }) => {
+        if (over && active.id !== over?.id) {
+          const activeIndex = items.findIndex(({ id }) => id === active.id);
+          const overIndex = items.findIndex(({ id }) => id === over.id);
+
+          onChange(activeIndex, overIndex);
+        }
+      }}
+    >
+      <SortableContext items={items}>
+        {items.map((item, index) => (
+          <div key={item.id}>{renderItem(item, index)}</div>
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+SortableFieldList.Item = SortableFieldItem;
+SortableFieldList.DragHandle = DragHandle;

package/src/sortable-fields/index.ts

@@ -0,0 +1 @@
+export type { SortableFieldList } from "./SortableFieldList";

package/src/styles/packages.scss

@@ -8,6 +8,7 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
+@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";

package/src/styles/sortable-field/SortableField.scss

@@ -0,0 +1,21 @@
+.sortable-field-list {
+    display: flex;
+
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
+
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
+    }
+
+    .form-group {
+        width: 100%;
+    }
+}

package/src/styles/sortable-field/_index.scss

@@ -0,0 +1 @@
+@import "./SortableField";