@pdfme/ui 2.2.0 → 3.0.0-beta.2

package/src/components/Schemas/ImageSchema.tsx

@@ -1,87 +0,0 @@
-import React, { useState, forwardRef, ChangeEvent, Ref } from 'react';
-import { ImageSchema } from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI';
-import { readFiles } from '../../helper';
-import { ZOOM } from '../../constants';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-
-type Props = SchemaUIProps & { schema: ImageSchema };
-
-const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
-  const { editable, placeholder, tabIndex, schema, onChange, onStopEditing } = props;
-  const [fileName, setFileName] = useState<string>('');
-  const hasData = Boolean(schema.data);
-
-  const size: React.CSSProperties = { width: schema.width * ZOOM, height: schema.height * ZOOM };
-
-  return (
-    <>
-      <div
-        style={{
-          ...size,
-          opacity: hasData ? 1 : 0.5,
-          backgroundImage: hasData || !editable ? 'none' : `url(${placeholder})`,
-          backgroundSize: `${size.width}px ${size.height}px`,
-        }}
-        onClick={(e) => {
-          if (editable) {
-            e.stopPropagation();
-          }
-        }}
-      >
-        {hasData && <img style={{ ...size, borderRadius: 0 }} src={schema.data} />}
-        {hasData && editable && (
-          <button
-            tabIndex={tabIndex}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              zIndex: 1,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              color: '#333',
-              background: '#f2f2f2',
-              borderRadius: 2,
-              border: '1px solid #767676',
-              cursor: 'pointer',
-              height: 24,
-              width: 24,
-            }}
-            aria-label="close"
-            onClick={() => {
-              setFileName('');
-              onChange('');
-            }}
-          >
-            <XMarkIcon width={10} height={10} />
-          </button>
-        )}
-      </div>
-      <label
-        style={{
-          display: editable ? 'flex' : 'none',
-          position: 'absolute',
-          top: '50%',
-          width: '100%',
-          cursor: 'pointer',
-        }}
-      >
-        <input
-          ref={ref}
-          tabIndex={tabIndex}
-          value={fileName}
-          onChange={(event: ChangeEvent<HTMLInputElement>) =>
-            readFiles(event.target.files, 'dataURL').then((result) => onChange(result as string))
-          }
-          onBlur={onStopEditing}
-          type="file"
-          accept="image/jpeg, image/png"
-        />
-      </label>
-    </>
-  );
-};
-
-export default forwardRef<HTMLInputElement, Props>(ImageSchemaUI);

package/src/components/Schemas/SchemaUI.tsx

@@ -1,62 +0,0 @@
-import React, { forwardRef, RefObject, Ref, ReactNode } from 'react';
-import { SchemaForUI, isTextSchema, isImageSchema, isBarcodeSchema } from '@pdfme/common';
-import { ZOOM, SELECTABLE_CLASSNAME } from '../../constants';
-import TextSchema from './TextSchema';
-import ImageSchema from './ImageSchema';
-import BarcodeSchema from './BarcodeSchema';
-
-export interface SchemaUIProps {
-  schema: SchemaForUI;
-  editable: boolean;
-  onChange: (value: string) => void;
-  onStopEditing: () => void;
-  tabIndex?: number;
-  placeholder?: string;
-}
-
-type Props = SchemaUIProps & {
-  outline: string;
-  onChangeHoveringSchemaId?: (id: string | null) => void;
-};
-
-const Wrapper = ({
-  children,
-  outline,
-  onChangeHoveringSchemaId,
-  schema,
-}: Props & { children: ReactNode }) => (
-  <div
-    title={schema.key}
-    onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
-    onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
-    className={SELECTABLE_CLASSNAME}
-    id={schema.id}
-    style={{
-      position: 'absolute',
-      cursor: 'pointer',
-      height: schema.height * ZOOM,
-      width: schema.width * ZOOM,
-      top: schema.position.y * ZOOM,
-      left: schema.position.x * ZOOM,
-      outline,
-    }}
-  >
-    {children}
-  </div>
-);
-
-const SchemaUI = (props: Props, ref: Ref<HTMLTextAreaElement | HTMLInputElement>) => {
-  const r = {
-    [props.editable ? 'ref' : '']: ref as RefObject<HTMLTextAreaElement | HTMLInputElement>,
-  };
-  const { schema } = props;
-
-  return (
-    <Wrapper {...props}>
-      {isTextSchema(schema) && <TextSchema {...r} {...props} schema={schema} />}
-      {isImageSchema(schema) && <ImageSchema {...r} {...props} schema={schema} />}
-      {isBarcodeSchema(schema) && <BarcodeSchema {...r} {...props} schema={schema} />}
-    </Wrapper>
-  );
-};
-export default forwardRef<HTMLTextAreaElement | HTMLInputElement, Props>(SchemaUI);

package/src/components/Schemas/TextSchema.tsx

@@ -1,175 +0,0 @@
-import React, { useContext, forwardRef, Ref, useState, useEffect } from 'react';
-import {
-  DEFAULT_FONT_SIZE,
-  DEFAULT_ALIGNMENT,
-  VERTICAL_ALIGN_TOP,
-  VERTICAL_ALIGN_MIDDLE,
-  VERTICAL_ALIGN_BOTTOM,
-  DEFAULT_VERTICAL_ALIGNMENT,
-  DEFAULT_LINE_HEIGHT,
-  DEFAULT_CHARACTER_SPACING,
-  DEFAULT_FONT_COLOR,
-  TextSchema,
-  calculateDynamicFontSize,
-  getFontKitFont,
-  getBrowserVerticalFontAdjustments,
-} from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI';
-import { ZOOM } from '../../constants';
-import { FontContext } from '../../contexts';
-
-const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
-  switch (verticalAlignmentValue) {
-    case VERTICAL_ALIGN_TOP:
-      return 'flex-start';
-    case VERTICAL_ALIGN_MIDDLE:
-      return 'center';
-    case VERTICAL_ALIGN_BOTTOM:
-      return 'flex-end';
-  }
-  return 'flex-start';
-};
-
-type Props = SchemaUIProps & { schema: TextSchema };
-
-const TextSchemaUI = (
-  { schema, editable, placeholder, tabIndex, onChange, onStopEditing }: Props,
-  ref: Ref<HTMLTextAreaElement>
-) => {
-  const font = useContext(FontContext);
-  const [dynamicFontSize, setDynamicFontSize] = useState<number | undefined>(undefined);
-  const [topAdjustment, setTopAdjustment] = useState<number>(0);
-  const [bottomAdjustment, setBottomAdjustment] = useState<number>(0);
-
-  useEffect(() => {
-    if (schema.dynamicFontSize && schema.data) {
-      calculateDynamicFontSize({
-        textSchema: schema,
-        font,
-        input: schema.data,
-        startingFontSize: dynamicFontSize,
-      }).then(setDynamicFontSize);
-    } else {
-      setDynamicFontSize(undefined);
-    }
-  }, [
-    schema.data,
-    schema.width,
-    schema.height,
-    schema.dynamicFontSize?.min,
-    schema.dynamicFontSize?.max,
-    schema.dynamicFontSize?.fit,
-    schema.characterSpacing,
-    schema.lineHeight,
-    font
-  ]);
-
-  useEffect(() => {
-    getFontKitFont(schema, font).then(fontKitFont => {
-      // Depending on vertical alignment, we need to move the top or bottom of the font to keep
-      // it within it's defined box and align it with the generated pdf.
-      const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(
-        fontKitFont,
-        dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
-        schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
-        schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
-      );
-      setTopAdjustment(topAdj);
-      setBottomAdjustment(bottomAdj);
-    });
-
-    if (ref && 'current' in ref) {
-      const textarea = ref.current;
-
-      if (textarea) {
-        // Textareas cannot be vertically aligned, so we need to adjust the height of the textarea
-        // to exactly fit the height of it's content, whilst aligned within it's container.
-        // This gives the appearance of being vertically aligned.
-        textarea.style.height = 'auto'; // Reset the height to auto to ensure we get the correct height.
-        textarea.style.height = `${textarea.scrollHeight}px`;
-      }
-    }
-  }, [
-    schema.data,
-    schema.width,
-    schema.height,
-    schema.fontName,
-    schema.fontSize,
-    schema.dynamicFontSize?.max,
-    schema.dynamicFontSize?.min,
-    schema.dynamicFontSize?.fit,
-    schema.characterSpacing,
-    schema.lineHeight,
-    schema.verticalAlignment,
-    font,
-    dynamicFontSize,
-    editable,
-  ]);
-
-  const containerStyle: React.CSSProperties = {
-    position: 'absolute',
-    top: 0,
-    padding: 0,
-    height: schema.height * ZOOM,
-    width: schema.width * ZOOM,
-    resize: 'none',
-    backgroundColor: schema.data && schema.backgroundColor ? schema.backgroundColor : 'rgb(242 244 255 / 75%)',
-    border: 'none',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
-  };
-
-  const textareaStyle: React.CSSProperties = {
-    padding: 0,
-    resize: 'none',
-    border: 'none',
-    outline: 'none',
-    paddingTop: topAdjustment,
-    background: 'none',
-  };
-
-  const fontStyles: React.CSSProperties = {
-    fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
-    color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
-    fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
-    letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-    lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
-    textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
-  };
-
-  return editable ? (
-    <div style={containerStyle}>
-      <textarea
-        ref={ref}
-        placeholder={placeholder}
-        tabIndex={tabIndex}
-        style={{ ...textareaStyle, ...fontStyles }}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onStopEditing}
-        value={schema.data}
-      ></textarea>
-    </div>
-  ) : (
-    <div style={containerStyle}>
-      <div
-        style={{
-          ...fontStyles,
-          marginBottom: bottomAdjustment,
-          paddingTop: topAdjustment,
-        }}
-      >
-        {/*  Set the letterSpacing of the last character to 0. */}
-        {schema.data.split('').map((l, i) => (
-          <span key={i} style={{ letterSpacing: String(schema.data).length === i + 1 ? 0 : 'inherit' }}>
-            {l}
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default forwardRef<HTMLTextAreaElement, Props>(TextSchemaUI);