@archireport/react-native-svg-draw 2.2.0 → 2.2.1

package/lib/typescript/components/DrawWithOptions/SendSvg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function SendSvg(props: SvgProps): JSX.Element;
 export default SendSvg;

package/lib/typescript/components/DrawWithOptions/SendSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SendSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SendSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAAW,MAAM,kBAAkB,CAAC;AAE1D,iBAAS,OAAO,CAAC,KAAK,EAAE,QAAQ,eAQ/B;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"SendSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SendSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAAW,MAAM,kBAAkB,CAAC;AAE1D,iBAAS,OAAO,CAAC,KAAK,EAAE,QAAQ,eAQ/B;AAED,eAAe,OAAO,CAAC"}

package/lib/typescript/components/DrawWithOptions/SliderSvg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function SvgSlider(props: SvgProps): JSX.Element;
 export default SvgSlider;

package/lib/typescript/components/DrawWithOptions/SliderSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SliderSvg.tsx"],"names":[],"mappings":"AAEA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiBjC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SliderSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SliderSvg.tsx"],"names":[],"mappings":";AAEA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiBjC;AAED,eAAe,SAAS,CAAC"}

package/lib/typescript/components/DrawWithOptions/SquareSvg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 export default function SquareSvg(props: SvgProps): JSX.Element;
 //# sourceMappingURL=SquareSvg.d.ts.map

package/lib/typescript/components/DrawWithOptions/SquareSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SquareSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SquareSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAA4B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAoBhD"}
+{"version":3,"file":"SquareSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/SquareSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAA4B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,QAAQ,eAoBhD"}

package/lib/typescript/components/DrawWithOptions/TextSvg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function SvgComponent(props: SvgProps): JSX.Element;
 export default SvgComponent;

package/lib/typescript/components/DrawWithOptions/TextSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/TextSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAA4B,MAAM,kBAAkB,CAAC;AAE3E,iBAAS,YAAY,CAAC,KAAK,EAAE,QAAQ,eAoBpC;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TextSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/TextSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAA4B,MAAM,kBAAkB,CAAC;AAE3E,iBAAS,YAAY,CAAC,KAAK,EAAE,QAAQ,eAoBpC;AAED,eAAe,YAAY,CAAC"}

package/lib/typescript/components/DrawWithOptions/ThrashSvg.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 declare function ThrashSvg(props: SvgProps): JSX.Element;
 export default ThrashSvg;

package/lib/typescript/components/DrawWithOptions/ThrashSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThrashSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/ThrashSvg.tsx"],"names":[],"mappings":"AACA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiCjC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ThrashSvg.d.ts","sourceRoot":"","sources":["../../../../src/components/DrawWithOptions/ThrashSvg.tsx"],"names":[],"mappings":";AACA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;AAEvD,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,eAiCjC;AAED,eAAe,SAAS,CAAC"}

package/lib/typescript/components/Slider/StrokeSlider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const StrokeSlider: ({ minValue, maxValue, }: {
     minValue: number;
     maxValue: number;

package/lib/typescript/components/Slider/StrokeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StrokeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/StrokeSlider.tsx"],"names":[],"mappings":"AA6BA,QAAA,MAAM,YAAY;cAIN,MAAM;cACN,MAAM;iBAoEjB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StrokeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/StrokeSlider.tsx"],"names":[],"mappings":";AA6BA,QAAA,MAAM,YAAY;cAIN,MAAM;cACN,MAAM;iBAoEjB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archireport/react-native-svg-draw",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "React Native drawing component based on SVG with editable annotations",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/DrawCore/DrawPad.tsx

@@ -12,15 +12,17 @@ const DrawPad = ({
   doneItems,
   onPressItem,
   onTextHeightChange,
+  addBackground = false,
 }: {
   currentItem: Animated.SharedValue<DrawItem | null>;
   doneItems: Array<DrawItem>;
   onPressItem: (item: DrawItem, index: number) => () => void;
   onTextHeightChange: (height: number) => void;
+  addBackground?: boolean;
 }) => {
   return (
     <>
-      <Svg>
+      <Svg style={addBackground ? { backgroundColor: 'white' } : null}>
         <Defs>
           <Circle
             id="selectionIndicator"

package/src/components/DrawCore/index.tsx

@@ -35,11 +35,11 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   drawZone: {
-    flex: 1,
     alignContent: 'center',
     alignItems: 'center',
+    width: '100%',
+    height: '100%',
   },
-
   bgImage: { width: '100%', height: '100%' },
   textInput: {
     backgroundColor: '#262626',
@@ -1151,8 +1151,10 @@ const DrawCore = ({
 
   const textInputContainerStyle = useAnimatedStyle(() => {
     return {
-      height: 'auto',
-      backgroundColor: 'red',
+      position: 'absolute',
+      top: 0,
+      height: 50,
+      width: '100%',
       display: 'flex',
       opacity: showTextInput.value ? withTiming(1) : withTiming(0),
     };
@@ -1160,7 +1162,8 @@ const DrawCore = ({
 
   const textInputStyle = useAnimatedStyle(() => {
     return {
-      backgroundColor: 'blue',
+      color: 'white',
+      height: 20,
       display: showTextInput.value ? 'flex' : 'none',
       opacity: showTextInput.value ? withTiming(1) : withTiming(0),
     };
@@ -1168,31 +1171,6 @@ const DrawCore = ({
 
   return (
     <View style={styles.container}>
-      {Platform.OS === 'ios' ? (
-        <InputAccessoryView>
-          <AnimatedTextInput
-            ref={textInputRef}
-            style={[styles.textInput, textInputStyle]}
-            onEndEditing={textInputRef.current?.clear}
-            onChangeText={setTextVal}
-            value={textVal}
-            autoCorrect={false}
-          />
-        </InputAccessoryView>
-      ) : (
-        <Animated.View style={textInputContainerStyle}>
-          {currentItem.value?.type === 'text' && (
-            <TextInput
-              ref={textInputRef}
-              style={styles.textInput}
-              onEndEditing={textInputRef.current?.clear}
-              onChangeText={setTextVal}
-              value={textVal}
-              autoCorrect={false}
-            />
-          )}
-        </Animated.View>
-      )}
       <View
         style={[
           styles.drawZone,
@@ -1239,6 +1217,7 @@ const DrawCore = ({
                   style={drawRegion}
                 >
                   <DrawPad
+                    addBackground
                     currentItem={currentItem}
                     doneItems={drawState.doneItems}
                     onPressItem={onPressItem}
@@ -1249,6 +1228,31 @@ const DrawCore = ({
             </View>
           </Animated.View>
         </PanGestureHandler>
+        {Platform.OS === 'ios' ? (
+          <InputAccessoryView>
+            <AnimatedTextInput
+              ref={textInputRef}
+              style={[styles.textInput, textInputStyle]}
+              onEndEditing={textInputRef.current?.clear}
+              onChangeText={setTextVal}
+              value={textVal}
+              autoCorrect={false}
+            />
+          </InputAccessoryView>
+        ) : (
+          <Animated.View style={textInputContainerStyle}>
+            {currentItem.value?.type === 'text' && (
+              <TextInput
+                ref={textInputRef}
+                style={styles.textInput}
+                onEndEditing={textInputRef.current?.clear}
+                onChangeText={setTextVal}
+                value={textVal}
+                autoCorrect={false}
+              />
+            )}
+          </Animated.View>
+        )}
       </View>
     </View>
   );