@pdfme/ui 0.0.0

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useContext, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensors,
+  useSensor,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { SchemaForUI } from '@pdfme/common';
+import type { SidebarProps } from '../../../../types.js';
+import { PluginsRegistry } from '../../../../contexts.js';
+import Item from './Item.js';
+import SelectableSortableItem from './SelectableSortableItem.js';
+import { theme } from 'antd';
+import PluginIcon from '../../PluginIcon.js';
+
+const SelectableSortableContainer = (
+  props: Pick<
+    SidebarProps,
+    'schemas' | 'onEdit' | 'onSortEnd' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
+  >,
+) => {
+  const { token } = theme.useToken();
+  const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+  const [selectedSchemas, setSelectedSchemas] = useState<SchemaForUI[]>([]);
+  const [dragOverlaidItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const pluginsRegistry = useContext(PluginsRegistry);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const isItemSelected = (itemId: string): boolean =>
+    selectedSchemas.map((i) => i.id).includes(itemId);
+
+  const onSelectionChanged = (id: string, isShiftSelect: boolean) => {
+    if (isShiftSelect) {
+      if (isItemSelected(id)) {
+        const newSelectedSchemas = selectedSchemas.filter((item) => item.id !== id);
+        setSelectedSchemas(newSelectedSchemas);
+      } else {
+        const newSelectedItem = schemas.find((schema) => schema.id === id)!;
+        const newSelectedSchemas = selectedSchemas.concat(newSelectedItem);
+        setSelectedSchemas(newSelectedSchemas);
+      }
+    } else {
+      setSelectedSchemas([]);
+    }
+  };
+
+  const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
+    // Get schema by ID or use directly
+    const thisSchema =
+      typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
+
+    if (!thisSchema) return <></>;
+
+    const [pluginLabel, activePlugin] = pluginsRegistry.findWithLabelByType(thisSchema.type);
+
+    if (!activePlugin) {
+      return <></>;
+    }
+
+    return (
+      <PluginIcon
+        plugin={activePlugin}
+        label={pluginLabel}
+        size={20}
+        styles={{ marginRight: '0.5rem' }}
+      />
+    );
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={({ active }) => {
+        setActiveId(String(active.id));
+        setClonedItems(schemas);
+
+        if (!isItemSelected(String(active.id))) {
+          const newSelectedSchemas: SchemaForUI[] = [];
+          setSelectedSchemas(newSelectedSchemas);
+        } else if (selectedSchemas.length > 0) {
+          onSortEnd(
+            selectedSchemas.reduce((ret, selectedItem) => {
+              if (selectedItem.id === String(active.id)) {
+                return ret;
+              }
+              return ret.filter((schema) => schema !== selectedItem);
+            }, schemas),
+          );
+        }
+      }}
+      onDragEnd={({ active, over }) => {
+        const overId = over?.id || '';
+
+        const activeIndex = schemas.map((i) => i.id).indexOf(String(active.id));
+        const overIndex = schemas.map((i) => i.id).indexOf(String(overId));
+
+        if (selectedSchemas.length) {
+          let newSchemas = [...schemas];
+          newSchemas = arrayMove(newSchemas, activeIndex, overIndex);
+          newSchemas.splice(
+            overIndex + 1,
+            0,
+            ...selectedSchemas.filter((item) => item.id !== activeId),
+          );
+          onSortEnd(newSchemas);
+          setSelectedSchemas([]);
+        } else if (activeIndex !== overIndex) {
+          onSortEnd(arrayMove(schemas, activeIndex, overIndex));
+        }
+
+        setActiveId(null);
+      }}
+      onDragCancel={() => {
+        if (dragOverlaidItems) {
+          onSortEnd(dragOverlaidItems);
+        }
+
+        setActiveId(null);
+        setClonedItems(null);
+      }}
+    >
+      <>
+        <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
+          <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
+            {schemas.map((schema) => (
+              <SelectableSortableItem
+                key={schema.id}
+                style={{
+                  border: `1px solid ${
+                    schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
+                  }`,
+                }}
+                schema={schema}
+                schemas={schemas}
+                isSelected={isItemSelected(schema.id) || activeId === schema.id}
+                onEdit={onEdit}
+                onSelect={onSelectionChanged}
+                onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
+                onMouseLeave={() => onChangeHoveringSchemaId(null)}
+              />
+            ))}
+          </ul>
+        </SortableContext>
+        {createPortal(
+          <DragOverlay adjustScale>
+            {activeId
+              ? (() => {
+                  const activeSchema = schemas.find((schema) => schema.id === activeId);
+                  if (!activeSchema) return null;
+                  return (
+                    <>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        <Item
+                          icon={getPluginIcon(activeId)}
+                          value={activeSchema.name}
+                          required={activeSchema.required}
+                          readOnly={activeSchema.readOnly}
+                          style={{ background: token.colorPrimary }}
+                          dragOverlay
+                        />
+                      </ul>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        {selectedSchemas
+                          .filter((item) => item.id !== activeId)
+                          .map((item) => (
+                            <Item
+                              icon={getPluginIcon(item)}
+                              key={item.id}
+                              value={item.name}
+                              required={item.required}
+                              readOnly={item.readOnly}
+                              style={{ background: token.colorPrimary }}
+                              dragOverlay
+                            />
+                          ))}
+                      </ul>
+                    </>
+                  );
+                })()
+              : null}
+          </DragOverlay>,
+          document.body,
+        )}
+      </>
+    </DndContext>
+  );
+};
+
+export default SelectableSortableContainer;

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -0,0 +1,88 @@
+import React, { useContext } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { SchemaForUI } from '@pdfme/common';
+import { PluginsRegistry, I18nContext } from '../../../../contexts.js';
+import Item from './Item.js';
+import { useMountStatus } from '../../../../hooks.js';
+import { theme } from 'antd';
+import PluginIcon from '../../PluginIcon.js';
+
+interface Props {
+  isSelected: boolean;
+  style?: React.CSSProperties;
+  onSelect: (id: string, isShiftSelect: boolean) => void;
+  onEdit: (id: string) => void;
+  schema: SchemaForUI;
+  schemas: SchemaForUI[];
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}
+const SelectableSortableItem = ({
+  isSelected,
+  style,
+  onSelect,
+  onEdit,
+  schema,
+  schemas,
+  onMouseEnter,
+  onMouseLeave,
+}: Props) => {
+  const { token } = theme.useToken();
+
+  const i18n = useContext(I18nContext);
+  const pluginsRegistry = useContext(PluginsRegistry);
+  const { setNodeRef, listeners, isDragging, isSorting, transform, transition } = useSortable({
+    id: schema.id,
+  });
+  const mounted = useMountStatus();
+  const mountedWhileDragging = isDragging && !mounted;
+
+  const newListeners = {
+    ...listeners,
+    onClick: (event: React.MouseEvent) => onSelect(schema.id, event.shiftKey),
+  };
+
+  const [pluginLabel, thisPlugin] = pluginsRegistry.findWithLabelByType(schema.type);
+
+  let status: undefined | 'is-warning' | 'is-danger';
+  if (!schema.name) {
+    status = 'is-warning';
+  } else if (schemas.find((s) => schema.name && s.name === schema.name && s.id !== schema.id)) {
+    status = 'is-danger';
+  }
+
+  let title = i18n('edit');
+  if (status === 'is-warning') {
+    title = i18n('plsInputName');
+  } else if (status === 'is-danger') {
+    title = i18n('fieldMustUniq');
+  }
+
+  const selectedStyle = isSelected
+    ? { background: token.colorPrimary, opacity: isSorting || isDragging ? 0.5 : 1 }
+    : ({} as React.CSSProperties);
+
+  return (
+    <Item
+      ref={setNodeRef}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={() => onEdit(schema.id)}
+      icon={thisPlugin && <PluginIcon plugin={thisPlugin} label={pluginLabel} size={20} />}
+      value={schema.name}
+      status={status}
+      title={title}
+      required={schema.required}
+      readOnly={schema.readOnly}
+      style={{ ...selectedStyle, ...style }}
+      dragging={isDragging}
+      sorting={isSorting}
+      transition={transition}
+      transform={transform}
+      fadeIn={mountedWhileDragging}
+      listeners={newListeners}
+    />
+  );
+};
+
+export default SelectableSortableItem;

package/src/components/Designer/RightSidebar/ListView/index.tsx

@@ -0,0 +1,116 @@
+import React, { useContext, useState } from 'react';
+import type { SidebarProps } from '../../../../types.js';
+import { DESIGNER_CLASSNAME } from '../../../../constants.js';
+import { I18nContext } from '../../../../contexts.js';
+import { Input, Typography, Button } from 'antd';
+import SelectableSortableContainer from './SelectableSortableContainer.js';
+import { SidebarBody, SidebarFooter, SidebarFrame, SidebarHeader } from '../layout.js';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const ListView = (
+  props: Pick<
+    SidebarProps,
+    | 'schemas'
+    | 'onSortEnd'
+    | 'onEdit'
+    | 'hoveringSchemaId'
+    | 'onChangeHoveringSchemaId'
+    | 'changeSchemas'
+  >,
+) => {
+  const { schemas, onSortEnd, onEdit, hoveringSchemaId, onChangeHoveringSchemaId, changeSchemas } =
+    props;
+  const i18n = useContext(I18nContext);
+  const [isBulkUpdateFieldNamesMode, setIsBulkUpdateFieldNamesMode] = useState(false);
+  const [fieldNamesValue, setFieldNamesValue] = useState('');
+
+  const commitBulk = () => {
+    const names = fieldNamesValue.split('\n');
+    if (names.length !== schemas.length) {
+      alert(i18n('errorBulkUpdateFieldName'));
+    } else {
+      changeSchemas(
+        names.map((value, index) => ({
+          key: 'name',
+          value,
+          schemaId: schemas[index].id,
+        })),
+      );
+      setIsBulkUpdateFieldNamesMode(false);
+    }
+  };
+
+  const startBulk = () => {
+    setFieldNamesValue(schemas.map((s) => s.name).join('\n'));
+    setIsBulkUpdateFieldNamesMode(true);
+  };
+
+  return (
+    <SidebarFrame className={DESIGNER_CLASSNAME + 'list-view'}>
+      <SidebarHeader>
+        <Text strong style={{ textAlign: 'center', width: '100%' }}>
+          {i18n('fieldsList')}
+        </Text>
+      </SidebarHeader>
+      <SidebarBody>
+        {isBulkUpdateFieldNamesMode ? (
+          <TextArea
+            wrap="off"
+            value={fieldNamesValue}
+            onChange={(e) => setFieldNamesValue(e.target.value)}
+            style={{
+              height: '100%',
+              width: '100%',
+              resize: 'none',
+              lineHeight: '2.75rem',
+            }}
+          />
+        ) : (
+          <SelectableSortableContainer
+            schemas={schemas}
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            onSortEnd={onSortEnd}
+            onEdit={onEdit}
+          />
+        )}
+      </SidebarBody>
+      <SidebarFooter>
+        {isBulkUpdateFieldNamesMode ? (
+          <>
+            <Button
+              className={DESIGNER_CLASSNAME + 'bulk-commit'}
+              size="small"
+              type="text"
+              onClick={commitBulk}
+            >
+              <u> {i18n('commitBulkUpdateFieldName')}</u>
+            </Button>
+            <span>/</span>
+            <Button
+              className={DESIGNER_CLASSNAME + 'bulk-cancel'}
+              size="small"
+              type="text"
+              onClick={() => setIsBulkUpdateFieldNamesMode(false)}
+            >
+              <u> {i18n('cancel')}</u>
+            </Button>
+          </>
+        ) : (
+          <Button
+            className={DESIGNER_CLASSNAME + 'bulk-update'}
+            size="small"
+            type="text"
+            onClick={startBulk}
+          >
+            <u> {i18n('bulkUpdateFieldName')}</u>
+          </Button>
+        )}
+      </SidebarFooter>
+    </SidebarFrame>
+  );
+};
+
+export default ListView;

package/src/components/Designer/RightSidebar/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { theme, Button } from 'antd';
+import type { SidebarProps } from '../../../types.js';
+import { RIGHT_SIDEBAR_WIDTH, DESIGNER_CLASSNAME } from '../../../constants.js';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import ListView from './ListView/index.js';
+import DetailView from './DetailView/index.js';
+
+const Sidebar = (props: SidebarProps) => {
+  const { sidebarOpen, setSidebarOpen, activeElements, schemas } = props;
+
+  const { token } = theme.useToken();
+  const getActiveSchemas = () =>
+    schemas.filter((s) => activeElements.map((ae) => ae.id).includes(s.id));
+  const getLastActiveSchema = () => {
+    const activeSchemas = getActiveSchemas();
+    return activeSchemas[activeSchemas.length - 1];
+  };
+
+  const iconProps = { strokeWidth: 1.5, size: 20 };
+
+  return (
+    <div
+      className={DESIGNER_CLASSNAME + 'right-sidebar'}
+      style={{
+        position: 'absolute',
+        right: 0,
+        zIndex: 1,
+        height: '100%',
+        width: sidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0,
+      }}
+    >
+      <Button
+        className={DESIGNER_CLASSNAME + 'sidebar-toggle'}
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          top: '14px',
+          right: '16px',
+          paddingTop: '2px',
+          zIndex: 100,
+        }}
+        icon={sidebarOpen ? <ArrowRight {...iconProps} /> : <ArrowLeft {...iconProps} />}
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+      />
+      <div
+        style={{
+          width: RIGHT_SIDEBAR_WIDTH,
+          height: '100%',
+          display: sidebarOpen ? 'flex' : 'none',
+          top: 0,
+          right: 0,
+          position: 'absolute',
+          fontFamily: "'Open Sans', sans-serif",
+          boxSizing: 'border-box',
+          background: token.colorBgLayout,
+          borderLeft: `1px solid ${token.colorSplit}`,
+        }}
+      >
+        {getActiveSchemas().length === 0 ? (
+          <ListView {...props} />
+        ) : (
+          <DetailView {...props} activeSchema={getLastActiveSchema()} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

package/src/components/Designer/RightSidebar/layout.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Divider } from 'antd';
+
+export const SIDEBAR_H_PADDING_PX = 16;
+export const SIDEBAR_V_PADDING_PX = 8;
+export const SIDEBAR_HEADER_HEIGHT = 60;
+
+type SectionProps = {
+  children: React.ReactNode;
+};
+type SidebarFrameProps = SectionProps & {
+  className?: string;
+};
+
+export const SidebarFrame = ({ children, className }: SidebarFrameProps) => (
+  <div
+    className={className}
+    style={{
+      height: '100%',
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const SidebarHeader = ({ children }: SectionProps) => (
+  <div
+    style={{
+      position: 'relative',
+      minHeight: SIDEBAR_HEADER_HEIGHT,
+      display: 'flex',
+      flexShrink: 0,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      padding: `${SIDEBAR_V_PADDING_PX}px ${SIDEBAR_H_PADDING_PX}px 0`,
+    }}
+  >
+    <div style={{ minHeight: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      {children}
+    </div>
+    <Divider style={{ marginTop: `${SIDEBAR_V_PADDING_PX}px`, marginBottom: 0 }} />
+  </div>
+);
+
+export const SidebarBody = ({ children }: SectionProps) => (
+  <div
+    style={{
+      flex: 1,
+      minHeight: 0,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      padding: `${SIDEBAR_V_PADDING_PX}px ${SIDEBAR_H_PADDING_PX}px`,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const SidebarFooter = ({ children }: SectionProps) => (
+  <div
+    style={{
+      display: 'flex',
+      flexShrink: 0,
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: `${SIDEBAR_V_PADDING_PX}px`,
+      padding: `${SIDEBAR_H_PADDING_PX}px`,
+    }}
+  >
+    {children}
+  </div>
+);