@onereach/ui-components 4.11.1-beta.2967.0 → 4.11.1

package/src/components/or-tree-v3/partials/or-tree-node/styles.ts

@@ -0,0 +1,60 @@
+import { TreeNodeDropPosition } from '../../types';
+export const TreeNodeRoot = [];
+export const TreeNodeItemRoot = [
+  // Layout
+  'layout-row',
+  'py-xs',
+  '!items-start',
+  'relative',
+
+  // Theme
+  'hover:bg-primary-opacity-0-08',
+  'dark:hover:bg-primary-opacity-0-08-dark',
+
+  'selected:bg-primary-opacity-0-16',
+  'dark:selected:bg-primary-opacity-0-16-dark',
+
+  'selected:hover:bg-primary-opacity-0-16',
+  'dark:selected:hover:bg-primary-opacity-0-16-dark',
+];
+
+export const TreeNodeItemRootParentSelected = [
+  // Theme
+  'bg-primary-opacity-0-08',
+  'bg-primary-opacity-0-08-dark',
+
+  'hover:bg-primary-opacity-0-16',
+  'dark:hover:bg-primary-opacity-0-16-dark',
+];
+export const TreeNodeDragIndicator = [
+  // Layout
+  'absolute h-[2px] w-full left-[0px]',
+
+  // Theme
+  'bg-primary',
+
+  // Interaction
+  'pointer-events-none',
+];
+
+export const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[]> = {
+  top: [
+    'top-[-1px]',
+  ],
+  middle: [
+    'top-[-1px]',
+    'left-[0px]',
+    'w-full',
+    '!h-[calc(100%+2px)]',
+
+    // Theme
+    'bg-transparent',
+    'border-x-0',
+    'border-y-2',
+    'border-primary',
+    'dark:border-primary-dark',
+  ],
+  bottom: [
+    'bottom-[-1px]',
+  ],
+};

package/src/components/or-tree-v3/partials/or-tree-node/utils.ts

@@ -0,0 +1,26 @@
+import { TreeNodeDropPosition } from '../../types';
+
+function inRange(num: number, min: number, max: number): boolean {
+  return num >= min && num <= max;
+}
+
+export function getDropOffset(e: DragEvent, canMiddleDrop = false): TreeNodeDropPosition {
+  const { clientY } = e;
+  const { top, height } = (e.target as HTMLElement).getBoundingClientRect();
+  const offset = Math.max(((clientY - top) / height), 0); // sometimes offset is negative
+
+  if (canMiddleDrop && inRange(offset, 0.4, 0.7)) {
+    return TreeNodeDropPosition.Middle;
+  } else if (inRange(offset, 0, 0.5)) {
+    return TreeNodeDropPosition.Top;
+  }
+
+  return TreeNodeDropPosition.Bottom;
+}
+
+export function applyPadding(element: HTMLElement, level: number, hasCollapseTrigger: boolean): void {
+  const padding = level * 20 - (hasCollapseTrigger ? 20 : 0);
+  Object.assign(element.style, {
+    paddingLeft: `${padding}px`,
+  });
+}

package/src/components/or-tree-v3/types.ts

@@ -0,0 +1,16 @@
+export type TreeNode = {
+  key: string;
+  children?: TreeNode[];
+  collapsible?: boolean;
+  expanded?: boolean;
+  selected?: boolean;
+  draggable?: boolean;
+  [key: string]: any;
+  canMiddleDrop?: boolean;
+};
+
+export enum TreeNodeDropPosition {
+  Top = 'top',
+  Bottom = 'bottom',
+  Middle = 'middle',
+}