@draftbit/core 46.4.4-535477.2 → 46.4.4-5976c7.2

package/src/components/TextField.tsx

@@ -52,6 +52,7 @@ export type Props = {
   IconSlot;
 
 interface State {
+  nativeProps: any;
   labeled: Animated.Value;
   focused?: boolean;
   placeholder?: string | undefined;
@@ -73,6 +74,7 @@ class TextField extends React.Component<Props, State> {
   }
 
   state: State = {
+    nativeProps: {},
     labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
     focused: false,
     placeholder: this.props.error ? this.props.placeholder : "",
@@ -207,7 +209,10 @@ class TextField extends React.Component<Props, State> {
    * @internal
    */
   setNativeProps(args: Props) {
-    return this._root && this._root.setNativeProps(args);
+    this.setState((state) => ({
+      ...state,
+      nativeState: args || {},
+    }));
   }
 
   isFocused() {
@@ -566,6 +571,7 @@ class TextField extends React.Component<Props, State> {
             underlineColorAndroid: "transparent",
             style: inputStyles,
             ...rest,
+            ...this.state.nativeProps,
             value: this.state.value,
           })}
         </View>

package/src/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         label: "Label",
@@ -10,6 +10,12 @@ const SEED_DATA_PROPS = {
         required: true,
         group: GROUPS.data,
     },
+    labelSize: createNumberProp({
+        label: "Label Size",
+    }),
+    labelColor: createColorProp({
+        label: "Label Color",
+    }),
     mode: {
         label: "Mode",
         description: "Choose between date, time and datetime",
@@ -21,6 +27,12 @@ const SEED_DATA_PROPS = {
         options: ["date", "time", "datetime"],
         group: GROUPS.basic,
     },
+    borderColor: createColorProp({
+        label: "Border Color",
+    }),
+    borderColorActive: createColorProp({
+        label: "Border Color",
+    }),
     format: {
         label: "Format",
         description: "Create an output format for the date.",
@@ -139,6 +151,14 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
+        StylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Size,
+            StylesPanelSections.Typography,
+        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/DatePicker.ts

@@ -5,6 +5,9 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
+  StylesPanelSections,
+  createNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -18,6 +21,12 @@ const SEED_DATA_PROPS = {
     required: true,
     group: GROUPS.data,
   },
+  labelSize: createNumberProp({
+    label: "Label Size",
+  }),
+  labelColor: createColorProp({
+    label: "Label Color",
+  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -29,6 +38,12 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic,
   },
+  borderColor: createColorProp({
+    label: "Border Color",
+  }),
+  borderColorActive: createColorProp({
+    label: "Border Color",
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -150,6 +165,14 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
+    StylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.Borders,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Size,
+      StylesPanelSections.Typography,
+    ],
     props: {
       ...SEED_DATA_PROPS,
       type: {

package/src/mappings/Stepper.js

@@ -1,11 +1,14 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Stepper",
         tag: "Stepper",
         description: "A component used to control the quantity of something",
         category: COMPONENT_TYPES.control,
-        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            ...BLOCK_STYLES_SECTIONS,
+        ],
         layout: {},
         triggers: [Triggers.OnChange],
         props: {

package/src/mappings/Stepper.ts

@@ -6,6 +6,7 @@ import {
   createStaticNumberProp,
   Triggers,
   BLOCK_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -14,7 +15,10 @@ export const SEED_DATA = [
     tag: "Stepper",
     description: "A component used to control the quantity of something",
     category: COMPONENT_TYPES.control,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      ...BLOCK_STYLES_SECTIONS,
+    ],
     layout: {},
     triggers: [Triggers.OnChange],
     props: {

package/src/mappings/TextField.js

@@ -16,7 +16,7 @@ const SEED_DATA_PROPS = {
         description: "Can automatically capitalize sentences, words, and characters (Default: none).",
         editable: true,
         required: false,
-        defaultValue: null,
+        defaultValue: "none",
         options: ["none", "sentences", "words", "characters"],
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,

package/src/mappings/TextField.ts

@@ -30,7 +30,7 @@ const SEED_DATA_PROPS = {
       "Can automatically capitalize sentences, words, and characters (Default: none).",
     editable: true,
     required: false,
-    defaultValue: null,
+    defaultValue: "none",
     options: ["none", "sentences", "words", "characters"],
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING,

package/src/mappings/TextInput.js

@@ -104,7 +104,7 @@ export const SEED_DATA = [
                 description: "Can automatically capitalize sentences, words, and characters (Default: none).",
                 editable: true,
                 required: false,
-                defaultValue: null,
+                defaultValue: "none",
                 options: ["none", "sentences", "words", "characters"],
                 formType: FORM_TYPES.flatArray,
                 propType: PROP_TYPES.STRING,

package/src/mappings/TextInput.ts

@@ -121,7 +121,7 @@ export const SEED_DATA = [
           "Can automatically capitalize sentences, words, and characters (Default: none).",
         editable: true,
         required: false,
-        defaultValue: null,
+        defaultValue: "none",
         options: ["none", "sentences", "words", "characters"],
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,