@tomino/dynamic-form-semantic-ui/dist/cjs/semantic/signature/signature_sign.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 common_1 = require("../../common");
const semantic_ui_react_1 = require("semantic-ui-react");
const context_1 = require("../../context");
const helpers_1 = require("../../helpers");
const margined = common_1.css `
  margin-top: 12px;
`;
const centered = common_1.css `
  text-align: center;
`;
const errorLabel = common_1.css `
  margin-left: 12px !important;
`;
exports.SignatureSign = props => {
    const { allowComment, handlers, formElement, owner, reason } = props;
    const context = React.useContext(context_1.Context);
    const [password, setPassword] = React.useState('');
    const [error, setError] = React.useState('');
    const [modelOpen, setModalOpen] = React.useState(false);
    const [loading, setLoading] = React.useState(false);
    return (React.createElement(semantic_ui_react_1.Modal, { open: modelOpen, trigger: React.createElement(semantic_ui_react_1.Button, { onClick: () => handlers.validateForm(null) && setModalOpen(true), icon: "pencil alternate", content: "Sign", labelPosition: "left", primary: true, floated: allowComment ? 'right' : null }), size: "small" },
        React.createElement(semantic_ui_react_1.Header, { icon: "shield", content: "Form Signature" }),
        React.createElement(semantic_ui_react_1.Modal.Content, null,
            React.createElement("div", null,
                React.createElement("p", null, formElement.props && formElement.props.submit
                    ? `Do you wish to sign this form? Upon signing, you will no longer be able to make any
                  changes, the form will be automatically submitted and process will advance to a next
                  state.`
                    : `Do you wish to sign this form? Upon signing, you will no longer be able to make any
                  changes. To submit this form go back to the process page and press the "Submit" button.
                  To make further changes to the form, you will need to remove your signature.`),
                reason && (React.createElement(semantic_ui_react_1.Message, { icon: "comment outline", header: "You left a comment", content: reason })),
                React.createElement("form", { className: centered },
                    React.createElement("label", { htmlFor: "password" },
                        React.createElement("b", null, "Please provide your password to sign this form:"),
                        React.createElement("br", null)),
                    ' ',
                    React.createElement(semantic_ui_react_1.Input, { className: margined, autoComplete: "password", type: "password", icon: "lock", value: password, onChange: e => setPassword(e.currentTarget.value) }),
                    error && React.createElement(semantic_ui_react_1.Label, { color: "red", content: error, className: errorLabel })))),
        React.createElement(semantic_ui_react_1.Modal.Actions, null,
            !loading && (React.createElement(semantic_ui_react_1.Button, { onClick: () => setModalOpen(false), loading: loading },
                React.createElement(semantic_ui_react_1.Icon, { name: "remove" }),
                " Cancel")),
            React.createElement(semantic_ui_react_1.Button, { color: "green", loading: loading, onClick: async () => {
                    if (loading) {
                        return;
                    }
                    if (password) {
                        setLoading(true);
                        setError('');
                        let signature = await handlers.sign({
                            owner,
                            props,
                            context,
                            args: {
                                source: helpers_1.valueSource(formElement),
                                reject: false,
                                password,
                                reason,
                                submit: formElement.props && !!formElement.props.submit
                            }
                        });
                        setLoading(false);
                        if (signature) {
                            helpers_1.setValue(props, context, signature);
                        }
                    }
                    else {
                        setError('Please provide password');
                    }
                } },
                React.createElement(semantic_ui_react_1.Icon, { name: "pencil alternate" }),
                ' ',
                formElement.props && formElement.props.submit ? 'Sign and Submit' : 'Sign'))));
};
exports.SignatureSign.displayName = 'SignatureSign';
//# sourceMappingURL=signature_sign.js.map