@tomino/dynamic-form-semantic-ui/dist/mjs/semantic/signature_view.js

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { observer } from 'mobx-react';
import { css } from '../common';
import { SignedSignature } from './signature/signature_signed';
import { SignatureRejected } from './signature/signature_rejected';
import { SignatureRoot } from './signature/signature';
import { getValue } from '../helpers';
import { Context } from '../context';
const signatureStyle = css `
  border: solid 1px #ededed;
  border-radius: 5px;

  .image {
    width: 32px !important;
  }

  .button {
    margin-top: 6px !important;
  }

  .items {
    margin-top: 6px !important;
  }

  .list {
    margin-top: 6px !important;
  }

  img {
    width: 32px !important;
    vertical-align: middle;
    margin-right: 6px;
    cursor: pointer;
  }
`;
export class Signature extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            modalOpen: false,
            modalRejectOpen: false,
            reason: '',
            password: '',
            loading: false,
            error: '',
            fontReady: typeof window === 'undefined' ? true : false
        };
        this.handleOpen = () => this.setState({ modalOpen: true });
        this.handleClose = () => !this.state.loading && this.setState({ modalOpen: false });
    }
    async componentDidMount() {
        const value = getValue(this.props, this.context);
        if (value.signature) {
            const state = await this.props.handlers.verifySignature({
                owner: this.props.owner,
                props: this.props,
                context: this.context,
                args: {
                    uid: value.uid,
                    signature: value.signature
                }
            });
            value.setValue('verifiedState', state);
        }
    }
    render() {
        const { formElement, formElement: { props }, handlers } = this.props;
        if (!this.props.readOnly &&
            (!handlers ||
                !handlers.verifySignature ||
                !handlers.sign ||
                !handlers.signatureFont ||
                !handlers.validateForm)) {
            throw new Error(`You must implement following handlers to use signatures:
          - validateForm (): boolean
          - verifySignature(uid: string, signature: string): boolean
          - sign(source: string, reject: boolean, password: string, reason: string, submit: boolean): string
          - signatureFont(): string`);
        }
        const value = getValue(this.props, this.context);
        const { allowComment } = props;
        const font = handlers.signatureFont ? handlers.signatureFont(null) : 'Menlo, Arial';
        if (value.signature && typeof window !== undefined) {
            if (typeof window !== 'undefined') {
                require('webfontloader').load({
                    google: { families: [font] },
                    fontactive: () => !this.state.fontReady && this.setState({ fontReady: true })
                });
            }
        }
        return (React.createElement("fieldset", { className: signatureStyle },
            React.createElement("legend", null, formElement.props.label),
            value.signature && this.state.fontReady && (React.createElement(SignedSignature, { value: value, font: font, readonly: this.props.readOnly })),
            value.rejected && React.createElement(SignatureRejected, { value: value }),
            !value.date && React.createElement(SignatureRoot, Object.assign({}, this.props, { allowComment: allowComment }))));
    }
}
Signature.contextType = Context;
export const SignatureView = {
    Component: observer(Signature),
    toString: () => ''
};
//# sourceMappingURL=signature_view.js.map