@draftbit/core 44.2.1-e53c90.0 → 44.2.2
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/Picker/Picker.js +289 -26
- package/lib/commonjs/components/Picker/Picker.js.map +1 -1
- package/lib/commonjs/components/Surface.js +3 -13
- package/lib/commonjs/components/Surface.js.map +1 -1
- package/lib/commonjs/mappings/Picker.js +7 -1
- package/lib/commonjs/mappings/Picker.js.map +1 -1
- package/lib/commonjs/mappings/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/utilities.js +19 -0
- package/lib/commonjs/utilities.js.map +1 -1
- package/lib/module/components/Checkbox/context.js +1 -1
- package/lib/module/components/Checkbox/context.js.map +1 -1
- package/lib/module/components/CircleImage.js +3 -16
- package/lib/module/components/CircleImage.js.map +1 -1
- package/lib/module/components/Picker/Picker.js +281 -28
- package/lib/module/components/Picker/Picker.js.map +1 -1
- package/lib/module/mappings/Picker.js +8 -2
- package/lib/module/mappings/Picker.js.map +1 -1
- package/lib/module/utilities.js +12 -1
- package/lib/module/utilities.js.map +1 -1
- package/lib/typescript/src/components/Picker/Picker.d.ts +28 -4
- package/lib/typescript/src/mappings/Picker.d.ts +21 -0
- package/lib/typescript/src/utilities.d.ts +7 -0
- package/package.json +3 -3
- package/src/components/Picker/Picker.js +227 -17
- package/src/components/Picker/Picker.tsx +416 -34
- package/src/mappings/Picker.js +3 -1
- package/src/mappings/Picker.ts +4 -0
- package/src/utilities.js +49 -1
- package/src/utilities.ts +65 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["context.
|
|
1
|
+
{"version":3,"sources":["context.ts"],"names":["createContext","useContext","Direction","checkboxGroupContext","onValueChange","values","direction","undefined","useCheckboxGroupContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAEA,WAAYC,SAAZ;;WAAYA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,KAAAA,S;;AAWZ,OAAO,MAAMC,oBAAoB,gBAAGH,aAAa,CAAuB;AACtEI,EAAAA,aAAa,EAAE,MAAM,CAAE,CAD+C;AAEtEC,EAAAA,MAAM,EAAE,EAF8D;AAGtEC,EAAAA,SAAS,EAAEC;AAH2D,CAAvB,CAA1C;AAMP,OAAO,SAASC,uBAAT,GAAmC;AACxC,SAAOP,UAAU,CAACE,oBAAD,CAAjB;AACD","sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport enum Direction {\n Horizontal = \"horizontal\",\n Vertical = \"vertical\",\n}\n\ninterface CheckboxGroupContext {\n onValueChange: (value: string, selected: boolean) => void;\n values: string[];\n direction?: Direction;\n}\n\nexport const checkboxGroupContext = createContext<CheckboxGroupContext>({\n onValueChange: () => {},\n values: [],\n direction: undefined,\n});\n\nexport function useCheckboxGroupContext() {\n return useContext(checkboxGroupContext);\n}\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 * as React from "react";
|
|
2
4
|
import { Image } from "react-native";
|
|
3
5
|
import Config from "./Config";
|
|
@@ -10,22 +12,7 @@ const CircleImage = _ref => {
|
|
|
10
12
|
...props
|
|
11
13
|
} = _ref;
|
|
12
14
|
const borderRadius = size / 2;
|
|
13
|
-
return /*#__PURE__*/React.createElement(Image, {
|
|
14
|
-
style: [{
|
|
15
|
-
width: size,
|
|
16
|
-
height: size,
|
|
17
|
-
borderRadius
|
|
18
|
-
}, style],
|
|
19
|
-
source: typeof source === "string" ? {
|
|
20
|
-
uri: source
|
|
21
|
-
} : source,
|
|
22
|
-
resizeMode: "cover",
|
|
23
|
-
...props
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export default CircleImage;
|
|
28
|
-
//# sourceMappingURL=CircleImage.js.map#__PURE__*/React.createElement(Image, _extends({
|
|
15
|
+
return /*#__PURE__*/React.createElement(Image, _extends({
|
|
29
16
|
style: [{
|
|
30
17
|
width: size,
|
|
31
18
|
height: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CircleImage.
|
|
1
|
+
{"version":3,"sources":["CircleImage.tsx"],"names":["React","Image","Config","CircleImage","source","placeholderImageURL","size","style","props","borderRadius","width","height","uri"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,KADF,QAKO,cALP;AAMA,OAAOC,MAAP,MAAmB,UAAnB;;AAOA,MAAMC,WAA4B,GAAG,QAK/B;AAAA,MALgC;AACpCC,IAAAA,MAAM,GAAGF,MAAM,CAACG,mBADoB;AAEpCC,IAAAA,IAAI,GAAG,EAF6B;AAGpCC,IAAAA,KAHoC;AAIpC,OAAGC;AAJiC,GAKhC;AACJ,QAAMC,YAAY,GAAGH,IAAI,GAAG,CAA5B;AAEA,sBACE,oBAAC,KAAD;AACE,IAAA,KAAK,EAAE,CAAC;AAAEI,MAAAA,KAAK,EAAEJ,IAAT;AAAeK,MAAAA,MAAM,EAAEL,IAAvB;AAA6BG,MAAAA;AAA7B,KAAD,EAA8CF,KAA9C,CADT;AAEE,IAAA,MAAM,EAAE,OAAOH,MAAP,KAAkB,QAAlB,GAA6B;AAAEQ,MAAAA,GAAG,EAAER;AAAP,KAA7B,GAA+CA,MAFzD;AAGE,IAAA,UAAU,EAAC;AAHb,KAIMI,KAJN,EADF;AAQD,CAhBD;;AAkBA,eAAeL,WAAf","sourcesContent":["import * as React from \"react\";\nimport {\n Image,\n ImageSourcePropType,\n StyleProp,\n ImageStyle,\n} from \"react-native\";\nimport Config from \"./Config\";\ninterface Props {\n source?: string | ImageSourcePropType;\n size?: number;\n style?: StyleProp<ImageStyle>;\n}\n\nconst CircleImage: React.FC<Props> = ({\n source = Config.placeholderImageURL,\n size = 60,\n style,\n ...props\n}) => {\n const borderRadius = size / 2;\n\n return (\n <Image\n style={[{ width: size, height: size, borderRadius }, style]}\n source={typeof source === \"string\" ? { uri: source } : source}\n resizeMode=\"cover\"\n {...props}\n />\n );\n};\n\nexport default CircleImage;\n"]}
|
|
@@ -1,26 +1,30 @@
|
|
|
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
|
-
|
|
3
1
|
import * as React from "react";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
import
|
|
2
|
+
import { View, StyleSheet, Text, Platform, Dimensions } from "react-native";
|
|
3
|
+
import { omit, pickBy, identity, isObject } from "lodash";
|
|
4
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
5
|
+
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
6
|
+
import { withTheme } from "../../theming";
|
|
7
|
+
import Portal from "../Portal/Portal";
|
|
8
|
+
import Button from "../DeprecatedButton";
|
|
9
|
+
import Touchable from "../Touchable";
|
|
10
|
+
import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames } from "../../utilities";
|
|
7
11
|
|
|
8
12
|
function normalizeOptions(options) {
|
|
9
13
|
if (options.length === 0) {
|
|
10
14
|
return [];
|
|
11
15
|
}
|
|
12
16
|
|
|
13
|
-
if (typeof options[0] === "string") {
|
|
17
|
+
if (typeof options[0] === ("string" || "number")) {
|
|
14
18
|
return options.map(option => ({
|
|
15
|
-
label: option,
|
|
19
|
+
label: String(option),
|
|
16
20
|
value: String(option)
|
|
17
21
|
}));
|
|
18
22
|
}
|
|
19
23
|
|
|
20
|
-
if (options[0].
|
|
24
|
+
if (isObject(options[0]) && options[0].value !== null && options[0].label !== null) {
|
|
21
25
|
return options.map(option => {
|
|
22
26
|
return {
|
|
23
|
-
label: option.label,
|
|
27
|
+
label: String(option.label),
|
|
24
28
|
value: String(option.value)
|
|
25
29
|
};
|
|
26
30
|
});
|
|
@@ -29,16 +33,47 @@ function normalizeOptions(options) {
|
|
|
29
33
|
throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
|
|
30
34
|
}
|
|
31
35
|
|
|
36
|
+
const {
|
|
37
|
+
width: deviceWidth,
|
|
38
|
+
height: deviceHeight
|
|
39
|
+
} = Dimensions.get("screen");
|
|
40
|
+
const isIos = Platform.OS === "ios";
|
|
41
|
+
const unstyledColor = "rgba(165, 173, 183, 1)";
|
|
42
|
+
const disabledColor = "rgb(240, 240, 240)";
|
|
43
|
+
const errorColor = "rgba(255, 69, 100, 1)";
|
|
44
|
+
|
|
32
45
|
const Picker = _ref => {
|
|
46
|
+
var _find$label, _find;
|
|
47
|
+
|
|
33
48
|
let {
|
|
49
|
+
error,
|
|
34
50
|
options = [],
|
|
51
|
+
onValueChange,
|
|
52
|
+
defaultValue,
|
|
53
|
+
Icon,
|
|
54
|
+
style,
|
|
35
55
|
placeholder,
|
|
36
|
-
onValueChange: onValueChangeOverride,
|
|
37
56
|
value,
|
|
38
|
-
|
|
39
|
-
|
|
57
|
+
disabled = false,
|
|
58
|
+
theme,
|
|
59
|
+
assistiveText,
|
|
60
|
+
label,
|
|
61
|
+
iconColor = unstyledColor,
|
|
62
|
+
iconSize = 24,
|
|
63
|
+
leftIconMode = "inset",
|
|
64
|
+
leftIconName,
|
|
65
|
+
placeholderTextColor = unstyledColor,
|
|
66
|
+
rightIconName,
|
|
67
|
+
type = "solid"
|
|
40
68
|
} = _ref;
|
|
69
|
+
const androidPickerRef = React.useRef(undefined);
|
|
41
70
|
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
71
|
+
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
72
|
+
|
|
73
|
+
const togglePickerVisible = () => {
|
|
74
|
+
setPickerVisible(!pickerVisible);
|
|
75
|
+
};
|
|
76
|
+
|
|
42
77
|
React.useEffect(() => {
|
|
43
78
|
if (value != null) {
|
|
44
79
|
setInternalValue(value);
|
|
@@ -49,34 +84,252 @@ const Picker = _ref => {
|
|
|
49
84
|
setInternalValue(defaultValue);
|
|
50
85
|
}
|
|
51
86
|
}, [defaultValue]);
|
|
52
|
-
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
}
|
|
87
|
+
React.useEffect(() => {
|
|
88
|
+
if (pickerVisible && androidPickerRef.current) {
|
|
89
|
+
var _androidPickerRef$cur;
|
|
56
90
|
|
|
57
|
-
|
|
58
|
-
|
|
91
|
+
androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
|
|
92
|
+
}
|
|
93
|
+
}, [pickerVisible, androidPickerRef]);
|
|
59
94
|
const normalizedOptions = normalizeOptions(options);
|
|
60
95
|
const pickerOptions = placeholder ? [{
|
|
61
96
|
value: placeholder,
|
|
62
97
|
label: placeholder
|
|
63
98
|
}, ...normalizedOptions] : normalizedOptions;
|
|
99
|
+
const {
|
|
100
|
+
colors
|
|
101
|
+
} = theme;
|
|
102
|
+
const {
|
|
103
|
+
viewStyles,
|
|
104
|
+
textStyles
|
|
105
|
+
} = extractStyles(style);
|
|
106
|
+
const additionalBorderStyles = ["backgroundColor"];
|
|
107
|
+
const additionalMarginStyles = ["bottom", "height", "left", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "position", "right", "top", "width", "zIndex"];
|
|
108
|
+
const {
|
|
109
|
+
borderStyles: extractedBorderStyles,
|
|
110
|
+
marginStyles: extractedMarginStyles
|
|
111
|
+
} = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
|
|
112
|
+
const borderStyles = { ...{ ...(type === "solid" ? {
|
|
113
|
+
borderTopLeftRadius: 5,
|
|
114
|
+
borderTopRightRadius: 5,
|
|
115
|
+
borderBottomRightRadius: 5,
|
|
116
|
+
borderBottomLeftRadius: 5,
|
|
117
|
+
borderTopWidth: 1,
|
|
118
|
+
borderRightWidth: 1,
|
|
119
|
+
borderLeftWidth: 1
|
|
120
|
+
} : {}),
|
|
121
|
+
borderBottomWidth: 1,
|
|
122
|
+
borderColor: unstyledColor,
|
|
123
|
+
borderStyle: "solid"
|
|
124
|
+
},
|
|
125
|
+
...extractedBorderStyles,
|
|
126
|
+
...(error ? {
|
|
127
|
+
borderColor: errorColor
|
|
128
|
+
} : {}),
|
|
129
|
+
...(disabled ? {
|
|
130
|
+
borderColor: "transparent",
|
|
131
|
+
backgroundColor: disabledColor
|
|
132
|
+
} : {})
|
|
133
|
+
};
|
|
134
|
+
const marginStyles = {
|
|
135
|
+
height: 60,
|
|
136
|
+
...extractedMarginStyles
|
|
137
|
+
};
|
|
138
|
+
const stylesWithoutBordersAndMargins = omit(viewStyles, [...borderStyleNames, ...marginStyleNames, ...additionalBorderStyles, ...additionalMarginStyles]);
|
|
139
|
+
const selectedLabel = internalValue && ((_find$label = (_find = pickerOptions.find(option => option.value === internalValue)) === null || _find === void 0 ? void 0 : _find.label) !== null && _find$label !== void 0 ? _find$label : internalValue);
|
|
140
|
+
const labelText = label ? /*#__PURE__*/React.createElement(Text, {
|
|
141
|
+
style: {
|
|
142
|
+
textAlign: textStyles.textAlign,
|
|
143
|
+
color: unstyledColor,
|
|
144
|
+
fontSize: 12,
|
|
145
|
+
paddingBottom: 4
|
|
146
|
+
}
|
|
147
|
+
}, label) : null;
|
|
148
|
+
const leftIconOutset = leftIconMode === "outset";
|
|
149
|
+
const leftIcon = leftIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
150
|
+
name: leftIconName,
|
|
151
|
+
color: disabled ? unstyledColor : iconColor,
|
|
152
|
+
size: iconSize,
|
|
153
|
+
style: {
|
|
154
|
+
marginRight: 4,
|
|
155
|
+
marginLeft: 4
|
|
156
|
+
}
|
|
157
|
+
}) : null;
|
|
158
|
+
const rightIcon = rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
159
|
+
name: rightIconName,
|
|
160
|
+
color: disabled ? unstyledColor : iconColor,
|
|
161
|
+
size: iconSize,
|
|
162
|
+
style: {
|
|
163
|
+
marginRight: -10,
|
|
164
|
+
marginLeft: 8
|
|
165
|
+
}
|
|
166
|
+
}) : null;
|
|
167
|
+
const textAlign = textStyles === null || textStyles === void 0 ? void 0 : textStyles.textAlign;
|
|
64
168
|
|
|
65
|
-
const
|
|
66
|
-
|
|
169
|
+
const calculateLeftPadding = () => {
|
|
170
|
+
if (leftIconOutset) {
|
|
171
|
+
if (textAlign === "center") {
|
|
172
|
+
return iconSize - Math.abs(8 - iconSize);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
return iconSize + 8;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
return 0;
|
|
179
|
+
};
|
|
67
180
|
|
|
68
|
-
|
|
69
|
-
|
|
181
|
+
const assistiveTextLabel = assistiveText ? /*#__PURE__*/React.createElement(Text, {
|
|
182
|
+
style: {
|
|
183
|
+
textAlign,
|
|
184
|
+
width: "100%",
|
|
185
|
+
paddingLeft: calculateLeftPadding(),
|
|
186
|
+
color: unstyledColor,
|
|
187
|
+
fontSize: 12,
|
|
188
|
+
paddingTop: 4
|
|
70
189
|
}
|
|
190
|
+
}, assistiveText) : null;
|
|
191
|
+
const primaryTextStyle = {
|
|
192
|
+
color: unstyledColor,
|
|
193
|
+
fontSize: 14,
|
|
194
|
+
...pickBy(textStyles, identity),
|
|
195
|
+
...(placeholder === internalValue ? {
|
|
196
|
+
color: placeholderTextColor
|
|
197
|
+
} : {}),
|
|
198
|
+
...(disabled ? {
|
|
199
|
+
color: unstyledColor
|
|
200
|
+
} : {})
|
|
71
201
|
};
|
|
72
202
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
203
|
+
const handleValueChange = (newValue, itemIndex) => {
|
|
204
|
+
if (!placeholder || itemIndex > 0) {
|
|
205
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
setInternalValue(newValue);
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
return (
|
|
212
|
+
/*#__PURE__*/
|
|
213
|
+
|
|
214
|
+
/* marginsContainer */
|
|
215
|
+
React.createElement(View, {
|
|
216
|
+
style: [styles.marginsContainer, marginStyles]
|
|
217
|
+
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
218
|
+
disabled: disabled,
|
|
219
|
+
onPress: togglePickerVisible,
|
|
220
|
+
style: styles.touchableContainer
|
|
221
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
222
|
+
pointerEvents: "none",
|
|
223
|
+
style: [styles.outsetContainer, stylesWithoutBordersAndMargins, !leftIconOutset ? borderStyles : {}]
|
|
224
|
+
}, leftIcon, /*#__PURE__*/React.createElement(View, {
|
|
225
|
+
style: [styles.insetContainer, leftIconOutset ? borderStyles : {}]
|
|
226
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
227
|
+
style: styles.primaryTextContainer
|
|
228
|
+
}, labelText, /*#__PURE__*/React.createElement(Text, {
|
|
229
|
+
style: primaryTextStyle
|
|
230
|
+
}, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
|
|
231
|
+
style: [styles.iosPicker, {
|
|
232
|
+
backgroundColor: colors.divider
|
|
233
|
+
}]
|
|
234
|
+
}, /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
235
|
+
style: styles.iosSafeArea
|
|
236
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
237
|
+
Icon: Icon,
|
|
238
|
+
type: "text",
|
|
239
|
+
onPress: togglePickerVisible,
|
|
240
|
+
style: styles.iosButton
|
|
241
|
+
}, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
|
|
242
|
+
style: styles.iosNativePicker,
|
|
243
|
+
selectedValue: internalValue,
|
|
244
|
+
onValueChange: handleValueChange
|
|
245
|
+
}, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
|
|
246
|
+
label: option.label,
|
|
247
|
+
value: option.value,
|
|
248
|
+
key: option.value
|
|
249
|
+
})))))) : null, !isIos && pickerVisible ? /*#__PURE__*/React.createElement(NativePicker, {
|
|
250
|
+
enabled: pickerVisible,
|
|
251
|
+
selectedValue: internalValue,
|
|
252
|
+
onValueChange: handleValueChange,
|
|
253
|
+
style: styles.nonIosPicker,
|
|
254
|
+
ref: androidPickerRef,
|
|
255
|
+
onBlur: () => setPickerVisible(false)
|
|
256
|
+
}, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
|
|
257
|
+
label: option.label,
|
|
258
|
+
value: option.value,
|
|
259
|
+
key: option.value
|
|
260
|
+
}))) : null)
|
|
261
|
+
);
|
|
79
262
|
};
|
|
80
263
|
|
|
81
264
|
export default withTheme(Picker);
|
|
265
|
+
const styles = StyleSheet.create({
|
|
266
|
+
marginsContainer: {
|
|
267
|
+
alignSelf: "stretch",
|
|
268
|
+
alignItems: "center",
|
|
269
|
+
width: "100%",
|
|
270
|
+
maxWidth: deviceWidth
|
|
271
|
+
},
|
|
272
|
+
touchableContainer: {
|
|
273
|
+
flex: 1,
|
|
274
|
+
height: "100%",
|
|
275
|
+
width: "100%",
|
|
276
|
+
alignSelf: "stretch",
|
|
277
|
+
alignItems: "center"
|
|
278
|
+
},
|
|
279
|
+
outsetContainer: {
|
|
280
|
+
flex: 1,
|
|
281
|
+
height: "100%",
|
|
282
|
+
width: "100%",
|
|
283
|
+
flexDirection: "row",
|
|
284
|
+
alignItems: "center",
|
|
285
|
+
justifyContent: "space-between"
|
|
286
|
+
},
|
|
287
|
+
insetContainer: {
|
|
288
|
+
flex: 1,
|
|
289
|
+
height: "100%",
|
|
290
|
+
width: "100%",
|
|
291
|
+
flexDirection: "row",
|
|
292
|
+
alignItems: "center",
|
|
293
|
+
justifyContent: "space-between",
|
|
294
|
+
paddingLeft: 12,
|
|
295
|
+
paddingRight: 12
|
|
296
|
+
},
|
|
297
|
+
primaryTextContainer: {
|
|
298
|
+
flex: 1
|
|
299
|
+
},
|
|
300
|
+
iosPicker: {
|
|
301
|
+
position: "absolute",
|
|
302
|
+
bottom: 0,
|
|
303
|
+
left: 0,
|
|
304
|
+
right: 0,
|
|
305
|
+
flexDirection: "row",
|
|
306
|
+
justifyContent: "center",
|
|
307
|
+
width: "100%",
|
|
308
|
+
maxWidth: deviceWidth,
|
|
309
|
+
maxHeight: deviceHeight
|
|
310
|
+
},
|
|
311
|
+
iosSafeArea: {
|
|
312
|
+
backgroundColor: "white",
|
|
313
|
+
flexDirection: "column",
|
|
314
|
+
width: "100%",
|
|
315
|
+
maxWidth: deviceWidth
|
|
316
|
+
},
|
|
317
|
+
iosButton: {
|
|
318
|
+
alignSelf: "flex-end"
|
|
319
|
+
},
|
|
320
|
+
iosNativePicker: {
|
|
321
|
+
backgroundColor: "white"
|
|
322
|
+
},
|
|
323
|
+
nonIosPicker: {
|
|
324
|
+
opacity: 0,
|
|
325
|
+
position: "absolute",
|
|
326
|
+
top: 0,
|
|
327
|
+
left: 0,
|
|
328
|
+
right: 0,
|
|
329
|
+
bottom: 0,
|
|
330
|
+
width: "100%",
|
|
331
|
+
maxWidth: deviceWidth,
|
|
332
|
+
maxHeight: deviceHeight
|
|
333
|
+
}
|
|
334
|
+
});
|
|
82
335
|
//# sourceMappingURL=Picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Picker.tsx"],"names":["React","withTheme","PickerComponent","normalizeOptions","options","length","map","option","label","value","String","Error","Picker","placeholder","onValueChange","onValueChangeOverride","defaultValue","props","internalValue","setInternalValue","useState","useEffect","useCallback","itemValue","itemIndex","normalizedOptions","pickerOptions","handleValueChange","newValue"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,eAA1B,C,CACA;;AACA,OAAOC,eAAP,MAA4B,mBAA5B,C,CAAiD;;AASjD,SAASC,gBAAT,CAA0BC,OAA1B,EAAqE;AACnE,MAAIA,OAAO,CAACC,MAAR,KAAmB,CAAvB,EAA0B;AACxB,WAAO,EAAP;AACD;;AAED,MAAI,OAAOD,OAAO,CAAC,CAAD,CAAd,KAAsB,QAA1B,EAAoC;AAClC,WAAQA,OAAD,CAAsBE,GAAtB,CAA2BC,MAAD,KAAa;AAC5CC,MAAAA,KAAK,EAAED,MADqC;AAE5CE,MAAAA,KAAK,EAAEC,MAAM,CAACH,MAAD;AAF+B,KAAb,CAA1B,CAAP;AAID;;AAED,MAAIH,OAAO,CAAC,CAAD,CAAP,CAAWI,KAAX,IAAoBJ,OAAO,CAAC,CAAD,CAAP,CAAWK,KAAnC,EAA0C;AACxC,WAAOL,OAAO,CAACE,GAAR,CAAaC,MAAD,IAAY;AAC7B,aAAO;AACLC,QAAAA,KAAK,EAAED,MAAM,CAACC,KADT;AAELC,QAAAA,KAAK,EAAEC,MAAM,CAACH,MAAM,CAACE,KAAR;AAFR,OAAP;AAID,KALM,CAAP;AAMD;;AAED,QAAM,IAAIE,KAAJ,CACJ,8GADI,CAAN;AAGD;;AAED,MAAMC,MAAuB,GAAG,QAO1B;AAAA,MAP2B;AAC/BR,IAAAA,OAAO,GAAG,EADqB;AAE/BS,IAAAA,WAF+B;AAG/BC,IAAAA,aAAa,EAAEC,qBAHgB;AAI/BN,IAAAA,KAJ+B;AAK/BO,IAAAA,YAL+B;AAM/B,OAAGC;AAN4B,GAO3B;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCnB,KAAK,CAACoB,QAAN,CACxCX,KAAK,IAAIO,YAD+B,CAA1C;AAIAhB,EAAAA,KAAK,CAACqB,SAAN,CAAgB,MAAM;AACpB,QAAIZ,KAAK,IAAI,IAAb,EAAmB;AACjBU,MAAAA,gBAAgB,CAACV,KAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,KAAD,CAJH;AAMAT,EAAAA,KAAK,CAACqB,SAAN,CAAgB,MAAM;AACpB,QAAIL,YAAY,IAAI,IAApB,EAA0B;AACxBG,MAAAA,gBAAgB,CAACH,YAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,YAAD,CAJH;AAMA,QAAMF,aAAa,GAAGd,KAAK,CAACsB,WAAN,CACpB,CAACC,SAAD,EAAoBC,SAApB,KAA0C;AACxC,QAAIX,WAAW,IAAIW,SAAS,KAAK,CAAjC,EAAoC;AAClC;AACD;;AACDT,IAAAA,qBAAqB,IACnBA,qBAAqB,CAACL,MAAM,CAACa,SAAD,CAAP,EAAoBC,SAApB,CADvB;AAED,GAPmB,EAQpB,CAACX,WAAD,EAAcE,qBAAd,CARoB,CAAtB;AAWA,QAAMU,iBAAiB,GAAGtB,gBAAgB,CAACC,OAAD,CAA1C;AAEA,QAAMsB,aAAa,GAAGb,WAAW,GAC7B,CAAC;AAAEJ,IAAAA,KAAK,EAAEI,WAAT;AAAsBL,IAAAA,KAAK,EAAEK;AAA7B,GAAD,EAA6C,GAAGY,iBAAhD,CAD6B,GAE7BA,iBAFJ;;AAIA,QAAME,iBAAiB,GAAG,CAACC,QAAD,EAAmBJ,SAAnB,KAAyC;AACjEL,IAAAA,gBAAgB,CAACS,QAAD,CAAhB;;AACA,QAAId,aAAJ,EAAmB;AACjBA,MAAAA,aAAa,CAACc,QAAD,EAAWJ,SAAX,CAAb;AACD;AACF,GALD;;AAOA,sBACE,oBAAC,eAAD,eACMP,KADN;AAEE,IAAA,aAAa,EAAEP,MAAM,CAACQ,aAAD,CAFvB;AAGE,IAAA,WAAW,EAAEL,WAHf;AAIE,IAAA,OAAO,EAAEa,aAJX;AAKE,IAAA,aAAa,EAAEC;AALjB,KADF;AASD,CAzDD;;AA2DA,eAAe1B,SAAS,CAACW,MAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../../theming\";\n//@ts-ignore\nimport PickerComponent from \"./PickerComponent\"; //unable to find file due to using .android/.web/.ios\nimport { PickerComponentProps, PickerOption } from \"./PickerTypes\";\n\ntype Props = PickerComponentProps & {\n placeholder?: string;\n value?: string;\n options: PickerOption[] | string[];\n};\n\nfunction normalizeOptions(options: Props[\"options\"]): PickerOption[] {\n if (options.length === 0) {\n return [];\n }\n\n if (typeof options[0] === \"string\") {\n return (options as string[]).map((option) => ({\n label: option,\n value: String(option),\n }));\n }\n\n if (options[0].label && options[0].value) {\n return options.map((option) => {\n return {\n label: option.label,\n value: String(option.value),\n };\n });\n }\n\n throw new Error(\n 'Picker options must be either an array of strings or array of { \"label\": string; \"value\": string; } objects.'\n );\n}\n\nconst Picker: React.FC<Props> = ({\n options = [],\n placeholder,\n onValueChange: onValueChangeOverride,\n value,\n defaultValue,\n ...props\n}) => {\n const [internalValue, setInternalValue] = React.useState<string | undefined>(\n value || defaultValue\n );\n\n React.useEffect(() => {\n if (value != null) {\n setInternalValue(value);\n }\n }, [value]);\n\n React.useEffect(() => {\n if (defaultValue != null) {\n setInternalValue(defaultValue);\n }\n }, [defaultValue]);\n\n const onValueChange = React.useCallback(\n (itemValue: string, itemIndex: number) => {\n if (placeholder && itemIndex === 0) {\n return;\n }\n onValueChangeOverride &&\n onValueChangeOverride(String(itemValue), itemIndex);\n },\n [placeholder, onValueChangeOverride]\n );\n\n const normalizedOptions = normalizeOptions(options);\n\n const pickerOptions = placeholder\n ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]\n : normalizedOptions;\n\n const handleValueChange = (newValue: string, itemIndex: number) => {\n setInternalValue(newValue);\n if (onValueChange) {\n onValueChange(newValue, itemIndex);\n }\n };\n\n return (\n <PickerComponent\n {...props}\n selectedValue={String(internalValue)}\n placeholder={placeholder}\n options={pickerOptions}\n onValueChange={handleValueChange}\n />\n );\n};\n\nexport default withTheme(Picker);\n"]}
|
|
1
|
+
{"version":3,"sources":["Picker.tsx"],"names":["React","View","StyleSheet","Text","Platform","Dimensions","omit","pickBy","identity","isObject","SafeAreaView","Picker","NativePicker","withTheme","Portal","Button","Touchable","extractStyles","extractBorderAndMarginStyles","borderStyleNames","marginStyleNames","normalizeOptions","options","length","map","option","label","String","value","Error","width","deviceWidth","height","deviceHeight","get","isIos","OS","unstyledColor","disabledColor","errorColor","error","onValueChange","defaultValue","Icon","style","placeholder","disabled","theme","assistiveText","iconColor","iconSize","leftIconMode","leftIconName","placeholderTextColor","rightIconName","type","androidPickerRef","useRef","undefined","internalValue","setInternalValue","useState","pickerVisible","setPickerVisible","togglePickerVisible","useEffect","current","focus","normalizedOptions","pickerOptions","colors","viewStyles","textStyles","additionalBorderStyles","additionalMarginStyles","borderStyles","extractedBorderStyles","marginStyles","extractedMarginStyles","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","borderTopWidth","borderRightWidth","borderLeftWidth","borderBottomWidth","borderColor","borderStyle","backgroundColor","stylesWithoutBordersAndMargins","selectedLabel","find","labelText","textAlign","color","fontSize","paddingBottom","leftIconOutset","leftIcon","marginRight","marginLeft","rightIcon","calculateLeftPadding","Math","abs","assistiveTextLabel","paddingLeft","paddingTop","primaryTextStyle","handleValueChange","newValue","itemIndex","styles","marginsContainer","touchableContainer","outsetContainer","insetContainer","primaryTextContainer","iosPicker","divider","iosSafeArea","iosButton","iosNativePicker","nonIosPicker","create","alignSelf","alignItems","maxWidth","flex","flexDirection","justifyContent","paddingRight","position","bottom","left","right","maxHeight","opacity","top"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n View,\n StyleSheet,\n Text,\n Platform,\n ViewStyle,\n StyleProp,\n Dimensions,\n} from \"react-native\";\nimport { omit, pickBy, identity, isObject } from \"lodash\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport { withTheme } from \"../../theming\";\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport Touchable from \"../Touchable\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport {\n extractStyles,\n extractBorderAndMarginStyles,\n borderStyleNames,\n marginStyleNames,\n} from \"../../utilities\";\n\nexport interface PickerOption {\n value: string;\n label: string;\n}\n\nexport type PickerProps = {\n error?: any;\n placeholder?: string;\n disabled?: boolean;\n style?: StyleProp<ViewStyle> & { height?: number };\n value?: string;\n options: PickerOption[] | string[];\n onValueChange: (value: string, index: number) => void;\n defaultValue?: string;\n assistiveText?: string;\n label?: string;\n iconColor?: string;\n iconSize?: number;\n leftIconMode?: \"inset\" | \"outset\";\n leftIconName?: string;\n placeholderTextColor?: string;\n rightIconName?: string;\n type?: \"solid\" | \"underline\";\n theme: Theme;\n Icon: IconSlot[\"Icon\"];\n};\n\nfunction normalizeOptions(options: PickerProps[\"options\"]): PickerOption[] {\n if (options.length === 0) {\n return [];\n }\n\n if (typeof options[0] === (\"string\" || \"number\")) {\n return (options as string[]).map((option) => ({\n label: String(option),\n value: String(option),\n }));\n }\n\n if (\n isObject(options[0]) &&\n options[0].value !== null &&\n options[0].label !== null\n ) {\n return (options as PickerOption[]).map((option) => {\n return {\n label: String(option.label),\n value: String(option.value),\n };\n });\n }\n\n throw new Error(\n 'Picker options must be either an array of strings or array of { \"label\": string; \"value\": string; } objects.'\n );\n}\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\nconst isIos = Platform.OS === \"ios\";\nconst unstyledColor = \"rgba(165, 173, 183, 1)\";\nconst disabledColor = \"rgb(240, 240, 240)\";\nconst errorColor = \"rgba(255, 69, 100, 1)\";\n\nconst Picker: React.FC<PickerProps> = ({\n error,\n options = [],\n onValueChange,\n defaultValue,\n Icon,\n style,\n placeholder,\n value,\n disabled = false,\n theme,\n assistiveText,\n label,\n iconColor = unstyledColor,\n iconSize = 24,\n leftIconMode = \"inset\",\n leftIconName,\n placeholderTextColor = unstyledColor,\n rightIconName,\n type = \"solid\",\n}) => {\n const androidPickerRef = React.useRef<any | undefined>(undefined);\n\n const [internalValue, setInternalValue] = React.useState<string | undefined>(\n value || defaultValue\n );\n\n const [pickerVisible, setPickerVisible] = React.useState(false);\n\n const togglePickerVisible = () => {\n setPickerVisible(!pickerVisible);\n };\n\n React.useEffect(() => {\n if (value != null) {\n setInternalValue(value);\n }\n }, [value]);\n\n React.useEffect(() => {\n if (defaultValue != null) {\n setInternalValue(defaultValue);\n }\n }, [defaultValue]);\n\n React.useEffect(() => {\n if (pickerVisible && androidPickerRef.current) {\n androidPickerRef?.current?.focus();\n }\n }, [pickerVisible, androidPickerRef]);\n\n const normalizedOptions = normalizeOptions(options);\n\n const pickerOptions = placeholder\n ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]\n : normalizedOptions;\n\n const { colors } = theme;\n\n const { viewStyles, textStyles } = extractStyles(style);\n\n const additionalBorderStyles = [\"backgroundColor\"];\n\n const additionalMarginStyles = [\n \"bottom\",\n \"height\",\n \"left\",\n \"maxHeight\",\n \"maxWidth\",\n \"minHeight\",\n \"minWidth\",\n \"overflow\",\n \"position\",\n \"right\",\n \"top\",\n \"width\",\n \"zIndex\",\n ];\n\n const {\n borderStyles: extractedBorderStyles,\n marginStyles: extractedMarginStyles,\n } = extractBorderAndMarginStyles(\n viewStyles,\n additionalBorderStyles,\n additionalMarginStyles\n );\n\n const borderStyles = {\n ...{\n ...(type === \"solid\"\n ? {\n borderTopLeftRadius: 5,\n borderTopRightRadius: 5,\n borderBottomRightRadius: 5,\n borderBottomLeftRadius: 5,\n borderTopWidth: 1,\n borderRightWidth: 1,\n borderLeftWidth: 1,\n }\n : {}),\n borderBottomWidth: 1,\n borderColor: unstyledColor,\n borderStyle: \"solid\",\n },\n ...extractedBorderStyles,\n ...(error ? { borderColor: errorColor } : {}),\n ...(disabled\n ? { borderColor: \"transparent\", backgroundColor: disabledColor }\n : {}),\n };\n\n const marginStyles = {\n height: 60,\n ...extractedMarginStyles,\n };\n\n const stylesWithoutBordersAndMargins = omit(viewStyles, [\n ...borderStyleNames,\n ...marginStyleNames,\n ...additionalBorderStyles,\n ...additionalMarginStyles,\n ]);\n\n const selectedLabel =\n internalValue &&\n ((pickerOptions as unknown as PickerOption[]).find(\n (option) => option.value === internalValue\n )?.label ??\n internalValue);\n\n const labelText = label ? (\n <Text\n style={{\n textAlign: textStyles.textAlign,\n color: unstyledColor,\n fontSize: 12,\n paddingBottom: 4,\n }}\n >\n {label}\n </Text>\n ) : null;\n\n const leftIconOutset = leftIconMode === \"outset\";\n\n const leftIcon = leftIconName ? (\n <Icon\n name={leftIconName}\n color={disabled ? unstyledColor : iconColor}\n size={iconSize}\n style={{\n marginRight: 4,\n marginLeft: 4,\n }}\n />\n ) : null;\n\n const rightIcon = rightIconName ? (\n <Icon\n name={rightIconName}\n color={disabled ? unstyledColor : iconColor}\n size={iconSize}\n style={{\n marginRight: -10,\n marginLeft: 8,\n }}\n />\n ) : null;\n\n const textAlign = textStyles?.textAlign;\n\n const calculateLeftPadding = () => {\n if (leftIconOutset) {\n if (textAlign === \"center\") {\n return iconSize - Math.abs(8 - iconSize);\n }\n\n return iconSize + 8;\n }\n\n return 0;\n };\n\n const assistiveTextLabel = assistiveText ? (\n <Text\n style={{\n textAlign,\n width: \"100%\",\n paddingLeft: calculateLeftPadding(),\n color: unstyledColor,\n fontSize: 12,\n paddingTop: 4,\n }}\n >\n {assistiveText}\n </Text>\n ) : null;\n\n const primaryTextStyle = {\n color: unstyledColor,\n fontSize: 14,\n ...pickBy(textStyles, identity),\n ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),\n ...(disabled ? { color: unstyledColor } : {}),\n };\n\n const handleValueChange = (newValue: string, itemIndex: number) => {\n if (!placeholder || itemIndex > 0) {\n onValueChange?.(newValue, itemIndex);\n }\n setInternalValue(newValue);\n };\n\n return (\n /* marginsContainer */\n <View style={[styles.marginsContainer, marginStyles]}>\n {/* touchableContainer */}\n <Touchable\n disabled={disabled}\n onPress={togglePickerVisible}\n style={styles.touchableContainer}\n >\n {/* outsetContainer */}\n <View\n pointerEvents=\"none\"\n style={[\n styles.outsetContainer,\n stylesWithoutBordersAndMargins,\n !leftIconOutset ? (borderStyles as PickerProps[\"style\"]) : {},\n ]}\n >\n {leftIcon}\n\n {/* insetContainer */}\n <View\n style={[\n styles.insetContainer,\n leftIconOutset ? (borderStyles as PickerProps[\"style\"]) : {},\n ]}\n >\n {/* primaryTextContainer */}\n <View style={styles.primaryTextContainer}>\n {labelText}\n\n <Text style={primaryTextStyle}>\n {String(selectedLabel ?? placeholder)}\n </Text>\n </View>\n\n {rightIcon}\n </View>\n </View>\n {assistiveTextLabel}\n </Touchable>\n\n {/* iosPicker */}\n {isIos && pickerVisible ? (\n <Portal>\n <View\n style={[\n styles.iosPicker,\n {\n backgroundColor: colors.divider,\n },\n ]}\n >\n <SafeAreaView style={styles.iosSafeArea}>\n <Button\n Icon={Icon}\n type=\"text\"\n onPress={togglePickerVisible}\n style={styles.iosButton}\n >\n {\"Close\"}\n </Button>\n\n <NativePicker\n style={styles.iosNativePicker}\n selectedValue={internalValue}\n onValueChange={handleValueChange}\n >\n {(pickerOptions as unknown as PickerOption[]).map((option) => (\n <NativePicker.Item\n label={option.label}\n value={option.value}\n key={option.value}\n />\n ))}\n </NativePicker>\n </SafeAreaView>\n </View>\n </Portal>\n ) : null}\n\n {/* nonIosPicker */}\n {!isIos && pickerVisible ? (\n <NativePicker\n enabled={pickerVisible}\n selectedValue={internalValue}\n onValueChange={handleValueChange}\n style={styles.nonIosPicker}\n ref={androidPickerRef}\n onBlur={() => setPickerVisible(false)}\n >\n {(pickerOptions as unknown as PickerOption[]).map((option) => (\n <NativePicker.Item\n label={option.label}\n value={option.value}\n key={option.value}\n />\n ))}\n </NativePicker>\n ) : null}\n </View>\n );\n};\n\nexport default withTheme(Picker);\n\nconst styles = StyleSheet.create({\n marginsContainer: {\n alignSelf: \"stretch\",\n alignItems: \"center\",\n width: \"100%\",\n maxWidth: deviceWidth,\n },\n touchableContainer: {\n flex: 1,\n height: \"100%\",\n width: \"100%\",\n alignSelf: \"stretch\",\n alignItems: \"center\",\n },\n outsetContainer: {\n flex: 1,\n height: \"100%\",\n width: \"100%\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n },\n insetContainer: {\n flex: 1,\n height: \"100%\",\n width: \"100%\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n paddingLeft: 12,\n paddingRight: 12,\n },\n primaryTextContainer: {\n flex: 1,\n },\n iosPicker: {\n position: \"absolute\",\n bottom: 0,\n left: 0,\n right: 0,\n flexDirection: \"row\",\n justifyContent: \"center\",\n width: \"100%\",\n maxWidth: deviceWidth,\n maxHeight: deviceHeight,\n },\n iosSafeArea: {\n backgroundColor: \"white\",\n flexDirection: \"column\",\n width: \"100%\",\n maxWidth: deviceWidth,\n },\n iosButton: {\n alignSelf: \"flex-end\",\n },\n iosNativePicker: {\n backgroundColor: \"white\",\n },\n nonIosPicker: {\n opacity: 0,\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n width: \"100%\",\n maxWidth: deviceWidth,\n maxHeight: deviceHeight,\n },\n});\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp } from "@draftbit/types";
|
|
2
2
|
const SEED_DATA_PROPS = {
|
|
3
3
|
label: {
|
|
4
4
|
group: GROUPS.data,
|
|
@@ -127,7 +127,13 @@ export const SEED_DATA = [{
|
|
|
127
127
|
editable: true,
|
|
128
128
|
required: true,
|
|
129
129
|
group: GROUPS.basic
|
|
130
|
-
}
|
|
130
|
+
},
|
|
131
|
+
iconSize: createIconSizeProp({
|
|
132
|
+
defaultValue: 24
|
|
133
|
+
}),
|
|
134
|
+
iconColor: createColorProp({
|
|
135
|
+
label: "Icon Color"
|
|
136
|
+
})
|
|
131
137
|
},
|
|
132
138
|
layout: {}
|
|
133
139
|
}];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Picker.ts"],"names":["COMPONENT_TYPES","Triggers","GROUPS","FORM_TYPES","PROP_TYPES","FIELD_NAME","SEED_DATA_PROPS","label","group","data","description","formType","string","propType","STRING","defaultValue","editable","required","placeholder","basic","placeholderTextColor","color","assistiveText","options","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","handlerPropName","SEED_DATA_TRIGGERS","OnValueChange","SEED_DATA","name","tag","category","input","preview_image_url","supports_list_render","triggers","props","type","layout"],"mappings":"AAAA,SACEA,eADF,EAEEC,QAFF,EAGEC,MAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,UANF,
|
|
1
|
+
{"version":3,"sources":["Picker.ts"],"names":["COMPONENT_TYPES","Triggers","GROUPS","FORM_TYPES","PROP_TYPES","FIELD_NAME","createIconSizeProp","createColorProp","SEED_DATA_PROPS","label","group","data","description","formType","string","propType","STRING","defaultValue","editable","required","placeholder","basic","placeholderTextColor","color","assistiveText","options","array","OBJECT","disabled","boolean","BOOLEAN","error","leftIconName","icon","ASSET","leftIconMode","flatArray","rightIconName","fieldName","handlerPropName","SEED_DATA_TRIGGERS","OnValueChange","SEED_DATA","name","tag","category","input","preview_image_url","supports_list_render","triggers","props","type","iconSize","iconColor","layout"],"mappings":"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","sourcesContent":["import {\n COMPONENT_TYPES,\n Triggers,\n GROUPS,\n FORM_TYPES,\n PROP_TYPES,\n FIELD_NAME,\n createIconSizeProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nconst SEED_DATA_PROPS = {\n label: {\n group: GROUPS.data,\n label: \"Label\",\n description: \"The label to be displayed on the picker\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: true,\n },\n placeholder: {\n group: GROUPS.basic,\n label: \"Placeholder\",\n description: \"The placeholder text of the picker\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Select an option\",\n editable: true,\n required: false,\n },\n placeholderTextColor: {\n group: GROUPS.basic,\n label: \"Placeholder Text Color\",\n description: \"The color of the placeholder text.\",\n editable: true,\n required: false,\n defaultValue: null,\n formType: FORM_TYPES.color,\n propType: PROP_TYPES.STRING,\n },\n assistiveText: {\n group: GROUPS.basic,\n label: \"Assistive text\",\n description: \"Helper text to display below the picker\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: null,\n editable: true,\n required: false,\n },\n options: {\n group: GROUPS.data,\n label: \"Options\",\n description:\n \"Array of picker options. An array of objects containing a label and value.\",\n editable: true,\n required: false,\n formType: FORM_TYPES.array,\n propType: PROP_TYPES.OBJECT,\n options: [],\n defaultValue: null,\n },\n disabled: {\n group: GROUPS.basic,\n label: \"Disabled\",\n description:\n \"Whether the picker should be disabled. Will prevent selection and show a greyed out state.\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: false,\n editable: true,\n required: false,\n },\n error: {\n group: GROUPS.data,\n label: \"Error\",\n description: \"Whether the picker should display the error state\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: false,\n editable: true,\n required: false,\n },\n leftIconName: {\n group: GROUPS.basic,\n label: \"Left icon name\",\n description: \"The icon to display on the left\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n leftIconMode: {\n group: GROUPS.basic,\n label: \"Left icon mode\",\n description:\n \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n defaultValue: \"inset\",\n options: [\"inset\", \"outset\"],\n editable: true,\n required: true,\n },\n rightIconName: {\n group: GROUPS.basic,\n label: \"Right icon name\",\n description: \"The icon to display on the right\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n fieldName: {\n ...FIELD_NAME,\n defaultValue: \"pickerValue\",\n handlerPropName: \"onValueChange\",\n },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnValueChange];\nexport const SEED_DATA = [\n {\n name: \"Picker\",\n tag: \"Picker\",\n description: \"A component used to pick a value from a set of options\",\n category: COMPONENT_TYPES.input,\n preview_image_url: \"{CLOUDINARY_URL}/Picker.png\",\n supports_list_render: false,\n triggers: SEED_DATA_TRIGGERS,\n props: {\n ...SEED_DATA_PROPS,\n type: {\n label: \"Appearance\",\n description: \"Type of Picker\",\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n defaultValue: \"solid\",\n options: [\"solid\", \"underline\"],\n editable: true,\n required: true,\n group: GROUPS.basic,\n },\n iconSize: createIconSizeProp({ defaultValue: 24 }),\n iconColor: createColorProp({ label: \"Icon Color\" }),\n },\n layout: {},\n },\n];\n"]}
|
package/lib/module/utilities.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
|
-
import { isString, isNumber } from "lodash";
|
|
2
|
+
import { isString, isNumber, pick, pickBy, identity } from "lodash";
|
|
3
3
|
export function extractStyles(style) {
|
|
4
4
|
const {
|
|
5
5
|
color,
|
|
@@ -33,6 +33,17 @@ export function extractStyles(style) {
|
|
|
33
33
|
textStyles
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
+
export const borderStyleNames = ["borderRadius", "borderBottomColor", "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderEndColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStartColor", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth"];
|
|
37
|
+
export const marginStyleNames = ["margin", "marginBottom", "marginEnd", "marginHorizontal", "marginLeft", "marginRight", "marginStart", "marginTop", "marginVertical"];
|
|
38
|
+
export function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
|
|
39
|
+
const flatStyle = StyleSheet.flatten(style || {});
|
|
40
|
+
const borderStyles = pickBy(pick(flatStyle, [...borderStyleNames, ...(additionalBorderStyles ? additionalBorderStyles : [])]), identity);
|
|
41
|
+
const marginStyles = pickBy(pick(flatStyle, [...marginStyleNames, ...(additionalMarginStyles ? additionalMarginStyles : [])]), identity);
|
|
42
|
+
return {
|
|
43
|
+
borderStyles,
|
|
44
|
+
marginStyles
|
|
45
|
+
};
|
|
46
|
+
}
|
|
36
47
|
/**
|
|
37
48
|
* Merges a style object on top of another style object. In React Native,
|
|
38
49
|
* keys with undefined values in a style object will still override styles
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","isString","isNumber","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":"AAAA,SAASA,UAAT,QAAiD,cAAjD;AACA,SAASC,QAAT,EAAmBC,QAAnB,
|
|
1
|
+
{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","isString","isNumber","pick","pickBy","identity","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","borderStyleNames","marginStyleNames","extractBorderAndMarginStyles","additionalBorderStyles","additionalMarginStyles","flatStyle","borderStyles","marginStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":"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","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber, pick, pickBy, identity } from \"lodash\";\n\nexport function extractStyles(style: StyleProp<any>) {\n const {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n ...viewStyles\n } = StyleSheet.flatten(style || {});\n\n const textStyles: TextStyle = {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n };\n\n return { viewStyles, textStyles };\n}\n\nexport const borderStyleNames = [\n \"borderRadius\",\n \"borderBottomColor\",\n \"borderBottomEndRadius\",\n \"borderBottomLeftRadius\",\n \"borderBottomRightRadius\",\n \"borderBottomStartRadius\",\n \"borderBottomWidth\",\n \"borderColor\",\n \"borderEndColor\",\n \"borderLeftColor\",\n \"borderLeftWidth\",\n \"borderRadius\",\n \"borderRightColor\",\n \"borderRightWidth\",\n \"borderStartColor\",\n \"borderStyle\",\n \"borderTopColor\",\n \"borderTopEndRadius\",\n \"borderTopLeftRadius\",\n \"borderTopRightRadius\",\n \"borderTopStartRadius\",\n \"borderTopWidth\",\n \"borderWidth\",\n];\n\nexport const marginStyleNames = [\n \"margin\",\n \"marginBottom\",\n \"marginEnd\",\n \"marginHorizontal\",\n \"marginLeft\",\n \"marginRight\",\n \"marginStart\",\n \"marginTop\",\n \"marginVertical\",\n];\n\nexport function extractBorderAndMarginStyles(\n style: StyleProp<any>,\n additionalBorderStyles?: string[],\n additionalMarginStyles?: string[]\n) {\n const flatStyle = StyleSheet.flatten(style || {});\n\n const borderStyles = pickBy(\n pick(flatStyle, [\n ...borderStyleNames,\n ...(additionalBorderStyles ? additionalBorderStyles : []),\n ]),\n identity\n );\n\n const marginStyles = pickBy(\n pick(flatStyle, [\n ...marginStyleNames,\n ...(additionalMarginStyles ? additionalMarginStyles : []),\n ]),\n identity\n );\n\n return { borderStyles, marginStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n baseStyles: Array<StyleProp<any>>,\n stylesToApply: StyleProp<any> | undefined\n) {\n if (!stylesToApply) {\n return;\n }\n\n const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n for (const [key, value] of Object.entries(stylesToApply)) {\n if (value != null) {\n flattenedStyles[key] = value;\n }\n }\n\n return flattenedStyles;\n}\n\nexport function getValueForRadioButton(value: string | number) {\n if (isString(value)) {\n return value;\n } else if (isNumber(value)) {\n return String(value);\n } else {\n throw new Error(`Invalid value: ${value}`);\n }\n}\n"]}
|