@amalto/signature
Version:
Electronical signature component.
161 lines • 7.54 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_signature_pad_wrapper_1 = __importDefault(require("react-signature-pad-wrapper"));
var Radium = __importStar(require("radium"));
var buttons_bar_1 = __importDefault(require("@amalto/buttons-bar"));
var helpers_1 = require("@amalto/helpers");
var service_helpers_1 = require("@amalto/service-helpers");
var wordings_1 = require("./constants/wordings");
var styles_1 = require("./styles");
var Signature = (function (_super) {
__extends(Signature, _super);
function Signature(props) {
var _this = _super.call(this, props) || this;
_this.signaturePad = null;
_this.clearTimeout = null;
_this.generateBtnsBar = function () {
var _a = _this.state, wordings = _a.wordings, dirty = _a.dirty, imgData = _a.imgData;
var leftBtn = {
btns: [
{
clickAction: _this.clear,
cssClass: service_helpers_1.BUTTON_TYPE.FONT,
text: wordings.clear,
disabled: !imgData,
},
{
clickAction: _this.reset,
cssClass: service_helpers_1.BUTTON_TYPE.FONT,
text: wordings.reset,
},
],
cssClass: 'btn-group-xs',
};
var rightBtn = {
btns: [
{
clickAction: _this.save,
cssClass: service_helpers_1.BUTTON_TYPE.PRIMARY,
text: wordings.saveToProfile,
disabled: !dirty,
},
],
cssClass: 'btn-group-xs',
style: { float: 'right' },
};
return (React.createElement(buttons_bar_1.default, { btnGroups: [leftBtn, rightBtn], locale: _this.props.locale }));
};
_this.clear = function () {
_this.signaturePad.clear();
_this.setState({
dirty: false,
signatureClear: _this.signaturePad.isEmpty(),
imgData: null,
}, function () { return _this.props.clearSignature && _this.props.clearSignature(); });
};
_this.reset = function () {
_this.setState({ imgData: _this.props.defaultSignature }, function () {
return _this.signaturePad.fromDataURL(_this.state.imgData);
});
};
_this.save = function () {
_this.props.saveSignature &&
_this.props.saveSignature(_this.signaturePad.toDataURL(_this.state.imgData));
};
_this.onEnd = function () {
_this.setState({ dirty: true, imgData: _this.signaturePad.toDataURL() }, function () {
_this.props.onChange && _this.props.onChange(_this.state.imgData);
});
};
_this.handleResize = function () {
if (!_this.clearTimeout) {
_this.clearTimeout = window.setTimeout(function () {
_this.clearTimeout = null;
_this.state.imgData && _this.signaturePad.fromDataURL(_this.state.imgData);
}, 500);
}
else {
window.clearTimeout(_this.clearTimeout);
}
};
_this.state = {
savedType: null,
imgData: props.defaultSignature,
signatureClear: true,
dirty: false,
wordings: (0, helpers_1.getWordings)({ WORDINGS: wordings_1.WORDINGS }, props.locale || 'en-US'),
};
return _this;
}
Signature.prototype.render = function () {
var _this = this;
var _a = this.props, label = _a.label, backgroundColor = _a.backgroundColor, containerCss = _a.containerCss, height = _a.height, width = _a.width, readonly = _a.readonly;
var imgData = this.state.imgData;
var canvasOptions = {
style: { margin: 0 },
onEnd: this.onEnd,
backgroundColor: backgroundColor || 'rgb(255, 255, 255)',
};
return (React.createElement("div", { className: containerCss },
React.createElement(Radium.Style, { scopeSelector: ".canvas-wrapper", rules: styles_1.Styles.canvas_wrapper }),
React.createElement("div", { className: "form-group" },
label ? React.createElement("label", null, label) : null,
React.createElement("div", null,
React.createElement("div", { className: "form-control canvas-wrapper text-center mgb-5" }, !readonly ? (React.createElement(react_signature_pad_wrapper_1.default, { ref: function (ref) { return (_this.signaturePad = ref); }, options: canvasOptions, height: height, width: width, redrawOnResize: true })) : (React.createElement("img", { src: imgData }))),
!readonly ? this.generateBtnsBar() : null))));
};
Signature.prototype.componentDidMount = function () {
if (!!this.signaturePad && !!this.props.defaultSignature) {
this.signaturePad.fromDataURL(this.props.defaultSignature);
}
window.addEventListener('resize', this.handleResize);
};
Signature.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.handleResize);
};
return Signature;
}(React.Component));
exports.default = Signature;
//# sourceMappingURL=index.js.map