@draftbit/core 43.4.8 → 43.4.11-0e8ceb.4

package/src/components/NumberInput.js

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import { TextInput } from "react-native";
 import { isString, isNumber, isNaN } from "lodash";
 const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
-    const formatValueToStringNumber = (valueToFormat, currentStringNumberValue) => {
+    const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
+    const formatValueToStringNumber = (valueToFormat) => {
         if (valueToFormat != null) {
             if (isString(valueToFormat) && valueToFormat !== "") {
                 if (/^0[1-9]$/.test(valueToFormat)) {
@@ -11,7 +12,7 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
                 else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
                     return valueToFormat;
                 }
-                else if (currentStringNumberValue) {
+                else {
                     return currentStringNumberValue;
                 }
             }
@@ -21,25 +22,23 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
         }
         return "0";
     };
-    const [currentStringNumberValue, setCurrentStringNumberValue] = useState(formatValueToStringNumber(value));
-    const handleChangeText = (newValue) => {
-        const newStringNumberValue = formatValueToStringNumber(newValue, currentStringNumberValue);
-        const number = parseFloat(newStringNumberValue);
-        setCurrentStringNumberValue(newStringNumberValue);
-        onChangeText?.(number);
-    };
-    /* set currentStringNumberValue directly to defaultValue if it exists on load
-    ( no need to use TextInput's defaultValue because its value is always controlled & set ) */
+    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
     useEffect(() => {
-        const defaultStringNumberValue = formatValueToStringNumber(defaultValue, currentStringNumberValue);
+        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
         if (currentStringNumberValue !== defaultStringNumberValue) {
             setCurrentStringNumberValue(defaultStringNumberValue);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    // set new value if different from current value
+    const handleChangeText = (newValue) => {
+        const newStringNumberValue = formatValueToStringNumber(newValue);
+        const number = parseFloat(newStringNumberValue);
+        setCurrentStringNumberValue(newStringNumberValue);
+        onChangeText?.(number);
+    };
+    // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
     useEffect(() => {
-        const nextStringNumberValue = formatValueToStringNumber(value, currentStringNumberValue);
+        const nextStringNumberValue = formatValueToStringNumber(value);
         if (currentStringNumberValue !== nextStringNumberValue) {
             handleChangeText(nextStringNumberValue);
         }

package/src/components/NumberInput.tsx

@@ -14,17 +14,16 @@ const NumberInput: FC<Props> = ({
   defaultValue,
   ...props
 }) => {
-  const formatValueToStringNumber = (
-    valueToFormat?: number | string,
-    currentStringNumberValue?: string
-  ) => {
+  const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
+
+  const formatValueToStringNumber = (valueToFormat?: number | string) => {
     if (valueToFormat != null) {
       if (isString(valueToFormat) && valueToFormat !== "") {
         if (/^0[1-9]$/.test(valueToFormat)) {
           return valueToFormat.slice(1);
         } else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
           return valueToFormat;
-        } else if (currentStringNumberValue) {
+        } else {
           return currentStringNumberValue;
         }
       } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
@@ -35,28 +34,9 @@ const NumberInput: FC<Props> = ({
     return "0";
   };
 
-  const [currentStringNumberValue, setCurrentStringNumberValue] = useState(
-    formatValueToStringNumber(value)
-  );
-
-  const handleChangeText = (newValue: string) => {
-    const newStringNumberValue = formatValueToStringNumber(
-      newValue,
-      currentStringNumberValue
-    );
-    const number = parseFloat(newStringNumberValue);
-
-    setCurrentStringNumberValue(newStringNumberValue);
-    onChangeText?.(number);
-  };
-
-  /* set currentStringNumberValue directly to defaultValue if it exists on load
-  ( no need to use TextInput's defaultValue because its value is always controlled & set ) */
+  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
   useEffect(() => {
-    const defaultStringNumberValue = formatValueToStringNumber(
-      defaultValue,
-      currentStringNumberValue
-    );
+    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
 
     if (currentStringNumberValue !== defaultStringNumberValue) {
       setCurrentStringNumberValue(defaultStringNumberValue);
@@ -64,12 +44,17 @@ const NumberInput: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // set new value if different from current value
+  const handleChangeText = (newValue: string) => {
+    const newStringNumberValue = formatValueToStringNumber(newValue);
+    const number = parseFloat(newStringNumberValue);
+
+    setCurrentStringNumberValue(newStringNumberValue);
+    onChangeText?.(number);
+  };
+
+  // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
   useEffect(() => {
-    const nextStringNumberValue = formatValueToStringNumber(
-      value,
-      currentStringNumberValue
-    );
+    const nextStringNumberValue = formatValueToStringNumber(value);
 
     if (currentStringNumberValue !== nextStringNumberValue) {
       handleChangeText(nextStringNumberValue);

package/src/components/TextField.js

@@ -231,6 +231,7 @@ class TextField extends React.Component {
                 : leftIconMode === "outset"
                     ? 16
                     : 0,
+            marginLeft: leftIconMode === "inset" && type === "solid" ? 16 : 0,
         };
         const labelStyle = {
             ...typography.subtitle1,
@@ -355,10 +356,10 @@ class TextField extends React.Component {
                                 opacity: hasActiveOutline ? this.state.labeled : 1,
                             },
                         ], numberOfLines: 1 }, label))) : null,
-                leftIconName && leftIconMode === "inset" ? (React.createElement(Icon, { ...leftIconProps, style: {
-                        ...leftIconStyle,
-                        marginLeft: type === "solid" ? 16 : 0,
-                    } })) : null,
+                leftIconName && leftIconMode === "inset" ? (React.createElement(View, { style: {
+                        justifyContent: type === "solid" ? "center" : undefined,
+                    } },
+                    React.createElement(Icon, { ...leftIconProps, style: leftIconStyle }))) : null,
                 render({
                     ref: (c) => {
                         this._root = c;

package/src/components/TextField.tsx

@@ -359,6 +359,7 @@ class TextField extends React.Component<Props, State> {
           : leftIconMode === "outset"
           ? 16
           : 0,
+      marginLeft: leftIconMode === "inset" && type === "solid" ? 16 : 0,
     };
 
     const labelStyle = {
@@ -536,13 +537,13 @@ class TextField extends React.Component<Props, State> {
           ) : null}
 
           {leftIconName && leftIconMode === "inset" ? (
-            <Icon
-              {...leftIconProps}
+            <View
               style={{
-                ...leftIconStyle,
-                marginLeft: type === "solid" ? 16 : 0,
+                justifyContent: type === "solid" ? "center" : undefined,
               }}
-            />
+            >
+              <Icon {...leftIconProps} style={leftIconStyle} />
+            </View>
           ) : null}
 
           {render({

package/src/mappings/Icon.js

@@ -6,7 +6,10 @@ export const SEED_DATA = {
     category: COMPONENT_TYPES.basic,
     layout: {},
     props: {
-        name: createIconProp(),
+        name: {
+            ...createIconProp(),
+            group: GROUPS.data,
+        },
         color: createColorProp(),
         size: createNumberProp({
             group: GROUPS.basic,

package/src/mappings/Icon.ts

@@ -13,7 +13,10 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.basic,
   layout: {},
   props: {
-    name: createIconProp(),
+    name: {
+      ...createIconProp(),
+      group: GROUPS.data,
+    },
     color: createColorProp(),
     size: createNumberProp({
       group: GROUPS.basic,

package/src/mappings/KeyboardAwareScrollView.js

@@ -0,0 +1,38 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Keyboard Aware Scroll View",
+    tag: "KeyboardAwareScrollView",
+    description: "View that moves pushes the content when virtual keyboard is open.",
+    category: COMPONENT_TYPES.layout,
+    layout: {},
+    props: {
+        viewIsInsideTabBar: createStaticBoolProp({
+            label: "View Is Inside TabBar",
+            description: "Adds an extra offset that represents the TabBarIOS height.",
+        }),
+        enableAutomaticScroll: createStaticBoolProp({
+            label: "Enable Automatic Scroll",
+            description: "When focus in TextInput will scroll the position, default is enabled",
+        }),
+        extraHeight: createStaticNumberProp({
+            label: "Extra Height",
+            description: "Adds an extra offset when focusing the TextInputs",
+        }),
+        extraScrollHeight: createStaticNumberProp({
+            label: "Extra Scroll Height",
+            description: "Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard",
+        }),
+        enableResetScrollToCoords: createStaticBoolProp({
+            label: "Enable Reset Scroll To Coordinates",
+            description: "Lets the user enable or disable automatic resetScrollToCoords",
+        }),
+        keyboardOpeningTime: createStaticNumberProp({
+            label: "Keyboard Opening Time",
+            description: "Sets the delay time before scrolling to new position, default is 250",
+        }),
+        enableOnAndroid: createStaticBoolProp({
+            label: "Enable On Android",
+            description: "Enable Android Support",
+        }),
+    },
+};

package/src/mappings/KeyboardAwareScrollView.ts

@@ -0,0 +1,48 @@
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  createStaticNumberProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Keyboard Aware Scroll View",
+  tag: "KeyboardAwareScrollView",
+  description:
+    "View that moves pushes the content when virtual keyboard is open.",
+  category: COMPONENT_TYPES.layout,
+  layout: {},
+  props: {
+    viewIsInsideTabBar: createStaticBoolProp({
+      label: "View Is Inside TabBar",
+      description: "Adds an extra offset that represents the TabBarIOS height.",
+    }),
+    enableAutomaticScroll: createStaticBoolProp({
+      label: "Enable Automatic Scroll",
+      description:
+        "When focus in TextInput will scroll the position, default is enabled",
+    }),
+    extraHeight: createStaticNumberProp({
+      label: "Extra Height",
+      description: "Adds an extra offset when focusing the TextInputs",
+    }),
+    extraScrollHeight: createStaticNumberProp({
+      label: "Extra Scroll Height",
+      description:
+        "Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard",
+    }),
+    enableResetScrollToCoords: createStaticBoolProp({
+      label: "Enable Reset Scroll To Coordinates",
+      description:
+        "Lets the user enable or disable automatic resetScrollToCoords",
+    }),
+    keyboardOpeningTime: createStaticNumberProp({
+      label: "Keyboard Opening Time",
+      description:
+        "Sets the delay time before scrolling to new position, default is 250",
+    }),
+    enableOnAndroid: createStaticBoolProp({
+      label: "Enable On Android",
+      description: "Enable Android Support",
+    }),
+  },
+};