etendo-ui-library 1.6.1 → 1.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-native/components/signature/Signature.constants.d.ts +14 -0
- package/dist-native/components/signature/Signature.constants.js +1 -0
- package/dist-native/components/signature/Signature.d.ts +4 -0
- package/dist-native/components/signature/Signature.js +1 -0
- package/dist-native/components/signature/Signature.style.d.ts +33 -0
- package/dist-native/components/signature/Signature.style.js +1 -0
- package/dist-native/components/signature/Signature.types.d.ts +27 -0
- package/dist-native/components/signature/Signature.types.js +1 -0
- package/dist-native/components/signature/components/SignatureButtons.d.ts +4 -0
- package/dist-native/components/signature/components/SignatureButtons.js +1 -0
- package/dist-native/components/signature/index.d.ts +2 -0
- package/dist-native/components/signature/index.js +1 -0
- package/dist-native/helpers/base64_utils.d.ts +2 -0
- package/dist-native/helpers/base64_utils.js +1 -0
- package/dist-web/components/signature/Signature.constants.d.ts +14 -0
- package/dist-web/components/signature/Signature.constants.js +14 -0
- package/dist-web/components/signature/Signature.d.ts +4 -0
- package/dist-web/components/signature/Signature.js +181 -0
- package/dist-web/components/signature/Signature.style.d.ts +33 -0
- package/dist-web/components/signature/Signature.style.js +35 -0
- package/dist-web/components/signature/Signature.types.d.ts +27 -0
- package/dist-web/components/signature/Signature.types.js +1 -0
- package/dist-web/components/signature/components/SignatureButtons.d.ts +4 -0
- package/dist-web/components/signature/components/SignatureButtons.js +31 -0
- package/dist-web/components/signature/index.d.ts +2 -0
- package/dist-web/components/signature/index.js +2 -0
- package/dist-web/helpers/base64_utils.d.ts +2 -0
- package/dist-web/helpers/base64_utils.js +23 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
declare const WIDTH_BUTTON = "100%";
|
|
2
|
+
declare const TYPE_STYLE_BUTTON = "primary";
|
|
3
|
+
declare const FILL_DEFAULT = "none";
|
|
4
|
+
declare const STROKE_COLOR_DEFAULT = "black";
|
|
5
|
+
declare const STROKE_WIDTH_DEFAULT = 1;
|
|
6
|
+
declare const SAVE_BUTTON_LABEL_DEFAULT = "Save";
|
|
7
|
+
declare const CLEAR_BUTTON_LABEL_DEFAULT = "Clear";
|
|
8
|
+
declare const SAVE_FORMAT_DEFAULT = "base64";
|
|
9
|
+
declare const SAVE_HEIGHT_SVG_DEFAULT = 300;
|
|
10
|
+
declare const SAVE_WIDTH_SVG_DEFAULT = 400;
|
|
11
|
+
declare const SVG_XMLNS = "http://www.w3.org/2000/svg";
|
|
12
|
+
declare const SVG_FOOTER = "</svg>";
|
|
13
|
+
declare const SVG_BASE64_PREFIX = "data:image/svg+xml;base64";
|
|
14
|
+
export { WIDTH_BUTTON, TYPE_STYLE_BUTTON, FILL_DEFAULT, STROKE_COLOR_DEFAULT, STROKE_WIDTH_DEFAULT, SAVE_BUTTON_LABEL_DEFAULT, CLEAR_BUTTON_LABEL_DEFAULT, SAVE_FORMAT_DEFAULT, SAVE_HEIGHT_SVG_DEFAULT, SAVE_WIDTH_SVG_DEFAULT, SVG_XMLNS, SVG_FOOTER, SVG_BASE64_PREFIX, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.WIDTH_BUTTON=exports.TYPE_STYLE_BUTTON=exports.SVG_XMLNS=exports.SVG_FOOTER=exports.SVG_BASE64_PREFIX=exports.STROKE_WIDTH_DEFAULT=exports.STROKE_COLOR_DEFAULT=exports.SAVE_WIDTH_SVG_DEFAULT=exports.SAVE_HEIGHT_SVG_DEFAULT=exports.SAVE_FORMAT_DEFAULT=exports.SAVE_BUTTON_LABEL_DEFAULT=exports.FILL_DEFAULT=exports.CLEAR_BUTTON_LABEL_DEFAULT=void 0;var WIDTH_BUTTON=exports.WIDTH_BUTTON='100%';var TYPE_STYLE_BUTTON=exports.TYPE_STYLE_BUTTON='primary';var FILL_DEFAULT=exports.FILL_DEFAULT='none';var STROKE_COLOR_DEFAULT=exports.STROKE_COLOR_DEFAULT='black';var STROKE_WIDTH_DEFAULT=exports.STROKE_WIDTH_DEFAULT=1;var SAVE_BUTTON_LABEL_DEFAULT=exports.SAVE_BUTTON_LABEL_DEFAULT='Save';var CLEAR_BUTTON_LABEL_DEFAULT=exports.CLEAR_BUTTON_LABEL_DEFAULT='Clear';var SAVE_FORMAT_DEFAULT=exports.SAVE_FORMAT_DEFAULT='base64';var SAVE_HEIGHT_SVG_DEFAULT=exports.SAVE_HEIGHT_SVG_DEFAULT=300;var SAVE_WIDTH_SVG_DEFAULT=exports.SAVE_WIDTH_SVG_DEFAULT=400;var SVG_XMLNS=exports.SVG_XMLNS='http://www.w3.org/2000/svg';var SVG_FOOTER=exports.SVG_FOOTER='</svg>';var SVG_BASE64_PREFIX=exports.SVG_BASE64_PREFIX='data:image/svg+xml;base64';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _base64_utils=require("../../helpers/base64_utils");var _Signature=require("./Signature.style");var _Signature2=require("./Signature.constants");var _SignatureButtons=_interopRequireDefault(require("./components/SignatureButtons"));var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/signature/Signature.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var Signature=function Signature(_ref){var containerStyle=_ref.containerStyle,_ref$strokeColor=_ref.strokeColor,strokeColor=_ref$strokeColor===void 0?_Signature2.STROKE_COLOR_DEFAULT:_ref$strokeColor,_ref$strokeWidth=_ref.strokeWidth,strokeWidth=_ref$strokeWidth===void 0?_Signature2.STROKE_WIDTH_DEFAULT:_ref$strokeWidth,_ref$saveButtonLabel=_ref.saveButtonLabel,saveButtonLabel=_ref$saveButtonLabel===void 0?_Signature2.SAVE_BUTTON_LABEL_DEFAULT:_ref$saveButtonLabel,_ref$clearButtonLabel=_ref.clearButtonLabel,clearButtonLabel=_ref$clearButtonLabel===void 0?_Signature2.CLEAR_BUTTON_LABEL_DEFAULT:_ref$clearButtonLabel,_ref$saveFormat=_ref.saveFormat,saveFormat=_ref$saveFormat===void 0?_Signature2.SAVE_FORMAT_DEFAULT:_ref$saveFormat,_ref$saveHeightSvg=_ref.saveHeightSvg,saveHeightSvg=_ref$saveHeightSvg===void 0?_Signature2.SAVE_HEIGHT_SVG_DEFAULT:_ref$saveHeightSvg,_ref$saveWidthSvg=_ref.saveWidthSvg,saveWidthSvg=_ref$saveWidthSvg===void 0?_Signature2.SAVE_WIDTH_SVG_DEFAULT:_ref$saveWidthSvg,onSave=_ref.onSave,onClear=_ref.onClear,onStart=_ref.onStart,onMove=_ref.onMove,onEnd=_ref.onEnd,renderSaveButton=_ref.renderSaveButton,renderClearButton=_ref.renderClearButton;var _useState=(0,_react.useState)(''),_useState2=(0,_slicedToArray2.default)(_useState,2),pathData=_useState2[0],setPathData=_useState2[1];var _useState3=(0,_react.useState)([]),_useState4=(0,_slicedToArray2.default)(_useState3,2),paths=_useState4[0],setPaths=_useState4[1];var pathRef=(0,_react.useRef)('');var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),isDrawing=_useState6[0],setIsDrawing=_useState6[1];var _useState7=(0,_react.useState)({width:0,height:0}),_useState8=(0,_slicedToArray2.default)(_useState7,2),svgDimensions=_useState8[0],setSvgDimensions=_useState8[1];var handleLayout=function handleLayout(event){var _event$nativeEvent$la=event.nativeEvent.layout,width=_event$nativeEvent$la.width,height=_event$nativeEvent$la.height;setSvgDimensions({width:width,height:height});};var isWithinBounds=function isWithinBounds(x,y){return x>0&&x<svgDimensions.width&&y>0&&y<svgDimensions.height;};var handleTouchStart=function handleTouchStart(event){var _event$nativeEvent=event.nativeEvent,locationX=_event$nativeEvent.locationX,locationY=_event$nativeEvent.locationY;if(isWithinBounds(locationX,locationY)){pathRef.current="M"+locationX+","+locationY;setPathData(pathRef.current);setIsDrawing(true);onStart==null?void 0:onStart(event);}};var handleTouchMove=function handleTouchMove(event){if(!isDrawing)return;var _event$nativeEvent2=event.nativeEvent,locationX=_event$nativeEvent2.locationX,locationY=_event$nativeEvent2.locationY;if(isWithinBounds(locationX,locationY)){pathRef.current+=" L"+locationX+","+locationY;setPathData(pathRef.current);onMove==null?void 0:onMove(event);}else{setIsDrawing(false);handleTouchEnd();}};var handleTouchEnd=function handleTouchEnd(){if(isDrawing){setPaths([].concat((0,_toConsumableArray2.default)(paths),[pathRef.current]));pathRef.current='';setPathData('');setIsDrawing(false);onEnd==null?void 0:onEnd();}};var handleClear=function handleClear(){setPaths([]);setPathData('');onClear==null?void 0:onClear();};var generateSvgString=function generateSvgString(){var svgHeader="<svg xmlns=\""+_Signature2.SVG_XMLNS+"\" width=\""+saveWidthSvg+"\" height=\""+saveHeightSvg+"\">";var pathElements=paths.map(function(p){return"<path d=\""+p+"\" stroke=\""+strokeColor+"\" stroke-width=\""+strokeWidth+"\" fill="+_Signature2.FILL_DEFAULT+"/>";}).join('');return""+svgHeader+pathElements+_Signature2.SVG_FOOTER;};var saveSignature=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){var svgString=generateSvgString();switch(saveFormat){case'svg':{onSave==null?void 0:onSave(svgString);break;}case'base64':{var base64Svg=_Signature2.SVG_BASE64_PREFIX+","+(0,_base64_utils.encodeBase64)(svgString);onSave==null?void 0:onSave(base64Svg);break;}}});return function saveSignature(){return _ref2.apply(this,arguments);};}();return _react.default.createElement(_reactNative.View,{style:[_Signature.styles.container,containerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:_Signature.styles.svgContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:7}},_react.default.createElement(_reactNativeSvg.default,{onLayout:handleLayout,onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd,__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:9}},paths.map(function(d,index){return _react.default.createElement(_reactNativeSvg.Path,{key:index+'Signature',d:d,stroke:strokeColor,strokeWidth:strokeWidth,fill:_Signature2.FILL_DEFAULT,__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:13}});}),_react.default.createElement(_reactNativeSvg.Path,{d:pathData,stroke:strokeColor,strokeWidth:strokeWidth,fill:_Signature2.FILL_DEFAULT,__self:_this,__source:{fileName:_jsxFileName,lineNumber:143,columnNumber:11}}))),_react.default.createElement(_SignatureButtons.default,{renderSaveButton:renderSaveButton,renderClearButton:renderClearButton,saveSignature:saveSignature,handleClear:handleClear,saveButtonLabel:saveButtonLabel,clearButtonLabel:clearButtonLabel,__self:_this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:7}}));};var _default=exports.default=Signature;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export declare const styles: {
|
|
2
|
+
container: {
|
|
3
|
+
display: "flex";
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
};
|
|
7
|
+
svgContainer: {
|
|
8
|
+
flex: number;
|
|
9
|
+
borderRadius: number;
|
|
10
|
+
backgroundColor: string;
|
|
11
|
+
shadowColor: string;
|
|
12
|
+
shadowOffset: {
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
};
|
|
16
|
+
shadowOpacity: number;
|
|
17
|
+
shadowRadius: number;
|
|
18
|
+
elevation: number;
|
|
19
|
+
display: "flex";
|
|
20
|
+
};
|
|
21
|
+
buttons: {
|
|
22
|
+
display: "flex";
|
|
23
|
+
height: number;
|
|
24
|
+
flexDirection: "row";
|
|
25
|
+
};
|
|
26
|
+
buttonContainer: {
|
|
27
|
+
marginTop: number;
|
|
28
|
+
flex: number;
|
|
29
|
+
};
|
|
30
|
+
buttonSpace: {
|
|
31
|
+
marginRight: number;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{display:'flex',width:400,height:360},svgContainer:{flex:1,borderRadius:8,backgroundColor:_colors.NEUTRAL_50,shadowColor:_colors.NEUTRAL_100,shadowOffset:{width:0,height:2},shadowOpacity:0.3,shadowRadius:4,elevation:5,display:'flex'},buttons:{display:'flex',height:60,flexDirection:'row'},buttonContainer:{marginTop:8,flex:0.5},buttonSpace:{marginRight:4}});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
export interface ISignaturePadProps {
|
|
3
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
4
|
+
strokeColor?: string;
|
|
5
|
+
strokeWidth?: number;
|
|
6
|
+
saveButtonLabel?: string;
|
|
7
|
+
clearButtonLabel?: string;
|
|
8
|
+
saveFormat?: 'svg' | 'base64';
|
|
9
|
+
saveHeightSvg?: number;
|
|
10
|
+
saveWidthSvg?: number;
|
|
11
|
+
onSave?: (base64Svg: string) => void;
|
|
12
|
+
onClear?: () => void;
|
|
13
|
+
onCancel?: () => void;
|
|
14
|
+
onStart?: (event: GestureResponderEvent) => void;
|
|
15
|
+
onMove?: (event: GestureResponderEvent) => void;
|
|
16
|
+
onEnd?: () => void;
|
|
17
|
+
renderSaveButton?: (onPress: () => void) => React.ReactNode;
|
|
18
|
+
renderClearButton?: (onPress: () => void) => React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
export interface ISignatureButtonsProps {
|
|
21
|
+
renderSaveButton?: (onPress: () => void) => React.ReactNode;
|
|
22
|
+
renderClearButton?: (onPress: () => void) => React.ReactNode;
|
|
23
|
+
saveSignature: () => void;
|
|
24
|
+
handleClear: () => void;
|
|
25
|
+
saveButtonLabel: string;
|
|
26
|
+
clearButtonLabel: string;
|
|
27
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Signature=require("../Signature.constants");var _button=require("../../button");var _Signature2=require("../Signature.style");var _this=this,_jsxFileName="/home/jenkins/agent/workspace/etendo_ui_library_develop/etendo_ui_library/src/components/signature/components/SignatureButtons.tsx";var SignatureButtons=function SignatureButtons(_ref){var renderSaveButton=_ref.renderSaveButton,renderClearButton=_ref.renderClearButton,saveSignature=_ref.saveSignature,handleClear=_ref.handleClear,saveButtonLabel=_ref.saveButtonLabel,clearButtonLabel=_ref.clearButtonLabel;return _react.default.createElement(_reactNative.View,{style:_Signature2.styles.buttons,__self:_this,__source:{fileName:_jsxFileName,lineNumber:17,columnNumber:5}},renderSaveButton?renderSaveButton(saveSignature):_react.default.createElement(_reactNative.View,{style:[_Signature2.styles.buttonContainer,_Signature2.styles.buttonSpace],__self:_this,__source:{fileName:_jsxFileName,lineNumber:21,columnNumber:9}},_react.default.createElement(_button.Button,{text:saveButtonLabel,onPress:saveSignature,typeStyle:_Signature.TYPE_STYLE_BUTTON,width:_Signature.WIDTH_BUTTON,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:11}})),renderClearButton?renderClearButton(handleClear):_react.default.createElement(_reactNative.View,{style:_Signature2.styles.buttonContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:9}},_react.default.createElement(_button.Button,{text:clearButtonLabel,onPress:handleClear,typeStyle:_Signature.TYPE_STYLE_BUTTON,width:_Signature.WIDTH_BUTTON,__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:11}})));};var _default=exports.default=SignatureButtons;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Signature",{enumerable:true,get:function get(){return _Signature.default;}});var _Signature=_interopRequireDefault(require("./Signature"));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});exports.encodeBase64=void 0;var BASE_64_CHARS='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';var encodeBase64=exports.encodeBase64=function encodeBase64(str){var binary='';for(var i=0;i<str.length;i++){binary+=String.fromCharCode(str.charCodeAt(i));}var base64='';for(var _i=0;_i<binary.length;_i+=3){var triplet=binary.charCodeAt(_i)<<16|binary.charCodeAt(_i+1)<<8|binary.charCodeAt(_i+2);base64+=BASE_64_CHARS[triplet>>18&0x3f];base64+=BASE_64_CHARS[triplet>>12&0x3f];base64+=BASE_64_CHARS[triplet>>6&0x3f];base64+=BASE_64_CHARS[triplet&0x3f];}var pad=str.length%3;if(pad===1){base64=base64.slice(0,-2)+'==';}else if(pad===2){base64=base64.slice(0,-1)+'=';}return base64;};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
declare const WIDTH_BUTTON = "100%";
|
|
2
|
+
declare const TYPE_STYLE_BUTTON = "primary";
|
|
3
|
+
declare const FILL_DEFAULT = "none";
|
|
4
|
+
declare const STROKE_COLOR_DEFAULT = "black";
|
|
5
|
+
declare const STROKE_WIDTH_DEFAULT = 1;
|
|
6
|
+
declare const SAVE_BUTTON_LABEL_DEFAULT = "Save";
|
|
7
|
+
declare const CLEAR_BUTTON_LABEL_DEFAULT = "Clear";
|
|
8
|
+
declare const SAVE_FORMAT_DEFAULT = "base64";
|
|
9
|
+
declare const SAVE_HEIGHT_SVG_DEFAULT = 300;
|
|
10
|
+
declare const SAVE_WIDTH_SVG_DEFAULT = 400;
|
|
11
|
+
declare const SVG_XMLNS = "http://www.w3.org/2000/svg";
|
|
12
|
+
declare const SVG_FOOTER = "</svg>";
|
|
13
|
+
declare const SVG_BASE64_PREFIX = "data:image/svg+xml;base64";
|
|
14
|
+
export { WIDTH_BUTTON, TYPE_STYLE_BUTTON, FILL_DEFAULT, STROKE_COLOR_DEFAULT, STROKE_WIDTH_DEFAULT, SAVE_BUTTON_LABEL_DEFAULT, CLEAR_BUTTON_LABEL_DEFAULT, SAVE_FORMAT_DEFAULT, SAVE_HEIGHT_SVG_DEFAULT, SAVE_WIDTH_SVG_DEFAULT, SVG_XMLNS, SVG_FOOTER, SVG_BASE64_PREFIX, };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
var WIDTH_BUTTON = '100%';
|
|
2
|
+
var TYPE_STYLE_BUTTON = 'primary';
|
|
3
|
+
var FILL_DEFAULT = 'none';
|
|
4
|
+
var STROKE_COLOR_DEFAULT = 'black';
|
|
5
|
+
var STROKE_WIDTH_DEFAULT = 1;
|
|
6
|
+
var SAVE_BUTTON_LABEL_DEFAULT = 'Save';
|
|
7
|
+
var CLEAR_BUTTON_LABEL_DEFAULT = 'Clear';
|
|
8
|
+
var SAVE_FORMAT_DEFAULT = 'base64';
|
|
9
|
+
var SAVE_HEIGHT_SVG_DEFAULT = 300;
|
|
10
|
+
var SAVE_WIDTH_SVG_DEFAULT = 400;
|
|
11
|
+
var SVG_XMLNS = 'http://www.w3.org/2000/svg';
|
|
12
|
+
var SVG_FOOTER = '</svg>';
|
|
13
|
+
var SVG_BASE64_PREFIX = 'data:image/svg+xml;base64';
|
|
14
|
+
export { WIDTH_BUTTON, TYPE_STYLE_BUTTON, FILL_DEFAULT, STROKE_COLOR_DEFAULT, STROKE_WIDTH_DEFAULT, SAVE_BUTTON_LABEL_DEFAULT, CLEAR_BUTTON_LABEL_DEFAULT, SAVE_FORMAT_DEFAULT, SAVE_HEIGHT_SVG_DEFAULT, SAVE_WIDTH_SVG_DEFAULT, SVG_XMLNS, SVG_FOOTER, SVG_BASE64_PREFIX };
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
3
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
4
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
5
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
6
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
8
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
9
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
10
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
11
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
12
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
13
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
14
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
15
|
+
import React, { useRef, useState } from 'react';
|
|
16
|
+
import { View } from "react-native-web";
|
|
17
|
+
import Svg, { Path } from "react-native-svg-web";
|
|
18
|
+
import { encodeBase64 } from "../../helpers/base64_utils";
|
|
19
|
+
import { styles } from "./Signature.style";
|
|
20
|
+
import { CLEAR_BUTTON_LABEL_DEFAULT, SAVE_BUTTON_LABEL_DEFAULT, SAVE_FORMAT_DEFAULT, STROKE_COLOR_DEFAULT, STROKE_WIDTH_DEFAULT, SVG_BASE64_PREFIX, SVG_FOOTER, SAVE_HEIGHT_SVG_DEFAULT, SAVE_WIDTH_SVG_DEFAULT, SVG_XMLNS, FILL_DEFAULT } from "./Signature.constants";
|
|
21
|
+
import SignatureButtons from "./components/SignatureButtons";
|
|
22
|
+
var Signature = function Signature(_ref) {
|
|
23
|
+
var containerStyle = _ref.containerStyle,
|
|
24
|
+
_ref$strokeColor = _ref.strokeColor,
|
|
25
|
+
strokeColor = _ref$strokeColor === void 0 ? STROKE_COLOR_DEFAULT : _ref$strokeColor,
|
|
26
|
+
_ref$strokeWidth = _ref.strokeWidth,
|
|
27
|
+
strokeWidth = _ref$strokeWidth === void 0 ? STROKE_WIDTH_DEFAULT : _ref$strokeWidth,
|
|
28
|
+
_ref$saveButtonLabel = _ref.saveButtonLabel,
|
|
29
|
+
saveButtonLabel = _ref$saveButtonLabel === void 0 ? SAVE_BUTTON_LABEL_DEFAULT : _ref$saveButtonLabel,
|
|
30
|
+
_ref$clearButtonLabel = _ref.clearButtonLabel,
|
|
31
|
+
clearButtonLabel = _ref$clearButtonLabel === void 0 ? CLEAR_BUTTON_LABEL_DEFAULT : _ref$clearButtonLabel,
|
|
32
|
+
_ref$saveFormat = _ref.saveFormat,
|
|
33
|
+
saveFormat = _ref$saveFormat === void 0 ? SAVE_FORMAT_DEFAULT : _ref$saveFormat,
|
|
34
|
+
_ref$saveHeightSvg = _ref.saveHeightSvg,
|
|
35
|
+
saveHeightSvg = _ref$saveHeightSvg === void 0 ? SAVE_HEIGHT_SVG_DEFAULT : _ref$saveHeightSvg,
|
|
36
|
+
_ref$saveWidthSvg = _ref.saveWidthSvg,
|
|
37
|
+
saveWidthSvg = _ref$saveWidthSvg === void 0 ? SAVE_WIDTH_SVG_DEFAULT : _ref$saveWidthSvg,
|
|
38
|
+
onSave = _ref.onSave,
|
|
39
|
+
onClear = _ref.onClear,
|
|
40
|
+
onStart = _ref.onStart,
|
|
41
|
+
onMove = _ref.onMove,
|
|
42
|
+
onEnd = _ref.onEnd,
|
|
43
|
+
renderSaveButton = _ref.renderSaveButton,
|
|
44
|
+
renderClearButton = _ref.renderClearButton;
|
|
45
|
+
var _useState = useState(''),
|
|
46
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
47
|
+
pathData = _useState2[0],
|
|
48
|
+
setPathData = _useState2[1];
|
|
49
|
+
var _useState3 = useState([]),
|
|
50
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
+
paths = _useState4[0],
|
|
52
|
+
setPaths = _useState4[1];
|
|
53
|
+
var pathRef = useRef('');
|
|
54
|
+
var _useState5 = useState(false),
|
|
55
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
56
|
+
isDrawing = _useState6[0],
|
|
57
|
+
setIsDrawing = _useState6[1];
|
|
58
|
+
var _useState7 = useState({
|
|
59
|
+
width: 0,
|
|
60
|
+
height: 0
|
|
61
|
+
}),
|
|
62
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
63
|
+
svgDimensions = _useState8[0],
|
|
64
|
+
setSvgDimensions = _useState8[1];
|
|
65
|
+
var handleLayout = function handleLayout(event) {
|
|
66
|
+
var _event$nativeEvent$la = event.nativeEvent.layout,
|
|
67
|
+
width = _event$nativeEvent$la.width,
|
|
68
|
+
height = _event$nativeEvent$la.height;
|
|
69
|
+
setSvgDimensions({
|
|
70
|
+
width: width,
|
|
71
|
+
height: height
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
var isWithinBounds = function isWithinBounds(x, y) {
|
|
75
|
+
return x > 0 && x < svgDimensions.width && y > 0 && y < svgDimensions.height;
|
|
76
|
+
};
|
|
77
|
+
var handleTouchStart = function handleTouchStart(event) {
|
|
78
|
+
var _event$nativeEvent = event.nativeEvent,
|
|
79
|
+
locationX = _event$nativeEvent.locationX,
|
|
80
|
+
locationY = _event$nativeEvent.locationY;
|
|
81
|
+
if (isWithinBounds(locationX, locationY)) {
|
|
82
|
+
pathRef.current = "M".concat(locationX, ",").concat(locationY);
|
|
83
|
+
setPathData(pathRef.current);
|
|
84
|
+
setIsDrawing(true);
|
|
85
|
+
onStart === null || onStart === void 0 || onStart(event);
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
var handleTouchMove = function handleTouchMove(event) {
|
|
89
|
+
if (!isDrawing) return;
|
|
90
|
+
var _event$nativeEvent2 = event.nativeEvent,
|
|
91
|
+
locationX = _event$nativeEvent2.locationX,
|
|
92
|
+
locationY = _event$nativeEvent2.locationY;
|
|
93
|
+
if (isWithinBounds(locationX, locationY)) {
|
|
94
|
+
pathRef.current += " L".concat(locationX, ",").concat(locationY);
|
|
95
|
+
setPathData(pathRef.current);
|
|
96
|
+
onMove === null || onMove === void 0 || onMove(event);
|
|
97
|
+
} else {
|
|
98
|
+
setIsDrawing(false);
|
|
99
|
+
handleTouchEnd();
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
var handleTouchEnd = function handleTouchEnd() {
|
|
103
|
+
if (isDrawing) {
|
|
104
|
+
setPaths([].concat(_toConsumableArray(paths), [pathRef.current]));
|
|
105
|
+
pathRef.current = '';
|
|
106
|
+
setPathData('');
|
|
107
|
+
setIsDrawing(false);
|
|
108
|
+
onEnd === null || onEnd === void 0 || onEnd();
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
var handleClear = function handleClear() {
|
|
112
|
+
setPaths([]);
|
|
113
|
+
setPathData('');
|
|
114
|
+
onClear === null || onClear === void 0 || onClear();
|
|
115
|
+
};
|
|
116
|
+
var generateSvgString = function generateSvgString() {
|
|
117
|
+
var svgHeader = "<svg xmlns=\"".concat(SVG_XMLNS, "\" width=\"").concat(saveWidthSvg, "\" height=\"").concat(saveHeightSvg, "\">");
|
|
118
|
+
var pathElements = paths.map(function (p) {
|
|
119
|
+
return "<path d=\"".concat(p, "\" stroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\" fill=").concat(FILL_DEFAULT, "/>");
|
|
120
|
+
}).join('');
|
|
121
|
+
return "".concat(svgHeader).concat(pathElements).concat(SVG_FOOTER);
|
|
122
|
+
};
|
|
123
|
+
var saveSignature = /*#__PURE__*/function () {
|
|
124
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
125
|
+
var svgString, base64Svg;
|
|
126
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
127
|
+
while (1) switch (_context.prev = _context.next) {
|
|
128
|
+
case 0:
|
|
129
|
+
svgString = generateSvgString();
|
|
130
|
+
_context.t0 = saveFormat;
|
|
131
|
+
_context.next = _context.t0 === 'svg' ? 4 : _context.t0 === 'base64' ? 6 : 9;
|
|
132
|
+
break;
|
|
133
|
+
case 4:
|
|
134
|
+
onSave === null || onSave === void 0 || onSave(svgString);
|
|
135
|
+
return _context.abrupt("break", 9);
|
|
136
|
+
case 6:
|
|
137
|
+
base64Svg = "".concat(SVG_BASE64_PREFIX, ",").concat(encodeBase64(svgString));
|
|
138
|
+
onSave === null || onSave === void 0 || onSave(base64Svg);
|
|
139
|
+
return _context.abrupt("break", 9);
|
|
140
|
+
case 9:
|
|
141
|
+
case "end":
|
|
142
|
+
return _context.stop();
|
|
143
|
+
}
|
|
144
|
+
}, _callee);
|
|
145
|
+
}));
|
|
146
|
+
return function saveSignature() {
|
|
147
|
+
return _ref2.apply(this, arguments);
|
|
148
|
+
};
|
|
149
|
+
}();
|
|
150
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
151
|
+
style: [styles.container, containerStyle]
|
|
152
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
153
|
+
style: styles.svgContainer
|
|
154
|
+
}, /*#__PURE__*/React.createElement(Svg, {
|
|
155
|
+
onLayout: handleLayout,
|
|
156
|
+
onTouchStart: handleTouchStart,
|
|
157
|
+
onTouchMove: handleTouchMove,
|
|
158
|
+
onTouchEnd: handleTouchEnd
|
|
159
|
+
}, paths.map(function (d, index) {
|
|
160
|
+
return /*#__PURE__*/React.createElement(Path, {
|
|
161
|
+
key: index + 'Signature',
|
|
162
|
+
d: d,
|
|
163
|
+
stroke: strokeColor,
|
|
164
|
+
strokeWidth: strokeWidth,
|
|
165
|
+
fill: FILL_DEFAULT
|
|
166
|
+
});
|
|
167
|
+
}), /*#__PURE__*/React.createElement(Path, {
|
|
168
|
+
d: pathData,
|
|
169
|
+
stroke: strokeColor,
|
|
170
|
+
strokeWidth: strokeWidth,
|
|
171
|
+
fill: FILL_DEFAULT
|
|
172
|
+
}))), /*#__PURE__*/React.createElement(SignatureButtons, {
|
|
173
|
+
renderSaveButton: renderSaveButton,
|
|
174
|
+
renderClearButton: renderClearButton,
|
|
175
|
+
saveSignature: saveSignature,
|
|
176
|
+
handleClear: handleClear,
|
|
177
|
+
saveButtonLabel: saveButtonLabel,
|
|
178
|
+
clearButtonLabel: clearButtonLabel
|
|
179
|
+
}));
|
|
180
|
+
};
|
|
181
|
+
export default Signature;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export declare const styles: {
|
|
2
|
+
container: {
|
|
3
|
+
display: "flex";
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
};
|
|
7
|
+
svgContainer: {
|
|
8
|
+
flex: number;
|
|
9
|
+
borderRadius: number;
|
|
10
|
+
backgroundColor: string;
|
|
11
|
+
shadowColor: string;
|
|
12
|
+
shadowOffset: {
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
};
|
|
16
|
+
shadowOpacity: number;
|
|
17
|
+
shadowRadius: number;
|
|
18
|
+
elevation: number;
|
|
19
|
+
display: "flex";
|
|
20
|
+
};
|
|
21
|
+
buttons: {
|
|
22
|
+
display: "flex";
|
|
23
|
+
height: number;
|
|
24
|
+
flexDirection: "row";
|
|
25
|
+
};
|
|
26
|
+
buttonContainer: {
|
|
27
|
+
marginTop: number;
|
|
28
|
+
flex: number;
|
|
29
|
+
};
|
|
30
|
+
buttonSpace: {
|
|
31
|
+
marginRight: number;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { StyleSheet } from "react-native-web";
|
|
2
|
+
import { NEUTRAL_100, NEUTRAL_50 } from "../../styles/colors";
|
|
3
|
+
export var styles = StyleSheet.create({
|
|
4
|
+
container: {
|
|
5
|
+
display: 'flex',
|
|
6
|
+
width: 400,
|
|
7
|
+
height: 360
|
|
8
|
+
},
|
|
9
|
+
svgContainer: {
|
|
10
|
+
flex: 1,
|
|
11
|
+
borderRadius: 8,
|
|
12
|
+
backgroundColor: NEUTRAL_50,
|
|
13
|
+
shadowColor: NEUTRAL_100,
|
|
14
|
+
shadowOffset: {
|
|
15
|
+
width: 0,
|
|
16
|
+
height: 2
|
|
17
|
+
},
|
|
18
|
+
shadowOpacity: 0.3,
|
|
19
|
+
shadowRadius: 4,
|
|
20
|
+
elevation: 5,
|
|
21
|
+
display: 'flex'
|
|
22
|
+
},
|
|
23
|
+
buttons: {
|
|
24
|
+
display: 'flex',
|
|
25
|
+
height: 60,
|
|
26
|
+
flexDirection: 'row'
|
|
27
|
+
},
|
|
28
|
+
buttonContainer: {
|
|
29
|
+
marginTop: 8,
|
|
30
|
+
flex: 0.5
|
|
31
|
+
},
|
|
32
|
+
buttonSpace: {
|
|
33
|
+
marginRight: 4
|
|
34
|
+
}
|
|
35
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
|
|
2
|
+
export interface ISignaturePadProps {
|
|
3
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
4
|
+
strokeColor?: string;
|
|
5
|
+
strokeWidth?: number;
|
|
6
|
+
saveButtonLabel?: string;
|
|
7
|
+
clearButtonLabel?: string;
|
|
8
|
+
saveFormat?: 'svg' | 'base64';
|
|
9
|
+
saveHeightSvg?: number;
|
|
10
|
+
saveWidthSvg?: number;
|
|
11
|
+
onSave?: (base64Svg: string) => void;
|
|
12
|
+
onClear?: () => void;
|
|
13
|
+
onCancel?: () => void;
|
|
14
|
+
onStart?: (event: GestureResponderEvent) => void;
|
|
15
|
+
onMove?: (event: GestureResponderEvent) => void;
|
|
16
|
+
onEnd?: () => void;
|
|
17
|
+
renderSaveButton?: (onPress: () => void) => React.ReactNode;
|
|
18
|
+
renderClearButton?: (onPress: () => void) => React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
export interface ISignatureButtonsProps {
|
|
21
|
+
renderSaveButton?: (onPress: () => void) => React.ReactNode;
|
|
22
|
+
renderClearButton?: (onPress: () => void) => React.ReactNode;
|
|
23
|
+
saveSignature: () => void;
|
|
24
|
+
handleClear: () => void;
|
|
25
|
+
saveButtonLabel: string;
|
|
26
|
+
clearButtonLabel: string;
|
|
27
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from "react-native-web";
|
|
3
|
+
import { TYPE_STYLE_BUTTON, WIDTH_BUTTON } from "../Signature.constants";
|
|
4
|
+
import { Button } from "../../button";
|
|
5
|
+
import { styles } from "../Signature.style";
|
|
6
|
+
var SignatureButtons = function SignatureButtons(_ref) {
|
|
7
|
+
var renderSaveButton = _ref.renderSaveButton,
|
|
8
|
+
renderClearButton = _ref.renderClearButton,
|
|
9
|
+
saveSignature = _ref.saveSignature,
|
|
10
|
+
handleClear = _ref.handleClear,
|
|
11
|
+
saveButtonLabel = _ref.saveButtonLabel,
|
|
12
|
+
clearButtonLabel = _ref.clearButtonLabel;
|
|
13
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
14
|
+
style: styles.buttons
|
|
15
|
+
}, renderSaveButton ? renderSaveButton(saveSignature) : /*#__PURE__*/React.createElement(View, {
|
|
16
|
+
style: [styles.buttonContainer, styles.buttonSpace]
|
|
17
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
18
|
+
text: saveButtonLabel,
|
|
19
|
+
onPress: saveSignature,
|
|
20
|
+
typeStyle: TYPE_STYLE_BUTTON,
|
|
21
|
+
width: WIDTH_BUTTON
|
|
22
|
+
})), renderClearButton ? renderClearButton(handleClear) : /*#__PURE__*/React.createElement(View, {
|
|
23
|
+
style: styles.buttonContainer
|
|
24
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
25
|
+
text: clearButtonLabel,
|
|
26
|
+
onPress: handleClear,
|
|
27
|
+
typeStyle: TYPE_STYLE_BUTTON,
|
|
28
|
+
width: WIDTH_BUTTON
|
|
29
|
+
})));
|
|
30
|
+
};
|
|
31
|
+
export default SignatureButtons;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var BASE_64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
2
|
+
var encodeBase64 = function encodeBase64(str) {
|
|
3
|
+
var binary = '';
|
|
4
|
+
for (var i = 0; i < str.length; i++) {
|
|
5
|
+
binary += String.fromCharCode(str.charCodeAt(i));
|
|
6
|
+
}
|
|
7
|
+
var base64 = '';
|
|
8
|
+
for (var _i = 0; _i < binary.length; _i += 3) {
|
|
9
|
+
var triplet = binary.charCodeAt(_i) << 16 | binary.charCodeAt(_i + 1) << 8 | binary.charCodeAt(_i + 2);
|
|
10
|
+
base64 += BASE_64_CHARS[triplet >> 18 & 0x3f];
|
|
11
|
+
base64 += BASE_64_CHARS[triplet >> 12 & 0x3f];
|
|
12
|
+
base64 += BASE_64_CHARS[triplet >> 6 & 0x3f];
|
|
13
|
+
base64 += BASE_64_CHARS[triplet & 0x3f];
|
|
14
|
+
}
|
|
15
|
+
var pad = str.length % 3;
|
|
16
|
+
if (pad === 1) {
|
|
17
|
+
base64 = base64.slice(0, -2) + '==';
|
|
18
|
+
} else if (pad === 2) {
|
|
19
|
+
base64 = base64.slice(0, -1) + '=';
|
|
20
|
+
}
|
|
21
|
+
return base64;
|
|
22
|
+
};
|
|
23
|
+
export { encodeBase64 };
|
package/index.d.ts
CHANGED
|
@@ -28,6 +28,7 @@ const {
|
|
|
28
28
|
Navbar,
|
|
29
29
|
Pagination,
|
|
30
30
|
SearchContainer,
|
|
31
|
+
Signature,
|
|
31
32
|
setAlertDefaultDuration,
|
|
32
33
|
show,
|
|
33
34
|
SkeletonItem,
|
|
@@ -344,6 +345,7 @@ export {
|
|
|
344
345
|
DatePickerInput,
|
|
345
346
|
FileSearchInput,
|
|
346
347
|
DropdownInput,
|
|
348
|
+
Signature,
|
|
347
349
|
SeachInput,
|
|
348
350
|
PasswordInput,
|
|
349
351
|
TextInput,
|
package/index.js
CHANGED
|
@@ -28,6 +28,7 @@ const {
|
|
|
28
28
|
Navbar,
|
|
29
29
|
Pagination,
|
|
30
30
|
SearchContainer,
|
|
31
|
+
Signature,
|
|
31
32
|
setAlertDefaultDuration,
|
|
32
33
|
show,
|
|
33
34
|
SkeletonItem,
|
|
@@ -343,6 +344,7 @@ export {
|
|
|
343
344
|
InputBase,
|
|
344
345
|
DatePickerInput,
|
|
345
346
|
FileSearchInput,
|
|
347
|
+
Signature,
|
|
346
348
|
SearchInput,
|
|
347
349
|
DropdownInput,
|
|
348
350
|
PasswordInput,
|