@draftbit/core 42.3.3-fdd04d.0 → 42.4.0

package/lib/module/components/RadioButton/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","COMPONENT_TYPES","createFieldNameProp","createDirectionProp","Triggers","radioButtonGroupContext","Direction","usePrevious","Provider","RadioButtonGroup","direction","Vertical","value","onValueChange","initialValue","style","children","rest","previousInitialValue","useEffect","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight","SEED_DATA","name","tag","category","input","layout","triggers","OnValueChange","props","fieldName","handlerPropName","valuePropName","defaultValue"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,SACEC,eADF,EAEEC,mBAFF,EAGEC,mBAHF,EAIEC,QAJF,QAKO,iBALP;AAOA,SAASC,uBAAT,EAAkCC,SAAlC,QAAmD,WAAnD;AACA,SAASC,WAAT,QAA4B,aAA5B;AAWA,MAAM;AAAEC,EAAAA;AAAF,IAAeH,uBAArB;;AAEA,MAAMI,gBAAiD,GAAG,CAAC;AACzDC,EAAAA,SAAS,GAAGJ,SAAS,CAACK,QADmC;AAEzDC,EAAAA,KAFyD;AAGzDC,EAAAA,aAAa,GAAG,MAAM,CAAE,CAHiC;AAIzDC,EAAAA,YAJyD;AAKzDC,EAAAA,KALyD;AAMzDC,EAAAA,QANyD;AAOzD,KAAGC;AAPsD,CAAD,KAQpD;AACJ,QAAMC,oBAAoB,GAAGX,WAAW,CAACO,YAAD,CAAxC;AACAf,EAAAA,KAAK,CAACoB,SAAN,CAAgB,MAAM;AACpB,QAAIL,YAAY,KAAKI,oBAArB,EAA2C;AACzCL,MAAAA,aAAa,CAACC,YAAD,CAAb;AACD;AACF,GAJD,EAIG,CAACA,YAAD,EAAeI,oBAAf,EAAqCL,aAArC,CAJH;AAMA,QAAMO,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAEX,SAAS,KAAKJ,SAAS,CAACgB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAIZ,SAAS,KAAKJ,SAAS,CAACK,QAA5B,EAAsC;AACpCS,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBV,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAE;AAAEL,MAAAA,KAAF;AAASC,MAAAA,aAAT;AAAwBH,MAAAA;AAAxB;AAAjB,kBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEU;AAAb,KAA+BJ,QAA/B,CADF,CADF,CADF;AAOD,CAnCD;;AAqCA,eAAeP,gBAAf;AAEA,OAAO,MAAMiB,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,oBADiB;AAEvBC,EAAAA,GAAG,EAAE,kBAFkB;AAGvBC,EAAAA,QAAQ,EAAE5B,eAAe,CAAC6B,KAHH;AAIvBC,EAAAA,MAAM,EAAE,EAJe;AAKvBC,EAAAA,QAAQ,EAAE,CAAC5B,QAAQ,CAAC6B,aAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLxB,IAAAA,SAAS,EAAEP,mBAAmB,EADzB;AAELgC,IAAAA,SAAS,EAAEjC,mBAAmB,CAAC;AAC7BkC,MAAAA,eAAe,EAAE,eADY;AAE7BC,MAAAA,aAAa,EAAE,OAFc;AAG7BC,MAAAA,YAAY,EAAE;AAHe,KAAD;AAFzB;AANgB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport {\n  COMPONENT_TYPES,\n  createFieldNameProp,\n  createDirectionProp,\n  Triggers,\n} from \"@draftbit/types\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nimport { usePrevious } from \"../../hooks\";\nexport interface RadioButtonGroupProps {\n  direction?: Direction;\n  style?: StyleProp<ViewStyle>;\n  value: string;\n  onValueChange: (value: string) => void;\n  initialValue?: string;\n  theme: Theme;\n  children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n  direction = Direction.Vertical,\n  value,\n  onValueChange = () => {},\n  initialValue,\n  style,\n  children,\n  ...rest\n}) => {\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      onValueChange(initialValue);\n    }\n  }, [initialValue, previousInitialValue, onValueChange]);\n\n  const _containerStyle: StyleProp<ViewStyle> = [\n    {\n      flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n    },\n  ];\n\n  if (direction !== Direction.Vertical) {\n    _containerStyle.push({\n      alignItems: \"center\",\n    });\n  }\n\n  return (\n    <View style={[{ minHeight: 40 }, style]} {...rest}>\n      <Provider value={{ value, onValueChange, direction }}>\n        <View style={_containerStyle}>{children}</View>\n      </Provider>\n    </View>\n  );\n};\n\nexport default RadioButtonGroup;\n\nexport const SEED_DATA = {\n  name: \"Radio Button Group\",\n  tag: \"RadioButtonGroup\",\n  category: COMPONENT_TYPES.input,\n  layout: {},\n  triggers: [Triggers.OnValueChange],\n  props: {\n    direction: createDirectionProp(),\n    fieldName: createFieldNameProp({\n      handlerPropName: \"onValueChange\",\n      valuePropName: \"value\",\n      defaultValue: \"radioButtonGroupValue\",\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","COMPONENT_TYPES","createFieldNameProp","createDirectionProp","Triggers","radioButtonGroupContext","Direction","usePrevious","Provider","RadioButtonGroup","direction","Vertical","value","onValueChange","initialValue","defaultValue","style","children","rest","internalValue","setIntervalValue","useState","useEffect","previousInitialValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight","SEED_DATA","name","tag","category","input","layout","triggers","OnValueChange","props","fieldName","handlerPropName","valuePropName"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,SACEC,eADF,EAEEC,mBAFF,EAGEC,mBAHF,EAIEC,QAJF,QAKO,iBALP;AAOA,SAASC,uBAAT,EAAkCC,SAAlC,QAAmD,WAAnD;AACA,SAASC,WAAT,QAA4B,aAA5B;AAYA,MAAM;AAAEC,EAAAA;AAAF,IAAeH,uBAArB;;AAEA,MAAMI,gBAAiD,GAAG,CAAC;AACzDC,EAAAA,SAAS,GAAGJ,SAAS,CAACK,QADmC;AAEzDC,EAAAA,KAFyD;AAGzDC,EAAAA,aAAa,GAAG,MAAM,CAAE,CAHiC;AAIzDC,EAAAA,YAJyD;AAKzDC,EAAAA,YALyD;AAMzDC,EAAAA,KANyD;AAOzDC,EAAAA,QAPyD;AAQzD,KAAGC;AARsD,CAAD,KASpD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCrB,KAAK,CAACsB,QAAN,CACxCT,KAAK,IAAIG,YAD+B,CAA1C;AAIAhB,EAAAA,KAAK,CAACuB,SAAN,CAAgB,MAAM;AACpBF,IAAAA,gBAAgB,CAACR,KAAD,CAAhB;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;AAIA,QAAMW,oBAAoB,GAAGhB,WAAW,CAACO,YAAD,CAAxC;AACAf,EAAAA,KAAK,CAACuB,SAAN,CAAgB,MAAM;AACpB,QAAIR,YAAY,KAAKS,oBAArB,EAA2C;AACzCV,MAAAA,aAAa,CAACC,YAAD,CAAb;AACD;AACF,GAJD,EAIG,CAACA,YAAD,EAAeS,oBAAf,EAAqCV,aAArC,CAJH;AAMA,QAAMW,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAEf,SAAS,KAAKJ,SAAS,CAACoB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAIhB,SAAS,KAAKJ,SAAS,CAACK,QAA5B,EAAsC;AACpCa,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBb,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAE;AACLN,MAAAA,KAAK,EAAEO,aAAa,IAAI,EADnB;AAELN,MAAAA,aAAa,EAAEO,gBAFV;AAGLV,MAAAA;AAHK;AADT,kBAOE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEc;AAAb,KAA+BP,QAA/B,CAPF,CADF,CADF;AAaD,CAlDD;;AAoDA,eAAeR,gBAAf;AAEA,OAAO,MAAMqB,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,oBADiB;AAEvBC,EAAAA,GAAG,EAAE,kBAFkB;AAGvBC,EAAAA,QAAQ,EAAEhC,eAAe,CAACiC,KAHH;AAIvBC,EAAAA,MAAM,EAAE,EAJe;AAKvBC,EAAAA,QAAQ,EAAE,CAAChC,QAAQ,CAACiC,aAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACL5B,IAAAA,SAAS,EAAEP,mBAAmB,EADzB;AAELoC,IAAAA,SAAS,EAAErC,mBAAmB,CAAC;AAC7BsC,MAAAA,eAAe,EAAE,eADY;AAE7BC,MAAAA,aAAa,EAAE,OAFc;AAG7B1B,MAAAA,YAAY,EAAE;AAHe,KAAD;AAFzB;AANgB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport {\n  COMPONENT_TYPES,\n  createFieldNameProp,\n  createDirectionProp,\n  Triggers,\n} from \"@draftbit/types\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nimport { usePrevious } from \"../../hooks\";\nexport interface RadioButtonGroupProps {\n  direction?: Direction;\n  style?: StyleProp<ViewStyle>;\n  value?: string;\n  onValueChange: (value: string) => void;\n  initialValue?: string; // deprecated\n  defaultValue?: string;\n  theme: Theme;\n  children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n  direction = Direction.Vertical,\n  value,\n  onValueChange = () => {},\n  initialValue,\n  defaultValue,\n  style,\n  children,\n  ...rest\n}) => {\n  const [internalValue, setIntervalValue] = React.useState<string | undefined>(\n    value || defaultValue\n  );\n\n  React.useEffect(() => {\n    setIntervalValue(value);\n  }, [value]);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      onValueChange(initialValue);\n    }\n  }, [initialValue, previousInitialValue, onValueChange]);\n\n  const _containerStyle: StyleProp<ViewStyle> = [\n    {\n      flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n    },\n  ];\n\n  if (direction !== Direction.Vertical) {\n    _containerStyle.push({\n      alignItems: \"center\",\n    });\n  }\n\n  return (\n    <View style={[{ minHeight: 40 }, style]} {...rest}>\n      <Provider\n        value={{\n          value: internalValue || \"\",\n          onValueChange: setIntervalValue,\n          direction,\n        }}\n      >\n        <View style={_containerStyle}>{children}</View>\n      </Provider>\n    </View>\n  );\n};\n\nexport default RadioButtonGroup;\n\nexport const SEED_DATA = {\n  name: \"Radio Button Group\",\n  tag: \"RadioButtonGroup\",\n  category: COMPONENT_TYPES.input,\n  layout: {},\n  triggers: [Triggers.OnValueChange],\n  props: {\n    direction: createDirectionProp(),\n    fieldName: createFieldNameProp({\n      handlerPropName: \"onValueChange\",\n      valuePropName: \"value\",\n      defaultValue: \"radioButtonGroupValue\",\n    }),\n  },\n};\n"]}

package/lib/module/components/Slider.js

@@ -39,6 +39,7 @@ function Slider({
   rightIconColor,
   value,
   initialValue,
+  defaultValue,
   minimumTrackTintColor,
   maximumTrackTintColor,
   thumbTintColor,
@@ -57,12 +58,22 @@ function Slider({
       onValueChange(initialValue);
     }
   }, [initialValue, previousInitialValue, onValueChange]);
+  const [internalValue, setIntervalValue] = React.useState(value || defaultValue);
+  React.useEffect(() => {
+    setIntervalValue(value);
+  }, [value]);
   const minTrackColor = minimumTrackTintColor || theme.colors.primary;
   const maxTrackColor = maximumTrackTintColor || theme.colors.light;
   const thumbColor = thumbTintColor || theme.colors.primary;
   const leftIconThemeColor = leftIconColor || theme.colors.light;
   const rightIconThemeColor = rightIconColor || theme.colors.light;
-  const parsedValue = maybeParseValue(value);
+  const parsedValue = maybeParseValue(internalValue);
+
+  const handleSlidingComplete = newValue => {
+    setIntervalValue(newValue);
+    onValueChange(newValue);
+  };
+
   return /*#__PURE__*/React.createElement(View, _extends({
     style: [styles.container, style]
   }, rest), leftIcon ? /*#__PURE__*/React.createElement(Icon, {
@@ -78,7 +89,7 @@ function Slider({
     minimumTrackTintColor: minTrackColor,
     maximumTrackTintColor: maxTrackColor,
     thumbTintColor: thumbColor,
-    onSlidingComplete: onValueChange,
+    onSlidingComplete: handleSlidingComplete,
     style: styles.slider
   }), rightIcon ? /*#__PURE__*/React.createElement(Icon, {
     color: rightIconThemeColor,

package/lib/module/components/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Slider.tsx"],"names":["React","View","StyleSheet","NativeSlider","isNumber","toNumber","COMPONENT_TYPES","GROUPS","createNumberProp","createColorProp","createFieldNameProp","createIconProp","Triggers","withTheme","usePrevious","maybeParseValue","value","undefined","maybe","Slider","Icon","leftIcon","rightIcon","leftIconColor","rightIconColor","initialValue","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","minimumValue","maximumValue","tapToSeek","step","onValueChange","style","theme","rest","previousInitialValue","useEffect","minTrackColor","colors","primary","maxTrackColor","light","thumbColor","leftIconThemeColor","rightIconThemeColor","parsedValue","styles","container","slider","create","height","flexDirection","alignItems","flex","marginHorizontal","SEED_DATA","name","tag","description","category","input","layout","marginLeft","marginRight","triggers","OnValueChange","props","fieldName","defaultValue","handlerPropName","valuePropName","group","basic","label","min","max","precision"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,QAAuD,cAAvD;AACA,OAAOC,YAAP,MAAyB,gCAAzB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAEA,SACEC,eADF,EAEEC,MAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,mBALF,EAMEC,cANF,EAOEC,QAPF,QAQO,iBARP;AASA,SAASC,SAAT,QAA0B,YAA1B;AAGA,SAASC,WAAT,QAA4B,UAA5B;;AAqBA,SAASC,eAAT,CAAyBC,KAAzB,EAAqC;AACnC,MAAIA,KAAK,KAAKC,SAAd,EAAyB;AACvB,WAAOA,SAAP;AACD;;AAED,MAAIb,QAAQ,CAACY,KAAD,CAAZ,EAAqB;AACnB,WAAOA,KAAP;AACD;;AAED,MAAI;AACF,UAAME,KAAK,GAAGb,QAAQ,CAACW,KAAD,CAAtB;;AACA,QAAIZ,QAAQ,CAACc,KAAD,CAAZ,EAAqB;AACnB,aAAOA,KAAP;AACD;AACF,GALD,CAKE,MAAM;AACN,WAAOD,SAAP;AACD;;AAED,SAAOA,SAAP;AACD;;AAED,SAASE,MAAT,CAAgB;AACdC,EAAAA,IADc;AAEdC,EAAAA,QAFc;AAGdC,EAAAA,SAHc;AAIdC,EAAAA,aAJc;AAKdC,EAAAA,cALc;AAMdR,EAAAA,KANc;AAOdS,EAAAA,YAPc;AAQdC,EAAAA,qBARc;AASdC,EAAAA,qBATc;AAUdC,EAAAA,cAVc;AAWdC,EAAAA,YAAY,GAAG,CAXD;AAYdC,EAAAA,YAAY,GAAG,GAZD;AAadC,EAAAA,SAbc;AAcdC,EAAAA,IAAI,GAAG,CAdO;AAedC,EAAAA,aAAa,GAAG,MAAM,CAAE,CAfV;AAgBdC,EAAAA,KAhBc;AAiBdC,EAAAA,KAjBc;AAkBd,KAAGC;AAlBW,CAAhB,EAmBU;AACR,QAAMC,oBAAoB,GAAGvB,WAAW,CAACW,YAAD,CAAxC;AACAzB,EAAAA,KAAK,CAACsC,SAAN,CAAgB,MAAM;AACpB,QAAIb,YAAY,KAAKY,oBAArB,EAA2C;AACzCJ,MAAAA,aAAa,CAACR,YAAD,CAAb;AACD;AACF,GAJD,EAIG,CAACA,YAAD,EAAeY,oBAAf,EAAqCJ,aAArC,CAJH;AAMA,QAAMM,aAAa,GAAGb,qBAAqB,IAAIS,KAAK,CAACK,MAAN,CAAaC,OAA5D;AACA,QAAMC,aAAa,GAAGf,qBAAqB,IAAIQ,KAAK,CAACK,MAAN,CAAaG,KAA5D;AACA,QAAMC,UAAU,GAAGhB,cAAc,IAAIO,KAAK,CAACK,MAAN,CAAaC,OAAlD;AAEA,QAAMI,kBAAkB,GAAGtB,aAAa,IAAIY,KAAK,CAACK,MAAN,CAAaG,KAAzD;AACA,QAAMG,mBAAmB,GAAGtB,cAAc,IAAIW,KAAK,CAACK,MAAN,CAAaG,KAA3D;AAEA,QAAMI,WAAW,GAAGhC,eAAe,CAACC,KAAD,CAAnC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACgC,MAAM,CAACC,SAAR,EAAmBf,KAAnB;AAAb,KAA4CE,IAA5C,GACGf,QAAQ,gBACP,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEwB,kBAAb;AAAiC,IAAA,IAAI,EAAExB,QAAvC;AAAiD,IAAA,IAAI,EAAE;AAAvD,IADO,GAEL,IAHN,eAIE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAE0B,WADT;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,YAAY,EAAEH,YAHhB;AAIE,IAAA,YAAY,EAAEC,YAJhB;AAKE,IAAA,SAAS,EAAEC,SALb;AAME,IAAA,qBAAqB,EAAEQ,aANzB;AAOE,IAAA,qBAAqB,EAAEG,aAPzB;AAQE,IAAA,cAAc,EAAEE,UARlB;AASE,IAAA,iBAAiB,EAAEX,aATrB;AAUE,IAAA,KAAK,EAAEe,MAAM,CAACE;AAVhB,IAJF,EAgBG5B,SAAS,gBACR,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEwB,mBAAb;AAAkC,IAAA,IAAI,EAAExB,SAAxC;AAAmD,IAAA,IAAI,EAAE;AAAzD,IADQ,GAEN,IAlBN,CADF;AAsBD;;AAED,MAAM0B,MAAM,GAAG9C,UAAU,CAACiD,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,MAAM,EAAE,EADC;AAETC,IAAAA,aAAa,EAAE,KAFN;AAGTC,IAAAA,UAAU,EAAE;AAHH,GADoB;AAM/BJ,EAAAA,MAAM,EAAE;AACNK,IAAAA,IAAI,EAAE,CADA;AAENC,IAAAA,gBAAgB,EAAE;AAFZ;AANuB,CAAlB,CAAf;AAYA,eAAe3C,SAAS,CAACM,MAAD,CAAxB;AAEA,OAAO,MAAMsC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,QADiB;AAEvBC,EAAAA,GAAG,EAAE,QAFkB;AAGvBC,EAAAA,WAAW,EAAE,4CAHU;AAIvBC,EAAAA,QAAQ,EAAEvD,eAAe,CAACwD,KAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,UAAU,EAAE,EADN;AAENC,IAAAA,WAAW,EAAE;AAFP,GALe;AASvBC,EAAAA,QAAQ,EAAE,CAACtD,QAAQ,CAACuD,aAAV,CATa;AAUvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE3D,mBAAmB,CAAC;AAC7B4D,MAAAA,YAAY,EAAE,aADe;AAE7BC,MAAAA,eAAe,EAAE,eAFY;AAG7BC,MAAAA,aAAa,EAAE;AAHc,KAAD,CADzB;AAML3C,IAAAA,YAAY,EAAErB,gBAAgB,CAAC;AAC7BiE,MAAAA,KAAK,EAAElE,MAAM,CAACmE,KADe;AAE7BC,MAAAA,KAAK,EAAE,WAFsB;AAG7BC,MAAAA,GAAG,EAAE,CAHwB;AAI7BC,MAAAA,GAAG,EAAE;AAJwB,KAAD,CANzB;AAYL/C,IAAAA,YAAY,EAAEtB,gBAAgB,CAAC;AAC7BiE,MAAAA,KAAK,EAAElE,MAAM,CAACmE,KADe;AAE7BC,MAAAA,KAAK,EAAE,WAFsB;AAG7BC,MAAAA,GAAG,EAAE,CAHwB;AAI7BC,MAAAA,GAAG,EAAE;AAJwB,KAAD,CAZzB;AAkBL7C,IAAAA,IAAI,EAAExB,gBAAgB,CAAC;AACrBiE,MAAAA,KAAK,EAAElE,MAAM,CAACmE,KADO;AAErBC,MAAAA,KAAK,EAAE,MAFc;AAGrBC,MAAAA,GAAG,EAAE,CAHgB;AAIrBC,MAAAA,GAAG,EAAE,GAJgB;AAKrB7C,MAAAA,IAAI,EAAE,IALe;AAMrB8C,MAAAA,SAAS,EAAE;AANU,KAAD,CAlBjB;AA0BLzD,IAAAA,QAAQ,EAAEV,cAAc,CAAC;AACvBgE,MAAAA,KAAK,EAAE,WADgB;AAEvBL,MAAAA,YAAY,EAAE;AAFS,KAAD,CA1BnB;AA8BLhD,IAAAA,SAAS,EAAEX,cAAc,CAAC;AACxBgE,MAAAA,KAAK,EAAE,YADiB;AAExBL,MAAAA,YAAY,EAAE;AAFU,KAAD,CA9BpB;AAkCL5C,IAAAA,qBAAqB,EAAEjB,eAAe,CAAC;AACrCkE,MAAAA,KAAK,EAAE,iBAD8B;AAErCL,MAAAA,YAAY,EAAE;AAFuB,KAAD,CAlCjC;AAsCL3C,IAAAA,qBAAqB,EAAElB,eAAe,CAAC;AACrCkE,MAAAA,KAAK,EAAE,iBAD8B;AAErCL,MAAAA,YAAY,EAAE;AAFuB,KAAD,CAtCjC;AA0CL1C,IAAAA,cAAc,EAAEnB,eAAe,CAAC;AAC9BkE,MAAAA,KAAK,EAAE,aADuB;AAE9BL,MAAAA,YAAY,EAAE;AAFgB,KAAD;AA1C1B;AAVgB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, StyleProp, ViewStyle } from \"react-native\";\nimport NativeSlider from \"@react-native-community/slider\";\nimport isNumber from \"lodash.isnumber\";\nimport toNumber from \"lodash.tonumber\";\n\nimport {\n  COMPONENT_TYPES,\n  GROUPS,\n  createNumberProp,\n  createColorProp,\n  createFieldNameProp,\n  createIconProp,\n  Triggers,\n} from \"@draftbit/types\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport { usePrevious } from \"../hooks\";\n\nexport type Props = {\n  style?: StyleProp<ViewStyle>;\n  value?: number;\n  initialValue?: number;\n  minimumTrackTintColor: string;\n  maximumTrackTintColor: string;\n  leftIcon?: string;\n  rightIcon?: string;\n  leftIconColor?: string;\n  rightIconColor?: string;\n  thumbTintColor?: string;\n  tapToSeek?: boolean;\n  minimumValue: number;\n  maximumValue: number;\n  step: number;\n  onValueChange?: (value: number) => void;\n  theme: Theme;\n} & IconSlot;\n\nfunction maybeParseValue(value: any) {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (isNumber(value)) {\n    return value;\n  }\n\n  try {\n    const maybe = toNumber(value);\n    if (isNumber(maybe)) {\n      return maybe;\n    }\n  } catch {\n    return undefined;\n  }\n\n  return undefined;\n}\n\nfunction Slider({\n  Icon,\n  leftIcon,\n  rightIcon,\n  leftIconColor,\n  rightIconColor,\n  value,\n  initialValue,\n  minimumTrackTintColor,\n  maximumTrackTintColor,\n  thumbTintColor,\n  minimumValue = 0,\n  maximumValue = 100,\n  tapToSeek,\n  step = 1,\n  onValueChange = () => {},\n  style,\n  theme,\n  ...rest\n}: Props) {\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      onValueChange(initialValue);\n    }\n  }, [initialValue, previousInitialValue, onValueChange]);\n\n  const minTrackColor = minimumTrackTintColor || theme.colors.primary;\n  const maxTrackColor = maximumTrackTintColor || theme.colors.light;\n  const thumbColor = thumbTintColor || theme.colors.primary;\n\n  const leftIconThemeColor = leftIconColor || theme.colors.light;\n  const rightIconThemeColor = rightIconColor || theme.colors.light;\n\n  const parsedValue = maybeParseValue(value);\n\n  return (\n    <View style={[styles.container, style]} {...rest}>\n      {leftIcon ? (\n        <Icon color={leftIconThemeColor} name={leftIcon} size={24} />\n      ) : null}\n      <NativeSlider\n        value={parsedValue}\n        step={step}\n        minimumValue={minimumValue}\n        maximumValue={maximumValue}\n        tapToSeek={tapToSeek}\n        minimumTrackTintColor={minTrackColor}\n        maximumTrackTintColor={maxTrackColor}\n        thumbTintColor={thumbColor}\n        onSlidingComplete={onValueChange}\n        style={styles.slider}\n      />\n      {rightIcon ? (\n        <Icon color={rightIconThemeColor} name={rightIcon} size={24} />\n      ) : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    height: 40,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  slider: {\n    flex: 1,\n    marginHorizontal: 12,\n  },\n});\n\nexport default withTheme(Slider);\n\nexport const SEED_DATA = {\n  name: \"Slider\",\n  tag: \"Slider\",\n  description: \"A component used to set a value in a range\",\n  category: COMPONENT_TYPES.input,\n  layout: {\n    marginLeft: 12,\n    marginRight: 12,\n  },\n  triggers: [Triggers.OnValueChange],\n  props: {\n    fieldName: createFieldNameProp({\n      defaultValue: \"sliderValue\",\n      handlerPropName: \"onValueChange\",\n      valuePropName: \"value\",\n    }),\n    minimumValue: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Min Value\",\n      min: 0,\n      max: 1000,\n    }),\n    maximumValue: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Max Value\",\n      min: 1,\n      max: 10000,\n    }),\n    step: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Step\",\n      min: 0,\n      max: 100,\n      step: 0.01,\n      precision: 2,\n    }),\n    leftIcon: createIconProp({\n      label: \"Left Icon\",\n      defaultValue: null,\n    }),\n    rightIcon: createIconProp({\n      label: \"Right Icon\",\n      defaultValue: null,\n    }),\n    minimumTrackTintColor: createColorProp({\n      label: \"Min Track Color\",\n      defaultValue: null,\n    }),\n    maximumTrackTintColor: createColorProp({\n      label: \"Max Track Color\",\n      defaultValue: null,\n    }),\n    thumbTintColor: createColorProp({\n      label: \"Thumb Color\",\n      defaultValue: null,\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["Slider.tsx"],"names":["React","View","StyleSheet","NativeSlider","isNumber","toNumber","COMPONENT_TYPES","GROUPS","createNumberProp","createColorProp","createFieldNameProp","createIconProp","Triggers","withTheme","usePrevious","maybeParseValue","value","undefined","maybe","Slider","Icon","leftIcon","rightIcon","leftIconColor","rightIconColor","initialValue","defaultValue","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","minimumValue","maximumValue","tapToSeek","step","onValueChange","style","theme","rest","previousInitialValue","useEffect","internalValue","setIntervalValue","useState","minTrackColor","colors","primary","maxTrackColor","light","thumbColor","leftIconThemeColor","rightIconThemeColor","parsedValue","handleSlidingComplete","newValue","styles","container","slider","create","height","flexDirection","alignItems","flex","marginHorizontal","SEED_DATA","name","tag","description","category","input","layout","marginLeft","marginRight","triggers","OnValueChange","props","fieldName","handlerPropName","valuePropName","group","basic","label","min","max","precision"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, StyleProp, ViewStyle } from \"react-native\";\nimport NativeSlider from \"@react-native-community/slider\";\nimport isNumber from \"lodash.isnumber\";\nimport toNumber from \"lodash.tonumber\";\n\nimport {\n  COMPONENT_TYPES,\n  GROUPS,\n  createNumberProp,\n  createColorProp,\n  createFieldNameProp,\n  createIconProp,\n  Triggers,\n} from \"@draftbit/types\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport { usePrevious } from \"../hooks\";\n\nexport type Props = {\n  style?: StyleProp<ViewStyle>;\n  value?: number;\n  initialValue?: number; // deprecated\n  defaultValue?: number;\n  minimumTrackTintColor: string;\n  maximumTrackTintColor: string;\n  leftIcon?: string;\n  rightIcon?: string;\n  leftIconColor?: string;\n  rightIconColor?: string;\n  thumbTintColor?: string;\n  tapToSeek?: boolean;\n  minimumValue: number;\n  maximumValue: number;\n  step: number;\n  onValueChange?: (value: number) => void;\n  theme: Theme;\n} & IconSlot;\n\nfunction maybeParseValue(value: any) {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (isNumber(value)) {\n    return value;\n  }\n\n  try {\n    const maybe = toNumber(value);\n    if (isNumber(maybe)) {\n      return maybe;\n    }\n  } catch {\n    return undefined;\n  }\n\n  return undefined;\n}\n\nfunction Slider({\n  Icon,\n  leftIcon,\n  rightIcon,\n  leftIconColor,\n  rightIconColor,\n  value,\n  initialValue,\n  defaultValue,\n  minimumTrackTintColor,\n  maximumTrackTintColor,\n  thumbTintColor,\n  minimumValue = 0,\n  maximumValue = 100,\n  tapToSeek,\n  step = 1,\n  onValueChange = () => {},\n  style,\n  theme,\n  ...rest\n}: Props) {\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      onValueChange(initialValue);\n    }\n  }, [initialValue, previousInitialValue, onValueChange]);\n\n  const [internalValue, setIntervalValue] = React.useState<number | undefined>(\n    value || defaultValue\n  );\n\n  React.useEffect(() => {\n    setIntervalValue(value);\n  }, [value]);\n\n  const minTrackColor = minimumTrackTintColor || theme.colors.primary;\n  const maxTrackColor = maximumTrackTintColor || theme.colors.light;\n  const thumbColor = thumbTintColor || theme.colors.primary;\n\n  const leftIconThemeColor = leftIconColor || theme.colors.light;\n  const rightIconThemeColor = rightIconColor || theme.colors.light;\n\n  const parsedValue = maybeParseValue(internalValue);\n\n  const handleSlidingComplete = (newValue: number) => {\n    setIntervalValue(newValue);\n    onValueChange(newValue);\n  };\n\n  return (\n    <View style={[styles.container, style]} {...rest}>\n      {leftIcon ? (\n        <Icon color={leftIconThemeColor} name={leftIcon} size={24} />\n      ) : null}\n      <NativeSlider\n        value={parsedValue}\n        step={step}\n        minimumValue={minimumValue}\n        maximumValue={maximumValue}\n        tapToSeek={tapToSeek}\n        minimumTrackTintColor={minTrackColor}\n        maximumTrackTintColor={maxTrackColor}\n        thumbTintColor={thumbColor}\n        onSlidingComplete={handleSlidingComplete}\n        style={styles.slider}\n      />\n      {rightIcon ? (\n        <Icon color={rightIconThemeColor} name={rightIcon} size={24} />\n      ) : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    height: 40,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  slider: {\n    flex: 1,\n    marginHorizontal: 12,\n  },\n});\n\nexport default withTheme(Slider);\n\nexport const SEED_DATA = {\n  name: \"Slider\",\n  tag: \"Slider\",\n  description: \"A component used to set a value in a range\",\n  category: COMPONENT_TYPES.input,\n  layout: {\n    marginLeft: 12,\n    marginRight: 12,\n  },\n  triggers: [Triggers.OnValueChange],\n  props: {\n    fieldName: createFieldNameProp({\n      defaultValue: \"sliderValue\",\n      handlerPropName: \"onValueChange\",\n      valuePropName: \"value\",\n    }),\n    minimumValue: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Min Value\",\n      min: 0,\n      max: 1000,\n    }),\n    maximumValue: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Max Value\",\n      min: 1,\n      max: 10000,\n    }),\n    step: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Step\",\n      min: 0,\n      max: 100,\n      step: 0.01,\n      precision: 2,\n    }),\n    leftIcon: createIconProp({\n      label: \"Left Icon\",\n      defaultValue: null,\n    }),\n    rightIcon: createIconProp({\n      label: \"Right Icon\",\n      defaultValue: null,\n    }),\n    minimumTrackTintColor: createColorProp({\n      label: \"Min Track Color\",\n      defaultValue: null,\n    }),\n    maximumTrackTintColor: createColorProp({\n      label: \"Max Track Color\",\n      defaultValue: null,\n    }),\n    thumbTintColor: createColorProp({\n      label: \"Thumb Color\",\n      defaultValue: null,\n    }),\n  },\n};\n"]}

package/lib/module/components/StarRating.js

@@ -10,6 +10,7 @@ const StarRating = ({
   starSize = 16,
   maxStars = 5,
   rating = 0,
+  defaultValue,
   isEditable = false,
   activeColor,
   inactiveColor,
@@ -17,7 +18,7 @@ const StarRating = ({
   onPress,
   ...rest
 }) => {
-  const [localRating, setLocalRating] = React.useState(rating);
+  const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
   React.useEffect(() => {
     setLocalRating(rating);
   }, [rating]);

package/lib/module/components/StarRating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["StarRating.tsx"],"names":["React","View","StyleSheet","Pressable","withTheme","COMPONENT_TYPES","createStaticNumberProp","createFieldNameProp","createStaticBoolProp","Triggers","createColorProp","GROUPS","StarRating","Icon","starSize","maxStars","rating","isEditable","activeColor","inactiveColor","style","onPress","rest","localRating","setLocalRating","useState","useEffect","ratingHandler","useCallback","r","ratingRounded","Math","round","styles","container","Array","map","_","i","display","touchContainer","pressable","create","flexDirection","alignItems","position","top","right","left","bottom","zIndex","flex","height","width","SEED_DATA","name","tag","description","category","button","triggers","OnPress","props","label","defaultValue","min","max","step","fieldName","handlerPropName","valuePropName","group","data"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  View,\n  StyleSheet,\n  StyleProp,\n  ViewStyle,\n  Pressable,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport {\n  COMPONENT_TYPES,\n  createStaticNumberProp,\n  createFieldNameProp,\n  createStaticBoolProp,\n  Triggers,\n  createColorProp,\n  GROUPS,\n} from \"@draftbit/types\";\n\ntype Props = {\n  starSize?: number;\n  maxStars?: number;\n  rating?: number;\n  isEditable?: boolean;\n  activeColor?: string;\n  inactiveColor?: string;\n  theme: Theme;\n  style?: StyleProp<ViewStyle>;\n  onPress?: (newValue: number) => void;\n} & IconSlot;\n\nconst StarRating: React.FC<Props> = ({\n  Icon,\n  starSize = 16,\n  maxStars = 5,\n  rating = 0,\n  isEditable = false,\n  activeColor,\n  inactiveColor,\n  style,\n  onPress,\n  ...rest\n}) => {\n  const [localRating, setLocalRating] = React.useState(rating);\n\n  React.useEffect(() => {\n    setLocalRating(rating);\n  }, [rating]);\n\n  const ratingHandler = React.useCallback(\n    (r) => {\n      setLocalRating(r);\n      !!onPress && onPress(r);\n    },\n    [onPress]\n  );\n\n  const ratingRounded = Math.round(localRating * 2) / 2;\n\n  return (\n    <View style={[styles.container, style]} {...rest}>\n      {[...Array(maxStars)].map((_, i) => (\n        <View key={i} style={{ display: \"flex\" }}>\n          <Icon\n            name={\n              ratingRounded - i === 0.5\n                ? \"MaterialIcons/star-half\"\n                : \"MaterialIcons/star\"\n            }\n            size={starSize}\n            color={ratingRounded > i ? activeColor : inactiveColor}\n          />\n          {isEditable && (\n            <View style={styles.touchContainer}>\n              <Pressable\n                style={styles.pressable}\n                onPress={() => ratingHandler(i + 0.5)}\n              />\n              <Pressable\n                style={styles.pressable}\n                onPress={() => ratingHandler(i + 1)}\n              />\n            </View>\n          )}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  touchContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    left: 0,\n    bottom: 0,\n    zIndex: 1,\n  },\n  pressable: {\n    flex: 1,\n    height: \"100%\",\n    width: \"50%\",\n  },\n});\n\nexport default withTheme(StarRating);\n\nexport const SEED_DATA = {\n  name: \"Star Rating\",\n  tag: \"StarRating\",\n  description: \"A star rating component\",\n  category: COMPONENT_TYPES.button,\n  triggers: [Triggers.OnPress],\n  props: {\n    starSize: createStaticNumberProp({\n      label: \"Star size\",\n      description: \"Size of each individual star\",\n      defaultValue: 16,\n      min: 8,\n      max: 36,\n      step: 1,\n    }),\n    fieldName: createFieldNameProp({\n      defaultValue: \"ratingValue\", // this is the name of the variable declared on the screen in Draftbit\n      handlerPropName: \"onPress\", // the change handler prop in this component\n      valuePropName: \"rating\", // the value prop in this component\n    }),\n    maxStars: createStaticNumberProp({\n      label: \"Max stars\",\n      description: \"The max number of stars\",\n      defaultValue: 5,\n      min: 0,\n      max: 10,\n      step: 1,\n    }),\n    rating: createStaticNumberProp({\n      group: GROUPS.data,\n      label: \"Rating\",\n    }),\n    isEditable: createStaticBoolProp({\n      label: \"Editable\",\n    }),\n    activeColor: createColorProp({\n      label: \"Active Color\",\n      defaultValue: \"primary\",\n    }),\n    inactiveColor: createColorProp({\n      label: \"Inactive Color\",\n      defaultValue: \"divider\",\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["StarRating.tsx"],"names":["React","View","StyleSheet","Pressable","withTheme","COMPONENT_TYPES","createStaticNumberProp","createFieldNameProp","createStaticBoolProp","Triggers","createColorProp","GROUPS","StarRating","Icon","starSize","maxStars","rating","defaultValue","isEditable","activeColor","inactiveColor","style","onPress","rest","localRating","setLocalRating","useState","useEffect","ratingHandler","useCallback","r","ratingRounded","Math","round","styles","container","Array","map","_","i","display","touchContainer","pressable","create","flexDirection","alignItems","position","top","right","left","bottom","zIndex","flex","height","width","SEED_DATA","name","tag","description","category","button","triggers","OnPress","props","label","min","max","step","fieldName","handlerPropName","valuePropName","group","data"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,IADF,EAEEC,UAFF,EAKEC,SALF,QAMO,cANP;AAOA,SAASC,SAAT,QAA0B,YAA1B;AAIA,SACEC,eADF,EAEEC,sBAFF,EAGEC,mBAHF,EAIEC,oBAJF,EAKEC,QALF,EAMEC,eANF,EAOEC,MAPF,QAQO,iBARP;;AAuBA,MAAMC,UAA2B,GAAG,CAAC;AACnCC,EAAAA,IADmC;AAEnCC,EAAAA,QAAQ,GAAG,EAFwB;AAGnCC,EAAAA,QAAQ,GAAG,CAHwB;AAInCC,EAAAA,MAAM,GAAG,CAJ0B;AAKnCC,EAAAA,YALmC;AAMnCC,EAAAA,UAAU,GAAG,KANsB;AAOnCC,EAAAA,WAPmC;AAQnCC,EAAAA,aARmC;AASnCC,EAAAA,KATmC;AAUnCC,EAAAA,OAVmC;AAWnC,KAAGC;AAXgC,CAAD,KAY9B;AACJ,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCzB,KAAK,CAAC0B,QAAN,CACpCV,MAAM,IAAIC,YAAV,IAA0B,CADU,CAAtC;AAIAjB,EAAAA,KAAK,CAAC2B,SAAN,CAAgB,MAAM;AACpBF,IAAAA,cAAc,CAACT,MAAD,CAAd;AACD,GAFD,EAEG,CAACA,MAAD,CAFH;AAIA,QAAMY,aAAa,GAAG5B,KAAK,CAAC6B,WAAN,CACnBC,CAAD,IAAO;AACLL,IAAAA,cAAc,CAACK,CAAD,CAAd;AACA,KAAC,CAACR,OAAF,IAAaA,OAAO,CAACQ,CAAD,CAApB;AACD,GAJmB,EAKpB,CAACR,OAAD,CALoB,CAAtB;AAQA,QAAMS,aAAa,GAAGC,IAAI,CAACC,KAAL,CAAWT,WAAW,GAAG,CAAzB,IAA8B,CAApD;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,SAAR,EAAmBd,KAAnB;AAAb,KAA4CE,IAA5C,GACG,CAAC,GAAGa,KAAK,CAACrB,QAAD,CAAT,EAAqBsB,GAArB,CAAyB,CAACC,CAAD,EAAIC,CAAJ,kBACxB,oBAAC,IAAD;AAAM,IAAA,GAAG,EAAEA,CAAX;AAAc,IAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAArB,kBACE,oBAAC,IAAD;AACE,IAAA,IAAI,EACFT,aAAa,GAAGQ,CAAhB,KAAsB,GAAtB,GACI,yBADJ,GAEI,oBAJR;AAME,IAAA,IAAI,EAAEzB,QANR;AAOE,IAAA,KAAK,EAAEiB,aAAa,GAAGQ,CAAhB,GAAoBpB,WAApB,GAAkCC;AAP3C,IADF,EAUGF,UAAU,iBACT,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEgB,MAAM,CAACO;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAEP,MAAM,CAACQ,SADhB;AAEE,IAAA,OAAO,EAAE,MAAMd,aAAa,CAACW,CAAC,GAAG,GAAL;AAF9B,IADF,eAKE,oBAAC,SAAD;AACE,IAAA,KAAK,EAAEL,MAAM,CAACQ,SADhB;AAEE,IAAA,OAAO,EAAE,MAAMd,aAAa,CAACW,CAAC,GAAG,CAAL;AAF9B,IALF,CAXJ,CADD,CADH,CADF;AA6BD,CA5DD;;AA8DA,MAAML,MAAM,GAAGhC,UAAU,CAACyC,MAAX,CAAkB;AAC/BR,EAAAA,SAAS,EAAE;AACTS,IAAAA,aAAa,EAAE,KADN;AAETC,IAAAA,UAAU,EAAE;AAFH,GADoB;AAK/BJ,EAAAA,cAAc,EAAE;AACdD,IAAAA,OAAO,EAAE,MADK;AAEdI,IAAAA,aAAa,EAAE,KAFD;AAGdE,IAAAA,QAAQ,EAAE,UAHI;AAIdC,IAAAA,GAAG,EAAE,CAJS;AAKdC,IAAAA,KAAK,EAAE,CALO;AAMdC,IAAAA,IAAI,EAAE,CANQ;AAOdC,IAAAA,MAAM,EAAE,CAPM;AAQdC,IAAAA,MAAM,EAAE;AARM,GALe;AAe/BT,EAAAA,SAAS,EAAE;AACTU,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,MAAM,EAAE,MAFC;AAGTC,IAAAA,KAAK,EAAE;AAHE;AAfoB,CAAlB,CAAf;AAsBA,eAAelD,SAAS,CAACQ,UAAD,CAAxB;AAEA,OAAO,MAAM2C,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,aADiB;AAEvBC,EAAAA,GAAG,EAAE,YAFkB;AAGvBC,EAAAA,WAAW,EAAE,yBAHU;AAIvBC,EAAAA,QAAQ,EAAEtD,eAAe,CAACuD,MAJH;AAKvBC,EAAAA,QAAQ,EAAE,CAACpD,QAAQ,CAACqD,OAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLjD,IAAAA,QAAQ,EAAER,sBAAsB,CAAC;AAC/B0D,MAAAA,KAAK,EAAE,WADwB;AAE/BN,MAAAA,WAAW,EAAE,8BAFkB;AAG/BzC,MAAAA,YAAY,EAAE,EAHiB;AAI/BgD,MAAAA,GAAG,EAAE,CAJ0B;AAK/BC,MAAAA,GAAG,EAAE,EAL0B;AAM/BC,MAAAA,IAAI,EAAE;AANyB,KAAD,CAD3B;AASLC,IAAAA,SAAS,EAAE7D,mBAAmB,CAAC;AAC7BU,MAAAA,YAAY,EAAE,aADe;AACA;AAC7BoD,MAAAA,eAAe,EAAE,SAFY;AAED;AAC5BC,MAAAA,aAAa,EAAE,QAHc,CAGJ;;AAHI,KAAD,CATzB;AAcLvD,IAAAA,QAAQ,EAAET,sBAAsB,CAAC;AAC/B0D,MAAAA,KAAK,EAAE,WADwB;AAE/BN,MAAAA,WAAW,EAAE,yBAFkB;AAG/BzC,MAAAA,YAAY,EAAE,CAHiB;AAI/BgD,MAAAA,GAAG,EAAE,CAJ0B;AAK/BC,MAAAA,GAAG,EAAE,EAL0B;AAM/BC,MAAAA,IAAI,EAAE;AANyB,KAAD,CAd3B;AAsBLnD,IAAAA,MAAM,EAAEV,sBAAsB,CAAC;AAC7BiE,MAAAA,KAAK,EAAE5D,MAAM,CAAC6D,IADe;AAE7BR,MAAAA,KAAK,EAAE;AAFsB,KAAD,CAtBzB;AA0BL9C,IAAAA,UAAU,EAAEV,oBAAoB,CAAC;AAC/BwD,MAAAA,KAAK,EAAE;AADwB,KAAD,CA1B3B;AA6BL7C,IAAAA,WAAW,EAAET,eAAe,CAAC;AAC3BsD,MAAAA,KAAK,EAAE,cADoB;AAE3B/C,MAAAA,YAAY,EAAE;AAFa,KAAD,CA7BvB;AAiCLG,IAAAA,aAAa,EAAEV,eAAe,CAAC;AAC7BsD,MAAAA,KAAK,EAAE,gBADsB;AAE7B/C,MAAAA,YAAY,EAAE;AAFe,KAAD;AAjCzB;AANgB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport {\n  View,\n  StyleSheet,\n  StyleProp,\n  ViewStyle,\n  Pressable,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport {\n  COMPONENT_TYPES,\n  createStaticNumberProp,\n  createFieldNameProp,\n  createStaticBoolProp,\n  Triggers,\n  createColorProp,\n  GROUPS,\n} from \"@draftbit/types\";\n\ntype Props = {\n  starSize?: number;\n  maxStars?: number;\n  rating?: number;\n  defaultValue?: number;\n  isEditable?: boolean;\n  activeColor?: string;\n  inactiveColor?: string;\n  theme: Theme;\n  style?: StyleProp<ViewStyle>;\n  onPress?: (newValue: number) => void;\n} & IconSlot;\n\nconst StarRating: React.FC<Props> = ({\n  Icon,\n  starSize = 16,\n  maxStars = 5,\n  rating = 0,\n  defaultValue,\n  isEditable = false,\n  activeColor,\n  inactiveColor,\n  style,\n  onPress,\n  ...rest\n}) => {\n  const [localRating, setLocalRating] = React.useState<number>(\n    rating || defaultValue || 0\n  );\n\n  React.useEffect(() => {\n    setLocalRating(rating);\n  }, [rating]);\n\n  const ratingHandler = React.useCallback(\n    (r) => {\n      setLocalRating(r);\n      !!onPress && onPress(r);\n    },\n    [onPress]\n  );\n\n  const ratingRounded = Math.round(localRating * 2) / 2;\n\n  return (\n    <View style={[styles.container, style]} {...rest}>\n      {[...Array(maxStars)].map((_, i) => (\n        <View key={i} style={{ display: \"flex\" }}>\n          <Icon\n            name={\n              ratingRounded - i === 0.5\n                ? \"MaterialIcons/star-half\"\n                : \"MaterialIcons/star\"\n            }\n            size={starSize}\n            color={ratingRounded > i ? activeColor : inactiveColor}\n          />\n          {isEditable && (\n            <View style={styles.touchContainer}>\n              <Pressable\n                style={styles.pressable}\n                onPress={() => ratingHandler(i + 0.5)}\n              />\n              <Pressable\n                style={styles.pressable}\n                onPress={() => ratingHandler(i + 1)}\n              />\n            </View>\n          )}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  touchContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    left: 0,\n    bottom: 0,\n    zIndex: 1,\n  },\n  pressable: {\n    flex: 1,\n    height: \"100%\",\n    width: \"50%\",\n  },\n});\n\nexport default withTheme(StarRating);\n\nexport const SEED_DATA = {\n  name: \"Star Rating\",\n  tag: \"StarRating\",\n  description: \"A star rating component\",\n  category: COMPONENT_TYPES.button,\n  triggers: [Triggers.OnPress],\n  props: {\n    starSize: createStaticNumberProp({\n      label: \"Star size\",\n      description: \"Size of each individual star\",\n      defaultValue: 16,\n      min: 8,\n      max: 36,\n      step: 1,\n    }),\n    fieldName: createFieldNameProp({\n      defaultValue: \"ratingValue\", // this is the name of the variable declared on the screen in Draftbit\n      handlerPropName: \"onPress\", // the change handler prop in this component\n      valuePropName: \"rating\", // the value prop in this component\n    }),\n    maxStars: createStaticNumberProp({\n      label: \"Max stars\",\n      description: \"The max number of stars\",\n      defaultValue: 5,\n      min: 0,\n      max: 10,\n      step: 1,\n    }),\n    rating: createStaticNumberProp({\n      group: GROUPS.data,\n      label: \"Rating\",\n    }),\n    isEditable: createStaticBoolProp({\n      label: \"Editable\",\n    }),\n    activeColor: createColorProp({\n      label: \"Active Color\",\n      defaultValue: \"primary\",\n    }),\n    inactiveColor: createColorProp({\n      label: \"Inactive Color\",\n      defaultValue: \"divider\",\n    }),\n  },\n};\n"]}

package/lib/module/components/Stepper.js

@@ -11,6 +11,7 @@ const Stepper = ({
   style,
   onChange,
   initialValue,
+  defaultValue,
   theme: {
     colors,
     typography,
@@ -21,7 +22,10 @@ const Stepper = ({
   borderRadius = roundness,
   typeStyle
 }) => {
-  const [stateValue, setStateValue] = React.useState(value);
+  const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
+  React.useEffect(() => {
+    setStateValue(value);
+  }, [value]);
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
     if (initialValue !== previousInitialValue) {

package/lib/module/components/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Stepper.tsx"],"names":["React","View","Text","withTheme","COMPONENT_TYPES","createIconSizeProp","createColorProp","createFieldNameProp","Triggers","IconButton","usePrevious","Stepper","Icon","value","style","onChange","initialValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","useState","previousInitialValue","useEffect","handleMinus","handlePlus","flexDirection","body1","textAlign","alignSelf","color","medium","marginHorizontal","SEED_DATA","name","tag","description","category","input","layout","triggers","OnChange","props","fieldName","defaultValue","handlerPropName","valuePropName"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA4D,cAA5D;AACA,SAASC,SAAT,QAA0B,YAA1B;AACA,SACEC,eADF,EAEEC,kBAFF,EAGEC,eAHF,EAIEC,mBAJF,EAKEC,QALF,QAMO,iBANP;AAUA,OAAOC,UAAP,MAAuB,cAAvB;AACA,SAASC,WAAT,QAA4B,UAA5B;;AAcA,MAAMC,OAAwB,GAAG,CAAC;AAChCC,EAAAA,IADgC;AAEhCC,EAAAA,KAAK,GAAG,CAFwB;AAGhCC,EAAAA,KAHgC;AAIhCC,EAAAA,QAJgC;AAKhCC,EAAAA,YALgC;AAMhCC,EAAAA,KAAK,EAAE;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,UAAV;AAAsBC,IAAAA;AAAtB,GANyB;AAOhCC,EAAAA,QAAQ,GAAG,EAPqB;AAQhCC,EAAAA,SAAS,GAAGJ,MAAM,CAACK,MARa;AAShCC,EAAAA,YAAY,GAAGJ,SATiB;AAUhCK,EAAAA;AAVgC,CAAD,KAW3B;AACJ,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B3B,KAAK,CAAC4B,QAAN,CAAef,KAAf,CAApC;AAEA,QAAMgB,oBAAoB,GAAGnB,WAAW,CAACM,YAAD,CAAxC;AACAhB,EAAAA,KAAK,CAAC8B,SAAN,CAAgB,MAAM;AACpB,QAAId,YAAY,KAAKa,oBAArB,EAA2C;AACzCF,MAAAA,aAAa,CAACX,YAAD,CAAb;AACAD,MAAAA,QAAQ,IAAIA,QAAQ,CAACC,YAAD,CAApB;AACD;AACF,GALD,EAKG,CAACA,YAAD,EAAea,oBAAf,EAAqCd,QAArC,EAA+CY,aAA/C,CALH;;AAOA,QAAMI,WAAW,GAAG,MAAM;AACxB,QAAIlB,KAAK,IAAIA,KAAK,KAAK,CAAvB,EAA0B;AACxBE,MAAAA,QAAQ,IAAIA,QAAQ,CAACF,KAAK,GAAG,CAAT,CAApB;AACD,KAFD,MAEO;AACLc,MAAAA,aAAa,CAACD,UAAU,GAAG,CAAd,CAAb;AACD;AACF,GAND;;AAQA,QAAMM,UAAU,GAAG,MAAM;AACvB,QAAInB,KAAK,IAAIA,KAAK,KAAK,CAAvB,EAA0B;AACxBE,MAAAA,QAAQ,IAAIA,QAAQ,CAACF,KAAK,GAAG,CAAT,CAApB;AACD,KAFD,MAEO;AACLc,MAAAA,aAAa,CAACD,UAAU,GAAG,CAAd,CAAb;AACD;AACF,GAND;;AAQA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AAAEO,MAAAA,aAAa,EAAE;AAAjB,KADK,EAELnB,KAFK,EAGLU,YAAY,GAAG;AAAEA,MAAAA;AAAF,KAAH,GAAsB,EAH7B;AADT,kBAOE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEZ,IADR;AAEE,IAAA,IAAI,EAAC,sBAFP;AAGE,IAAA,OAAO,EAAEmB,WAHX;AAIE,IAAA,IAAI,EAAEV,QAJR;AAKE,IAAA,KAAK,EAAEC,SALT;AAME,IAAA,QAAQ,EAAET,KAAK,GAAGA,KAAK,KAAK,CAAb,GAAiBa,UAAU,KAAK;AANjD,IAPF,eAeE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLP,UAAU,CAACe,KADN,EAEL;AACEC,MAAAA,SAAS,EAAE,QADb;AAEEC,MAAAA,SAAS,EAAE,QAFb;AAGEC,MAAAA,KAAK,EAAEnB,MAAM,CAACoB,MAHhB;AAIEC,MAAAA,gBAAgB,EAAE;AAJpB,KAFK,EAQLd,SARK;AADT,KAYGZ,KAAK,IAAIa,UAZZ,CAfF,eA6BE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEd,IADR;AAEE,IAAA,IAAI,EAAC,mBAFP;AAGE,IAAA,OAAO,EAAEoB,UAHX;AAIE,IAAA,IAAI,EAAEX,QAJR;AAKE,IAAA,KAAK,EAAEC;AALT,IA7BF,CADF;AAuCD,CA7ED;;AA+EA,eAAenB,SAAS,CAACQ,OAAD,CAAxB;AAEA,OAAO,MAAM6B,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,WAAW,EAAE,uDAHf;AAIEC,EAAAA,QAAQ,EAAExC,eAAe,CAACyC,KAJ5B;AAKEC,EAAAA,MAAM,EAAE,EALV;AAMEC,EAAAA,QAAQ,EAAE,CAACvC,QAAQ,CAACwC,QAAV,CANZ;AAOEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE3C,mBAAmB,CAAC;AAC7B4C,MAAAA,YAAY,EAAE,cADe;AAE7BC,MAAAA,eAAe,EAAE,UAFY;AAG7BC,MAAAA,aAAa,EAAE;AAHc,KAAD,CADzB;AAMLhC,IAAAA,QAAQ,EAAEhB,kBAAkB,CAAC;AAAE8C,MAAAA,YAAY,EAAE;AAAhB,KAAD,CANvB;AAOL7B,IAAAA,SAAS,EAAEhB,eAAe,CAAC;AAAE6C,MAAAA,YAAY,EAAE;AAAhB,KAAD;AAPrB;AAPT,CADuB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport {\n  COMPONENT_TYPES,\n  createIconSizeProp,\n  createColorProp,\n  createFieldNameProp,\n  Triggers,\n} from \"@draftbit/types\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport IconButton from \"./IconButton\";\nimport { usePrevious } from \"../hooks\";\n\ntype Props = {\n  value?: number;\n  theme: Theme;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (value: number) => void;\n  initialValue?: number;\n  iconSize?: number;\n  iconColor?: string;\n  borderRadius?: number;\n  typeStyle?: StyleProp<TextStyle>;\n} & IconSlot;\n\nconst Stepper: React.FC<Props> = ({\n  Icon,\n  value = 0,\n  style,\n  onChange,\n  initialValue,\n  theme: { colors, typography, roundness },\n  iconSize = 24,\n  iconColor = colors.strong,\n  borderRadius = roundness,\n  typeStyle,\n}) => {\n  const [stateValue, setStateValue] = React.useState(value);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      setStateValue(initialValue);\n      onChange && onChange(initialValue);\n    }\n  }, [initialValue, previousInitialValue, onChange, setStateValue]);\n\n  const handleMinus = () => {\n    if (value || value === 0) {\n      onChange && onChange(value - 1);\n    } else {\n      setStateValue(stateValue - 1);\n    }\n  };\n\n  const handlePlus = () => {\n    if (value || value === 0) {\n      onChange && onChange(value + 1);\n    } else {\n      setStateValue(stateValue + 1);\n    }\n  };\n\n  return (\n    <View\n      style={[\n        { flexDirection: \"row\" },\n        style,\n        borderRadius ? { borderRadius } : {},\n      ]}\n    >\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/remove\"\n        onPress={handleMinus}\n        size={iconSize}\n        color={iconColor}\n        disabled={value ? value === 0 : stateValue === 0}\n      />\n      <Text\n        style={[\n          typography.body1,\n          {\n            textAlign: \"center\",\n            alignSelf: \"center\",\n            color: colors.medium,\n            marginHorizontal: 8,\n          },\n          typeStyle,\n        ]}\n      >\n        {value || stateValue}\n      </Text>\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/add\"\n        onPress={handlePlus}\n        size={iconSize}\n        color={iconColor}\n      />\n    </View>\n  );\n};\n\nexport default withTheme(Stepper);\n\nexport const SEED_DATA = [\n  {\n    name: \"Stepper\",\n    tag: \"Stepper\",\n    description: \"A component used to control the quantity of something\",\n    category: COMPONENT_TYPES.input,\n    layout: {},\n    triggers: [Triggers.OnChange],\n    props: {\n      fieldName: createFieldNameProp({\n        defaultValue: \"stepperValue\",\n        handlerPropName: \"onChange\",\n        valuePropName: \"value\",\n      }),\n      iconSize: createIconSizeProp({ defaultValue: 24 }),\n      iconColor: createColorProp({ defaultValue: \"strong\" }),\n    },\n  },\n];\n"]}
+{"version":3,"sources":["Stepper.tsx"],"names":["React","View","Text","withTheme","COMPONENT_TYPES","createIconSizeProp","createColorProp","createFieldNameProp","Triggers","IconButton","usePrevious","Stepper","Icon","value","style","onChange","initialValue","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","useState","useEffect","previousInitialValue","handleMinus","handlePlus","flexDirection","body1","textAlign","alignSelf","color","medium","marginHorizontal","SEED_DATA","name","tag","description","category","input","layout","triggers","OnChange","props","fieldName","handlerPropName","valuePropName"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA4D,cAA5D;AACA,SAASC,SAAT,QAA0B,YAA1B;AACA,SACEC,eADF,EAEEC,kBAFF,EAGEC,eAHF,EAIEC,mBAJF,EAKEC,QALF,QAMO,iBANP;AAUA,OAAOC,UAAP,MAAuB,cAAvB;AACA,SAASC,WAAT,QAA4B,UAA5B;;AAeA,MAAMC,OAAwB,GAAG,CAAC;AAChCC,EAAAA,IADgC;AAEhCC,EAAAA,KAAK,GAAG,CAFwB;AAGhCC,EAAAA,KAHgC;AAIhCC,EAAAA,QAJgC;AAKhCC,EAAAA,YALgC;AAMhCC,EAAAA,YANgC;AAOhCC,EAAAA,KAAK,EAAE;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,UAAV;AAAsBC,IAAAA;AAAtB,GAPyB;AAQhCC,EAAAA,QAAQ,GAAG,EARqB;AAShCC,EAAAA,SAAS,GAAGJ,MAAM,CAACK,MATa;AAUhCC,EAAAA,YAAY,GAAGJ,SAViB;AAWhCK,EAAAA;AAXgC,CAAD,KAY3B;AACJ,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B5B,KAAK,CAAC6B,QAAN,CAClChB,KAAK,IAAII,YAAT,IAAyB,CADS,CAApC;AAIAjB,EAAAA,KAAK,CAAC8B,SAAN,CAAgB,MAAM;AACpBF,IAAAA,aAAa,CAACf,KAAD,CAAb;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;AAIA,QAAMkB,oBAAoB,GAAGrB,WAAW,CAACM,YAAD,CAAxC;AACAhB,EAAAA,KAAK,CAAC8B,SAAN,CAAgB,MAAM;AACpB,QAAId,YAAY,KAAKe,oBAArB,EAA2C;AACzCH,MAAAA,aAAa,CAACZ,YAAD,CAAb;AACAD,MAAAA,QAAQ,IAAIA,QAAQ,CAACC,YAAD,CAApB;AACD;AACF,GALD,EAKG,CAACA,YAAD,EAAee,oBAAf,EAAqChB,QAArC,EAA+Ca,aAA/C,CALH;;AAOA,QAAMI,WAAW,GAAG,MAAM;AACxB,QAAInB,KAAK,IAAIA,KAAK,KAAK,CAAvB,EAA0B;AACxBE,MAAAA,QAAQ,IAAIA,QAAQ,CAACF,KAAK,GAAG,CAAT,CAApB;AACD,KAFD,MAEO;AACLe,MAAAA,aAAa,CAACD,UAAU,GAAG,CAAd,CAAb;AACD;AACF,GAND;;AAQA,QAAMM,UAAU,GAAG,MAAM;AACvB,QAAIpB,KAAK,IAAIA,KAAK,KAAK,CAAvB,EAA0B;AACxBE,MAAAA,QAAQ,IAAIA,QAAQ,CAACF,KAAK,GAAG,CAAT,CAApB;AACD,KAFD,MAEO;AACLe,MAAAA,aAAa,CAACD,UAAU,GAAG,CAAd,CAAb;AACD;AACF,GAND;;AAQA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AAAEO,MAAAA,aAAa,EAAE;AAAjB,KADK,EAELpB,KAFK,EAGLW,YAAY,GAAG;AAAEA,MAAAA;AAAF,KAAH,GAAsB,EAH7B;AADT,kBAOE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEb,IADR;AAEE,IAAA,IAAI,EAAC,sBAFP;AAGE,IAAA,OAAO,EAAEoB,WAHX;AAIE,IAAA,IAAI,EAAEV,QAJR;AAKE,IAAA,KAAK,EAAEC,SALT;AAME,IAAA,QAAQ,EAAEV,KAAK,GAAGA,KAAK,KAAK,CAAb,GAAiBc,UAAU,KAAK;AANjD,IAPF,eAeE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLP,UAAU,CAACe,KADN,EAEL;AACEC,MAAAA,SAAS,EAAE,QADb;AAEEC,MAAAA,SAAS,EAAE,QAFb;AAGEC,MAAAA,KAAK,EAAEnB,MAAM,CAACoB,MAHhB;AAIEC,MAAAA,gBAAgB,EAAE;AAJpB,KAFK,EAQLd,SARK;AADT,KAYGb,KAAK,IAAIc,UAZZ,CAfF,eA6BE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEf,IADR;AAEE,IAAA,IAAI,EAAC,mBAFP;AAGE,IAAA,OAAO,EAAEqB,UAHX;AAIE,IAAA,IAAI,EAAEX,QAJR;AAKE,IAAA,KAAK,EAAEC;AALT,IA7BF,CADF;AAuCD,CApFD;;AAsFA,eAAepB,SAAS,CAACQ,OAAD,CAAxB;AAEA,OAAO,MAAM8B,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,WAAW,EAAE,uDAHf;AAIEC,EAAAA,QAAQ,EAAEzC,eAAe,CAAC0C,KAJ5B;AAKEC,EAAAA,MAAM,EAAE,EALV;AAMEC,EAAAA,QAAQ,EAAE,CAACxC,QAAQ,CAACyC,QAAV,CANZ;AAOEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE5C,mBAAmB,CAAC;AAC7BU,MAAAA,YAAY,EAAE,cADe;AAE7BmC,MAAAA,eAAe,EAAE,UAFY;AAG7BC,MAAAA,aAAa,EAAE;AAHc,KAAD,CADzB;AAML/B,IAAAA,QAAQ,EAAEjB,kBAAkB,CAAC;AAAEY,MAAAA,YAAY,EAAE;AAAhB,KAAD,CANvB;AAOLM,IAAAA,SAAS,EAAEjB,eAAe,CAAC;AAAEW,MAAAA,YAAY,EAAE;AAAhB,KAAD;AAPrB;AAPT,CADuB,CAAlB","sourcesContent":["import * as React from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport {\n  COMPONENT_TYPES,\n  createIconSizeProp,\n  createColorProp,\n  createFieldNameProp,\n  Triggers,\n} from \"@draftbit/types\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport IconButton from \"./IconButton\";\nimport { usePrevious } from \"../hooks\";\n\ntype Props = {\n  value?: number;\n  theme: Theme;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (value: number) => void;\n  initialValue?: number; // deprecated\n  defaultValue?: number;\n  iconSize?: number;\n  iconColor?: string;\n  borderRadius?: number;\n  typeStyle?: StyleProp<TextStyle>;\n} & IconSlot;\n\nconst Stepper: React.FC<Props> = ({\n  Icon,\n  value = 0,\n  style,\n  onChange,\n  initialValue,\n  defaultValue,\n  theme: { colors, typography, roundness },\n  iconSize = 24,\n  iconColor = colors.strong,\n  borderRadius = roundness,\n  typeStyle,\n}) => {\n  const [stateValue, setStateValue] = React.useState(\n    value || defaultValue || 0\n  );\n\n  React.useEffect(() => {\n    setStateValue(value);\n  }, [value]);\n\n  const previousInitialValue = usePrevious(initialValue);\n  React.useEffect(() => {\n    if (initialValue !== previousInitialValue) {\n      setStateValue(initialValue);\n      onChange && onChange(initialValue);\n    }\n  }, [initialValue, previousInitialValue, onChange, setStateValue]);\n\n  const handleMinus = () => {\n    if (value || value === 0) {\n      onChange && onChange(value - 1);\n    } else {\n      setStateValue(stateValue - 1);\n    }\n  };\n\n  const handlePlus = () => {\n    if (value || value === 0) {\n      onChange && onChange(value + 1);\n    } else {\n      setStateValue(stateValue + 1);\n    }\n  };\n\n  return (\n    <View\n      style={[\n        { flexDirection: \"row\" },\n        style,\n        borderRadius ? { borderRadius } : {},\n      ]}\n    >\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/remove\"\n        onPress={handleMinus}\n        size={iconSize}\n        color={iconColor}\n        disabled={value ? value === 0 : stateValue === 0}\n      />\n      <Text\n        style={[\n          typography.body1,\n          {\n            textAlign: \"center\",\n            alignSelf: \"center\",\n            color: colors.medium,\n            marginHorizontal: 8,\n          },\n          typeStyle,\n        ]}\n      >\n        {value || stateValue}\n      </Text>\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/add\"\n        onPress={handlePlus}\n        size={iconSize}\n        color={iconColor}\n      />\n    </View>\n  );\n};\n\nexport default withTheme(Stepper);\n\nexport const SEED_DATA = [\n  {\n    name: \"Stepper\",\n    tag: \"Stepper\",\n    description: \"A component used to control the quantity of something\",\n    category: COMPONENT_TYPES.input,\n    layout: {},\n    triggers: [Triggers.OnChange],\n    props: {\n      fieldName: createFieldNameProp({\n        defaultValue: \"stepperValue\",\n        handlerPropName: \"onChange\",\n        valuePropName: \"value\",\n      }),\n      iconSize: createIconSizeProp({ defaultValue: 24 }),\n      iconColor: createColorProp({ defaultValue: \"strong\" }),\n    },\n  },\n];\n"]}

package/lib/module/components/Swiper/Swiper.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, GROUPS } from "@draftbit/types";
 import React from "react";
 import { View } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
@@ -10,11 +10,7 @@ const Swiper = ({
   from = 0,
   prevTitle = "",
   nextTitle = "",
-  prevTitleColor = "red",
-  nextTitleColor = "blue",
   dotsTouchable = true,
-  dotColor,
-  dotActiveColor,
   children,
   style
 }) => /*#__PURE__*/React.createElement(View, {
@@ -27,21 +23,7 @@ const Swiper = ({
   controlsProps: {
     prevTitle,
     nextTitle,
-    prevTitleStyle: {
-      color: prevTitleColor
-    },
-    nextTitleStyle: {
-      color: nextTitleColor
-    },
-    dotsTouchable,
-    dotActiveStyle: {
-      backgroundColor: dotActiveColor
-    },
-    dotProps: {
-      badgeStyle: {
-        backgroundColor: dotColor
-      }
-    }
+    dotsTouchable
   }
 }, children));
 
@@ -84,20 +66,6 @@ export const SEED_DATA = {
       label: "Next Title",
       defaultValue: ""
     }),
-    prevTitleColor: createColorProp({
-      label: "Previous Title Color"
-    }),
-    nextTitleColor: createColorProp({
-      label: "Next Title Color"
-    }),
-    dotColor: createColorProp({
-      label: "Dot Color",
-      defaultValue: "#86939e"
-    }),
-    dotActiveColor: createColorProp({
-      label: "Dot Active Color",
-      defaultValue: "#2089dc"
-    }),
     dotsTouchable: createBoolProp({
       group: GROUPS.basic,
       label: "Dots Touchable",

package/lib/module/components/Swiper/Swiper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Swiper.tsx"],"names":["COMPONENT_TYPES","createBoolProp","createColorProp","createNumberProp","createTextProp","GROUPS","React","View","SwiperComponent","Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","dotActiveStyle","backgroundColor","dotProps","badgeStyle","SEED_DATA","name","tag","description","category","container","layout","height","width","props","group","basic","label","defaultValue"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,eAHF,EAIEC,gBAJF,EAKEC,cALF,EAMEC,MANF,QAOO,iBAPP;AAQA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,eAAP,MAA4B,yBAA5B;;AAkBA,MAAMC,MAAM,GAAG,CAAC;AACdC,EAAAA,QAAQ,GAAG,KADG;AAEdC,EAAAA,IAAI,GAAG,KAFO;AAGdC,EAAAA,OAAO,GAAG,CAHI;AAIdC,EAAAA,IAAI,GAAG,CAJO;AAKdC,EAAAA,SAAS,GAAG,EALE;AAMdC,EAAAA,SAAS,GAAG,EANE;AAOdC,EAAAA,cAAc,GAAG,KAPH;AAQdC,EAAAA,cAAc,GAAG,MARH;AASdC,EAAAA,aAAa,GAAG,IATF;AAUdC,EAAAA,QAVc;AAWdC,EAAAA,cAXc;AAYdC,EAAAA,QAZc;AAadC,EAAAA;AAbc,CAAD,kBAeb,oBAAC,IAAD;AAAM,EAAA,KAAK,EAAEA;AAAb,gBACE,oBAAC,eAAD;AACE,EAAA,IAAI,EAAET,IADR;AAEE,EAAA,IAAI,EAAEF,IAFR;AAGE,EAAA,OAAO,EAAEC,OAHX;AAIE,EAAA,QAAQ,EAAEF,QAJZ;AAKE,EAAA,aAAa,EAAE;AACbI,IAAAA,SADa;AAEbC,IAAAA,SAFa;AAGbQ,IAAAA,cAAc,EAAE;AAAEC,MAAAA,KAAK,EAAER;AAAT,KAHH;AAIbS,IAAAA,cAAc,EAAE;AAAED,MAAAA,KAAK,EAAEP;AAAT,KAJH;AAKbC,IAAAA,aALa;AAMbQ,IAAAA,cAAc,EAAE;AAAEC,MAAAA,eAAe,EAAEP;AAAnB,KANH;AAObQ,IAAAA,QAAQ,EAAE;AAAEC,MAAAA,UAAU,EAAE;AAAEF,QAAAA,eAAe,EAAER;AAAnB;AAAd;AAPG;AALjB,GAeGE,QAfH,CADF,CAfF;;AAoCA,eAAeZ,MAAf;AAEA,OAAO,MAAMqB,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,QADiB;AAEvBC,EAAAA,GAAG,EAAE,QAFkB;AAGvBC,EAAAA,WAAW,EAAE,kBAHU;AAIvBC,EAAAA,QAAQ,EAAElC,eAAe,CAACmC,SAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE,GADF;AAENC,IAAAA,KAAK,EAAE;AAFD,GALe;AASvBC,EAAAA,KAAK,EAAE;AACL1B,IAAAA,IAAI,EAAEV,gBAAgB,CAAC;AACrBqC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADO;AAErBC,MAAAA,KAAK,EAAE;AAFc,KAAD,CADjB;AAKL/B,IAAAA,IAAI,EAAEV,cAAc,CAAC;AACnBuC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADK;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAAD,CALf;AASL9B,IAAAA,OAAO,EAAET,gBAAgB,CAAC;AACxBqC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADU;AAExBC,MAAAA,KAAK,EAAE,SAFiB;AAGxBC,MAAAA,YAAY,EAAE;AAHU,KAAD,CATpB;AAcLjC,IAAAA,QAAQ,EAAET,cAAc,CAAC;AACvBuC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADS;AAEvBC,MAAAA,KAAK,EAAE,UAFgB;AAGvBC,MAAAA,YAAY,EAAE;AAHS,KAAD,CAdnB;AAmBL7B,IAAAA,SAAS,EAAEV,cAAc,CAAC;AACxBoC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADU;AAExBC,MAAAA,KAAK,EAAE,gBAFiB;AAGxBC,MAAAA,YAAY,EAAE;AAHU,KAAD,CAnBpB;AAwBL5B,IAAAA,SAAS,EAAEX,cAAc,CAAC;AACxBoC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADU;AAExBC,MAAAA,KAAK,EAAE,YAFiB;AAGxBC,MAAAA,YAAY,EAAE;AAHU,KAAD,CAxBpB;AA6BL3B,IAAAA,cAAc,EAAEd,eAAe,CAAC;AAC9BwC,MAAAA,KAAK,EAAE;AADuB,KAAD,CA7B1B;AAgCLzB,IAAAA,cAAc,EAAEf,eAAe,CAAC;AAC9BwC,MAAAA,KAAK,EAAE;AADuB,KAAD,CAhC1B;AAmCLvB,IAAAA,QAAQ,EAAEjB,eAAe,CAAC;AACxBwC,MAAAA,KAAK,EAAE,WADiB;AAExBC,MAAAA,YAAY,EAAE;AAFU,KAAD,CAnCpB;AAuCLvB,IAAAA,cAAc,EAAElB,eAAe,CAAC;AAC9BwC,MAAAA,KAAK,EAAE,kBADuB;AAE9BC,MAAAA,YAAY,EAAE;AAFgB,KAAD,CAvC1B;AA2CLzB,IAAAA,aAAa,EAAEjB,cAAc,CAAC;AAC5BuC,MAAAA,KAAK,EAAEnC,MAAM,CAACoC,KADc;AAE5BC,MAAAA,KAAK,EAAE,gBAFqB;AAG5BC,MAAAA,YAAY,EAAE;AAHc,KAAD;AA3CxB;AATgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createBoolProp,\n  createColorProp,\n  createNumberProp,\n  createTextProp,\n  GROUPS,\n} from \"@draftbit/types\";\nimport React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport SwiperComponent from \"react-native-web-swiper\";\n\nexport interface SwiperProps {\n  vertical?: boolean;\n  loop?: boolean;\n  from?: number;\n  timeout?: number;\n  prevTitle?: string;\n  nextTitle?: string;\n  prevTitleColor: string;\n  nextTitleColor: string;\n  dotsTouchable?: boolean;\n  dotColor?: string;\n  dotActiveColor?: string;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst Swiper = ({\n  vertical = false,\n  loop = false,\n  timeout = 0,\n  from = 0,\n  prevTitle = \"\",\n  nextTitle = \"\",\n  prevTitleColor = \"red\",\n  nextTitleColor = \"blue\",\n  dotsTouchable = true,\n  dotColor,\n  dotActiveColor,\n  children,\n  style,\n}: SwiperProps) => (\n  <View style={style}>\n    <SwiperComponent\n      from={from}\n      loop={loop}\n      timeout={timeout}\n      vertical={vertical}\n      controlsProps={{\n        prevTitle,\n        nextTitle,\n        prevTitleStyle: { color: prevTitleColor },\n        nextTitleStyle: { color: nextTitleColor },\n        dotsTouchable,\n        dotActiveStyle: { backgroundColor: dotActiveColor },\n        dotProps: { badgeStyle: { backgroundColor: dotColor } },\n      }}\n    >\n      {children}\n    </SwiperComponent>\n  </View>\n);\n\nexport default Swiper;\n\nexport const SEED_DATA = {\n  name: \"Swiper\",\n  tag: \"Swiper\",\n  description: \"Swiper container\",\n  category: COMPONENT_TYPES.container,\n  layout: {\n    height: 300,\n    width: \"100%\",\n  },\n  props: {\n    from: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Initial Slide\",\n    }),\n    loop: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Loop\",\n    }),\n    timeout: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Timeout\",\n      defaultValue: 0,\n    }),\n    vertical: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Vertical\",\n      defaultValue: false,\n    }),\n    prevTitle: createTextProp({\n      group: GROUPS.basic,\n      label: \"Previous Title\",\n      defaultValue: \"\",\n    }),\n    nextTitle: createTextProp({\n      group: GROUPS.basic,\n      label: \"Next Title\",\n      defaultValue: \"\",\n    }),\n    prevTitleColor: createColorProp({\n      label: \"Previous Title Color\",\n    }),\n    nextTitleColor: createColorProp({\n      label: \"Next Title Color\",\n    }),\n    dotColor: createColorProp({\n      label: \"Dot Color\",\n      defaultValue: \"#86939e\",\n    }),\n    dotActiveColor: createColorProp({\n      label: \"Dot Active Color\",\n      defaultValue: \"#2089dc\",\n    }),\n    dotsTouchable: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Dots Touchable\",\n      defaultValue: true,\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["Swiper.tsx"],"names":["COMPONENT_TYPES","createBoolProp","createNumberProp","createTextProp","GROUPS","React","View","SwiperComponent","Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","dotsTouchable","children","style","SEED_DATA","name","tag","description","category","container","layout","height","width","props","group","basic","label","defaultValue"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,gBAHF,EAIEC,cAJF,EAKEC,MALF,QAMO,iBANP;AAOA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,eAAP,MAA4B,yBAA5B;;AAcA,MAAMC,MAAM,GAAG,CAAC;AACdC,EAAAA,QAAQ,GAAG,KADG;AAEdC,EAAAA,IAAI,GAAG,KAFO;AAGdC,EAAAA,OAAO,GAAG,CAHI;AAIdC,EAAAA,IAAI,GAAG,CAJO;AAKdC,EAAAA,SAAS,GAAG,EALE;AAMdC,EAAAA,SAAS,GAAG,EANE;AAOdC,EAAAA,aAAa,GAAG,IAPF;AAQdC,EAAAA,QARc;AASdC,EAAAA;AATc,CAAD,kBAWb,oBAAC,IAAD;AAAM,EAAA,KAAK,EAAEA;AAAb,gBACE,oBAAC,eAAD;AACE,EAAA,IAAI,EAAEL,IADR;AAEE,EAAA,IAAI,EAAEF,IAFR;AAGE,EAAA,OAAO,EAAEC,OAHX;AAIE,EAAA,QAAQ,EAAEF,QAJZ;AAKE,EAAA,aAAa,EAAE;AACbI,IAAAA,SADa;AAEbC,IAAAA,SAFa;AAGbC,IAAAA;AAHa;AALjB,GAWGC,QAXH,CADF,CAXF;;AA4BA,eAAeR,MAAf;AAEA,OAAO,MAAMU,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,QADiB;AAEvBC,EAAAA,GAAG,EAAE,QAFkB;AAGvBC,EAAAA,WAAW,EAAE,kBAHU;AAIvBC,EAAAA,QAAQ,EAAEtB,eAAe,CAACuB,SAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE,GADF;AAENC,IAAAA,KAAK,EAAE;AAFD,GALe;AASvBC,EAAAA,KAAK,EAAE;AACLf,IAAAA,IAAI,EAAEV,gBAAgB,CAAC;AACrB0B,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADO;AAErBC,MAAAA,KAAK,EAAE;AAFc,KAAD,CADjB;AAKLpB,IAAAA,IAAI,EAAET,cAAc,CAAC;AACnB2B,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADK;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAAD,CALf;AASLnB,IAAAA,OAAO,EAAET,gBAAgB,CAAC;AACxB0B,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADU;AAExBC,MAAAA,KAAK,EAAE,SAFiB;AAGxBC,MAAAA,YAAY,EAAE;AAHU,KAAD,CATpB;AAcLtB,IAAAA,QAAQ,EAAER,cAAc,CAAC;AACvB2B,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADS;AAEvBC,MAAAA,KAAK,EAAE,UAFgB;AAGvBC,MAAAA,YAAY,EAAE;AAHS,KAAD,CAdnB;AAmBLlB,IAAAA,SAAS,EAAEV,cAAc,CAAC;AACxByB,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADU;AAExBC,MAAAA,KAAK,EAAE,gBAFiB;AAGxBC,MAAAA,YAAY,EAAE;AAHU,KAAD,CAnBpB;AAwBLjB,IAAAA,SAAS,EAAEX,cAAc,CAAC;AACxByB,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADU;AAExBC,MAAAA,KAAK,EAAE,YAFiB;AAGxBC,MAAAA,YAAY,EAAE;AAHU,KAAD,CAxBpB;AA6BLhB,IAAAA,aAAa,EAAEd,cAAc,CAAC;AAC5B2B,MAAAA,KAAK,EAAExB,MAAM,CAACyB,KADc;AAE5BC,MAAAA,KAAK,EAAE,gBAFqB;AAG5BC,MAAAA,YAAY,EAAE;AAHc,KAAD;AA7BxB;AATgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createBoolProp,\n  createNumberProp,\n  createTextProp,\n  GROUPS,\n} from \"@draftbit/types\";\nimport React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport SwiperComponent from \"react-native-web-swiper\";\n\nexport interface SwiperProps {\n  vertical?: boolean;\n  loop?: boolean;\n  from?: number;\n  timeout?: number;\n  prevTitle?: string;\n  nextTitle?: string;\n  dotsTouchable?: boolean;\n  children: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nconst Swiper = ({\n  vertical = false,\n  loop = false,\n  timeout = 0,\n  from = 0,\n  prevTitle = \"\",\n  nextTitle = \"\",\n  dotsTouchable = true,\n  children,\n  style,\n}: SwiperProps) => (\n  <View style={style}>\n    <SwiperComponent\n      from={from}\n      loop={loop}\n      timeout={timeout}\n      vertical={vertical}\n      controlsProps={{\n        prevTitle,\n        nextTitle,\n        dotsTouchable,\n      }}\n    >\n      {children}\n    </SwiperComponent>\n  </View>\n);\n\nexport default Swiper;\n\nexport const SEED_DATA = {\n  name: \"Swiper\",\n  tag: \"Swiper\",\n  description: \"Swiper container\",\n  category: COMPONENT_TYPES.container,\n  layout: {\n    height: 300,\n    width: \"100%\",\n  },\n  props: {\n    from: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Initial Slide\",\n    }),\n    loop: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Loop\",\n    }),\n    timeout: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Timeout\",\n      defaultValue: 0,\n    }),\n    vertical: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Vertical\",\n      defaultValue: false,\n    }),\n    prevTitle: createTextProp({\n      group: GROUPS.basic,\n      label: \"Previous Title\",\n      defaultValue: \"\",\n    }),\n    nextTitle: createTextProp({\n      group: GROUPS.basic,\n      label: \"Next Title\",\n      defaultValue: \"\",\n    }),\n    dotsTouchable: createBoolProp({\n      group: GROUPS.basic,\n      label: \"Dots Touchable\",\n      defaultValue: true,\n    }),\n  },\n};\n"]}

package/lib/module/components/Switch.js

@@ -26,6 +26,9 @@ function Switch({
   const activeThumbThemeColor = activeThumbColor || "#FFF";
   const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
   const [checked, setChecked] = React.useState(value || defaultValue);
+  React.useEffect(() => {
+    setChecked(value);
+  }, [value]);
   React.useEffect(() => {
     if (value != null && value !== checked) {
       setChecked(value);

package/lib/module/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switch.tsx"],"names":["React","Switch","NativeSwitch","withTheme","FormRow","RowDirection","usePrevious","value","initialValue","defaultValue","disabled","onValueChange","activeTrackColor","inactiveTrackColor","activeThumbColor","inactiveThumbColor","theme","style","rest","activeTrackThemeColor","colors","primary","inactiveTrackThemeColor","activeThumbThemeColor","inactiveThumbThemeColor","checked","setChecked","useState","useEffect","booleanInitialValue","Boolean","previousInitialValue","false","true","bool","Row","label","direction","SwitchRow"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  Switch as NativeSwitch,\n  SwitchProps,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport FormRow from \"./FormRow\";\nimport { RowDirection } from \"@draftbit/types\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport { usePrevious } from \"../hooks\";\n\ntype Props = {\n  value?: boolean;\n  disabled?: boolean;\n  onValueChange?: (value: boolean) => void;\n  initialValue?: boolean; // deprecated\n  defaultValue?: boolean;\n  theme: Theme;\n  activeTrackColor: string;\n  inactiveTrackColor: string;\n  activeThumbColor: string;\n  inactiveThumbColor: string;\n} & SwitchProps;\n\nfunction Switch({\n  value,\n  initialValue,\n  defaultValue,\n  disabled,\n  onValueChange,\n  activeTrackColor,\n  inactiveTrackColor,\n  activeThumbColor,\n  inactiveThumbColor,\n  theme,\n  style,\n  ...rest\n}: Props) {\n  const activeTrackThemeColor = activeTrackColor || theme.colors.primary;\n  const inactiveTrackThemeColor = inactiveTrackColor || \"#EEE\";\n\n  const activeThumbThemeColor = activeThumbColor || \"#FFF\";\n  const inactiveThumbThemeColor = inactiveThumbColor || \"#FFF\";\n\n  const [checked, setChecked] = React.useState(value || defaultValue);\n  React.useEffect(() => {\n    if (value != null && value !== checked) {\n      setChecked(value);\n    }\n  }, [value, checked]);\n\n  const booleanInitialValue = Boolean(initialValue);\n  const previousInitialValue = usePrevious(booleanInitialValue);\n\n  React.useEffect(() => {\n    if (initialValue != null && booleanInitialValue !== previousInitialValue) {\n      setChecked(booleanInitialValue);\n      onValueChange && onValueChange(booleanInitialValue);\n    }\n  }, [\n    initialValue,\n    booleanInitialValue,\n    previousInitialValue,\n    setChecked,\n    onValueChange,\n  ]);\n\n  return (\n    <NativeSwitch\n      value={checked}\n      disabled={disabled}\n      trackColor={{\n        false: inactiveTrackThemeColor,\n        true: activeTrackThemeColor,\n      }}\n      thumbColor={value ? activeThumbThemeColor : inactiveThumbThemeColor}\n      // @ts-ignore react-native-web only\n      activeThumbColor={activeThumbThemeColor}\n      ios_backgroundColor={inactiveTrackThemeColor}\n      style={style}\n      onValueChange={(bool) => {\n        setChecked(bool);\n        onValueChange && onValueChange(bool);\n      }}\n      {...rest}\n    />\n  );\n}\n\ntype RowProps = {\n  label: string;\n  direction: RowDirection;\n  style?: StyleProp<ViewStyle>;\n};\n\nfunction Row({\n  label = \"Label\",\n  direction = RowDirection.Row,\n  style,\n  value = false,\n  disabled,\n  onValueChange,\n  activeTrackColor,\n  inactiveTrackColor,\n  activeThumbColor,\n  inactiveThumbColor,\n  theme,\n  ...rest\n}: Props & RowProps) {\n  const [checked, setChecked] = React.useState(value);\n\n  React.useEffect(() => {\n    if (value !== checked) {\n      setChecked(value);\n    }\n  }, [value, checked]);\n\n  return (\n    <FormRow\n      disabled={disabled}\n      onPress={() => {\n        setChecked(!checked);\n        onValueChange && onValueChange(!checked);\n      }}\n      label={label}\n      direction={direction}\n      style={style}\n      {...rest}\n    >\n      <Switch\n        theme={theme}\n        value={checked}\n        disabled={disabled}\n        onValueChange={onValueChange}\n        activeTrackColor={activeTrackColor}\n        inactiveTrackColor={inactiveTrackColor}\n        activeThumbColor={activeThumbColor}\n        inactiveThumbColor={inactiveThumbColor}\n      />\n    </FormRow>\n  );\n}\n\nconst SwitchRow = withTheme(Row);\nexport { SwitchRow };\nexport default withTheme(Switch);\n\n/* README: SEED_DATA lives inside mappings/Switch.js since there were weird issues taking place with sourceMaps being\n * generated */\n"]}
+{"version":3,"sources":["Switch.tsx"],"names":["React","Switch","NativeSwitch","withTheme","FormRow","RowDirection","usePrevious","value","initialValue","defaultValue","disabled","onValueChange","activeTrackColor","inactiveTrackColor","activeThumbColor","inactiveThumbColor","theme","style","rest","activeTrackThemeColor","colors","primary","inactiveTrackThemeColor","activeThumbThemeColor","inactiveThumbThemeColor","checked","setChecked","useState","useEffect","booleanInitialValue","Boolean","previousInitialValue","false","true","bool","Row","label","direction","SwitchRow"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  Switch as NativeSwitch,\n  SwitchProps,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport FormRow from \"./FormRow\";\nimport { RowDirection } from \"@draftbit/types\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport { usePrevious } from \"../hooks\";\n\ntype Props = {\n  value?: boolean;\n  disabled?: boolean;\n  onValueChange?: (value: boolean) => void;\n  initialValue?: boolean; // deprecated\n  defaultValue?: boolean;\n  theme: Theme;\n  activeTrackColor: string;\n  inactiveTrackColor: string;\n  activeThumbColor: string;\n  inactiveThumbColor: string;\n} & SwitchProps;\n\nfunction Switch({\n  value,\n  initialValue,\n  defaultValue,\n  disabled,\n  onValueChange,\n  activeTrackColor,\n  inactiveTrackColor,\n  activeThumbColor,\n  inactiveThumbColor,\n  theme,\n  style,\n  ...rest\n}: Props) {\n  const activeTrackThemeColor = activeTrackColor || theme.colors.primary;\n  const inactiveTrackThemeColor = inactiveTrackColor || \"#EEE\";\n\n  const activeThumbThemeColor = activeThumbColor || \"#FFF\";\n  const inactiveThumbThemeColor = inactiveThumbColor || \"#FFF\";\n\n  const [checked, setChecked] = React.useState(value || defaultValue);\n\n  React.useEffect(() => {\n    setChecked(value);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (value != null && value !== checked) {\n      setChecked(value);\n    }\n  }, [value, checked]);\n\n  const booleanInitialValue = Boolean(initialValue);\n  const previousInitialValue = usePrevious(booleanInitialValue);\n\n  React.useEffect(() => {\n    if (initialValue != null && booleanInitialValue !== previousInitialValue) {\n      setChecked(booleanInitialValue);\n      onValueChange && onValueChange(booleanInitialValue);\n    }\n  }, [\n    initialValue,\n    booleanInitialValue,\n    previousInitialValue,\n    setChecked,\n    onValueChange,\n  ]);\n\n  return (\n    <NativeSwitch\n      value={checked}\n      disabled={disabled}\n      trackColor={{\n        false: inactiveTrackThemeColor,\n        true: activeTrackThemeColor,\n      }}\n      thumbColor={value ? activeThumbThemeColor : inactiveThumbThemeColor}\n      // @ts-ignore react-native-web only\n      activeThumbColor={activeThumbThemeColor}\n      ios_backgroundColor={inactiveTrackThemeColor}\n      style={style}\n      onValueChange={(bool) => {\n        setChecked(bool);\n        onValueChange && onValueChange(bool);\n      }}\n      {...rest}\n    />\n  );\n}\n\ntype RowProps = {\n  label: string;\n  direction: RowDirection;\n  style?: StyleProp<ViewStyle>;\n};\n\nfunction Row({\n  label = \"Label\",\n  direction = RowDirection.Row,\n  style,\n  value = false,\n  disabled,\n  onValueChange,\n  activeTrackColor,\n  inactiveTrackColor,\n  activeThumbColor,\n  inactiveThumbColor,\n  theme,\n  ...rest\n}: Props & RowProps) {\n  const [checked, setChecked] = React.useState(value);\n\n  React.useEffect(() => {\n    if (value !== checked) {\n      setChecked(value);\n    }\n  }, [value, checked]);\n\n  return (\n    <FormRow\n      disabled={disabled}\n      onPress={() => {\n        setChecked(!checked);\n        onValueChange && onValueChange(!checked);\n      }}\n      label={label}\n      direction={direction}\n      style={style}\n      {...rest}\n    >\n      <Switch\n        theme={theme}\n        value={checked}\n        disabled={disabled}\n        onValueChange={onValueChange}\n        activeTrackColor={activeTrackColor}\n        inactiveTrackColor={inactiveTrackColor}\n        activeThumbColor={activeThumbColor}\n        inactiveThumbColor={inactiveThumbColor}\n      />\n    </FormRow>\n  );\n}\n\nconst SwitchRow = withTheme(Row);\nexport { SwitchRow };\nexport default withTheme(Switch);\n\n/* README: SEED_DATA lives inside mappings/Switch.js since there were weird issues taking place with sourceMaps being\n * generated */\n"]}

package/lib/module/components/TextField.js

@@ -94,7 +94,10 @@ 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);
     }