@draftbit/core 43.4.16 → 43.4.17-ab8b1a.0
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/Accordion/index.js.map +1 -1
- package/lib/commonjs/components/Stepper.js +40 -58
- package/lib/commonjs/components/Stepper.js.map +1 -1
- package/lib/commonjs/mappings/RowHeadlineImageCaption.js.map +1 -1
- package/lib/module/components/Portal/PortalHost.js.map +1 -1
- package/lib/module/components/Stepper.js +36 -54
- package/lib/module/components/Stepper.js.map +1 -1
- package/lib/typescript/src/components/Stepper.d.ts +8 -9
- package/package.json +2 -2
- package/src/components/Stepper.js +23 -37
- package/src/components/Stepper.tsx +48 -64
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as AccordionGroup } from \"./AccordionGroup\";\nexport { default as AccordionItem } from \"./AccordionItem\";\n"]}
|
|
@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
+
var _lodash = require("lodash");
|
|
13
|
+
|
|
12
14
|
var _theming = require("../theming");
|
|
13
15
|
|
|
14
16
|
var _IconButton = _interopRequireDefault(require("./IconButton"));
|
|
15
17
|
|
|
16
|
-
var _lodash = _interopRequireDefault(require("lodash.isnumber"));
|
|
17
|
-
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
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,89 +23,71 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
const Stepper = _ref => {
|
|
25
25
|
let {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
min = -Infinity,
|
|
27
|
+
max = Infinity,
|
|
28
|
+
value: valueProp,
|
|
29
|
+
defaultValue,
|
|
30
30
|
style,
|
|
31
|
+
typeStyle,
|
|
32
|
+
iconSize = 24,
|
|
33
|
+
iconColor,
|
|
31
34
|
onChange,
|
|
32
|
-
defaultValue,
|
|
33
35
|
theme: {
|
|
34
36
|
colors,
|
|
35
|
-
typography
|
|
36
|
-
roundness
|
|
37
|
+
typography
|
|
37
38
|
},
|
|
38
|
-
|
|
39
|
-
iconColor = colors.strong,
|
|
40
|
-
borderRadius = roundness,
|
|
41
|
-
typeStyle
|
|
39
|
+
Icon
|
|
42
40
|
} = _ref;
|
|
43
|
-
const [
|
|
44
|
-
React.useEffect(() => {
|
|
45
|
-
if (value || value === 0) {
|
|
46
|
-
onChange && onChange(stateValue);
|
|
47
|
-
}
|
|
48
|
-
}, [onChange, stateValue, value]);
|
|
49
|
-
React.useEffect(() => {
|
|
50
|
-
let newValue = value || defaultValue || 0;
|
|
41
|
+
const [value, setValue] = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
|
|
51
42
|
|
|
52
|
-
|
|
53
|
-
newValue = max;
|
|
54
|
-
}
|
|
43
|
+
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
55
44
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
45
|
+
const handlePlusOrMinus = type => {
|
|
46
|
+
const newValue = type === "plus" ? value + 1 : value - 1;
|
|
59
47
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
if ((0, _lodash.default)(min) && value === min) {
|
|
64
|
-
return;
|
|
48
|
+
if (isValidValue(newValue)) {
|
|
49
|
+
setValue(newValue);
|
|
50
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
65
51
|
}
|
|
52
|
+
};
|
|
66
53
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
54
|
+
(0, _react.useEffect)(() => {
|
|
55
|
+
if (valueProp != null && (0, _lodash.isNumber)(valueProp) && valueProp !== value && isValidValue(valueProp)) {
|
|
56
|
+
setValue(valueProp);
|
|
57
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
73
58
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
59
|
+
}, [valueProp]);
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
77
61
|
style: [{
|
|
78
62
|
flexDirection: "row"
|
|
79
|
-
}, style
|
|
80
|
-
|
|
81
|
-
} : {}]
|
|
82
|
-
}, /*#__PURE__*/React.createElement(_IconButton.default, {
|
|
63
|
+
}, style]
|
|
64
|
+
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
83
65
|
Icon: Icon,
|
|
84
66
|
icon: "MaterialIcons/remove",
|
|
85
|
-
onPress:
|
|
67
|
+
onPress: () => handlePlusOrMinus("minus"),
|
|
86
68
|
size: iconSize,
|
|
87
69
|
color: iconColor,
|
|
88
|
-
disabled:
|
|
89
|
-
style:
|
|
90
|
-
opacity: 0.5
|
|
91
|
-
}
|
|
92
|
-
}), /*#__PURE__*/
|
|
70
|
+
disabled: value === min,
|
|
71
|
+
style: {
|
|
72
|
+
opacity: value === min ? 0.5 : 1
|
|
73
|
+
}
|
|
74
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
93
75
|
style: [typography.body1, {
|
|
94
76
|
textAlign: "center",
|
|
95
77
|
alignSelf: "center",
|
|
96
78
|
color: colors.medium,
|
|
97
79
|
marginHorizontal: 8
|
|
98
80
|
}, typeStyle]
|
|
99
|
-
}, value
|
|
81
|
+
}, value), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
100
82
|
Icon: Icon,
|
|
101
83
|
icon: "MaterialIcons/add",
|
|
102
|
-
onPress:
|
|
84
|
+
onPress: () => handlePlusOrMinus("plus"),
|
|
103
85
|
size: iconSize,
|
|
104
86
|
color: iconColor,
|
|
105
|
-
disabled:
|
|
106
|
-
style:
|
|
107
|
-
opacity: 0.5
|
|
108
|
-
}
|
|
87
|
+
disabled: value === max,
|
|
88
|
+
style: {
|
|
89
|
+
opacity: value === max ? 0.5 : 1
|
|
90
|
+
}
|
|
109
91
|
}));
|
|
110
92
|
};
|
|
111
93
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Stepper.tsx"],"names":["Stepper","
|
|
1
|
+
{"version":3,"sources":["Stepper.tsx"],"names":["Stepper","min","Infinity","max","value","valueProp","defaultValue","style","typeStyle","iconSize","iconColor","onChange","theme","colors","typography","Icon","setValue","isValidValue","valueArg","handlePlusOrMinus","type","newValue","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { isNumber } from \"lodash\";\n\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport IconButton from \"./IconButton\";\n\ntype Props = {\n min: number;\n max: number;\n value?: number;\n defaultValue?: number;\n style?: StyleProp<ViewStyle>;\n typeStyle?: StyleProp<TextStyle>;\n iconSize: number;\n iconColor?: string;\n onChange?: (value: number) => void;\n theme: Theme;\n} & IconSlot;\n\nconst Stepper: FC<Props> = ({\n min = -Infinity,\n max = Infinity,\n value: valueProp,\n defaultValue,\n style,\n typeStyle,\n iconSize = 24,\n iconColor,\n onChange,\n theme: { colors, typography },\n Icon,\n}) => {\n const [value, setValue] = useState(defaultValue ?? 0);\n\n const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;\n\n const handlePlusOrMinus = (type: \"plus\" | \"minus\") => {\n const newValue = type === \"plus\" ? value + 1 : value - 1;\n\n if (isValidValue(newValue)) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n useEffect(() => {\n if (\n valueProp != null &&\n isNumber(valueProp) &&\n valueProp !== value &&\n isValidValue(valueProp)\n ) {\n setValue(valueProp);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [valueProp]);\n\n return (\n <View style={[{ flexDirection: \"row\" }, style]}>\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/remove\"\n onPress={() => handlePlusOrMinus(\"minus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === min}\n style={{ opacity: value === min ? 0.5 : 1 }}\n />\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}\n </Text>\n\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/add\"\n onPress={() => handlePlusOrMinus(\"plus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === max}\n style={{ opacity: value === max ? 0.5 : 1 }}\n />\n </View>\n );\n};\n\nexport default withTheme(Stepper);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RowHeadlineImageCaption.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","row","preview_image_url","supports_list_render","props","title","group","GROUPS","data","label","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","caption","layout","image","ASSET","subtitle"],"mappings":"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","sourcesContent":["import {\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = [\n {\n name: \"Row Single Line Headline Caption\",\n tag: \"RowHeadlineImageCaption\",\n description:\n \"A row with left aligned headline text and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_SingleLine_HeadlineCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Single Line Headline Image Caption\",\n tag: \"RowHeadlineImageCaption\",\n description:\n \"A row with left aligned image and headline text and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url:\n \"{CLOUDINARY_URL}/Row_SingleLine_HeadlineImageCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image to display\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Double Line Headline Caption\",\n tag: \"RowHeadlineImageCaption\",\n description:\n \"A row with left aligned headline text and subtitle text and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Double Line Headline Image Caption\",\n tag: \"RowHeadlineImageCaption\",\n description:\n \"A row with left aligned image, headline text, and subtitle text, and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image to display\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n];\n"]}
|
|
1
|
+
{"version":3,"sources":["RowHeadlineImageCaption.js"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","row","preview_image_url","supports_list_render","props","title","group","GROUPS","data","label","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","caption","layout","image","ASSET","subtitle"],"mappings":";;;;;;;AAAA;;AACO,MAAMA,SAAS,GAAG,CACrB;AACIC,EAAAA,IAAI,EAAE,kCADV;AAEIC,EAAAA,GAAG,EAAE,yBAFT;AAGIC,EAAAA,WAAW,EAAE,sEAHjB;AAIIC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,qDALvB;AAMIC,EAAAA,oBAAoB,EAAE,IAN1B;AAOIC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,0BAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,MAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,MAAAA,YAAY,EAAE,4BANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP,KADJ;AAWHC,IAAAA,OAAO,EAAE;AACLb,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,SAFF;AAGLX,MAAAA,WAAW,EAAE,yBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,MANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL;AAXN,GAPX;AA6BIE,EAAAA,MAAM,EAAE;AA7BZ,CADqB,EAgCrB;AACIxB,EAAAA,IAAI,EAAE,wCADV;AAEIC,EAAAA,GAAG,EAAE,yBAFT;AAGIC,EAAAA,WAAW,EAAE,gFAHjB;AAIIC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,0DALvB;AAMIC,EAAAA,oBAAoB,EAAE,IAN1B;AAOIC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,0BAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,MAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,MAAAA,YAAY,EAAE,4BANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP,KADJ;AAWHC,IAAAA,OAAO,EAAE;AACLb,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,SAFF;AAGLX,MAAAA,WAAW,EAAE,yBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,MANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL,KAXN;AAqBHG,IAAAA,KAAK,EAAE;AACHf,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,kBAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWU,KAJlB;AAKHR,MAAAA,QAAQ,EAAEC,kBAAWQ,KALlB;AAMHN,MAAAA,YAAY,EAAE,IANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP;AArBJ,GAPX;AAuCIE,EAAAA,MAAM,EAAE;AAvCZ,CAhCqB,EAyErB;AACIxB,EAAAA,IAAI,EAAE,kCADV;AAEIC,EAAAA,GAAG,EAAE,yBAFT;AAGIC,EAAAA,WAAW,EAAE,wFAHjB;AAIIC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,qDALvB;AAMIC,EAAAA,oBAAoB,EAAE,IAN1B;AAOIC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,0BAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,MAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,MAAAA,YAAY,EAAE,4BANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP,KADJ;AAWHK,IAAAA,QAAQ,EAAE;AACNjB,MAAAA,KAAK,EAAEC,cAAOC,IADR;AAENC,MAAAA,KAAK,EAAE,UAFD;AAGNX,MAAAA,WAAW,EAAE,0BAHP;AAINY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJf;AAKNC,MAAAA,QAAQ,EAAEC,kBAAWC,MALf;AAMNC,MAAAA,YAAY,EAAE,WANR;AAONC,MAAAA,QAAQ,EAAE,IAPJ;AAQNC,MAAAA,QAAQ,EAAE;AARJ,KAXP;AAqBHC,IAAAA,OAAO,EAAE;AACLb,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,SAFF;AAGLX,MAAAA,WAAW,EAAE,yBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,MANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL;AArBN,GAPX;AAuCIE,EAAAA,MAAM,EAAE;AAvCZ,CAzEqB,EAkHrB;AACIxB,EAAAA,IAAI,EAAE,wCADV;AAEIC,EAAAA,GAAG,EAAE,yBAFT;AAGIC,EAAAA,WAAW,EAAE,iGAHjB;AAIIC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,qDALvB;AAMIC,EAAAA,oBAAoB,EAAE,IAN1B;AAOIC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,0BAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,MAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,MAAAA,YAAY,EAAE,4BANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP,KADJ;AAWHK,IAAAA,QAAQ,EAAE;AACNjB,MAAAA,KAAK,EAAEC,cAAOC,IADR;AAENC,MAAAA,KAAK,EAAE,UAFD;AAGNX,MAAAA,WAAW,EAAE,0BAHP;AAINY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJf;AAKNC,MAAAA,QAAQ,EAAEC,kBAAWC,MALf;AAMNC,MAAAA,YAAY,EAAE,WANR;AAONC,MAAAA,QAAQ,EAAE,IAPJ;AAQNC,MAAAA,QAAQ,EAAE;AARJ,KAXP;AAqBHC,IAAAA,OAAO,EAAE;AACLb,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,SAFF;AAGLX,MAAAA,WAAW,EAAE,yBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,MANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL,KArBN;AA+BHG,IAAAA,KAAK,EAAE;AACHf,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,kBAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWU,KAJlB;AAKHR,MAAAA,QAAQ,EAAEC,kBAAWQ,KALlB;AAMHN,MAAAA,YAAY,EAAE,IANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP;AA/BJ,GAPX;AAiDIE,EAAAA,MAAM,EAAE;AAjDZ,CAlHqB,CAAlB","sourcesContent":["import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = [\n {\n name: \"Row Single Line Headline Caption\",\n tag: \"RowHeadlineImageCaption\",\n description: \"A row with left aligned headline text and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_SingleLine_HeadlineCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Single Line Headline Image Caption\",\n tag: \"RowHeadlineImageCaption\",\n description: \"A row with left aligned image and headline text and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_SingleLine_HeadlineImageCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image to display\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Double Line Headline Caption\",\n tag: \"RowHeadlineImageCaption\",\n description: \"A row with left aligned headline text and subtitle text and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Double Line Headline Image Caption\",\n tag: \"RowHeadlineImageCaption\",\n description: \"A row with left aligned image, headline text, and subtitle text, and right aligned caption text\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Headline 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 subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n caption: {\n group: GROUPS.data,\n label: \"Caption\",\n description: \"Caption text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"$100\",\n editable: true,\n required: false,\n },\n image: {\n group: GROUPS.data,\n label: \"Image\",\n description: \"Image to display\",\n formType: FORM_TYPES.image,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PortalHost.
|
|
1
|
+
{"version":3,"sources":["PortalHost.js"],"names":["React","View","StyleSheet","PortalManager","PortalContext","createContext","PortalHost","Component","manager","children","key","nextKey","mount","queue","push","type","update","op","index","findIndex","o","unmount","componentDidMount","length","action","pop","render","createElement","Provider","value","style","styles","container","collapsable","pointerEvents","props","ref","setManager","create","flex"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet } from \"react-native\";\nimport PortalManager from \"./PortalManager\";\nexport const PortalContext = React.createContext(null);\n/**\n * Portal host renders all of its children `Portal` elements.\n * For example, you can wrap a screen in `Portal.Host` to render items above the screen.\n * If you're using the `Provider` component, it already includes `Portal.Host`.\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Text } from 'react-native';\n * import { Portal } from 'react-native-paper';\n *\n * export default class MyComponent extends React.Component {\n * render() {\n * return (\n * <Portal.Host>\n * <Text>Content of the app</Text>\n * </Portal.Host>\n * );\n * }\n * }\n * ```\n *\n * Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.\n */\nexport default class PortalHost extends React.Component {\n static displayName = \"Portal.Host\";\n componentDidMount() {\n const manager = this.manager;\n const queue = this.queue;\n while (queue.length && manager) {\n const action = queue.pop();\n if (action) {\n switch (action.type) {\n case \"mount\":\n manager.mount(action.key, action.children);\n break;\n case \"update\":\n manager.update(action.key, action.children);\n break;\n case \"unmount\":\n manager.unmount(action.key);\n break;\n }\n }\n }\n }\n setManager = (manager) => {\n this.manager = manager;\n };\n mount = (children) => {\n const key = this.nextKey++;\n if (this.manager) {\n this.manager.mount(key, children);\n }\n else {\n this.queue.push({ type: \"mount\", key, children });\n }\n return key;\n };\n update = (key, children) => {\n if (this.manager) {\n this.manager.update(key, children);\n }\n else {\n const op = { type: \"mount\", key, children };\n const index = this.queue.findIndex((o) => o.type === \"mount\" || (o.type === \"update\" && o.key === key));\n if (index > -1) {\n // @ts-ignore\n this.queue[index] = op;\n }\n else {\n this.queue.push(op);\n }\n }\n };\n unmount = (key) => {\n if (this.manager) {\n this.manager.unmount(key);\n }\n else {\n this.queue.push({ type: \"unmount\", key });\n }\n };\n nextKey = 0;\n queue = [];\n manager;\n render() {\n return (React.createElement(PortalContext.Provider, { value: {\n mount: this.mount,\n update: this.update,\n unmount: this.unmount,\n } },\n React.createElement(View, { style: styles.container, collapsable: false, pointerEvents: \"box-none\" }, this.props.children),\n React.createElement(PortalManager, { ref: this.setManager })));\n }\n}\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"]}
|
|
@@ -1,77 +1,59 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { View, Text } from "react-native";
|
|
3
|
+
import { isNumber } from "lodash";
|
|
3
4
|
import { withTheme } from "../theming";
|
|
4
5
|
import IconButton from "./IconButton";
|
|
5
|
-
import isNumber from "lodash.isnumber";
|
|
6
6
|
|
|
7
7
|
const Stepper = _ref => {
|
|
8
8
|
let {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
min = -Infinity,
|
|
10
|
+
max = Infinity,
|
|
11
|
+
value: valueProp,
|
|
12
|
+
defaultValue,
|
|
13
13
|
style,
|
|
14
|
+
typeStyle,
|
|
15
|
+
iconSize = 24,
|
|
16
|
+
iconColor,
|
|
14
17
|
onChange,
|
|
15
|
-
defaultValue,
|
|
16
18
|
theme: {
|
|
17
19
|
colors,
|
|
18
|
-
typography
|
|
19
|
-
roundness
|
|
20
|
+
typography
|
|
20
21
|
},
|
|
21
|
-
|
|
22
|
-
iconColor = colors.strong,
|
|
23
|
-
borderRadius = roundness,
|
|
24
|
-
typeStyle
|
|
22
|
+
Icon
|
|
25
23
|
} = _ref;
|
|
26
|
-
const [
|
|
27
|
-
React.useEffect(() => {
|
|
28
|
-
if (value || value === 0) {
|
|
29
|
-
onChange && onChange(stateValue);
|
|
30
|
-
}
|
|
31
|
-
}, [onChange, stateValue, value]);
|
|
32
|
-
React.useEffect(() => {
|
|
33
|
-
let newValue = value || defaultValue || 0;
|
|
24
|
+
const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
|
|
34
25
|
|
|
35
|
-
|
|
36
|
-
newValue = max;
|
|
37
|
-
}
|
|
26
|
+
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
38
27
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
28
|
+
const handlePlusOrMinus = type => {
|
|
29
|
+
const newValue = type === "plus" ? value + 1 : value - 1;
|
|
42
30
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
if (isNumber(min) && value === min) {
|
|
47
|
-
return;
|
|
31
|
+
if (isValidValue(newValue)) {
|
|
32
|
+
setValue(newValue);
|
|
33
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
48
34
|
}
|
|
35
|
+
};
|
|
49
36
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (valueProp != null && isNumber(valueProp) && valueProp !== value && isValidValue(valueProp)) {
|
|
39
|
+
setValue(valueProp);
|
|
40
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
41
|
|
|
57
|
-
|
|
58
|
-
}, [max, stateValue, value]);
|
|
42
|
+
}, [valueProp]);
|
|
59
43
|
return /*#__PURE__*/React.createElement(View, {
|
|
60
44
|
style: [{
|
|
61
45
|
flexDirection: "row"
|
|
62
|
-
}, style
|
|
63
|
-
borderRadius
|
|
64
|
-
} : {}]
|
|
46
|
+
}, style]
|
|
65
47
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
66
48
|
Icon: Icon,
|
|
67
49
|
icon: "MaterialIcons/remove",
|
|
68
|
-
onPress:
|
|
50
|
+
onPress: () => handlePlusOrMinus("minus"),
|
|
69
51
|
size: iconSize,
|
|
70
52
|
color: iconColor,
|
|
71
|
-
disabled:
|
|
72
|
-
style:
|
|
73
|
-
opacity: 0.5
|
|
74
|
-
}
|
|
53
|
+
disabled: value === min,
|
|
54
|
+
style: {
|
|
55
|
+
opacity: value === min ? 0.5 : 1
|
|
56
|
+
}
|
|
75
57
|
}), /*#__PURE__*/React.createElement(Text, {
|
|
76
58
|
style: [typography.body1, {
|
|
77
59
|
textAlign: "center",
|
|
@@ -79,16 +61,16 @@ const Stepper = _ref => {
|
|
|
79
61
|
color: colors.medium,
|
|
80
62
|
marginHorizontal: 8
|
|
81
63
|
}, typeStyle]
|
|
82
|
-
}, value
|
|
64
|
+
}, value), /*#__PURE__*/React.createElement(IconButton, {
|
|
83
65
|
Icon: Icon,
|
|
84
66
|
icon: "MaterialIcons/add",
|
|
85
|
-
onPress:
|
|
67
|
+
onPress: () => handlePlusOrMinus("plus"),
|
|
86
68
|
size: iconSize,
|
|
87
69
|
color: iconColor,
|
|
88
|
-
disabled:
|
|
89
|
-
style:
|
|
90
|
-
opacity: 0.5
|
|
91
|
-
}
|
|
70
|
+
disabled: value === max,
|
|
71
|
+
style: {
|
|
72
|
+
opacity: value === max ? 0.5 : 1
|
|
73
|
+
}
|
|
92
74
|
}));
|
|
93
75
|
};
|
|
94
76
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Stepper.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["Stepper.tsx"],"names":["React","useEffect","useState","View","Text","isNumber","withTheme","IconButton","Stepper","min","Infinity","max","value","valueProp","defaultValue","style","typeStyle","iconSize","iconColor","onChange","theme","colors","typography","Icon","setValue","isValidValue","valueArg","handlePlusOrMinus","type","newValue","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { isNumber } from \"lodash\";\n\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport IconButton from \"./IconButton\";\n\ntype Props = {\n min: number;\n max: number;\n value?: number;\n defaultValue?: number;\n style?: StyleProp<ViewStyle>;\n typeStyle?: StyleProp<TextStyle>;\n iconSize: number;\n iconColor?: string;\n onChange?: (value: number) => void;\n theme: Theme;\n} & IconSlot;\n\nconst Stepper: FC<Props> = ({\n min = -Infinity,\n max = Infinity,\n value: valueProp,\n defaultValue,\n style,\n typeStyle,\n iconSize = 24,\n iconColor,\n onChange,\n theme: { colors, typography },\n Icon,\n}) => {\n const [value, setValue] = useState(defaultValue ?? 0);\n\n const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;\n\n const handlePlusOrMinus = (type: \"plus\" | \"minus\") => {\n const newValue = type === \"plus\" ? value + 1 : value - 1;\n\n if (isValidValue(newValue)) {\n setValue(newValue);\n onChange?.(newValue);\n }\n };\n\n useEffect(() => {\n if (\n valueProp != null &&\n isNumber(valueProp) &&\n valueProp !== value &&\n isValidValue(valueProp)\n ) {\n setValue(valueProp);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [valueProp]);\n\n return (\n <View style={[{ flexDirection: \"row\" }, style]}>\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/remove\"\n onPress={() => handlePlusOrMinus(\"minus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === min}\n style={{ opacity: value === min ? 0.5 : 1 }}\n />\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}\n </Text>\n\n <IconButton\n Icon={Icon}\n icon=\"MaterialIcons/add\"\n onPress={() => handlePlusOrMinus(\"plus\")}\n size={iconSize}\n color={iconColor}\n disabled={value === max}\n style={{ opacity: value === max ? 0.5 : 1 }}\n />\n </View>\n );\n};\n\nexport default withTheme(Stepper);\n"]}
|
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
3
3
|
import type { Theme } from "../styles/DefaultTheme";
|
|
4
4
|
import type { IconSlot } from "../interfaces/Icon";
|
|
5
5
|
declare type Props = {
|
|
6
|
+
min: number;
|
|
7
|
+
max: number;
|
|
6
8
|
value?: number;
|
|
7
|
-
min?: number;
|
|
8
|
-
max?: number;
|
|
9
|
-
theme: Theme;
|
|
10
|
-
style?: StyleProp<ViewStyle>;
|
|
11
|
-
onChange?: (value: number) => void;
|
|
12
9
|
defaultValue?: number;
|
|
13
|
-
|
|
14
|
-
iconColor?: string;
|
|
15
|
-
borderRadius?: number;
|
|
10
|
+
style?: StyleProp<ViewStyle>;
|
|
16
11
|
typeStyle?: StyleProp<TextStyle>;
|
|
12
|
+
iconSize: number;
|
|
13
|
+
iconColor?: string;
|
|
14
|
+
onChange?: (value: number) => void;
|
|
15
|
+
theme: Theme;
|
|
17
16
|
} & IconSlot;
|
|
18
17
|
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
|
|
19
18
|
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.17-ab8b1a.0+ab8b1acf",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "ab8b1acf6dbba1f8e7224cc87ac7c3c7e8a74a4d"
|
|
84
84
|
}
|
|
@@ -1,43 +1,29 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { View, Text } from "react-native";
|
|
3
|
+
import { isNumber } from "lodash";
|
|
3
4
|
import { withTheme } from "../theming";
|
|
4
5
|
import IconButton from "./IconButton";
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
|
|
7
|
+
const [value, setValue] = useState(defaultValue ?? 0);
|
|
8
|
+
const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
|
|
9
|
+
const handlePlusOrMinus = (type) => {
|
|
10
|
+
const newValue = type === "plus" ? value + 1 : value - 1;
|
|
11
|
+
if (isValidValue(newValue)) {
|
|
12
|
+
setValue(newValue);
|
|
13
|
+
onChange?.(newValue);
|
|
11
14
|
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
};
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (valueProp != null &&
|
|
18
|
+
isNumber(valueProp) &&
|
|
19
|
+
valueProp !== value &&
|
|
20
|
+
isValidValue(valueProp)) {
|
|
21
|
+
setValue(valueProp);
|
|
17
22
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}, [defaultValue, value, min, max]);
|
|
23
|
-
const handleMinus = React.useCallback(() => {
|
|
24
|
-
if (isNumber(min) && value === min) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
setStateValue(stateValue - 1);
|
|
28
|
-
}, [min, stateValue, value]);
|
|
29
|
-
const handlePlus = React.useCallback(() => {
|
|
30
|
-
if (isNumber(max) && value === max) {
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
setStateValue(stateValue + 1);
|
|
34
|
-
}, [max, stateValue, value]);
|
|
35
|
-
return (React.createElement(View, { style: [
|
|
36
|
-
{ flexDirection: "row" },
|
|
37
|
-
style,
|
|
38
|
-
borderRadius ? { borderRadius } : {},
|
|
39
|
-
] },
|
|
40
|
-
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === min, style: stateValue === min ? { opacity: 0.5 } : {} }),
|
|
23
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
24
|
+
}, [valueProp]);
|
|
25
|
+
return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
|
|
26
|
+
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
|
|
41
27
|
React.createElement(Text, { style: [
|
|
42
28
|
typography.body1,
|
|
43
29
|
{
|
|
@@ -47,7 +33,7 @@ const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme:
|
|
|
47
33
|
marginHorizontal: 8,
|
|
48
34
|
},
|
|
49
35
|
typeStyle,
|
|
50
|
-
] }, value
|
|
51
|
-
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress:
|
|
36
|
+
] }, value),
|
|
37
|
+
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
|
|
52
38
|
};
|
|
53
39
|
export default withTheme(Stepper);
|
|
@@ -1,92 +1,75 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, { FC, useEffect, useState } from "react";
|
|
2
2
|
import { View, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
|
|
3
|
+
import { isNumber } from "lodash";
|
|
4
|
+
|
|
3
5
|
import { withTheme } from "../theming";
|
|
4
6
|
import type { Theme } from "../styles/DefaultTheme";
|
|
5
7
|
import type { IconSlot } from "../interfaces/Icon";
|
|
6
|
-
|
|
7
8
|
import IconButton from "./IconButton";
|
|
8
|
-
import isNumber from "lodash.isnumber";
|
|
9
9
|
|
|
10
10
|
type Props = {
|
|
11
|
+
min: number;
|
|
12
|
+
max: number;
|
|
11
13
|
value?: number;
|
|
12
|
-
min?: number;
|
|
13
|
-
max?: number;
|
|
14
|
-
theme: Theme;
|
|
15
|
-
style?: StyleProp<ViewStyle>;
|
|
16
|
-
onChange?: (value: number) => void;
|
|
17
14
|
defaultValue?: number;
|
|
18
|
-
|
|
19
|
-
iconColor?: string;
|
|
20
|
-
borderRadius?: number;
|
|
15
|
+
style?: StyleProp<ViewStyle>;
|
|
21
16
|
typeStyle?: StyleProp<TextStyle>;
|
|
17
|
+
iconSize: number;
|
|
18
|
+
iconColor?: string;
|
|
19
|
+
onChange?: (value: number) => void;
|
|
20
|
+
theme: Theme;
|
|
22
21
|
} & IconSlot;
|
|
23
22
|
|
|
24
|
-
const Stepper:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
max,
|
|
29
|
-
style,
|
|
30
|
-
onChange,
|
|
23
|
+
const Stepper: FC<Props> = ({
|
|
24
|
+
min = -Infinity,
|
|
25
|
+
max = Infinity,
|
|
26
|
+
value: valueProp,
|
|
31
27
|
defaultValue,
|
|
32
|
-
|
|
33
|
-
iconSize = 24,
|
|
34
|
-
iconColor = colors.strong,
|
|
35
|
-
borderRadius = roundness,
|
|
28
|
+
style,
|
|
36
29
|
typeStyle,
|
|
30
|
+
iconSize = 24,
|
|
31
|
+
iconColor,
|
|
32
|
+
onChange,
|
|
33
|
+
theme: { colors, typography },
|
|
34
|
+
Icon,
|
|
37
35
|
}) => {
|
|
38
|
-
const [
|
|
39
|
-
value || defaultValue || 0
|
|
40
|
-
);
|
|
36
|
+
const [value, setValue] = useState(defaultValue ?? 0);
|
|
41
37
|
|
|
42
|
-
|
|
43
|
-
if (value || value === 0) {
|
|
44
|
-
onChange && onChange(stateValue);
|
|
45
|
-
}
|
|
46
|
-
}, [onChange, stateValue, value]);
|
|
38
|
+
const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;
|
|
47
39
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
if (isNumber(max) && newValue > max) {
|
|
51
|
-
newValue = max;
|
|
52
|
-
}
|
|
53
|
-
if (isNumber(min) && newValue < min) {
|
|
54
|
-
newValue = min;
|
|
55
|
-
}
|
|
56
|
-
setStateValue(newValue);
|
|
57
|
-
}, [defaultValue, value, min, max]);
|
|
40
|
+
const handlePlusOrMinus = (type: "plus" | "minus") => {
|
|
41
|
+
const newValue = type === "plus" ? value + 1 : value - 1;
|
|
58
42
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
43
|
+
if (isValidValue(newValue)) {
|
|
44
|
+
setValue(newValue);
|
|
45
|
+
onChange?.(newValue);
|
|
62
46
|
}
|
|
63
|
-
|
|
64
|
-
}, [min, stateValue, value]);
|
|
47
|
+
};
|
|
65
48
|
|
|
66
|
-
|
|
67
|
-
if (
|
|
68
|
-
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (
|
|
51
|
+
valueProp != null &&
|
|
52
|
+
isNumber(valueProp) &&
|
|
53
|
+
valueProp !== value &&
|
|
54
|
+
isValidValue(valueProp)
|
|
55
|
+
) {
|
|
56
|
+
setValue(valueProp);
|
|
69
57
|
}
|
|
70
|
-
|
|
71
|
-
}, [
|
|
58
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
59
|
+
}, [valueProp]);
|
|
72
60
|
|
|
73
61
|
return (
|
|
74
|
-
<View
|
|
75
|
-
style={[
|
|
76
|
-
{ flexDirection: "row" },
|
|
77
|
-
style,
|
|
78
|
-
borderRadius ? { borderRadius } : {},
|
|
79
|
-
]}
|
|
80
|
-
>
|
|
62
|
+
<View style={[{ flexDirection: "row" }, style]}>
|
|
81
63
|
<IconButton
|
|
82
64
|
Icon={Icon}
|
|
83
65
|
icon="MaterialIcons/remove"
|
|
84
|
-
onPress={
|
|
66
|
+
onPress={() => handlePlusOrMinus("minus")}
|
|
85
67
|
size={iconSize}
|
|
86
68
|
color={iconColor}
|
|
87
|
-
disabled={
|
|
88
|
-
style={
|
|
69
|
+
disabled={value === min}
|
|
70
|
+
style={{ opacity: value === min ? 0.5 : 1 }}
|
|
89
71
|
/>
|
|
72
|
+
|
|
90
73
|
<Text
|
|
91
74
|
style={[
|
|
92
75
|
typography.body1,
|
|
@@ -99,16 +82,17 @@ const Stepper: React.FC<Props> = ({
|
|
|
99
82
|
typeStyle,
|
|
100
83
|
]}
|
|
101
84
|
>
|
|
102
|
-
{value
|
|
85
|
+
{value}
|
|
103
86
|
</Text>
|
|
87
|
+
|
|
104
88
|
<IconButton
|
|
105
89
|
Icon={Icon}
|
|
106
90
|
icon="MaterialIcons/add"
|
|
107
|
-
onPress={
|
|
91
|
+
onPress={() => handlePlusOrMinus("plus")}
|
|
108
92
|
size={iconSize}
|
|
109
93
|
color={iconColor}
|
|
110
|
-
disabled={
|
|
111
|
-
style={
|
|
94
|
+
disabled={value === max}
|
|
95
|
+
style={{ opacity: value === max ? 0.5 : 1 }}
|
|
112
96
|
/>
|
|
113
97
|
</View>
|
|
114
98
|
);
|