@draftbit/core 43.4.11-ca8fc3.1 → 43.4.12

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("0"));
-    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 (or original) value if different from current (or initialized "0") 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("0")
-  );
-
-  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 (or original) value if different from current (or initialized "0") 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/RadioButton/RadioButtonRow.js

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
         paddingStart: 20,
         minHeight: 50,
         paddingEnd: 20,
-        flex: 1,
+        display: "flex",
         ...Platform.select({
             web: {
                 cursor: "pointer",

package/src/components/RadioButton/RadioButtonRow.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
     paddingStart: 20,
     minHeight: 50,
     paddingEnd: 20,
-    flex: 1,
+    display: "flex",
     ...Platform.select({
       web: {
         cursor: "pointer",

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/CheckboxRow.js

@@ -1,4 +1,4 @@
-import { createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, COMPONENT_TYPES, Triggers, createColorProp, } from "@draftbit/types";
+import { createBoolProp, createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, createIconProp, createStaticNumberProp, COMPONENT_TYPES, Triggers, createColorProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Checkbox Row",
     tag: "CheckboxRow",
@@ -6,8 +6,13 @@ export const SEED_DATA = {
     layout: {
         minHeight: 50,
     },
-    triggers: [Triggers.OnPress],
+    triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
     props: {
+        fieldName: createFieldNameProp({
+            defaultValue: "checkboxRowValue",
+            valuePropName: "value",
+            handlerPropName: "onPress",
+        }),
         label: createTextProp({
             label: "Label",
             description: "Label to show with the checkbox",
@@ -21,11 +26,6 @@ export const SEED_DATA = {
             editable: false,
         }),
         direction: createRowDirectionProp(),
-        fieldName: createFieldNameProp({
-            defaultValue: "checkboxRowValue",
-            valuePropName: "value",
-            handlerPropName: "onPress",
-        }),
         color: createColorProp({
             description: "Color for the button (used when the checkbox is checked)",
         }),
@@ -33,5 +33,24 @@ export const SEED_DATA = {
             label: "Unselected Color",
             description: "Color for the button when the checkbox is unchecked",
         }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether the checkbox is disabled",
+        }),
+        size: createStaticNumberProp({
+            label: "Size",
+            description: "Specifies the size of the icon",
+            defaultValue: null,
+        }),
+        checkedIcon: createIconProp({
+            label: "Checked Icon",
+            description: 'Icon to show when the checkbox status is "checked"',
+            defaultValue: null,
+        }),
+        uncheckedIcon: createIconProp({
+            label: "Unchecked Icon",
+            description: 'Icon to show when the checkbox status is "unchecked"',
+            defaultValue: null,
+        }),
     },
 };

package/src/mappings/CheckboxRow.ts

@@ -1,8 +1,11 @@
 import {
+  createBoolProp,
   createTextProp,
   createTextStyle,
   createRowDirectionProp,
   createFieldNameProp,
+  createIconProp,
+  createStaticNumberProp,
   COMPONENT_TYPES,
   Triggers,
   createColorProp,
@@ -15,8 +18,13 @@ export const SEED_DATA = {
   layout: {
     minHeight: 50,
   },
-  triggers: [Triggers.OnPress],
+  triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
   props: {
+    fieldName: createFieldNameProp({
+      defaultValue: "checkboxRowValue",
+      valuePropName: "value",
+      handlerPropName: "onPress",
+    }),
     label: createTextProp({
       label: "Label",
       description: "Label to show with the checkbox",
@@ -30,11 +38,6 @@ export const SEED_DATA = {
       editable: false,
     }),
     direction: createRowDirectionProp(),
-    fieldName: createFieldNameProp({
-      defaultValue: "checkboxRowValue",
-      valuePropName: "value",
-      handlerPropName: "onPress",
-    }),
     color: createColorProp({
       description: "Color for the button (used when the checkbox is checked)",
     }),
@@ -42,5 +45,24 @@ export const SEED_DATA = {
       label: "Unselected Color",
       description: "Color for the button when the checkbox is unchecked",
     }),
+    disabled: createBoolProp({
+      label: "Disabled",
+      description: "Whether the checkbox is disabled",
+    }),
+    size: createStaticNumberProp({
+      label: "Size",
+      description: "Specifies the size of the icon",
+      defaultValue: null,
+    }),
+    checkedIcon: createIconProp({
+      label: "Checked Icon",
+      description: 'Icon to show when the checkbox status is "checked"',
+      defaultValue: null,
+    }),
+    uncheckedIcon: createIconProp({
+      label: "Unchecked Icon",
+      description: 'Icon to show when the checkbox status is "unchecked"',
+      defaultValue: null,
+    }),
   },
 };