@dxos/plugin-stack 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/AddSectionDialog.tsx

@@ -1,128 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { FilePlus } from '@phosphor-icons/react';
-import React, { useCallback, useRef, useState } from 'react';
-
-import { usePlugin, useIntent, LayoutAction, useResolvePlugin, parseFileManagerPlugin } from '@dxos/app-framework';
-import { type ReactiveEchoObject, create, getSpace } from '@dxos/client/echo';
-import { FileType } from '@dxos/plugin-ipfs/types';
-import { type CollectionType } from '@dxos/plugin-space/types';
-import { Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Path } from '@dxos/react-ui-mosaic';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { getSize, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
-
-import { STACK_PLUGIN } from '../meta';
-import { StackViewType, type StackPluginProvides, type AddSectionPosition } from '../types';
-
-type AddSectionDialogProps = { path?: string; position: AddSectionPosition; collection: CollectionType };
-
-export const dataHasAddSectionDialogProps = (data: any): data is { subject: AddSectionDialogProps } => {
-  return (
-    'subject' in data &&
-    typeof data.subject === 'object' &&
-    !!data.subject &&
-    'position' in data.subject &&
-    typeof data.subject.position === 'string' &&
-    'collection' in data.subject
-  );
-};
-
-export const AddSectionDialog = ({ path, position, collection }: AddSectionDialogProps) => {
-  const { t } = useTranslation(STACK_PLUGIN);
-  const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);
-  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
-  const fileRef = useRef<HTMLInputElement | null>(null);
-  const { dispatch } = useIntent();
-  const space = getSpace(collection);
-  const [pending, setPending] = useState<boolean>(false);
-  const [uploadError, setUploadError] = useState<Error | undefined>();
-
-  const handleAdd = useCallback(
-    (sectionObject: ReactiveEchoObject<any>) => {
-      const index =
-        position === 'beforeAll'
-          ? 0
-          : position === 'afterAll'
-            ? collection.objects.length
-            : collection.objects.filter(nonNullable).findIndex((section) => section.id === Path.last(path!));
-
-      collection.objects.splice(index + (position === 'after' ? 1 : 0), 0, sectionObject);
-      const stack = collection.views[StackViewType.typename];
-      if (stack) {
-        stack.sections[sectionObject.id] = {};
-      }
-      setPending(false);
-      void dispatch?.({ action: LayoutAction.SET_LAYOUT, data: { element: 'dialog', state: false } });
-    },
-    [collection, path, position, dispatch],
-  );
-
-  const handleFileUpload =
-    fileManagerPlugin?.provides.file.upload && space
-      ? async (file: File) => {
-          const filename = file.name.split('.')[0];
-          try {
-            const info = await fileManagerPlugin.provides.file.upload?.(file, space);
-            if (info) {
-              const obj = create(FileType, { type: file.type, name: filename, filename, cid: info.cid });
-              handleAdd(obj);
-            }
-          } catch (err: any) {
-            setUploadError(err);
-          }
-        }
-      : undefined;
-
-  return (
-    <Dialog.Content>
-      <Dialog.Title>{t(`add section ${position} dialog title`)}</Dialog.Title>
-      <SearchList.Root label={t('add section input placeholder')}>
-        <SearchList.Input placeholder={t('add section input placeholder')} classNames='pli-3' disabled={pending} />
-        <SearchList.Content classNames='min-bs-24 bs-fit max-bs-64 overflow-auto' {...(pending && { inert: 'true' })}>
-          {stackPlugin?.provides?.stack.creators?.map(({ id, icon: Icon, label: propsLabel, testId, intent }) => {
-            const label = toLocalizedString(propsLabel, t);
-            return (
-              <SearchList.Item
-                value={label}
-                key={id}
-                onSelect={async () => {
-                  setPending(true);
-                  const { data: nextSection } = (await dispatch({ ...intent, data: { space } })) ?? {};
-                  handleAdd(nextSection);
-                }}
-                classNames='flex items-center gap-2 pli-2'
-                data-testid={testId}
-              >
-                {Icon && <Icon className={mx(getSize(4), 'shrink-0')} />}
-                <span className='grow truncate'>{label}</span>
-              </SearchList.Item>
-            );
-          })}
-          {handleFileUpload && (
-            <SearchList.Item
-              value={t('upload file label')}
-              classNames='flex items-center gap-2 pli-2'
-              onSelect={() => fileRef.current?.click()}
-            >
-              <FilePlus />
-              <span className='grow truncate'>{t('upload file label')}</span>
-            </SearchList.Item>
-          )}
-          {uploadError && <div className='text-error-500'>{uploadError.message}</div>}
-        </SearchList.Content>
-      </SearchList.Root>
-      {handleFileUpload && (
-        <input
-          type='file'
-          className='sr-only'
-          ref={fileRef}
-          onChange={({ target: { files } }) => files && handleFileUpload(files[0])}
-        />
-      )}
-    </Dialog.Content>
-  );
-};