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

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const common_1 = require("../common");
const signature_signed_1 = require("./signature/signature_signed");
const signature_rejected_1 = require("./signature/signature_rejected");
const signature_1 = require("./signature/signature");
const helpers_1 = require("../helpers");
const context_1 = require("../context");
const signatureStyle = common_1.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;
  }
`;
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 = helpers_1.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 = helpers_1.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(signature_signed_1.SignedSignature, { value: value, font: font, readonly: this.props.readOnly })),
            value.rejected && React.createElement(signature_rejected_1.SignatureRejected, { value: value }),
            !value.date && React.createElement(signature_1.SignatureRoot, Object.assign({}, this.props, { allowComment: allowComment }))));
    }
}
Signature.contextType = context_1.Context;
exports.Signature = Signature;
exports.SignatureView = {
    Component: mobx_react_1.observer(Signature),
    toString: () => ''
};
//# sourceMappingURL=signature_view.js.map