@pdfme/ui 1.0.0-beta.8 → 1.0.1

package/src/components/Designer/Sidebar/ListView/Item.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useContext } from 'react';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+import { I18nContext } from '../../../../contexts';
+import dragIcon from '../../../../assets/icons/drag.svg';
+import warningIcon from '../../../../assets/icons/warning.svg';
+
+interface Props {
+  value: React.ReactNode;
+  style?: React.CSSProperties;
+  status?: 'is-warning' | 'is-danger';
+  title?: string;
+  dragOverlay?: boolean;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  dragging?: boolean;
+  sorting?: boolean;
+  transition?: string;
+  transform?: { x: number; y: number; scaleX: number; scaleY: number } | null;
+  fadeIn?: boolean;
+  listeners?: DraggableSyntheticListeners;
+}
+const Item = React.memo(
+  React.forwardRef<HTMLLIElement, Props>(
+    (
+      {
+        value,
+        status,
+        title,
+        style,
+        dragOverlay,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        dragging,
+        fadeIn,
+        listeners,
+        sorting,
+        transition,
+        transform,
+        ...props
+      },
+      ref
+    ) => {
+      const i18n = useContext(I18nContext);
+
+      useEffect(() => {
+        if (!dragOverlay) {
+          return;
+        }
+
+        document.body.style.cursor = 'grabbing';
+
+        return () => {
+          document.body.style.cursor = '';
+        };
+      }, [dragOverlay]);
+
+      const { x, y, scaleX, scaleY } = transform || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+
+      return (
+        <li
+          style={{
+            transition,
+            transform: `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`,
+          }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          ref={ref}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', ...style }} {...props}>
+            <button
+              {...listeners}
+              style={{ padding: '0.5rem', background: 'none', border: 'none', display: 'flex' }}
+            >
+              <img style={{ cursor: 'grab' }} src={dragIcon} width={15} alt="Drag icon" />
+            </button>
+            <div
+              style={{
+                width: '100%',
+                padding: '0.5rem',
+                paddingLeft: 0,
+                cursor: 'pointer',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
+              title={title || ''}
+              onClick={() => onClick && onClick()}
+            >
+              {status === undefined ? (
+                value
+              ) : (
+                <span style={{ display: 'flex', alignItems: 'center' }}>
+                  <img
+                    alt="Warning icon"
+                    src={warningIcon}
+                    width={15}
+                    style={{ marginRight: '0.5rem' }}
+                  />
+                  {status === 'is-warning' ? i18n('noKeyName') : value}
+                  {status === 'is-danger' ? i18n('notUniq') : ''}
+                </span>
+              )}
+            </div>
+          </div>
+        </li>
+      );
+    }
+  )
+);
+
+export default Item;

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

@@ -0,0 +1,162 @@
+import React, { useState } 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 Item from './Item';
+import SelectableSortableItem from './SelectableSortableItem';
+import { SidebarProps } from '../';
+
+const SelectableSortableContainer = (
+  props: Pick<
+    SidebarProps,
+    'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
+  >
+) => {
+  const { schemas, onEdit, onSortEnd, height, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+  const [selectedSchemas, setSelectedSchemas] = useState<SchemaForUI[]>([]);
+  const [dragOverlaydItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  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([]);
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={({ active }) => {
+        setActiveId(active.id);
+        setClonedItems(schemas);
+
+        if (!isItemSelected(active.id)) {
+          const newSelectedSchemas: SchemaForUI[] = [];
+          setSelectedSchemas(newSelectedSchemas);
+        } else if (selectedSchemas.length > 0) {
+          onSortEnd(
+            selectedSchemas.reduce((ret, selectedItem) => {
+              if (selectedItem.id === 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(active.id);
+        const overIndex = schemas.map((i) => i.id).indexOf(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 (dragOverlaydItems) {
+          onSortEnd(dragOverlaydItems);
+        }
+
+        setActiveId(null);
+        setClonedItems(null);
+      }}
+    >
+      <div style={{ height, overflowY: 'auto' }}>
+        <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 ? '#18a0fb' : '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>
+      </div>
+      {createPortal(
+        <DragOverlay adjustScale>
+          {activeId ? (
+            <>
+              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                <Item
+                  value={schemas.find((schema) => schema.id === activeId)!.key}
+                  style={{ color: '#fff', background: '#18a0fb' }}
+                  dragOverlay
+                />
+              </ul>
+              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                {selectedSchemas
+                  .filter((item) => item.id !== activeId)
+                  .map((item) => (
+                    <Item
+                      key={item.id}
+                      value={item.key}
+                      style={{ color: '#fff', background: '#18a0fb' }}
+                      dragOverlay
+                    />
+                  ))}
+              </ul>
+            </>
+          ) : null}
+        </DragOverlay>,
+        document.body
+      )}
+    </DndContext>
+  );
+};
+
+export default SelectableSortableContainer;

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

@@ -0,0 +1,78 @@
+import React, { useContext } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { SchemaForUI } from '@pdfme/common';
+import { I18nContext } from '../../../../contexts';
+import Item from './Item';
+import { useMountStatus } from '../../../../hooks';
+
+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 i18n = useContext(I18nContext);
+  const { setNodeRef, listeners, isDragging, isSorting, transform, transition } = useSortable({
+    id: schema.id,
+  });
+  const mounted = useMountStatus();
+  const mountedWhileDragging = isDragging && !mounted;
+
+  const newListeners = {
+    ...listeners,
+    onClick: (event: any) => onSelect(schema.id, event.shiftKey),
+  };
+
+  let status: undefined | 'is-warning' | 'is-danger';
+  if (!schema.key) {
+    status = 'is-warning';
+  } else if (schemas.find((s) => schema.key && s.key === schema.key && 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
+    ? { color: '#fff', background: '#18a0fb', opacity: isSorting || isDragging ? 0.5 : 1 }
+    : ({} as React.CSSProperties);
+
+  return (
+    <Item
+      ref={setNodeRef}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={() => onEdit(schema.id)}
+      value={schema.key}
+      status={status}
+      title={title}
+      style={{ ...selectedStyle, ...style }}
+      dragging={isDragging}
+      sorting={isSorting}
+      transition={transition}
+      transform={transform}
+      fadeIn={mountedWhileDragging}
+      listeners={newListeners}
+    />
+  );
+};
+
+export default SelectableSortableItem;

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

@@ -0,0 +1,119 @@
+import React, { useContext, useState } from 'react';
+import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants';
+import { I18nContext } from '../../../../contexts';
+import Divider from '../../../Divider';
+import SelectableSortableContainer from './SelectableSortableContainer';
+import { SidebarProps } from '..';
+
+const ListView = (
+  props: Pick<
+    SidebarProps,
+    | 'schemas'
+    | 'onSortEnd'
+    | 'onEdit'
+    | 'size'
+    | 'hoveringSchemaId'
+    | 'onChangeHoveringSchemaId'
+    | 'changeSchemas'
+  >
+) => {
+  const {
+    schemas,
+    onSortEnd,
+    onEdit,
+    size,
+    hoveringSchemaId,
+    onChangeHoveringSchemaId,
+    changeSchemas,
+  } = props;
+  const i18n = useContext(I18nContext);
+  const [isBulkUpdateFieldNamesMode, setIsBulkUpdateFieldNamesMode] = useState(false);
+  const [fieldNamesValue, setFieldNamesValue] = useState('');
+  const height = size.height - RULER_HEIGHT * ZOOM - 135;
+  return (
+    <div>
+      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+          {i18n('fieldsList')}
+        </span>
+      </div>
+      <Divider />
+      {isBulkUpdateFieldNamesMode ? (
+        <div>
+          <textarea
+            wrap="off"
+            value={fieldNamesValue}
+            onChange={(e) => setFieldNamesValue(e.target.value)}
+            style={{
+              height: height - 5,
+              width: SIDEBAR_WIDTH,
+              fontSize: '1rem',
+              lineHeight: '2.5rem',
+              background: 'transparent',
+              margin: 0,
+              padding: '1rem',
+              boxSizing: 'border-box',
+              fontFamily: 'inherit',
+            }}
+          ></textarea>
+        </div>
+      ) : (
+        <SelectableSortableContainer
+          height={height}
+          schemas={schemas}
+          hoveringSchemaId={hoveringSchemaId}
+          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+          onSortEnd={onSortEnd}
+          onEdit={onEdit}
+        />
+      )}
+
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          cursor: 'pointer',
+          fontSize: '0.75rem',
+        }}
+      >
+        {isBulkUpdateFieldNamesMode ? (
+          <>
+            <u
+              onClick={() => {
+                const names = fieldNamesValue.split('\n');
+                if (names.length !== schemas.length) {
+                  alert(i18n('errorBulkUpdateFieldName'));
+                } else {
+                  changeSchemas(
+                    names.map((value, index) => ({
+                      key: 'key',
+                      value,
+                      schemaId: schemas[index].id,
+                    }))
+                  );
+                  setIsBulkUpdateFieldNamesMode(false);
+                }
+              }}
+            >
+              {i18n('commitBulkUpdateFieldName')}
+            </u>
+            <span style={{ margin: '0 1rem' }}>/</span>
+            <u onClick={() => setIsBulkUpdateFieldNamesMode(false)}>{i18n('cancel')}</u>
+          </>
+        ) : (
+          <u
+            onClick={() => {
+              setFieldNamesValue(schemas.map((s) => s.key).join('\n'));
+              setIsBulkUpdateFieldNamesMode(true);
+            }}
+          >
+            {i18n('bulkUpdateFieldName')}
+          </u>
+        )}
+      </div>
+      <Divider />
+    </div>
+  );
+};
+
+export default ListView;

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

@@ -8,16 +8,14 @@ import ListView from './ListView';
 import DetailView from './DetailView';
 
 export type SidebarProps = {
-  scale: number;
   height: number;
   hoveringSchemaId: string | null;
   onChangeHoveringSchemaId: (id: string | null) => void;
   size: Size;
   pageSize: Size;
-  activeElement: HTMLElement | null;
-  activeSchema: SchemaForUI;
+  activeElements: HTMLElement[];
   schemas: SchemaForUI[];
-  onSortEnd: ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => void;
+  onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
   onEdit: (id: string) => void;
   onEditEnd: () => void;
   changeSchemas: (objs: { key: string; value: string | number; schemaId: string }[]) => void;
@@ -25,12 +23,22 @@ export type SidebarProps = {
 };
 
 const Sidebar = (props: SidebarProps) => {
-  const { height, size, addSchema } = props;
+  const { height, size, activeElements, schemas, addSchema } = props;
 
   const i18n = useContext(I18nContext);
   const [open, setOpen] = useState(true);
   const top = 0;
 
+  const getActiveSchemas = () => {
+    const ids = activeElements.map((ae) => ae.id);
+    return schemas.filter((s) => ids.includes(s.id));
+  };
+
+  const getLastActiveSchema = () => {
+    const activeSchemas = getActiveSchemas();
+    return activeSchemas[activeSchemas.length - 1];
+  };
+
   return (
     <div
       style={{ position: 'absolute', right: 0, zIndex: 1, height, width: open ? SIDEBAR_WIDTH : 0 }}
@@ -47,6 +55,7 @@ const Sidebar = (props: SidebarProps) => {
             padding: '0.5rem',
             cursor: 'pointer',
             background: '#eee',
+            width: 30,
           }}
           onClick={() => setOpen(!open)}
         >
@@ -67,9 +76,15 @@ const Sidebar = (props: SidebarProps) => {
             overflowY: 'auto',
             fontFamily: "'Open Sans', sans-serif",
             fontWeight: 400,
+            textAlign: 'left',
+            boxSizing: 'content-box',
           }}
         >
-          {props.activeElement ? <DetailView {...props} /> : <ListView {...props} />}
+          {getActiveSchemas().length === 0 ? (
+            <ListView {...props} />
+          ) : (
+            <DetailView {...props} activeSchema={getLastActiveSchema()} />
+          )}
           <div
             style={{
               display: 'flex',
@@ -84,7 +99,6 @@ const Sidebar = (props: SidebarProps) => {
             <button
               style={{
                 padding: '0.5rem',
-                color: '#fff',
                 background: '#18a0fb',
                 border: 'none',
                 borderRadius: 2,
@@ -92,7 +106,7 @@ const Sidebar = (props: SidebarProps) => {
               }}
               onClick={addSchema}
             >
-              <strong>{i18n('addNewField')}</strong>
+              <strong style={{ color: '#fff' }}>{i18n('addNewField')}</strong>
             </button>
           </div>
         </div>

package/src/components/Designer/index.tsx

@@ -7,7 +7,6 @@ import { I18nContext } from '../../contexts';
 import {
   uuid,
   set,
-  arrayMove,
   cloneDeep,
   initShortCuts,
   destroyShortCuts,
@@ -123,12 +122,12 @@ const TemplateEditor = ({
     };
     const timeTavel = (mode: 'undo' | 'redo') => {
       const isUndo = mode === 'undo';
-      if ((isUndo ? past : future).current.length <= 0) return;
+      const stack = isUndo ? past : future;
+      if (stack.current.length <= 0) return;
       (isUndo ? future : past).current.push(cloneDeep(schemasList[pageCursor]));
       const s = cloneDeep(schemasList);
-      s[pageCursor] = (isUndo ? past : future).current.pop()!;
+      s[pageCursor] = stack.current.pop()!;
       setSchemasList(s);
-      onEditEnd();
     };
     initShortCuts({
       move: (command, isShift) => {
@@ -168,6 +167,7 @@ const TemplateEditor = ({
       save: () => onSaveTemplate && onSaveTemplate(modifiedTemplate),
       remove: () => removeSchemas(getActiveSchemas().map((s) => s.id)),
       esc: onEditEnd,
+      selectAll: () => onEdit(schemasList[pageCursor].map((s) => document.getElementById(s.id)!)),
     });
   }, [
     activeElements,
@@ -216,24 +216,14 @@ const TemplateEditor = ({
     setTimeout(() => onEdit([document.getElementById(s.id)!]));
   };
 
-  const onSortEnd = (arg: { oldIndex: number; newIndex: number }) => {
-    const movedSchema = arrayMove(cloneDeep(schemasList[pageCursor]), arg.oldIndex, arg.newIndex);
-    commitSchemas(movedSchema);
+  const onSortEnd = (sortedSchemas: SchemaForUI[]) => {
+    commitSchemas(sortedSchemas);
   };
 
   const onChangeHoveringSchemaId = (id: string | null) => {
     setHoveringSchemaId(id);
   };
 
-  const getLastActiveSchema = () => {
-    if (activeElements.length === 0) return getInitialSchema();
-    const last = activeElements[activeElements.length - 1];
-
-    return schemasList[pageCursor].find((s) => s.id === last.id) || getInitialSchema();
-  };
-
-  const activeSchema = getLastActiveSchema();
-
   if (error) {
     return <Error size={size} error={error} />;
   }
@@ -241,22 +231,18 @@ const TemplateEditor = ({
   return (
     <Root ref={rootRef} size={size} scale={scale}>
       <Sidebar
-        scale={scale}
         hoveringSchemaId={hoveringSchemaId}
         onChangeHoveringSchemaId={onChangeHoveringSchemaId}
         height={mainRef.current ? mainRef.current.scrollHeight : 0}
         size={size}
         pageSize={pageSizes[pageCursor]}
-        activeElement={activeElements[activeElements.length - 1]}
+        activeElements={activeElements}
         schemas={schemasList[pageCursor]}
-        activeSchema={activeSchema}
         changeSchemas={changeSchemas}
         onSortEnd={onSortEnd}
         onEdit={(id: string) => {
           const editingElem = document.getElementById(id);
-          if (editingElem) {
-            onEdit([editingElem]);
-          }
+          editingElem && onEdit([editingElem]);
         }}
         onEditEnd={onEditEnd}
         addSchema={addSchema}

package/src/components/Error.tsx

@@ -17,13 +17,13 @@ const Error = ({ size, error }: { size: Size; error: Error }) => {
         ...size,
       }}
     >
-      <p style={{ color: '#fff', textAlign: 'center' }}>
+      <span style={{ color: '#fff', textAlign: 'center' }}>
         <span style={{ fontSize: 'large', fontWeight: 'bold', borderBottom: '1px solid #fff' }}>
           ERROR: {i18n('errorOccurred')}
         </span>
         <br />
         <span style={{ fontSize: 'small' }}>*{error.message}</span>
-      </p>
+      </span>
     </div>
   );
 };

package/src/components/Paper.tsx

@@ -42,6 +42,16 @@ const Paper = (porps: {
                 paperRefs.current[paperIndex] = e;
               }
             }}
+            onClick={(e) => {
+              if (
+                e.currentTarget === e.target &&
+                document &&
+                document.hasFocus() &&
+                document.activeElement instanceof HTMLElement
+              ) {
+                document.activeElement.blur();
+              }
+            }}
             style={{
               fontFamily: `'${getFallbackFontName(font)}'`,
               margin: `${RULER_HEIGHT * scale}px auto`,

package/src/components/Preview/index.tsx

@@ -80,7 +80,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
         backgrounds={backgrounds}
         renderSchema={({ schema, index }) => {
           const { key } = schema;
-          const data = input[key] || '';
+          const data = (input && input[key]) || '';
           return (
             <SchemaUI
               key={schema.id}