@popsure/dirty-swan 0.32.0 → 0.33.0

package/dist/esm/components/signaturePad/index.js

@@ -1,560 +0,0 @@
-import { e as __extends, _ as __assign } from '../../tslib.es6-5bc94358.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React__default, { Component } from 'react';
-import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-
-/*!
- * Signature Pad v3.0.0-beta.4 | https://github.com/szimek/signature_pad
- * (c) 2020 Szymon Nowak | Released under the MIT license
- */
-
-class Point {
-    constructor(x, y, time) {
-        this.x = x;
-        this.y = y;
-        this.time = time || Date.now();
-    }
-    distanceTo(start) {
-        return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
-    }
-    equals(other) {
-        return this.x === other.x && this.y === other.y && this.time === other.time;
-    }
-    velocityFrom(start) {
-        return this.time !== start.time
-            ? this.distanceTo(start) / (this.time - start.time)
-            : 0;
-    }
-}
-
-class Bezier {
-    constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
-        this.startPoint = startPoint;
-        this.control2 = control2;
-        this.control1 = control1;
-        this.endPoint = endPoint;
-        this.startWidth = startWidth;
-        this.endWidth = endWidth;
-    }
-    static fromPoints(points, widths) {
-        const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
-        const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
-        return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
-    }
-    static calculateControlPoints(s1, s2, s3) {
-        const dx1 = s1.x - s2.x;
-        const dy1 = s1.y - s2.y;
-        const dx2 = s2.x - s3.x;
-        const dy2 = s2.y - s3.y;
-        const m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
-        const m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
-        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-        const dxm = m1.x - m2.x;
-        const dym = m1.y - m2.y;
-        const k = l2 / (l1 + l2);
-        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
-        const tx = s2.x - cm.x;
-        const ty = s2.y - cm.y;
-        return {
-            c1: new Point(m1.x + tx, m1.y + ty),
-            c2: new Point(m2.x + tx, m2.y + ty),
-        };
-    }
-    length() {
-        const steps = 10;
-        let length = 0;
-        let px;
-        let py;
-        for (let i = 0; i <= steps; i += 1) {
-            const t = i / steps;
-            const cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
-            const cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
-            if (i > 0) {
-                const xdiff = cx - px;
-                const ydiff = cy - py;
-                length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
-            }
-            px = cx;
-            py = cy;
-        }
-        return length;
-    }
-    point(t, start, c1, c2, end) {
-        return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
-            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
-            + (3.0 * c2 * (1.0 - t) * t * t)
-            + (end * t * t * t);
-    }
-}
-
-function throttle(fn, wait = 250) {
-    let previous = 0;
-    let timeout = null;
-    let result;
-    let storedContext;
-    let storedArgs;
-    const later = () => {
-        previous = Date.now();
-        timeout = null;
-        result = fn.apply(storedContext, storedArgs);
-        if (!timeout) {
-            storedContext = null;
-            storedArgs = [];
-        }
-    };
-    return function wrapper(...args) {
-        const now = Date.now();
-        const remaining = wait - (now - previous);
-        storedContext = this;
-        storedArgs = args;
-        if (remaining <= 0 || remaining > wait) {
-            if (timeout) {
-                clearTimeout(timeout);
-                timeout = null;
-            }
-            previous = now;
-            result = fn.apply(storedContext, storedArgs);
-            if (!timeout) {
-                storedContext = null;
-                storedArgs = [];
-            }
-        }
-        else if (!timeout) {
-            timeout = window.setTimeout(later, remaining);
-        }
-        return result;
-    };
-}
-
-class SignaturePad {
-    constructor(canvas, options = {}) {
-        this.canvas = canvas;
-        this.options = options;
-        this._handleMouseDown = (event) => {
-            if (event.which === 1) {
-                this._mouseButtonDown = true;
-                this._strokeBegin(event);
-            }
-        };
-        this._handleMouseMove = (event) => {
-            if (this._mouseButtonDown) {
-                this._strokeMoveUpdate(event);
-            }
-        };
-        this._handleMouseUp = (event) => {
-            if (event.which === 1 && this._mouseButtonDown) {
-                this._mouseButtonDown = false;
-                this._strokeEnd(event);
-            }
-        };
-        this._handleTouchStart = (event) => {
-            event.preventDefault();
-            if (event.targetTouches.length === 1) {
-                const touch = event.changedTouches[0];
-                this._strokeBegin(touch);
-            }
-        };
-        this._handleTouchMove = (event) => {
-            event.preventDefault();
-            const touch = event.targetTouches[0];
-            this._strokeMoveUpdate(touch);
-        };
-        this._handleTouchEnd = (event) => {
-            const wasCanvasTouched = event.target === this.canvas;
-            if (wasCanvasTouched) {
-                event.preventDefault();
-                const touch = event.changedTouches[0];
-                this._strokeEnd(touch);
-            }
-        };
-        this.velocityFilterWeight = options.velocityFilterWeight || 0.7;
-        this.minWidth = options.minWidth || 0.5;
-        this.maxWidth = options.maxWidth || 2.5;
-        this.throttle = ('throttle' in options ? options.throttle : 16);
-        this.minDistance = ('minDistance' in options
-            ? options.minDistance
-            : 5);
-        this.dotSize =
-            options.dotSize ||
-                function dotSize() {
-                    return (this.minWidth + this.maxWidth) / 2;
-                };
-        this.penColor = options.penColor || 'black';
-        this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
-        this.onBegin = options.onBegin;
-        this.onEnd = options.onEnd;
-        this._strokeMoveUpdate = this.throttle
-            ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
-            : SignaturePad.prototype._strokeUpdate;
-        this._ctx = canvas.getContext('2d');
-        this.clear();
-        this.on();
-    }
-    clear() {
-        const { _ctx: ctx, canvas } = this;
-        ctx.fillStyle = this.backgroundColor;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        this._data = [];
-        this._reset();
-        this._isEmpty = true;
-    }
-    fromDataURL(dataUrl, options = {}, callback) {
-        const image = new Image();
-        const ratio = options.ratio || window.devicePixelRatio || 1;
-        const width = options.width || this.canvas.width / ratio;
-        const height = options.height || this.canvas.height / ratio;
-        this._reset();
-        image.onload = () => {
-            this._ctx.drawImage(image, 0, 0, width, height);
-            if (callback) {
-                callback();
-            }
-        };
-        image.onerror = (error) => {
-            if (callback) {
-                callback(error);
-            }
-        };
-        image.src = dataUrl;
-        this._isEmpty = false;
-    }
-    toDataURL(type = 'image/png', encoderOptions) {
-        switch (type) {
-            case 'image/svg+xml':
-                return this._toSVG();
-            default:
-                return this.canvas.toDataURL(type, encoderOptions);
-        }
-    }
-    on() {
-        this.canvas.style.touchAction = 'none';
-        this.canvas.style.msTouchAction = 'none';
-        if (window.PointerEvent) {
-            this._handlePointerEvents();
-        }
-        else {
-            this._handleMouseEvents();
-            if ('ontouchstart' in window) {
-                this._handleTouchEvents();
-            }
-        }
-    }
-    off() {
-        this.canvas.style.touchAction = 'auto';
-        this.canvas.style.msTouchAction = 'auto';
-        this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
-        this.canvas.removeEventListener('pointermove', this._handleMouseMove);
-        document.removeEventListener('pointerup', this._handleMouseUp);
-        this.canvas.removeEventListener('mousedown', this._handleMouseDown);
-        this.canvas.removeEventListener('mousemove', this._handleMouseMove);
-        document.removeEventListener('mouseup', this._handleMouseUp);
-        this.canvas.removeEventListener('touchstart', this._handleTouchStart);
-        this.canvas.removeEventListener('touchmove', this._handleTouchMove);
-        this.canvas.removeEventListener('touchend', this._handleTouchEnd);
-    }
-    isEmpty() {
-        return this._isEmpty;
-    }
-    fromData(pointGroups) {
-        this.clear();
-        this._fromData(pointGroups, ({ color, curve }) => this._drawCurve({ color, curve }), ({ color, point }) => this._drawDot({ color, point }));
-        this._data = pointGroups;
-    }
-    toData() {
-        return this._data;
-    }
-    _strokeBegin(event) {
-        const newPointGroup = {
-            color: this.penColor,
-            points: [],
-        };
-        if (typeof this.onBegin === 'function') {
-            this.onBegin(event);
-        }
-        this._data.push(newPointGroup);
-        this._reset();
-        this._strokeUpdate(event);
-    }
-    _strokeUpdate(event) {
-        if (this._data.length === 0) {
-            this._strokeBegin(event);
-            return;
-        }
-        const x = event.clientX;
-        const y = event.clientY;
-        const point = this._createPoint(x, y);
-        const lastPointGroup = this._data[this._data.length - 1];
-        const lastPoints = lastPointGroup.points;
-        const lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
-        const isLastPointTooClose = lastPoint
-            ? point.distanceTo(lastPoint) <= this.minDistance
-            : false;
-        const color = lastPointGroup.color;
-        if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
-            const curve = this._addPoint(point);
-            if (!lastPoint) {
-                this._drawDot({ color, point });
-            }
-            else if (curve) {
-                this._drawCurve({ color, curve });
-            }
-            lastPoints.push({
-                time: point.time,
-                x: point.x,
-                y: point.y,
-            });
-        }
-    }
-    _strokeEnd(event) {
-        this._strokeUpdate(event);
-        if (typeof this.onEnd === 'function') {
-            this.onEnd(event);
-        }
-    }
-    _handlePointerEvents() {
-        this._mouseButtonDown = false;
-        this.canvas.addEventListener('pointerdown', this._handleMouseDown);
-        this.canvas.addEventListener('pointermove', this._handleMouseMove);
-        document.addEventListener('pointerup', this._handleMouseUp);
-    }
-    _handleMouseEvents() {
-        this._mouseButtonDown = false;
-        this.canvas.addEventListener('mousedown', this._handleMouseDown);
-        this.canvas.addEventListener('mousemove', this._handleMouseMove);
-        document.addEventListener('mouseup', this._handleMouseUp);
-    }
-    _handleTouchEvents() {
-        this.canvas.addEventListener('touchstart', this._handleTouchStart);
-        this.canvas.addEventListener('touchmove', this._handleTouchMove);
-        this.canvas.addEventListener('touchend', this._handleTouchEnd);
-    }
-    _reset() {
-        this._lastPoints = [];
-        this._lastVelocity = 0;
-        this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-        this._ctx.fillStyle = this.penColor;
-    }
-    _createPoint(x, y) {
-        const rect = this.canvas.getBoundingClientRect();
-        return new Point(x - rect.left, y - rect.top, new Date().getTime());
-    }
-    _addPoint(point) {
-        const { _lastPoints } = this;
-        _lastPoints.push(point);
-        if (_lastPoints.length > 2) {
-            if (_lastPoints.length === 3) {
-                _lastPoints.unshift(_lastPoints[0]);
-            }
-            const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
-            const curve = Bezier.fromPoints(_lastPoints, widths);
-            _lastPoints.shift();
-            return curve;
-        }
-        return null;
-    }
-    _calculateCurveWidths(startPoint, endPoint) {
-        const velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-            (1 - this.velocityFilterWeight) * this._lastVelocity;
-        const newWidth = this._strokeWidth(velocity);
-        const widths = {
-            end: newWidth,
-            start: this._lastWidth,
-        };
-        this._lastVelocity = velocity;
-        this._lastWidth = newWidth;
-        return widths;
-    }
-    _strokeWidth(velocity) {
-        return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
-    }
-    _drawCurveSegment(x, y, width) {
-        const ctx = this._ctx;
-        ctx.moveTo(x, y);
-        ctx.arc(x, y, width, 0, 2 * Math.PI, false);
-        this._isEmpty = false;
-    }
-    _drawCurve({ color, curve }) {
-        const ctx = this._ctx;
-        const widthDelta = curve.endWidth - curve.startWidth;
-        const drawSteps = Math.floor(curve.length()) * 2;
-        ctx.beginPath();
-        ctx.fillStyle = color;
-        for (let i = 0; i < drawSteps; i += 1) {
-            const t = i / drawSteps;
-            const tt = t * t;
-            const ttt = tt * t;
-            const u = 1 - t;
-            const uu = u * u;
-            const uuu = uu * u;
-            let x = uuu * curve.startPoint.x;
-            x += 3 * uu * t * curve.control1.x;
-            x += 3 * u * tt * curve.control2.x;
-            x += ttt * curve.endPoint.x;
-            let y = uuu * curve.startPoint.y;
-            y += 3 * uu * t * curve.control1.y;
-            y += 3 * u * tt * curve.control2.y;
-            y += ttt * curve.endPoint.y;
-            const width = Math.min(curve.startWidth + ttt * widthDelta, this.maxWidth);
-            this._drawCurveSegment(x, y, width);
-        }
-        ctx.closePath();
-        ctx.fill();
-    }
-    _drawDot({ color, point, }) {
-        const ctx = this._ctx;
-        const width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
-        ctx.beginPath();
-        this._drawCurveSegment(point.x, point.y, width);
-        ctx.closePath();
-        ctx.fillStyle = color;
-        ctx.fill();
-    }
-    _fromData(pointGroups, drawCurve, drawDot) {
-        for (const group of pointGroups) {
-            const { color, points } = group;
-            if (points.length > 1) {
-                for (let j = 0; j < points.length; j += 1) {
-                    const basicPoint = points[j];
-                    const point = new Point(basicPoint.x, basicPoint.y, basicPoint.time);
-                    this.penColor = color;
-                    if (j === 0) {
-                        this._reset();
-                    }
-                    const curve = this._addPoint(point);
-                    if (curve) {
-                        drawCurve({ color, curve });
-                    }
-                }
-            }
-            else {
-                this._reset();
-                drawDot({
-                    color,
-                    point: points[0],
-                });
-            }
-        }
-    }
-    _toSVG() {
-        const pointGroups = this._data;
-        const ratio = Math.max(window.devicePixelRatio || 1, 1);
-        const minX = 0;
-        const minY = 0;
-        const maxX = this.canvas.width / ratio;
-        const maxY = this.canvas.height / ratio;
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', this.canvas.width.toString());
-        svg.setAttribute('height', this.canvas.height.toString());
-        this._fromData(pointGroups, ({ color, curve }) => {
-            const path = document.createElement('path');
-            if (!isNaN(curve.control1.x) &&
-                !isNaN(curve.control1.y) &&
-                !isNaN(curve.control2.x) &&
-                !isNaN(curve.control2.y)) {
-                const attr = `M ${curve.startPoint.x.toFixed(3)},${curve.startPoint.y.toFixed(3)} ` +
-                    `C ${curve.control1.x.toFixed(3)},${curve.control1.y.toFixed(3)} ` +
-                    `${curve.control2.x.toFixed(3)},${curve.control2.y.toFixed(3)} ` +
-                    `${curve.endPoint.x.toFixed(3)},${curve.endPoint.y.toFixed(3)}`;
-                path.setAttribute('d', attr);
-                path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
-                path.setAttribute('stroke', color);
-                path.setAttribute('fill', 'none');
-                path.setAttribute('stroke-linecap', 'round');
-                svg.appendChild(path);
-            }
-        }, ({ color, point }) => {
-            const circle = document.createElement('circle');
-            const dotSize = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
-            circle.setAttribute('r', dotSize.toString());
-            circle.setAttribute('cx', point.x.toString());
-            circle.setAttribute('cy', point.y.toString());
-            circle.setAttribute('fill', color);
-            svg.appendChild(circle);
-        });
-        const prefix = 'data:image/svg+xml;base64,';
-        const header = '<svg' +
-            ' xmlns="http://www.w3.org/2000/svg"' +
-            ' xmlns:xlink="http://www.w3.org/1999/xlink"' +
-            ` viewBox="${minX} ${minY} ${maxX} ${maxY}"` +
-            ` width="${maxX}"` +
-            ` height="${maxY}"` +
-            '>';
-        let body = svg.innerHTML;
-        if (body === undefined) {
-            const dummy = document.createElement('dummy');
-            const nodes = svg.childNodes;
-            dummy.innerHTML = '';
-            for (let i = 0; i < nodes.length; i += 1) {
-                dummy.appendChild(nodes[i].cloneNode(true));
-            }
-            body = dummy.innerHTML;
-        }
-        const footer = '</svg>';
-        const data = header + body + footer;
-        return prefix + btoa(data);
-    }
-}
-
-var css_248z = ".style-module_container__1VolG {\n  position: relative;\n  background-color: var(--ds-grey-200);\n  border-radius: 8px;\n  height: 272px;\n}\n\n.style-module_canvas__1Q440 {\n  width: 100%;\n  height: 100%;\n}\n\n.style-module_separator__Fdmnn {\n  position: absolute;\n  height: 2px;\n  right: 112px;\n  left: 72px;\n  bottom: 32px;\n  background-color: var(--ds-grey-400);\n  border-radius: 1px;\n}\n\n.style-module_reset__1ePiM {\n  display: flex;\n  position: absolute;\n  right: 16px;\n  bottom: 32px;\n  color: var(--ds-primary-500);\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  font-size: 16px;\n  line-height: 24px;\n  background-color: transparent;\n}\n.style-module_reset__1ePiM:hover {\n  color: var(--ds-primary-700);\n}\n.style-module_reset__1ePiM:before {\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  background-color: currentColor;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-background-color: currentColor;\n  margin-right: 4px;\n}\n.style-module_reset__1ePiM[disabled] {\n  color: var(--ds-grey-500);\n}\n\n.style-module_sign__35Gp2 {\n  position: absolute;\n  bottom: 32px;\n  left: 16px;\n  height: 24px;\n  width: 24px;\n  mask-size: 24px 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  -webkit-mask-size: 24px 24px;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  background-color: var(--ds-grey-500);\n}";
-var styles = {"container":"style-module_container__1VolG","canvas":"style-module_canvas__1Q440","separator":"style-module_separator__Fdmnn","reset":"style-module_reset__1ePiM","sign":"style-module_sign__35Gp2"};
-styleInject(css_248z);
-
-var sign = "data:image/svg+xml,%3Csvg%20width%3D%2280%22%20height%3D%2280%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.7%203.70001C13.3%204.00001%2013.5%205.10001%2014.1%206.20001C14.7%207.30001%2014.9%209.20001%2014.6%2010.5C14.1%2012.3%2015.3%2014.4%2019.3%2019.7C22.2%2023.4%2025.6%2028%2026.9%2029.8L29.2%2033L23%2039.7C19.7%2043.4%2017.1%2046.9%2017.4%2047.6C17.7%2048.3%2017.2%2049.4%2016.4%2050C14.8%2051.4%2014.5%2054%2016.1%2054C17.5%2054%2023.6%2049.5%2029%2044.4L33.5%2040.1L41%2051.3C49.2%2063.6%2053.7%2069%2055.8%2069C56.6%2069%2056.8%2068.5%2056.4%2067.7C56%2067.1%2057.8%2068.9%2060.5%2071.8C63.1%2074.7%2065.5%2076.9%2065.7%2076.6C65.9%2076.4%2065.2%2074.4%2064.1%2072.1C62.9%2069.9%2062%2067.2%2062%2066.2C62%2063.3%2054.5%2047.6%2048.9%2039C46.2%2034.8%2044%2031%2044%2030.6C44%2030.2%2046.2%2027.3%2048.9%2024.2C54.3%2017.9%2059%2011.2%2059%209.80001C59%209.30001%2057.7%209.10001%2056%209.50001C54.2%209.90001%2050.5%2012.7%2046.4%2017.1C42.7%2020.9%2039.4%2024%2039.1%2024C38.8%2024%2036.3%2020.7%2033.6%2016.8C30.9%2012.9%2027.9%209.50001%2027%209.30001C26%209.00001%2024.3%207.60001%2023.2%206.10001C21.7%204.10001%2020.3%203.30001%2017.7%203.20001C15.8%203.10001%2014%203.30001%2013.7%203.70001Z%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fsvg%3E";
-
-var reset = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%204V10H7%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3.51%2014.9999C4.15839%2016.8403%205.38734%2018.4201%207.01166%2019.5013C8.63598%2020.5825%2010.5677%2021.1065%2012.5157%2020.9944C14.4637%2020.8823%2016.3226%2020.1401%2017.8121%2018.8797C19.3017%2017.6193%2020.3413%2015.9089%2020.7742%2014.0063C21.2072%2012.1037%2021.0101%2010.1119%2020.2126%208.33105C19.4152%206.55019%2018.0605%205.07674%2016.3528%204.13271C14.6451%203.18868%2012.6769%202.82521%2010.7447%203.09707C8.81245%203.36892%207.02091%204.26137%205.64%205.63995L1%209.99995%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
-
-var Signature = /** @class */ (function (_super) {
-    __extends(Signature, _super);
-    function Signature(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            hasContent: false,
-        };
-        _this.canvasRef = React__default.createRef();
-        _this.notifyOnChange = _this.notifyOnChange.bind(_this);
-        _this.resizeCanvas = _this.resizeCanvas.bind(_this);
-        _this.clear = _this.clear.bind(_this);
-        return _this;
-    }
-    Signature.prototype.componentDidMount = function () {
-        this.canvas = this.canvasRef.current;
-        this.signaturePad = new SignaturePad(this.canvas, {
-            onEnd: this.notifyOnChange,
-        });
-        this.resizeCanvas();
-    };
-    Signature.prototype.render = function () {
-        var hasContent = this.state.hasContent;
-        return (jsxs(Fragment, { children: [jsx("style", { dangerouslySetInnerHTML: {
-                        __html: "." + styles.reset + "::before { \n              -webkit-mask-image: url(\"" + reset + "\");\n              mask-image: url(\"" + reset + "\");\n           }",
-                    } }, void 0),
-                jsxs("div", __assign({ className: styles.container }, { children: [jsx("canvas", { className: styles.canvas, ref: this.canvasRef }, void 0),
-                        jsx("div", { className: styles.separator }, void 0),
-                        jsx("div", { className: styles.sign, style: {
-                                WebkitMaskImage: "url(\"" + sign + "\")",
-                                maskImage: "url(\"" + sign + "\")",
-                            } }, void 0),
-                        jsx("button", __assign({ className: styles.reset, onClick: this.clear, disabled: !hasContent }, { children: "Reset" }), void 0)] }), void 0)] }, void 0));
-    };
-    Signature.prototype.notifyOnChange = function () {
-        var onChange = this.props.onChange;
-        onChange(this.signaturePad.isEmpty() ? '' : this.signaturePad.toDataURL());
-        this.setState({ hasContent: !this.signaturePad.isEmpty() });
-    };
-    Signature.prototype.resizeCanvas = function () {
-        var ratio = Math.max(window.devicePixelRatio || 1, 1);
-        this.canvas.width = this.canvas.offsetWidth * ratio;
-        this.canvas.height = this.canvas.offsetHeight * ratio;
-        this.canvas.getContext('2d').scale(ratio, ratio);
-    };
-    Signature.prototype.clear = function () {
-        this.signaturePad.clear();
-        this.notifyOnChange();
-    };
-    return Signature;
-}(Component));
-
-export default Signature;
-//# sourceMappingURL=index.js.map