@pdfme/ui 3.0.1 → 3.1.0-dev.1

package/src/Designer.tsx

@@ -1,39 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ConfigProvider, ThemeConfig } from 'antd';
-import { Template, DesignerProps, checkDesignerProps, checkTemplate, Plugins } from '@pdfme/common';
-import { builtInPlugins } from '@pdfme/schemas';
+import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
 import { BaseUIClass } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import {
-  I18nContext,
-  FontContext,
-  PluginsRegistry,
-  OptionsContext,
-} from './contexts';
+import { DESTROYED_ERR_MSG } from './constants.js';
 import DesignerComponent from './components/Designer/index';
-import { cloneDeep } from './helper';
-
-// TODO Custom Design for UI #243
-// - https://github.com/pdfme/pdfme/issues/243
-// - https://ant.design/docs/react/customize-theme
-const theme: ThemeConfig = {
-  token: {
-    fontSize: 12,
-  },
-  components: {
-    Form: {
-      itemMarginBottom: 8,
-      verticalLabelPadding: '0 0 2px',
-    },
-  },
-};
+import AppContextProvider from './components/AppContextProvider';
+import { cloneDeep } from './helper.js';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
   private onChangeTemplateCallback?: (template: Template) => void;
 
-
   constructor(props: DesignerProps) {
     super(props);
     checkDesignerProps(props);
@@ -69,32 +46,29 @@ class Designer extends BaseUIClass {
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
-      <ConfigProvider theme={theme}>
-        <I18nContext.Provider value={this.getI18n()}>
-          <FontContext.Provider value={this.getFont()}>
-            <PluginsRegistry.Provider value={this.getPluginsRegistry()}>
-              <OptionsContext.Provider value={this.getOptions()}>
-                <DesignerComponent
-                  template={this.template}
-                  onSaveTemplate={(template) => {
-                    this.template = template;
-                    if (this.onSaveTemplateCallback) {
-                      this.onSaveTemplateCallback(template);
-                    }
-                  }}
-                  onChangeTemplate={(template) => {
-                    this.template = template;
-                    if (this.onChangeTemplateCallback) {
-                      this.onChangeTemplateCallback(template);
-                    }
-                  }}
-                  size={this.size}
-                />
-              </OptionsContext.Provider>
-            </PluginsRegistry.Provider>
-          </FontContext.Provider>
-        </I18nContext.Provider>
-      </ConfigProvider>,
+      <AppContextProvider
+        lang={this.getLang()}
+        font={this.getFont()}
+        plugins={this.getPluginsRegistry()}
+        options={this.getOptions()}
+      >
+        <DesignerComponent
+          template={this.template}
+          onSaveTemplate={(template) => {
+            this.template = template;
+            if (this.onSaveTemplateCallback) {
+              this.onSaveTemplateCallback(template);
+            }
+          }}
+          onChangeTemplate={(template) => {
+            this.template = template;
+            if (this.onChangeTemplateCallback) {
+              this.onChangeTemplateCallback(template);
+            }
+          }}
+          size={this.size}
+        />
+      </AppContextProvider>,
       this.domContainer
     );
   }

package/src/Form.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from './contexts';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import AppContextProvider from './components/AppContextProvider';
 import Preview from './components/Preview';
 
 class Form extends PreviewUI {
@@ -21,27 +21,26 @@ class Form extends PreviewUI {
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
-      <I18nContext.Provider value={this.getI18n()}>
-        <FontContext.Provider value={this.getFont()}>
-          <PluginsRegistry.Provider value={this.getPluginsRegistry()}>
-            <OptionsContext.Provider value={this.getOptions()}>
-              <Preview
-                template={this.template}
-                size={this.size}
-                inputs={this.inputs}
-                onChangeInput={(arg: { index: number; value: string; key: string }) => {
-                  const { index, value, key } = arg;
-                  if (this.onChangeInputCallback) {
-                    this.onChangeInputCallback({ index, value, key });
-                  }
-                  this.inputs[index][key] = value;
-                  this.render();
-                }}
-              />
-            </OptionsContext.Provider>
-          </PluginsRegistry.Provider>
-        </FontContext.Provider>
-      </I18nContext.Provider>,
+      <AppContextProvider
+        lang={this.getLang()}
+        font={this.getFont()}
+        plugins={this.getPluginsRegistry()}
+        options={this.getOptions()}
+      >
+        <Preview
+          template={this.template}
+          size={this.size}
+          inputs={this.inputs}
+          onChangeInput={(arg: { index: number; value: string; key: string }) => {
+            const { index, value, key } = arg;
+            if (this.onChangeInputCallback) {
+              this.onChangeInputCallback({ index, value, key });
+            }
+            this.inputs[index][key] = value;
+            this.render();
+          }}
+        />
+      </AppContextProvider>,
       this.domContainer
     );
   }

package/src/Viewer.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class';
-import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from './contexts';
+import { DESTROYED_ERR_MSG } from './constants.js';
 import Preview from './components/Preview';
+import AppContextProvider from './components/AppContextProvider';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
@@ -15,15 +15,14 @@ class Viewer extends PreviewUI {
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
-      <I18nContext.Provider value={this.getI18n()}>
-        <FontContext.Provider value={this.getFont()}>
-          <PluginsRegistry.Provider value={this.getPluginsRegistry()}>
-            <OptionsContext.Provider value={this.getOptions()}>
-              <Preview template={this.template} size={this.size} inputs={this.inputs} />
-            </OptionsContext.Provider>
-          </PluginsRegistry.Provider>
-        </FontContext.Provider>
-      </I18nContext.Provider>,
+      <AppContextProvider
+        lang={this.getLang()}
+        font={this.getFont()}
+        plugins={this.getPluginsRegistry()}
+        options={this.getOptions()}
+      >
+        <Preview template={this.template} size={this.size} inputs={this.inputs} />
+      </AppContextProvider>,
       this.domContainer
     );
   }

package/src/class.ts

@@ -1,7 +1,6 @@
 import ReactDOM from 'react-dom';
-import { curriedI18n } from './i18n';
-import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
-import { debounce, flatten, cloneDeep } from './helper';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
+import { debounce, flatten, cloneDeep } from './helper.js';
 import {
   Template,
   Size,
@@ -108,8 +107,8 @@ export abstract class BaseUIClass {
     }
   }
 
-  protected getI18n() {
-    return curriedI18n(this.lang);
+  protected getLang() {
+    return this.lang;
   }
 
   protected getFont() {
@@ -148,6 +147,7 @@ export abstract class BaseUIClass {
     if (font) {
       this.font = font;
     }
+    this.options = Object.assign(this.options, options);
     this.render();
   }
 

package/src/components/AppContextProvider.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ConfigProvider as ThemeConfigProvider } from 'antd';
+import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts';
+import { i18n, getDict } from '../i18n';
+import { defaultTheme } from '../theme';
+import type { Dict, Plugins, Font, Lang, UIOptions } from '@pdfme/common';
+
+type Props = {
+  children: React.ReactNode;
+  lang: Lang;
+  font: Font;
+  plugins: Plugins;
+  options: UIOptions;
+};
+
+const isObject = (item: any): item is Record<string, any> =>
+  item && typeof item === 'object' && !Array.isArray(item);
+
+const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>(
+  target: T,
+  source: U
+): T & U => {
+  let output = { ...target } as T & U;
+
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key: keyof U) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key as keyof T & U] = deepMerge(target[key as keyof T] as any, source[key] as any);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  return output;
+};
+
+export default ({ children, lang, font, plugins, options }: Props) => {
+  let theme = defaultTheme;
+  if (options.theme) {
+    theme = deepMerge(theme, options.theme);
+  }
+
+  let dict = getDict(lang);
+  if (options.labels) {
+    dict = deepMerge(dict, options.labels);
+  }
+
+  return (
+    <ThemeConfigProvider theme={theme}>
+      <I18nContext.Provider value={(key: keyof Dict) => i18n(key, dict)}>
+        <FontContext.Provider value={font}>
+          <PluginsRegistry.Provider value={plugins}>
+            <OptionsContext.Provider value={options}>{children}</OptionsContext.Provider>
+          </PluginsRegistry.Provider>
+        </FontContext.Provider>
+      </I18nContext.Provider>
+    </ThemeConfigProvider>
+  );
+};

package/src/components/CtlBar.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Size } from '@pdfme/common';
+import { MinusOutlined, PlusOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { theme, Typography, Button } from 'antd';
+
+const { Text } = Typography;
+
+type TextStyle = { color: string; fontSize: number; margin: number };
+type ZoomProps = {
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+  style: { textStyle: TextStyle };
+};
+
+const Zoom = ({ zoomLevel, setZoomLevel, style }: ZoomProps) => {
+  const zoomStep = 0.25;
+  const maxZoom = 2;
+  const minZoom = 0.25;
+
+  const nextZoomOut = zoomLevel - zoomStep;
+  const nextZoomIn = zoomLevel + zoomStep;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button
+        type="text"
+        disabled={minZoom >= nextZoomOut}
+        onClick={() => setZoomLevel(nextZoomOut)}
+        icon={<MinusOutlined style={{ color: style.textStyle.color }} />}
+      />
+      <Text strong style={style.textStyle}>
+        {Math.round(zoomLevel * 100)}%
+      </Text>
+      <Button
+        type="text"
+        disabled={maxZoom < nextZoomIn}
+        onClick={() => setZoomLevel(nextZoomIn)}
+        icon={<PlusOutlined style={{ color: style.textStyle.color }} />}
+      />
+    </div>
+  );
+};
+
+type PagerProps = {
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+  style: { textStyle: TextStyle };
+};
+
+const Pager = ({ pageCursor, pageNum, setPageCursor, style }: PagerProps) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button type="text" disabled={pageCursor <= 0} onClick={() => setPageCursor(pageCursor - 1)}>
+        <LeftOutlined style={{ color: style.textStyle.color }} />
+      </Button>
+      <Text strong style={style.textStyle}>
+        {pageCursor + 1}/{pageNum}
+      </Text>
+      <Button
+        type="text"
+        disabled={pageCursor + 1 >= pageNum}
+        onClick={() => setPageCursor(pageCursor + 1)}
+      >
+        <RightOutlined style={{ color: style.textStyle.color }} />
+      </Button>
+    </div>
+  );
+};
+
+type CtlBarProps = {
+  size: Size;
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+};
+
+const CtlBar = (props: CtlBarProps) => {
+  const { token } = theme.useToken();
+
+  const barWidth = 300;
+  const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
+  const width = pageNum > 1 ? barWidth : barWidth / 2;
+
+  const textStyle = {
+    color: token.colorWhite,
+    fontSize: token.fontSize,
+    margin: token.marginXS,
+  };
+
+  return (
+    <div style={{ position: 'absolute', top: 'auto', bottom: '6%', width: size.width }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          zIndex: 1,
+          left: `calc(50% - ${width / 2}px)`,
+          width,
+          height: 40,
+          boxSizing: 'border-box',
+          padding: token.paddingSM,
+          borderRadius: token.borderRadius,
+          backgroundColor: token.colorBgMask,
+        }}
+      >
+        {pageNum > 1 && (
+          <Pager
+            style={{ textStyle }}
+            pageCursor={pageCursor}
+            pageNum={pageNum}
+            setPageCursor={setPageCursor}
+          />
+        )}
+        <Zoom style={{ textStyle }} zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+      </div>
+    </div>
+  );
+};
+
+export default CtlBar;

package/src/components/Designer/Canvas/Guides.tsx

@@ -3,6 +3,20 @@ import Guides from '@scena/react-guides';
 import { ZOOM, Size } from '@pdfme/common';
 import { RULER_HEIGHT } from '../../../constants';
 
+const guideStyle = (
+  top: number,
+  left: number,
+  height: number,
+  width: number
+): React.CSSProperties => ({
+  position: 'absolute',
+  top,
+  left,
+  height,
+  width,
+  background: '#333333',
+});
+
 const _Guides = ({
   paperSize,
   horizontalRef,
@@ -15,36 +29,17 @@ const _Guides = ({
   <>
     <div
       className="ruler-container"
-      style={{
-        width: RULER_HEIGHT,
-        height: RULER_HEIGHT,
-        position: 'absolute',
-        top: -RULER_HEIGHT,
-        left: -RULER_HEIGHT,
-        background: '#333',
-      }}
-    ></div>
+      style={guideStyle(-RULER_HEIGHT, -RULER_HEIGHT, RULER_HEIGHT, RULER_HEIGHT)}
+    />
     <Guides
       zoom={ZOOM}
-      style={{
-        position: 'absolute',
-        top: -RULER_HEIGHT,
-        left: 0,
-        height: RULER_HEIGHT,
-        width: paperSize.width,
-      }}
+      style={guideStyle(-RULER_HEIGHT, 0, RULER_HEIGHT, paperSize.width)}
       type="horizontal"
       ref={horizontalRef}
     />
     <Guides
       zoom={ZOOM}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: -RULER_HEIGHT,
-        height: paperSize.height,
-        width: RULER_HEIGHT,
-      }}
+      style={guideStyle(0, -RULER_HEIGHT, paperSize.height, RULER_HEIGHT)}
       type="vertical"
       ref={verticalRef}
     />

package/src/components/Designer/Canvas/Mask.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Size } from '@pdfme/common';
 import { RULER_HEIGHT } from '../../../constants';
+import { theme } from 'antd';
 
 const Mask = ({ width, height }: Size) => (
   <div
@@ -9,9 +10,9 @@ const Mask = ({ width, height }: Size) => (
       top: -RULER_HEIGHT,
       left: -RULER_HEIGHT,
       zIndex: 100,
-      background: 'rgba(158, 158, 158, 0.58)',
       width,
       height,
+      background: theme.useToken().token.colorBgMask,
     }}
   />
 );

package/src/components/Designer/Canvas/Moveable.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, Ref } from 'react';
+import React, { useEffect, forwardRef, Ref } from 'react';
 import Moveable, { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
+import { theme } from 'antd';
 
 type Props = {
   target: HTMLElement[];
@@ -20,64 +21,63 @@ type Props = {
   onClick: (e: OnClick) => void;
 };
 
-const _Moveable = (
-  {
-    target,
-    bounds,
-    horizontalGuidelines,
-    verticalGuidelines,
-    keepRatio,
-    rotatable,
-    onDrag,
-    onDragEnd,
-    onDragGroupEnd,
-    onRotate,
-    onRotateEnd,
-    onRotateGroupEnd,
-    onResize,
-    onResizeEnd,
-    onResizeGroupEnd,
-    onClick,
-  }: Props,
-  ref: Ref<any>
-) => (
-  <Moveable
-    style={{ zIndex: 1 }}
-    rootContainer={document ? document.body : undefined}
-    snappable
-    snapCenter
-    draggable
-    rotatable={rotatable}
-    resizable
-    throttleDrag={1}
-    throttleRotate={1}
-    throttleResize={1}
-    ref={ref}
-    target={target}
-    bounds={bounds}
-    horizontalGuidelines={horizontalGuidelines}
-    verticalGuidelines={verticalGuidelines}
-    keepRatio={keepRatio}
-    onRotate={onRotate}
-    onRotateEnd={onRotateEnd}
-    onRotateGroup={({ events }) => {
-      events.forEach(onRotate);
-    }}
-    onRotateGroupEnd={onRotateGroupEnd}
-    onDrag={onDrag}
-    onDragGroup={({ events }) => {
-      events.forEach(onDrag);
-    }}
-    onDragEnd={onDragEnd}
-    onDragGroupEnd={onDragGroupEnd}
-    onResize={onResize}
-    onResizeGroup={({ events }) => {
-      events.forEach(onResize);
-    }}
-    onResizeEnd={onResizeEnd}
-    onResizeGroupEnd={onResizeGroupEnd}
-    onClick={onClick}
-  />
-);
+const className = 'pdfme-moveable';
+
+const _Moveable = (props: Props, ref: Ref<any>) => {
+  const { token } = theme.useToken();
+  useEffect(() => {
+    const containerElement = document.querySelector(`.${className}`) as HTMLElement | null;
+    const containerElement2 = document.querySelectorAll(
+      `.${className} .moveable-line`
+    ) as NodeListOf<HTMLElement>;
+    if (containerElement) {
+      containerElement.style.setProperty('--moveable-color', token.colorPrimary);
+      Array.from(containerElement2).map((e) =>
+        e.style.setProperty('--moveable-color', token.colorPrimary)
+      );
+    }
+  }, [props.target]);
+
+  return (
+    <Moveable
+      style={{ zIndex: 1 }}
+      className={className}
+      rootContainer={document ? document.body : undefined}
+      snappable
+      snapCenter
+      draggable
+      rotatable={props.rotatable}
+      resizable
+      throttleDrag={1}
+      throttleRotate={1}
+      throttleResize={1}
+      ref={ref}
+      target={props.target}
+      bounds={props.bounds}
+      horizontalGuidelines={props.horizontalGuidelines}
+      verticalGuidelines={props.verticalGuidelines}
+      keepRatio={props.keepRatio}
+      onRotate={props.onRotate}
+      onRotateEnd={props.onRotateEnd}
+      onRotateGroup={({ events }) => {
+        events.forEach(props.onRotate);
+      }}
+      onRotateGroupEnd={props.onRotateGroupEnd}
+      onDrag={props.onDrag}
+      onDragGroup={({ events }) => {
+        events.forEach(props.onDrag);
+      }}
+      onDragEnd={props.onDragEnd}
+      onDragGroupEnd={props.onDragGroupEnd}
+      onResize={props.onResize}
+      onResizeGroup={({ events }) => {
+        events.forEach(props.onResize);
+      }}
+      onResizeEnd={props.onResizeEnd}
+      onResizeGroupEnd={props.onResizeGroupEnd}
+      onClick={props.onClick}
+    />
+  );
+};
 
 export default forwardRef<any, Props>(_Moveable);