@pdfme/ui 1.0.0-beta.8 → 1.0.1

package/src/components/Schemas/BarcodeSchema.tsx

@@ -41,7 +41,7 @@ const SampleBarcode = ({ schema }: { schema: BarcodeSchema }) => (
 
 const ErrorBarcode = () => (
   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-    <p
+    <span
       style={{
         color: 'white',
         background: 'red',
@@ -52,17 +52,23 @@ const ErrorBarcode = () => (
       }}
     >
       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 = (
@@ -95,6 +101,7 @@ const BarcodeSchemaUI = (
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        fontFamily: "'Open Sans', sans-serif",
       }}
     >
       {editable ? (
@@ -111,14 +118,7 @@ const BarcodeSchemaUI = (
           <span>{value}</span>
         </div>
       )}
-
-      {value ? (
-        <ErrorOrSampleBarcode value={value} schema={schema} />
-      ) : editable ? (
-        <SampleBarcode schema={schema} />
-      ) : (
-        <ErrorBarcode />
-      )}
+      <BarcodePreview value={value} schema={schema} />
     </div>
   );
 };

package/src/components/Schemas/TextSchema.tsx

@@ -17,19 +17,22 @@ const TextSchemaUI = (
   ref: Ref<HTMLTextAreaElement>
 ) => {
   const style: React.CSSProperties = {
+    padding: 0,
     resize: 'none',
+    position: 'absolute',
     fontFamily: schema.fontName ?? 'inherit',
     height: schema.height * ZOOM,
-    width: schema.width * ZOOM,
+    // Increase the width by 1 point. (0.75 pixels)
+    width: (schema.width + (schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING) * 0.75) * ZOOM,
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
     fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-    fontFeatureSettings: `"palt"`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     whiteSpace: 'pre-line',
     wordBreak: 'break-all',
     background: 'transparent',
     border: 'none',
+    outline: 'none',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
   };
 

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;
     }
@@ -351,6 +352,7 @@ export const templateSchemas2SchemasList = async (_template: Template) => {
 
 export const fmtTemplate = (template: Template, schemasList: SchemaForUI[][]): Template => {
   const schemaAddedTemplate: Template = {
+    ...template,
     schemas: cloneDeep(schemasList).map((schema) =>
       schema.reduce((acc, cur) => {
         const k = cur.key;
@@ -503,7 +505,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;

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

@@ -1,202 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
-import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
-import { I18nContext } from '../../../contexts';
-import Divider from '../../Divider';
-import dragIcon from '../../../assets/icons/drag.svg';
-import warningIcon from '../../../assets/icons/warning.svg';
-import { SidebarProps } from '.';
-
-const isTouchable = () => true;
-
-const DragHandle = SortableHandle(() => (
-  <button style={{ padding: 0, background: 'none', border: 'none', display: 'flex' }}>
-    <img style={{ cursor: 'grab' }} src={dragIcon} width={15} alt="Drag icon" />
-  </button>
-));
-
-const SortableItem = SortableElement(
-  (props: { schemas: SchemaForUI[]; schema: SchemaForUI; onEdit: (id: string) => void }) => {
-    const { schemas, schema, onEdit } = props;
-    const i18n = useContext(I18nContext);
-
-    const sc = schema;
-    let status: '' | 'is-warning' | 'is-danger' = '';
-    if (!sc.key) {
-      status = 'is-warning';
-    } else if (schemas.find((s) => sc.key && s.key === sc.key && s.id !== sc.id)) {
-      status = 'is-danger';
-    }
-
-    const touchable = isTouchable();
-
-    const getTitle = () => {
-      if (status === 'is-warning') {
-        return i18n('plsInputName');
-      }
-      if (status === 'is-danger') {
-        return i18n('fieldMustUniq');
-      }
-
-      return i18n('edit');
-    };
-
-    return (
-      <div
-        key={sc.id}
-        style={{
-          paddingLeft: 5,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <DragHandle />
-        <button
-          disabled={!touchable}
-          className={`${status}`}
-          style={{
-            padding: 5,
-            margin: 5,
-            width: '100%',
-            display: 'flex',
-            background: 'none',
-            border: 'none',
-            textAlign: 'left',
-            cursor: 'pointer',
-          }}
-          onClick={() => onEdit(sc.id)}
-          title={getTitle()}
-        >
-          <span
-            style={{
-              marginRight: '1rem',
-              width: 180,
-              color: '#333',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
-              textOverflow: 'ellipsis',
-            }}
-          >
-            {status === '' ? (
-              sc.key
-            ) : (
-              <span style={{ display: 'flex', alignItems: 'center' }}>
-                <img
-                  alt="Warning icon"
-                  src={warningIcon}
-                  width={15}
-                  style={{ marginRight: '0.5rem' }}
-                />
-                {status === 'is-warning' ? i18n('noKeyName') : sc.key}
-                {status === 'is-danger' ? i18n('notUniq') : ''}
-              </span>
-            )}
-          </span>
-        </button>
-      </div>
-    );
-  }
-);
-
-const SortableList = SortableContainer(
-  (props: {
-    scale: number;
-    schemas: SchemaForUI[];
-    onEdit: (id: string) => void;
-    size: Size;
-    hoveringSchemaId: string | null;
-    onChangeHoveringSchemaId: (id: string | null) => void;
-  }) => {
-    const { scale, schemas, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
-    const i18n = useContext(I18nContext);
-
-    return (
-      <div style={{ height: size.height - RULER_HEIGHT * ZOOM - 125, overflowY: 'auto' }}>
-        {schemas.length > 0 ? (
-          schemas.map((s, i) => (
-            <div
-              key={s.id}
-              style={{
-                border: `1px solid ${s.id === hoveringSchemaId ? '#18a0fb' : 'transparent'}`,
-                // Reasons for adapting transform
-                // https://github.com/clauderic/react-sortable-hoc/issues/386
-                width: SIDEBAR_WIDTH * scale,
-                transform: `scale(${1 - scale + 1})`,
-                transformOrigin: 'top left',
-              }}
-              onMouseEnter={() => onChangeHoveringSchemaId(s.id)}
-              onMouseLeave={() => onChangeHoveringSchemaId(null)}
-            >
-              <SortableItem
-                disabled={!isTouchable()}
-                index={i}
-                schemas={schemas}
-                schema={s}
-                onEdit={onEdit}
-              />
-            </div>
-          ))
-        ) : (
-          <p style={{ textAlign: 'center' }}>{i18n('plsAddNewField')}</p>
-        )}
-      </div>
-    );
-  }
-);
-
-const ListView = (
-  props: Pick<
-    SidebarProps,
-    | 'scale'
-    | 'schemas'
-    | 'onSortEnd'
-    | 'onEdit'
-    | 'size'
-    | 'hoveringSchemaId'
-    | 'onChangeHoveringSchemaId'
-  >
-) => {
-  const { scale, schemas, onSortEnd, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } =
-    props;
-  const i18n = useContext(I18nContext);
-  const [sorting, setSorting] = useState(false);
-
-  return (
-    <div>
-      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
-          {i18n('fieldsList')}
-        </p>
-      </div>
-      <Divider />
-      <div style={{ fontSize: '0.9rem' }}>
-        <SortableList
-          scale={scale}
-          size={size}
-          hoveringSchemaId={sorting ? null : hoveringSchemaId}
-          onChangeHoveringSchemaId={(arg) => !sorting && onChangeHoveringSchemaId(arg)}
-          updateBeforeSortStart={(node: any) => {
-            if (node.node.style) {
-              node.node.style.zIndex = '9999';
-            }
-          }}
-          useDragHandle
-          axis="y"
-          lockAxis="y"
-          schemas={schemas}
-          onSortStart={() => setSorting(true)}
-          onSortEnd={(arg) => {
-            setSorting(false);
-            onSortEnd(arg);
-          }}
-          onEdit={onEdit}
-        />
-        <Divider />
-      </div>
-    </div>
-  );
-};
-
-export default ListView;