@dxos/plugin-stack 0.6.13-main.ed424a1 → 0.6.13-staging.1e988a3
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/{StackMain-ILYVK656.mjs → StackMain-XRQRNZ4I.mjs} +11 -12
- package/dist/lib/browser/StackMain-XRQRNZ4I.mjs.map +7 -0
- package/dist/lib/browser/{chunk-ONAKM24Z.mjs → chunk-AYDYMPJK.mjs} +6 -3
- package/dist/lib/browser/chunk-AYDYMPJK.mjs.map +7 -0
- package/dist/lib/browser/{chunk-6PHTGCQZ.mjs → chunk-R5KXWF2W.mjs} +3 -9
- package/dist/lib/browser/chunk-R5KXWF2W.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +9 -9
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/meta.mjs +1 -1
- package/dist/lib/browser/types/index.mjs +1 -1
- package/dist/lib/node/{StackMain-LAYSQV2S.cjs → StackMain-XJGYFDDN.cjs} +25 -26
- package/dist/lib/node/StackMain-XJGYFDDN.cjs.map +7 -0
- package/dist/lib/node/{chunk-3D3FPZWK.cjs → chunk-EMD6A66G.cjs} +6 -12
- package/dist/lib/node/chunk-EMD6A66G.cjs.map +7 -0
- package/dist/lib/node/{chunk-O5SQVKNW.cjs → chunk-I42JKRXR.cjs} +18 -5
- package/dist/lib/node/chunk-I42JKRXR.cjs.map +7 -0
- package/dist/lib/node/index.cjs +53 -53
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.cjs +4 -4
- package/dist/lib/node/meta.cjs.map +1 -1
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node/types/index.cjs +3 -3
- package/dist/lib/node/types/index.cjs.map +1 -1
- package/dist/types/src/StackPlugin.d.ts.map +1 -1
- package/dist/types/src/components/AddSectionDialog.d.ts.map +1 -1
- package/dist/types/src/components/StackMain.d.ts +1 -2
- package/dist/types/src/components/StackMain.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -2
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +4 -1
- package/dist/types/src/meta.d.ts.map +1 -1
- package/package.json +29 -34
- package/src/StackPlugin.tsx +7 -15
- package/src/components/AddSectionDialog.tsx +2 -1
- package/src/components/StackMain.tsx +47 -50
- package/src/{meta.ts → meta.tsx} +5 -3
- package/src/types/stack.ts +3 -3
- package/dist/lib/browser/StackMain-ILYVK656.mjs.map +0 -7
- package/dist/lib/browser/chunk-6PHTGCQZ.mjs.map +0 -7
- package/dist/lib/browser/chunk-ONAKM24Z.mjs.map +0 -7
- package/dist/lib/node/StackMain-LAYSQV2S.cjs.map +0 -7
- package/dist/lib/node/chunk-3D3FPZWK.cjs.map +0 -7
- package/dist/lib/node/chunk-O5SQVKNW.cjs.map +0 -7
- package/dist/lib/node-esm/StackMain-KH6IEQQ6.mjs +0 -278
- package/dist/lib/node-esm/StackMain-KH6IEQQ6.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-HRY4R5UU.mjs +0 -29
- package/dist/lib/node-esm/chunk-HRY4R5UU.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-J57BXQJY.mjs +0 -18
- package/dist/lib/node-esm/chunk-J57BXQJY.mjs.map +0 -7
- package/dist/lib/node-esm/index.mjs +0 -286
- package/dist/lib/node-esm/index.mjs.map +0 -7
- package/dist/lib/node-esm/meta.json +0 -1
- package/dist/lib/node-esm/meta.mjs +0 -12
- package/dist/lib/node-esm/meta.mjs.map +0 -7
- package/dist/lib/node-esm/types/index.mjs +0 -10
- package/dist/lib/node-esm/types/index.mjs.map +0 -7
|
@@ -8,18 +8,18 @@ import React, { useEffect, useMemo, useState } from 'react';
|
|
|
8
8
|
import {
|
|
9
9
|
LayoutAction,
|
|
10
10
|
NavigationAction,
|
|
11
|
-
Surface,
|
|
12
11
|
parseMetadataResolverPlugin,
|
|
12
|
+
Surface,
|
|
13
13
|
useIntentDispatcher,
|
|
14
14
|
useResolvePlugin,
|
|
15
15
|
} from '@dxos/app-framework';
|
|
16
|
-
import { create, getType,
|
|
16
|
+
import { create, getType, isReactiveObject } from '@dxos/echo-schema';
|
|
17
17
|
import { useGraph } from '@dxos/plugin-graph';
|
|
18
18
|
import { SpaceAction } from '@dxos/plugin-space';
|
|
19
19
|
import { type CollectionType } from '@dxos/plugin-space/types';
|
|
20
|
+
import { fullyQualifiedId } from '@dxos/react-client/echo';
|
|
20
21
|
import { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';
|
|
21
|
-
import {
|
|
22
|
-
import { type MosaicDataItem, type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';
|
|
22
|
+
import { type MosaicDataItem, type MosaicDropEvent, type MosaicMoveEvent, Path } from '@dxos/react-ui-mosaic';
|
|
23
23
|
import {
|
|
24
24
|
type AddSectionPosition,
|
|
25
25
|
type CollapsedSections,
|
|
@@ -39,12 +39,11 @@ const SectionContent: StackProps['SectionContent'] = ({ data }) => {
|
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
type StackMainProps = {
|
|
42
|
-
id: string;
|
|
43
42
|
collection: CollectionType;
|
|
44
43
|
separation?: boolean;
|
|
45
44
|
};
|
|
46
45
|
|
|
47
|
-
const StackMain = ({
|
|
46
|
+
const StackMain = ({ collection, separation }: StackMainProps) => {
|
|
48
47
|
const dispatch = useIntentDispatcher();
|
|
49
48
|
const { graph } = useGraph();
|
|
50
49
|
const { t } = useTranslation(STACK_PLUGIN);
|
|
@@ -59,6 +58,7 @@ const StackMain = ({ id, collection, separation }: StackMainProps) => {
|
|
|
59
58
|
}
|
|
60
59
|
}, [collection, stack]);
|
|
61
60
|
|
|
61
|
+
const id = `stack-${collection.id}`;
|
|
62
62
|
const items =
|
|
63
63
|
collection.objects
|
|
64
64
|
// TODO(wittjosiah): Should the database handle this differently?
|
|
@@ -172,50 +172,47 @@ const StackMain = ({ id, collection, separation }: StackMainProps) => {
|
|
|
172
172
|
};
|
|
173
173
|
|
|
174
174
|
return (
|
|
175
|
-
|
|
176
|
-
<
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
>
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
)}
|
|
217
|
-
</Mosaic.Root>
|
|
218
|
-
</AttentionProvider>
|
|
175
|
+
<>
|
|
176
|
+
<Stack
|
|
177
|
+
id={id}
|
|
178
|
+
data-testid='main.stack'
|
|
179
|
+
SectionContent={SectionContent}
|
|
180
|
+
type={SECTION_IDENTIFIER}
|
|
181
|
+
items={items}
|
|
182
|
+
separation={separation}
|
|
183
|
+
emptyComponent={<span data-testid='stack.empty'></span>}
|
|
184
|
+
onDrop={handleDrop}
|
|
185
|
+
onOver={handleOver}
|
|
186
|
+
onDeleteSection={handleDelete}
|
|
187
|
+
onNavigateToSection={handleNavigate}
|
|
188
|
+
onAddSection={handleAddSection}
|
|
189
|
+
onCollapseSection={handleCollapseSection}
|
|
190
|
+
/>
|
|
191
|
+
|
|
192
|
+
{items.length === 0 ? (
|
|
193
|
+
<AddSection collection={collection} />
|
|
194
|
+
) : (
|
|
195
|
+
<div role='none' className='flex mlb-2 pli-2 justify-center'>
|
|
196
|
+
<Button
|
|
197
|
+
data-testid='stack.createSection'
|
|
198
|
+
classNames='gap-2'
|
|
199
|
+
onClick={() =>
|
|
200
|
+
dispatch?.({
|
|
201
|
+
action: LayoutAction.SET_LAYOUT,
|
|
202
|
+
data: {
|
|
203
|
+
element: 'dialog',
|
|
204
|
+
component: 'dxos.org/plugin/stack/AddSectionDialog',
|
|
205
|
+
subject: { position: 'afterAll', collection },
|
|
206
|
+
},
|
|
207
|
+
})
|
|
208
|
+
}
|
|
209
|
+
>
|
|
210
|
+
<Plus />
|
|
211
|
+
<span className='sr-only'>{t('add section label')}</span>
|
|
212
|
+
</Button>
|
|
213
|
+
</div>
|
|
214
|
+
)}
|
|
215
|
+
</>
|
|
219
216
|
);
|
|
220
217
|
};
|
|
221
218
|
|
package/src/{meta.ts → meta.tsx}
RENAMED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { type
|
|
5
|
+
import { type IconProps, StackSimple } from '@phosphor-icons/react';
|
|
6
|
+
import React from 'react';
|
|
6
7
|
|
|
7
8
|
export const STACK_PLUGIN = 'dxos.org/plugin/stack';
|
|
8
9
|
export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
|
|
@@ -11,5 +12,6 @@ export default {
|
|
|
11
12
|
id: STACK_PLUGIN,
|
|
12
13
|
// TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
|
|
13
14
|
name: 'Collections',
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
iconComponent: (props: IconProps) => <StackSimple {...props} />,
|
|
16
|
+
iconSymbol: 'ph--stack-simple--regular',
|
|
17
|
+
};
|
package/src/types/stack.ts
CHANGED
|
@@ -7,15 +7,15 @@ import { S, TypedObject } from '@dxos/echo-schema';
|
|
|
7
7
|
// All section metadata needs to be optional/have defaults.
|
|
8
8
|
// Any objects added to the collection will start with the section defaults.
|
|
9
9
|
// If an object is removed from the collection without removing the section metadata this is fine.
|
|
10
|
-
// Stack
|
|
10
|
+
// Stack component should cleanup the superfluous data on future edits.
|
|
11
11
|
|
|
12
12
|
export const SectionSchema = S.Struct({
|
|
13
13
|
height: S.optional(S.Number),
|
|
14
14
|
// Space for data that isn't stack-specific but is specific to this view instance.
|
|
15
15
|
// e.g. cover/fill for an image
|
|
16
|
-
custom: S.optional(S.Record(
|
|
16
|
+
custom: S.optional(S.Record(S.String, S.Any)),
|
|
17
17
|
});
|
|
18
18
|
|
|
19
19
|
export class StackViewType extends TypedObject({ typename: 'dxos.org/type/StackView', version: '0.1.0' })({
|
|
20
|
-
sections: S.mutable(S.Record(
|
|
20
|
+
sections: S.mutable(S.Record(S.String, SectionSchema)),
|
|
21
21
|
}) {}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/StackMain.tsx", "../../../src/components/AddSection.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plus } from '@phosphor-icons/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport {\n LayoutAction,\n NavigationAction,\n Surface,\n parseMetadataResolverPlugin,\n useIntentDispatcher,\n useResolvePlugin,\n} from '@dxos/app-framework';\nimport { create, getType, fullyQualifiedId, isReactiveObject } from '@dxos/client/echo';\nimport { useGraph } from '@dxos/plugin-graph';\nimport { SpaceAction } from '@dxos/plugin-space';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { AttentionProvider } from '@dxos/react-ui-attention';\nimport { type MosaicDataItem, type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';\nimport {\n type AddSectionPosition,\n type CollapsedSections,\n Stack,\n type StackProps,\n type StackSectionItem,\n} from '@dxos/react-ui-stack';\nimport { nonNullable } from '@dxos/util';\n\nimport { AddSection } from './AddSection';\nimport { SECTION_IDENTIFIER, STACK_PLUGIN } from '../meta';\nimport { StackViewType } from '../types';\n\nconst SectionContent: StackProps['SectionContent'] = ({ data }) => {\n // TODO(wittjosiah): Better section placeholder.\n return <Surface role='section' data={{ object: data }} limit={1} placeholder={<></>} />;\n};\n\ntype StackMainProps = {\n id: string;\n collection: CollectionType;\n separation?: boolean;\n};\n\nconst StackMain = ({ id, collection, separation }: StackMainProps) => {\n const dispatch = useIntentDispatcher();\n const { graph } = useGraph();\n const { t } = useTranslation(STACK_PLUGIN);\n const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);\n const defaultStack = useMemo(() => create(StackViewType, { sections: {} }), [collection]);\n const stack = (collection.views[StackViewType.typename] as StackViewType) ?? defaultStack;\n const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});\n\n useEffect(() => {\n if (!collection.views[StackViewType.typename]) {\n collection.views[StackViewType.typename] = stack;\n }\n }, [collection, stack]);\n\n const items =\n collection.objects\n // TODO(wittjosiah): Should the database handle this differently?\n // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?\n .filter(nonNullable)\n .map((object) => {\n const metadata = metadataPlugin?.provides.metadata.resolver(\n getType(object)?.objectId ?? 'never',\n ) as StackSectionItem['metadata'];\n const view = {\n ...stack.sections[object.id],\n collapsed: collapsedSections[fullyQualifiedId(object)],\n title:\n (object as any)?.title ?? toLocalizedString(graph.findNode(fullyQualifiedId(object))?.properties.label, t),\n } as StackSectionItem['view'];\n return { id: fullyQualifiedId(object), object, metadata, view };\n }) ?? [];\n\n const handleOver = ({ active, over }: MosaicMoveEvent<number>) => {\n // TODO(thure): Eventually Stack should handle foreign draggables.\n if (active.type !== SECTION_IDENTIFIER) {\n return 'reject';\n }\n if (Path.parent(active.path) === Path.parent(over.path)) {\n return 'rearrange';\n }\n\n const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;\n const data = parseData ? parseData(active.item, 'object') : active.item;\n\n // TODO(wittjosiah): Prevent dropping items which don't have a section renderer?\n // Perhaps stack plugin should just provide a fallback section renderer.\n if (!isReactiveObject(data)) {\n return 'reject';\n }\n\n const exists = items.findIndex(({ id }) => id === active.item.id) >= 0;\n if (!exists) {\n return 'transfer';\n } else {\n return 'reject';\n }\n };\n\n const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {\n if (\n (active.path === Path.create(id, active.item.id) || active.path === id) &&\n (operation !== 'copy' || over.path === Path.create(id, over.item.id) || over.path === id)\n ) {\n collection.objects.splice(active.position!, 1);\n delete stack.sections[active.item.id];\n }\n\n const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;\n const object = parseData?.(active.item, 'object');\n if (object && over.path === Path.create(id, over.item.id)) {\n collection.objects.splice(over.position!, 0, object);\n } else if (object && over.path === id) {\n collection.objects.push(object);\n }\n\n if (!stack.sections[object.id]) {\n stack.sections[object.id] = {};\n }\n };\n\n const handleDelete = async (path: string) => {\n const index = collection.objects\n .filter(nonNullable)\n .findIndex((section) => fullyQualifiedId(section) === Path.last(path));\n if (index >= 0) {\n await dispatch({\n action: SpaceAction.REMOVE_OBJECT,\n data: { object: collection.objects[index], collection },\n });\n\n // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.\n // delete stack.sections[Path.last(path)];\n }\n };\n\n // TODO(wittjosiah): Factor out.\n\n const handleNavigate = async (object: MosaicDataItem) => {\n const toId = fullyQualifiedId(object);\n await dispatch([\n {\n action: NavigationAction.OPEN,\n data: { activeParts: { main: [toId] } },\n },\n {\n action: LayoutAction.SCROLL_INTO_VIEW,\n data: { id: toId },\n },\n ]);\n };\n\n const handleAddSection = (path: string, position: AddSectionPosition) => {\n void dispatch?.({\n action: LayoutAction.SET_LAYOUT,\n data: {\n element: 'dialog',\n component: `${STACK_PLUGIN}/AddSectionDialog`,\n subject: { path, position, collection },\n },\n });\n };\n\n const handleCollapseSection = (id: string, collapsed: boolean) => {\n setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));\n };\n\n return (\n <AttentionProvider id={id}>\n <Mosaic.Root>\n <Mosaic.DragOverlay />\n <Stack\n id={id}\n data-testid='main.stack'\n SectionContent={SectionContent}\n type={SECTION_IDENTIFIER}\n items={items}\n separation={separation}\n emptyComponent={<span data-testid='stack.empty'></span>}\n onDrop={handleDrop}\n onOver={handleOver}\n onDeleteSection={handleDelete}\n onNavigateToSection={handleNavigate}\n onAddSection={handleAddSection}\n onCollapseSection={handleCollapseSection}\n />\n\n {items.length === 0 ? (\n <AddSection collection={collection} />\n ) : (\n <div role='none' className='flex mlb-2 pli-2 justify-center'>\n <Button\n data-testid='stack.createSection'\n classNames='gap-2'\n onClick={() =>\n dispatch?.({\n action: LayoutAction.SET_LAYOUT,\n data: {\n element: 'dialog',\n component: 'dxos.org/plugin/stack/AddSectionDialog',\n subject: { position: 'afterAll', collection },\n },\n })\n }\n >\n <Plus />\n <span className='sr-only'>{t('add section label')}</span>\n </Button>\n </div>\n )}\n </Mosaic.Root>\n </AttentionProvider>\n );\n};\n\nexport default StackMain;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { type IconProps } from '@phosphor-icons/react';\nimport React, { type FC, type KeyboardEvent, type MouseEvent, useCallback } from 'react';\n\nimport { usePlugin, useIntentDispatcher } from '@dxos/app-framework';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { getSize, mx } from '@dxos/react-ui-theme';\n\nimport { STACK_PLUGIN } from '../meta';\nimport { StackViewType, type StackSectionCreator, type StackPluginProvides } from '../types';\n\nconst CreatorTile = ({\n Icon,\n label,\n testId,\n handleAdd,\n}: {\n Icon: FC<IconProps>;\n testId: string;\n label: string;\n handleAdd: () => void;\n}) => {\n const onClick = useCallback((_: MouseEvent<HTMLDivElement>) => handleAdd(), [handleAdd]);\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleAdd();\n }\n },\n [handleAdd],\n );\n\n return (\n <div\n role='button'\n aria-label={label}\n tabIndex={0}\n className={mx(\n 'flex items-center w-[10rem] h-16 overflow-hidden',\n 'border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer',\n )}\n onClick={onClick}\n onKeyDown={onKeyDown}\n data-testid={testId}\n >\n <div className='flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator'>\n <Icon weight='thin' className={getSize(6)} />\n </div>\n <div className='overflow-hidden items-center p-2 px-3'>\n <span className='capitalize'>{label}</span>\n </div>\n </div>\n );\n};\n\nexport const AddSection = ({ collection }: { collection: CollectionType }) => {\n const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n const dispatch = useIntentDispatcher();\n const { t } = useTranslation(STACK_PLUGIN);\n\n const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);\n const stackCreators = stackPlugin?.provides?.stack.creators ?? [];\n\n const handleAdd = useCallback(\n async (creator: StackSectionCreator) => {\n const { data: section } = (await dispatch(creator.intent)) ?? {};\n collection.objects = [section];\n const stack = collection.views[StackViewType.typename];\n if (stack) {\n stack.sections[section.id] = {};\n }\n },\n [collection, dispatch],\n );\n\n if (stackCreators.length === 0) {\n return null;\n }\n\n return (\n <div {...domAttributes} role='none' className='flex flex-wrap items-center p-8 gap-4'>\n {stackCreators.map((creator) => {\n const { id, type, icon, testId } = creator;\n return (\n <CreatorTile\n key={id}\n label={toLocalizedString(type, t)}\n testId={testId}\n Icon={icon}\n handleAdd={() => handleAdd(creator)}\n />\n );\n })}\n </div>\n );\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["Plus", "React", "useEffect", "useMemo", "useState", "LayoutAction", "NavigationAction", "Surface", "parseMetadataResolverPlugin", "useIntentDispatcher", "useResolvePlugin", "create", "getType", "fullyQualifiedId", "isReactiveObject", "useGraph", "SpaceAction", "Button", "toLocalizedString", "useTranslation", "AttentionProvider", "Mosaic", "Path", "Stack", "nonNullable", "useArrowNavigationGroup", "React", "useCallback", "usePlugin", "useIntentDispatcher", "toLocalizedString", "useTranslation", "getSize", "mx", "CreatorTile", "Icon", "label", "testId", "handleAdd", "onClick", "useCallback", "_", "onKeyDown", "event", "key", "preventDefault", "div", "role", "aria-label", "tabIndex", "className", "mx", "data-testid", "weight", "getSize", "span", "AddSection", "collection", "domAttributes", "useArrowNavigationGroup", "axis", "dispatch", "useIntentDispatcher", "t", "useTranslation", "STACK_PLUGIN", "stackPlugin", "usePlugin", "stackCreators", "provides", "stack", "creators", "creator", "data", "section", "intent", "objects", "views", "StackViewType", "typename", "sections", "id", "length", "map", "type", "icon", "toLocalizedString", "SectionContent", "data", "React", "Surface", "role", "object", "limit", "placeholder", "StackMain", "id", "collection", "separation", "dispatch", "useIntentDispatcher", "graph", "useGraph", "t", "useTranslation", "STACK_PLUGIN", "metadataPlugin", "useResolvePlugin", "parseMetadataResolverPlugin", "defaultStack", "useMemo", "create", "StackViewType", "sections", "stack", "views", "typename", "collapsedSections", "setCollapsedSections", "useState", "useEffect", "items", "objects", "filter", "nonNullable", "map", "metadata", "provides", "resolver", "getType", "objectId", "view", "collapsed", "fullyQualifiedId", "title", "toLocalizedString", "findNode", "properties", "label", "handleOver", "active", "over", "type", "SECTION_IDENTIFIER", "Path", "parent", "path", "parseData", "parse", "item", "isReactiveObject", "exists", "findIndex", "handleDrop", "operation", "splice", "position", "push", "handleDelete", "index", "section", "last", "action", "SpaceAction", "REMOVE_OBJECT", "handleNavigate", "toId", "NavigationAction", "OPEN", "activeParts", "main", "LayoutAction", "SCROLL_INTO_VIEW", "handleAddSection", "SET_LAYOUT", "element", "component", "subject", "handleCollapseSection", "prev", "AttentionProvider", "Mosaic", "Root", "DragOverlay", "Stack", "data-testid", "emptyComponent", "span", "onDrop", "onOver", "onDeleteSection", "onNavigateToSection", "onAddSection", "onCollapseSection", "length", "AddSection", "div", "className", "Button", "classNames", "onClick", "Plus"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types/stack.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { S, TypedObject } from '@dxos/echo-schema';\n\n// All section metadata needs to be optional/have defaults.\n// Any objects added to the collection will start with the section defaults.\n// If an object is removed from the collection without removing the section metadata this is fine.\n// Stack components should clean-up the superfluous data on future edits.\n\nexport const SectionSchema = S.Struct({\n height: S.optional(S.Number),\n // Space for data that isn't stack-specific but is specific to this view instance.\n // e.g. cover/fill for an image\n custom: S.optional(S.Record({ key: S.String, value: S.Any })),\n});\n\nexport class StackViewType extends TypedObject({ typename: 'dxos.org/type/StackView', version: '0.1.0' })({\n sections: S.mutable(S.Record({ key: S.String, value: SectionSchema })),\n}) {}\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,GAAGC,mBAAmB;AAOxB,IAAMC,gBAAgBC,EAAEC,OAAO;EACpCC,QAAQF,EAAEG,SAASH,EAAEI,MAAM;;;EAG3BC,QAAQL,EAAEG,SAASH,EAAEM,OAAO;IAAEC,KAAKP,EAAEQ;IAAQC,OAAOT,EAAEU;EAAI,CAAA,CAAA;AAC5D,CAAA;AAEO,IAAMC,gBAAN,cAA4BC,YAAY;EAAEC,UAAU;EAA2BC,SAAS;AAAQ,CAAA,EAAG;EACxGC,UAAUf,EAAEgB,QAAQhB,EAAEM,OAAO;IAAEC,KAAKP,EAAEQ;IAAQC,OAAOV;EAAc,CAAA,CAAA;AACrE,CAAA,EAAA;AAAI;",
|
|
6
|
-
"names": ["S", "TypedObject", "SectionSchema", "S", "Struct", "height", "optional", "Number", "custom", "Record", "key", "String", "value", "Any", "StackViewType", "TypedObject", "typename", "version", "sections", "mutable"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const STACK_PLUGIN = 'dxos.org/plugin/stack';\nexport const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';\n\nexport default {\n id: STACK_PLUGIN,\n // TODO(wittjosiah): Prevents \"stacks\" language from being exposed to users in settings panel.\n name: 'Collections',\n icon: 'ph--stack-simple--regular',\n} satisfies PluginMeta;\n"],
|
|
5
|
-
"mappings": ";AAMO,IAAMA,eAAe;AACrB,IAAMC,qBAAqB;AAElC,IAAA,eAAe;EACbC,IAAIF;;EAEJG,MAAM;EACNC,MAAM;AACR;",
|
|
6
|
-
"names": ["STACK_PLUGIN", "SECTION_IDENTIFIER", "id", "name", "icon"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/StackMain.tsx", "../../../src/components/AddSection.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plus } from '@phosphor-icons/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport {\n LayoutAction,\n NavigationAction,\n Surface,\n parseMetadataResolverPlugin,\n useIntentDispatcher,\n useResolvePlugin,\n} from '@dxos/app-framework';\nimport { create, getType, fullyQualifiedId, isReactiveObject } from '@dxos/client/echo';\nimport { useGraph } from '@dxos/plugin-graph';\nimport { SpaceAction } from '@dxos/plugin-space';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { AttentionProvider } from '@dxos/react-ui-attention';\nimport { type MosaicDataItem, type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';\nimport {\n type AddSectionPosition,\n type CollapsedSections,\n Stack,\n type StackProps,\n type StackSectionItem,\n} from '@dxos/react-ui-stack';\nimport { nonNullable } from '@dxos/util';\n\nimport { AddSection } from './AddSection';\nimport { SECTION_IDENTIFIER, STACK_PLUGIN } from '../meta';\nimport { StackViewType } from '../types';\n\nconst SectionContent: StackProps['SectionContent'] = ({ data }) => {\n // TODO(wittjosiah): Better section placeholder.\n return <Surface role='section' data={{ object: data }} limit={1} placeholder={<></>} />;\n};\n\ntype StackMainProps = {\n id: string;\n collection: CollectionType;\n separation?: boolean;\n};\n\nconst StackMain = ({ id, collection, separation }: StackMainProps) => {\n const dispatch = useIntentDispatcher();\n const { graph } = useGraph();\n const { t } = useTranslation(STACK_PLUGIN);\n const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);\n const defaultStack = useMemo(() => create(StackViewType, { sections: {} }), [collection]);\n const stack = (collection.views[StackViewType.typename] as StackViewType) ?? defaultStack;\n const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});\n\n useEffect(() => {\n if (!collection.views[StackViewType.typename]) {\n collection.views[StackViewType.typename] = stack;\n }\n }, [collection, stack]);\n\n const items =\n collection.objects\n // TODO(wittjosiah): Should the database handle this differently?\n // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?\n .filter(nonNullable)\n .map((object) => {\n const metadata = metadataPlugin?.provides.metadata.resolver(\n getType(object)?.objectId ?? 'never',\n ) as StackSectionItem['metadata'];\n const view = {\n ...stack.sections[object.id],\n collapsed: collapsedSections[fullyQualifiedId(object)],\n title:\n (object as any)?.title ?? toLocalizedString(graph.findNode(fullyQualifiedId(object))?.properties.label, t),\n } as StackSectionItem['view'];\n return { id: fullyQualifiedId(object), object, metadata, view };\n }) ?? [];\n\n const handleOver = ({ active, over }: MosaicMoveEvent<number>) => {\n // TODO(thure): Eventually Stack should handle foreign draggables.\n if (active.type !== SECTION_IDENTIFIER) {\n return 'reject';\n }\n if (Path.parent(active.path) === Path.parent(over.path)) {\n return 'rearrange';\n }\n\n const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;\n const data = parseData ? parseData(active.item, 'object') : active.item;\n\n // TODO(wittjosiah): Prevent dropping items which don't have a section renderer?\n // Perhaps stack plugin should just provide a fallback section renderer.\n if (!isReactiveObject(data)) {\n return 'reject';\n }\n\n const exists = items.findIndex(({ id }) => id === active.item.id) >= 0;\n if (!exists) {\n return 'transfer';\n } else {\n return 'reject';\n }\n };\n\n const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {\n if (\n (active.path === Path.create(id, active.item.id) || active.path === id) &&\n (operation !== 'copy' || over.path === Path.create(id, over.item.id) || over.path === id)\n ) {\n collection.objects.splice(active.position!, 1);\n delete stack.sections[active.item.id];\n }\n\n const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;\n const object = parseData?.(active.item, 'object');\n if (object && over.path === Path.create(id, over.item.id)) {\n collection.objects.splice(over.position!, 0, object);\n } else if (object && over.path === id) {\n collection.objects.push(object);\n }\n\n if (!stack.sections[object.id]) {\n stack.sections[object.id] = {};\n }\n };\n\n const handleDelete = async (path: string) => {\n const index = collection.objects\n .filter(nonNullable)\n .findIndex((section) => fullyQualifiedId(section) === Path.last(path));\n if (index >= 0) {\n await dispatch({\n action: SpaceAction.REMOVE_OBJECT,\n data: { object: collection.objects[index], collection },\n });\n\n // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.\n // delete stack.sections[Path.last(path)];\n }\n };\n\n // TODO(wittjosiah): Factor out.\n\n const handleNavigate = async (object: MosaicDataItem) => {\n const toId = fullyQualifiedId(object);\n await dispatch([\n {\n action: NavigationAction.OPEN,\n data: { activeParts: { main: [toId] } },\n },\n {\n action: LayoutAction.SCROLL_INTO_VIEW,\n data: { id: toId },\n },\n ]);\n };\n\n const handleAddSection = (path: string, position: AddSectionPosition) => {\n void dispatch?.({\n action: LayoutAction.SET_LAYOUT,\n data: {\n element: 'dialog',\n component: `${STACK_PLUGIN}/AddSectionDialog`,\n subject: { path, position, collection },\n },\n });\n };\n\n const handleCollapseSection = (id: string, collapsed: boolean) => {\n setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));\n };\n\n return (\n <AttentionProvider id={id}>\n <Mosaic.Root>\n <Mosaic.DragOverlay />\n <Stack\n id={id}\n data-testid='main.stack'\n SectionContent={SectionContent}\n type={SECTION_IDENTIFIER}\n items={items}\n separation={separation}\n emptyComponent={<span data-testid='stack.empty'></span>}\n onDrop={handleDrop}\n onOver={handleOver}\n onDeleteSection={handleDelete}\n onNavigateToSection={handleNavigate}\n onAddSection={handleAddSection}\n onCollapseSection={handleCollapseSection}\n />\n\n {items.length === 0 ? (\n <AddSection collection={collection} />\n ) : (\n <div role='none' className='flex mlb-2 pli-2 justify-center'>\n <Button\n data-testid='stack.createSection'\n classNames='gap-2'\n onClick={() =>\n dispatch?.({\n action: LayoutAction.SET_LAYOUT,\n data: {\n element: 'dialog',\n component: 'dxos.org/plugin/stack/AddSectionDialog',\n subject: { position: 'afterAll', collection },\n },\n })\n }\n >\n <Plus />\n <span className='sr-only'>{t('add section label')}</span>\n </Button>\n </div>\n )}\n </Mosaic.Root>\n </AttentionProvider>\n );\n};\n\nexport default StackMain;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { type IconProps } from '@phosphor-icons/react';\nimport React, { type FC, type KeyboardEvent, type MouseEvent, useCallback } from 'react';\n\nimport { usePlugin, useIntentDispatcher } from '@dxos/app-framework';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { getSize, mx } from '@dxos/react-ui-theme';\n\nimport { STACK_PLUGIN } from '../meta';\nimport { StackViewType, type StackSectionCreator, type StackPluginProvides } from '../types';\n\nconst CreatorTile = ({\n Icon,\n label,\n testId,\n handleAdd,\n}: {\n Icon: FC<IconProps>;\n testId: string;\n label: string;\n handleAdd: () => void;\n}) => {\n const onClick = useCallback((_: MouseEvent<HTMLDivElement>) => handleAdd(), [handleAdd]);\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleAdd();\n }\n },\n [handleAdd],\n );\n\n return (\n <div\n role='button'\n aria-label={label}\n tabIndex={0}\n className={mx(\n 'flex items-center w-[10rem] h-16 overflow-hidden',\n 'border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer',\n )}\n onClick={onClick}\n onKeyDown={onKeyDown}\n data-testid={testId}\n >\n <div className='flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator'>\n <Icon weight='thin' className={getSize(6)} />\n </div>\n <div className='overflow-hidden items-center p-2 px-3'>\n <span className='capitalize'>{label}</span>\n </div>\n </div>\n );\n};\n\nexport const AddSection = ({ collection }: { collection: CollectionType }) => {\n const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n const dispatch = useIntentDispatcher();\n const { t } = useTranslation(STACK_PLUGIN);\n\n const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);\n const stackCreators = stackPlugin?.provides?.stack.creators ?? [];\n\n const handleAdd = useCallback(\n async (creator: StackSectionCreator) => {\n const { data: section } = (await dispatch(creator.intent)) ?? {};\n collection.objects = [section];\n const stack = collection.views[StackViewType.typename];\n if (stack) {\n stack.sections[section.id] = {};\n }\n },\n [collection, dispatch],\n );\n\n if (stackCreators.length === 0) {\n return null;\n }\n\n return (\n <div {...domAttributes} role='none' className='flex flex-wrap items-center p-8 gap-4'>\n {stackCreators.map((creator) => {\n const { id, type, icon, testId } = creator;\n return (\n <CreatorTile\n key={id}\n label={toLocalizedString(type, t)}\n testId={testId}\n Icon={icon}\n handleAdd={() => handleAdd(creator)}\n />\n );\n })}\n </div>\n );\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["import_react", "import_app_framework", "import_react_ui", "CreatorTile", "Icon", "label", "testId", "handleAdd", "onClick", "useCallback", "_", "onKeyDown", "event", "key", "preventDefault", "React", "div", "role", "aria-label", "tabIndex", "className", "mx", "data-testid", "weight", "getSize", "span", "AddSection", "collection", "domAttributes", "useArrowNavigationGroup", "axis", "dispatch", "useIntentDispatcher", "t", "useTranslation", "STACK_PLUGIN", "stackPlugin", "usePlugin", "stackCreators", "provides", "stack", "creators", "creator", "data", "section", "intent", "objects", "views", "StackViewType", "typename", "sections", "id", "length", "map", "type", "icon", "toLocalizedString", "SectionContent", "Surface", "object", "limit", "placeholder", "StackMain", "separation", "graph", "useGraph", "metadataPlugin", "useResolvePlugin", "parseMetadataResolverPlugin", "defaultStack", "useMemo", "create", "collapsedSections", "setCollapsedSections", "useState", "useEffect", "items", "filter", "nonNullable", "metadata", "resolver", "getType", "objectId", "view", "collapsed", "fullyQualifiedId", "title", "findNode", "properties", "handleOver", "active", "over", "SECTION_IDENTIFIER", "Path", "parent", "path", "parseData", "parse", "item", "isReactiveObject", "exists", "findIndex", "handleDrop", "operation", "splice", "position", "push", "handleDelete", "index", "last", "action", "SpaceAction", "REMOVE_OBJECT", "handleNavigate", "toId", "NavigationAction", "OPEN", "activeParts", "main", "LayoutAction", "SCROLL_INTO_VIEW", "handleAddSection", "SET_LAYOUT", "element", "component", "subject", "handleCollapseSection", "prev", "AttentionProvider", "Mosaic", "Root", "DragOverlay", "Stack", "emptyComponent", "onDrop", "onOver", "onDeleteSection", "onNavigateToSection", "onAddSection", "onCollapseSection", "Button", "classNames", "Plus"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types/stack.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { S, TypedObject } from '@dxos/echo-schema';\n\n// All section metadata needs to be optional/have defaults.\n// Any objects added to the collection will start with the section defaults.\n// If an object is removed from the collection without removing the section metadata this is fine.\n// Stack components should clean-up the superfluous data on future edits.\n\nexport const SectionSchema = S.Struct({\n height: S.optional(S.Number),\n // Space for data that isn't stack-specific but is specific to this view instance.\n // e.g. cover/fill for an image\n custom: S.optional(S.Record({ key: S.String, value: S.Any })),\n});\n\nexport class StackViewType extends TypedObject({ typename: 'dxos.org/type/StackView', version: '0.1.0' })({\n sections: S.mutable(S.Record({ key: S.String, value: SectionSchema })),\n}) {}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAA+B;AAOxB,IAAMA,gBAAgBC,qBAAEC,OAAO;EACpCC,QAAQF,qBAAEG,SAASH,qBAAEI,MAAM;;;EAG3BC,QAAQL,qBAAEG,SAASH,qBAAEM,OAAO;IAAEC,KAAKP,qBAAEQ;IAAQC,OAAOT,qBAAEU;EAAI,CAAA,CAAA;AAC5D,CAAA;AAEO,IAAMC,gBAAN,kBAA4BC,gCAAY;EAAEC,UAAU;EAA2BC,SAAS;AAAQ,CAAA,EAAG;EACxGC,UAAUf,qBAAEgB,QAAQhB,qBAAEM,OAAO;IAAEC,KAAKP,qBAAEQ;IAAQC,OAAOV;EAAc,CAAA,CAAA;AACrE,CAAA,EAAA;AAAI;",
|
|
6
|
-
"names": ["SectionSchema", "S", "Struct", "height", "optional", "Number", "custom", "Record", "key", "String", "value", "Any", "StackViewType", "TypedObject", "typename", "version", "sections", "mutable"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const STACK_PLUGIN = 'dxos.org/plugin/stack';\nexport const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';\n\nexport default {\n id: STACK_PLUGIN,\n // TODO(wittjosiah): Prevents \"stacks\" language from being exposed to users in settings panel.\n name: 'Collections',\n icon: 'ph--stack-simple--regular',\n} satisfies PluginMeta;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAMA,eAAe;AACrB,IAAMC,qBAAqB;AAElC,IAAA,eAAe;EACbC,IAAIF;;EAEJG,MAAM;EACNC,MAAM;AACR;",
|
|
6
|
-
"names": ["STACK_PLUGIN", "SECTION_IDENTIFIER", "id", "name", "icon"]
|
|
7
|
-
}
|
|
@@ -1,278 +0,0 @@
|
|
|
1
|
-
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
|
-
import {
|
|
3
|
-
SECTION_IDENTIFIER,
|
|
4
|
-
STACK_PLUGIN
|
|
5
|
-
} from "./chunk-J57BXQJY.mjs";
|
|
6
|
-
import {
|
|
7
|
-
StackViewType
|
|
8
|
-
} from "./chunk-HRY4R5UU.mjs";
|
|
9
|
-
|
|
10
|
-
// packages/plugins/plugin-stack/src/components/StackMain.tsx
|
|
11
|
-
import { Plus } from "@phosphor-icons/react";
|
|
12
|
-
import React2, { useEffect, useMemo, useState } from "react";
|
|
13
|
-
import { LayoutAction, NavigationAction, Surface, parseMetadataResolverPlugin, useIntentDispatcher as useIntentDispatcher2, useResolvePlugin } from "@dxos/app-framework";
|
|
14
|
-
import { create, getType, fullyQualifiedId, isReactiveObject } from "@dxos/client/echo";
|
|
15
|
-
import { useGraph } from "@dxos/plugin-graph";
|
|
16
|
-
import { SpaceAction } from "@dxos/plugin-space";
|
|
17
|
-
import { Button, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
18
|
-
import { AttentionProvider } from "@dxos/react-ui-attention";
|
|
19
|
-
import { Mosaic, Path } from "@dxos/react-ui-mosaic";
|
|
20
|
-
import { Stack } from "@dxos/react-ui-stack";
|
|
21
|
-
import { nonNullable } from "@dxos/util";
|
|
22
|
-
|
|
23
|
-
// packages/plugins/plugin-stack/src/components/AddSection.tsx
|
|
24
|
-
import { useArrowNavigationGroup } from "@fluentui/react-tabster";
|
|
25
|
-
import React, { useCallback } from "react";
|
|
26
|
-
import { usePlugin, useIntentDispatcher } from "@dxos/app-framework";
|
|
27
|
-
import { toLocalizedString, useTranslation } from "@dxos/react-ui";
|
|
28
|
-
import { getSize, mx } from "@dxos/react-ui-theme";
|
|
29
|
-
var CreatorTile = ({ Icon, label, testId, handleAdd }) => {
|
|
30
|
-
const onClick = useCallback((_) => handleAdd(), [
|
|
31
|
-
handleAdd
|
|
32
|
-
]);
|
|
33
|
-
const onKeyDown = useCallback((event) => {
|
|
34
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
handleAdd();
|
|
37
|
-
}
|
|
38
|
-
}, [
|
|
39
|
-
handleAdd
|
|
40
|
-
]);
|
|
41
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
42
|
-
role: "button",
|
|
43
|
-
"aria-label": label,
|
|
44
|
-
tabIndex: 0,
|
|
45
|
-
className: mx("flex items-center w-[10rem] h-16 overflow-hidden", "border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer"),
|
|
46
|
-
onClick,
|
|
47
|
-
onKeyDown,
|
|
48
|
-
"data-testid": testId
|
|
49
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
50
|
-
className: "flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator"
|
|
51
|
-
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
52
|
-
weight: "thin",
|
|
53
|
-
className: getSize(6)
|
|
54
|
-
})), /* @__PURE__ */ React.createElement("div", {
|
|
55
|
-
className: "overflow-hidden items-center p-2 px-3"
|
|
56
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
57
|
-
className: "capitalize"
|
|
58
|
-
}, label)));
|
|
59
|
-
};
|
|
60
|
-
var AddSection = ({ collection }) => {
|
|
61
|
-
const domAttributes = useArrowNavigationGroup({
|
|
62
|
-
axis: "grid"
|
|
63
|
-
});
|
|
64
|
-
const dispatch = useIntentDispatcher();
|
|
65
|
-
const { t } = useTranslation(STACK_PLUGIN);
|
|
66
|
-
const stackPlugin = usePlugin(STACK_PLUGIN);
|
|
67
|
-
const stackCreators = stackPlugin?.provides?.stack.creators ?? [];
|
|
68
|
-
const handleAdd = useCallback(async (creator) => {
|
|
69
|
-
const { data: section } = await dispatch(creator.intent) ?? {};
|
|
70
|
-
collection.objects = [
|
|
71
|
-
section
|
|
72
|
-
];
|
|
73
|
-
const stack = collection.views[StackViewType.typename];
|
|
74
|
-
if (stack) {
|
|
75
|
-
stack.sections[section.id] = {};
|
|
76
|
-
}
|
|
77
|
-
}, [
|
|
78
|
-
collection,
|
|
79
|
-
dispatch
|
|
80
|
-
]);
|
|
81
|
-
if (stackCreators.length === 0) {
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
85
|
-
...domAttributes,
|
|
86
|
-
role: "none",
|
|
87
|
-
className: "flex flex-wrap items-center p-8 gap-4"
|
|
88
|
-
}, stackCreators.map((creator) => {
|
|
89
|
-
const { id, type, icon, testId } = creator;
|
|
90
|
-
return /* @__PURE__ */ React.createElement(CreatorTile, {
|
|
91
|
-
key: id,
|
|
92
|
-
label: toLocalizedString(type, t),
|
|
93
|
-
testId,
|
|
94
|
-
Icon: icon,
|
|
95
|
-
handleAdd: () => handleAdd(creator)
|
|
96
|
-
});
|
|
97
|
-
}));
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// packages/plugins/plugin-stack/src/components/StackMain.tsx
|
|
101
|
-
var SectionContent = ({ data }) => {
|
|
102
|
-
return /* @__PURE__ */ React2.createElement(Surface, {
|
|
103
|
-
role: "section",
|
|
104
|
-
data: {
|
|
105
|
-
object: data
|
|
106
|
-
},
|
|
107
|
-
limit: 1,
|
|
108
|
-
placeholder: /* @__PURE__ */ React2.createElement(React2.Fragment, null)
|
|
109
|
-
});
|
|
110
|
-
};
|
|
111
|
-
var StackMain = ({ id, collection, separation }) => {
|
|
112
|
-
const dispatch = useIntentDispatcher2();
|
|
113
|
-
const { graph } = useGraph();
|
|
114
|
-
const { t } = useTranslation2(STACK_PLUGIN);
|
|
115
|
-
const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);
|
|
116
|
-
const defaultStack = useMemo(() => create(StackViewType, {
|
|
117
|
-
sections: {}
|
|
118
|
-
}), [
|
|
119
|
-
collection
|
|
120
|
-
]);
|
|
121
|
-
const stack = collection.views[StackViewType.typename] ?? defaultStack;
|
|
122
|
-
const [collapsedSections, setCollapsedSections] = useState({});
|
|
123
|
-
useEffect(() => {
|
|
124
|
-
if (!collection.views[StackViewType.typename]) {
|
|
125
|
-
collection.views[StackViewType.typename] = stack;
|
|
126
|
-
}
|
|
127
|
-
}, [
|
|
128
|
-
collection,
|
|
129
|
-
stack
|
|
130
|
-
]);
|
|
131
|
-
const items = collection.objects.filter(nonNullable).map((object) => {
|
|
132
|
-
const metadata = metadataPlugin?.provides.metadata.resolver(getType(object)?.objectId ?? "never");
|
|
133
|
-
const view = {
|
|
134
|
-
...stack.sections[object.id],
|
|
135
|
-
collapsed: collapsedSections[fullyQualifiedId(object)],
|
|
136
|
-
title: object?.title ?? toLocalizedString2(graph.findNode(fullyQualifiedId(object))?.properties.label, t)
|
|
137
|
-
};
|
|
138
|
-
return {
|
|
139
|
-
id: fullyQualifiedId(object),
|
|
140
|
-
object,
|
|
141
|
-
metadata,
|
|
142
|
-
view
|
|
143
|
-
};
|
|
144
|
-
}) ?? [];
|
|
145
|
-
const handleOver = ({ active, over }) => {
|
|
146
|
-
if (active.type !== SECTION_IDENTIFIER) {
|
|
147
|
-
return "reject";
|
|
148
|
-
}
|
|
149
|
-
if (Path.parent(active.path) === Path.parent(over.path)) {
|
|
150
|
-
return "rearrange";
|
|
151
|
-
}
|
|
152
|
-
const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;
|
|
153
|
-
const data = parseData ? parseData(active.item, "object") : active.item;
|
|
154
|
-
if (!isReactiveObject(data)) {
|
|
155
|
-
return "reject";
|
|
156
|
-
}
|
|
157
|
-
const exists = items.findIndex(({ id: id2 }) => id2 === active.item.id) >= 0;
|
|
158
|
-
if (!exists) {
|
|
159
|
-
return "transfer";
|
|
160
|
-
} else {
|
|
161
|
-
return "reject";
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
const handleDrop = ({ operation, active, over }) => {
|
|
165
|
-
if ((active.path === Path.create(id, active.item.id) || active.path === id) && (operation !== "copy" || over.path === Path.create(id, over.item.id) || over.path === id)) {
|
|
166
|
-
collection.objects.splice(active.position, 1);
|
|
167
|
-
delete stack.sections[active.item.id];
|
|
168
|
-
}
|
|
169
|
-
const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;
|
|
170
|
-
const object = parseData?.(active.item, "object");
|
|
171
|
-
if (object && over.path === Path.create(id, over.item.id)) {
|
|
172
|
-
collection.objects.splice(over.position, 0, object);
|
|
173
|
-
} else if (object && over.path === id) {
|
|
174
|
-
collection.objects.push(object);
|
|
175
|
-
}
|
|
176
|
-
if (!stack.sections[object.id]) {
|
|
177
|
-
stack.sections[object.id] = {};
|
|
178
|
-
}
|
|
179
|
-
};
|
|
180
|
-
const handleDelete = async (path) => {
|
|
181
|
-
const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === Path.last(path));
|
|
182
|
-
if (index >= 0) {
|
|
183
|
-
await dispatch({
|
|
184
|
-
action: SpaceAction.REMOVE_OBJECT,
|
|
185
|
-
data: {
|
|
186
|
-
object: collection.objects[index],
|
|
187
|
-
collection
|
|
188
|
-
}
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
const handleNavigate = async (object) => {
|
|
193
|
-
const toId = fullyQualifiedId(object);
|
|
194
|
-
await dispatch([
|
|
195
|
-
{
|
|
196
|
-
action: NavigationAction.OPEN,
|
|
197
|
-
data: {
|
|
198
|
-
activeParts: {
|
|
199
|
-
main: [
|
|
200
|
-
toId
|
|
201
|
-
]
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
},
|
|
205
|
-
{
|
|
206
|
-
action: LayoutAction.SCROLL_INTO_VIEW,
|
|
207
|
-
data: {
|
|
208
|
-
id: toId
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
]);
|
|
212
|
-
};
|
|
213
|
-
const handleAddSection = (path, position) => {
|
|
214
|
-
void dispatch?.({
|
|
215
|
-
action: LayoutAction.SET_LAYOUT,
|
|
216
|
-
data: {
|
|
217
|
-
element: "dialog",
|
|
218
|
-
component: `${STACK_PLUGIN}/AddSectionDialog`,
|
|
219
|
-
subject: {
|
|
220
|
-
path,
|
|
221
|
-
position,
|
|
222
|
-
collection
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
};
|
|
227
|
-
const handleCollapseSection = (id2, collapsed) => {
|
|
228
|
-
setCollapsedSections((prev) => ({
|
|
229
|
-
...prev,
|
|
230
|
-
[id2]: collapsed
|
|
231
|
-
}));
|
|
232
|
-
};
|
|
233
|
-
return /* @__PURE__ */ React2.createElement(AttentionProvider, {
|
|
234
|
-
id
|
|
235
|
-
}, /* @__PURE__ */ React2.createElement(Mosaic.Root, null, /* @__PURE__ */ React2.createElement(Mosaic.DragOverlay, null), /* @__PURE__ */ React2.createElement(Stack, {
|
|
236
|
-
id,
|
|
237
|
-
"data-testid": "main.stack",
|
|
238
|
-
SectionContent,
|
|
239
|
-
type: SECTION_IDENTIFIER,
|
|
240
|
-
items,
|
|
241
|
-
separation,
|
|
242
|
-
emptyComponent: /* @__PURE__ */ React2.createElement("span", {
|
|
243
|
-
"data-testid": "stack.empty"
|
|
244
|
-
}),
|
|
245
|
-
onDrop: handleDrop,
|
|
246
|
-
onOver: handleOver,
|
|
247
|
-
onDeleteSection: handleDelete,
|
|
248
|
-
onNavigateToSection: handleNavigate,
|
|
249
|
-
onAddSection: handleAddSection,
|
|
250
|
-
onCollapseSection: handleCollapseSection
|
|
251
|
-
}), items.length === 0 ? /* @__PURE__ */ React2.createElement(AddSection, {
|
|
252
|
-
collection
|
|
253
|
-
}) : /* @__PURE__ */ React2.createElement("div", {
|
|
254
|
-
role: "none",
|
|
255
|
-
className: "flex mlb-2 pli-2 justify-center"
|
|
256
|
-
}, /* @__PURE__ */ React2.createElement(Button, {
|
|
257
|
-
"data-testid": "stack.createSection",
|
|
258
|
-
classNames: "gap-2",
|
|
259
|
-
onClick: () => dispatch?.({
|
|
260
|
-
action: LayoutAction.SET_LAYOUT,
|
|
261
|
-
data: {
|
|
262
|
-
element: "dialog",
|
|
263
|
-
component: "dxos.org/plugin/stack/AddSectionDialog",
|
|
264
|
-
subject: {
|
|
265
|
-
position: "afterAll",
|
|
266
|
-
collection
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
})
|
|
270
|
-
}, /* @__PURE__ */ React2.createElement(Plus, null), /* @__PURE__ */ React2.createElement("span", {
|
|
271
|
-
className: "sr-only"
|
|
272
|
-
}, t("add section label"))))));
|
|
273
|
-
};
|
|
274
|
-
var StackMain_default = StackMain;
|
|
275
|
-
export {
|
|
276
|
-
StackMain_default as default
|
|
277
|
-
};
|
|
278
|
-
//# sourceMappingURL=StackMain-KH6IEQQ6.mjs.map
|