@pdfme/ui 1.0.0-beta.7 → 1.0.0

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

@@ -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,10 +51,11 @@ const Sidebar = (props: SidebarProps) => {
             right: '0.5rem',
             zIndex: 100,
             border: 'none',
-            borderRadius: 3,
+            borderRadius: 2,
             padding: '0.5rem',
             cursor: 'pointer',
             background: '#eee',
+            width: 30,
           }}
           onClick={() => setOpen(!open)}
         >
@@ -52,7 +63,7 @@ const Sidebar = (props: SidebarProps) => {
         </button>
         <div
           style={{
-            width: sidebarWidth,
+            width: SIDEBAR_WIDTH,
             height: size.height - RULER_HEIGHT * ZOOM,
             display: open ? 'block' : 'none',
             top,
@@ -65,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',
@@ -82,15 +99,14 @@ const Sidebar = (props: SidebarProps) => {
             <button
               style={{
                 padding: '0.5rem',
-                color: '#fff',
                 background: '#18a0fb',
                 border: 'none',
-                borderRadius: 3,
+                borderRadius: 2,
                 cursor: 'pointer',
               }}
               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,
@@ -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/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,14 +42,22 @@ 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`,
               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 && 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,
         }}

package/src/components/Schemas/BarcodeSchema.tsx

@@ -13,8 +13,6 @@ import qrcode from '../../assets/barcodeExamples/qrcode.png';
 import upca from '../../assets/barcodeExamples/upca.png';
 import upce from '../../assets/barcodeExamples/upce.png';
 
-type Props = SchemaUIProps & { schema: BarcodeSchema };
-
 const barcodeExampleImageObj: { [key: string]: string } = {
   qrcode,
   japanpost,
@@ -43,27 +41,35 @@ const SampleBarcode = ({ schema }: { schema: BarcodeSchema }) => (
 
 const ErrorBarcode = () => (
   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-    <p
+    <span
       style={{
         color: 'white',
         background: 'red',
         padding: '0.25rem',
         fontSize: '12pt',
         fontWeight: 'bold',
-        borderRadius: 3,
+        borderRadius: 2,
       }}
     >
       ERROR
-    </p>
+    </span>
   </div>
 );
 
-const ErrorOrSampleBarcode = ({ schema, value }: { schema: BarcodeSchema; value: string }) =>
-  validateBarcodeInput(schema.type as BarCodeType, value) ? (
+const BarcodePreview = (props: { schema: BarcodeSchema; value: string }) => {
+  const { schema, value } = props;
+
+  if (value.length === 0) {
+    return null;
+  }
+
+  return validateBarcodeInput(schema.type as BarCodeType, value) ? (
     <SampleBarcode schema={schema} />
   ) : (
     <ErrorBarcode />
   );
+};
+type Props = SchemaUIProps & { schema: BarcodeSchema };
 
 const BarcodeSchemaUI = (
   { schema, editable, placeholder, tabIndex, onChange }: Props,
@@ -71,6 +77,22 @@ const BarcodeSchemaUI = (
 ) => {
   const value = schema.data;
 
+  const style: React.CSSProperties = {
+    textAlign: 'center',
+    position: 'absolute',
+    zIndex: 2,
+    fontSize: '1rem',
+    color: '#000',
+    height: Number(schema.height) * ZOOM,
+    width: Number(schema.width) * ZOOM,
+    background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'auto',
+  };
+
   return (
     <div
       style={{
@@ -79,31 +101,24 @@ const BarcodeSchemaUI = (
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        fontFamily: "'Open Sans', sans-serif",
       }}
     >
-      <input
-        ref={ref}
-        disabled={!editable}
-        tabIndex={tabIndex}
-        placeholder={placeholder}
-        style={{
-          textAlign: 'center',
-          position: 'absolute',
-          zIndex: 2,
-          fontSize: 'inherit',
-          height: Number(schema.height) * ZOOM,
-          width: Number(schema.width) * ZOOM,
-          background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
-          border: 'none',
-        }}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      />
-      {value ? (
-        <ErrorOrSampleBarcode value={value} schema={schema} />
+      {editable ? (
+        <input
+          ref={ref}
+          tabIndex={tabIndex}
+          placeholder={placeholder}
+          style={style}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
       ) : (
-        <SampleBarcode schema={schema} />
+        <div style={style}>
+          <span>{value}</span>
+        </div>
       )}
+      <BarcodePreview value={value} schema={schema} />
     </div>
   );
 };