@pdfme/ui 3.0.1 → 3.1.0-dev.1

package/src/components/UnitPager.tsx

@@ -1,34 +1,36 @@
 import React from 'react';
-import {
-  ChevronLeftIcon,
-  ChevronDoubleLeftIcon,
-  ChevronRightIcon,
-  ChevronDoubleRightIcon,
-} from '@heroicons/react/24/outline';
 import { Size } from '@pdfme/common';
+import { theme, Typography, Button } from 'antd';
+import {
+  LeftOutlined,
+  RightOutlined,
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+} from '@ant-design/icons';
+const { Text } = Typography;
+
+type UnitButtonProps = {
+  type: 'left' | 'right' | 'doubleLeft' | 'doubleRight';
+  onClick: () => void;
+  disabled: boolean;
+  textStyle: { color: string; fontSize: number; margin: number };
+};
 
-const buttonHeight = 38;
-const buttonWrapStyle: React.CSSProperties = {
-  pointerEvents: 'initial',
-  position: 'sticky',
-  zIndex: 1,
-  backgroundColor: '#777777bd',
-  borderRadius: 2,
-  padding: '0.5rem',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-around',
-  boxSizing: 'border-box',
-  width: 110,
-  height: buttonHeight,
+const icons = {
+  left: LeftOutlined,
+  right: RightOutlined,
+  doubleLeft: DoubleLeftOutlined,
+  doubleRight: DoubleRightOutlined,
 };
 
-const btnStyle: React.CSSProperties = {
-  cursor: 'pointer',
-  border: 'none',
-  background: 'none',
-  display: 'flex',
-  alignItems: 'center',
+const UnitButton: React.FC<UnitButtonProps> = ({ type, onClick, disabled, textStyle }) => {
+  const Icon = icons[type];
+
+  return (
+    <Button type="text" onClick={onClick} disabled={disabled}>
+      <Icon style={{ color: textStyle.color }} />
+    </Button>
+  );
 };
 
 type Props = {
@@ -39,7 +41,27 @@ type Props = {
 };
 
 const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
-  if (unitNum <= 1) return <></>;
+  if (unitNum <= 1) return null;
+
+  const { token } = theme.useToken();
+
+  const buttonWrapStyle: React.CSSProperties = {
+    pointerEvents: 'initial',
+    position: 'sticky',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: 40,
+    padding: token.paddingSM,
+    borderRadius: token.borderRadius,
+    backgroundColor: token.colorBgMask,
+  };
+  const textStyle = {
+    color: token.colorWhite,
+    fontSize: token.fontSize,
+    margin: token.marginXS,
+  };
 
   return (
     <div style={{ position: 'absolute', ...size }}>
@@ -48,54 +70,49 @@ const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
           position: 'sticky',
           width: '100%',
           zIndex: 1,
-          pointerEvents: 'none',
-          top: `calc(50% - ${buttonHeight / 2}px)`,
+          top: `calc(50% - ${(buttonWrapStyle.height as number) / 2}px)`,
           display: 'flex',
           alignItems: 'center',
         }}
       >
         {unitCursor > 0 && (
           <div style={{ left: '1rem', marginLeft: '1rem', ...buttonWrapStyle }}>
-            <button
-              style={{ paddingLeft: '0.5rem', ...btnStyle }}
-              disabled={unitCursor <= 0}
+            <UnitButton
+              type="doubleLeft"
               onClick={() => setUnitCursor(0)}
-            >
-              <ChevronDoubleLeftIcon width={20} height={20} color={'#fff'} />
-            </button>
-            <button
-              style={{ paddingLeft: '0.5rem', ...btnStyle }}
               disabled={unitCursor <= 0}
+              textStyle={textStyle}
+            />
+            <UnitButton
+              type="left"
               onClick={() => setUnitCursor(unitCursor - 1)}
-            >
-              <ChevronLeftIcon width={20} height={20} color={'#fff'} />
-            </button>
-            <strong style={{ color: 'white', fontSize: '0.9rem' }}>
+              disabled={unitCursor <= 0}
+              textStyle={textStyle}
+            />
+            <Text strong style={textStyle}>
               {unitCursor + 1}/{unitNum}
-            </strong>
+            </Text>
           </div>
         )}
         {unitCursor + 1 < unitNum && (
           <div
             style={{ right: '1rem', marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}
           >
-            <strong style={{ color: 'white', fontSize: '0.9rem' }}>
+            <Text strong style={textStyle}>
               {unitCursor + 1}/{unitNum}
-            </strong>
-            <button
-              style={{ paddingRight: '0.5rem', ...btnStyle }}
-              disabled={unitCursor + 1 >= unitNum}
+            </Text>
+            <UnitButton
+              type="right"
               onClick={() => setUnitCursor(unitCursor + 1)}
-            >
-              <ChevronRightIcon width={20} height={20} color={'#fff'} />
-            </button>
-            <button
-              style={{ paddingRight: '0.5rem', ...btnStyle }}
               disabled={unitCursor + 1 >= unitNum}
+              textStyle={textStyle}
+            />
+            <UnitButton
+              type="doubleRight"
               onClick={() => setUnitCursor(unitNum - 1)}
-            >
-              <ChevronDoubleRightIcon width={20} height={20} color={'#fff'} />
-            </button>
+              disabled={unitCursor + 1 >= unitNum}
+              textStyle={textStyle}
+            />
           </div>
         )}
       </div>

package/src/constants.ts

@@ -9,3 +9,5 @@ export const RULER_HEIGHT = 30;
 export const PAGE_GAP = 10;
 
 export const SIDEBAR_WIDTH = 350;
+
+export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';

package/src/contexts.ts

@@ -1,13 +1,12 @@
 import { createContext } from 'react';
-import { curriedI18n } from './i18n';
-import { DEFAULT_LANG } from './constants';
-import { getDefaultFont, Plugins } from '@pdfme/common';
+import { i18n } from './i18n';
+import { getDefaultFont, Plugins, UIOptions } from '@pdfme/common';
 import { builtInPlugins } from '@pdfme/schemas';
 
-export const I18nContext = createContext(curriedI18n(DEFAULT_LANG));
+export const I18nContext = createContext(i18n);
 
 export const FontContext = createContext(getDefaultFont());
 
 export const PluginsRegistry = createContext<Plugins>(builtInPlugins);
 
-export const OptionsContext = createContext({});
+export const OptionsContext = createContext<UIOptions>({});

package/src/helper.ts

@@ -1,8 +1,8 @@
-// TODO Update pdfjs-dist. (might be able to reduce the bundle size.)
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
 // @ts-ignore
-import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry.js';
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
-GlobalWorkerOptions.workerSrc = PDFJSWorker;
+import * as pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs';
+GlobalWorkerOptions.workerSrc = pdfWorker;
+
 import hotkeys from 'hotkeys-js';
 import {
   ZOOM,
@@ -14,7 +14,7 @@ import {
   Schema,
   Size,
 } from '@pdfme/common';
-import { RULER_HEIGHT } from './constants';
+import { RULER_HEIGHT } from './constants.js';
 
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -440,3 +440,6 @@ export const getPagesScrollTopByIndex = (
     .slice(0, index)
     .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale, 0);
 };
+
+export const getSidebarContentHeight = (sidebarHeight: number) =>
+  sidebarHeight - RULER_HEIGHT - RULER_HEIGHT / 2 - 115;

package/src/hooks.ts

@@ -1,7 +1,19 @@
 import { RefObject, useRef, useState, useCallback, useEffect } from 'react';
-import { ZOOM, Template, Size, getB64BasePdf } from '@pdfme/common';
-import { pdf2Pngs, getPdfPageSizes, b64toBlob } from './helper';
-import { RULER_HEIGHT } from './constants';
+import { ZOOM, Template, Size, getB64BasePdf, SchemaForUI, ChangeSchemas } from '@pdfme/common';
+
+import {
+  fmtTemplate,
+  uuid,
+  cloneDeep,
+  getUniqSchemaKey,
+  moveCommandToChangeSchemasArg,
+  pdf2Pngs,
+  getPdfPageSizes,
+  b64toBlob,
+  initShortCuts,
+  destroyShortCuts,
+} from './helper.js';
+import { RULER_HEIGHT } from './constants.js';
 
 export const usePrevious = <T>(value: T) => {
   const ref = useRef<T | null>(null);
@@ -115,3 +127,124 @@ export const useMountStatus = () => {
 
   return isMounted;
 };
+
+interface UseInitEventsParams {
+  pageCursor: number;
+  pageSizes: Size[];
+  activeElements: HTMLElement[];
+  template: Template;
+  schemasList: SchemaForUI[][];
+  changeSchemas: ChangeSchemas;
+  commitSchemas: (newSchemas: SchemaForUI[]) => void;
+  removeSchemas: (ids: string[]) => void;
+  onSaveTemplate: (t: Template) => void;
+  past: React.MutableRefObject<SchemaForUI[][]>;
+  future: React.MutableRefObject<SchemaForUI[][]>;
+  setSchemasList: React.Dispatch<React.SetStateAction<SchemaForUI[][]>>;
+  onEdit: (targets: HTMLElement[]) => void;
+  onEditEnd: () => void;
+}
+
+export const useInitEvents = ({
+  pageCursor,
+  pageSizes,
+  activeElements,
+  template,
+  schemasList,
+  changeSchemas,
+  commitSchemas,
+  removeSchemas,
+  onSaveTemplate,
+  past,
+  future,
+  setSchemasList,
+  onEdit,
+  onEditEnd,
+}: UseInitEventsParams) => {
+  const copiedSchemas = useRef<SchemaForUI[] | null>(null);
+
+  const modifiedTemplate = fmtTemplate(template, schemasList);
+
+  const initEvents = useCallback(() => {
+    const getActiveSchemas = () => {
+      const ids = activeElements.map((ae) => ae.id);
+
+      return schemasList[pageCursor].filter((s) => ids.includes(s.id));
+    };
+    const timeTravel = (mode: 'undo' | 'redo') => {
+      const isUndo = mode === 'undo';
+      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] = stack.current.pop()!;
+      setSchemasList(s);
+    };
+    initShortCuts({
+      move: (command, isShift) => {
+        const pageSize = pageSizes[pageCursor];
+        const activeSchemas = getActiveSchemas();
+        const arg = moveCommandToChangeSchemasArg({ command, activeSchemas, pageSize, isShift });
+        changeSchemas(arg);
+      },
+
+      copy: () => {
+        const activeSchemas = getActiveSchemas();
+        if (activeSchemas.length === 0) return;
+        copiedSchemas.current = activeSchemas;
+      },
+      paste: () => {
+        if (!copiedSchemas.current || copiedSchemas.current.length === 0) return;
+        const schema = schemasList[pageCursor];
+        const stackUniqSchemaKeys: string[] = [];
+        const pasteSchemas = copiedSchemas.current.map((cs) => {
+          const id = uuid();
+          const key = getUniqSchemaKey({ copiedSchemaKey: cs.key, schema, stackUniqSchemaKeys });
+          const { height, width, position: p } = cs;
+          const ps = pageSizes[pageCursor];
+          const position = {
+            x: p.x + 10 > ps.width - width ? ps.width - width : p.x + 10,
+            y: p.y + 10 > ps.height - height ? ps.height - height : p.y + 10,
+          };
+
+          return Object.assign(cloneDeep(cs), { id, key, position });
+        });
+        commitSchemas(schemasList[pageCursor].concat(pasteSchemas));
+        onEdit(pasteSchemas.map((s) => document.getElementById(s.id)!));
+        copiedSchemas.current = pasteSchemas;
+      },
+      redo: () => timeTravel('redo'),
+      undo: () => timeTravel('undo'),
+      save: () => onSaveTemplate && onSaveTemplate(modifiedTemplate),
+      remove: () => removeSchemas(getActiveSchemas().map((s) => s.id)),
+      esc: onEditEnd,
+      selectAll: () => onEdit(schemasList[pageCursor].map((s) => document.getElementById(s.id)!)),
+    });
+  }, [
+    activeElements,
+    pageCursor,
+    pageSizes,
+    changeSchemas,
+    commitSchemas,
+    schemasList,
+    onSaveTemplate,
+    modifiedTemplate,
+    removeSchemas,
+    past,
+    future,
+    setSchemasList,
+    copiedSchemas,
+    onEdit,
+    onEditEnd,
+  ]);
+
+  const destroyEvents = useCallback(() => {
+    destroyShortCuts();
+  }, []);
+
+  useEffect(() => {
+    initEvents();
+
+    return destroyEvents;
+  }, [initEvents, destroyEvents]);
+};

package/src/i18n.ts

@@ -1,13 +1,14 @@
-import { Lang } from '@pdfme/common';
+import type { Lang, Dict } from '@pdfme/common';
+import { DEFAULT_LANG } from './constants.js';
 
-type DictEn = typeof dictEn;
-
-const dictEn = {
+const dictEn: { [key in keyof Dict]: string } = {
   cancel: 'Cancel',
   field: 'field',
   fieldName: 'Name',
-  require: 'Required',
-  uniq: 'Unique',
+  align: 'Align',
+  width: 'Width',
+  height: 'Height',
+  rotate: 'Rotate',
   edit: 'Edit',
   plsInputName: 'Please input name',
   fieldMustUniq: 'Name of field is not unique',
@@ -22,17 +23,37 @@ const dictEn = {
     'Cannot commit the change because the number of items has been changed.',
   commitBulkUpdateFieldName: 'Commit Changes',
   bulkUpdateFieldName: 'Bulk update field names',
-  barColor: 'Bar Color',
-  textColor: 'Text Color',
-  bgColor: 'Background Color',
+  'schemas.textColor': 'Text Color',
+  'schemas.bgColor': 'Background Color',
+  'schemas.horizontal': 'Horizontal',
+  'schemas.vertical': 'Vertical',
+  'schemas.left': 'Left',
+  'schemas.center': 'Center',
+  'schemas.right': 'Right',
+  'schemas.top': 'Top',
+  'schemas.middle': 'Middle',
+  'schemas.bottom': 'Bottom',
+  'schemas.text.fontName': 'Font Name',
+  'schemas.text.size': 'Size',
+  'schemas.text.spacing': 'Spacing',
+  'schemas.text.textAlign': 'Text Align',
+  'schemas.text.verticalAlign': 'Vertical Align',
+  'schemas.text.lineHeight': 'Line Height',
+  'schemas.text.min': 'Min',
+  'schemas.text.max': 'Max',
+  'schemas.text.fit': 'Fit',
+  'schemas.text.dynamicFontSize': 'Dynamic Font Size',
+  'schemas.barcodes.barColor': 'Bar Color',
 };
 
-const dictJa: { [key in keyof DictEn]: string } = {
+const dictJa: { [key in keyof Dict]: string } = {
   cancel: 'キャンセル',
   field: '入力項目',
   fieldName: '項目名',
-  require: '必須',
-  uniq: '他の項目名と同一不可',
+  align: '整列',
+  width: '幅',
+  height: '高さ',
+  rotate: '回転',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
   fieldMustUniq: '他の入力項目名と被っています',
@@ -46,17 +67,37 @@ const dictJa: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',
   bulkUpdateFieldName: '項目名を一括変更',
-  barColor: 'バーの色',
-  textColor: 'テキストの色',
-  bgColor: '背景色',
+  'schemas.textColor': 'テキストの色',
+  'schemas.bgColor': '背景色',
+  'schemas.horizontal': '水平',
+  'schemas.vertical': '垂直',
+  'schemas.left': '左',
+  'schemas.center': '中央',
+  'schemas.right': '右',
+  'schemas.top': '上',
+  'schemas.middle': '中間',
+  'schemas.bottom': '下',
+  'schemas.text.fontName': 'フォント名',
+  'schemas.text.size': 'サイズ',
+  'schemas.text.spacing': '間隔',
+  'schemas.text.textAlign': 'テキストの揃え',
+  'schemas.text.verticalAlign': '垂直方向の揃え',
+  'schemas.text.lineHeight': '行の高さ',
+  'schemas.text.min': '最小',
+  'schemas.text.max': '最大',
+  'schemas.text.fit': 'フィット',
+  'schemas.text.dynamicFontSize': '動的フォントサイズ',
+  'schemas.barcodes.barColor': 'バーの色',
 };
 
-const dictAr: { [key in keyof DictEn]: string } = {
+const dictAr: { [key in keyof Dict]: string } = {
   cancel: 'إلغاء',
   field: 'الحقل',
   fieldName: 'اسم الحقل',
-  require: 'مطلوب',
-  uniq: 'يجب أن يكون فريداً',
+  align: 'محاذاة',
+  width: 'العرض',
+  height: 'الارتفاع',
+  rotate: 'تدوير',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
   fieldMustUniq: 'يجب أن يكون الحقل فريداً',
@@ -70,17 +111,37 @@ const dictAr: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'لا يمكن تنفيذ التغيير لأنه تم تغيير عدد العناصر.',
   commitBulkUpdateFieldName: 'تنفيذ التغييرات',
   bulkUpdateFieldName: 'تغيير الأسماء',
-  barColor: 'لون الشريط',
-  textColor: 'لون الخط',
-  bgColor: 'لون الخلفية',
+  'schemas.textColor': 'لون الخط',
+  'schemas.bgColor': 'لون الخلفية',
+  'schemas.horizontal': 'أفقي',
+  'schemas.vertical': 'عمودي',
+  'schemas.left': 'يسار',
+  'schemas.center': 'مركز',
+  'schemas.right': 'يمين',
+  'schemas.top': 'أعلى',
+  'schemas.middle': 'وسط',
+  'schemas.bottom': 'أسفل',
+  'schemas.text.fontName': 'اسم الخط',
+  'schemas.text.size': 'الحجم',
+  'schemas.text.spacing': 'التباعد',
+  'schemas.text.textAlign': 'محاذاة النص',
+  'schemas.text.verticalAlign': 'محاذاة عمودية',
+  'schemas.text.lineHeight': 'ارتفاع السطر',
+  'schemas.text.min': 'الحد الأدنى',
+  'schemas.text.max': 'الحد الأقصى',
+  'schemas.text.fit': 'ملاءمة',
+  'schemas.text.dynamicFontSize': 'حجم الخط الديناميكي',
+  'schemas.barcodes.barColor': 'لون الشريط',
 };
 
-const dictTh: { [key in keyof DictEn]: string } = {
+const dictTh: { [key in keyof Dict]: string } = {
   cancel: 'ยกเลิก',
   field: 'ฟิลด์',
   fieldName: 'ชื่อฟิลด์',
-  require: 'จำเป็น',
-  uniq: 'ต้องไม่ซ้ำกัน',
+  align: 'จัดเรียง',
+  width: 'ความกว้าง',
+  height: 'ความสูง',
+  rotate: 'หมุน',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
   fieldMustUniq: 'ชื่อฟิลด์ต้องไม่ซ้ำกัน',
@@ -94,17 +155,37 @@ const dictTh: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'ไม่สามารถยืนยันการแก้ไขได้เนื่องจากจำนวนรายการมีการเปลี่ยนแปลง',
   commitBulkUpdateFieldName: 'ยืนยันการแก้ไข',
   bulkUpdateFieldName: 'แก้ไขชื่อฟิลด์เป็นชุด',
-  barColor: 'สีบาร์',
-  textColor: 'สีข้อความ',
-  bgColor: 'สีพื้นหลัง',
+  'schemas.textColor': 'สีข้อความ',
+  'schemas.bgColor': 'สีพื้นหลัง',
+  'schemas.horizontal': 'แนวนอน',
+  'schemas.vertical': 'แนวตั้ง',
+  'schemas.left': 'ซ้าย',
+  'schemas.center': 'ตรงกลาง',
+  'schemas.right': 'ขวา',
+  'schemas.top': 'ด้านบน',
+  'schemas.middle': 'ตรงกลาง',
+  'schemas.bottom': 'ด้านล่าง',
+  'schemas.text.fontName': 'ชื่อแบบอักษร',
+  'schemas.text.size': 'ขนาด',
+  'schemas.text.spacing': 'ระยะห่าง',
+  'schemas.text.textAlign': 'จัดแนวข้อความ',
+  'schemas.text.verticalAlign': 'จัดแนวแนวตั้ง',
+  'schemas.text.lineHeight': 'ความสูงของบรรทัด',
+  'schemas.text.min': 'ต่ำสุด',
+  'schemas.text.max': 'สูงสุด',
+  'schemas.text.fit': 'พอดี',
+  'schemas.text.dynamicFontSize': 'ขนาดตัวอักษรแบบไดนามิก',
+  'schemas.barcodes.barColor': 'สีบาร์',
 };
 
-const dictIt: { [key in keyof DictEn]: string } = {
+const dictIt: { [key in keyof Dict]: string } = {
   cancel: 'Annulla',
   field: 'Campo',
   fieldName: 'Nome',
-  require: 'Richiesto',
-  uniq: 'Univoco',
+  align: 'Allinea',
+  width: 'Larghezza',
+  height: 'Altezza',
+  rotate: 'Ruota',
   edit: 'Modifica',
   plsInputName: 'Inserisci il nome per favore',
   fieldMustUniq: 'Il nome del campo non è univoco',
@@ -119,17 +200,37 @@ const dictIt: { [key in keyof DictEn]: string } = {
     'Non è possibile salvare le modifiche perché il numero di elementi è cambiato.',
   commitBulkUpdateFieldName: 'Salva cambiamenti',
   bulkUpdateFieldName: 'Modifica nomi campi in blocco',
-  barColor: 'Colore barra',
-  textColor: 'Colore testo',
-  bgColor: 'Colore sfondo',
+  'schemas.textColor': 'Colore testo',
+  'schemas.bgColor': 'Colore sfondo',
+  'schemas.horizontal': 'Orizzontale',
+  'schemas.vertical': 'Verticale',
+  'schemas.left': 'Sinistra',
+  'schemas.center': 'Centro',
+  'schemas.right': 'Destra',
+  'schemas.top': 'Sopra',
+  'schemas.middle': 'Medio',
+  'schemas.bottom': 'Sotto',
+  'schemas.text.fontName': 'Nome del font',
+  'schemas.text.size': 'Dimensione',
+  'schemas.text.spacing': 'Spaziatura',
+  'schemas.text.textAlign': 'Allineamento testo',
+  'schemas.text.verticalAlign': 'Allineamento verticale',
+  'schemas.text.lineHeight': 'Altezza della linea',
+  'schemas.text.min': 'Minimo',
+  'schemas.text.max': 'Massimo',
+  'schemas.text.fit': 'Adatta',
+  'schemas.text.dynamicFontSize': 'Dimensione font dinamica',
+  'schemas.barcodes.barColor': 'Colore barra',
 };
 
-const dictPl: { [key in keyof DictEn]: string } = {
+const dictPl: { [key in keyof Dict]: string } = {
   cancel: 'Anuluj',
   field: 'pole',
   fieldName: 'Klucz pola',
-  require: 'wymagany',
-  uniq: 'unikalny',
+  align: 'Wyrównanie',
+  width: 'Szerokość',
+  height: 'Wysokość',
+  rotate: 'Obrót',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',
   fieldMustUniq: 'Klucz pola nie jest unikalny',
@@ -143,30 +244,38 @@ const dictPl: { [key in keyof DictEn]: string } = {
   errorBulkUpdateFieldName: 'Nie można wprowadzić zmian ponieważ liczba elementów uległa zmianie.',
   commitBulkUpdateFieldName: 'Zaakceptuj zmiany',
   bulkUpdateFieldName: 'Masowo aktualizuj klucze pól',
-  barColor: 'Kolor paska',
-  textColor: 'Kolor tekstu',
-  bgColor: 'Kolor tła',
+  'schemas.textColor': 'Kolor tekstu',
+  'schemas.bgColor': 'Kolor tła',
+  'schemas.horizontal': 'Poziomo',
+  'schemas.vertical': 'Pionowo',
+  'schemas.left': 'Lewo',
+  'schemas.center': 'Centrum',
+  'schemas.right': 'Prawo',
+  'schemas.top': 'Góra',
+  'schemas.middle': 'Środek',
+  'schemas.bottom': 'Dół',
+  'schemas.text.fontName': 'Nazwa czcionki',
+  'schemas.text.size': 'Rozmiar',
+  'schemas.text.spacing': 'Odstępy',
+  'schemas.text.textAlign': 'Wyrównanie tekstu',
+  'schemas.text.verticalAlign': 'Wyrównanie pionowe',
+  'schemas.text.lineHeight': 'Wysokość linii',
+  'schemas.text.min': 'Minimum',
+  'schemas.text.max': 'Maksimum',
+  'schemas.text.fit': 'Dopasowanie',
+  'schemas.text.dynamicFontSize': 'Dynamiczny rozmiar czcionki',
+  'schemas.barcodes.barColor': 'Kolor paska',
 };
 
-const i18n = (lang: Lang, key: keyof DictEn) => {
-  switch (lang) {
-    case 'pl':
-      return dictPl[key];
-    case 'th':
-      return dictTh[key];
-
-    case 'ar':
-      return dictAr[key];
-
-    case 'ja':
-      return dictJa[key];
-
-    case 'it':
-      return dictIt[key];
-
-    default:
-      return dictEn[key];
-  }
+const dictionaries: { [key in Lang]: Dict } = {
+  en: dictEn,
+  ja: dictJa,
+  ar: dictAr,
+  th: dictTh,
+  it: dictIt,
+  pl: dictPl,
 };
 
-export const curriedI18n = (lang: Lang) => (key: keyof DictEn) => i18n(lang, key);
+export const getDict = (lang: Lang): Dict => dictionaries[lang] || dictionaries[DEFAULT_LANG];
+
+export const i18n = (key: keyof Dict, dict?: Dict) => (dict || getDict(DEFAULT_LANG))[key];