@pdfme/ui 1.0.0-beta.5 → 1.0.0-beta.9

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,118 @@
+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' }}>
+        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+          {i18n('fieldsList')}
+        </p>
+      </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.25rem',
+              background: 'transparent',
+              margin: 0,
+              padding: 0,
+              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

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { I18nContext } from '../../../contexts';
 import backIcon from '../../../assets/icons/back.svg';
 import forwardIcon from '../../../assets/icons/forward.svg';
@@ -13,10 +13,9 @@ export type SidebarProps = {
   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;
@@ -24,16 +23,27 @@ 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 sidebarWidth = 300;
   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', height, width: '100%' }}>
-      <div style={{ position: 'sticky', top, zIndex: 29 }}>
+    <div
+      style={{ position: 'absolute', right: 0, zIndex: 1, height, width: open ? SIDEBAR_WIDTH : 0 }}
+    >
+      <div style={{ position: 'sticky', top, zIndex: 1, fontSize: '1rem' }}>
         <button
           style={{
             position: 'absolute',
@@ -41,7 +51,7 @@ const Sidebar = (props: SidebarProps) => {
             right: '0.5rem',
             zIndex: 100,
             border: 'none',
-            borderRadius: 3,
+            borderRadius: 2,
             padding: '0.5rem',
             cursor: 'pointer',
             background: '#eee',
@@ -52,7 +62,7 @@ const Sidebar = (props: SidebarProps) => {
         </button>
         <div
           style={{
-            width: sidebarWidth,
+            width: SIDEBAR_WIDTH,
             height: size.height - RULER_HEIGHT * ZOOM,
             display: open ? 'block' : 'none',
             top,
@@ -67,7 +77,11 @@ const Sidebar = (props: SidebarProps) => {
             fontWeight: 400,
           }}
         >
-          {props.activeElement ? <DetailView {...props} /> : <ListView {...props} />}
+          {getActiveSchemas().length === 0 ? (
+            <ListView {...props} />
+          ) : (
+            <DetailView {...props} activeSchema={getLastActiveSchema()} />
+          )}
           <div
             style={{
               display: 'flex',
@@ -85,7 +99,7 @@ const Sidebar = (props: SidebarProps) => {
                 color: '#fff',
                 background: '#18a0fb',
                 border: 'none',
-                borderRadius: 3,
+                borderRadius: 2,
                 cursor: 'pointer',
               }}
               onClick={addSchema}

package/src/components/Designer/index.tsx

@@ -7,7 +7,6 @@ import { I18nContext } from '../../contexts';
 import {
   uuid,
   set,
-  arrayMove,
   cloneDeep,
   initShortCuts,
   destroyShortCuts,
@@ -99,11 +98,12 @@ const TemplateEditor = ({
         // Assign to reference
         set(tgt, key, value);
         if (key === 'type') {
+          const type = String(value);
           // set default value, text or barcode
-          set(tgt, 'data', value === 'text' ? 'text' : getSampleByType(String(value)));
+          set(tgt, 'data', getSampleByType(type));
           // For barcodes, adjust the height to get the correct ratio.
-          if (value !== 'text' && value !== 'image') {
-            set(tgt, 'height', getKeepRatioHeightByWidth(String(value), tgt.width));
+          if (value !== 'text') {
+            set(tgt, 'height', getKeepRatioHeightByWidth(type, tgt.width));
           }
         }
 
@@ -122,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) => {
@@ -167,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,
@@ -215,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} />;
   }
@@ -245,16 +236,13 @@ const TemplateEditor = ({
         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/Paper.tsx

@@ -47,9 +47,7 @@ const Paper = (porps: {
               margin: `${RULER_HEIGHT * scale}px auto`,
               position: 'relative',
               backgroundImage: `url(${background})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
+              backgroundSize: `${paperSize.width}px ${paperSize.height}px`,
               ...paperSize,
             }}
           >

package/src/components/Preview/Pager/Page.tsx

@@ -42,7 +42,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
           alignItems: 'center',
           justifyContent: 'center',
           background: '#777777e6',
-          borderRadius: 3,
+          borderRadius: 2,
           padding: '0.5rem',
         }}
       >

package/src/components/Preview/Pager/Unit.tsx

@@ -10,7 +10,7 @@ const buttonWrapStyle: React.CSSProperties = {
   top: '45%',
   zIndex: 1,
   backgroundColor: '#777777bd',
-  borderRadius: 3,
+  borderRadius: 2,
   padding: '0.5rem',
   display: 'flex',
   alignItems: 'center',

package/src/components/Preview/index.tsx

@@ -80,12 +80,11 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
         backgrounds={backgrounds}
         renderSchema={({ schema, index }) => {
           const { key } = schema;
-          const data = input[key] ? input[key] : '';
-
+          const data = input[key] || '';
           return (
             <SchemaUI
-              key={key}
-              schema={Object.assign(schema, { key, id: key, data })}
+              key={schema.id}
+              schema={Object.assign(schema, { data })}
               editable={editable}
               placeholder={template.sampledata ? template.sampledata[0][key] : ''}
               tabIndex={index + 100}

package/src/components/Root.tsx

@@ -29,16 +29,11 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   return (
     <div
       ref={ref}
-      style={{
-        fontFamily: 'Arial, Helvetica, sans-serif',
-        position: 'relative',
-        background: 'rgb(74, 74, 74)',
-        overflowY: 'auto',
-        ...size,
-      }}
+      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflowY: 'auto', ...size }}
     >
       <div
         style={{
+          margin: '0 auto',
           width: size.width - RULER_HEIGHT * scale,
           height: size.height - RULER_HEIGHT * scale,
         }}