@draftbit/core 43.3.1 → 43.3.4-a4d368.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/ActionSheet/ActionSheetCancel.js.map +1 -1
- package/lib/commonjs/components/Stepper.js +28 -19
- package/lib/commonjs/components/Stepper.js.map +1 -1
- package/lib/commonjs/components/Swiper/Swiper.js +23 -1
- package/lib/commonjs/components/Swiper/Swiper.js.map +1 -1
- package/lib/commonjs/mappings/Stepper.js +9 -0
- package/lib/commonjs/mappings/Stepper.js.map +1 -1
- package/lib/commonjs/mappings/Swiper.js +14 -0
- package/lib/commonjs/mappings/Swiper.js.map +1 -1
- package/lib/commonjs/mappings/TextArea.js +10 -1
- package/lib/commonjs/mappings/TextArea.js.map +1 -1
- package/lib/module/components/Stepper.js +27 -19
- package/lib/module/components/Stepper.js.map +1 -1
- package/lib/module/components/Swiper/Swiper.js +23 -1
- package/lib/module/components/Swiper/Swiper.js.map +1 -1
- package/lib/module/components/Touchable.js +3 -16
- package/lib/module/components/Touchable.js.map +1 -1
- package/lib/module/mappings/CardBlock.js.map +1 -1
- package/lib/module/mappings/Stepper.js +10 -1
- package/lib/module/mappings/Stepper.js.map +1 -1
- package/lib/module/mappings/Swiper.js +15 -1
- package/lib/module/mappings/Swiper.js.map +1 -1
- package/lib/module/mappings/TextArea.js +10 -1
- package/lib/module/mappings/TextArea.js.map +1 -1
- package/lib/typescript/src/components/Stepper.d.ts +2 -0
- package/lib/typescript/src/components/Swiper/Swiper.d.ts +5 -1
- package/lib/typescript/src/mappings/Stepper.d.ts +22 -0
- package/lib/typescript/src/mappings/Swiper.d.ts +40 -0
- package/lib/typescript/src/mappings/TextArea.d.ts +10 -1
- package/package.json +3 -3
- package/src/components/Stepper.js +23 -21
- package/src/components/Stepper.tsx +27 -19
- package/src/components/Swiper/Swiper.js +9 -1
- package/src/components/Swiper/Swiper.tsx +16 -0
- package/src/mappings/Stepper.js +10 -1
- package/src/mappings/Stepper.ts +10 -0
- package/src/mappings/Swiper.js +15 -1
- package/src/mappings/Swiper.ts +15 -0
- package/src/mappings/TextArea.js +12 -1
- package/src/mappings/TextArea.ts +12 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActionSheetCancel.
|
|
1
|
+
{"version":3,"sources":["ActionSheetCancel.tsx"],"names":["ActionSheetCancel","label","color","style","onPress"],"mappings":";;;;;;;AAAA;;AAEA;;;;AASA,MAAMA,iBAAkC,GAAG,QAKrC;AAAA,MALsC;AAC1CC,IAAAA,KAAK,GAAG,QADkC;AAE1CC,IAAAA,KAF0C;AAG1CC,IAAAA,KAH0C;AAI1CC,IAAAA;AAJ0C,GAKtC;AACJ,sBACE,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAEH,KADT;AAEE,IAAA,KAAK,EAAEC,KAAK,IAAI,SAFlB;AAGE,IAAA,KAAK,EAAE,CAACC,KAAD,CAHT;AAIE,IAAA,OAAO,EAAEC;AAJX,IADF;AAQD,CAdD;;eAgBeJ,iB","sourcesContent":["import React from \"react\";\nimport { StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport ActionSheetItem from \"./ActionSheetItem\";\n\ntype Props = {\n label: string;\n color: string;\n style?: StyleProp<ViewStyle | TextStyle>;\n onPress?: () => void;\n};\n\nconst ActionSheetCancel: React.FC<Props> = ({\n label = \"Cancel\",\n color,\n style,\n onPress,\n}) => {\n return (\n <ActionSheetItem\n label={label}\n color={color || \"#FF453A\"}\n style={[style]}\n onPress={onPress}\n />\n );\n};\n\nexport default ActionSheetCancel;\n"]}
|
|
@@ -13,6 +13,8 @@ var _theming = require("../theming");
|
|
|
13
13
|
|
|
14
14
|
var _IconButton = _interopRequireDefault(require("./IconButton"));
|
|
15
15
|
|
|
16
|
+
var _lodash = _interopRequireDefault(require("lodash.isnumber"));
|
|
17
|
+
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
19
|
|
|
18
20
|
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); }
|
|
@@ -23,6 +25,8 @@ const Stepper = _ref => {
|
|
|
23
25
|
let {
|
|
24
26
|
Icon,
|
|
25
27
|
value,
|
|
28
|
+
min,
|
|
29
|
+
max,
|
|
26
30
|
style,
|
|
27
31
|
onChange,
|
|
28
32
|
defaultValue,
|
|
@@ -38,32 +42,37 @@ const Stepper = _ref => {
|
|
|
38
42
|
} = _ref;
|
|
39
43
|
const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
|
|
40
44
|
React.useEffect(() => {
|
|
41
|
-
if (value
|
|
42
|
-
|
|
45
|
+
if (value || value === 0) {
|
|
46
|
+
onChange && onChange(stateValue);
|
|
43
47
|
}
|
|
44
|
-
}, [value]);
|
|
48
|
+
}, [onChange, stateValue, value]);
|
|
45
49
|
React.useEffect(() => {
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
let newValue = value || defaultValue || 0;
|
|
51
|
+
|
|
52
|
+
if ((0, _lodash.default)(max) && newValue > max) {
|
|
53
|
+
newValue = max;
|
|
48
54
|
}
|
|
49
|
-
}, [defaultValue]);
|
|
50
55
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
onChange && onChange(value - 1);
|
|
54
|
-
} else {
|
|
55
|
-
setStateValue(stateValue - 1);
|
|
56
|
+
if ((0, _lodash.default)(min) && newValue < min) {
|
|
57
|
+
newValue = min;
|
|
56
58
|
}
|
|
57
|
-
};
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
setStateValue(newValue);
|
|
61
|
+
}, [defaultValue, value, min, max]);
|
|
62
|
+
const handleMinus = React.useCallback(() => {
|
|
63
|
+
if ((0, _lodash.default)(min) && value === min) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
setStateValue(stateValue - 1);
|
|
68
|
+
}, [min, stateValue, value]);
|
|
69
|
+
const handlePlus = React.useCallback(() => {
|
|
70
|
+
if ((0, _lodash.default)(max) && value === max) {
|
|
71
|
+
return;
|
|
64
72
|
}
|
|
65
|
-
};
|
|
66
73
|
|
|
74
|
+
setStateValue(stateValue + 1);
|
|
75
|
+
}, [max, stateValue, value]);
|
|
67
76
|
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
68
77
|
style: [{
|
|
69
78
|
flexDirection: "row"
|
|
@@ -76,7 +85,7 @@ const Stepper = _ref => {
|
|
|
76
85
|
onPress: handleMinus,
|
|
77
86
|
size: iconSize,
|
|
78
87
|
color: iconColor,
|
|
79
|
-
disabled:
|
|
88
|
+
disabled: stateValue === 0
|
|
80
89
|
}), /*#__PURE__*/React.createElement(_reactNative.Text, {
|
|
81
90
|
style: [typography.body1, {
|
|
82
91
|
textAlign: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Stepper.tsx"],"names":["Stepper","Icon","value","style","onChange","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","React","useState","useEffect","handleMinus","handlePlus","flexDirection","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["Stepper.tsx"],"names":["Stepper","Icon","value","min","max","style","onChange","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","React","useState","useEffect","newValue","handleMinus","useCallback","handlePlus","flexDirection","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport IconButton from \"./IconButton\";\nimport isNumber from \"lodash.isnumber\";\n\ntype Props = {\n value?: number;\n min?: number;\n max?: number;\n theme: Theme;\n style?: StyleProp<ViewStyle>;\n onChange?: (value: number) => void;\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,\n min,\n max,\n style,\n onChange,\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 if (value || value === 0) {\n onChange && onChange(stateValue);\n }\n }, [onChange, stateValue, value]);\n\n React.useEffect(() => {\n let newValue = value || defaultValue || 0;\n if (isNumber(max) && newValue > max) {\n newValue = max;\n }\n if (isNumber(min) && newValue < min) {\n newValue = min;\n }\n setStateValue(newValue);\n }, [defaultValue, value, min, max]);\n\n const handleMinus = React.useCallback(() => {\n if (isNumber(min) && value === min) {\n return;\n }\n setStateValue(stateValue - 1);\n }, [min, stateValue, value]);\n\n const handlePlus = React.useCallback(() => {\n if (isNumber(max) && value === max) {\n return;\n }\n setStateValue(stateValue + 1);\n }, [max, stateValue, value]);\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={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"]}
|
|
@@ -21,7 +21,11 @@ const Swiper = _ref => {
|
|
|
21
21
|
from = 0,
|
|
22
22
|
prevTitle = "",
|
|
23
23
|
nextTitle = "",
|
|
24
|
+
prevTitleColor,
|
|
25
|
+
nextTitleColor,
|
|
24
26
|
dotsTouchable = true,
|
|
27
|
+
dotColor,
|
|
28
|
+
dotActiveColor,
|
|
25
29
|
children,
|
|
26
30
|
style
|
|
27
31
|
} = _ref;
|
|
@@ -35,7 +39,25 @@ const Swiper = _ref => {
|
|
|
35
39
|
controlsProps: {
|
|
36
40
|
prevTitle,
|
|
37
41
|
nextTitle,
|
|
38
|
-
|
|
42
|
+
prevTitleStyle: {
|
|
43
|
+
color: prevTitleColor
|
|
44
|
+
},
|
|
45
|
+
nextTitleStyle: {
|
|
46
|
+
color: nextTitleColor
|
|
47
|
+
},
|
|
48
|
+
dotsTouchable,
|
|
49
|
+
...(dotColor ? {
|
|
50
|
+
dotProps: {
|
|
51
|
+
badgeStyle: {
|
|
52
|
+
backgroundColor: dotColor
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
} : {}),
|
|
56
|
+
...(dotActiveColor ? {
|
|
57
|
+
dotActiveStyle: {
|
|
58
|
+
backgroundColor: dotActiveColor
|
|
59
|
+
}
|
|
60
|
+
} : {})
|
|
39
61
|
}
|
|
40
62
|
}, children));
|
|
41
63
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Swiper.tsx"],"names":["Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","dotsTouchable","children","style"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;
|
|
1
|
+
{"version":3,"sources":["Swiper.tsx"],"names":["Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","dotProps","badgeStyle","backgroundColor","dotActiveStyle"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAkBA,MAAMA,MAAM,GAAG;AAAA,MAAC;AACdC,IAAAA,QAAQ,GAAG,KADG;AAEdC,IAAAA,IAAI,GAAG,KAFO;AAGdC,IAAAA,OAAO,GAAG,CAHI;AAIdC,IAAAA,IAAI,GAAG,CAJO;AAKdC,IAAAA,SAAS,GAAG,EALE;AAMdC,IAAAA,SAAS,GAAG,EANE;AAOdC,IAAAA,cAPc;AAQdC,IAAAA,cARc;AASdC,IAAAA,aAAa,GAAG,IATF;AAUdC,IAAAA,QAVc;AAWdC,IAAAA,cAXc;AAYdC,IAAAA,QAZc;AAadC,IAAAA;AAbc,GAAD;AAAA,sBAeb,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEA;AAAb,kBACE,6BAAC,6BAAD;AACE,IAAA,IAAI,EAAET,IADR;AAEE,IAAA,IAAI,EAAEF,IAFR;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,aAAa,EAAE;AACbI,MAAAA,SADa;AAEbC,MAAAA,SAFa;AAGbQ,MAAAA,cAAc,EAAE;AAAEC,QAAAA,KAAK,EAAER;AAAT,OAHH;AAIbS,MAAAA,cAAc,EAAE;AAAED,QAAAA,KAAK,EAAEP;AAAT,OAJH;AAKbC,MAAAA,aALa;AAMb,UAAIC,QAAQ,GACR;AAAEO,QAAAA,QAAQ,EAAE;AAAEC,UAAAA,UAAU,EAAE;AAAEC,YAAAA,eAAe,EAAET;AAAnB;AAAd;AAAZ,OADQ,GAER,EAFJ,CANa;AASb,UAAIC,cAAc,GACd;AAAES,QAAAA,cAAc,EAAE;AAAED,UAAAA,eAAe,EAAER;AAAnB;AAAlB,OADc,GAEd,EAFJ;AATa;AALjB,KAmBGC,QAnBH,CADF,CAfa;AAAA,CAAf;;eAwCeZ,M","sourcesContent":["import 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,\n nextTitleColor,\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 ...(dotColor\n ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }\n : {}),\n ...(dotActiveColor\n ? { dotActiveStyle: { backgroundColor: dotActiveColor } }\n : {}),\n }}\n >\n {children}\n </SwiperComponent>\n </View>\n);\n\nexport default Swiper;\n"]}
|
|
@@ -25,6 +25,15 @@ const SEED_DATA = [{
|
|
|
25
25
|
}),
|
|
26
26
|
iconColor: (0, _types.createColorProp)({
|
|
27
27
|
defaultValue: "strong"
|
|
28
|
+
}),
|
|
29
|
+
min: (0, _types.createStaticNumberProp)({
|
|
30
|
+
label: "Minimum",
|
|
31
|
+
description: "Minimum Number",
|
|
32
|
+
defaultValue: 0
|
|
33
|
+
}),
|
|
34
|
+
max: (0, _types.createStaticNumberProp)({
|
|
35
|
+
label: "Maximum",
|
|
36
|
+
description: "Maximum Number"
|
|
28
37
|
})
|
|
29
38
|
}
|
|
30
39
|
}];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Stepper.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","input","layout","triggers","Triggers","OnChange","props","fieldName","defaultValue","handlerPropName","valuePropName","iconSize","iconColor"],"mappings":";;;;;;;AAAA;;
|
|
1
|
+
{"version":3,"sources":["Stepper.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","input","layout","triggers","Triggers","OnChange","props","fieldName","defaultValue","handlerPropName","valuePropName","iconSize","iconColor","min","label","max"],"mappings":";;;;;;;AAAA;;AASO,MAAMA,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,WAAW,EAAE,uDAHf;AAIEC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAJ5B;AAKEC,EAAAA,MAAM,EAAE,EALV;AAMEC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,QAAV,CANZ;AAOEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,gCAAoB;AAC7BC,MAAAA,YAAY,EAAE,cADe;AAE7BC,MAAAA,eAAe,EAAE,UAFY;AAG7BC,MAAAA,aAAa,EAAE;AAHc,KAApB,CADN;AAMLC,IAAAA,QAAQ,EAAE,+BAAmB;AAAEH,MAAAA,YAAY,EAAE;AAAhB,KAAnB,CANL;AAOLI,IAAAA,SAAS,EAAE,4BAAgB;AAAEJ,MAAAA,YAAY,EAAE;AAAhB,KAAhB,CAPN;AAQLK,IAAAA,GAAG,EAAE,mCAAuB;AAC1BC,MAAAA,KAAK,EAAE,SADmB;AAE1BhB,MAAAA,WAAW,EAAE,gBAFa;AAG1BU,MAAAA,YAAY,EAAE;AAHY,KAAvB,CARA;AAaLO,IAAAA,GAAG,EAAE,mCAAuB;AAC1BD,MAAAA,KAAK,EAAE,SADmB;AAE1BhB,MAAAA,WAAW,EAAE;AAFa,KAAvB;AAbA;AAPT,CADuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createIconSizeProp,\n createColorProp,\n createFieldNameProp,\n createStaticNumberProp,\n Triggers,\n} from \"@draftbit/types\";\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 min: createStaticNumberProp({\n label: \"Minimum\",\n description: \"Minimum Number\",\n defaultValue: 0,\n }),\n max: createStaticNumberProp({\n label: \"Maximum\",\n description: \"Maximum Number\",\n }),\n },\n },\n];\n"]}
|
|
@@ -45,6 +45,20 @@ const SEED_DATA = {
|
|
|
45
45
|
label: "Next Title",
|
|
46
46
|
defaultValue: ""
|
|
47
47
|
}),
|
|
48
|
+
prevTitleColor: (0, _types.createColorProp)({
|
|
49
|
+
label: "Previous Title Color"
|
|
50
|
+
}),
|
|
51
|
+
nextTitleColor: (0, _types.createColorProp)({
|
|
52
|
+
label: "Next Title Color"
|
|
53
|
+
}),
|
|
54
|
+
dotColor: (0, _types.createColorProp)({
|
|
55
|
+
label: "Dot Color",
|
|
56
|
+
defaultValue: "light"
|
|
57
|
+
}),
|
|
58
|
+
dotActiveColor: (0, _types.createColorProp)({
|
|
59
|
+
label: "Dot Active Color",
|
|
60
|
+
defaultValue: "primary"
|
|
61
|
+
}),
|
|
48
62
|
dotsTouchable: (0, _types.createBoolProp)({
|
|
49
63
|
group: _types.GROUPS.basic,
|
|
50
64
|
label: "Dots Touchable",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Swiper.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","layout","height","width","props","from","group","GROUPS","basic","label","loop","timeout","defaultValue","vertical","prevTitle","nextTitle","dotsTouchable"],"mappings":";;;;;;;AAAA;;
|
|
1
|
+
{"version":3,"sources":["Swiper.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","layout","height","width","props","from","group","GROUPS","basic","label","loop","timeout","defaultValue","vertical","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotColor","dotActiveColor","dotsTouchable"],"mappings":";;;;;;;AAAA;;AASO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,QADiB;AAEvBC,EAAAA,GAAG,EAAE,QAFkB;AAGvBC,EAAAA,WAAW,EAAE,kBAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,SAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE,GADF;AAENC,IAAAA,KAAK,EAAE;AAFD,GALe;AASvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,6BAAiB;AACrBC,MAAAA,KAAK,EAAEC,cAAOC,KADO;AAErBC,MAAAA,KAAK,EAAE;AAFc,KAAjB,CADD;AAKLC,IAAAA,IAAI,EAAE,2BAAe;AACnBJ,MAAAA,KAAK,EAAEC,cAAOC,KADK;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAAf,CALD;AASLE,IAAAA,OAAO,EAAE,6BAAiB;AACxBL,MAAAA,KAAK,EAAEC,cAAOC,KADU;AAExBC,MAAAA,KAAK,EAAE,SAFiB;AAGxBG,MAAAA,YAAY,EAAE;AAHU,KAAjB,CATJ;AAcLC,IAAAA,QAAQ,EAAE,2BAAe;AACvBP,MAAAA,KAAK,EAAEC,cAAOC,KADS;AAEvBC,MAAAA,KAAK,EAAE,UAFgB;AAGvBG,MAAAA,YAAY,EAAE;AAHS,KAAf,CAdL;AAmBLE,IAAAA,SAAS,EAAE,2BAAe;AACxBR,MAAAA,KAAK,EAAEC,cAAOC,KADU;AAExBC,MAAAA,KAAK,EAAE,gBAFiB;AAGxBG,MAAAA,YAAY,EAAE;AAHU,KAAf,CAnBN;AAwBLG,IAAAA,SAAS,EAAE,2BAAe;AACxBT,MAAAA,KAAK,EAAEC,cAAOC,KADU;AAExBC,MAAAA,KAAK,EAAE,YAFiB;AAGxBG,MAAAA,YAAY,EAAE;AAHU,KAAf,CAxBN;AA6BLI,IAAAA,cAAc,EAAE,4BAAgB;AAC9BP,MAAAA,KAAK,EAAE;AADuB,KAAhB,CA7BX;AAgCLQ,IAAAA,cAAc,EAAE,4BAAgB;AAC9BR,MAAAA,KAAK,EAAE;AADuB,KAAhB,CAhCX;AAmCLS,IAAAA,QAAQ,EAAE,4BAAgB;AACxBT,MAAAA,KAAK,EAAE,WADiB;AAExBG,MAAAA,YAAY,EAAE;AAFU,KAAhB,CAnCL;AAuCLO,IAAAA,cAAc,EAAE,4BAAgB;AAC9BV,MAAAA,KAAK,EAAE,kBADuB;AAE9BG,MAAAA,YAAY,EAAE;AAFgB,KAAhB,CAvCX;AA2CLQ,IAAAA,aAAa,EAAE,2BAAe;AAC5Bd,MAAAA,KAAK,EAAEC,cAAOC,KADc;AAE5BC,MAAAA,KAAK,EAAE,gBAFqB;AAG5BG,MAAAA,YAAY,EAAE;AAHc,KAAf;AA3CV;AATgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createBoolProp,\n createNumberProp,\n createTextProp,\n createColorProp,\n GROUPS,\n} from \"@draftbit/types\";\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: \"light\",\n }),\n dotActiveColor: createColorProp({\n label: \"Dot Active Color\",\n defaultValue: \"primary\",\n }),\n dotsTouchable: createBoolProp({\n group: GROUPS.basic,\n label: \"Dots Touchable\",\n defaultValue: true,\n }),\n },\n};\n"]}
|
|
@@ -13,7 +13,16 @@ const SEED_DATA = {
|
|
|
13
13
|
description: "An input field that allows for multiple lines.",
|
|
14
14
|
category: _types.COMPONENT_TYPES.input,
|
|
15
15
|
layout: {
|
|
16
|
-
|
|
16
|
+
borderLeftWidth: 1,
|
|
17
|
+
borderRightWidth: 1,
|
|
18
|
+
borderTopWidth: 1,
|
|
19
|
+
borderBottomWidth: 1,
|
|
20
|
+
borderColor: "divider",
|
|
21
|
+
paddingLeft: 8,
|
|
22
|
+
paddingRight: 8,
|
|
23
|
+
paddingTop: 8,
|
|
24
|
+
paddingBottom: 8,
|
|
25
|
+
borderRadius: 8
|
|
17
26
|
},
|
|
18
27
|
triggers: [_types.Triggers.OnChangeText],
|
|
19
28
|
props: { ..._types.TEXT_INPUT_PROPS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["TextArea.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","input","layout","
|
|
1
|
+
{"version":3,"sources":["TextArea.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","input","layout","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth","borderColor","paddingLeft","paddingRight","paddingTop","paddingBottom","borderRadius","triggers","Triggers","OnChangeText","props","TEXT_INPUT_PROPS","placeholder","defaultValue","multiline","label","group","GROUPS","uncategorized","formType","FORM_TYPES","boolean","propType","PROP_TYPES","BOOLEAN","editable","required","numberOfLines","basic","number","NUMBER","fieldName","FIELD_NAME","handlerPropName"],"mappings":";;;;;;;AAAA;;AAUO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,WAFkB;AAGvBC,EAAAA,WAAW,EAAE,gDAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,eAAe,EAAE,CADX;AAENC,IAAAA,gBAAgB,EAAE,CAFZ;AAGNC,IAAAA,cAAc,EAAE,CAHV;AAINC,IAAAA,iBAAiB,EAAE,CAJb;AAKNC,IAAAA,WAAW,EAAE,SALP;AAMNC,IAAAA,WAAW,EAAE,CANP;AAONC,IAAAA,YAAY,EAAE,CAPR;AAQNC,IAAAA,UAAU,EAAE,CARN;AASNC,IAAAA,aAAa,EAAE,CATT;AAUNC,IAAAA,YAAY,EAAE;AAVR,GALe;AAiBvBC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,YAAV,CAjBa;AAkBvBC,EAAAA,KAAK,EAAE,EACL,GAAGC,uBADE;AAELC,IAAAA,WAAW,EAAE,EACX,GAAGD,wBAAiBC,WADT;AAEXC,MAAAA,YAAY,EACV;AAHS,KAFR;AAOLC,IAAAA,SAAS,EAAE;AACTC,MAAAA,KAAK,EAAE,WADE;AAETvB,MAAAA,WAAW,EAAE,WAFJ;AAGTwB,MAAAA,KAAK,EAAEC,cAAOC,aAHL;AAITC,MAAAA,QAAQ,EAAEC,kBAAWC,OAJZ;AAKTC,MAAAA,QAAQ,EAAEC,kBAAWC,OALZ;AAMTX,MAAAA,YAAY,EAAE,IANL;AAOTY,MAAAA,QAAQ,EAAE,IAPD;AAQTC,MAAAA,QAAQ,EAAE;AARD,KAPN;AAiBLC,IAAAA,aAAa,EAAE;AACbZ,MAAAA,KAAK,EAAE,iBADM;AAEbvB,MAAAA,WAAW,EAAE,iBAFA;AAGbwB,MAAAA,KAAK,EAAEC,cAAOW,KAHD;AAIbT,MAAAA,QAAQ,EAAEC,kBAAWS,MAJR;AAKbP,MAAAA,QAAQ,EAAEC,kBAAWO,MALR;AAMbjB,MAAAA,YAAY,EAAE,CAND;AAObY,MAAAA,QAAQ,EAAE,IAPG;AAQbC,MAAAA,QAAQ,EAAE;AARG,KAjBV;AA2BLK,IAAAA,SAAS,EAAE,EACT,GAAGC,iBADM;AAETnB,MAAAA,YAAY,EAAE,gBAFL;AAGToB,MAAAA,eAAe,EAAE;AAHR;AA3BN;AAlBgB,CAAlB","sourcesContent":["import {\n GROUPS,\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n FIELD_NAME,\n TEXT_INPUT_PROPS,\n Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Text Area\",\n tag: \"TextInput\",\n description: \"An input field that allows for multiple lines.\",\n category: COMPONENT_TYPES.input,\n layout: {\n borderLeftWidth: 1,\n borderRightWidth: 1,\n borderTopWidth: 1,\n borderBottomWidth: 1,\n borderColor: \"divider\",\n paddingLeft: 8,\n paddingRight: 8,\n paddingTop: 8,\n paddingBottom: 8,\n borderRadius: 8,\n },\n triggers: [Triggers.OnChangeText],\n props: {\n ...TEXT_INPUT_PROPS,\n placeholder: {\n ...TEXT_INPUT_PROPS.placeholder,\n defaultValue:\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.\",\n },\n multiline: {\n label: \"Multiline\",\n description: \"Multiline\",\n group: GROUPS.uncategorized,\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: true,\n editable: true,\n required: false,\n },\n numberOfLines: {\n label: \"Number Of Lines\",\n description: \"Number Of Lines\",\n group: GROUPS.basic,\n formType: FORM_TYPES.number,\n propType: PROP_TYPES.NUMBER,\n defaultValue: 4,\n editable: true,\n required: false,\n },\n fieldName: {\n ...FIELD_NAME,\n defaultValue: \"textInputValue\",\n handlerPropName: \"onChangeText\",\n },\n },\n};\n"]}
|
|
@@ -2,11 +2,14 @@ import * as React from "react";
|
|
|
2
2
|
import { View, Text } from "react-native";
|
|
3
3
|
import { withTheme } from "../theming";
|
|
4
4
|
import IconButton from "./IconButton";
|
|
5
|
+
import isNumber from "lodash.isnumber";
|
|
5
6
|
|
|
6
7
|
const Stepper = _ref => {
|
|
7
8
|
let {
|
|
8
9
|
Icon,
|
|
9
10
|
value,
|
|
11
|
+
min,
|
|
12
|
+
max,
|
|
10
13
|
style,
|
|
11
14
|
onChange,
|
|
12
15
|
defaultValue,
|
|
@@ -22,32 +25,37 @@ const Stepper = _ref => {
|
|
|
22
25
|
} = _ref;
|
|
23
26
|
const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
|
|
24
27
|
React.useEffect(() => {
|
|
25
|
-
if (value
|
|
26
|
-
|
|
28
|
+
if (value || value === 0) {
|
|
29
|
+
onChange && onChange(stateValue);
|
|
27
30
|
}
|
|
28
|
-
}, [value]);
|
|
31
|
+
}, [onChange, stateValue, value]);
|
|
29
32
|
React.useEffect(() => {
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
let newValue = value || defaultValue || 0;
|
|
34
|
+
|
|
35
|
+
if (isNumber(max) && newValue > max) {
|
|
36
|
+
newValue = max;
|
|
32
37
|
}
|
|
33
|
-
}, [defaultValue]);
|
|
34
38
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
onChange && onChange(value - 1);
|
|
38
|
-
} else {
|
|
39
|
-
setStateValue(stateValue - 1);
|
|
39
|
+
if (isNumber(min) && newValue < min) {
|
|
40
|
+
newValue = min;
|
|
40
41
|
}
|
|
41
|
-
};
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
setStateValue(newValue);
|
|
44
|
+
}, [defaultValue, value, min, max]);
|
|
45
|
+
const handleMinus = React.useCallback(() => {
|
|
46
|
+
if (isNumber(min) && value === min) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
setStateValue(stateValue - 1);
|
|
51
|
+
}, [min, stateValue, value]);
|
|
52
|
+
const handlePlus = React.useCallback(() => {
|
|
53
|
+
if (isNumber(max) && value === max) {
|
|
54
|
+
return;
|
|
48
55
|
}
|
|
49
|
-
};
|
|
50
56
|
|
|
57
|
+
setStateValue(stateValue + 1);
|
|
58
|
+
}, [max, stateValue, value]);
|
|
51
59
|
return /*#__PURE__*/React.createElement(View, {
|
|
52
60
|
style: [{
|
|
53
61
|
flexDirection: "row"
|
|
@@ -60,7 +68,7 @@ const Stepper = _ref => {
|
|
|
60
68
|
onPress: handleMinus,
|
|
61
69
|
size: iconSize,
|
|
62
70
|
color: iconColor,
|
|
63
|
-
disabled:
|
|
71
|
+
disabled: stateValue === 0
|
|
64
72
|
}), /*#__PURE__*/React.createElement(Text, {
|
|
65
73
|
style: [typography.body1, {
|
|
66
74
|
textAlign: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Stepper.tsx"],"names":["React","View","Text","withTheme","IconButton","Stepper","Icon","value","style","onChange","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","useState","useEffect","handleMinus","handlePlus","flexDirection","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA4D,cAA5D;AACA,SAASC,SAAT,QAA0B,YAA1B;AAIA,OAAOC,UAAP,MAAuB,cAAvB;;
|
|
1
|
+
{"version":3,"sources":["Stepper.tsx"],"names":["React","View","Text","withTheme","IconButton","isNumber","Stepper","Icon","value","min","max","style","onChange","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","useState","useEffect","newValue","handleMinus","useCallback","handlePlus","flexDirection","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport IconButton from \"./IconButton\";\nimport isNumber from \"lodash.isnumber\";\n\ntype Props = {\n value?: number;\n min?: number;\n max?: number;\n theme: Theme;\n style?: StyleProp<ViewStyle>;\n onChange?: (value: number) => void;\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,\n min,\n max,\n style,\n onChange,\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 if (value || value === 0) {\n onChange && onChange(stateValue);\n }\n }, [onChange, stateValue, value]);\n\n React.useEffect(() => {\n let newValue = value || defaultValue || 0;\n if (isNumber(max) && newValue > max) {\n newValue = max;\n }\n if (isNumber(min) && newValue < min) {\n newValue = min;\n }\n setStateValue(newValue);\n }, [defaultValue, value, min, max]);\n\n const handleMinus = React.useCallback(() => {\n if (isNumber(min) && value === min) {\n return;\n }\n setStateValue(stateValue - 1);\n }, [min, stateValue, value]);\n\n const handlePlus = React.useCallback(() => {\n if (isNumber(max) && value === max) {\n return;\n }\n setStateValue(stateValue + 1);\n }, [max, stateValue, value]);\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={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"]}
|
|
@@ -10,7 +10,11 @@ const Swiper = _ref => {
|
|
|
10
10
|
from = 0,
|
|
11
11
|
prevTitle = "",
|
|
12
12
|
nextTitle = "",
|
|
13
|
+
prevTitleColor,
|
|
14
|
+
nextTitleColor,
|
|
13
15
|
dotsTouchable = true,
|
|
16
|
+
dotColor,
|
|
17
|
+
dotActiveColor,
|
|
14
18
|
children,
|
|
15
19
|
style
|
|
16
20
|
} = _ref;
|
|
@@ -24,7 +28,25 @@ const Swiper = _ref => {
|
|
|
24
28
|
controlsProps: {
|
|
25
29
|
prevTitle,
|
|
26
30
|
nextTitle,
|
|
27
|
-
|
|
31
|
+
prevTitleStyle: {
|
|
32
|
+
color: prevTitleColor
|
|
33
|
+
},
|
|
34
|
+
nextTitleStyle: {
|
|
35
|
+
color: nextTitleColor
|
|
36
|
+
},
|
|
37
|
+
dotsTouchable,
|
|
38
|
+
...(dotColor ? {
|
|
39
|
+
dotProps: {
|
|
40
|
+
badgeStyle: {
|
|
41
|
+
backgroundColor: dotColor
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
} : {}),
|
|
45
|
+
...(dotActiveColor ? {
|
|
46
|
+
dotActiveStyle: {
|
|
47
|
+
backgroundColor: dotActiveColor
|
|
48
|
+
}
|
|
49
|
+
} : {})
|
|
28
50
|
}
|
|
29
51
|
}, children));
|
|
30
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Swiper.tsx"],"names":["React","View","SwiperComponent","Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","dotsTouchable","children","style"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,eAAP,MAA4B,yBAA5B;;
|
|
1
|
+
{"version":3,"sources":["Swiper.tsx"],"names":["React","View","SwiperComponent","Swiper","vertical","loop","timeout","from","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotsTouchable","dotColor","dotActiveColor","children","style","prevTitleStyle","color","nextTitleStyle","dotProps","badgeStyle","backgroundColor","dotActiveStyle"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,eAAP,MAA4B,yBAA5B;;AAkBA,MAAMC,MAAM,GAAG;AAAA,MAAC;AACdC,IAAAA,QAAQ,GAAG,KADG;AAEdC,IAAAA,IAAI,GAAG,KAFO;AAGdC,IAAAA,OAAO,GAAG,CAHI;AAIdC,IAAAA,IAAI,GAAG,CAJO;AAKdC,IAAAA,SAAS,GAAG,EALE;AAMdC,IAAAA,SAAS,GAAG,EANE;AAOdC,IAAAA,cAPc;AAQdC,IAAAA,cARc;AASdC,IAAAA,aAAa,GAAG,IATF;AAUdC,IAAAA,QAVc;AAWdC,IAAAA,cAXc;AAYdC,IAAAA,QAZc;AAadC,IAAAA;AAbc,GAAD;AAAA,sBAeb,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEA;AAAb,kBACE,oBAAC,eAAD;AACE,IAAA,IAAI,EAAET,IADR;AAEE,IAAA,IAAI,EAAEF,IAFR;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,QAAQ,EAAEF,QAJZ;AAKE,IAAA,aAAa,EAAE;AACbI,MAAAA,SADa;AAEbC,MAAAA,SAFa;AAGbQ,MAAAA,cAAc,EAAE;AAAEC,QAAAA,KAAK,EAAER;AAAT,OAHH;AAIbS,MAAAA,cAAc,EAAE;AAAED,QAAAA,KAAK,EAAEP;AAAT,OAJH;AAKbC,MAAAA,aALa;AAMb,UAAIC,QAAQ,GACR;AAAEO,QAAAA,QAAQ,EAAE;AAAEC,UAAAA,UAAU,EAAE;AAAEC,YAAAA,eAAe,EAAET;AAAnB;AAAd;AAAZ,OADQ,GAER,EAFJ,CANa;AASb,UAAIC,cAAc,GACd;AAAES,QAAAA,cAAc,EAAE;AAAED,UAAAA,eAAe,EAAER;AAAnB;AAAlB,OADc,GAEd,EAFJ;AATa;AALjB,KAmBGC,QAnBH,CADF,CAfa;AAAA,CAAf;;AAwCA,eAAeZ,MAAf","sourcesContent":["import 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,\n nextTitleColor,\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 ...(dotColor\n ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }\n : {}),\n ...(dotActiveColor\n ? { dotActiveStyle: { backgroundColor: dotActiveColor } }\n : {}),\n }}\n >\n {children}\n </SwiperComponent>\n </View>\n);\n\nexport default Swiper;\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
1
3
|
import React from "react";
|
|
2
4
|
import { Pressable } from "react-native";
|
|
3
5
|
export default function Touchable(_ref) {
|
|
@@ -8,22 +10,7 @@ export default function Touchable(_ref) {
|
|
|
8
10
|
style,
|
|
9
11
|
...props
|
|
10
12
|
} = _ref;
|
|
11
|
-
return /*#__PURE__*/React.createElement(Pressable, {
|
|
12
|
-
onPress: onPress,
|
|
13
|
-
disabled: disabled,
|
|
14
|
-
hitSlop: 8,
|
|
15
|
-
style: _ref2 => {
|
|
16
|
-
let {
|
|
17
|
-
pressed
|
|
18
|
-
} = _ref2;
|
|
19
|
-
return [{
|
|
20
|
-
opacity: pressed || disabled ? 0.75 : 1
|
|
21
|
-
}, style];
|
|
22
|
-
},
|
|
23
|
-
...props
|
|
24
|
-
}, children);
|
|
25
|
-
}
|
|
26
|
-
//# sourceMappingURL=Touchable.js.map/React.createElement(Pressable, _extends({
|
|
13
|
+
return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
27
14
|
onPress: onPress,
|
|
28
15
|
disabled: disabled,
|
|
29
16
|
hitSlop: 8,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Touchable.
|
|
1
|
+
{"version":3,"sources":["Touchable.tsx"],"names":["React","Pressable","Touchable","children","disabled","onPress","style","props","pressed","opacity"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAAqD,cAArD;AASA,eAAe,SAASC,SAAT,OAML;AAAA,MANwB;AAChCC,IAAAA,QADgC;AAEhCC,IAAAA,QAFgC;AAGhCC,IAAAA,OAHgC;AAIhCC,IAAAA,KAJgC;AAKhC,OAAGC;AAL6B,GAMxB;AACR,sBACE,oBAAC,SAAD;AACE,IAAA,OAAO,EAAEF,OADX;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,OAAO,EAAE,CAHX;AAIE,IAAA,KAAK,EAAE,SAAiB;AAAA,UAAhB;AAAEI,QAAAA;AAAF,OAAgB;AACtB,aAAO,CACL;AACEC,QAAAA,OAAO,EAAED,OAAO,IAAIJ,QAAX,GAAsB,IAAtB,GAA6B;AADxC,OADK,EAILE,KAJK,CAAP;AAMD;AAXH,KAYMC,KAZN,GAcGJ,QAdH,CADF;AAkBD","sourcesContent":["import React from \"react\";\nimport { Pressable, ViewStyle, PressableProps } from \"react-native\";\n\ntype Props = {\n disabled?: boolean;\n children: React.ReactNode;\n style?: ViewStyle;\n onPress?: () => void;\n} & PressableProps;\n\nexport default function Touchable({\n children,\n disabled,\n onPress,\n style,\n ...props\n}: Props) {\n return (\n <Pressable\n onPress={onPress}\n disabled={disabled}\n hitSlop={8}\n style={({ pressed }) => {\n return [\n {\n opacity: pressed || disabled ? 0.75 : 1,\n },\n style,\n ];\n }}\n {...props}\n >\n {children}\n </Pressable>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CardBlock.
|
|
1
|
+
{"version":3,"sources":["CardBlock.ts"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","createElevationType","createNumColumnsType","SEED_DATA_PROPS","image","group","data","label","description","formType","propType","ASSET","defaultValue","editable","required","title","string","STRING","leftDescription","rightDescription","aspectRatio","basic","NUMBER","titleCentered","boolean","BOOLEAN","elevation","SEED_DATA","name","tag","category","card","props","numColumns","icon"],"mappings":"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","sourcesContent":["import {\n GROUPS,\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n createElevationType,\n createNumColumnsType,\n} from \"@draftbit/types\";\n\nconst SEED_DATA_PROPS = {\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n leftDescription: {\n group: GROUPS.data,\n label: \"Left description\",\n description: \"Text to display on the left\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n rightDescription: {\n group: GROUPS.data,\n label: \"Right description\",\n description: \"Text to display on the right\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n aspectRatio: {\n group: GROUPS.basic,\n label: \"Aspect ratio\",\n description: \"Aspect ratio of the image\",\n formType: FORM_TYPES.aspectRatio,\n propType: PROP_TYPES.NUMBER,\n defaultValue: 1.5,\n editable: true,\n required: false,\n },\n titleCentered: {\n group: GROUPS.basic,\n label: \"Title centered\",\n description: \"Whether to center the title\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: false,\n editable: true,\n required: false,\n },\n elevation: createElevationType(2),\n};\n\nexport const SEED_DATA = [\n {\n name: \"Small Card\",\n tag: \"CardBlock\",\n description:\n \"An elevated card with a title and description, that takes up one third of its container.\",\n category: COMPONENT_TYPES.card,\n props: {\n ...SEED_DATA_PROPS,\n numColumns: createNumColumnsType({\n defaultValue: 1,\n }),\n },\n },\n {\n name: \"Medium Block Card\",\n tag: \"CardBlock\",\n description:\n \"An elevated card with a title and description, that takes up one half of its container.\",\n category: COMPONENT_TYPES.card,\n props: {\n ...SEED_DATA_PROPS,\n icon: {\n group: GROUPS.basic,\n label: \"Icon\",\n description: \"Icon to display on the top right\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: true,\n },\n numColumns: createNumColumnsType({\n defaultValue: 2,\n }),\n },\n },\n {\n name: \"Large Block Card\",\n tag: \"CardBlock\",\n description:\n \"An elevated card with a title and description, that takes up the full width its container.\",\n category: COMPONENT_TYPES.card,\n props: {\n ...SEED_DATA_PROPS,\n icon: {\n group: GROUPS.basic,\n label: \"Icon\",\n description: \"Icon to display on the top right\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: true,\n },\n numColumns: createNumColumnsType({\n defaultValue: 3,\n }),\n },\n },\n];\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, Triggers } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = [{
|
|
3
3
|
name: "Stepper",
|
|
4
4
|
tag: "Stepper",
|
|
@@ -17,6 +17,15 @@ export const SEED_DATA = [{
|
|
|
17
17
|
}),
|
|
18
18
|
iconColor: createColorProp({
|
|
19
19
|
defaultValue: "strong"
|
|
20
|
+
}),
|
|
21
|
+
min: createStaticNumberProp({
|
|
22
|
+
label: "Minimum",
|
|
23
|
+
description: "Minimum Number",
|
|
24
|
+
defaultValue: 0
|
|
25
|
+
}),
|
|
26
|
+
max: createStaticNumberProp({
|
|
27
|
+
label: "Maximum",
|
|
28
|
+
description: "Maximum Number"
|
|
20
29
|
})
|
|
21
30
|
}
|
|
22
31
|
}];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Stepper.ts"],"names":["COMPONENT_TYPES","createIconSizeProp","createColorProp","createFieldNameProp","Triggers","SEED_DATA","name","tag","description","category","input","layout","triggers","OnChange","props","fieldName","defaultValue","handlerPropName","valuePropName","iconSize","iconColor"],"mappings":"AAAA,SACEA,eADF,EAEEC,kBAFF,EAGEC,eAHF,EAIEC,mBAJF,EAKEC,
|
|
1
|
+
{"version":3,"sources":["Stepper.ts"],"names":["COMPONENT_TYPES","createIconSizeProp","createColorProp","createFieldNameProp","createStaticNumberProp","Triggers","SEED_DATA","name","tag","description","category","input","layout","triggers","OnChange","props","fieldName","defaultValue","handlerPropName","valuePropName","iconSize","iconColor","min","label","max"],"mappings":"AAAA,SACEA,eADF,EAEEC,kBAFF,EAGEC,eAHF,EAIEC,mBAJF,EAKEC,sBALF,EAMEC,QANF,QAOO,iBAPP;AASA,OAAO,MAAMC,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,WAAW,EAAE,uDAHf;AAIEC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,KAJ5B;AAKEC,EAAAA,MAAM,EAAE,EALV;AAMEC,EAAAA,QAAQ,EAAE,CAACR,QAAQ,CAACS,QAAV,CANZ;AAOEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAEb,mBAAmB,CAAC;AAC7Bc,MAAAA,YAAY,EAAE,cADe;AAE7BC,MAAAA,eAAe,EAAE,UAFY;AAG7BC,MAAAA,aAAa,EAAE;AAHc,KAAD,CADzB;AAMLC,IAAAA,QAAQ,EAAEnB,kBAAkB,CAAC;AAAEgB,MAAAA,YAAY,EAAE;AAAhB,KAAD,CANvB;AAOLI,IAAAA,SAAS,EAAEnB,eAAe,CAAC;AAAEe,MAAAA,YAAY,EAAE;AAAhB,KAAD,CAPrB;AAQLK,IAAAA,GAAG,EAAElB,sBAAsB,CAAC;AAC1BmB,MAAAA,KAAK,EAAE,SADmB;AAE1Bd,MAAAA,WAAW,EAAE,gBAFa;AAG1BQ,MAAAA,YAAY,EAAE;AAHY,KAAD,CARtB;AAaLO,IAAAA,GAAG,EAAEpB,sBAAsB,CAAC;AAC1BmB,MAAAA,KAAK,EAAE,SADmB;AAE1Bd,MAAAA,WAAW,EAAE;AAFa,KAAD;AAbtB;AAPT,CADuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createIconSizeProp,\n createColorProp,\n createFieldNameProp,\n createStaticNumberProp,\n Triggers,\n} from \"@draftbit/types\";\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 min: createStaticNumberProp({\n label: \"Minimum\",\n description: \"Minimum Number\",\n defaultValue: 0,\n }),\n max: createStaticNumberProp({\n label: \"Maximum\",\n description: \"Maximum Number\",\n }),\n },\n },\n];\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, GROUPS } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "Swiper",
|
|
4
4
|
tag: "Swiper",
|
|
@@ -37,6 +37,20 @@ export const SEED_DATA = {
|
|
|
37
37
|
label: "Next Title",
|
|
38
38
|
defaultValue: ""
|
|
39
39
|
}),
|
|
40
|
+
prevTitleColor: createColorProp({
|
|
41
|
+
label: "Previous Title Color"
|
|
42
|
+
}),
|
|
43
|
+
nextTitleColor: createColorProp({
|
|
44
|
+
label: "Next Title Color"
|
|
45
|
+
}),
|
|
46
|
+
dotColor: createColorProp({
|
|
47
|
+
label: "Dot Color",
|
|
48
|
+
defaultValue: "light"
|
|
49
|
+
}),
|
|
50
|
+
dotActiveColor: createColorProp({
|
|
51
|
+
label: "Dot Active Color",
|
|
52
|
+
defaultValue: "primary"
|
|
53
|
+
}),
|
|
40
54
|
dotsTouchable: createBoolProp({
|
|
41
55
|
group: GROUPS.basic,
|
|
42
56
|
label: "Dots Touchable",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Swiper.ts"],"names":["COMPONENT_TYPES","createBoolProp","createNumberProp","createTextProp","GROUPS","SEED_DATA","name","tag","description","category","container","layout","height","width","props","from","group","basic","label","loop","timeout","defaultValue","vertical","prevTitle","nextTitle","dotsTouchable"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,gBAHF,EAIEC,cAJF,EAKEC,
|
|
1
|
+
{"version":3,"sources":["Swiper.ts"],"names":["COMPONENT_TYPES","createBoolProp","createNumberProp","createTextProp","createColorProp","GROUPS","SEED_DATA","name","tag","description","category","container","layout","height","width","props","from","group","basic","label","loop","timeout","defaultValue","vertical","prevTitle","nextTitle","prevTitleColor","nextTitleColor","dotColor","dotActiveColor","dotsTouchable"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,gBAHF,EAIEC,cAJF,EAKEC,eALF,EAMEC,MANF,QAOO,iBAPP;AASA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,QADiB;AAEvBC,EAAAA,GAAG,EAAE,QAFkB;AAGvBC,EAAAA,WAAW,EAAE,kBAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,SAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE,GADF;AAENC,IAAAA,KAAK,EAAE;AAFD,GALe;AASvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEd,gBAAgB,CAAC;AACrBe,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADO;AAErBC,MAAAA,KAAK,EAAE;AAFc,KAAD,CADjB;AAKLC,IAAAA,IAAI,EAAEnB,cAAc,CAAC;AACnBgB,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADK;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAAD,CALf;AASLE,IAAAA,OAAO,EAAEnB,gBAAgB,CAAC;AACxBe,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADU;AAExBC,MAAAA,KAAK,EAAE,SAFiB;AAGxBG,MAAAA,YAAY,EAAE;AAHU,KAAD,CATpB;AAcLC,IAAAA,QAAQ,EAAEtB,cAAc,CAAC;AACvBgB,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADS;AAEvBC,MAAAA,KAAK,EAAE,UAFgB;AAGvBG,MAAAA,YAAY,EAAE;AAHS,KAAD,CAdnB;AAmBLE,IAAAA,SAAS,EAAErB,cAAc,CAAC;AACxBc,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADU;AAExBC,MAAAA,KAAK,EAAE,gBAFiB;AAGxBG,MAAAA,YAAY,EAAE;AAHU,KAAD,CAnBpB;AAwBLG,IAAAA,SAAS,EAAEtB,cAAc,CAAC;AACxBc,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADU;AAExBC,MAAAA,KAAK,EAAE,YAFiB;AAGxBG,MAAAA,YAAY,EAAE;AAHU,KAAD,CAxBpB;AA6BLI,IAAAA,cAAc,EAAEtB,eAAe,CAAC;AAC9Be,MAAAA,KAAK,EAAE;AADuB,KAAD,CA7B1B;AAgCLQ,IAAAA,cAAc,EAAEvB,eAAe,CAAC;AAC9Be,MAAAA,KAAK,EAAE;AADuB,KAAD,CAhC1B;AAmCLS,IAAAA,QAAQ,EAAExB,eAAe,CAAC;AACxBe,MAAAA,KAAK,EAAE,WADiB;AAExBG,MAAAA,YAAY,EAAE;AAFU,KAAD,CAnCpB;AAuCLO,IAAAA,cAAc,EAAEzB,eAAe,CAAC;AAC9Be,MAAAA,KAAK,EAAE,kBADuB;AAE9BG,MAAAA,YAAY,EAAE;AAFgB,KAAD,CAvC1B;AA2CLQ,IAAAA,aAAa,EAAE7B,cAAc,CAAC;AAC5BgB,MAAAA,KAAK,EAAEZ,MAAM,CAACa,KADc;AAE5BC,MAAAA,KAAK,EAAE,gBAFqB;AAG5BG,MAAAA,YAAY,EAAE;AAHc,KAAD;AA3CxB;AATgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createBoolProp,\n createNumberProp,\n createTextProp,\n createColorProp,\n GROUPS,\n} from \"@draftbit/types\";\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: \"light\",\n }),\n dotActiveColor: createColorProp({\n label: \"Dot Active Color\",\n defaultValue: \"primary\",\n }),\n dotsTouchable: createBoolProp({\n group: GROUPS.basic,\n label: \"Dots Touchable\",\n defaultValue: true,\n }),\n },\n};\n"]}
|
|
@@ -5,7 +5,16 @@ export const SEED_DATA = {
|
|
|
5
5
|
description: "An input field that allows for multiple lines.",
|
|
6
6
|
category: COMPONENT_TYPES.input,
|
|
7
7
|
layout: {
|
|
8
|
-
|
|
8
|
+
borderLeftWidth: 1,
|
|
9
|
+
borderRightWidth: 1,
|
|
10
|
+
borderTopWidth: 1,
|
|
11
|
+
borderBottomWidth: 1,
|
|
12
|
+
borderColor: "divider",
|
|
13
|
+
paddingLeft: 8,
|
|
14
|
+
paddingRight: 8,
|
|
15
|
+
paddingTop: 8,
|
|
16
|
+
paddingBottom: 8,
|
|
17
|
+
borderRadius: 8
|
|
9
18
|
},
|
|
10
19
|
triggers: [Triggers.OnChangeText],
|
|
11
20
|
props: { ...TEXT_INPUT_PROPS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["TextArea.ts"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","FIELD_NAME","TEXT_INPUT_PROPS","Triggers","SEED_DATA","name","tag","description","category","input","layout","
|
|
1
|
+
{"version":3,"sources":["TextArea.ts"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","FIELD_NAME","TEXT_INPUT_PROPS","Triggers","SEED_DATA","name","tag","description","category","input","layout","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth","borderColor","paddingLeft","paddingRight","paddingTop","paddingBottom","borderRadius","triggers","OnChangeText","props","placeholder","defaultValue","multiline","label","group","uncategorized","formType","boolean","propType","BOOLEAN","editable","required","numberOfLines","basic","number","NUMBER","fieldName","handlerPropName"],"mappings":"AAAA,SACEA,MADF,EAEEC,eAFF,EAGEC,UAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,gBANF,EAOEC,QAPF,QAQO,iBARP;AAUA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,WAFkB;AAGvBC,EAAAA,WAAW,EAAE,gDAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,KAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,eAAe,EAAE,CADX;AAENC,IAAAA,gBAAgB,EAAE,CAFZ;AAGNC,IAAAA,cAAc,EAAE,CAHV;AAINC,IAAAA,iBAAiB,EAAE,CAJb;AAKNC,IAAAA,WAAW,EAAE,SALP;AAMNC,IAAAA,WAAW,EAAE,CANP;AAONC,IAAAA,YAAY,EAAE,CAPR;AAQNC,IAAAA,UAAU,EAAE,CARN;AASNC,IAAAA,aAAa,EAAE,CATT;AAUNC,IAAAA,YAAY,EAAE;AAVR,GALe;AAiBvBC,EAAAA,QAAQ,EAAE,CAAClB,QAAQ,CAACmB,YAAV,CAjBa;AAkBvBC,EAAAA,KAAK,EAAE,EACL,GAAGrB,gBADE;AAELsB,IAAAA,WAAW,EAAE,EACX,GAAGtB,gBAAgB,CAACsB,WADT;AAEXC,MAAAA,YAAY,EACV;AAHS,KAFR;AAOLC,IAAAA,SAAS,EAAE;AACTC,MAAAA,KAAK,EAAE,WADE;AAETpB,MAAAA,WAAW,EAAE,WAFJ;AAGTqB,MAAAA,KAAK,EAAE/B,MAAM,CAACgC,aAHL;AAITC,MAAAA,QAAQ,EAAE/B,UAAU,CAACgC,OAJZ;AAKTC,MAAAA,QAAQ,EAAEhC,UAAU,CAACiC,OALZ;AAMTR,MAAAA,YAAY,EAAE,IANL;AAOTS,MAAAA,QAAQ,EAAE,IAPD;AAQTC,MAAAA,QAAQ,EAAE;AARD,KAPN;AAiBLC,IAAAA,aAAa,EAAE;AACbT,MAAAA,KAAK,EAAE,iBADM;AAEbpB,MAAAA,WAAW,EAAE,iBAFA;AAGbqB,MAAAA,KAAK,EAAE/B,MAAM,CAACwC,KAHD;AAIbP,MAAAA,QAAQ,EAAE/B,UAAU,CAACuC,MAJR;AAKbN,MAAAA,QAAQ,EAAEhC,UAAU,CAACuC,MALR;AAMbd,MAAAA,YAAY,EAAE,CAND;AAObS,MAAAA,QAAQ,EAAE,IAPG;AAQbC,MAAAA,QAAQ,EAAE;AARG,KAjBV;AA2BLK,IAAAA,SAAS,EAAE,EACT,GAAGvC,UADM;AAETwB,MAAAA,YAAY,EAAE,gBAFL;AAGTgB,MAAAA,eAAe,EAAE;AAHR;AA3BN;AAlBgB,CAAlB","sourcesContent":["import {\n GROUPS,\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n FIELD_NAME,\n TEXT_INPUT_PROPS,\n Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Text Area\",\n tag: \"TextInput\",\n description: \"An input field that allows for multiple lines.\",\n category: COMPONENT_TYPES.input,\n layout: {\n borderLeftWidth: 1,\n borderRightWidth: 1,\n borderTopWidth: 1,\n borderBottomWidth: 1,\n borderColor: \"divider\",\n paddingLeft: 8,\n paddingRight: 8,\n paddingTop: 8,\n paddingBottom: 8,\n borderRadius: 8,\n },\n triggers: [Triggers.OnChangeText],\n props: {\n ...TEXT_INPUT_PROPS,\n placeholder: {\n ...TEXT_INPUT_PROPS.placeholder,\n defaultValue:\n \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.\",\n },\n multiline: {\n label: \"Multiline\",\n description: \"Multiline\",\n group: GROUPS.uncategorized,\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: true,\n editable: true,\n required: false,\n },\n numberOfLines: {\n label: \"Number Of Lines\",\n description: \"Number Of Lines\",\n group: GROUPS.basic,\n formType: FORM_TYPES.number,\n propType: PROP_TYPES.NUMBER,\n defaultValue: 4,\n editable: true,\n required: false,\n },\n fieldName: {\n ...FIELD_NAME,\n defaultValue: \"textInputValue\",\n handlerPropName: \"onChangeText\",\n },\n },\n};\n"]}
|
|
@@ -4,6 +4,8 @@ import type { Theme } from "../styles/DefaultTheme";
|
|
|
4
4
|
import type { IconSlot } from "../interfaces/Icon";
|
|
5
5
|
declare type Props = {
|
|
6
6
|
value?: number;
|
|
7
|
+
min?: number;
|
|
8
|
+
max?: number;
|
|
7
9
|
theme: Theme;
|
|
8
10
|
style?: StyleProp<ViewStyle>;
|
|
9
11
|
onChange?: (value: number) => void;
|
|
@@ -7,9 +7,13 @@ export interface SwiperProps {
|
|
|
7
7
|
timeout?: number;
|
|
8
8
|
prevTitle?: string;
|
|
9
9
|
nextTitle?: string;
|
|
10
|
+
prevTitleColor?: string;
|
|
11
|
+
nextTitleColor?: string;
|
|
10
12
|
dotsTouchable?: boolean;
|
|
13
|
+
dotColor?: string;
|
|
14
|
+
dotActiveColor?: string;
|
|
11
15
|
children: React.ReactNode;
|
|
12
16
|
style?: StyleProp<ViewStyle>;
|
|
13
17
|
}
|
|
14
|
-
declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, dotsTouchable, children, style, }: SwiperProps) => JSX.Element;
|
|
18
|
+
declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, prevTitleColor, nextTitleColor, dotsTouchable, dotColor, dotActiveColor, children, style, }: SwiperProps) => JSX.Element;
|
|
15
19
|
export default Swiper;
|
|
@@ -39,5 +39,27 @@ export declare const SEED_DATA: {
|
|
|
39
39
|
formType: string;
|
|
40
40
|
propType: string;
|
|
41
41
|
};
|
|
42
|
+
min: {
|
|
43
|
+
label: string;
|
|
44
|
+
description: string;
|
|
45
|
+
formType: string;
|
|
46
|
+
propType: string;
|
|
47
|
+
group: string;
|
|
48
|
+
defaultValue: null;
|
|
49
|
+
editable: boolean;
|
|
50
|
+
required: boolean;
|
|
51
|
+
step: number;
|
|
52
|
+
};
|
|
53
|
+
max: {
|
|
54
|
+
label: string;
|
|
55
|
+
description: string;
|
|
56
|
+
formType: string;
|
|
57
|
+
propType: string;
|
|
58
|
+
group: string;
|
|
59
|
+
defaultValue: null;
|
|
60
|
+
editable: boolean;
|
|
61
|
+
required: boolean;
|
|
62
|
+
step: number;
|
|
63
|
+
};
|
|
42
64
|
};
|
|
43
65
|
}[];
|
|
@@ -52,6 +52,46 @@ export declare const SEED_DATA: {
|
|
|
52
52
|
};
|
|
53
53
|
prevTitle: any;
|
|
54
54
|
nextTitle: any;
|
|
55
|
+
prevTitleColor: {
|
|
56
|
+
group: string;
|
|
57
|
+
label: string;
|
|
58
|
+
description: string;
|
|
59
|
+
editable: boolean;
|
|
60
|
+
required: boolean;
|
|
61
|
+
defaultValue: null;
|
|
62
|
+
formType: string;
|
|
63
|
+
propType: string;
|
|
64
|
+
};
|
|
65
|
+
nextTitleColor: {
|
|
66
|
+
group: string;
|
|
67
|
+
label: string;
|
|
68
|
+
description: string;
|
|
69
|
+
editable: boolean;
|
|
70
|
+
required: boolean;
|
|
71
|
+
defaultValue: null;
|
|
72
|
+
formType: string;
|
|
73
|
+
propType: string;
|
|
74
|
+
};
|
|
75
|
+
dotColor: {
|
|
76
|
+
group: string;
|
|
77
|
+
label: string;
|
|
78
|
+
description: string;
|
|
79
|
+
editable: boolean;
|
|
80
|
+
required: boolean;
|
|
81
|
+
defaultValue: null;
|
|
82
|
+
formType: string;
|
|
83
|
+
propType: string;
|
|
84
|
+
};
|
|
85
|
+
dotActiveColor: {
|
|
86
|
+
group: string;
|
|
87
|
+
label: string;
|
|
88
|
+
description: string;
|
|
89
|
+
editable: boolean;
|
|
90
|
+
required: boolean;
|
|
91
|
+
defaultValue: null;
|
|
92
|
+
formType: string;
|
|
93
|
+
propType: string;
|
|
94
|
+
};
|
|
55
95
|
dotsTouchable: {
|
|
56
96
|
label: string;
|
|
57
97
|
description: string;
|
|
@@ -4,7 +4,16 @@ export declare const SEED_DATA: {
|
|
|
4
4
|
description: string;
|
|
5
5
|
category: string;
|
|
6
6
|
layout: {
|
|
7
|
-
|
|
7
|
+
borderLeftWidth: number;
|
|
8
|
+
borderRightWidth: number;
|
|
9
|
+
borderTopWidth: number;
|
|
10
|
+
borderBottomWidth: number;
|
|
11
|
+
borderColor: string;
|
|
12
|
+
paddingLeft: number;
|
|
13
|
+
paddingRight: number;
|
|
14
|
+
paddingTop: number;
|
|
15
|
+
paddingBottom: number;
|
|
16
|
+
borderRadius: number;
|
|
8
17
|
};
|
|
9
18
|
triggers: string[];
|
|
10
19
|
props: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.3.
|
|
3
|
+
"version": "43.3.4-a4d368.3+a4d368f1",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^43.3.
|
|
44
|
+
"@draftbit/types": "^43.3.3",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.1.7",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
]
|
|
80
80
|
]
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "a4d368f102594ee414787ecd79b7db97bb809ae6"
|
|
83
83
|
}
|
|
@@ -2,40 +2,42 @@ import * as React from "react";
|
|
|
2
2
|
import { View, Text } from "react-native";
|
|
3
3
|
import { withTheme } from "../theming";
|
|
4
4
|
import IconButton from "./IconButton";
|
|
5
|
-
|
|
5
|
+
import isNumber from "lodash.isnumber";
|
|
6
|
+
const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
|
|
6
7
|
const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
|
|
7
8
|
React.useEffect(() => {
|
|
8
|
-
if (value
|
|
9
|
-
|
|
9
|
+
if (value || value === 0) {
|
|
10
|
+
onChange && onChange(stateValue);
|
|
10
11
|
}
|
|
11
|
-
}, [value]);
|
|
12
|
+
}, [onChange, stateValue, value]);
|
|
12
13
|
React.useEffect(() => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, [defaultValue]);
|
|
17
|
-
const handleMinus = () => {
|
|
18
|
-
if (value || value === 0) {
|
|
19
|
-
onChange && onChange(value - 1);
|
|
14
|
+
let newValue = value || defaultValue || 0;
|
|
15
|
+
if (isNumber(max) && newValue > max) {
|
|
16
|
+
newValue = max;
|
|
20
17
|
}
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
if (isNumber(min) && newValue < min) {
|
|
19
|
+
newValue = min;
|
|
23
20
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
setStateValue(newValue);
|
|
22
|
+
}, [defaultValue, value, min, max]);
|
|
23
|
+
const handleMinus = React.useCallback(() => {
|
|
24
|
+
if (isNumber(min) && value === min) {
|
|
25
|
+
return;
|
|
28
26
|
}
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
setStateValue(stateValue - 1);
|
|
28
|
+
}, [min, stateValue, value]);
|
|
29
|
+
const handlePlus = React.useCallback(() => {
|
|
30
|
+
if (isNumber(max) && value === max) {
|
|
31
|
+
return;
|
|
31
32
|
}
|
|
32
|
-
|
|
33
|
+
setStateValue(stateValue + 1);
|
|
34
|
+
}, [max, stateValue, value]);
|
|
33
35
|
return (React.createElement(View, { style: [
|
|
34
36
|
{ flexDirection: "row" },
|
|
35
37
|
style,
|
|
36
38
|
borderRadius ? { borderRadius } : {},
|
|
37
39
|
] },
|
|
38
|
-
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled:
|
|
40
|
+
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === 0 }),
|
|
39
41
|
React.createElement(Text, { style: [
|
|
40
42
|
typography.body1,
|
|
41
43
|
{
|
|
@@ -5,9 +5,12 @@ import type { Theme } from "../styles/DefaultTheme";
|
|
|
5
5
|
import type { IconSlot } from "../interfaces/Icon";
|
|
6
6
|
|
|
7
7
|
import IconButton from "./IconButton";
|
|
8
|
+
import isNumber from "lodash.isnumber";
|
|
8
9
|
|
|
9
10
|
type Props = {
|
|
10
11
|
value?: number;
|
|
12
|
+
min?: number;
|
|
13
|
+
max?: number;
|
|
11
14
|
theme: Theme;
|
|
12
15
|
style?: StyleProp<ViewStyle>;
|
|
13
16
|
onChange?: (value: number) => void;
|
|
@@ -21,6 +24,8 @@ type Props = {
|
|
|
21
24
|
const Stepper: React.FC<Props> = ({
|
|
22
25
|
Icon,
|
|
23
26
|
value,
|
|
27
|
+
min,
|
|
28
|
+
max,
|
|
24
29
|
style,
|
|
25
30
|
onChange,
|
|
26
31
|
defaultValue,
|
|
@@ -35,32 +40,35 @@ const Stepper: React.FC<Props> = ({
|
|
|
35
40
|
);
|
|
36
41
|
|
|
37
42
|
React.useEffect(() => {
|
|
38
|
-
if (value
|
|
39
|
-
|
|
43
|
+
if (value || value === 0) {
|
|
44
|
+
onChange && onChange(stateValue);
|
|
40
45
|
}
|
|
41
|
-
}, [value]);
|
|
46
|
+
}, [onChange, stateValue, value]);
|
|
42
47
|
|
|
43
48
|
React.useEffect(() => {
|
|
44
|
-
|
|
45
|
-
|
|
49
|
+
let newValue = value || defaultValue || 0;
|
|
50
|
+
if (isNumber(max) && newValue > max) {
|
|
51
|
+
newValue = max;
|
|
52
|
+
}
|
|
53
|
+
if (isNumber(min) && newValue < min) {
|
|
54
|
+
newValue = min;
|
|
46
55
|
}
|
|
47
|
-
|
|
56
|
+
setStateValue(newValue);
|
|
57
|
+
}, [defaultValue, value, min, max]);
|
|
48
58
|
|
|
49
|
-
const handleMinus = () => {
|
|
50
|
-
if (
|
|
51
|
-
|
|
52
|
-
} else {
|
|
53
|
-
setStateValue(stateValue - 1);
|
|
59
|
+
const handleMinus = React.useCallback(() => {
|
|
60
|
+
if (isNumber(min) && value === min) {
|
|
61
|
+
return;
|
|
54
62
|
}
|
|
55
|
-
|
|
63
|
+
setStateValue(stateValue - 1);
|
|
64
|
+
}, [min, stateValue, value]);
|
|
56
65
|
|
|
57
|
-
const handlePlus = () => {
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
} else {
|
|
61
|
-
setStateValue(stateValue + 1);
|
|
66
|
+
const handlePlus = React.useCallback(() => {
|
|
67
|
+
if (isNumber(max) && value === max) {
|
|
68
|
+
return;
|
|
62
69
|
}
|
|
63
|
-
|
|
70
|
+
setStateValue(stateValue + 1);
|
|
71
|
+
}, [max, stateValue, value]);
|
|
64
72
|
|
|
65
73
|
return (
|
|
66
74
|
<View
|
|
@@ -76,7 +84,7 @@ const Stepper: React.FC<Props> = ({
|
|
|
76
84
|
onPress={handleMinus}
|
|
77
85
|
size={iconSize}
|
|
78
86
|
color={iconColor}
|
|
79
|
-
disabled={
|
|
87
|
+
disabled={stateValue === 0}
|
|
80
88
|
/>
|
|
81
89
|
<Text
|
|
82
90
|
style={[
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
3
|
import SwiperComponent from "react-native-web-swiper";
|
|
4
|
-
const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", dotsTouchable = true, children, style, }) => (React.createElement(View, { style: style },
|
|
4
|
+
const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, children, style, }) => (React.createElement(View, { style: style },
|
|
5
5
|
React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
|
|
6
6
|
prevTitle,
|
|
7
7
|
nextTitle,
|
|
8
|
+
prevTitleStyle: { color: prevTitleColor },
|
|
9
|
+
nextTitleStyle: { color: nextTitleColor },
|
|
8
10
|
dotsTouchable,
|
|
11
|
+
...(dotColor
|
|
12
|
+
? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
|
|
13
|
+
: {}),
|
|
14
|
+
...(dotActiveColor
|
|
15
|
+
? { dotActiveStyle: { backgroundColor: dotActiveColor } }
|
|
16
|
+
: {}),
|
|
9
17
|
} }, children)));
|
|
10
18
|
export default Swiper;
|
|
@@ -9,7 +9,11 @@ export interface SwiperProps {
|
|
|
9
9
|
timeout?: number;
|
|
10
10
|
prevTitle?: string;
|
|
11
11
|
nextTitle?: string;
|
|
12
|
+
prevTitleColor?: string;
|
|
13
|
+
nextTitleColor?: string;
|
|
12
14
|
dotsTouchable?: boolean;
|
|
15
|
+
dotColor?: string;
|
|
16
|
+
dotActiveColor?: string;
|
|
13
17
|
children: React.ReactNode;
|
|
14
18
|
style?: StyleProp<ViewStyle>;
|
|
15
19
|
}
|
|
@@ -21,7 +25,11 @@ const Swiper = ({
|
|
|
21
25
|
from = 0,
|
|
22
26
|
prevTitle = "",
|
|
23
27
|
nextTitle = "",
|
|
28
|
+
prevTitleColor,
|
|
29
|
+
nextTitleColor,
|
|
24
30
|
dotsTouchable = true,
|
|
31
|
+
dotColor,
|
|
32
|
+
dotActiveColor,
|
|
25
33
|
children,
|
|
26
34
|
style,
|
|
27
35
|
}: SwiperProps) => (
|
|
@@ -34,7 +42,15 @@ const Swiper = ({
|
|
|
34
42
|
controlsProps={{
|
|
35
43
|
prevTitle,
|
|
36
44
|
nextTitle,
|
|
45
|
+
prevTitleStyle: { color: prevTitleColor },
|
|
46
|
+
nextTitleStyle: { color: nextTitleColor },
|
|
37
47
|
dotsTouchable,
|
|
48
|
+
...(dotColor
|
|
49
|
+
? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
|
|
50
|
+
: {}),
|
|
51
|
+
...(dotActiveColor
|
|
52
|
+
? { dotActiveStyle: { backgroundColor: dotActiveColor } }
|
|
53
|
+
: {}),
|
|
38
54
|
}}
|
|
39
55
|
>
|
|
40
56
|
{children}
|
package/src/mappings/Stepper.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, Triggers, } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = [
|
|
3
3
|
{
|
|
4
4
|
name: "Stepper",
|
|
@@ -15,6 +15,15 @@ export const SEED_DATA = [
|
|
|
15
15
|
}),
|
|
16
16
|
iconSize: createIconSizeProp({ defaultValue: 24 }),
|
|
17
17
|
iconColor: createColorProp({ defaultValue: "strong" }),
|
|
18
|
+
min: createStaticNumberProp({
|
|
19
|
+
label: "Minimum",
|
|
20
|
+
description: "Minimum Number",
|
|
21
|
+
defaultValue: 0,
|
|
22
|
+
}),
|
|
23
|
+
max: createStaticNumberProp({
|
|
24
|
+
label: "Maximum",
|
|
25
|
+
description: "Maximum Number",
|
|
26
|
+
}),
|
|
18
27
|
},
|
|
19
28
|
},
|
|
20
29
|
];
|
package/src/mappings/Stepper.ts
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
createIconSizeProp,
|
|
4
4
|
createColorProp,
|
|
5
5
|
createFieldNameProp,
|
|
6
|
+
createStaticNumberProp,
|
|
6
7
|
Triggers,
|
|
7
8
|
} from "@draftbit/types";
|
|
8
9
|
|
|
@@ -22,6 +23,15 @@ export const SEED_DATA = [
|
|
|
22
23
|
}),
|
|
23
24
|
iconSize: createIconSizeProp({ defaultValue: 24 }),
|
|
24
25
|
iconColor: createColorProp({ defaultValue: "strong" }),
|
|
26
|
+
min: createStaticNumberProp({
|
|
27
|
+
label: "Minimum",
|
|
28
|
+
description: "Minimum Number",
|
|
29
|
+
defaultValue: 0,
|
|
30
|
+
}),
|
|
31
|
+
max: createStaticNumberProp({
|
|
32
|
+
label: "Maximum",
|
|
33
|
+
description: "Maximum Number",
|
|
34
|
+
}),
|
|
25
35
|
},
|
|
26
36
|
},
|
|
27
37
|
];
|
package/src/mappings/Swiper.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "Swiper",
|
|
4
4
|
tag: "Swiper",
|
|
@@ -37,6 +37,20 @@ export const SEED_DATA = {
|
|
|
37
37
|
label: "Next Title",
|
|
38
38
|
defaultValue: "",
|
|
39
39
|
}),
|
|
40
|
+
prevTitleColor: createColorProp({
|
|
41
|
+
label: "Previous Title Color",
|
|
42
|
+
}),
|
|
43
|
+
nextTitleColor: createColorProp({
|
|
44
|
+
label: "Next Title Color",
|
|
45
|
+
}),
|
|
46
|
+
dotColor: createColorProp({
|
|
47
|
+
label: "Dot Color",
|
|
48
|
+
defaultValue: "light",
|
|
49
|
+
}),
|
|
50
|
+
dotActiveColor: createColorProp({
|
|
51
|
+
label: "Dot Active Color",
|
|
52
|
+
defaultValue: "primary",
|
|
53
|
+
}),
|
|
40
54
|
dotsTouchable: createBoolProp({
|
|
41
55
|
group: GROUPS.basic,
|
|
42
56
|
label: "Dots Touchable",
|
package/src/mappings/Swiper.ts
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
createBoolProp,
|
|
4
4
|
createNumberProp,
|
|
5
5
|
createTextProp,
|
|
6
|
+
createColorProp,
|
|
6
7
|
GROUPS,
|
|
7
8
|
} from "@draftbit/types";
|
|
8
9
|
|
|
@@ -44,6 +45,20 @@ export const SEED_DATA = {
|
|
|
44
45
|
label: "Next Title",
|
|
45
46
|
defaultValue: "",
|
|
46
47
|
}),
|
|
48
|
+
prevTitleColor: createColorProp({
|
|
49
|
+
label: "Previous Title Color",
|
|
50
|
+
}),
|
|
51
|
+
nextTitleColor: createColorProp({
|
|
52
|
+
label: "Next Title Color",
|
|
53
|
+
}),
|
|
54
|
+
dotColor: createColorProp({
|
|
55
|
+
label: "Dot Color",
|
|
56
|
+
defaultValue: "light",
|
|
57
|
+
}),
|
|
58
|
+
dotActiveColor: createColorProp({
|
|
59
|
+
label: "Dot Active Color",
|
|
60
|
+
defaultValue: "primary",
|
|
61
|
+
}),
|
|
47
62
|
dotsTouchable: createBoolProp({
|
|
48
63
|
group: GROUPS.basic,
|
|
49
64
|
label: "Dots Touchable",
|
package/src/mappings/TextArea.js
CHANGED
|
@@ -4,7 +4,18 @@ export const SEED_DATA = {
|
|
|
4
4
|
tag: "TextInput",
|
|
5
5
|
description: "An input field that allows for multiple lines.",
|
|
6
6
|
category: COMPONENT_TYPES.input,
|
|
7
|
-
layout: {
|
|
7
|
+
layout: {
|
|
8
|
+
borderLeftWidth: 1,
|
|
9
|
+
borderRightWidth: 1,
|
|
10
|
+
borderTopWidth: 1,
|
|
11
|
+
borderBottomWidth: 1,
|
|
12
|
+
borderColor: "divider",
|
|
13
|
+
paddingLeft: 8,
|
|
14
|
+
paddingRight: 8,
|
|
15
|
+
paddingTop: 8,
|
|
16
|
+
paddingBottom: 8,
|
|
17
|
+
borderRadius: 8,
|
|
18
|
+
},
|
|
8
19
|
triggers: [Triggers.OnChangeText],
|
|
9
20
|
props: {
|
|
10
21
|
...TEXT_INPUT_PROPS,
|
package/src/mappings/TextArea.ts
CHANGED
|
@@ -13,7 +13,18 @@ export const SEED_DATA = {
|
|
|
13
13
|
tag: "TextInput",
|
|
14
14
|
description: "An input field that allows for multiple lines.",
|
|
15
15
|
category: COMPONENT_TYPES.input,
|
|
16
|
-
layout: {
|
|
16
|
+
layout: {
|
|
17
|
+
borderLeftWidth: 1,
|
|
18
|
+
borderRightWidth: 1,
|
|
19
|
+
borderTopWidth: 1,
|
|
20
|
+
borderBottomWidth: 1,
|
|
21
|
+
borderColor: "divider",
|
|
22
|
+
paddingLeft: 8,
|
|
23
|
+
paddingRight: 8,
|
|
24
|
+
paddingTop: 8,
|
|
25
|
+
paddingBottom: 8,
|
|
26
|
+
borderRadius: 8,
|
|
27
|
+
},
|
|
17
28
|
triggers: [Triggers.OnChangeText],
|
|
18
29
|
props: {
|
|
19
30
|
...TEXT_INPUT_PROPS,
|