@draftbit/core 43.3.0 → 43.3.4-a9cc72.1

package/src/components/Stepper.js

@@ -2,40 +2,42 @@ import * as React from "react";
 import { View, Text } from "react-native";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-const Stepper = ({ Icon, value, style, onChange, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
+import isNumber from "lodash.isnumber";
+const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
     const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
     React.useEffect(() => {
-        if (value != null) {
-            setStateValue(value);
+        if (value || value === 0) {
+            onChange && onChange(stateValue);
         }
-    }, [value]);
+    }, [onChange, stateValue, value]);
     React.useEffect(() => {
-        if (defaultValue != null) {
-            setStateValue(defaultValue);
-        }
-    }, [defaultValue]);
-    const handleMinus = () => {
-        if (value || value === 0) {
-            onChange && onChange(value - 1);
+        let newValue = value || defaultValue || 0;
+        if (isNumber(max) && newValue > max) {
+            newValue = max;
         }
-        else {
-            setStateValue(stateValue - 1);
+        if (isNumber(min) && newValue < min) {
+            newValue = min;
         }
-    };
-    const handlePlus = () => {
-        if (value || value === 0) {
-            onChange && onChange(value + 1);
+        setStateValue(newValue);
+    }, [defaultValue, value, min, max]);
+    const handleMinus = React.useCallback(() => {
+        if (isNumber(min) && value === min) {
+            return;
         }
-        else {
-            setStateValue(stateValue + 1);
+        setStateValue(stateValue - 1);
+    }, [min, stateValue, value]);
+    const handlePlus = React.useCallback(() => {
+        if (isNumber(max) && value === max) {
+            return;
         }
-    };
+        setStateValue(stateValue + 1);
+    }, [max, stateValue, value]);
     return (React.createElement(View, { style: [
             { flexDirection: "row" },
             style,
             borderRadius ? { borderRadius } : {},
         ] },
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: value ? value === 0 : stateValue === 0 }),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === 0 }),
         React.createElement(Text, { style: [
                 typography.body1,
                 {

package/src/components/Stepper.tsx

@@ -5,9 +5,12 @@ import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 
 import IconButton from "./IconButton";
+import isNumber from "lodash.isnumber";
 
 type Props = {
   value?: number;
+  min?: number;
+  max?: number;
   theme: Theme;
   style?: StyleProp<ViewStyle>;
   onChange?: (value: number) => void;
@@ -21,6 +24,8 @@ type Props = {
 const Stepper: React.FC<Props> = ({
   Icon,
   value,
+  min,
+  max,
   style,
   onChange,
   defaultValue,
@@ -35,32 +40,35 @@ const Stepper: React.FC<Props> = ({
   );
 
   React.useEffect(() => {
-    if (value != null) {
-      setStateValue(value);
+    if (value || value === 0) {
+      onChange && onChange(stateValue);
     }
-  }, [value]);
+  }, [onChange, stateValue, value]);
 
   React.useEffect(() => {
-    if (defaultValue != null) {
-      setStateValue(defaultValue);
+    let newValue = value || defaultValue || 0;
+    if (isNumber(max) && newValue > max) {
+      newValue = max;
+    }
+    if (isNumber(min) && newValue < min) {
+      newValue = min;
     }
-  }, [defaultValue]);
+    setStateValue(newValue);
+  }, [defaultValue, value, min, max]);
 
-  const handleMinus = () => {
-    if (value || value === 0) {
-      onChange && onChange(value - 1);
-    } else {
-      setStateValue(stateValue - 1);
+  const handleMinus = React.useCallback(() => {
+    if (isNumber(min) && value === min) {
+      return;
     }
-  };
+    setStateValue(stateValue - 1);
+  }, [min, stateValue, value]);
 
-  const handlePlus = () => {
-    if (value || value === 0) {
-      onChange && onChange(value + 1);
-    } else {
-      setStateValue(stateValue + 1);
+  const handlePlus = React.useCallback(() => {
+    if (isNumber(max) && value === max) {
+      return;
     }
-  };
+    setStateValue(stateValue + 1);
+  }, [max, stateValue, value]);
 
   return (
     <View
@@ -76,7 +84,7 @@ const Stepper: React.FC<Props> = ({
         onPress={handleMinus}
         size={iconSize}
         color={iconColor}
-        disabled={value ? value === 0 : stateValue === 0}
+        disabled={stateValue === 0}
       />
       <Text
         style={[

package/src/components/ToggleButton.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { StyleSheet } from "react-native";
+import IconButton from "./IconButton";
+const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, defaultValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
+    const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
+    React.useEffect(() => {
+        if (toggled != null) {
+            setInternalValue(toggled);
+        }
+    }, [toggled]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setInternalValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const handlePress = () => {
+        setInternalValue(!internalValue);
+        onPress(!internalValue);
+    };
+    return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
+            styles.mainContainer,
+            {
+                width,
+                height,
+                backgroundColor: internalValue
+                    ? colors[colorSecondary]
+                    : colors[color],
+                borderColor: colors[borderColor],
+            },
+            style,
+        ], ...rest }));
+};
+const styles = StyleSheet.create({
+    mainContainer: {
+        borderWidth: 1,
+    },
+});
+export default withTheme(ToggleButton);

package/src/components/ToggleButton.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { colorTypes } from "@draftbit/types";
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
+import IconButton from "./IconButton";
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+type Props = {
+  icon: string;
+  toggled?: boolean;
+  onPress?: (value: boolean) => void;
+  defaultValue?: boolean;
+  disabled?: boolean;
+  color?: colorTypes;
+  colorSecondary?: colorTypes;
+  borderColor?: colorTypes;
+  iconSize?: number;
+  width?: number;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const ToggleButton: React.FC<Props> = ({
+  Icon,
+  icon,
+  toggled = false,
+  onPress = () => {},
+  defaultValue,
+  disabled = false,
+  color = "primary",
+  colorSecondary = "surface",
+  borderColor = "divider",
+  iconSize = 25,
+  width = 50,
+  height = 50,
+  theme: { colors },
+  style,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = React.useState<boolean>(
+    toggled || defaultValue || false
+  );
+
+  React.useEffect(() => {
+    if (toggled != null) {
+      setInternalValue(toggled);
+    }
+  }, [toggled]);
+
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue]);
+
+  const handlePress = () => {
+    setInternalValue(!internalValue);
+    onPress(!internalValue);
+  };
+
+  return (
+    <IconButton
+      Icon={Icon}
+      icon={icon}
+      size={iconSize}
+      color={internalValue ? colors[color] : colors[colorSecondary]}
+      onPress={handlePress}
+      disabled={disabled}
+      style={[
+        styles.mainContainer,
+        {
+          width,
+          height,
+          backgroundColor: internalValue
+            ? colors[colorSecondary]
+            : colors[color],
+          borderColor: colors[borderColor],
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    borderWidth: 1,
+  },
+});
+
+export default withTheme(ToggleButton);

package/src/index.js

@@ -22,6 +22,7 @@ export { default as StarRating } from "./components/StarRating";
 export { default as Surface } from "./components/Surface";
 export { default as Switch, SwitchRow } from "./components/Switch";
 export { default as TextField } from "./components/TextField";
+export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";

package/src/index.tsx

@@ -23,6 +23,7 @@ export { default as StarRating } from "./components/StarRating";
 export { default as Surface } from "./components/Surface";
 export { default as Switch, SwitchRow } from "./components/Switch";
 export { default as TextField } from "./components/TextField";
+export { default as ToggleButton } from "./components/ToggleButton";
 export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export {

package/src/mappings/Stepper.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Stepper",
@@ -15,6 +15,15 @@ export const SEED_DATA = [
             }),
             iconSize: createIconSizeProp({ defaultValue: 24 }),
             iconColor: createColorProp({ defaultValue: "strong" }),
+            min: createStaticNumberProp({
+                label: "Minimum",
+                description: "Minimum Number",
+                defaultValue: 0,
+            }),
+            max: createStaticNumberProp({
+                label: "Maximum",
+                description: "Maximum Number",
+            }),
         },
     },
 ];

package/src/mappings/Stepper.ts

@@ -3,6 +3,7 @@ import {
   createIconSizeProp,
   createColorProp,
   createFieldNameProp,
+  createStaticNumberProp,
   Triggers,
 } from "@draftbit/types";
 
@@ -22,6 +23,15 @@ export const SEED_DATA = [
       }),
       iconSize: createIconSizeProp({ defaultValue: 24 }),
       iconColor: createColorProp({ defaultValue: "strong" }),
+      min: createStaticNumberProp({
+        label: "Minimum",
+        description: "Minimum Number",
+        defaultValue: 0,
+      }),
+      max: createStaticNumberProp({
+        label: "Maximum",
+        description: "Maximum Number",
+      }),
     },
   },
 ];

package/src/mappings/ToggleButton.js

@@ -0,0 +1,50 @@
+import { GROUPS, COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createStaticNumberProp, createFieldNameProp, createIconSizeProp, createActionProp, Triggers, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Toggle Button",
+    tag: "ToggleButton",
+    category: COMPONENT_TYPES.deprecated,
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+        onPress: createActionProp(),
+        icon: createIconProp({
+            required: true,
+        }),
+        iconSize: createIconSizeProp(),
+        fieldName: createFieldNameProp({
+            defaultValue: false,
+            valuePropName: "toggled",
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether the button should be disabled",
+            group: GROUPS.basic,
+        }),
+        color: createColorProp({
+            group: GROUPS.basic,
+        }),
+        colorSecondary: createColorProp({
+            label: "Secondary Color",
+            group: GROUPS.basic,
+        }),
+        borderColor: createColorProp({
+            label: "Border Color",
+            group: GROUPS.basic,
+        }),
+        width: createStaticNumberProp({
+            label: "Width",
+            description: "Width",
+            defaultValue: 50,
+        }),
+        height: createStaticNumberProp({
+            label: "Height",
+            description: "Height",
+            defaultValue: 50,
+        }),
+        toggled: createBoolProp({
+            label: "Toggled",
+            description: "Whether the button should show the toggled state",
+            defaultValue: false,
+        }),
+    },
+};

package/src/mappings/ToggleButton.ts

@@ -0,0 +1,62 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  createIconProp,
+  createBoolProp,
+  createColorProp,
+  createStaticNumberProp,
+  createFieldNameProp,
+  createIconSizeProp,
+  createActionProp,
+  Triggers,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Toggle Button",
+  tag: "ToggleButton",
+  category: COMPONENT_TYPES.deprecated,
+  layout: {},
+  triggers: [Triggers.OnPress],
+  props: {
+    onPress: createActionProp(),
+    icon: createIconProp({
+      required: true,
+    }),
+    iconSize: createIconSizeProp(),
+    fieldName: createFieldNameProp({
+      defaultValue: false,
+      valuePropName: "toggled",
+    }),
+    disabled: createBoolProp({
+      label: "Disabled",
+      description: "Whether the button should be disabled",
+      group: GROUPS.basic,
+    }),
+    color: createColorProp({
+      group: GROUPS.basic,
+    }),
+    colorSecondary: createColorProp({
+      label: "Secondary Color",
+      group: GROUPS.basic,
+    }),
+    borderColor: createColorProp({
+      label: "Border Color",
+      group: GROUPS.basic,
+    }),
+    width: createStaticNumberProp({
+      label: "Width",
+      description: "Width",
+      defaultValue: 50,
+    }),
+    height: createStaticNumberProp({
+      label: "Height",
+      description: "Height",
+      defaultValue: 50,
+    }),
+    toggled: createBoolProp({
+      label: "Toggled",
+      description: "Whether the button should show the toggled state",
+      defaultValue: false,
+    }),
+  },
+};