@dxos/react-ui-list 0.6.13-main.548ca8d → 0.6.14-main.2b6a0f3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +11 -13
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/List/List.d.ts +1 -1
- package/dist/types/src/components/List/List.d.ts.map +1 -1
- package/dist/types/src/components/List/List.stories.d.ts +5 -9
- package/dist/types/src/components/List/List.stories.d.ts.map +1 -1
- package/dist/types/src/components/List/ListRoot.d.ts +2 -1
- package/dist/types/src/components/List/ListRoot.d.ts.map +1 -1
- package/package.json +14 -13
- package/src/components/List/List.stories.tsx +16 -14
- package/src/components/List/ListItem.tsx +2 -2
- package/src/components/List/ListRoot.tsx +13 -12
|
@@ -54,11 +54,10 @@ import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/clo
|
|
|
54
54
|
import { reorderWithEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";
|
|
55
55
|
import { createContext } from "@radix-ui/react-context";
|
|
56
56
|
import React2, { useEffect, useState } from "react";
|
|
57
|
-
import { flushSync } from "react-dom";
|
|
58
57
|
import { useControlledValue } from "@dxos/react-ui";
|
|
59
58
|
var LIST_NAME = "List";
|
|
60
59
|
var [ListProvider, useListContext] = createContext(LIST_NAME);
|
|
61
|
-
var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props }) => {
|
|
60
|
+
var ListRoot = ({ classNames, children, items: _items = [], isItem, onMove, ...props }) => {
|
|
62
61
|
const [items, setItems] = useControlledValue(_items);
|
|
63
62
|
const [state, setState] = useState(idle);
|
|
64
63
|
useEffect(() => {
|
|
@@ -80,15 +79,14 @@ var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props })
|
|
|
80
79
|
return;
|
|
81
80
|
}
|
|
82
81
|
const closestEdgeOfTarget = extractClosestEdge(targetData);
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
});
|
|
82
|
+
setItems(reorderWithEdge({
|
|
83
|
+
list: items,
|
|
84
|
+
startIndex: sourceIdx,
|
|
85
|
+
indexOfTarget: targetIdx,
|
|
86
|
+
axis: "vertical",
|
|
87
|
+
closestEdgeOfTarget
|
|
88
|
+
}));
|
|
89
|
+
onMove?.(sourceData, targetIdx);
|
|
92
90
|
}
|
|
93
91
|
});
|
|
94
92
|
}, [
|
|
@@ -236,7 +234,7 @@ var ListItem = ({ children, classNames, item }) => {
|
|
|
236
234
|
}, /* @__PURE__ */ React3.createElement("div", {
|
|
237
235
|
ref,
|
|
238
236
|
role: "listitem",
|
|
239
|
-
className: mx2("flex", classNames, stateStyles[state.type])
|
|
237
|
+
className: mx2("flex overflow-hidden", classNames, stateStyles[state.type])
|
|
240
238
|
}, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React3.createElement(DropIndicator, {
|
|
241
239
|
edge: state.closestEdge
|
|
242
240
|
})));
|
|
@@ -282,7 +280,7 @@ var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React3.creat
|
|
|
282
280
|
className: mx2("flex w-full", classNames)
|
|
283
281
|
}, children);
|
|
284
282
|
var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React3.createElement("div", {
|
|
285
|
-
className: mx2("flex
|
|
283
|
+
className: mx2("flex grow items-center truncate", classNames),
|
|
286
284
|
...props
|
|
287
285
|
}, children);
|
|
288
286
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/DropIndicator.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n type ComponentProps,\n type HTMLAttributes,\n type MutableRefObject,\n type PropsWithChildren,\n type ReactNode,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = { id: string };\n\nexport type ItemState =\n | {\n type: 'idle';\n }\n | {\n type: 'preview';\n container: HTMLElement;\n }\n | {\n type: 'is-dragging';\n }\n | {\n type: 'is-dragging-over';\n closestEdge: Edge | null;\n };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n 'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n item: T;\n dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n LIST_ITEM_NAME,\n defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n PropsWithChildren<{\n item: T;\n }>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {\n const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n const ref = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLElement | null>(null);\n const [state, setState] = useState<ItemState>(idle);\n useEffect(() => {\n const element = ref.current;\n invariant(element);\n return combine(\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n //\n draggable({\n element,\n dragHandle: dragHandleRef.current!,\n getInitialData: () => item,\n onGenerateDragPreview: dragPreview\n ? ({ nativeSetDragImage, source }) => {\n const rect = source.element.getBoundingClientRect();\n setCustomNativeDragPreview({\n nativeSetDragImage,\n getOffset: ({ container }) => {\n const { height } = container.getBoundingClientRect();\n return {\n x: 20,\n y: height / 2,\n };\n },\n render: ({ container }) => {\n container.style.width = rect.width + 'px';\n setState({ type: 'preview', container });\n setRootState({ type: 'preview', container, item });\n },\n });\n }\n : undefined,\n onDragStart: () => {\n setState({ type: 'is-dragging' });\n setRootState({ type: 'is-dragging', item });\n },\n onDrop: () => {\n setState(idle);\n setRootState(idle);\n },\n }),\n\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n //\n dropTargetForElements({\n element,\n canDrop: ({ source }) => {\n return source.element !== element && isItem(source.data);\n },\n getData: ({ input }) => {\n return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n },\n getIsSticky: () => true,\n onDragEnter: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState({ type: 'is-dragging-over', closestEdge });\n },\n onDrag: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState((current) => {\n if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n return current;\n }\n return { type: 'is-dragging-over', closestEdge };\n });\n },\n onDragLeave: () => {\n setState(idle);\n },\n onDrop: () => {\n setState(idle);\n },\n }),\n );\n }, [item]);\n\n return (\n <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n <div className='relative'>\n <div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>\n {children}\n </div>\n {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}\n </div>\n </ListItemProvider>\n );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ classNames, icon, ...props }, forwardedRef) => {\n return (\n <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n <Icon icon={icon} classNames='cursor-pointer' size={4} />\n </button>\n );\n },\n);\n\nexport const ListItemDeleteButton = ({\n autoHide = true,\n classNames,\n ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n const { state } = useListContext('DELETE_BUTTON');\n const disabled = state.type !== 'idle';\n return (\n <IconButton\n icon='ph--x--regular'\n disabled={disabled}\n classNames={[classNames, autoHide && disabled && 'hidden']}\n {...props}\n />\n );\n};\n\nexport const ListItemDragHandle = () => {\n const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n children,\n}: {\n children: ({ item }: { item: T }) => ReactNode;\n}) => {\n const { state } = useListContext('DRAG_PREVIEW');\n return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n <div className={mx('flex w-full', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n classNames,\n children,\n ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n <div className={mx('flex w-full items-center', classNames)} {...props}>\n {children}\n </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n top: 'horizontal',\n bottom: 'horizontal',\n left: 'vertical',\n right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n top: 'top-[--line-offset] before:top-[--offset-terminal]',\n right: 'right-[--line-offset] before:right-[--offset-terminal]',\n bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n const orientation = edgeToOrientationMap[edge];\n\n return (\n <div\n style={\n {\n '--line-thickness': `${strokeSize}px`,\n '--line-offset': `${lineOffset}`,\n '--terminal-size': `${terminalSize}px`,\n '--terminal-radius': `${terminalSize / 2}px`,\n '--negative-terminal-size': `-${terminalSize}px`,\n '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n } as CSSProperties\n }\n className={mx(\n 'absolute z-10 pointer-events-none bg-blue-700',\n \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n 'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n orientationStyles[orientation],\n edgeStyles[edge],\n )}\n ></div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useEffect, useState } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { type ThemedClassName, useControlledValue } from '@dxos/react-ui';\n\nimport { type ListItemRecord, idle, type ItemState } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n isItem: (item: any) => boolean;\n dragPreview?: boolean;\n state: ItemState & { item?: T };\n setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n state: ListContext<T>['state'];\n items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n children?: (props: ListRendererProps<T>) => ReactNode;\n items?: T[];\n}> &\n Pick<ListContext<T>, 'isItem' | 'dragPreview'>;\n\nexport const ListRoot = <T extends ListItemRecord>({\n classNames,\n children,\n items: _items = [],\n isItem,\n ...props\n}: ListRootProps<T>) => {\n const [items, setItems] = useControlledValue<T[]>(_items);\n const [state, setState] = useState<ListContext<T>['state']>(idle);\n useEffect(() => {\n return monitorForElements({\n canMonitor: ({ source }) => isItem(source.data),\n onDrop: ({ location, source }) => {\n const target = location.current.dropTargets[0];\n if (!target) {\n return;\n }\n\n const sourceData = source.data;\n const targetData = target.data;\n if (!isItem(sourceData) || !isItem(targetData)) {\n return;\n }\n\n const sourceIdx = items.findIndex((item) => item.id === sourceData.id);\n const targetIdx = items.findIndex((item) => item.id === targetData.id);\n if (targetIdx < 0 || sourceIdx < 0) {\n return;\n }\n\n const closestEdgeOfTarget = extractClosestEdge(targetData);\n flushSync(() => {\n setItems(\n reorderWithEdge({\n list: items,\n startIndex: sourceIdx,\n indexOfTarget: targetIdx,\n axis: 'vertical',\n closestEdgeOfTarget,\n }),\n );\n });\n },\n });\n }, [items]);\n\n return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n IconButton,\n type IconButtonProps,\n ListItem,\n ListItemDeleteButton,\n ListItemDragHandle,\n ListItemDragPreview,\n type ListItemProps,\n type ListItemRecord,\n ListItemTitle,\n ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n Root: ListRoot,\n Item: ListItem,\n ItemDragPreview: ListItemDragPreview,\n ItemWrapper: ListItemWrapper,\n ItemDragHandle: ListItemDragHandle,\n ItemDeleteButton: ListItemDeleteButton,\n ItemTitle: ListItemTitle,\n IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,eAAe;AACxB,SAASC,WAAWC,6BAA6B;AACjD,SAASC,kCAAkC;AAE3C,SAASC,mBAAmBC,sBAAAA,2BAA0B;AACtD,SAASC,iBAAAA,sBAAqB;AAC9B,OAAOC,UAMLC,YACAC,aAAAA,YACAC,QACAC,YAAAA,iBACK;AACP,SAASC,oBAAoB;AAE7B,SAASC,iBAAiB;AAE1B,SAASC,YAAY;AACrB,SAASC,MAAAA,WAAU;;;ACrBnB,OAAOC,WAAwD;AAE/D,SAASC,UAAU;AAInB,IAAMC,uBAAkD;EACtDC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,OAAO;AACT;AAEA,IAAMC,oBAAmF;EACvFC,YAAY;EACZC,UAAU;AACZ;AAEA,IAAMC,aAAqE;EACzEP,KAAK;EACLG,OAAO;EACPF,QAAQ;EACRC,MAAM;AACR;AAEA,IAAMM,aAAa;AACnB,IAAMC,eAAe;AACrB,IAAMC,iCAAiCF,aAAaC,gBAAgB;AAK7D,IAAME,gBAAgB,CAAC,EAAEC,MAAMC,MAAM,MAAK,MAAgC;AAC/E,QAAMC,aAAa,gBAAgBD,GAAAA,MAASL,UAAAA;AAE5C,QAAMO,cAAchB,qBAAqBa,IAAAA;AAEzC,SACE,sBAAA,cAACI,OAAAA;IACCC,OACE;MACE,oBAAoB,GAAGT,UAAAA;MACvB,iBAAiB,GAAGM,UAAAA;MACpB,mBAAmB,GAAGL,YAAAA;MACtB,qBAAqB,GAAGA,eAAe,CAAA;MACvC,4BAA4B,IAAIA,YAAAA;MAChC,qBAAqB,GAAGC,6BAAAA;IAC1B;IAEFQ,WAAWC,GACT,iDACA,wGACA,0GACAf,kBAAkBW,WAAAA,GAClBR,WAAWK,IAAAA,CAAK;;AAIxB;;;AC3DA,SAASQ,0BAA0B;AACnC,SAASC,0BAA0B;AACnC,SAASC,uBAAuB;AAChC,SAASC,qBAAqB;AAC9B,OAAOC,UAAyBC,WAAWC,gBAAgB;
|
|
6
|
-
"names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "mx", "React", "mx", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "div", "style", "className", "mx", "monitorForElements", "extractClosestEdge", "reorderWithEdge", "createContext", "React", "useEffect", "useState", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n type ComponentProps,\n type HTMLAttributes,\n type MutableRefObject,\n type PropsWithChildren,\n type ReactNode,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = { id: string };\n\nexport type ItemState =\n | {\n type: 'idle';\n }\n | {\n type: 'preview';\n container: HTMLElement;\n }\n | {\n type: 'is-dragging';\n }\n | {\n type: 'is-dragging-over';\n closestEdge: Edge | null;\n };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n 'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n item: T;\n dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n LIST_ITEM_NAME,\n defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n PropsWithChildren<{\n item: T;\n }>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {\n const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n const ref = useRef<HTMLDivElement | null>(null);\n const dragHandleRef = useRef<HTMLElement | null>(null);\n const [state, setState] = useState<ItemState>(idle);\n useEffect(() => {\n const element = ref.current;\n invariant(element);\n return combine(\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n //\n draggable({\n element,\n dragHandle: dragHandleRef.current!,\n getInitialData: () => item,\n onGenerateDragPreview: dragPreview\n ? ({ nativeSetDragImage, source }) => {\n const rect = source.element.getBoundingClientRect();\n setCustomNativeDragPreview({\n nativeSetDragImage,\n getOffset: ({ container }) => {\n const { height } = container.getBoundingClientRect();\n return {\n x: 20,\n y: height / 2,\n };\n },\n render: ({ container }) => {\n container.style.width = rect.width + 'px';\n setState({ type: 'preview', container });\n setRootState({ type: 'preview', container, item });\n },\n });\n }\n : undefined,\n onDragStart: () => {\n setState({ type: 'is-dragging' });\n setRootState({ type: 'is-dragging', item });\n },\n onDrop: () => {\n setState(idle);\n setRootState(idle);\n },\n }),\n\n //\n // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n //\n dropTargetForElements({\n element,\n canDrop: ({ source }) => {\n return source.element !== element && isItem(source.data);\n },\n getData: ({ input }) => {\n return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n },\n getIsSticky: () => true,\n onDragEnter: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState({ type: 'is-dragging-over', closestEdge });\n },\n onDrag: ({ self }) => {\n const closestEdge = extractClosestEdge(self.data);\n setState((current) => {\n if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n return current;\n }\n return { type: 'is-dragging-over', closestEdge };\n });\n },\n onDragLeave: () => {\n setState(idle);\n },\n onDrop: () => {\n setState(idle);\n },\n }),\n );\n }, [item]);\n\n return (\n <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n <div className='relative'>\n <div ref={ref} role='listitem' className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}>\n {children}\n </div>\n {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}\n </div>\n </ListItemProvider>\n );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ classNames, icon, ...props }, forwardedRef) => {\n return (\n <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n <Icon icon={icon} classNames='cursor-pointer' size={4} />\n </button>\n );\n },\n);\n\nexport const ListItemDeleteButton = ({\n autoHide = true,\n classNames,\n ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n const { state } = useListContext('DELETE_BUTTON');\n const disabled = state.type !== 'idle';\n return (\n <IconButton\n icon='ph--x--regular'\n disabled={disabled}\n classNames={[classNames, autoHide && disabled && 'hidden']}\n {...props}\n />\n );\n};\n\nexport const ListItemDragHandle = () => {\n const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n children,\n}: {\n children: ({ item }: { item: T }) => ReactNode;\n}) => {\n const { state } = useListContext('DRAG_PREVIEW');\n return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n <div className={mx('flex w-full', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n classNames,\n children,\n ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n <div className={mx('flex grow items-center truncate', classNames)} {...props}>\n {children}\n </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n top: 'horizontal',\n bottom: 'horizontal',\n left: 'vertical',\n right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n top: 'top-[--line-offset] before:top-[--offset-terminal]',\n right: 'right-[--line-offset] before:right-[--offset-terminal]',\n bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n const orientation = edgeToOrientationMap[edge];\n\n return (\n <div\n style={\n {\n '--line-thickness': `${strokeSize}px`,\n '--line-offset': `${lineOffset}`,\n '--terminal-size': `${terminalSize}px`,\n '--terminal-radius': `${terminalSize / 2}px`,\n '--negative-terminal-size': `-${terminalSize}px`,\n '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n } as CSSProperties\n }\n className={mx(\n 'absolute z-10 pointer-events-none bg-blue-700',\n \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n 'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n orientationStyles[orientation],\n edgeStyles[edge],\n )}\n ></div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useEffect, useState } from 'react';\n\nimport { type ThemedClassName, useControlledValue } from '@dxos/react-ui';\n\nimport { type ListItemRecord, idle, type ItemState } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n isItem: (item: any) => boolean;\n dragPreview?: boolean;\n state: ItemState & { item?: T };\n setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n state: ListContext<T>['state'];\n items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n children?: (props: ListRendererProps<T>) => ReactNode;\n items?: T[];\n onMove?: (source: T, index: number) => void;\n}> &\n Pick<ListContext<T>, 'isItem' | 'dragPreview'>;\n\nexport const ListRoot = <T extends ListItemRecord>({\n classNames,\n children,\n items: _items = [],\n isItem,\n onMove,\n ...props\n}: ListRootProps<T>) => {\n const [items, setItems] = useControlledValue<T[]>(_items);\n const [state, setState] = useState<ListContext<T>['state']>(idle);\n useEffect(() => {\n return monitorForElements({\n canMonitor: ({ source }) => isItem(source.data),\n onDrop: ({ location, source }) => {\n const target = location.current.dropTargets[0];\n if (!target) {\n return;\n }\n\n const sourceData = source.data;\n const targetData = target.data;\n if (!isItem(sourceData) || !isItem(targetData)) {\n return;\n }\n\n const sourceIdx = items.findIndex((item) => item.id === sourceData.id);\n const targetIdx = items.findIndex((item) => item.id === targetData.id);\n if (targetIdx < 0 || sourceIdx < 0) {\n return;\n }\n\n const closestEdgeOfTarget = extractClosestEdge(targetData);\n setItems(\n reorderWithEdge({\n list: items,\n startIndex: sourceIdx,\n indexOfTarget: targetIdx,\n axis: 'vertical',\n closestEdgeOfTarget,\n }),\n );\n\n onMove?.(sourceData as T, targetIdx);\n },\n });\n }, [items]);\n\n return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n IconButton,\n type IconButtonProps,\n ListItem,\n ListItemDeleteButton,\n ListItemDragHandle,\n ListItemDragPreview,\n type ListItemProps,\n type ListItemRecord,\n ListItemTitle,\n ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n Root: ListRoot,\n Item: ListItem,\n ItemDragPreview: ListItemDragPreview,\n ItemWrapper: ListItemWrapper,\n ItemDragHandle: ListItemDragHandle,\n ItemDeleteButton: ListItemDeleteButton,\n ItemTitle: ListItemTitle,\n IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "mx", "React", "mx", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "div", "style", "className", "mx", "monitorForElements", "extractClosestEdge", "reorderWithEdge", "createContext", "React", "useEffect", "useState", "useControlledValue", "LIST_NAME", "ListProvider", "useListContext", "createContext", "ListRoot", "classNames", "children", "items", "_items", "isItem", "onMove", "props", "setItems", "useControlledValue", "state", "setState", "useState", "idle", "useEffect", "monitorForElements", "canMonitor", "source", "data", "onDrop", "location", "target", "current", "dropTargets", "sourceData", "targetData", "sourceIdx", "findIndex", "item", "id", "targetIdx", "closestEdgeOfTarget", "extractClosestEdge", "reorderWithEdge", "list", "startIndex", "indexOfTarget", "axis", "React", "idle", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "createContext", "ListItem", "children", "classNames", "item", "isItem", "dragPreview", "setState", "setRootState", "useListContext", "ref", "useRef", "dragHandleRef", "state", "useState", "useEffect", "element", "current", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "source", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "style", "width", "undefined", "onDragStart", "onDrop", "dropTargetForElements", "canDrop", "data", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "extractClosestEdge", "onDrag", "onDragLeave", "React", "div", "className", "role", "mx", "DropIndicator", "edge", "IconButton", "forwardRef", "icon", "props", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "ListRoot", "Item", "ListItem", "ItemDragPreview", "ListItemDragPreview", "ItemWrapper", "ListItemWrapper", "ItemDragHandle", "ListItemDragHandle", "ItemDeleteButton", "ListItemDeleteButton", "ItemTitle", "ListItemTitle", "IconButton"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":8783,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24126,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22114},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["List"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6337},"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytesInOutput":1702},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":1885},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":10538}}}
|
|
@@ -6,7 +6,7 @@ import { type ListRootProps } from './ListRoot';
|
|
|
6
6
|
* Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx
|
|
7
7
|
*/
|
|
8
8
|
export declare const List: {
|
|
9
|
-
Root: <T extends ListItemRecord>({ classNames, children, items: _items, isItem, ...props }: ListRootProps<T>) => import("react").JSX.Element;
|
|
9
|
+
Root: <T extends ListItemRecord>({ classNames, children, items: _items, isItem, onMove, ...props }: ListRootProps<T>) => import("react").JSX.Element;
|
|
10
10
|
Item: <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => import("react").JSX.Element;
|
|
11
11
|
ItemDragPreview: <T extends ListItemRecord>({ children, }: {
|
|
12
12
|
children: ({ item }: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,QAAQ,EAIR,KAAK,aAAa,EAClB,KAAK,cAAc,EAGpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAS1D;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,EACpB,QAAQ,EAIR,KAAK,aAAa,EAClB,KAAK,cAAc,EAGpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAS1D;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;gBAc44J,CAAC;;;;CAL75J,CAAC;AAEF,KAAK,QAAQ,GAAG,cAAc,CAAC;AAE/B,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import '@dxos-theme';
|
|
2
|
-
import
|
|
2
|
+
import { type Meta, type StoryObj } from '@storybook/react';
|
|
3
3
|
import { type ListRootProps } from './List';
|
|
4
4
|
import { type TestItemType } from '../../testing';
|
|
5
|
-
declare const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
export default _default;
|
|
11
|
-
export declare const Default: any;
|
|
12
|
-
export declare const Simple: any;
|
|
5
|
+
export declare const Default: StoryObj<ListRootProps<TestItemType>>;
|
|
6
|
+
export declare const Simple: StoryObj<ListRootProps<TestItemType>>;
|
|
7
|
+
declare const meta: Meta;
|
|
8
|
+
export default meta;
|
|
13
9
|
//# sourceMappingURL=List.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5D,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AA0E9E,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAMzD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAMxD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -24,7 +24,8 @@ export type ListRendererProps<T extends ListItemRecord> = {
|
|
|
24
24
|
export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
|
|
25
25
|
children?: (props: ListRendererProps<T>) => ReactNode;
|
|
26
26
|
items?: T[];
|
|
27
|
+
onMove?: (source: T, index: number) => void;
|
|
27
28
|
}> & Pick<ListContext<T>, 'isItem' | 'dragPreview'>;
|
|
28
|
-
export declare const ListRoot: <T extends ListItemRecord>({ classNames, children, items: _items, isItem, ...props }: ListRootProps<T>) => React.JSX.Element;
|
|
29
|
+
export declare const ListRoot: <T extends ListItemRecord>({ classNames, children, items: _items, isItem, onMove, ...props }: ListRootProps<T>) => React.JSX.Element;
|
|
29
30
|
export {};
|
|
30
31
|
//# sourceMappingURL=ListRoot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,KAAK,eAAe,EAAsB,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvE,KAAK,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CACrD,CAAC;AAIF,eAAO,MAAO,YAAY;;wBAjBoD,SAAS;;;GAiB3D,cAAc,4CAA8C,CAAC;AAEzF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,IAAI;IACxD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,IAAI,eAAe,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC,GACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC,CAAC;AAEjD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,cAAc,qEAO9C,aAAa,CAAC,CAAC,CAAC,sBAyClB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-list",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.14-main.2b6a0f3",
|
|
4
4
|
"description": "A list component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -27,14 +27,12 @@
|
|
|
27
27
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
|
|
28
28
|
"@radix-ui/react-context": "^1.0.0",
|
|
29
29
|
"effect": "^3.9.1",
|
|
30
|
-
"@dxos/debug": "0.6.
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/react-ui-
|
|
36
|
-
"@dxos/log": "0.6.13-main.548ca8d",
|
|
37
|
-
"@dxos/util": "0.6.13-main.548ca8d"
|
|
30
|
+
"@dxos/debug": "0.6.14-main.2b6a0f3",
|
|
31
|
+
"@dxos/echo-schema": "0.6.14-main.2b6a0f3",
|
|
32
|
+
"@dxos/log": "0.6.14-main.2b6a0f3",
|
|
33
|
+
"@dxos/invariant": "0.6.14-main.2b6a0f3",
|
|
34
|
+
"@dxos/util": "0.6.14-main.2b6a0f3",
|
|
35
|
+
"@dxos/react-ui-types": "0.6.14-main.2b6a0f3"
|
|
38
36
|
},
|
|
39
37
|
"devDependencies": {
|
|
40
38
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -43,15 +41,18 @@
|
|
|
43
41
|
"react": "~18.2.0",
|
|
44
42
|
"react-dom": "~18.2.0",
|
|
45
43
|
"vite": "5.4.7",
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/
|
|
48
|
-
"@dxos/storybook-utils": "0.6.
|
|
44
|
+
"@dxos/random": "0.6.14-main.2b6a0f3",
|
|
45
|
+
"@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
|
|
46
|
+
"@dxos/storybook-utils": "0.6.14-main.2b6a0f3",
|
|
47
|
+
"@dxos/react-ui": "0.6.14-main.2b6a0f3"
|
|
49
48
|
},
|
|
50
49
|
"peerDependencies": {
|
|
51
50
|
"@phosphor-icons/react": "^2.1.5",
|
|
52
51
|
"effect": "^3.9.1",
|
|
53
52
|
"react": "~18.2.0",
|
|
54
|
-
"react-dom": "~18.2.0"
|
|
53
|
+
"react-dom": "~18.2.0",
|
|
54
|
+
"@dxos/react-ui": "0.6.14-main.2b6a0f3",
|
|
55
|
+
"@dxos/react-ui-theme": "0.6.14-main.2b6a0f3"
|
|
55
56
|
},
|
|
56
57
|
"publishConfig": {
|
|
57
58
|
"access": "public"
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
import '@dxos-theme';
|
|
6
6
|
|
|
7
|
+
import { type Meta, type StoryObj } from '@storybook/react';
|
|
7
8
|
import React from 'react';
|
|
8
9
|
|
|
9
10
|
import { create, S } from '@dxos/echo-schema';
|
|
@@ -16,7 +17,7 @@ import { createList, TestItemSchema, type TestItemType } from '../../testing';
|
|
|
16
17
|
// TODO(burdon): var-icon-size.
|
|
17
18
|
const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2rem] rounded';
|
|
18
19
|
|
|
19
|
-
const
|
|
20
|
+
const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
|
|
20
21
|
const handleSelect = (item: TestItemType) => {
|
|
21
22
|
console.log('select', item);
|
|
22
23
|
};
|
|
@@ -83,26 +84,27 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
|
|
|
83
84
|
);
|
|
84
85
|
};
|
|
85
86
|
|
|
86
|
-
export default {
|
|
87
|
-
// TODO(burdon): Storybook collides with react-ui/List.
|
|
88
|
-
title: 'react-ui-list/List',
|
|
89
|
-
decorators: [withTheme, withLayout({ fullscreen: true })],
|
|
90
|
-
render: Story,
|
|
91
|
-
};
|
|
92
|
-
|
|
93
87
|
const list = create(createList(100));
|
|
94
88
|
|
|
95
|
-
export const Default = {
|
|
89
|
+
export const Default: StoryObj<ListRootProps<TestItemType>> = {
|
|
90
|
+
render: DefaultStory,
|
|
96
91
|
args: {
|
|
97
92
|
items: list.items,
|
|
98
93
|
isItem: S.is(TestItemSchema),
|
|
99
|
-
}
|
|
100
|
-
}
|
|
94
|
+
},
|
|
95
|
+
};
|
|
101
96
|
|
|
102
|
-
export const Simple = {
|
|
97
|
+
export const Simple: StoryObj<ListRootProps<TestItemType>> = {
|
|
103
98
|
render: SimpleStory,
|
|
104
99
|
args: {
|
|
105
100
|
items: list.items,
|
|
106
101
|
isItem: S.is(TestItemSchema),
|
|
107
|
-
}
|
|
108
|
-
}
|
|
102
|
+
},
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
const meta: Meta = {
|
|
106
|
+
title: 'ui/react-ui-list/List',
|
|
107
|
+
decorators: [withTheme, withLayout({ fullscreen: true })],
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export default meta;
|
|
@@ -163,7 +163,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item
|
|
|
163
163
|
return (
|
|
164
164
|
<ListItemProvider item={item} dragHandleRef={dragHandleRef}>
|
|
165
165
|
<div className='relative'>
|
|
166
|
-
<div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>
|
|
166
|
+
<div ref={ref} role='listitem' className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}>
|
|
167
167
|
{children}
|
|
168
168
|
</div>
|
|
169
169
|
{state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}
|
|
@@ -228,7 +228,7 @@ export const ListItemTitle = ({
|
|
|
228
228
|
children,
|
|
229
229
|
...props
|
|
230
230
|
}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (
|
|
231
|
-
<div className={mx('flex
|
|
231
|
+
<div className={mx('flex grow items-center truncate', classNames)} {...props}>
|
|
232
232
|
{children}
|
|
233
233
|
</div>
|
|
234
234
|
);
|
|
@@ -7,7 +7,6 @@ import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/clo
|
|
|
7
7
|
import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
|
|
8
8
|
import { createContext } from '@radix-ui/react-context';
|
|
9
9
|
import React, { type ReactNode, useEffect, useState } from 'react';
|
|
10
|
-
import { flushSync } from 'react-dom';
|
|
11
10
|
|
|
12
11
|
import { type ThemedClassName, useControlledValue } from '@dxos/react-ui';
|
|
13
12
|
|
|
@@ -32,6 +31,7 @@ export type ListRendererProps<T extends ListItemRecord> = {
|
|
|
32
31
|
export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
|
|
33
32
|
children?: (props: ListRendererProps<T>) => ReactNode;
|
|
34
33
|
items?: T[];
|
|
34
|
+
onMove?: (source: T, index: number) => void;
|
|
35
35
|
}> &
|
|
36
36
|
Pick<ListContext<T>, 'isItem' | 'dragPreview'>;
|
|
37
37
|
|
|
@@ -40,6 +40,7 @@ export const ListRoot = <T extends ListItemRecord>({
|
|
|
40
40
|
children,
|
|
41
41
|
items: _items = [],
|
|
42
42
|
isItem,
|
|
43
|
+
onMove,
|
|
43
44
|
...props
|
|
44
45
|
}: ListRootProps<T>) => {
|
|
45
46
|
const [items, setItems] = useControlledValue<T[]>(_items);
|
|
@@ -66,17 +67,17 @@ export const ListRoot = <T extends ListItemRecord>({
|
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
const closestEdgeOfTarget = extractClosestEdge(targetData);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
70
|
+
setItems(
|
|
71
|
+
reorderWithEdge({
|
|
72
|
+
list: items,
|
|
73
|
+
startIndex: sourceIdx,
|
|
74
|
+
indexOfTarget: targetIdx,
|
|
75
|
+
axis: 'vertical',
|
|
76
|
+
closestEdgeOfTarget,
|
|
77
|
+
}),
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
onMove?.(sourceData as T, targetIdx);
|
|
80
81
|
},
|
|
81
82
|
});
|
|
82
83
|
}, [items]);
|