@draftbit/core 44.1.13 → 44.1.14

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.
Files changed (16) hide show
  1. package/lib/commonjs/components/Picker/PickerComponent.android.js +41 -16
  2. package/lib/commonjs/components/Picker/PickerComponent.android.js.map +1 -1
  3. package/lib/commonjs/components/Picker/PickerComponent.ios.js +73 -31
  4. package/lib/commonjs/components/Picker/PickerComponent.ios.js.map +1 -1
  5. package/lib/commonjs/components/Picker/PickerComponent.web.js +41 -16
  6. package/lib/commonjs/components/Picker/PickerComponent.web.js.map +1 -1
  7. package/lib/module/components/Picker/PickerComponent.android.js +39 -19
  8. package/lib/module/components/Picker/PickerComponent.android.js.map +1 -1
  9. package/lib/module/components/Picker/PickerComponent.ios.js +66 -35
  10. package/lib/module/components/Picker/PickerComponent.ios.js.map +1 -1
  11. package/lib/module/components/Picker/PickerComponent.web.js +39 -19
  12. package/lib/module/components/Picker/PickerComponent.web.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/components/Picker/PickerComponent.android.tsx +40 -18
  15. package/src/components/Picker/PickerComponent.ios.tsx +72 -37
  16. package/src/components/Picker/PickerComponent.web.tsx +40 -18
package/lib/commonjs/components/Picker/PickerComponent.android.js CHANGED
@@ -9,26 +9,51 @@ var React = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _reactNative = require("react-native");
11
11
 
12
+ var _picker = require("@react-native-picker/picker");
13
+
12
14
  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); }
13
15
 
14
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
17
 
16
- const PickerComponent = () => {
17
- return /*#__PURE__*/React.createElement(_reactNative.Text, null, "android");
18
- }; // const styles = StyleSheet.create({
19
- // nonIosPicker: {
20
- // opacity: 0,
21
- // position: "absolute",
22
- // top: 0,
23
- // left: 0,
24
- // right: 0,
25
- // bottom: 0,
26
- // width: "100%",
27
- // maxWidth: deviceWidth,
28
- // maxHeight: deviceHeight,
29
- // },
30
- // });
31
-
18
+ const {
19
+ width: deviceWidth,
20
+ height: deviceHeight
21
+ } = _reactNative.Dimensions.get("screen");
22
+
23
+ const PickerComponent = _ref => {
24
+ let {
25
+ androidPickerRef,
26
+ togglePickerVisible,
27
+ pickerOptions,
28
+ internalValue,
29
+ handleValueChange
30
+ } = _ref;
31
+ return /*#__PURE__*/React.createElement(_picker.Picker, {
32
+ selectedValue: internalValue,
33
+ onValueChange: handleValueChange,
34
+ style: styles.nonIosPicker,
35
+ ref: androidPickerRef,
36
+ onBlur: togglePickerVisible
37
+ }, pickerOptions.map(option => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
38
+ label: option.label,
39
+ value: option.value,
40
+ key: option.value
41
+ })));
42
+ };
32
43
 
33
44
  exports.PickerComponent = PickerComponent;
45
+
46
+ const styles = _reactNative.StyleSheet.create({
47
+ nonIosPicker: {
48
+ opacity: 0,
49
+ position: "absolute",
50
+ top: 0,
51
+ left: 0,
52
+ right: 0,
53
+ bottom: 0,
54
+ width: "100%",
55
+ maxWidth: deviceWidth,
56
+ maxHeight: deviceHeight
57
+ }
58
+ });
34
59
  //# sourceMappingURL=PickerComponent.android.js.map
package/lib/commonjs/components/Picker/PickerComponent.android.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["PickerComponent.android.tsx"],"names":["PickerComponent"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAmBO,MAAMA,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,iBAAD,kBAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* StyleSheet, Dimensions, View, */ Text } from \"react-native\";\n\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n return <Text>android</Text>;\n};\n\n// const styles = StyleSheet.create({\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
+ {"version":3,"sources":["PickerComponent.android.tsx"],"names":["width","deviceWidth","height","deviceHeight","Dimensions","get","PickerComponent","androidPickerRef","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","nonIosPicker","map","option","label","value","StyleSheet","create","opacity","position","top","left","right","bottom","maxWidth","maxHeight"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAMA,MAAM;AAAEA,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CC,wBAAWC,GAAX,CAAe,QAAf,CAArD;;AAWO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,gBAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,cAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,aAAa,EAAEC,iBAFjB;AAGE,IAAA,KAAK,EAAEC,MAAM,CAACC,YAHhB;AAIE,IAAA,GAAG,EAAEN,gBAJP;AAKE,IAAA,MAAM,EAAEC;AALV,KAOIC,aAAD,CAA6CK,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,cAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CAPH,CADF;AAiBD,CAxBM;;;;AA0BP,MAAML,MAAM,GAAGM,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,YAAY,EAAE;AACZO,IAAAA,OAAO,EAAE,CADG;AAEZC,IAAAA,QAAQ,EAAE,UAFE;AAGZC,IAAAA,GAAG,EAAE,CAHO;AAIZC,IAAAA,IAAI,EAAE,CAJM;AAKZC,IAAAA,KAAK,EAAE,CALK;AAMZC,IAAAA,MAAM,EAAE,CANI;AAOZzB,IAAAA,KAAK,EAAE,MAPK;AAQZ0B,IAAAA,QAAQ,EAAEzB,WARE;AASZ0B,IAAAA,SAAS,EAAExB;AATC;AADiB,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleSheet, Dimensions } from \"react-native\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n androidPickerRef,\n togglePickerVisible,\n pickerOptions,\n internalValue,\n handleValueChange,\n}) => {\n return (\n <NativePicker\n selectedValue={internalValue}\n onValueChange={handleValueChange}\n style={styles.nonIosPicker}\n ref={androidPickerRef}\n onBlur={togglePickerVisible}\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 );\n};\n\nconst styles = StyleSheet.create({\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"]}
package/lib/commonjs/components/Picker/PickerComponent.ios.js CHANGED
@@ -9,42 +9,84 @@ var React = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _reactNative = require("react-native");
11
11
 
12
+ var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
13
+
14
+ var _picker = require("@react-native-picker/picker");
15
+
16
+ var _Portal = _interopRequireDefault(require("../Portal/Portal"));
17
+
18
+ var _DeprecatedButton = _interopRequireDefault(require("../DeprecatedButton"));
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
12
22
  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); }
13
23
 
14
24
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
25
 
16
- const PickerComponent = () => {
17
- return /*#__PURE__*/React.createElement(_reactNative.Text, null, "ios");
18
- }; // const styles = StyleSheet.create({
19
- // iosPicker: {
20
- // position: "absolute",
21
- // bottom: 0,
22
- // left: 0,
23
- // right: 0,
24
- // flexDirection: "row",
25
- // justifyContent: "center",
26
- // width: deviceWidth, // TODO
27
- // maxWidth: deviceWidth,
28
- // maxHeight: deviceHeight,
29
- // backgroundColor: "green", // TODO
30
- // // backgroundColor: "rgba(255, 255, 255, 1)",
31
- // },
32
- // iosSafeArea: {
33
- // backgroundColor: "yellow",
34
- // // backgroundColor: "white",// TODO
35
- // flexDirection: "column",
36
- // width: deviceWidth,
37
- // maxWidth: deviceWidth,
38
- // },
39
- // iosButton: {
40
- // alignSelf: "flex-end",
41
- // },
42
- // iosNativePicker: {
43
- // //backgroundColor: "white",// TODO
44
- // backgroundColor: "red",
45
- // },
46
- // });
26
+ const {
27
+ width: deviceWidth,
28
+ height: deviceHeight
29
+ } = _reactNative.Dimensions.get("screen");
47
30
 
31
+ const PickerComponent = _ref => {
32
+ let {
33
+ Icon,
34
+ togglePickerVisible,
35
+ pickerOptions,
36
+ internalValue,
37
+ handleValueChange
38
+ } = _ref;
39
+ return /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNative.View, {
40
+ style: styles.iosPicker
41
+ }, /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
42
+ style: styles.iosSafeArea
43
+ }, /*#__PURE__*/React.createElement(_DeprecatedButton.default, {
44
+ Icon: Icon,
45
+ type: "text",
46
+ onPress: togglePickerVisible,
47
+ style: styles.iosButton
48
+ }, "Close"), /*#__PURE__*/React.createElement(_picker.Picker, {
49
+ style: styles.iosNativePicker,
50
+ selectedValue: internalValue,
51
+ onValueChange: handleValueChange
52
+ }, pickerOptions.map(option => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
53
+ label: option.label,
54
+ value: option.value,
55
+ key: option.value
56
+ }))))));
57
+ };
48
58
 
49
59
  exports.PickerComponent = PickerComponent;
60
+
61
+ const styles = _reactNative.StyleSheet.create({
62
+ iosPicker: {
63
+ position: "absolute",
64
+ bottom: 0,
65
+ left: 0,
66
+ right: 0,
67
+ flexDirection: "row",
68
+ justifyContent: "center",
69
+ width: deviceWidth,
70
+ // TODO
71
+ maxWidth: deviceWidth,
72
+ maxHeight: deviceHeight,
73
+ backgroundColor: "green" // TODO
74
+ // backgroundColor: "rgba(255, 255, 255, 1)",
75
+
76
+ },
77
+ iosSafeArea: {
78
+ backgroundColor: "yellow",
79
+ // backgroundColor: "white",// TODO
80
+ flexDirection: "column",
81
+ width: deviceWidth,
82
+ maxWidth: deviceWidth
83
+ },
84
+ iosButton: {
85
+ alignSelf: "flex-end"
86
+ },
87
+ iosNativePicker: {
88
+ //backgroundColor: "white",// TODO
89
+ backgroundColor: "red"
90
+ }
91
+ });
50
92
  //# sourceMappingURL=PickerComponent.ios.js.map
package/lib/commonjs/components/Picker/PickerComponent.ios.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["PickerComponent.ios.tsx"],"names":["PickerComponent"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAoBO,MAAMA,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,iBAAD,cAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* View, StyleSheet, Dimensions, */ Text } from \"react-native\";\n// import { SafeAreaView } from \"react-native-safe-area-context\";\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n// import Portal from \"../Portal/Portal\";\n// import Button from \"../DeprecatedButton\";\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n return <Text>ios</Text>;\n};\n\n// const styles = StyleSheet.create({\n// iosPicker: {\n// position: \"absolute\",\n// bottom: 0,\n// left: 0,\n// right: 0,\n// flexDirection: \"row\",\n// justifyContent: \"center\",\n// width: deviceWidth, // TODO\n// maxWidth: deviceWidth,\n// maxHeight: deviceHeight,\n// backgroundColor: \"green\", // TODO\n// // backgroundColor: \"rgba(255, 255, 255, 1)\",\n// },\n// iosSafeArea: {\n// backgroundColor: \"yellow\",\n// // backgroundColor: \"white\",// TODO\n// flexDirection: \"column\",\n// width: deviceWidth,\n// maxWidth: deviceWidth,\n// },\n// iosButton: {\n// alignSelf: \"flex-end\",\n// },\n// iosNativePicker: {\n// //backgroundColor: \"white\",// TODO\n// backgroundColor: \"red\",\n// },\n// });\n"]}
1
+ {"version":3,"sources":["PickerComponent.ios.tsx"],"names":["width","deviceWidth","height","deviceHeight","Dimensions","get","PickerComponent","Icon","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","iosPicker","iosSafeArea","iosButton","iosNativePicker","map","option","label","value","StyleSheet","create","position","bottom","left","right","flexDirection","justifyContent","maxWidth","maxHeight","backgroundColor","alignSelf"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAGA;;AACA;;;;;;;;AAGA,MAAM;AAAEA,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CC,wBAAWC,GAAX,CAAe,QAAf,CAArD;;AAWO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,IAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,eAAD,qBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACC;AAApB,kBACE,oBAAC,wCAAD;AAAc,IAAA,KAAK,EAAED,MAAM,CAACE;AAA5B,kBACE,oBAAC,yBAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,OAAO,EAAEC,mBAHX;AAIE,IAAA,KAAK,EAAEI,MAAM,CAACG;AAJhB,KAMG,OANH,CADF,eAUE,oBAAC,cAAD;AACE,IAAA,KAAK,EAAEH,MAAM,CAACI,eADhB;AAEE,IAAA,aAAa,EAAEN,aAFjB;AAGE,IAAA,aAAa,EAAEC;AAHjB,KAKIF,aAAD,CAA6CQ,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,cAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CALH,CAVF,CADF,CADF,CADF;AA8BD,CArCM;;;;AAuCP,MAAMR,MAAM,GAAGS,wBAAWC,MAAX,CAAkB;AAC/BT,EAAAA,SAAS,EAAE;AACTU,IAAAA,QAAQ,EAAE,UADD;AAETC,IAAAA,MAAM,EAAE,CAFC;AAGTC,IAAAA,IAAI,EAAE,CAHG;AAITC,IAAAA,KAAK,EAAE,CAJE;AAKTC,IAAAA,aAAa,EAAE,KALN;AAMTC,IAAAA,cAAc,EAAE,QANP;AAOT5B,IAAAA,KAAK,EAAEC,WAPE;AAOW;AACpB4B,IAAAA,QAAQ,EAAE5B,WARD;AAST6B,IAAAA,SAAS,EAAE3B,YATF;AAUT4B,IAAAA,eAAe,EAAE,OAVR,CAUiB;AAC1B;;AAXS,GADoB;AAc/BjB,EAAAA,WAAW,EAAE;AACXiB,IAAAA,eAAe,EAAE,QADN;AAEX;AACAJ,IAAAA,aAAa,EAAE,QAHJ;AAIX3B,IAAAA,KAAK,EAAEC,WAJI;AAKX4B,IAAAA,QAAQ,EAAE5B;AALC,GAdkB;AAqB/Bc,EAAAA,SAAS,EAAE;AACTiB,IAAAA,SAAS,EAAE;AADF,GArBoB;AAwB/BhB,EAAAA,eAAe,EAAE;AACf;AACAe,IAAAA,eAAe,EAAE;AAFF;AAxBc,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, Dimensions } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n Icon,\n togglePickerVisible,\n pickerOptions,\n internalValue,\n handleValueChange,\n}) => {\n return (\n <Portal>\n <View style={styles.iosPicker}>\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 );\n};\n\nconst styles = StyleSheet.create({\n iosPicker: {\n position: \"absolute\",\n bottom: 0,\n left: 0,\n right: 0,\n flexDirection: \"row\",\n justifyContent: \"center\",\n width: deviceWidth, // TODO\n maxWidth: deviceWidth,\n maxHeight: deviceHeight,\n backgroundColor: \"green\", // TODO\n // backgroundColor: \"rgba(255, 255, 255, 1)\",\n },\n iosSafeArea: {\n backgroundColor: \"yellow\",\n // backgroundColor: \"white\",// TODO\n flexDirection: \"column\",\n width: deviceWidth,\n maxWidth: deviceWidth,\n },\n iosButton: {\n alignSelf: \"flex-end\",\n },\n iosNativePicker: {\n //backgroundColor: \"white\",// TODO\n backgroundColor: \"red\",\n },\n});\n"]}
package/lib/commonjs/components/Picker/PickerComponent.web.js CHANGED
@@ -9,26 +9,51 @@ var React = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _reactNative = require("react-native");
11
11
 
12
+ var _picker = require("@react-native-picker/picker");
13
+
12
14
  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); }
13
15
 
14
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
17
 
16
- const PickerComponent = () => {
17
- return /*#__PURE__*/React.createElement(_reactNative.Text, null, "web");
18
- }; // const styles = StyleSheet.create({
19
- // nonIosPicker: {
20
- // opacity: 0,
21
- // position: "absolute",
22
- // top: 0,
23
- // left: 0,
24
- // right: 0,
25
- // bottom: 0,
26
- // width: "100%",
27
- // maxWidth: deviceWidth,
28
- // maxHeight: deviceHeight,
29
- // },
30
- // });
31
-
18
+ const {
19
+ width: deviceWidth,
20
+ height: deviceHeight
21
+ } = _reactNative.Dimensions.get("screen");
22
+
23
+ const PickerComponent = _ref => {
24
+ let {
25
+ androidPickerRef,
26
+ togglePickerVisible,
27
+ pickerOptions,
28
+ internalValue,
29
+ handleValueChange
30
+ } = _ref;
31
+ return /*#__PURE__*/React.createElement(_picker.Picker, {
32
+ selectedValue: internalValue,
33
+ onValueChange: handleValueChange,
34
+ style: styles.nonIosPicker,
35
+ ref: androidPickerRef,
36
+ onBlur: togglePickerVisible
37
+ }, pickerOptions.map(option => /*#__PURE__*/React.createElement(_picker.Picker.Item, {
38
+ label: option.label,
39
+ value: option.value,
40
+ key: option.value
41
+ })));
42
+ };
32
43
 
33
44
  exports.PickerComponent = PickerComponent;
45
+
46
+ const styles = _reactNative.StyleSheet.create({
47
+ nonIosPicker: {
48
+ opacity: 0,
49
+ position: "absolute",
50
+ top: 0,
51
+ left: 0,
52
+ right: 0,
53
+ bottom: 0,
54
+ width: "100%",
55
+ maxWidth: deviceWidth,
56
+ maxHeight: deviceHeight
57
+ }
58
+ });
34
59
  //# sourceMappingURL=PickerComponent.web.js.map
package/lib/commonjs/components/Picker/PickerComponent.web.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["PickerComponent.web.tsx"],"names":["PickerComponent"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAmBO,MAAMA,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,iBAAD,cAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* StyleSheet, Dimensions, */ Text } from \"react-native\";\n\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n return <Text>web</Text>;\n};\n\n// const styles = StyleSheet.create({\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
+ {"version":3,"sources":["PickerComponent.web.tsx"],"names":["width","deviceWidth","height","deviceHeight","Dimensions","get","PickerComponent","androidPickerRef","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","nonIosPicker","map","option","label","value","StyleSheet","create","opacity","position","top","left","right","bottom","maxWidth","maxHeight"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAMA,MAAM;AAAEA,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CC,wBAAWC,GAAX,CAAe,QAAf,CAArD;;AAWO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,gBAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,cAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,aAAa,EAAEC,iBAFjB;AAGE,IAAA,KAAK,EAAEC,MAAM,CAACC,YAHhB;AAIE,IAAA,GAAG,EAAEN,gBAJP;AAKE,IAAA,MAAM,EAAEC;AALV,KAOIC,aAAD,CAA6CK,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,cAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CAPH,CADF;AAiBD,CAxBM;;;;AA0BP,MAAML,MAAM,GAAGM,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,YAAY,EAAE;AACZO,IAAAA,OAAO,EAAE,CADG;AAEZC,IAAAA,QAAQ,EAAE,UAFE;AAGZC,IAAAA,GAAG,EAAE,CAHO;AAIZC,IAAAA,IAAI,EAAE,CAJM;AAKZC,IAAAA,KAAK,EAAE,CALK;AAMZC,IAAAA,MAAM,EAAE,CANI;AAOZzB,IAAAA,KAAK,EAAE,MAPK;AAQZ0B,IAAAA,QAAQ,EAAEzB,WARE;AASZ0B,IAAAA,SAAS,EAAExB;AATC;AADiB,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleSheet, Dimensions } from \"react-native\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n androidPickerRef,\n togglePickerVisible,\n pickerOptions,\n internalValue,\n handleValueChange,\n}) => {\n return (\n <NativePicker\n selectedValue={internalValue}\n onValueChange={handleValueChange}\n style={styles.nonIosPicker}\n ref={androidPickerRef}\n onBlur={togglePickerVisible}\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 );\n};\n\nconst styles = StyleSheet.create({\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"]}
package/lib/module/components/Picker/PickerComponent.android.js CHANGED
@@ -1,21 +1,41 @@
1
1
  import * as React from "react";
2
- import {
3
- /* StyleSheet, Dimensions, View, */
4
- Text } from "react-native"; // import { Picker as NativePicker } from "@react-native-picker/picker";
5
-
6
- export const PickerComponent = () => {
7
- return /*#__PURE__*/React.createElement(Text, null, "android");
8
- }; // const styles = StyleSheet.create({
9
- // nonIosPicker: {
10
- // opacity: 0,
11
- // position: "absolute",
12
- // top: 0,
13
- // left: 0,
14
- // right: 0,
15
- // bottom: 0,
16
- // width: "100%",
17
- // maxWidth: deviceWidth,
18
- // maxHeight: deviceHeight,
19
- // },
20
- // });
2
+ import { StyleSheet, Dimensions } from "react-native";
3
+ import { Picker as NativePicker } from "@react-native-picker/picker";
4
+ const {
5
+ width: deviceWidth,
6
+ height: deviceHeight
7
+ } = Dimensions.get("screen");
8
+ export const PickerComponent = _ref => {
9
+ let {
10
+ androidPickerRef,
11
+ togglePickerVisible,
12
+ pickerOptions,
13
+ internalValue,
14
+ handleValueChange
15
+ } = _ref;
16
+ return /*#__PURE__*/React.createElement(NativePicker, {
17
+ selectedValue: internalValue,
18
+ onValueChange: handleValueChange,
19
+ style: styles.nonIosPicker,
20
+ ref: androidPickerRef,
21
+ onBlur: togglePickerVisible
22
+ }, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
23
+ label: option.label,
24
+ value: option.value,
25
+ key: option.value
26
+ })));
27
+ };
28
+ const styles = StyleSheet.create({
29
+ nonIosPicker: {
30
+ opacity: 0,
31
+ position: "absolute",
32
+ top: 0,
33
+ left: 0,
34
+ right: 0,
35
+ bottom: 0,
36
+ width: "100%",
37
+ maxWidth: deviceWidth,
38
+ maxHeight: deviceHeight
39
+ }
40
+ });
21
41
  //# sourceMappingURL=PickerComponent.android.js.map
package/lib/module/components/Picker/PickerComponent.android.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["PickerComponent.android.tsx"],"names":["React","Text","PickerComponent"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA;AAAS;AAAoCC,IAA7C,QAAyD,cAAzD,C,CAEA;;AAiBA,OAAO,MAAMC,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,IAAD,kBAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* StyleSheet, Dimensions, View, */ Text } from \"react-native\";\n\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n return <Text>android</Text>;\n};\n\n// const styles = StyleSheet.create({\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
+ {"version":3,"sources":["PickerComponent.android.tsx"],"names":["React","StyleSheet","Dimensions","Picker","NativePicker","width","deviceWidth","height","deviceHeight","get","PickerComponent","androidPickerRef","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","nonIosPicker","map","option","label","value","create","opacity","position","top","left","right","bottom","maxWidth","maxHeight"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AAMA,MAAM;AAAEC,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CN,UAAU,CAACO,GAAX,CAAe,QAAf,CAArD;AAWA,OAAO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,gBAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,aAAa,EAAEC,iBAFjB;AAGE,IAAA,KAAK,EAAEC,MAAM,CAACC,YAHhB;AAIE,IAAA,GAAG,EAAEN,gBAJP;AAKE,IAAA,MAAM,EAAEC;AALV,KAOIC,aAAD,CAA6CK,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,YAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CAPH,CADF;AAiBD,CAxBM;AA0BP,MAAML,MAAM,GAAGf,UAAU,CAACqB,MAAX,CAAkB;AAC/BL,EAAAA,YAAY,EAAE;AACZM,IAAAA,OAAO,EAAE,CADG;AAEZC,IAAAA,QAAQ,EAAE,UAFE;AAGZC,IAAAA,GAAG,EAAE,CAHO;AAIZC,IAAAA,IAAI,EAAE,CAJM;AAKZC,IAAAA,KAAK,EAAE,CALK;AAMZC,IAAAA,MAAM,EAAE,CANI;AAOZvB,IAAAA,KAAK,EAAE,MAPK;AAQZwB,IAAAA,QAAQ,EAAEvB,WARE;AASZwB,IAAAA,SAAS,EAAEtB;AATC;AADiB,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleSheet, Dimensions } from \"react-native\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n androidPickerRef,\n togglePickerVisible,\n pickerOptions,\n internalValue,\n handleValueChange,\n}) => {\n return (\n <NativePicker\n selectedValue={internalValue}\n onValueChange={handleValueChange}\n style={styles.nonIosPicker}\n ref={androidPickerRef}\n onBlur={togglePickerVisible}\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 );\n};\n\nconst styles = StyleSheet.create({\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"]}
package/lib/module/components/Picker/PickerComponent.ios.js CHANGED
@@ -1,38 +1,69 @@
1
1
  import * as React from "react";
2
- import {
3
- /* View, StyleSheet, Dimensions, */
4
- Text } from "react-native"; // import { SafeAreaView } from "react-native-safe-area-context";
5
- // import { Picker as NativePicker } from "@react-native-picker/picker";
2
+ import { View, StyleSheet, Dimensions } from "react-native";
3
+ import { SafeAreaView } from "react-native-safe-area-context";
4
+ import { Picker as NativePicker } from "@react-native-picker/picker";
5
+ import Portal from "../Portal/Portal";
6
+ import Button from "../DeprecatedButton";
7
+ const {
8
+ width: deviceWidth,
9
+ height: deviceHeight
10
+ } = Dimensions.get("screen");
11
+ export const PickerComponent = _ref => {
12
+ let {
13
+ Icon,
14
+ togglePickerVisible,
15
+ pickerOptions,
16
+ internalValue,
17
+ handleValueChange
18
+ } = _ref;
19
+ return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
20
+ style: styles.iosPicker
21
+ }, /*#__PURE__*/React.createElement(SafeAreaView, {
22
+ style: styles.iosSafeArea
23
+ }, /*#__PURE__*/React.createElement(Button, {
24
+ Icon: Icon,
25
+ type: "text",
26
+ onPress: togglePickerVisible,
27
+ style: styles.iosButton
28
+ }, "Close"), /*#__PURE__*/React.createElement(NativePicker, {
29
+ style: styles.iosNativePicker,
30
+ selectedValue: internalValue,
31
+ onValueChange: handleValueChange
32
+ }, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
33
+ label: option.label,
34
+ value: option.value,
35
+ key: option.value
36
+ }))))));
37
+ };
38
+ const styles = StyleSheet.create({
39
+ iosPicker: {
40
+ position: "absolute",
41
+ bottom: 0,
42
+ left: 0,
43
+ right: 0,
44
+ flexDirection: "row",
45
+ justifyContent: "center",
46
+ width: deviceWidth,
47
+ // TODO
48
+ maxWidth: deviceWidth,
49
+ maxHeight: deviceHeight,
50
+ backgroundColor: "green" // TODO
51
+ // backgroundColor: "rgba(255, 255, 255, 1)",
6
52
 
7
- export const PickerComponent = () => {
8
- return /*#__PURE__*/React.createElement(Text, null, "ios");
9
- }; // const styles = StyleSheet.create({
10
- // iosPicker: {
11
- // position: "absolute",
12
- // bottom: 0,
13
- // left: 0,
14
- // right: 0,
15
- // flexDirection: "row",
16
- // justifyContent: "center",
17
- // width: deviceWidth, // TODO
18
- // maxWidth: deviceWidth,
19
- // maxHeight: deviceHeight,
20
- // backgroundColor: "green", // TODO
21
- // // backgroundColor: "rgba(255, 255, 255, 1)",
22
- // },
23
- // iosSafeArea: {
24
- // backgroundColor: "yellow",
25
- // // backgroundColor: "white",// TODO
26
- // flexDirection: "column",
27
- // width: deviceWidth,
28
- // maxWidth: deviceWidth,
29
- // },
30
- // iosButton: {
31
- // alignSelf: "flex-end",
32
- // },
33
- // iosNativePicker: {
34
- // //backgroundColor: "white",// TODO
35
- // backgroundColor: "red",
36
- // },
37
- // });
53
+ },
54
+ iosSafeArea: {
55
+ backgroundColor: "yellow",
56
+ // backgroundColor: "white",// TODO
57
+ flexDirection: "column",
58
+ width: deviceWidth,
59
+ maxWidth: deviceWidth
60
+ },
61
+ iosButton: {
62
+ alignSelf: "flex-end"
63
+ },
64
+ iosNativePicker: {
65
+ //backgroundColor: "white",// TODO
66
+ backgroundColor: "red"
67
+ }
68
+ });
38
69
  //# sourceMappingURL=PickerComponent.ios.js.map
package/lib/module/components/Picker/PickerComponent.ios.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","Text","PickerComponent"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA;AAAS;AAAoCC,IAA7C,QAAyD,cAAzD,C,CACA;AACA;;AAkBA,OAAO,MAAMC,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,IAAD,cAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* View, StyleSheet, Dimensions, */ Text } from \"react-native\";\n// import { SafeAreaView } from \"react-native-safe-area-context\";\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n// import Portal from \"../Portal/Portal\";\n// import Button from \"../DeprecatedButton\";\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n return <Text>ios</Text>;\n};\n\n// const styles = StyleSheet.create({\n// iosPicker: {\n// position: \"absolute\",\n// bottom: 0,\n// left: 0,\n// right: 0,\n// flexDirection: \"row\",\n// justifyContent: \"center\",\n// width: deviceWidth, // TODO\n// maxWidth: deviceWidth,\n// maxHeight: deviceHeight,\n// backgroundColor: \"green\", // TODO\n// // backgroundColor: \"rgba(255, 255, 255, 1)\",\n// },\n// iosSafeArea: {\n// backgroundColor: \"yellow\",\n// // backgroundColor: \"white\",// TODO\n// flexDirection: \"column\",\n// width: deviceWidth,\n// maxWidth: deviceWidth,\n// },\n// iosButton: {\n// alignSelf: \"flex-end\",\n// },\n// iosNativePicker: {\n// //backgroundColor: \"white\",// TODO\n// backgroundColor: \"red\",\n// },\n// });\n"]}
1
+ {"version":3,"sources":["PickerComponent.ios.tsx"],"names":["React","View","StyleSheet","Dimensions","SafeAreaView","Picker","NativePicker","Portal","Button","width","deviceWidth","height","deviceHeight","get","PickerComponent","Icon","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","iosPicker","iosSafeArea","iosButton","iosNativePicker","map","option","label","value","create","position","bottom","left","right","flexDirection","justifyContent","maxWidth","maxHeight","backgroundColor","alignSelf"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,UAAf,EAA2BC,UAA3B,QAA6C,cAA7C;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AAGA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AAGA,MAAM;AAAEC,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CT,UAAU,CAACU,GAAX,CAAe,QAAf,CAArD;AAWA,OAAO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,IAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,MAAD,qBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACC;AAApB,kBACE,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAED,MAAM,CAACE;AAA5B,kBACE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,OAAO,EAAEC,mBAHX;AAIE,IAAA,KAAK,EAAEI,MAAM,CAACG;AAJhB,KAMG,OANH,CADF,eAUE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAEH,MAAM,CAACI,eADhB;AAEE,IAAA,aAAa,EAAEN,aAFjB;AAGE,IAAA,aAAa,EAAEC;AAHjB,KAKIF,aAAD,CAA6CQ,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,YAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CALH,CAVF,CADF,CADF,CADF;AA8BD,CArCM;AAuCP,MAAMR,MAAM,GAAGlB,UAAU,CAAC2B,MAAX,CAAkB;AAC/BR,EAAAA,SAAS,EAAE;AACTS,IAAAA,QAAQ,EAAE,UADD;AAETC,IAAAA,MAAM,EAAE,CAFC;AAGTC,IAAAA,IAAI,EAAE,CAHG;AAITC,IAAAA,KAAK,EAAE,CAJE;AAKTC,IAAAA,aAAa,EAAE,KALN;AAMTC,IAAAA,cAAc,EAAE,QANP;AAOT1B,IAAAA,KAAK,EAAEC,WAPE;AAOW;AACpB0B,IAAAA,QAAQ,EAAE1B,WARD;AAST2B,IAAAA,SAAS,EAAEzB,YATF;AAUT0B,IAAAA,eAAe,EAAE,OAVR,CAUiB;AAC1B;;AAXS,GADoB;AAc/BhB,EAAAA,WAAW,EAAE;AACXgB,IAAAA,eAAe,EAAE,QADN;AAEX;AACAJ,IAAAA,aAAa,EAAE,QAHJ;AAIXzB,IAAAA,KAAK,EAAEC,WAJI;AAKX0B,IAAAA,QAAQ,EAAE1B;AALC,GAdkB;AAqB/Ba,EAAAA,SAAS,EAAE;AACTgB,IAAAA,SAAS,EAAE;AADF,GArBoB;AAwB/Bf,EAAAA,eAAe,EAAE;AACf;AACAc,IAAAA,eAAe,EAAE;AAFF;AAxBc,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { View, StyleSheet, Dimensions } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport Portal from \"../Portal/Portal\";\nimport Button from \"../DeprecatedButton\";\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n Icon,\n togglePickerVisible,\n pickerOptions,\n internalValue,\n handleValueChange,\n}) => {\n return (\n <Portal>\n <View style={styles.iosPicker}>\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 );\n};\n\nconst styles = StyleSheet.create({\n iosPicker: {\n position: \"absolute\",\n bottom: 0,\n left: 0,\n right: 0,\n flexDirection: \"row\",\n justifyContent: \"center\",\n width: deviceWidth, // TODO\n maxWidth: deviceWidth,\n maxHeight: deviceHeight,\n backgroundColor: \"green\", // TODO\n // backgroundColor: \"rgba(255, 255, 255, 1)\",\n },\n iosSafeArea: {\n backgroundColor: \"yellow\",\n // backgroundColor: \"white\",// TODO\n flexDirection: \"column\",\n width: deviceWidth,\n maxWidth: deviceWidth,\n },\n iosButton: {\n alignSelf: \"flex-end\",\n },\n iosNativePicker: {\n //backgroundColor: \"white\",// TODO\n backgroundColor: \"red\",\n },\n});\n"]}
package/lib/module/components/Picker/PickerComponent.web.js CHANGED
@@ -1,21 +1,41 @@
1
1
  import * as React from "react";
2
- import {
3
- /* StyleSheet, Dimensions, */
4
- Text } from "react-native"; // import { Picker as NativePicker } from "@react-native-picker/picker";
5
-
6
- export const PickerComponent = () => {
7
- return /*#__PURE__*/React.createElement(Text, null, "web");
8
- }; // const styles = StyleSheet.create({
9
- // nonIosPicker: {
10
- // opacity: 0,
11
- // position: "absolute",
12
- // top: 0,
13
- // left: 0,
14
- // right: 0,
15
- // bottom: 0,
16
- // width: "100%",
17
- // maxWidth: deviceWidth,
18
- // maxHeight: deviceHeight,
19
- // },
20
- // });
2
+ import { StyleSheet, Dimensions } from "react-native";
3
+ import { Picker as NativePicker } from "@react-native-picker/picker";
4
+ const {
5
+ width: deviceWidth,
6
+ height: deviceHeight
7
+ } = Dimensions.get("screen");
8
+ export const PickerComponent = _ref => {
9
+ let {
10
+ androidPickerRef,
11
+ togglePickerVisible,
12
+ pickerOptions,
13
+ internalValue,
14
+ handleValueChange
15
+ } = _ref;
16
+ return /*#__PURE__*/React.createElement(NativePicker, {
17
+ selectedValue: internalValue,
18
+ onValueChange: handleValueChange,
19
+ style: styles.nonIosPicker,
20
+ ref: androidPickerRef,
21
+ onBlur: togglePickerVisible
22
+ }, pickerOptions.map(option => /*#__PURE__*/React.createElement(NativePicker.Item, {
23
+ label: option.label,
24
+ value: option.value,
25
+ key: option.value
26
+ })));
27
+ };
28
+ const styles = StyleSheet.create({
29
+ nonIosPicker: {
30
+ opacity: 0,
31
+ position: "absolute",
32
+ top: 0,
33
+ left: 0,
34
+ right: 0,
35
+ bottom: 0,
36
+ width: "100%",
37
+ maxWidth: deviceWidth,
38
+ maxHeight: deviceHeight
39
+ }
40
+ });
21
41
  //# sourceMappingURL=PickerComponent.web.js.map
package/lib/module/components/Picker/PickerComponent.web.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","Text","PickerComponent"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA;AAAS;AAA+BC,IAAxC,QAAoD,cAApD,C,CAEA;;AAiBA,OAAO,MAAMC,eAA+C,GAAG,MAAM;AACnE,sBAAO,oBAAC,IAAD,cAAP;AACD,CAFM,C,CAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import * as React from \"react\";\nimport { /* StyleSheet, Dimensions, */ Text } from \"react-native\";\n\n// import { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\n// const { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = () => {\n return <Text>web</Text>;\n};\n\n// const styles = StyleSheet.create({\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
+ {"version":3,"sources":["PickerComponent.web.tsx"],"names":["React","StyleSheet","Dimensions","Picker","NativePicker","width","deviceWidth","height","deviceHeight","get","PickerComponent","androidPickerRef","togglePickerVisible","pickerOptions","internalValue","handleValueChange","styles","nonIosPicker","map","option","label","value","create","opacity","position","top","left","right","bottom","maxWidth","maxHeight"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AAEA,SAASC,MAAM,IAAIC,YAAnB,QAAuC,6BAAvC;AAMA,MAAM;AAAEC,EAAAA,KAAK,EAAEC,WAAT;AAAsBC,EAAAA,MAAM,EAAEC;AAA9B,IAA+CN,UAAU,CAACO,GAAX,CAAe,QAAf,CAArD;AAWA,OAAO,MAAMC,eAA+C,GAAG,QAMzD;AAAA,MAN0D;AAC9DC,IAAAA,gBAD8D;AAE9DC,IAAAA,mBAF8D;AAG9DC,IAAAA,aAH8D;AAI9DC,IAAAA,aAJ8D;AAK9DC,IAAAA;AAL8D,GAM1D;AACJ,sBACE,oBAAC,YAAD;AACE,IAAA,aAAa,EAAED,aADjB;AAEE,IAAA,aAAa,EAAEC,iBAFjB;AAGE,IAAA,KAAK,EAAEC,MAAM,CAACC,YAHhB;AAIE,IAAA,GAAG,EAAEN,gBAJP;AAKE,IAAA,MAAM,EAAEC;AALV,KAOIC,aAAD,CAA6CK,GAA7C,CAAkDC,MAAD,iBAChD,oBAAC,YAAD,CAAc,IAAd;AACE,IAAA,KAAK,EAAEA,MAAM,CAACC,KADhB;AAEE,IAAA,KAAK,EAAED,MAAM,CAACE,KAFhB;AAGE,IAAA,GAAG,EAAEF,MAAM,CAACE;AAHd,IADD,CAPH,CADF;AAiBD,CAxBM;AA0BP,MAAML,MAAM,GAAGf,UAAU,CAACqB,MAAX,CAAkB;AAC/BL,EAAAA,YAAY,EAAE;AACZM,IAAAA,OAAO,EAAE,CADG;AAEZC,IAAAA,QAAQ,EAAE,UAFE;AAGZC,IAAAA,GAAG,EAAE,CAHO;AAIZC,IAAAA,IAAI,EAAE,CAJM;AAKZC,IAAAA,KAAK,EAAE,CALK;AAMZC,IAAAA,MAAM,EAAE,CANI;AAOZvB,IAAAA,KAAK,EAAE,MAPK;AAQZwB,IAAAA,QAAQ,EAAEvB,WARE;AASZwB,IAAAA,SAAS,EAAEtB;AATC;AADiB,CAAlB,CAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleSheet, Dimensions } from \"react-native\";\n\nimport { Picker as NativePicker } from \"@react-native-picker/picker\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nimport { PickerOption } from \"./Picker\";\n\nconst { width: deviceWidth, height: deviceHeight } = Dimensions.get(\"screen\");\n\ninterface PickerComponentProps {\n Icon: IconSlot[\"Icon\"];\n androidPickerRef: React.RefObject<any>;\n togglePickerVisible: () => void;\n pickerOptions: PickerOption[];\n internalValue: string | undefined;\n handleValueChange: (newValue: string, itemIndex: number) => void;\n}\n\nexport const PickerComponent: React.FC<PickerComponentProps> = ({\n androidPickerRef,\n togglePickerVisible,\n pickerOptions,\n internalValue,\n handleValueChange,\n}) => {\n return (\n <NativePicker\n selectedValue={internalValue}\n onValueChange={handleValueChange}\n style={styles.nonIosPicker}\n ref={androidPickerRef}\n onBlur={togglePickerVisible}\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 );\n};\n\nconst styles = StyleSheet.create({\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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "44.1.13",
3
+ "version": "44.1.14",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -79,5 +79,5 @@
79
79
  ]
80
80
  ]
81
81
  },
82
- "gitHead": "87ec160cc82ff828726d35a8d2ed7c26b0cb8f52"
82
+ "gitHead": "5d730f7f97002f5c0bdd0ad810d44422b3176900"
83
83
  }
package/src/components/Picker/PickerComponent.android.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as React from "react";
2
- import { /* StyleSheet, Dimensions, View, */ Text } from "react-native";
2
+ import { StyleSheet, Dimensions } from "react-native";
3
3
 
4
- // import { Picker as NativePicker } from "@react-native-picker/picker";
4
+ import { Picker as NativePicker } from "@react-native-picker/picker";
5
5
 
6
6
  import type { IconSlot } from "../../interfaces/Icon";
7
7
 
8
8
  import { PickerOption } from "./Picker";
9
9
 
10
- // const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
10
+ const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
11
11
 
12
12
  interface PickerComponentProps {
13
13
  Icon: IconSlot["Icon"];
@@ -18,20 +18,42 @@ interface PickerComponentProps {
18
18
  handleValueChange: (newValue: string, itemIndex: number) => void;
19
19
  }
20
20
 
21
- export const PickerComponent: React.FC<PickerComponentProps> = () => {
22
- return <Text>android</Text>;
21
+ export const PickerComponent: React.FC<PickerComponentProps> = ({
22
+ androidPickerRef,
23
+ togglePickerVisible,
24
+ pickerOptions,
25
+ internalValue,
26
+ handleValueChange,
27
+ }) => {
28
+ return (
29
+ <NativePicker
30
+ selectedValue={internalValue}
31
+ onValueChange={handleValueChange}
32
+ style={styles.nonIosPicker}
33
+ ref={androidPickerRef}
34
+ onBlur={togglePickerVisible}
35
+ >
36
+ {(pickerOptions as unknown as PickerOption[]).map((option) => (
37
+ <NativePicker.Item
38
+ label={option.label}
39
+ value={option.value}
40
+ key={option.value}
41
+ />
42
+ ))}
43
+ </NativePicker>
44
+ );
23
45
  };
24
46
 
25
- // const styles = StyleSheet.create({
26
- // nonIosPicker: {
27
- // opacity: 0,
28
- // position: "absolute",
29
- // top: 0,
30
- // left: 0,
31
- // right: 0,
32
- // bottom: 0,
33
- // width: "100%",
34
- // maxWidth: deviceWidth,
35
- // maxHeight: deviceHeight,
36
- // },
37
- // });
47
+ const styles = StyleSheet.create({
48
+ nonIosPicker: {
49
+ opacity: 0,
50
+ position: "absolute",
51
+ top: 0,
52
+ left: 0,
53
+ right: 0,
54
+ bottom: 0,
55
+ width: "100%",
56
+ maxWidth: deviceWidth,
57
+ maxHeight: deviceHeight,
58
+ },
59
+ });
package/src/components/Picker/PickerComponent.ios.tsx CHANGED
@@ -1,14 +1,14 @@
1
1
  import * as React from "react";
2
- import { /* View, StyleSheet, Dimensions, */ Text } from "react-native";
3
- // import { SafeAreaView } from "react-native-safe-area-context";
4
- // import { Picker as NativePicker } from "@react-native-picker/picker";
2
+ import { View, StyleSheet, Dimensions } from "react-native";
3
+ import { SafeAreaView } from "react-native-safe-area-context";
4
+ import { Picker as NativePicker } from "@react-native-picker/picker";
5
5
 
6
6
  import type { IconSlot } from "../../interfaces/Icon";
7
- // import Portal from "../Portal/Portal";
8
- // import Button from "../DeprecatedButton";
7
+ import Portal from "../Portal/Portal";
8
+ import Button from "../DeprecatedButton";
9
9
  import { PickerOption } from "./Picker";
10
10
 
11
- // const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
11
+ const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
12
12
 
13
13
  interface PickerComponentProps {
14
14
  Icon: IconSlot["Icon"];
@@ -19,36 +19,71 @@ interface PickerComponentProps {
19
19
  handleValueChange: (newValue: string, itemIndex: number) => void;
20
20
  }
21
21
 
22
- export const PickerComponent: React.FC<PickerComponentProps> = () => {
23
- return <Text>ios</Text>;
22
+ export const PickerComponent: React.FC<PickerComponentProps> = ({
23
+ Icon,
24
+ togglePickerVisible,
25
+ pickerOptions,
26
+ internalValue,
27
+ handleValueChange,
28
+ }) => {
29
+ return (
30
+ <Portal>
31
+ <View style={styles.iosPicker}>
32
+ <SafeAreaView style={styles.iosSafeArea}>
33
+ <Button
34
+ Icon={Icon}
35
+ type="text"
36
+ onPress={togglePickerVisible}
37
+ style={styles.iosButton}
38
+ >
39
+ {"Close"}
40
+ </Button>
41
+
42
+ <NativePicker
43
+ style={styles.iosNativePicker}
44
+ selectedValue={internalValue}
45
+ onValueChange={handleValueChange}
46
+ >
47
+ {(pickerOptions as unknown as PickerOption[]).map((option) => (
48
+ <NativePicker.Item
49
+ label={option.label}
50
+ value={option.value}
51
+ key={option.value}
52
+ />
53
+ ))}
54
+ </NativePicker>
55
+ </SafeAreaView>
56
+ </View>
57
+ </Portal>
58
+ );
24
59
  };
25
60
 
26
- // const styles = StyleSheet.create({
27
- // iosPicker: {
28
- // position: "absolute",
29
- // bottom: 0,
30
- // left: 0,
31
- // right: 0,
32
- // flexDirection: "row",
33
- // justifyContent: "center",
34
- // width: deviceWidth, // TODO
35
- // maxWidth: deviceWidth,
36
- // maxHeight: deviceHeight,
37
- // backgroundColor: "green", // TODO
38
- // // backgroundColor: "rgba(255, 255, 255, 1)",
39
- // },
40
- // iosSafeArea: {
41
- // backgroundColor: "yellow",
42
- // // backgroundColor: "white",// TODO
43
- // flexDirection: "column",
44
- // width: deviceWidth,
45
- // maxWidth: deviceWidth,
46
- // },
47
- // iosButton: {
48
- // alignSelf: "flex-end",
49
- // },
50
- // iosNativePicker: {
51
- // //backgroundColor: "white",// TODO
52
- // backgroundColor: "red",
53
- // },
54
- // });
61
+ const styles = StyleSheet.create({
62
+ iosPicker: {
63
+ position: "absolute",
64
+ bottom: 0,
65
+ left: 0,
66
+ right: 0,
67
+ flexDirection: "row",
68
+ justifyContent: "center",
69
+ width: deviceWidth, // TODO
70
+ maxWidth: deviceWidth,
71
+ maxHeight: deviceHeight,
72
+ backgroundColor: "green", // TODO
73
+ // backgroundColor: "rgba(255, 255, 255, 1)",
74
+ },
75
+ iosSafeArea: {
76
+ backgroundColor: "yellow",
77
+ // backgroundColor: "white",// TODO
78
+ flexDirection: "column",
79
+ width: deviceWidth,
80
+ maxWidth: deviceWidth,
81
+ },
82
+ iosButton: {
83
+ alignSelf: "flex-end",
84
+ },
85
+ iosNativePicker: {
86
+ //backgroundColor: "white",// TODO
87
+ backgroundColor: "red",
88
+ },
89
+ });
package/src/components/Picker/PickerComponent.web.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as React from "react";
2
- import { /* StyleSheet, Dimensions, */ Text } from "react-native";
2
+ import { StyleSheet, Dimensions } from "react-native";
3
3
 
4
- // import { Picker as NativePicker } from "@react-native-picker/picker";
4
+ import { Picker as NativePicker } from "@react-native-picker/picker";
5
5
 
6
6
  import type { IconSlot } from "../../interfaces/Icon";
7
7
 
8
8
  import { PickerOption } from "./Picker";
9
9
 
10
- // const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
10
+ const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
11
11
 
12
12
  interface PickerComponentProps {
13
13
  Icon: IconSlot["Icon"];
@@ -18,20 +18,42 @@ interface PickerComponentProps {
18
18
  handleValueChange: (newValue: string, itemIndex: number) => void;
19
19
  }
20
20
 
21
- export const PickerComponent: React.FC<PickerComponentProps> = () => {
22
- return <Text>web</Text>;
21
+ export const PickerComponent: React.FC<PickerComponentProps> = ({
22
+ androidPickerRef,
23
+ togglePickerVisible,
24
+ pickerOptions,
25
+ internalValue,
26
+ handleValueChange,
27
+ }) => {
28
+ return (
29
+ <NativePicker
30
+ selectedValue={internalValue}
31
+ onValueChange={handleValueChange}
32
+ style={styles.nonIosPicker}
33
+ ref={androidPickerRef}
34
+ onBlur={togglePickerVisible}
35
+ >
36
+ {(pickerOptions as unknown as PickerOption[]).map((option) => (
37
+ <NativePicker.Item
38
+ label={option.label}
39
+ value={option.value}
40
+ key={option.value}
41
+ />
42
+ ))}
43
+ </NativePicker>
44
+ );
23
45
  };
24
46
 
25
- // const styles = StyleSheet.create({
26
- // nonIosPicker: {
27
- // opacity: 0,
28
- // position: "absolute",
29
- // top: 0,
30
- // left: 0,
31
- // right: 0,
32
- // bottom: 0,
33
- // width: "100%",
34
- // maxWidth: deviceWidth,
35
- // maxHeight: deviceHeight,
36
- // },
37
- // });
47
+ const styles = StyleSheet.create({
48
+ nonIosPicker: {
49
+ opacity: 0,
50
+ position: "absolute",
51
+ top: 0,
52
+ left: 0,
53
+ right: 0,
54
+ bottom: 0,
55
+ width: "100%",
56
+ maxWidth: deviceWidth,
57
+ maxHeight: deviceHeight,
58
+ },
59
+ });