@draftbit/core 43.2.5-7c0f30.3 → 43.2.5-8bfd16.3

package/lib/typescript/src/{components/LinearGradient.d.ts → mappings/TabView.d.ts}

@@ -1,108 +1,111 @@
-/// <reference types="react" />
-import { StyleProp, ViewStyle } from "react-native";
-declare type Props = {
-    color1: string;
-    color2: string;
-    color3: string;
-    startX: number;
-    startY: number;
-    endX: number;
-    endY: number;
-    children?: any;
-    style?: StyleProp<ViewStyle>;
-};
-declare const LinearGradientComp: ({ children, color1, color2, color3, startX, startY, endX, endY, style, }: Props) => JSX.Element;
-export default LinearGradientComp;
-export declare const SEED_DATA: {
+export declare const SEED_DATA: ({
     name: string;
     tag: string;
-    description: string;
+    category: string;
+    layout: {};
     props: {
-        color1: {
+        tabBarPosition: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: null;
             formType: string;
             propType: string;
+            defaultValue: null;
+            options: never[];
         };
-        color2: {
+        keyboardDismissMode: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: null;
             formType: string;
             propType: string;
+            defaultValue: null;
+            options: never[];
         };
-        color3: {
-            group: string;
+        swipeEnabled: {
             label: string;
             description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-            defaultValue: null;
+            group: string;
+        };
+        scrollEnabled: {
+            label: string;
+            description: string;
             formType: string;
             propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
         };
-        startX: {
+        activeColor: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: number;
-            min: number;
-            max: number;
-            step: number;
-            precision: number;
+            defaultValue: null;
             formType: string;
             propType: string;
         };
-        startY: {
+        inactiveColor: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: number;
-            min: number;
-            max: number;
-            step: number;
-            precision: number;
+            defaultValue: null;
             formType: string;
             propType: string;
         };
-        endX: {
+        pressColor: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: number;
-            min: number;
-            max: number;
-            step: number;
-            precision: number;
+            defaultValue: null;
             formType: string;
             propType: string;
         };
-        endY: {
+        indicatorColor: {
             group: string;
             label: string;
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: number;
-            min: number;
-            max: number;
-            step: number;
-            precision: number;
+            defaultValue: null;
             formType: string;
             propType: string;
         };
+        title?: undefined;
+        id?: undefined;
+        accessibilityLabel?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    category: string;
+    layout: {};
+    props: {
+        title: any;
+        id: any;
+        accessibilityLabel: any;
+        tabBarPosition?: undefined;
+        keyboardDismissMode?: undefined;
+        swipeEnabled?: undefined;
+        scrollEnabled?: undefined;
+        activeColor?: undefined;
+        inactiveColor?: undefined;
+        pressColor?: undefined;
+        indicatorColor?: undefined;
     };
-};
+})[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.2.5-7c0f30.3+7c0f300b",
+  "version": "43.2.5-8bfd16.3+8bfd16fb",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -49,11 +49,12 @@
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
-    "expo-linear-gradient": "^9.2.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
     "react-native-modal-datetime-picker": "^13.0.0",
+    "react-native-pager-view": "^5.4.9",
+    "react-native-tab-view": "^3.1.1",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.1"
   },
@@ -80,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "7c0f300b2632db799a0a07953a50109f3eaaabd4"
+  "gitHead": "8bfd16fb7313352b593393880414accf83e65557"
 }

package/src/components/TabView/TabView.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+// import { withTheme } from "../../theming";
+import TabViewItem from "./TabViewItem";
+const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
+    const [index, setIndex] = React.useState(0);
+    const [routes, setRoutes] = React.useState([]);
+    const [tabScenes, setTabScenes] = React.useState({});
+    React.useEffect(() => {
+        const newRoutes = [];
+        const scenes = {};
+        React.Children.toArray(children)
+            .filter((child) => child.type === TabViewItem)
+            .forEach((child) => {
+            if (child?.props?.id) {
+                newRoutes.push({
+                    key: child?.props?.id,
+                    ...child?.props,
+                });
+                scenes[child?.props?.id] = () => child;
+            }
+        });
+        setRoutes(newRoutes);
+        setTabScenes(scenes);
+    }, [children]);
+    const indexChangeHandler = (i) => setIndex(i);
+    const renderTabBar = (props) => {
+        console.log(props);
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => route?.icon ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
+    };
+    return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default TabViewComponent;

package/src/components/TabView/TabView.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+
+// import { withTheme } from "../../theming";
+import TabViewItem from "./TabViewItem";
+import type { IconSlot } from "../../interfaces/Icon";
+
+type TabBarPosition = "top" | "bottom";
+type KeyboardDismissMode = "none" | "auto" | "on-drag";
+
+type TabViewProps = {
+  tabBarPosition?: TabBarPosition;
+  keyboardDismissMode?: KeyboardDismissMode;
+  swipeEnabled?: boolean;
+  scrollEnabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  pressColor?: string;
+  indicatorColor?: string;
+  style?: StyleProp<TextStyle | ViewStyle>;
+  children: React.ReactNode;
+} & IconSlot;
+
+const TabViewComponent = ({
+  Icon,
+  tabBarPosition,
+  keyboardDismissMode,
+  swipeEnabled,
+  scrollEnabled,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  indicatorColor,
+  style,
+  children,
+}: TabViewProps) => {
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  React.useEffect(() => {
+    const newRoutes: any = [];
+    const scenes: any = {};
+
+    React.Children.toArray(children)
+      .filter((child: any) => child.type === TabViewItem)
+      .forEach((child: any) => {
+        if (child?.props?.id) {
+          newRoutes.push({
+            key: child?.props?.id,
+            ...child?.props,
+          });
+          scenes[child?.props?.id] = () => child;
+        }
+      });
+
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = (i: any) => setIndex(i);
+
+  const renderTabBar = (props: any) => {
+    console.log(props);
+    return (
+      <TabBar
+        {...props}
+        activeColor={activeColor}
+        inactiveColor={inactiveColor}
+        pressColor={pressColor}
+        scrollEnabled={scrollEnabled}
+        indicatorStyle={{ backgroundColor: indicatorColor }}
+        renderIcon={({ route, color }) =>
+          route?.icon ? (
+            <Icon name={route.icon} color={color} size={36} />
+          ) : null
+        }
+        style={style}
+      />
+    );
+  };
+
+  return (
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={SceneMap(tabScenes)}
+      renderTabBar={renderTabBar}
+      onIndexChange={indexChangeHandler}
+      tabBarPosition={tabBarPosition}
+      keyboardDismissMode={keyboardDismissMode}
+      swipeEnabled={swipeEnabled}
+    />
+  );
+};
+
+export default TabViewComponent;

package/src/components/TabView/TabViewItem.js

@@ -0,0 +1,5 @@
+const TabViewItem = ({ title, id, icon, children, accessibilityLabel, }) => {
+    console.log({ title, id, icon, accessibilityLabel });
+    return children;
+};
+export default TabViewItem;

package/src/components/TabView/TabViewItem.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+interface TabViewItemProps {
+  title: string;
+  id: string;
+  icon: string;
+  accessibilityLabel: string;
+  children: React.ReactNode;
+}
+
+const TabViewItem = ({
+  title,
+  id,
+  icon,
+  children,
+  accessibilityLabel,
+}: TabViewItemProps) => {
+  console.log({ title, id, icon, accessibilityLabel });
+  return children;
+};
+
+export default TabViewItem;

package/src/components/TabView/index.js

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/src/components/TabView/index.ts

@@ -0,0 +1,2 @@
+export { default as TabView } from "./TabView";
+export { default as TabViewItem } from "./TabViewItem";

package/src/index.js

@@ -25,9 +25,9 @@ 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 { default as LinearGradient } from "./components/LinearGradient";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
+export { TabView, TabViewItem } from "./components/TabView";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
 /* Deprecated: Fix or Delete!  */

package/src/index.tsx

@@ -26,13 +26,13 @@ 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 { default as LinearGradient } from "./components/LinearGradient";
 export {
   ActionSheet,
   ActionSheetItem,
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
+export { TabView, TabViewItem } from "./components/TabView";
 
 export {
   Center,

package/src/mappings/TabView.js

@@ -0,0 +1,73 @@
+import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "TabView",
+        tag: "TabView",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            tabBarPosition: createTextEnumProp({
+                label: "Tab Bar Position",
+                description: "Tab Bar Position",
+                options: ["top", "bottom"],
+                defaultValue: "top",
+            }),
+            keyboardDismissMode: createTextEnumProp({
+                label: "Keyboard Dismiss Mode",
+                description: "Keyboard Dismiss Mode",
+                options: ["auto", "on-drag", "none"],
+                defaultValue: "auto",
+            }),
+            swipeEnabled: createBoolProp({
+                label: "Swipe Enabled",
+                description: "Swipe Enabled",
+                defaultValue: true,
+            }),
+            scrollEnabled: createBoolProp({
+                label: "Scroll Enabled",
+                description: "Scroll Enabled",
+                defaultValue: true,
+            }),
+            activeColor: createColorProp({
+                label: "Active Color",
+                description: "Active Color",
+                defaultValue: "primary",
+            }),
+            inactiveColor: createColorProp({
+                label: "Inactive Color",
+                description: "Inactive Color",
+                defaultValue: null,
+            }),
+            pressColor: createColorProp({
+                label: "Press Color",
+                description: "Press Color",
+                defaultValue: null,
+            }),
+            indicatorColor: createColorProp({
+                label: "Indicator Color",
+                description: "Indicator Color",
+                defaultValue: null,
+            }),
+        },
+    },
+    {
+        name: "TabViewItem",
+        tag: "TabViewItem",
+        category: COMPONENT_TYPES.container,
+        layout: {},
+        props: {
+            title: createTextProp({
+                label: "Title",
+                description: "Tab Title",
+            }),
+            id: createTextProp({
+                label: "Id",
+                description: "Tab Id",
+            }),
+            accessibilityLabel: createTextProp({
+                label: "Accessibility Label",
+                description: "Accessibility Label",
+            }),
+        },
+    },
+];

package/src/mappings/TabView.ts

@@ -0,0 +1,80 @@
+import {
+  COMPONENT_TYPES,
+  createTextProp,
+  createTextEnumProp,
+  createBoolProp,
+  createColorProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "TabView",
+    tag: "TabView",
+    category: COMPONENT_TYPES.container,
+    layout: {},
+    props: {
+      tabBarPosition: createTextEnumProp({
+        label: "Tab Bar Position",
+        description: "Tab Bar Position",
+        options: ["top", "bottom"],
+        defaultValue: "top",
+      }),
+      keyboardDismissMode: createTextEnumProp({
+        label: "Keyboard Dismiss Mode",
+        description: "Keyboard Dismiss Mode",
+        options: ["auto", "on-drag", "none"],
+        defaultValue: "auto",
+      }),
+      swipeEnabled: createBoolProp({
+        label: "Swipe Enabled",
+        description: "Swipe Enabled",
+        defaultValue: true,
+      }),
+      scrollEnabled: createBoolProp({
+        label: "Scroll Enabled",
+        description: "Scroll Enabled",
+        defaultValue: true,
+      }),
+      activeColor: createColorProp({
+        label: "Active Color",
+        description: "Active Color",
+        defaultValue: "primary",
+      }),
+      inactiveColor: createColorProp({
+        label: "Inactive Color",
+        description: "Inactive Color",
+        defaultValue: null,
+      }),
+      pressColor: createColorProp({
+        label: "Press Color",
+        description: "Press Color",
+        defaultValue: null,
+      }),
+      indicatorColor: createColorProp({
+        label: "Indicator Color",
+        description: "Indicator Color",
+        defaultValue: null,
+      }),
+    },
+  },
+  {
+    name: "TabViewItem",
+    tag: "TabViewItem",
+    category: COMPONENT_TYPES.container,
+    layout: {},
+    props: {
+      title: createTextProp({
+        label: "Title",
+        description: "Tab Title",
+      }),
+      id: createTextProp({
+        label: "Id",
+        description: "Tab Id",
+      }),
+      accessibilityLabel: createTextProp({
+        label: "Accessibility Label",
+        description: "Accessibility Label",
+      }),
+    },
+  },
+];

package/lib/commonjs/components/LinearGradient.js

@@ -1,127 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SEED_DATA = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _expoLinearGradient = require("expo-linear-gradient");
-
-var _utilities = require("../utilities");
-
-var _types = require("@draftbit/types");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const LinearGradientComp = _ref => {
-  let {
-    children,
-    color1,
-    color2,
-    color3,
-    startX = 0,
-    startY = 0,
-    endX = 100,
-    endY = 100,
-    style
-  } = _ref;
-  const {
-    viewStyles
-  } = (0, _utilities.extractStyles)(style);
-  const colors = [color1, color2, color3].filter(color => !!color);
-  const start = {
-    x: startX / 100,
-    y: startY / 100
-  };
-  const end = {
-    x: endX / 100,
-    y: endY / 100
-  };
-  return /*#__PURE__*/React.createElement(_expoLinearGradient.LinearGradient, {
-    colors: colors,
-    start: start,
-    end: end,
-    style: viewStyles
-  }, children);
-};
-
-var _default = LinearGradientComp;
-exports.default = _default;
-const SEED_DATA = {
-  name: "LinearGradient",
-  tag: "LinearGradient",
-  description: "Linear Gradient Component",
-  props: {
-    color1: (0, _types.createColorProp)({
-      label: "Color 1"
-    }),
-    color2: (0, _types.createColorProp)({
-      label: "Color 2"
-    }),
-    color3: (0, _types.createColorProp)({
-      label: "Color 3"
-    }),
-    startX: {
-      group: _types.GROUPS.basic,
-      label: "Start X",
-      description: "Start position from Left",
-      editable: true,
-      required: false,
-      defaultValue: 0,
-      min: 0,
-      max: 100,
-      step: 1,
-      precision: 0,
-      formType: _types.FORM_TYPES.number,
-      propType: _types.PROP_TYPES.NUMBER
-    },
-    startY: {
-      group: _types.GROUPS.basic,
-      label: "Start Y",
-      description: "Start position from Top",
-      editable: true,
-      required: false,
-      defaultValue: 0,
-      min: 0,
-      max: 100,
-      step: 1,
-      precision: 0,
-      formType: _types.FORM_TYPES.number,
-      propType: _types.PROP_TYPES.NUMBER
-    },
-    endX: {
-      group: _types.GROUPS.basic,
-      label: "End Y",
-      description: "End position from Right",
-      editable: true,
-      required: false,
-      defaultValue: 100,
-      min: 0,
-      max: 100,
-      step: 1,
-      precision: 0,
-      formType: _types.FORM_TYPES.number,
-      propType: _types.PROP_TYPES.NUMBER
-    },
-    endY: {
-      group: _types.GROUPS.basic,
-      label: "End Y",
-      description: "End position from Bottom",
-      editable: true,
-      required: false,
-      defaultValue: 100,
-      min: 0,
-      max: 100,
-      step: 1,
-      precision: 0,
-      formType: _types.FORM_TYPES.number,
-      propType: _types.PROP_TYPES.NUMBER
-    }
-  }
-};
-exports.SEED_DATA = SEED_DATA;
-//# sourceMappingURL=LinearGradient.js.map

package/lib/commonjs/components/LinearGradient.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["LinearGradient.tsx"],"names":["LinearGradientComp","children","color1","color2","color3","startX","startY","endX","endY","style","viewStyles","colors","filter","color","start","x","y","end","SEED_DATA","name","tag","description","props","label","group","GROUPS","basic","editable","required","defaultValue","min","max","step","precision","formType","FORM_TYPES","number","propType","PROP_TYPES","NUMBER"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, ViewStyle } from \"react-native\";\nimport { LinearGradient } from \"expo-linear-gradient\";\nimport { extractStyles } from \"../utilities\";\nimport {\n  createColorProp,\n  FORM_TYPES,\n  GROUPS,\n  PROP_TYPES,\n} from \"@draftbit/types\";\n\ntype Props = {\n  color1: string;\n  color2: string;\n  color3: string;\n  startX: number;\n  startY: number;\n  endX: number;\n  endY: number;\n  children?: any;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst LinearGradientComp = ({\n  children,\n  color1,\n  color2,\n  color3,\n  startX = 0,\n  startY = 0,\n  endX = 100,\n  endY = 100,\n  style,\n}: Props) => {\n  const { viewStyles } = extractStyles(style);\n  const colors = [color1, color2, color3].filter((color: string) => !!color);\n  const start = { x: startX / 100, y: startY / 100 };\n  const end = { x: endX / 100, y: endY / 100 };\n  return (\n    <LinearGradient colors={colors} start={start} end={end} style={viewStyles}>\n      {children}\n    </LinearGradient>\n  );\n};\n\nexport default LinearGradientComp;\n\nexport const SEED_DATA = {\n  name: \"LinearGradient\",\n  tag: \"LinearGradient\",\n  description: \"Linear Gradient Component\",\n  props: {\n    color1: createColorProp({\n      label: \"Color 1\",\n    }),\n    color2: createColorProp({\n      label: \"Color 2\",\n    }),\n    color3: createColorProp({\n      label: \"Color 3\",\n    }),\n    startX: {\n      group: GROUPS.basic,\n      label: \"Start X\",\n      description: \"Start position from Left\",\n      editable: true,\n      required: false,\n      defaultValue: 0,\n      min: 0,\n      max: 100,\n      step: 1,\n      precision: 0,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n    },\n    startY: {\n      group: GROUPS.basic,\n      label: \"Start Y\",\n      description: \"Start position from Top\",\n      editable: true,\n      required: false,\n      defaultValue: 0,\n      min: 0,\n      max: 100,\n      step: 1,\n      precision: 0,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n    },\n    endX: {\n      group: GROUPS.basic,\n      label: \"End Y\",\n      description: \"End position from Right\",\n      editable: true,\n      required: false,\n      defaultValue: 100,\n      min: 0,\n      max: 100,\n      step: 1,\n      precision: 0,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n    },\n    endY: {\n      group: GROUPS.basic,\n      label: \"End Y\",\n      description: \"End position from Bottom\",\n      editable: true,\n      required: false,\n      defaultValue: 100,\n      min: 0,\n      max: 100,\n      step: 1,\n      precision: 0,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n    },\n  },\n};\n"]}