@pdfme/ui 3.0.1 → 3.1.0-dev.1

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

@@ -1,10 +1,16 @@
 import React, { useContext, useState } from 'react';
 import type { SidebarProps } from '../../../../types';
-import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants';
+import { SIDEBAR_WIDTH } from '../../../../constants';
 import { I18nContext } from '../../../../contexts';
-import Divider from '../../../Divider';
+import { getSidebarContentHeight } from '../../../../helper';
+import { theme, Input, Typography, Divider, Button } from 'antd';
 import SelectableSortableContainer from './SelectableSortableContainer';
 
+const { Text } = Typography;
+const { TextArea } = Input;
+
+const headHeight = 40;
+
 const ListView = (
   props: Pick<
     SidebarProps,
@@ -26,89 +32,88 @@ const ListView = (
     onChangeHoveringSchemaId,
     changeSchemas,
   } = props;
+  const { token } = theme.useToken();
   const i18n = useContext(I18nContext);
   const [isBulkUpdateFieldNamesMode, setIsBulkUpdateFieldNamesMode] = useState(false);
   const [fieldNamesValue, setFieldNamesValue] = useState('');
-  const height = size.height - RULER_HEIGHT - RULER_HEIGHT / 2 - 145;
+  const height = getSidebarContentHeight(size.height);
+
+  const commitBulk = () => {
+    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);
+    }
+  };
+
+  const startBulk = () => {
+    setFieldNamesValue(schemas.map((s) => s.key).join('\n'));
+    setIsBulkUpdateFieldNamesMode(true);
+  };
+
   return (
     <div>
-      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+      <div style={{ height: headHeight, display: 'flex', alignItems: 'center' }}>
+        <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {i18n('fieldsList')}
-        </span>
+        </Text>
       </div>
-      <Divider />
-      {isBulkUpdateFieldNamesMode ? (
-        <div>
-          <textarea
+      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
+      <div style={{ height: height - headHeight }}>
+        {isBulkUpdateFieldNamesMode ? (
+          <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',
+              paddingLeft: 30,
+              height: height - headHeight,
+              width: SIDEBAR_WIDTH - 35,
+              lineHeight: '2.75rem',
             }}
-          ></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>
+          <SelectableSortableContainer
+            schemas={schemas}
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            onSortEnd={onSortEnd}
+            onEdit={onEdit}
+          />
         )}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            height: headHeight,
+            borderBottom: `1px solid ${token.colorSplit}`,
+          }}
+        >
+          {isBulkUpdateFieldNamesMode ? (
+            <>
+              <Button size="small" type="text" onClick={commitBulk}>
+                <u> {i18n('commitBulkUpdateFieldName')}</u>
+              </Button>
+              <span style={{ margin: '0 1rem' }}>/</span>
+              <Button size="small" type="text" onClick={() => setIsBulkUpdateFieldNamesMode(false)}>
+                <u> {i18n('cancel')}</u>
+              </Button>
+            </>
+          ) : (
+            <Button size="small" type="text" onClick={startBulk}>
+              <u> {i18n('bulkUpdateFieldName')}</u>
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );

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

@@ -1,14 +1,16 @@
 import React, { useContext } from 'react';
+import { theme, Button } from 'antd';
 import type { SidebarProps } from '../../../types';
 import { SIDEBAR_WIDTH } from '../../../constants';
 import { I18nContext } from '../../../contexts';
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
 import ListView from './ListView/index';
 import DetailView from './DetailView/index';
 
 const Sidebar = (props: SidebarProps) => {
   const { sidebarOpen, setSidebarOpen, activeElements, schemas, addSchema } = props;
 
+  const { token } = theme.useToken();
   const i18n = useContext(I18nContext);
   const getActiveSchemas = () =>
     schemas.filter((s) => activeElements.map((ae) => ae.id).includes(s.id));
@@ -25,33 +27,22 @@ const Sidebar = (props: SidebarProps) => {
         zIndex: 1,
         height: '100%',
         width: sidebarOpen ? SIDEBAR_WIDTH : 0,
-        fontSize: '1rem',
       }}
     >
       <div>
-        <button
-          type="button"
+        <Button
           style={{
             position: 'absolute',
-            top: '1.0rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            top: '1rem',
             right: '1rem',
             zIndex: 100,
-            border: 'none',
-            borderRadius: 2,
-            padding: '0.5rem',
-            cursor: 'pointer',
-            background: '#eee',
-            width: 30,
-            height: 30,
           }}
+          icon={sidebarOpen ? <ArrowRightOutlined /> : <ArrowLeftOutlined />}
           onClick={() => setSidebarOpen(!sidebarOpen)}
-        >
-          {sidebarOpen ? (
-            <ArrowRightIcon width={15} height={15} />
-          ) : (
-            <ArrowLeftIcon width={15} height={15} />
-          )}
-        </button>
+        />
         <div
           style={{
             width: SIDEBAR_WIDTH,
@@ -60,47 +51,32 @@ const Sidebar = (props: SidebarProps) => {
             top: 0,
             right: 0,
             position: 'absolute',
-            background: '#fffffffa',
-            color: '#333',
-            border: '1px solid #eee',
             padding: '0.7rem 1rem',
             overflowY: 'auto',
             fontFamily: "'Open Sans', sans-serif",
-            fontWeight: 400,
-            textAlign: 'left',
             boxSizing: 'border-box',
+            background: token.colorBgLayout,
           }}
         >
-          {getActiveSchemas().length === 0 ? (
-            <ListView {...props} />
-          ) : (
-            <DetailView {...props} activeSchema={getLastActiveSchema()} />
-          )}
+          <div>
+            {getActiveSchemas().length === 0 ? (
+              <ListView {...props} />
+            ) : (
+              <DetailView {...props} activeSchema={getLastActiveSchema()} />
+            )}
+          </div>
           <div
             style={{
               position: 'absolute',
-              width: '100%',
-              left: 0,
-              bottom: '1rem',
-              paddingTop: '1rem',
+              bottom: '1.5rem',
+              marginTop: '1rem',
+              left: '50%',
+              transform: 'translateX(-50%)',
             }}
           >
-            <div style={{ marginBottom: '1rem', borderBottom: '1px solid #e5e5e5' }} />
-            <button
-              type="button"
-              style={{
-                padding: '0.5rem',
-                background: '#18a0fb',
-                border: 'none',
-                borderRadius: 2,
-                cursor: 'pointer',
-                margin: '0 auto',
-                display: 'block',
-              }}
-              onClick={addSchema}
-            >
-              <strong style={{ color: '#fff' }}>{i18n('addNewField')}</strong>
-            </button>
+            <Button type="primary" style={{ fontWeight: 600 }} onClick={addSchema}>
+              {i18n('addNewField')}
+            </Button>
           </div>
         </div>
       </div>

package/src/components/Designer/index.tsx

@@ -1,25 +1,30 @@
 import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
-import { ZOOM, Template, Schema, SchemaForUI, ChangeSchemas, DesignerProps, Size, Plugin } from '@pdfme/common';
+import {
+  ZOOM,
+  Template,
+  Schema,
+  SchemaForUI,
+  ChangeSchemas,
+  DesignerProps,
+  Size,
+  Plugin,
+} from '@pdfme/common';
 import Sidebar from './Sidebar/index';
 import Canvas from './Canvas/index';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../constants';
 import { I18nContext, PluginsRegistry } from '../../contexts';
 import {
+  fmtTemplate,
   uuid,
   set,
   cloneDeep,
-  initShortCuts,
-  destroyShortCuts,
   templateSchemas2SchemasList,
-  fmtTemplate,
-  getUniqSchemaKey,
-  moveCommandToChangeSchemasArg,
   getPagesScrollTopByIndex,
 } from '../../helper';
-import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
+import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks';
 import Root from '../Root';
 import ErrorScreen from '../ErrorScreen';
-import CtlBar from '../CtlBar/index';
+import CtlBar from '../CtlBar';
 
 const TemplateEditor = ({
   template,
@@ -30,7 +35,6 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   size: Size;
 } & { onChangeTemplate: (t: Template) => void }) => {
-  const copiedSchemas = useRef<SchemaForUI[] | null>(null);
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
   const mainRef = useRef<HTMLDivElement>(null);
@@ -69,8 +73,6 @@ const TemplateEditor = ({
     },
   });
 
-  const modifiedTemplate = fmtTemplate(template, schemasList);
-
   const commitSchemas = useCallback(
     (newSchemas: SchemaForUI[]) => {
       future.current = [];
@@ -119,76 +121,22 @@ const TemplateEditor = ({
     [commitSchemas, pageCursor, 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)!)),
-    });
-  }, [
+  useInitEvents({
+    pageCursor,
+    pageSizes,
     activeElements,
+    template,
+    schemasList,
     changeSchemas,
     commitSchemas,
-    modifiedTemplate,
-    pageCursor,
-    pageSizes,
     removeSchemas,
     onSaveTemplate,
-    schemasList,
-  ]);
-
-  const destroyEvents = useCallback(() => {
-    destroyShortCuts();
-  }, []);
+    past,
+    future,
+    setSchemasList,
+    onEdit,
+    onEditEnd,
+  });
 
   const updateTemplate = useCallback(async (newTemplate: Template) => {
     const sl = await templateSchemas2SchemasList(newTemplate);
@@ -204,12 +152,6 @@ const TemplateEditor = ({
     updateTemplate(template);
   }, [template, updateTemplate]);
 
-  useEffect(() => {
-    initEvents();
-
-    return destroyEvents;
-  }, [initEvents, destroyEvents]);
-
   const addSchema = () => {
     const propPanel = (Object.values(pluginsRegistry)[0] as Plugin<Schema>)?.propPanel;
 

package/src/components/ErrorScreen.tsx

@@ -1,29 +1,31 @@
 import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
 import { I18nContext } from '../contexts';
+import { BACKGROUND_COLOR } from '../constants';
+import { theme, Result } from 'antd';
 
 const ErrorScreen = ({ size, error }: { size: Size; error: Error }) => {
   const i18n = useContext(I18nContext);
+  const { token } = theme.useToken();
 
   return (
     <div
       style={{
-        position: 'relative',
-        background: 'rgb(74, 74, 74)',
-        overflow: 'auto',
         display: 'flex',
-        alignItems: 'center',
+        flexDirection: 'column',
         justifyContent: 'center',
+        background: BACKGROUND_COLOR,
         ...size,
       }}
     >
-      <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>
-      </span>
+      <div style={{ width: 300, margin: '0 auto', background: token.colorBgLayout }}>
+        <Result
+          icon={null}
+          title="ERROR"
+          subTitle={i18n('errorOccurred')}
+          extra={<span>{error.message}</span>}
+        />
+      </div>
     </div>
   );
 };

package/src/components/Preview.tsx

@@ -3,11 +3,12 @@ import type { SchemaForUI, PreviewProps, Size } from '@pdfme/common';
 import UnitPager from './UnitPager';
 import Root from './Root';
 import ErrorScreen from './ErrorScreen';
-import CtlBar from './CtlBar/index';
+import CtlBar from './CtlBar';
 import Paper from './Paper';
 import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
 import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
+import { theme } from 'antd';
 
 const Preview = ({
   template,
@@ -18,6 +19,8 @@ const Preview = ({
   onChangeInput?: (args: { index: number; value: string; key: string }) => void;
   size: Size;
 }) => {
+  const { token } = theme.useToken();
+
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
@@ -101,7 +104,7 @@ const Preview = ({
                 placeholder={template.sampledata?.[0]?.[key] ?? ''}
                 tabIndex={index + 100}
                 onChange={(value) => handleChangeInput({ key, value })}
-                outline={isForm ? '1px dashed #4af' : 'transparent'}
+                outline={isForm ? `1px dashed ${token.colorPrimary}` : 'transparent'}
                 scale={scale}
               />
             );

package/src/components/Renderer.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useContext, ReactNode, useRef } from 'react';
-import { ZOOM, UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
+import { Dict, ZOOM, UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
+import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
-import { PluginsRegistry, OptionsContext } from '../contexts';
+import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
-  'value' | 'schema' | 'onChange' | 'rootElement' | 'options'
+  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n'
 > & {
   schema: SchemaForUI;
   onChange: (value: string) => void;
@@ -44,6 +45,8 @@ const Wrapper = ({
 const Renderer = (props: RendererProps) => {
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
+  const i18n = useContext(I18nContext) as (key: keyof Dict | string) => string;
+  const { token: theme } = antdTheme.useToken();
 
   const { schema, mode, onChange, stopEditing, tabIndex, placeholder, scale } = props;
 
@@ -51,10 +54,9 @@ const Renderer = (props: RendererProps) => {
 
   useEffect(() => {
     if (ref.current && schema.type) {
-
       const render = Object.values(pluginsRegistry).find(
         (plugin) => plugin?.propPanel.defaultSchema.type === schema.type
-      )?.ui
+      )?.ui;
 
       if (!render) {
         console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found.
@@ -76,6 +78,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         tabIndex,
         placeholder,
         options,
+        theme,
+        i18n,
       });
     }
     return () => {
@@ -83,7 +87,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         ref.current.innerHTML = '';
       }
     };
-  }, [JSON.stringify(schema), mode, options, scale]);
+  }, [JSON.stringify(schema), JSON.stringify(options), mode, scale]);
 
   return (
     <Wrapper {...props}>

package/src/components/Root.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
 import { FontContext } from '../contexts';
+import { BACKGROUND_COLOR } from '../constants';
 import Spinner from './Spinner';
 
 type Props = { size: Size; scale: number; children: ReactNode };
@@ -30,14 +31,7 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   }, [font]);
 
   return (
-    <div
-      ref={ref}
-      style={{
-        position: 'relative',
-        background: 'rgb(74, 74, 74)',
-        ...size,
-      }}
-    >
+    <div ref={ref} style={{ position: 'relative', background: BACKGROUND_COLOR, ...size }}>
       <div style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
     </div>
   );

package/src/components/Spinner.tsx

@@ -1,37 +1,18 @@
 import React from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
 
 const Spinner = () => (
-  <>
-    <style>
-      {`
-      @keyframes spin {
-        0% { transform: rotate(0deg) }
-        
-        100% { transform: rotate(359deg) }
-      }
-    `}
-    </style>
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div
-        style={{
-          width: 65,
-          height: 65,
-          borderRadius: '50%',
-          border: '4px solid',
-          borderColor: '#4285f4 rgba(0,0,0,0.1) rgba(0,0,0,0.1)',
-          animation: 'spin 1s ease infinite',
-        }}
-      ></div>
-    </div>
-  </>
+  <Spin
+    style={{
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+    indicator={<LoadingOutlined style={{ fontSize: 50 }} spin />}
+  />
 );
 
 export default Spinner;