@pdfme/ui 1.0.0-beta.5 → 1.0.0-beta.9

package/dist/types/common/src/type.d.ts

@@ -1,64 +0,0 @@
-import { z } from 'zod';
-import { Lang, Size, Alignment, BarcodeSchemaType, SchemaType, CommonSchema as _CommonSchema, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps } from './schema';
-declare type CommonSchema = z.infer<typeof _CommonSchema>;
-export declare const schemaTypes: readonly ["text", "image", "qrcode", "japanpost", "ean13", "ean8", "code39", "code128", "nw7", "itf14", "upca", "upce"];
-export declare const isTextSchema: (arg: CommonSchema) => arg is {
-    rotate?: number | undefined;
-    alignment?: "left" | "center" | "right" | undefined;
-    fontSize?: number | undefined;
-    fontName?: string | undefined;
-    fontColor?: string | undefined;
-    backgroundColor?: string | undefined;
-    characterSpacing?: number | undefined;
-    lineHeight?: number | undefined;
-    type: "text";
-    position: {
-        x: number;
-        y: number;
-    };
-    width: number;
-    height: number;
-};
-export declare const isImageSchema: (arg: CommonSchema) => arg is {
-    rotate?: number | undefined;
-    type: "image";
-    position: {
-        x: number;
-        y: number;
-    };
-    width: number;
-    height: number;
-};
-export declare const isBarcodeSchema: (arg: CommonSchema) => arg is {
-    rotate?: number | undefined;
-    type: "qrcode" | "japanpost" | "ean13" | "ean8" | "code39" | "code128" | "nw7" | "itf14" | "upca" | "upce";
-    position: {
-        x: number;
-        y: number;
-    };
-    width: number;
-    height: number;
-};
-export declare type Lang = z.infer<typeof Lang>;
-export declare type Size = z.infer<typeof Size>;
-export declare type Alignment = z.infer<typeof Alignment>;
-export declare type SchemaType = z.infer<typeof SchemaType>;
-export declare type BarCodeType = z.infer<typeof BarcodeSchemaType>;
-export declare type TextSchema = z.infer<typeof TextSchema>;
-export declare type ImageSchema = z.infer<typeof ImageSchema>;
-export declare type BarcodeSchema = z.infer<typeof BarcodeSchema>;
-export declare type Schema = z.infer<typeof Schema>;
-export declare type SchemaForUI = z.infer<typeof SchemaForUI>;
-export declare type Font = z.infer<typeof Font>;
-export declare type BasePdf = z.infer<typeof BasePdf>;
-export declare type Template = z.infer<typeof Template>;
-export declare type CommonProps = z.infer<typeof CommonProps>;
-export declare type GeneratorOptions = z.infer<typeof GeneratorOptions>;
-export declare type GenerateProps = z.infer<typeof GenerateProps>;
-export declare type UIOptions = z.infer<typeof UIOptions>;
-export declare type UIProps = z.infer<typeof UIProps>;
-export declare type PreviewProps = z.infer<typeof PreviewProps>;
-export declare type PreviewReactProps = z.infer<typeof PreviewReactProps>;
-export declare type DesignerProps = z.infer<typeof DesignerProps>;
-export declare type DesignerReactProps = z.infer<typeof DesignerReactProps>;
-export {};

package/dist/types/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,3 +0,0 @@
-import { SidebarProps } from '..';
-declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
-export default PositionAndSizeEditor;

package/dist/types/ui/src/components/Designer/Sidebar/DetailView/index.d.ts

@@ -1,3 +0,0 @@
-import { SidebarProps } from '..';
-declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>) => JSX.Element;
-export default DetailView;

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

@@ -1,180 +0,0 @@
-import React, { useContext } from 'react';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
-import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } 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,
-              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: {
-    schemas: SchemaForUI[];
-    onEdit: (id: string) => void;
-    size: Size;
-    hoveringSchemaId: string | null;
-    onChangeHoveringSchemaId: (id: string | null) => void;
-  }) => {
-    const { schemas, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
-    const i18n = useContext(I18nContext);
-
-    return (
-      <div style={{ maxHeight: 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'}`,
-              }}
-              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,
-    'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
-  >
-) => {
-  const { schemas, onSortEnd, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
-  const i18n = useContext(I18nContext);
-
-  return (
-    <aside>
-      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
-          {i18n('fieldsList')}
-        </p>
-      </div>
-      <Divider />
-      <SortableList
-        size={size}
-        hoveringSchemaId={hoveringSchemaId}
-        onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-        updateBeforeSortStart={(node: any) => {
-          if (node.node.style) {
-            node.node.style.zIndex = '9999';
-          }
-        }}
-        useDragHandle
-        axis="y"
-        lockAxis="y"
-        schemas={schemas}
-        onSortEnd={onSortEnd}
-        onEdit={onEdit}
-      />
-      <Divider />
-    </aside>
-  );
-};
-
-export default ListView;