@archireport/react-native-svg-draw 1.3.0 → 2.0.0

package/lib/module/components/DrawWithOptions/TextSvg.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Svg","Defs","Path","G","Mask","Use","SvgComponent","props"],"sources":["TextSvg.tsx"],"sourcesContent":["import * as React from 'react';\nimport Svg, { SvgProps, Defs, Path, G, Mask, Use } from 'react-native-svg';\n\nfunction SvgComponent(props: SvgProps) {\n  return (\n    <Svg viewBox=\"0 0 28 28\" {...props}>\n      <Defs>\n        <Path\n          id=\"prefix__a\"\n          d=\"M23.333 3.5c.645 0 1.167.522 1.167 1.167v3.5a1.166 1.166 0 01-2.333 0V5.833h-7.001v16.333H17.5c.601 0 1.096.456 1.16 1.04l.007.127c0 .645-.523 1.167-1.167 1.167l-3.482-.001L14 24.5h-3.5a1.167 1.167 0 010-2.333l2.333-.001V5.833h-7v2.334a1.166 1.166 0 11-2.333 0v-3.5c0-.645.522-1.167 1.167-1.167z\"\n        />\n      </Defs>\n      <G fill=\"none\" fillRule=\"evenodd\">\n        <Mask id=\"prefix__b\" fill=\"#fff\">\n          <Use xlinkHref=\"#prefix__a\" />\n        </Mask>\n        <Use fill=\"#000\" fillRule=\"nonzero\" xlinkHref=\"#prefix__a\" />\n        <G fill=\"#FFF\" mask=\"url(#prefix__b)\">\n          <Path d=\"M0 0h28v28H0z\" />\n        </G>\n      </G>\n    </Svg>\n  );\n}\n\nexport default SvgComponent;\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,GAAP,IAAwBC,IAAxB,EAA8BC,IAA9B,EAAoCC,CAApC,EAAuCC,IAAvC,EAA6CC,GAA7C,QAAwD,kBAAxD;;AAEA,SAASC,YAAT,CAAsBC,KAAtB,EAAuC;EACrC,oBACE,oBAAC,GAAD;IAAK,OAAO,EAAC;EAAb,GAA6BA,KAA7B,gBACE,oBAAC,IAAD,qBACE,oBAAC,IAAD;IACE,EAAE,EAAC,WADL;IAEE,CAAC,EAAC;EAFJ,EADF,CADF,eAOE,oBAAC,CAAD;IAAG,IAAI,EAAC,MAAR;IAAe,QAAQ,EAAC;EAAxB,gBACE,oBAAC,IAAD;IAAM,EAAE,EAAC,WAAT;IAAqB,IAAI,EAAC;EAA1B,gBACE,oBAAC,GAAD;IAAK,SAAS,EAAC;EAAf,EADF,CADF,eAIE,oBAAC,GAAD;IAAK,IAAI,EAAC,MAAV;IAAiB,QAAQ,EAAC,SAA1B;IAAoC,SAAS,EAAC;EAA9C,EAJF,eAKE,oBAAC,CAAD;IAAG,IAAI,EAAC,MAAR;IAAe,IAAI,EAAC;EAApB,gBACE,oBAAC,IAAD;IAAM,CAAC,EAAC;EAAR,EADF,CALF,CAPF,CADF;AAmBD;;AAED,eAAeD,YAAf"}
+{"version":3,"names":["React","Svg","Defs","Path","G","Mask","Use","SvgComponent","props"],"sourceRoot":"../../../../src","sources":["components/DrawWithOptions/TextSvg.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,IAAcC,IAAI,EAAEC,IAAI,EAAEC,CAAC,EAAEC,IAAI,EAAEC,GAAG,QAAQ,kBAAkB;AAE1E,SAASC,YAAY,CAACC,KAAe,EAAE;EACrC,oBACE,oBAAC,GAAG;IAAC,OAAO,EAAC;EAAW,GAAKA,KAAK,gBAChC,oBAAC,IAAI,qBACH,oBAAC,IAAI;IACH,EAAE,EAAC,WAAW;IACd,CAAC,EAAC;EAAyS,EAC3S,CACG,eACP,oBAAC,CAAC;IAAC,IAAI,EAAC,MAAM;IAAC,QAAQ,EAAC;EAAS,gBAC/B,oBAAC,IAAI;IAAC,EAAE,EAAC,WAAW;IAAC,IAAI,EAAC;EAAM,gBAC9B,oBAAC,GAAG;IAAC,SAAS,EAAC;EAAY,EAAG,CACzB,eACP,oBAAC,GAAG;IAAC,IAAI,EAAC,MAAM;IAAC,QAAQ,EAAC,SAAS;IAAC,SAAS,EAAC;EAAY,EAAG,eAC7D,oBAAC,CAAC;IAAC,IAAI,EAAC,MAAM;IAAC,IAAI,EAAC;EAAiB,gBACnC,oBAAC,IAAI;IAAC,CAAC,EAAC;EAAe,EAAG,CACxB,CACF,CACA;AAEV;AAEA,eAAeD,YAAY"}

package/lib/module/components/DrawWithOptions/ThrashSvg.js

@@ -1,15 +1,37 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import Svg, { Path } from 'react-native-svg';
-
 function ThrashSvg(props) {
   return /*#__PURE__*/React.createElement(Svg, _extends({
-    viewBox: "0 0 28 29"
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25",
+    fill: "none"
   }, props), /*#__PURE__*/React.createElement(Path, {
-    d: "M14 0a3.5 3.5 0 013.5 3.5l-.001 1.166h4.668c.601 0 1.096.456 1.16 1.04l.006.127c0 .645-.522 1.167-1.166 1.167l-1.168-.001L21 22.167a3.5 3.5 0 01-3.308 3.494l-.192.006H5.833a3.5 3.5 0 01-3.5-3.5V6.999L1.167 7a1.166 1.166 0 01-1.16-1.04L0 5.833c0-.644.522-1.166 1.167-1.166l4.666-.001V3.5A3.5 3.5 0 019.141.005L9.333 0zM6.982 7l-2.316-.001v15.168c0 .601.456 1.096 1.04 1.16l.127.006H17.5c.644 0 1.167-.522 1.167-1.166l-.001-15.168h-2.315L16.333 7h-.018l-9.298-.001L7 7h-.018zm2.351 3.5c.645 0 1.167.522 1.167 1.167v7a1.166 1.166 0 01-2.333 0v-7c0-.645.522-1.167 1.166-1.167zm4.667 0c.644 0 1.167.522 1.167 1.167v7a1.167 1.167 0 01-2.334 0v-7c0-.645.523-1.167 1.167-1.167zm0-8.167H9.333c-.644 0-1.166.523-1.166 1.167l-.001 1.166h7V3.5c0-.601-.454-1.096-1.039-1.16L14 2.333z"
+    d: "M3.5 6.5L5.5 6.5L21.5 6.5",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M8.5 6.5V4.5C8.5 3.96957 8.71071 3.46086 9.08579 3.08579C9.46086 2.71071 9.96957 2.5 10.5 2.5L14.5 2.5C15.0304 2.5 15.5391 2.71071 15.9142 3.08579C16.2893 3.46086 16.5 3.96957 16.5 4.5V6.5M19.5 6.5L19.5 20.5C19.5 21.0304 19.2893 21.5391 18.9142 21.9142C18.5391 22.2893 18.0304 22.5 17.5 22.5L7.5 22.5C6.96957 22.5 6.46086 22.2893 6.08579 21.9142C5.71071 21.5391 5.5 21.0304 5.5 20.5L5.5 6.5L19.5 6.5Z",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M10.5 11.5L10.5 17.5",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement(Path, {
+    d: "M14.5 11.5L14.5 17.5",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
   }));
 }
-
 export default ThrashSvg;
 //# sourceMappingURL=ThrashSvg.js.map

package/lib/module/components/DrawWithOptions/ThrashSvg.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Svg","Path","ThrashSvg","props"],"sources":["ThrashSvg.tsx"],"sourcesContent":["import React from 'react';\nimport Svg, { SvgProps, Path } from 'react-native-svg';\n\nfunction ThrashSvg(props: SvgProps) {\n  return (\n    <Svg viewBox=\"0 0 28 29\" {...props}>\n      <Path d=\"M14 0a3.5 3.5 0 013.5 3.5l-.001 1.166h4.668c.601 0 1.096.456 1.16 1.04l.006.127c0 .645-.522 1.167-1.166 1.167l-1.168-.001L21 22.167a3.5 3.5 0 01-3.308 3.494l-.192.006H5.833a3.5 3.5 0 01-3.5-3.5V6.999L1.167 7a1.166 1.166 0 01-1.16-1.04L0 5.833c0-.644.522-1.166 1.167-1.166l4.666-.001V3.5A3.5 3.5 0 019.141.005L9.333 0zM6.982 7l-2.316-.001v15.168c0 .601.456 1.096 1.04 1.16l.127.006H17.5c.644 0 1.167-.522 1.167-1.166l-.001-15.168h-2.315L16.333 7h-.018l-9.298-.001L7 7h-.018zm2.351 3.5c.645 0 1.167.522 1.167 1.167v7a1.166 1.166 0 01-2.333 0v-7c0-.645.522-1.167 1.166-1.167zm4.667 0c.644 0 1.167.522 1.167 1.167v7a1.167 1.167 0 01-2.334 0v-7c0-.645.523-1.167 1.167-1.167zm0-8.167H9.333c-.644 0-1.166.523-1.166 1.167l-.001 1.166h7V3.5c0-.601-.454-1.096-1.039-1.16L14 2.333z\" />\n    </Svg>\n  );\n}\n\nexport default ThrashSvg;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,GAAP,IAAwBC,IAAxB,QAAoC,kBAApC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAAoC;EAClC,oBACE,oBAAC,GAAD;IAAK,OAAO,EAAC;EAAb,GAA6BA,KAA7B,gBACE,oBAAC,IAAD;IAAM,CAAC,EAAC;EAAR,EADF,CADF;AAKD;;AAED,eAAeD,SAAf"}
+{"version":3,"names":["React","Svg","Path","ThrashSvg","props"],"sourceRoot":"../../../../src","sources":["components/DrawWithOptions/ThrashSvg.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,IAAcC,IAAI,QAAQ,kBAAkB;AAEtD,SAASC,SAAS,CAACC,KAAe,EAAE;EAClC,oBACE,oBAAC,GAAG;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,WAAW;IAAC,IAAI,EAAC;EAAM,GAAKA,KAAK,gBACnE,oBAAC,IAAI;IACH,CAAC,EAAC,2BAA2B;IAC7B,MAAM,EAAC,cAAc;IACrB,gBAAa,GAAG;IAChB,kBAAe,OAAO;IACtB,mBAAgB;EAAO,EACvB,eACF,oBAAC,IAAI;IACH,CAAC,EAAC,kZAAkZ;IACpZ,MAAM,EAAC,cAAc;IACrB,gBAAa,GAAG;IAChB,kBAAe,OAAO;IACtB,mBAAgB;EAAO,EACvB,eACF,oBAAC,IAAI;IACH,CAAC,EAAC,sBAAsB;IACxB,MAAM,EAAC,cAAc;IACrB,gBAAa,GAAG;IAChB,kBAAe,OAAO;IACtB,mBAAgB;EAAO,EACvB,eACF,oBAAC,IAAI;IACH,CAAC,EAAC,sBAAsB;IACxB,MAAM,EAAC,cAAc;IACrB,gBAAa,GAAG;IAChB,kBAAe,OAAO;IACtB,mBAAgB;EAAO,EACvB,CACE;AAEV;AAEA,eAAeD,SAAS"}

package/lib/module/components/DrawWithOptions/index.js

@@ -1,39 +1,49 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Pressable, View, StyleSheet, Keyboard } from 'react-native';
-import DrawCore from '../DrawCore';
-import PenSvg from './PenSvg';
 import DoubleHeadSvg from './DoubleHeadSvg';
 import CircleSvg from './CircleSvg';
 import SquareSvg from './SquareSvg';
 import ArrowSvg from './ArrowSvg';
 import TextSvg from './TextSvg';
 import CloseSvg from './CloseSvg';
+import PenSvg from './PenSvg';
+import useDrawHook from '../DrawCore/useDrawHook';
+import Sliders from '../Slider/Sliders';
+import DrawCore from '../DrawCore';
 import ThrashSvg from './ThrashSvg';
-import SendSvg from './SendSvg';
 import CancelSvg from './CancelSvg';
+import SendSvg from './SendSvg';
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#000000'
+    flex: 1
+  },
+  actionButton: {
+    backgroundColor: 'grey',
+    padding: 10,
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    height: 40,
+    borderRadius: 20,
+    width: 40
   },
   option: {
-    width: 30,
-    height: 30,
+    width: 22,
+    height: 20,
     justifyContent: 'center',
     alignItems: 'center',
-    marginHorizontal: 4
+    marginHorizontal: 8
   },
   toolbar: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
     paddingBottom: 30,
     paddingTop: 15,
     paddingHorizontal: 15
   },
   drawOptions: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flex: 1,
+    paddingHorizontal: 10
   },
   sendButton: {
     backgroundColor: '#3a6cff',
@@ -53,23 +63,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20
   }
 });
-export default function DrawWithOptions(_ref) {
+export default function DrawWithOption(_ref) {
   let {
-    close,
-    takeSnapshot,
     linearGradient,
     image,
-    defaultDrawingMode = 'ellipse'
+    close,
+    takeSnapshot
   } = _ref;
-  const drawRef = useRef(null);
-  const [drawingMode, setDrawingMode] = useState(defaultDrawingMode);
-  const [selectedItem, setSelectedItem] = useState(false);
-  const [cancelEnabled, setCancelEnabled] = useState(false);
-  const onPressSend = useCallback(() => {
-    if (drawRef.current) {
-      takeSnapshot === null || takeSnapshot === void 0 ? void 0 : takeSnapshot(drawRef.current.takeSnapshot());
-    }
-  }, [takeSnapshot]);
+  const {
+    itemIsSelected,
+    cancelLastAction,
+    takeSnapshot: takeSnapshotAction,
+    deleteSelectedItem,
+    dispatchDrawStates,
+    drawState
+  } = useDrawHook();
   const [showToolbar, setShowToolbar] = useState(true);
   useEffect(() => {
     const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -80,126 +88,171 @@ export default function DrawWithOptions(_ref) {
       if (event.endCoordinates.height > 100) {
         setShowToolbar(false);
       }
-    }); // cleanup function
+    });
 
+    // cleanup function
     return () => {
       sudDidShow.remove();
       sudDidHide.remove();
     };
   }, []);
+  const takeSnapshotAndGetUri = useCallback(async () => {
+    if (takeSnapshot) {
+      takeSnapshot(takeSnapshotAction());
+    }
+  }, [takeSnapshot, takeSnapshotAction]);
   return /*#__PURE__*/React.createElement(View, {
     style: styles.container
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.toolbar
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.actionButton
   }, /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.option,
     onPress: close
   }, /*#__PURE__*/React.createElement(CloseSvg, {
     height: 20,
     width: 20,
     fill: "#ffffff"
-  })), /*#__PURE__*/React.createElement(View, {
+  }))), /*#__PURE__*/React.createElement(View, {
     style: styles.drawOptions
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignSelf: 'center',
+      borderWidth: 1,
+      borderColor: 'grey',
+      borderRadius: 25,
+      height: 40,
+      paddingHorizontal: 10,
+      paddingVertical: 10
+    }
   }, /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('pen');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'pen'
+      });
     }
   }, /*#__PURE__*/React.createElement(PenSvg, {
     height: 23,
     width: 22,
     stroke: "#ffffff",
     strokeWidth: "2",
-    opacity: drawingMode === 'pen' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'pen' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('doubleHead');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'doubleHead'
+      });
     }
   }, /*#__PURE__*/React.createElement(DoubleHeadSvg, {
     height: 20,
     width: 20,
     fill: "#ffffff",
-    opacity: drawingMode === 'doubleHead' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'doubleHead' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('singleHead');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'singleHead'
+      });
     }
   }, /*#__PURE__*/React.createElement(ArrowSvg, {
     height: 23,
     width: 23,
     fill: "#ffffff",
-    opacity: drawingMode === 'singleHead' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'singleHead' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('rectangle');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'rectangle'
+      });
     }
   }, /*#__PURE__*/React.createElement(SquareSvg, {
     height: 27,
     width: 27,
     fill: "#ffffff",
-    opacity: drawingMode === 'rectangle' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'rectangle' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('ellipse');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'ellipse'
+      });
     }
   }, /*#__PURE__*/React.createElement(CircleSvg, {
     fill: "#ffffff",
     height: 26,
     width: 26,
-    opacity: drawingMode === 'ellipse' ? 1 : 0.5
+    opacity: drawState.drawingMode === 'ellipse' ? 1 : 0.5
   })), /*#__PURE__*/React.createElement(Pressable, {
     style: styles.option,
     onPress: () => {
-      setDrawingMode('text');
+      dispatchDrawStates({
+        type: 'SET_DRAWING_MODE',
+        drawingMode: 'text'
+      });
     }
   }, /*#__PURE__*/React.createElement(TextSvg, {
     height: 28,
     width: 28,
-    fill: "#ffffff",
-    opacity: drawingMode === 'text' ? 1 : 0.5
-  })))), /*#__PURE__*/React.createElement(DrawCore, {
-    ref: drawRef,
-    drawingMode: drawingMode,
-    image: image,
-    linearGradient: linearGradient,
-    onSelectionChange: setSelectedItem,
-    onCancelChange: setCancelEnabled
-  }), showToolbar ? /*#__PURE__*/React.createElement(View, {
+    color: 'grey',
+    opacity: drawState.drawingMode === 'text' ? 1 : 0.5
+  })))), /*#__PURE__*/React.createElement(View, {
+    style: styles.actionButton
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onPress: takeSnapshotAndGetUri
+  }, /*#__PURE__*/React.createElement(SendSvg, {
+    height: 20,
+    width: 20,
+    fill: "#ffffff"
+  })))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginHorizontal: 0,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(DrawCore, {
+    image: image
+  })), /*#__PURE__*/React.createElement(Sliders, {
+    linearGradient: linearGradient
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: 70
+    }
+  }, showToolbar ? /*#__PURE__*/React.createElement(View, {
     style: styles.bottomToolBar
-  }, selectedItem ? /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.option,
-    onPress: () => {
-      var _drawRef$current;
-
-      (_drawRef$current = drawRef.current) === null || _drawRef$current === void 0 ? void 0 : _drawRef$current.deleteSelectedItem();
+  }, itemIsSelected.value ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      ...styles.actionButton,
+      marginRight: 10
     }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.option,
+    onPress: deleteSelectedItem
   }, /*#__PURE__*/React.createElement(ThrashSvg, {
     width: 28,
     height: 28,
-    fill: "white"
-  })) : null, cancelEnabled ? /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.option,
-    onPress: () => {
-      var _drawRef$current2;
-
-      (_drawRef$current2 = drawRef.current) === null || _drawRef$current2 === void 0 ? void 0 : _drawRef$current2.cancelLastAction();
+    color: "white",
+    strokeWidth: 2
+  }))) : null, drawState.cancelEnabled ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      ...styles.actionButton
     }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.option,
+    onPress: cancelLastAction
   }, /*#__PURE__*/React.createElement(CancelSvg, {
-    width: 27,
-    height: 27,
-    stroke: "#ffffff",
+    width: 28,
+    height: 28,
+    color: 'grey',
     strokeWidth: 2
-  })) : null, /*#__PURE__*/React.createElement(Pressable, {
-    style: styles.sendButton,
-    onPress: onPressSend
-  }, /*#__PURE__*/React.createElement(SendSvg, {
-    fill: "#fff",
-    width: 20,
-    height: 20
-  }))) : null);
+  }))) : null) : null));
 }
 //# sourceMappingURL=index.js.map

package/lib/module/components/DrawWithOptions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Pressable","View","StyleSheet","Keyboard","DrawCore","PenSvg","DoubleHeadSvg","CircleSvg","SquareSvg","ArrowSvg","TextSvg","CloseSvg","ThrashSvg","SendSvg","CancelSvg","styles","create","container","flex","backgroundColor","option","width","height","justifyContent","alignItems","marginHorizontal","toolbar","flexDirection","paddingBottom","paddingTop","paddingHorizontal","drawOptions","sendButton","borderRadius","marginLeft","bottomToolBar","DrawWithOptions","close","takeSnapshot","linearGradient","image","defaultDrawingMode","drawRef","drawingMode","setDrawingMode","selectedItem","setSelectedItem","cancelEnabled","setCancelEnabled","onPressSend","current","showToolbar","setShowToolbar","sudDidHide","addListener","sudDidShow","event","endCoordinates","remove","deleteSelectedItem","cancelLastAction"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Pressable,\n  View,\n  StyleSheet,\n  ViewProps,\n  ImageRequireSource,\n  ImageURISource,\n  Keyboard,\n} from 'react-native';\nimport DrawCore from '../DrawCore';\nimport type { DrawItemType, DrawCoreProps } from '../../types';\nimport PenSvg from './PenSvg';\nimport DoubleHeadSvg from './DoubleHeadSvg';\nimport CircleSvg from './CircleSvg';\nimport SquareSvg from './SquareSvg';\nimport ArrowSvg from './ArrowSvg';\nimport TextSvg from './TextSvg';\nimport CloseSvg from './CloseSvg';\nimport ThrashSvg from './ThrashSvg';\nimport SendSvg from './SendSvg';\nimport CancelSvg from './CancelSvg';\n\nconst styles = StyleSheet.create({\n  container: { flex: 1, backgroundColor: '#000000' },\n  option: {\n    width: 30,\n    height: 30,\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginHorizontal: 4,\n  },\n  toolbar: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    paddingBottom: 30,\n    paddingTop: 15,\n    paddingHorizontal: 15,\n  },\n  drawOptions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  sendButton: {\n    backgroundColor: '#3a6cff',\n    width: 48,\n    height: 48,\n    borderRadius: 24,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 20,\n  },\n  bottomToolBar: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    paddingBottom: 30,\n    paddingTop: 30,\n    paddingHorizontal: 20,\n  },\n});\n\nexport default function DrawWithOptions({\n  close,\n  takeSnapshot,\n  linearGradient,\n  image,\n  defaultDrawingMode = 'ellipse',\n}: {\n  close?: () => void;\n  takeSnapshot?: (snap: Promise<string | undefined>) => void;\n  linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;\n  image?: ImageRequireSource | ImageURISource;\n  defaultDrawingMode?: DrawItemType;\n}) {\n  const drawRef = useRef<DrawCoreProps>(null);\n\n  const [drawingMode, setDrawingMode] =\n    useState<DrawItemType>(defaultDrawingMode);\n\n  const [selectedItem, setSelectedItem] = useState(false);\n\n  const [cancelEnabled, setCancelEnabled] = useState(false);\n\n  const onPressSend = useCallback(() => {\n    if (drawRef.current) {\n      takeSnapshot?.(drawRef.current.takeSnapshot());\n    }\n  }, [takeSnapshot]);\n\n  const [showToolbar, setShowToolbar] = useState(true);\n\n  useEffect(() => {\n    const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {\n      setShowToolbar(true);\n    });\n\n    const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {\n      // avoid events triggered by InputAccessoryView\n      if (event.endCoordinates.height > 100) {\n        setShowToolbar(false);\n      }\n    });\n\n    // cleanup function\n    return () => {\n      sudDidShow.remove();\n      sudDidHide.remove();\n    };\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.toolbar}>\n        <Pressable style={styles.option} onPress={close}>\n          <CloseSvg height={20} width={20} fill=\"#ffffff\" />\n        </Pressable>\n        <View style={styles.drawOptions}>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('pen');\n            }}\n          >\n            <PenSvg\n              height={23}\n              width={22}\n              stroke=\"#ffffff\"\n              strokeWidth=\"2\"\n              opacity={drawingMode === 'pen' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('doubleHead');\n            }}\n          >\n            <DoubleHeadSvg\n              height={20}\n              width={20}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'doubleHead' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('singleHead');\n            }}\n          >\n            <ArrowSvg\n              height={23}\n              width={23}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'singleHead' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('rectangle');\n            }}\n          >\n            <SquareSvg\n              height={27}\n              width={27}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'rectangle' ? 1 : 0.5}\n            />\n          </Pressable>\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('ellipse');\n            }}\n          >\n            <CircleSvg\n              fill=\"#ffffff\"\n              height={26}\n              width={26}\n              opacity={drawingMode === 'ellipse' ? 1 : 0.5}\n            />\n          </Pressable>\n\n          <Pressable\n            style={styles.option}\n            onPress={() => {\n              setDrawingMode('text');\n            }}\n          >\n            <TextSvg\n              height={28}\n              width={28}\n              fill=\"#ffffff\"\n              opacity={drawingMode === 'text' ? 1 : 0.5}\n            />\n          </Pressable>\n        </View>\n      </View>\n      <DrawCore\n        ref={drawRef}\n        drawingMode={drawingMode}\n        image={image}\n        linearGradient={linearGradient}\n        onSelectionChange={setSelectedItem}\n        onCancelChange={setCancelEnabled}\n      />\n\n      {showToolbar ? (\n        <View style={styles.bottomToolBar}>\n          {selectedItem ? (\n            <Pressable\n              style={styles.option}\n              onPress={() => {\n                drawRef.current?.deleteSelectedItem();\n              }}\n            >\n              <ThrashSvg width={28} height={28} fill=\"white\" />\n            </Pressable>\n          ) : null}\n          {cancelEnabled ? (\n            <Pressable\n              style={styles.option}\n              onPress={() => {\n                drawRef.current?.cancelLastAction();\n              }}\n            >\n              <CancelSvg\n                width={27}\n                height={27}\n                stroke=\"#ffffff\"\n                strokeWidth={2}\n              />\n            </Pressable>\n          ) : null}\n          <Pressable style={styles.sendButton} onPress={onPressSend}>\n            <SendSvg fill=\"#fff\" width={20} height={20} />\n          </Pressable>\n        </View>\n      ) : null}\n    </View>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useState","Pressable","View","StyleSheet","Keyboard","DoubleHeadSvg","CircleSvg","SquareSvg","ArrowSvg","TextSvg","CloseSvg","PenSvg","useDrawHook","Sliders","DrawCore","ThrashSvg","CancelSvg","SendSvg","styles","create","container","flex","actionButton","backgroundColor","padding","justifyContent","alignContent","alignItems","height","borderRadius","width","option","marginHorizontal","toolbar","flexDirection","paddingBottom","paddingTop","paddingHorizontal","drawOptions","sendButton","marginLeft","bottomToolBar","DrawWithOption","linearGradient","image","close","takeSnapshot","itemIsSelected","cancelLastAction","takeSnapshotAction","deleteSelectedItem","dispatchDrawStates","drawState","showToolbar","setShowToolbar","sudDidHide","addListener","sudDidShow","event","endCoordinates","remove","takeSnapshotAndGetUri","alignSelf","borderWidth","borderColor","paddingVertical","type","drawingMode","value","marginRight","cancelEnabled"],"sourceRoot":"../../../../src","sources":["components/DrawWithOptions/index.tsx"],"mappings":"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"}

package/lib/module/components/Slider/ColorSlider.js

@@ -0,0 +1,95 @@
+import { sliderStyle, TRACK_R } from './sliderStyle';
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import useDrawHook from '../DrawCore/useDrawHook';
+const gradientColors = ['hsl(0, 100%, 100%) 00%', 'hsl(0, 100%, 50%) 10%', 'hsl(45, 100%, 50%) 20%', 'hsl(90, 100%, 50%) 30%', 'hsl(135, 100%, 50%) 40%', 'hsl(180, 100%, 50%) 50%', 'hsl(225, 100%, 50%) 60%', 'hsl(270, 100%, 50%) 70%', 'hsl(315, 100%, 50%) 80%', 'hsl(360, 100%, 50%) 90%', 'hsl(0, 100%, 0%) 100%  '];
+const gradientStart = {
+  x: 0,
+  y: 0
+};
+const gradientEnd = {
+  x: 1,
+  y: 0
+};
+const ColorSlider = _ref => {
+  let {
+    linearGradient: LinearGradient
+  } = _ref;
+  const {
+    onColorStrokeChange,
+    color
+  } = useDrawHook();
+  const sliderWidth = useSharedValue(0);
+  const position = useDerivedValue(() => {
+    const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
+    const res = hslRegExp.exec(color.value);
+    const lum = res ? parseFloat(res[3] ?? '0') : 0;
+    const tint = res ? parseFloat(res[1] ?? '0') : 0;
+    if (lum > 50) {
+      return sliderWidth.value * 0.1 / 50 * (100 - lum);
+    }
+    if (lum < 50) {
+      return sliderWidth.value - sliderWidth.value * 0.1 / 50 * lum;
+    }
+    return Math.min(sliderWidth.value, Math.max(0, sliderWidth.value * 0.1 + tint * ((sliderWidth.value - sliderWidth.value * 0.2) / 360)));
+  }, [sliderWidth.value]);
+  const wrapperOnColorChange = () => {
+    onColorStrokeChange();
+  };
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (_ref2, ctx) => {
+      let {
+        x
+      } = _ref2;
+      ctx.startX = x;
+    },
+    onActive: (_ref3, _ref4) => {
+      let {
+        translationX
+      } = _ref3;
+      let {
+        startX
+      } = _ref4;
+      const slidePos = Math.min(sliderWidth.value, startX + translationX);
+      if (slidePos < 0.1 * sliderWidth.value) {
+        color.value = `hsl(0, 100%, ${Math.min(100, 100 - slidePos / (0.1 * sliderWidth.value) * 50).toFixed(10)}%)`;
+      } else if (slidePos > 0.9 * sliderWidth.value) {
+        color.value = `hsl(0, 100%, ${Math.max(50 - (slidePos - 0.9 * sliderWidth.value) / (0.1 * sliderWidth.value) * 50, 0).toFixed(10)}%)`;
+      } else {
+        color.value = `hsl(${(slidePos - sliderWidth.value * 0.1) / (sliderWidth.value - sliderWidth.value * 0.2) * 360}, 100%, 50%)`;
+      }
+    },
+    onEnd: () => {
+      runOnJS(wrapperOnColorChange)();
+    }
+  }, []);
+  const style = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateX: position.value - TRACK_R
+      }]
+    };
+  }, [position.value]);
+  const onLayout = useCallback(event => {
+    sliderWidth.value = event.nativeEvent.layout.width;
+  }, [sliderWidth]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: sliderStyle.container
+  }, /*#__PURE__*/React.createElement(PanGestureHandler, {
+    onGestureEvent: onGestureEvent
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: sliderStyle.container
+  }, /*#__PURE__*/React.createElement(LinearGradient, {
+    start: gradientStart,
+    end: gradientEnd,
+    colors: gradientColors,
+    onLayout: onLayout,
+    style: sliderStyle.track
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [sliderStyle.thumb, style]
+  }))));
+};
+export default ColorSlider;
+//# sourceMappingURL=ColorSlider.js.map

package/lib/module/components/Slider/ColorSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sliderStyle","TRACK_R","React","useCallback","View","PanGestureHandler","Animated","runOnJS","useAnimatedGestureHandler","useAnimatedStyle","useDerivedValue","useSharedValue","useDrawHook","gradientColors","gradientStart","x","y","gradientEnd","ColorSlider","linearGradient","LinearGradient","onColorStrokeChange","color","sliderWidth","position","hslRegExp","RegExp","res","exec","value","lum","parseFloat","tint","Math","min","max","wrapperOnColorChange","onGestureEvent","onStart","ctx","startX","onActive","translationX","slidePos","toFixed","onEnd","style","transform","translateX","onLayout","event","nativeEvent","layout","width","container","track","thumb"],"sourceRoot":"../../../../src","sources":["components/Slider/ColorSlider.tsx"],"mappings":"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"}

package/lib/module/components/Slider/Sliders.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import StrokeSlider from './StrokeSlider';
+import ColorSlider from './ColorSlider';
+import useDrawHook from '../DrawCore/useDrawHook';
+import { StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+  strokeContainer: {
+    flexDirection: 'row',
+    marginTop: 20,
+    borderColor: 'grey',
+    borderRadius: 20,
+    height: 40,
+    borderWidth: 1,
+    marginHorizontal: 20,
+    maxWidth: 500,
+    alignSelf: 'center'
+  },
+  strokeWrapper: {
+    flex: 1,
+    height: 40,
+    marginHorizontal: 20,
+    justifyContent: 'center'
+  },
+  currentColorContainer: {
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    padding: 4
+  },
+  currentColor: {
+    width: 20,
+    height: 20,
+    borderRadius: 10
+  },
+  colorContainer: {
+    flex: 1,
+    height: 40,
+    marginHorizontal: 20,
+    justifyContent: 'center'
+  }
+});
+const Sliders = _ref => {
+  let {
+    linearGradient
+  } = _ref;
+  const {
+    strokeWidth,
+    color
+  } = useDrawHook();
+  const styleStrokeColor = useAnimatedStyle(() => {
+    return {
+      borderWidth: strokeWidth.value,
+      borderColor: color.value
+    };
+  }, [strokeWidth, color]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.strokeContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.strokeWrapper
+  }, /*#__PURE__*/React.createElement(StrokeSlider, {
+    minValue: 2,
+    maxValue: 10
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.currentColorContainer
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.currentColor, styleStrokeColor]
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.colorContainer
+  }, /*#__PURE__*/React.createElement(ColorSlider, {
+    linearGradient: linearGradient
+  })));
+};
+export default Sliders;
+//# sourceMappingURL=Sliders.js.map

package/lib/module/components/Slider/Sliders.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Animated","useAnimatedStyle","StrokeSlider","ColorSlider","useDrawHook","StyleSheet","styles","create","strokeContainer","flexDirection","marginTop","borderColor","borderRadius","height","borderWidth","marginHorizontal","maxWidth","alignSelf","strokeWrapper","flex","justifyContent","currentColorContainer","alignContent","padding","currentColor","width","colorContainer","Sliders","linearGradient","strokeWidth","color","styleStrokeColor","value"],"sourceRoot":"../../../../src","sources":["components/Slider/Sliders.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,cAAc;AAC9C,OAAOC,QAAQ,IAAIC,gBAAgB,QAAQ,yBAAyB;AACpE,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,WAAW,MAAM,eAAe;AAEvC,OAAOC,WAAW,MAAM,yBAAyB;AACjD,SAASC,UAAU,QAAQ,cAAc;AAEzC,MAAMC,MAAM,GAAGD,UAAU,CAACE,MAAM,CAAC;EAC/BC,eAAe,EAAE;IACfC,aAAa,EAAE,KAAK;IACpBC,SAAS,EAAE,EAAE;IACbC,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,gBAAgB,EAAE,EAAE;IACpBC,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAE;EACb,CAAC;EACDC,aAAa,EAAE;IACbC,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB,CAAC;EACDC,qBAAqB,EAAE;IACrBT,YAAY,EAAE,EAAE;IAChBE,WAAW,EAAE,CAAC;IACdH,WAAW,EAAE,SAAS;IACtBS,cAAc,EAAE,QAAQ;IACxBE,YAAY,EAAE,QAAQ;IACtBL,SAAS,EAAE,QAAQ;IACnBM,OAAO,EAAE;EACX,CAAC;EACDC,YAAY,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEZ,MAAM,EAAE,EAAE;IAAED,YAAY,EAAE;EAAG,CAAC;EACzDc,cAAc,EAAE;IACdP,IAAI,EAAE,CAAC;IACPN,MAAM,EAAE,EAAE;IACVE,gBAAgB,EAAE,EAAE;IACpBK,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,MAAMO,OAAO,GAAG,QAIV;EAAA,IAJW;IACfC;EAGF,CAAC;EACC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAC,GAAG1B,WAAW,EAAE;EAE5C,MAAM2B,gBAAgB,GAAG9B,gBAAgB,CAAC,MAAM;IAC9C,OAAO;MACLa,WAAW,EAAEe,WAAW,CAAEG,KAAK;MAC/BrB,WAAW,EAAEmB,KAAK,CAAEE;IACtB,CAAC;EACH,CAAC,EAAE,CAACH,WAAW,EAAEC,KAAK,CAAC,CAAC;EAExB,oBACE,oBAAC,IAAI;IAAC,KAAK,EAAExB,MAAM,CAACE;EAAgB,gBAClC,oBAAC,IAAI;IAAC,KAAK,EAAEF,MAAM,CAACY;EAAc,gBAChC,oBAAC,YAAY;IAAC,QAAQ,EAAE,CAAE;IAAC,QAAQ,EAAE;EAAG,EAAG,CACtC,eACP,oBAAC,IAAI;IAAC,KAAK,EAAEZ,MAAM,CAACe;EAAsB,gBACxC,oBAAC,QAAQ,CAAC,IAAI;IAAC,KAAK,EAAE,CAACf,MAAM,CAACkB,YAAY,EAAEO,gBAAgB;EAAE,EAAG,CAC5D,eACP,oBAAC,IAAI;IAAC,KAAK,EAAEzB,MAAM,CAACoB;EAAe,gBACjC,oBAAC,WAAW;IAAC,cAAc,EAAEE;EAAe,EAAG,CAC1C,CACF;AAEX,CAAC;AAED,eAAeD,OAAO"}