@pdfme/ui 1.0.0-beta.8 → 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

@@ -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 }}
@@ -69,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',

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/helper.ts

@@ -61,15 +61,6 @@ export const round = (number: number, precision: number) => {
   return shift(Math.round(shift(number, precision, false)), precision, true);
 };
 
-export const arrayMove = <T>(array: T[], from: number, to: number): T[] => {
-  array = array.slice();
-  const startIndex = to < 0 ? array.length + to : to;
-  const [item] = array.splice(from, 1);
-  array.splice(startIndex, 0, item);
-
-  return array;
-};
-
 export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));
 
 export const flatten = <T>(arr: T[][]): T[] => ([] as T[]).concat(...arr);
@@ -96,6 +87,8 @@ const undoWin = 'ctrl+z';
 const undoMac = 'command+z';
 const saveWin = 'ctrl+s';
 const saveMac = 'command+s';
+const selectAllWin = 'ctrl+a';
+const selectAllMac = 'command+a';
 
 const keys = [
   up,
@@ -119,6 +112,8 @@ const keys = [
   undoMac,
   saveWin,
   saveMac,
+  selectAllWin,
+  selectAllMac,
 ];
 
 export const initShortCuts = (arg: {
@@ -130,6 +125,7 @@ export const initShortCuts = (arg: {
   redo: () => void;
   undo: () => void;
   save: () => void;
+  selectAll: () => void;
 }) => {
   hotkeys(keys.join(), (e, handler) => {
     switch (handler.shortcut) {
@@ -181,6 +177,11 @@ export const initShortCuts = (arg: {
         e.preventDefault();
         arg.save();
         break;
+      case selectAllWin:
+      case selectAllMac:
+        e.preventDefault();
+        arg.selectAll();
+        break;
       default:
         break;
     }
@@ -503,7 +504,7 @@ export const moveCommandToChangeSchemasArg = (props: {
         break;
     }
 
-    return value;
+    return value > 0 ? value : 0;
   };
 
   return activeSchemas.map((as) => {

package/src/hooks.ts

@@ -105,3 +105,14 @@ export const useScrollPageCursor = ({
     };
   }, [rootRef, onScroll]);
 };
+
+export const useMountStatus = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setIsMounted(true), 500);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return isMounted;
+};

package/src/i18n.ts

@@ -4,6 +4,7 @@ import { DEFAULT_LANG } from './constants';
 type DictEn = typeof dictEn;
 
 const dictEn = {
+  cancel: 'Cancel',
   field: 'field',
   fieldName: 'Name',
   require: 'Required',
@@ -20,17 +21,20 @@ const dictEn = {
   addNewField: 'Add new field',
   editField: 'Edit Field',
   type: 'Type',
-  previewWarnMsg: 'Preview is not available on iOS devices.',
-  previewErrMsg:
-    'An error occurred during the PDF creation process. (Characters that are not in the Helvetica font are not available)',
   goToFirst: 'Go to first',
   goToPrevious: 'Back',
   goToNext: 'Next',
   goToEnd: 'Go to end',
-  errorOccurred: 'An error occurred.',
+  select: 'Select',
+  errorOccurred: 'An error occurred',
+  errorBulkUpdateFieldName:
+    'Cannot commit the change because the number of items has been changed.',
+  commitBulkUpdateFieldName: 'Commit Changes',
+  bulkUpdateFieldName: 'Bulk update field names',
 };
 
 const dictJa: { [key in keyof DictEn]: string } = {
+  cancel: 'キャンセル',
   field: '入力項目',
   fieldName: '項目名',
   require: '必須',
@@ -47,14 +51,15 @@ const dictJa: { [key in keyof DictEn]: string } = {
   addNewField: '入力項目を追加',
   editField: '入力項目を編集',
   type: 'タイプ',
-  previewWarnMsg: 'iOS端末ではプレビューができません。',
-  previewErrMsg:
-    'PDF作成処理でエラーが発生しました。お手数ですがコンタクトからお問い合わせください。',
   goToFirst: '最初に戻る',
   goToPrevious: '1つ戻る',
   goToNext: '1つ進む',
   goToEnd: '最後に進む',
+  select: '選択',
   errorOccurred: 'エラーが発生しました',
+  errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
+  commitBulkUpdateFieldName: '変更を反映',
+  bulkUpdateFieldName: '項目名を一括変更',
 };
 
 const i18n = (lang: Lang, key: keyof DictEn) => (lang === DEFAULT_LANG ? dictEn[key] : dictJa[key]);

package/dist/types/components/Designer/Sidebar/ListView.d.ts

@@ -1,3 +0,0 @@
-import { SidebarProps } from '.';
-declare const ListView: (props: Pick<SidebarProps, 'scale' | 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
-export default ListView;