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

package/src/components/DrawCore/useDrawHook.tsx

@@ -0,0 +1,70 @@
+import { DrawContext } from './DrawContext';
+import { useCallback, useContext } from 'react';
+
+const useDrawHook = () => {
+  const {
+    drawState,
+    dispatchDrawStates,
+    strokeWidth,
+    color,
+    currentItem,
+    itemIsSelected,
+    viewShot,
+  } = useContext(DrawContext);
+
+  const takeSnapshot = useCallback(async () => {
+    if (currentItem?.value) {
+      dispatchDrawStates({ type: 'ADD_DONE_ITEM', item: currentItem.value });
+      currentItem.value = null;
+    }
+    return viewShot!.current?.capture?.();
+  }, [currentItem, dispatchDrawStates, viewShot]);
+
+  const cancelLastAction = useCallback(() => {
+    itemIsSelected!.value = false;
+    if (currentItem?.value) {
+      currentItem.value = null;
+    }
+    dispatchDrawStates({
+      type: 'CANCEL',
+    });
+  }, [currentItem, dispatchDrawStates, itemIsSelected]);
+
+  const deleteSelectedItem = useCallback(() => {
+    if (currentItem?.value) {
+      currentItem.value = null;
+      dispatchDrawStates({
+        type: 'ADD_SCREEN_STATE',
+        currentItem: currentItem.value,
+        cancelEnabled: true,
+      });
+    }
+    itemIsSelected!.value = false;
+  }, [currentItem, dispatchDrawStates, itemIsSelected]);
+
+  const onColorStrokeChange = useCallback(() => {
+    'worklet';
+    if (currentItem?.value) {
+      dispatchDrawStates({
+        type: 'ADD_SCREEN_STATE',
+        currentItem: currentItem.value,
+      });
+    }
+  }, [currentItem?.value, dispatchDrawStates]);
+
+  return {
+    drawState: drawState!,
+    dispatchDrawStates,
+    currentItem: currentItem!,
+    strokeWidth: strokeWidth!,
+    color: color!,
+    onColorStrokeChange,
+    itemIsSelected: itemIsSelected!,
+    cancelLastAction,
+    takeSnapshot: takeSnapshot!,
+    viewShot: viewShot!,
+    deleteSelectedItem,
+  };
+};
+
+export default useDrawHook;

package/src/components/DrawWithOptions/SliderSvg.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Svg, { SvgProps, Path } from 'react-native-svg';
+
+function SvgSlider(props: SvgProps) {
+  return (
+    <View style={{ aspectRatio: 10, justifyContent: 'center' }}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 189 6"
+        fill="none"
+        {...props}
+      >
+        <Path
+          d="M0.99994 4.01059C0.445985 4.00473 -7.21155e-08 3.554 -1.31135e-07 3.00001C-1.90155e-07 2.44602 0.445985 1.99529 0.999941 1.98943L186 0.0317445C187.652 0.0142669 189 1.3483 189 3C189 4.65169 187.652 5.98572 186 5.96825L0.99994 4.01059Z"
+          fill="currentColor"
+        />
+      </Svg>
+    </View>
+  );
+}
+
+export default SvgSlider;

package/src/components/DrawWithOptions/ThrashSvg.tsx

@@ -3,8 +3,35 @@ import Svg, { SvgProps, Path } from 'react-native-svg';
 
 function ThrashSvg(props: SvgProps) {
   return (
-    <Svg viewBox="0 0 28 29" {...props}>
-      <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" />
+    <Svg width="25" height="25" viewBox="0 0 25 25" fill="none" {...props}>
+      <Path
+        d="M3.5 6.5L5.5 6.5L21.5 6.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <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"
+      />
+      <Path
+        d="M10.5 11.5L10.5 17.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <Path
+        d="M14.5 11.5L14.5 17.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </Svg>
   );
 }

package/src/components/DrawWithOptions/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Pressable,
   View,
@@ -8,39 +8,49 @@ import {
   ImageURISource,
   Keyboard,
 } from 'react-native';
-import DrawCore from '../DrawCore';
-import type { DrawItemType, DrawCoreProps } from '../../types';
-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' },
+  container: { 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',
@@ -61,33 +71,25 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function DrawWithOptions({
-  close,
-  takeSnapshot,
+export default function DrawWithOption({
   linearGradient,
   image,
-  defaultDrawingMode = 'ellipse',
+  close,
+  takeSnapshot,
 }: {
-  close?: () => void;
-  takeSnapshot?: (snap: Promise<string | undefined>) => void;
   linearGradient: React.ComponentType<{ colors: any[] } & ViewProps>;
   image?: ImageRequireSource | ImageURISource;
-  defaultDrawingMode?: DrawItemType;
+  close?: () => void;
+  takeSnapshot?: (snap: Promise<string | undefined>) => void;
 }) {
-  const drawRef = useRef<DrawCoreProps>(null);
-
-  const [drawingMode, setDrawingMode] =
-    useState<DrawItemType>(defaultDrawingMode);
-
-  const [selectedItem, setSelectedItem] = useState(false);
-
-  const [cancelEnabled, setCancelEnabled] = useState(false);
-
-  const onPressSend = useCallback(() => {
-    if (drawRef.current) {
-      takeSnapshot?.(drawRef.current.takeSnapshot());
-    }
-  }, [takeSnapshot]);
+  const {
+    itemIsSelected,
+    cancelLastAction,
+    takeSnapshot: takeSnapshotAction,
+    deleteSelectedItem,
+    dispatchDrawStates,
+    drawState,
+  } = useDrawHook();
 
   const [showToolbar, setShowToolbar] = useState(true);
 
@@ -96,12 +98,15 @@ export default function DrawWithOptions({
       setShowToolbar(true);
     });
 
-    const sudDidShow = Keyboard.addListener('keyboardDidShow', (event) => {
-      // avoid events triggered by InputAccessoryView
-      if (event.endCoordinates.height > 100) {
-        setShowToolbar(false);
+    const sudDidShow = Keyboard.addListener(
+      'keyboardDidShow',
+      (event: { endCoordinates: { height: number } }) => {
+        // avoid events triggered by InputAccessoryView
+        if (event.endCoordinates.height > 100) {
+          setShowToolbar(false);
+        }
       }
-    });
+    );
 
     // cleanup function
     return () => {
@@ -110,136 +115,184 @@ export default function DrawWithOptions({
     };
   }, []);
 
+  const takeSnapshotAndGetUri = useCallback(async () => {
+    if (takeSnapshot) {
+      takeSnapshot(takeSnapshotAction());
+    }
+  }, [takeSnapshot, takeSnapshotAction]);
   return (
     <View style={styles.container}>
       <View style={styles.toolbar}>
-        <Pressable style={styles.option} onPress={close}>
-          <CloseSvg height={20} width={20} fill="#ffffff" />
-        </Pressable>
-        <View style={styles.drawOptions}>
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              setDrawingMode('pen');
-            }}
-          >
-            <PenSvg
-              height={23}
-              width={22}
-              stroke="#ffffff"
-              strokeWidth="2"
-              opacity={drawingMode === 'pen' ? 1 : 0.5}
-            />
-          </Pressable>
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              setDrawingMode('doubleHead');
-            }}
-          >
-            <DoubleHeadSvg
-              height={20}
-              width={20}
-              fill="#ffffff"
-              opacity={drawingMode === 'doubleHead' ? 1 : 0.5}
-            />
-          </Pressable>
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              setDrawingMode('singleHead');
-            }}
-          >
-            <ArrowSvg
-              height={23}
-              width={23}
-              fill="#ffffff"
-              opacity={drawingMode === 'singleHead' ? 1 : 0.5}
-            />
-          </Pressable>
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              setDrawingMode('rectangle');
-            }}
-          >
-            <SquareSvg
-              height={27}
-              width={27}
-              fill="#ffffff"
-              opacity={drawingMode === 'rectangle' ? 1 : 0.5}
-            />
+        <View style={styles.actionButton}>
+          <Pressable onPress={close}>
+            <CloseSvg height={20} width={20} fill="#ffffff" />
           </Pressable>
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              setDrawingMode('ellipse');
-            }}
-          >
-            <CircleSvg
-              fill="#ffffff"
-              height={26}
-              width={26}
-              opacity={drawingMode === 'ellipse' ? 1 : 0.5}
-            />
-          </Pressable>
-
-          <Pressable
-            style={styles.option}
-            onPress={() => {
-              setDrawingMode('text');
+        </View>
+        <View style={styles.drawOptions}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignSelf: 'center',
+              borderWidth: 1,
+              borderColor: 'grey',
+              borderRadius: 25,
+              height: 40,
+              paddingHorizontal: 10,
+              paddingVertical: 10,
             }}
           >
-            <TextSvg
-              height={28}
-              width={28}
-              fill="#ffffff"
-              opacity={drawingMode === 'text' ? 1 : 0.5}
-            />
-          </Pressable>
-        </View>
-      </View>
-      <DrawCore
-        ref={drawRef}
-        drawingMode={drawingMode}
-        image={image}
-        linearGradient={linearGradient}
-        onSelectionChange={setSelectedItem}
-        onCancelChange={setCancelEnabled}
-      />
-
-      {showToolbar ? (
-        <View style={styles.bottomToolBar}>
-          {selectedItem ? (
             <Pressable
               style={styles.option}
               onPress={() => {
-                drawRef.current?.deleteSelectedItem();
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'pen',
+                });
               }}
             >
-              <ThrashSvg width={28} height={28} fill="white" />
+              <PenSvg
+                height={23}
+                width={22}
+                stroke="#ffffff"
+                strokeWidth="2"
+                opacity={drawState.drawingMode === 'pen' ? 1 : 0.5}
+              />
             </Pressable>
-          ) : null}
-          {cancelEnabled ? (
             <Pressable
               style={styles.option}
               onPress={() => {
-                drawRef.current?.cancelLastAction();
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'doubleHead',
+                });
               }}
             >
-              <CancelSvg
-                width={27}
+              <DoubleHeadSvg
+                height={20}
+                width={20}
+                fill="#ffffff"
+                opacity={drawState.drawingMode === 'doubleHead' ? 1 : 0.5}
+              />
+            </Pressable>
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'singleHead',
+                });
+              }}
+            >
+              <ArrowSvg
+                height={23}
+                width={23}
+                fill="#ffffff"
+                opacity={drawState.drawingMode === 'singleHead' ? 1 : 0.5}
+              />
+            </Pressable>
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'rectangle',
+                });
+              }}
+            >
+              <SquareSvg
                 height={27}
-                stroke="#ffffff"
-                strokeWidth={2}
+                width={27}
+                fill="#ffffff"
+                opacity={drawState.drawingMode === 'rectangle' ? 1 : 0.5}
               />
             </Pressable>
-          ) : null}
-          <Pressable style={styles.sendButton} onPress={onPressSend}>
-            <SendSvg fill="#fff" width={20} height={20} />
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'ellipse',
+                });
+              }}
+            >
+              <CircleSvg
+                fill="#ffffff"
+                height={26}
+                width={26}
+                opacity={drawState.drawingMode === 'ellipse' ? 1 : 0.5}
+              />
+            </Pressable>
+
+            <Pressable
+              style={styles.option}
+              onPress={() => {
+                dispatchDrawStates({
+                  type: 'SET_DRAWING_MODE',
+                  drawingMode: 'text',
+                });
+              }}
+            >
+              <TextSvg
+                height={28}
+                width={28}
+                color={'grey'}
+                opacity={drawState.drawingMode === 'text' ? 1 : 0.5}
+              />
+            </Pressable>
+          </View>
+        </View>
+
+        <View style={styles.actionButton}>
+          <Pressable onPress={takeSnapshotAndGetUri}>
+            <SendSvg height={20} width={20} fill="#ffffff" />
           </Pressable>
         </View>
-      ) : null}
+      </View>
+      <View
+        style={{
+          marginHorizontal: 0,
+          flex: 1,
+        }}
+      >
+        <DrawCore image={image} />
+      </View>
+
+      <Sliders linearGradient={linearGradient} />
+
+      <View style={{ height: 70 }}>
+        {showToolbar ? (
+          <View style={styles.bottomToolBar}>
+            {itemIsSelected.value ? (
+              <View style={{ ...styles.actionButton, marginRight: 10 }}>
+                <Pressable style={styles.option} onPress={deleteSelectedItem}>
+                  <ThrashSvg
+                    width={28}
+                    height={28}
+                    color="white"
+                    strokeWidth={2}
+                  />
+                </Pressable>
+              </View>
+            ) : null}
+            {drawState.cancelEnabled ? (
+              <View
+                style={{
+                  ...styles.actionButton,
+                }}
+              >
+                <Pressable style={styles.option} onPress={cancelLastAction}>
+                  <CancelSvg
+                    width={28}
+                    height={28}
+                    color={'grey'}
+                    strokeWidth={2}
+                  />
+                </Pressable>
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 }