@draftbit/core 42.3.3-fdd04d.0 → 42.4.0

package/src/components/TextField.js

@@ -25,7 +25,11 @@ class TextField extends React.Component {
         },
     };
     componentDidMount() {
-        if (this.props.initialValue) {
+        if (this.props.defaultValue) {
+            this._handleChangeText(this.props.defaultValue);
+        }
+        else if (this.props.initialValue) {
+            // deprecated
             this._handleChangeText(this.props.initialValue);
         }
         if (this.props.placeholder) {

package/src/components/TextField.tsx

@@ -41,6 +41,7 @@ const ICON_SIZE = 24;
 export type Props = {
   type?: "solid" | "underline";
   initialValue?: string;
+  defaultValue?: string;
   disabled?: boolean;
   label?: string;
   error?: boolean;
@@ -94,7 +95,10 @@ class TextField extends React.Component<Props, State> {
   };
 
   componentDidMount() {
-    if (this.props.initialValue) {
+    if (this.props.defaultValue) {
+      this._handleChangeText(this.props.defaultValue);
+    } else if (this.props.initialValue) {
+      // deprecated
       this._handleChangeText(this.props.initialValue);
     }
 

package/src/components/TextInput.js

@@ -4,7 +4,7 @@ import { usePrevious } from "../hooks";
 const TextInput = ({ initialValue, onChangeText, ...props }) => {
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
-        if (initialValue !== previousInitialValue) {
+        if (initialValue !== previousInitialValue && onChangeText) {
             onChangeText(initialValue);
         }
     }, [initialValue, previousInitialValue, onChangeText]);

package/src/components/TextInput.tsx

@@ -4,7 +4,7 @@ import { usePrevious } from "../hooks";
 
 interface Props {
   initialValue?: string;
-  onChangeText: (value?: string) => void;
+  onChangeText?: (value?: string) => void;
 }
 
 const TextInput: React.FC<Props> = ({
@@ -14,7 +14,7 @@ const TextInput: React.FC<Props> = ({
 }) => {
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
-    if (initialValue !== previousInitialValue) {
+    if (initialValue !== previousInitialValue && onChangeText) {
       onChangeText(initialValue);
     }
   }, [initialValue, previousInitialValue, onChangeText]);

package/src/components/ToggleButton.js

@@ -5,14 +5,22 @@ import { StyleSheet } from "react-native";
 import IconButton from "./IconButton";
 import { COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createStaticNumberProp, createFieldNameProp, createIconSizeProp, createActionProp, Triggers, } from "@draftbit/types";
 import { usePrevious } from "../hooks";
-const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, initialValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
+const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, initialValue, defaultValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
+    const [internalValue, setIntervalValue] = React.useState(toggled || defaultValue || false);
+    React.useEffect(() => {
+        setIntervalValue(toggled);
+    }, [toggled]);
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
         if (initialValue !== previousInitialValue) {
             onPress(initialValue);
         }
     }, [initialValue, previousInitialValue, onPress]);
-    return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: toggled ? colors[color] : colors[colorSecondary], onPress: () => onPress(!toggled), disabled: disabled, style: [
+    const handlePress = () => {
+        setIntervalValue(!toggled);
+        onPress(!toggled);
+    };
+    return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
             styles.mainContainer,
             {
                 width,

package/src/components/ToggleButton.tsx

@@ -22,7 +22,8 @@ type Props = {
   icon: string;
   toggled?: boolean;
   onPress?: (toggled: boolean) => void;
-  initialValue?: boolean;
+  initialValue?: boolean; // deprecated
+  defaultValue?: boolean;
   disabled?: boolean;
   color?: colorTypes;
   colorSecondary?: colorTypes;
@@ -40,6 +41,7 @@ const ToggleButton: React.FC<Props> = ({
   toggled = false,
   onPress = () => {},
   initialValue,
+  defaultValue,
   disabled = false,
   color = "primary",
   colorSecondary = "surface",
@@ -51,6 +53,14 @@ const ToggleButton: React.FC<Props> = ({
   style,
   ...rest
 }) => {
+  const [internalValue, setIntervalValue] = React.useState<boolean>(
+    toggled || defaultValue || false
+  );
+
+  React.useEffect(() => {
+    setIntervalValue(toggled);
+  }, [toggled]);
+
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
     if (initialValue !== previousInitialValue) {
@@ -58,13 +68,18 @@ const ToggleButton: React.FC<Props> = ({
     }
   }, [initialValue, previousInitialValue, onPress]);
 
+  const handlePress = () => {
+    setIntervalValue(!toggled);
+    onPress(!toggled);
+  };
+
   return (
     <IconButton
       Icon={Icon}
       icon={icon}
       size={iconSize}
-      color={toggled ? colors[color] : colors[colorSecondary]}
-      onPress={() => onPress(!toggled)}
+      color={internalValue ? colors[color] : colors[colorSecondary]}
+      onPress={handlePress}
       disabled={disabled}
       style={[
         styles.mainContainer,