@pdfme/ui 1.0.0-beta.1

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -0,0 +1,178 @@
+import React, { useContext } from 'react';
+import {
+  getFallbackFontName,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_CHARACTER_SPACING,
+} from '@pdfme/common';
+import { FontContext } from '../../../../contexts';
+import { SidebarProps } from '..';
+
+const NumberInputSet = (props: {
+  width: string;
+  label: string;
+  value: number;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}) => {
+  const { label, value, width, onChange } = props;
+
+  return (
+    <div style={{ width }}>
+      <label>{label}</label>
+      <input style={{ width: '100%' }} onChange={onChange} value={value} type="number" />
+    </div>
+  );
+};
+
+const ColorInputSet = (props: {
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClear: () => void;
+}) => {
+  const { label, value, onChange, onClear } = props;
+
+  return (
+    <div style={{ width: '45%' }}>
+      <label>{label}</label>
+      <div style={{ display: 'flex' }}>
+        <input onChange={onChange} value={value} type="color" style={{ width: '100%' }} />
+        <button onClick={onClear}>X</button>
+      </div>
+    </div>
+  );
+};
+
+const SelectSet = (props: {
+  label: string;
+  value: string;
+  options: string[];
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}) => {
+  const { label, value, options, onChange } = props;
+
+  return (
+    <div style={{ width: '45%' }}>
+      <label>{label}:</label>
+      <select style={{ width: '100%' }} onChange={onChange} value={value}>
+        {options.map((o) => (
+          <option key={o} value={o}>
+            {o}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+  const { changeSchemas, activeSchema } = props;
+  const alignments = ['left', 'center', 'right'];
+  const font = useContext(FontContext);
+  const fallbackFontName = getFallbackFontName(font);
+
+  if (activeSchema.type !== 'text') return <></>;
+
+  return (
+    <div style={{ fontSize: '0.7rem' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <SelectSet
+          label={'FontName'}
+          value={activeSchema.fontName ?? fallbackFontName}
+          options={Object.keys(font)}
+          onChange={(e) => {
+            changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
+          }}
+        />
+
+        <SelectSet
+          label={'Alignment'}
+          value={activeSchema.alignment ?? 'left'}
+          options={alignments}
+          onChange={(e) =>
+            changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
+          }
+        />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <NumberInputSet
+          width="30%"
+          label={'FontSize(pt)'}
+          value={activeSchema.fontSize ?? DEFAULT_FONT_SIZE}
+          onChange={(e) =>
+            changeSchemas([
+              { key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id },
+            ])
+          }
+        />
+        <NumberInputSet
+          width="30%"
+          label={'LineHeight(em)'}
+          value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
+          onChange={(e) =>
+            changeSchemas([
+              { key: 'lineHeight', value: Number(e.target.value), schemaId: activeSchema.id },
+            ])
+          }
+        />
+
+        <NumberInputSet
+          width="40%"
+          label={'CharacterSpacing(pt)'}
+          value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
+          onChange={(e) =>
+            changeSchemas([
+              { key: 'characterSpacing', value: Number(e.target.value), schemaId: activeSchema.id },
+            ])
+          }
+        />
+      </div>
+      <div
+        style={{
+          marginBottom: '0.25rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <ColorInputSet
+          label={'FontColor'}
+          value={activeSchema.fontColor ?? '#000000'}
+          onChange={(e) =>
+            changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
+          }
+          onClear={() =>
+            changeSchemas([{ key: 'fontColor', value: '', schemaId: activeSchema.id }])
+          }
+        />
+
+        <ColorInputSet
+          label={'Background'}
+          value={activeSchema.backgroundColor ?? '#ffffff'}
+          onChange={(e) =>
+            changeSchemas([
+              { key: 'backgroundColor', value: e.target.value, schemaId: activeSchema.id },
+            ])
+          }
+          onClear={() =>
+            changeSchemas([{ key: 'backgroundColor', value: '', schemaId: activeSchema.id }])
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TextPropEditor;

package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx

@@ -0,0 +1,79 @@
+import React, { useContext, useRef, useCallback } from 'react';
+import { schemaTypes } from '@pdfme/common';
+import { SidebarProps } from '..';
+import { I18nContext } from '../../../../contexts';
+
+const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
+  <span
+    style={{ color: isError ? '#ffa19b' : 'inherit', fontWeight: isError ? 'bold' : 'inherit' }}
+  >
+    {msg}
+  </span>
+);
+
+const TypeAndKeyEditor = (
+  props: Pick<SidebarProps, 'schemas' | 'changeSchemas' | 'activeSchema'>
+) => {
+  const { changeSchemas, activeSchema, schemas } = props;
+  const i18n = useContext(I18nContext);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const getHasSameKey = useCallback(() => {
+    const schemaKeys = schemas.map((s) => s.key);
+    const index = schemaKeys.indexOf(activeSchema.key);
+    if (index > -1) {
+      schemaKeys.splice(index, 1);
+    }
+
+    return schemaKeys.includes(activeSchema.key);
+  }, [schemas, activeSchema]);
+
+  const blankKey = !activeSchema.key;
+  const hasSameKey = getHasSameKey();
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div>
+        <label style={{ marginBottom: 0 }}>{i18n('type')}</label>
+        <select
+          style={{ width: '100%' }}
+          onChange={(e) =>
+            changeSchemas([{ key: 'type', value: e.target.value, schemaId: activeSchema.id }])
+          }
+          value={activeSchema.type}
+        >
+          {schemaTypes.map((t) => (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div style={{ width: '100%' }}>
+        <label style={{ marginBottom: 0 }}>
+          {i18n('fieldName')}
+          <u style={{ fontSize: '0.7rem' }}>
+            (<ErrorLabel msg={i18n('require')} isError={blankKey} />+
+            <ErrorLabel msg={i18n('uniq')} isError={hasSameKey} />)
+          </u>
+        </label>
+
+        <input
+          ref={inputRef}
+          onChange={(e) =>
+            changeSchemas([{ key: 'key', value: e.target.value, schemaId: activeSchema.id }])
+          }
+          style={{
+            borderRadius: 2,
+            border: '1px solid #767676',
+            backgroundColor: hasSameKey || blankKey ? '#ffa19b' : '#fff',
+          }}
+          value={activeSchema.key}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TypeAndKeyEditor;

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

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+import { I18nContext } from '../../../../contexts';
+import Divider from '../../../Divider';
+import { SidebarProps } from '..';
+import TextPropEditor from './TextPropEditor';
+import ExampleInputEditor from './ExampleInputEditor';
+import PositionAndSizeEditor from './PositionAndSizeEditor';
+import TypeAndKeyEditor from './TypeAndKeyEditor';
+
+const DetailView = (
+  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>
+) => {
+  const { activeSchema } = props;
+  const i18n = useContext(I18nContext);
+
+  return (
+    <aside>
+      <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+          {i18n('editField')}
+        </p>
+      </div>
+      <Divider />
+      <TypeAndKeyEditor {...props} />
+      <Divider />
+      <PositionAndSizeEditor {...props} />
+      <Divider />
+      {activeSchema.type === 'text' && (
+        <>
+          <TextPropEditor {...props} />
+          <Divider />
+        </>
+      )}
+      <ExampleInputEditor {...props} />
+    </aside>
+  );
+};
+
+export default DetailView;

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

@@ -0,0 +1,180 @@
+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;

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

@@ -0,0 +1,102 @@
+import React, { useState, useContext } from 'react';
+import { SchemaForUI, Size } from '@pdfme/common';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { I18nContext } from '../../../contexts';
+import backIcon from '../../../assets/icons/back.svg';
+import forwardIcon from '../../../assets/icons/forward.svg';
+import ListView from './ListView';
+import DetailView from './DetailView';
+
+export type SidebarProps = {
+  height: number;
+  hoveringSchemaId: string | null;
+  onChangeHoveringSchemaId: (id: string | null) => void;
+  size: Size;
+  pageSize: Size;
+  activeElement: HTMLElement | null;
+  activeSchema: SchemaForUI;
+  schemas: SchemaForUI[];
+  onSortEnd: ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => void;
+  onEdit: (id: string) => void;
+  onEditEnd: () => void;
+  changeSchemas: (objs: { key: string; value: string | number; schemaId: string }[]) => void;
+  addSchema: () => void;
+};
+
+const Sidebar = (props: SidebarProps) => {
+  const { height, size, addSchema } = props;
+
+  const i18n = useContext(I18nContext);
+  const [open, setOpen] = useState(true);
+  const sidebarWidth = 300;
+  const top = 0;
+
+  return (
+    <div style={{ position: 'absolute', height, width: '100%' }}>
+      <div style={{ position: 'sticky', top, zIndex: 29 }}>
+        <button
+          style={{
+            position: 'absolute',
+            top: '1rem',
+            right: '0.5rem',
+            zIndex: 100,
+            border: 'none',
+            borderRadius: 3,
+            padding: '0.5rem',
+            cursor: 'pointer',
+            background: '#eee',
+          }}
+          onClick={() => setOpen(!open)}
+        >
+          <img src={open ? forwardIcon : backIcon} width={15} alt="Toggle icon" />
+        </button>
+        <div
+          style={{
+            width: sidebarWidth,
+            height: size.height - RULER_HEIGHT * ZOOM,
+            display: open ? 'block' : 'none',
+            top,
+            right: 0,
+            position: 'absolute',
+            background: '#ffffffed',
+            color: '#333',
+            border: '1px solid #eee',
+            padding: '0.5rem',
+            overflowY: 'auto',
+            fontFamily: "'Open Sans', sans-serif",
+            fontWeight: 400,
+          }}
+        >
+          {props.activeElement ? <DetailView {...props} /> : <ListView {...props} />}
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-around',
+              position: 'absolute',
+              width: '100%',
+              left: 0,
+              bottom: '1rem',
+              paddingTop: '1rem',
+            }}
+          >
+            <button
+              style={{
+                padding: '0.5rem',
+                color: '#fff',
+                background: '#18a0fb',
+                border: 'none',
+                borderRadius: 3,
+                cursor: 'pointer',
+              }}
+              onClick={addSchema}
+            >
+              <strong>{i18n('addNewField')}</strong>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;