@draftbit/core 43.4.5-ccf125.1 → 43.4.5-d442fc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Accordion/AccordionItem.js +5 -21
- package/lib/commonjs/components/Accordion/AccordionItem.js.map +1 -1
- package/lib/commonjs/components/Elevation.js +14 -3
- package/lib/commonjs/components/Elevation.js.map +1 -1
- package/lib/commonjs/components/FAB.js +5 -19
- package/lib/commonjs/components/FAB.js.map +1 -1
- package/lib/commonjs/components/FieldSearchBarFull.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButton.js +6 -9
- package/lib/commonjs/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +8 -18
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +9 -14
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/components/TabView/TabView.js +103 -0
- package/lib/commonjs/components/TabView/TabView.js.map +1 -0
- package/lib/commonjs/components/TabView/TabViewItem.js +27 -0
- package/lib/commonjs/components/TabView/TabViewItem.js.map +1 -0
- package/lib/commonjs/components/TabView/index.js +24 -0
- package/lib/commonjs/components/TabView/index.js.map +1 -0
- package/lib/commonjs/index.js +14 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/TabView.js +80 -0
- package/lib/commonjs/mappings/TabView.js.map +1 -0
- package/lib/commonjs/utilities.js +0 -16
- package/lib/commonjs/utilities.js.map +1 -1
- package/lib/module/components/DatePicker/DatePickerComponentType.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButton.js +6 -8
- package/lib/module/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonGroup.js +8 -17
- package/lib/module/components/RadioButton/RadioButtonGroup.js.map +1 -1
- package/lib/module/components/RadioButton/RadioButtonRow.js +10 -15
- package/lib/module/components/RadioButton/RadioButtonRow.js.map +1 -1
- package/lib/module/components/TabView/TabView.js +88 -0
- package/lib/module/components/TabView/TabView.js.map +1 -0
- package/lib/module/components/TabView/TabViewItem.js +19 -0
- package/lib/module/components/TabView/TabViewItem.js.map +1 -0
- package/lib/module/components/TabView/index.js +3 -0
- package/lib/module/components/TabView/index.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/ImageBackground.js.map +1 -1
- package/lib/module/mappings/KeyboardAvoidingView.js.map +1 -1
- package/lib/module/mappings/TabView.js +71 -0
- package/lib/module/mappings/TabView.js.map +1 -0
- package/lib/module/utilities.js +0 -14
- package/lib/module/utilities.js.map +1 -1
- package/lib/typescript/src/components/RadioButton/RadioButton.d.ts +1 -1
- package/lib/typescript/src/components/RadioButton/RadioButtonGroup.d.ts +1 -1
- package/lib/typescript/src/components/TabView/TabView.d.ts +19 -0
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +10 -0
- package/lib/typescript/src/components/TabView/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/mappings/TabView.d.ts +111 -0
- package/lib/typescript/src/utilities.d.ts +0 -1
- package/package.json +4 -2
- package/src/components/RadioButton/RadioButton.js +5 -9
- package/src/components/RadioButton/RadioButton.tsx +9 -12
- package/src/components/RadioButton/RadioButtonGroup.js +8 -14
- package/src/components/RadioButton/RadioButtonGroup.tsx +12 -21
- package/src/components/RadioButton/RadioButtonRow.js +9 -15
- package/src/components/RadioButton/RadioButtonRow.tsx +13 -19
- package/src/components/TabView/TabView.js +33 -0
- package/src/components/TabView/TabView.tsx +97 -0
- package/src/components/TabView/TabViewItem.js +5 -0
- package/src/components/TabView/TabViewItem.tsx +21 -0
- package/src/components/TabView/index.js +2 -0
- package/src/components/TabView/index.ts +2 -0
- package/src/index.js +1 -0
- package/src/index.tsx +1 -0
- package/src/mappings/TabView.js +73 -0
- package/src/mappings/TabView.ts +80 -0
- package/src/utilities.js +0 -12
- package/src/utilities.ts +0 -13
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["TabView.tsx"],"names":["TabViewComponent","Icon","tabBarPosition","keyboardDismissMode","swipeEnabled","scrollEnabled","activeColor","inactiveColor","pressColor","indicatorColor","style","children","index","setIndex","React","useState","routes","setRoutes","tabScenes","setTabScenes","useEffect","newRoutes","scenes","Children","toArray","filter","child","type","TabViewItem","forEach","props","id","push","key","indexChangeHandler","i","renderTabBar","console","log","backgroundColor","route","color","icon"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, TextStyle, ViewStyle } from \"react-native\";\nimport { TabView, TabBar, SceneMap } from \"react-native-tab-view\";\n\n// import { withTheme } from \"../../theming\";\nimport TabViewItem from \"./TabViewItem\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\ntype TabBarPosition = \"top\" | \"bottom\";\ntype KeyboardDismissMode = \"none\" | \"auto\" | \"on-drag\";\n\ntype TabViewProps = {\n tabBarPosition?: TabBarPosition;\n keyboardDismissMode?: KeyboardDismissMode;\n swipeEnabled?: boolean;\n scrollEnabled?: boolean;\n activeColor?: string;\n inactiveColor?: string;\n pressColor?: string;\n indicatorColor?: string;\n style?: StyleProp<TextStyle | ViewStyle>;\n children: React.ReactNode;\n} & IconSlot;\n\nconst TabViewComponent = ({\n Icon,\n tabBarPosition,\n keyboardDismissMode,\n swipeEnabled,\n scrollEnabled,\n activeColor,\n inactiveColor,\n pressColor,\n indicatorColor,\n style,\n children,\n}: TabViewProps) => {\n const [index, setIndex] = React.useState(0);\n const [routes, setRoutes] = React.useState([]);\n const [tabScenes, setTabScenes] = React.useState({});\n\n React.useEffect(() => {\n const newRoutes: any = [];\n const scenes: any = {};\n\n React.Children.toArray(children)\n .filter((child: any) => child.type === TabViewItem)\n .forEach((child: any) => {\n if (child?.props?.id) {\n newRoutes.push({\n key: child?.props?.id,\n ...child?.props,\n });\n scenes[child?.props?.id] = () => child;\n }\n });\n\n setRoutes(newRoutes);\n setTabScenes(scenes);\n }, [children]);\n\n const indexChangeHandler = (i: any) => setIndex(i);\n\n const renderTabBar = (props: any) => {\n console.log(props);\n return (\n <TabBar\n {...props}\n activeColor={activeColor}\n inactiveColor={inactiveColor}\n pressColor={pressColor}\n scrollEnabled={scrollEnabled}\n indicatorStyle={{ backgroundColor: indicatorColor }}\n renderIcon={({ route, color }) =>\n route?.icon ? (\n <Icon name={route.icon} color={color} size={36} />\n ) : null\n }\n style={style}\n />\n );\n };\n\n return (\n <TabView\n navigationState={{ index, routes }}\n renderScene={SceneMap(tabScenes)}\n renderTabBar={renderTabBar}\n onIndexChange={indexChangeHandler}\n tabBarPosition={tabBarPosition}\n keyboardDismissMode={keyboardDismissMode}\n swipeEnabled={swipeEnabled}\n />\n );\n};\n\nexport default TabViewComponent;\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
const TabViewItem = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
title,
|
|
11
|
+
id,
|
|
12
|
+
icon,
|
|
13
|
+
children,
|
|
14
|
+
accessibilityLabel
|
|
15
|
+
} = _ref;
|
|
16
|
+
console.log({
|
|
17
|
+
title,
|
|
18
|
+
id,
|
|
19
|
+
icon,
|
|
20
|
+
accessibilityLabel
|
|
21
|
+
});
|
|
22
|
+
return children;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var _default = TabViewItem;
|
|
26
|
+
exports.default = _default;
|
|
27
|
+
//# sourceMappingURL=TabViewItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["TabViewItem.tsx"],"names":["TabViewItem","title","id","icon","children","accessibilityLabel","console","log"],"mappings":";;;;;;;AASA,MAAMA,WAAW,GAAG,QAMI;AAAA,MANH;AACnBC,IAAAA,KADmB;AAEnBC,IAAAA,EAFmB;AAGnBC,IAAAA,IAHmB;AAInBC,IAAAA,QAJmB;AAKnBC,IAAAA;AALmB,GAMG;AACtBC,EAAAA,OAAO,CAACC,GAAR,CAAY;AAAEN,IAAAA,KAAF;AAASC,IAAAA,EAAT;AAAaC,IAAAA,IAAb;AAAmBE,IAAAA;AAAnB,GAAZ;AACA,SAAOD,QAAP;AACD,CATD;;eAWeJ,W","sourcesContent":["import React from \"react\";\ninterface TabViewItemProps {\n title: string;\n id: string;\n icon: string;\n accessibilityLabel: string;\n children: React.ReactNode;\n}\n\nconst TabViewItem = ({\n title,\n id,\n icon,\n children,\n accessibilityLabel,\n}: TabViewItemProps) => {\n console.log({ title, id, icon, accessibilityLabel });\n return children;\n};\n\nexport default TabViewItem;\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TabView", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _TabView.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _TabViewItem.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var _TabView = _interopRequireDefault(require("./TabView"));
|
|
20
|
+
|
|
21
|
+
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
22
|
+
|
|
23
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as TabView } from \"./TabView\";\nexport { default as TabViewItem } from \"./TabViewItem\";\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -357,6 +357,18 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
357
357
|
return _Switch.SwitchRow;
|
|
358
358
|
}
|
|
359
359
|
});
|
|
360
|
+
Object.defineProperty(exports, "TabView", {
|
|
361
|
+
enumerable: true,
|
|
362
|
+
get: function () {
|
|
363
|
+
return _TabView.TabView;
|
|
364
|
+
}
|
|
365
|
+
});
|
|
366
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
367
|
+
enumerable: true,
|
|
368
|
+
get: function () {
|
|
369
|
+
return _TabView.TabViewItem;
|
|
370
|
+
}
|
|
371
|
+
});
|
|
360
372
|
Object.defineProperty(exports, "TextField", {
|
|
361
373
|
enumerable: true,
|
|
362
374
|
get: function () {
|
|
@@ -456,6 +468,8 @@ var _ActionSheet = require("./components/ActionSheet");
|
|
|
456
468
|
|
|
457
469
|
var _Swiper = require("./components/Swiper");
|
|
458
470
|
|
|
471
|
+
var _TabView = require("./components/TabView");
|
|
472
|
+
|
|
459
473
|
var _Layout = require("./components/Layout");
|
|
460
474
|
|
|
461
475
|
var _index = require("./components/RadioButton/index");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAEA;;AASA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { injectIcon } from \"./interfaces/Icon\";\nexport { withTheme, ThemeProvider } from \"./theming\";\nexport { default as Provider } from \"./Provider\";\nexport { default as DefaultTheme } from \"./styles/DefaultTheme\";\n\nexport { Link } from \"./components/Text\";\nexport { ButtonSolid, ButtonOutline } from \"./components/Button\";\nexport { default as Avatar } from \"./components/CircleImage\";\nexport { default as AvatarEdit } from \"./components/AvatarEdit\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Carousel } from \"./components/Carousel\";\nexport { Checkbox, CheckboxGroup, CheckboxRow } from \"./components/Checkbox\";\nexport { default as CircleImage } from \"./components/CircleImage\";\nexport { default as Container } from \"./components/Container\";\nexport { default as Divider } from \"./components/Divider\";\nexport { default as FAB } from \"./components/FAB\";\nexport { default as FieldSearchBarFull } from \"./components/FieldSearchBarFull\";\nexport { default as IconButton } from \"./components/IconButton\";\nexport { default as Image } from \"./components/Image\";\nexport { default as NumberInput } from \"./components/NumberInput\";\nexport { default as ScreenContainer } from \"./components/ScreenContainer\";\nexport { default as StarRating } from \"./components/StarRating\";\nexport { default as Surface } from \"./components/Surface\";\nexport { default as Switch, SwitchRow } from \"./components/Switch\";\nexport { default as TextField } from \"./components/TextField\";\nexport { default as ToggleButton } from \"./components/ToggleButton\";\nexport { default as Touchable } from \"./components/Touchable\";\nexport { AccordionGroup, AccordionItem } from \"./components/Accordion\";\nexport {\n ActionSheet,\n ActionSheetItem,\n ActionSheetCancel,\n} from \"./components/ActionSheet\";\nexport { Swiper, SwiperItem } from \"./components/Swiper\";\nexport { TabView, TabViewItem } from \"./components/TabView\";\n\nexport {\n Center,\n Circle,\n Square,\n Row,\n Stack,\n Spacer,\n} from \"./components/Layout\";\n\nexport {\n RadioButton,\n RadioButtonGroup,\n RadioButtonRow,\n RadioButtonFieldGroup,\n} from \"./components/RadioButton/index\";\n\n/* Deprecated: Fix or Delete! */\nexport { default as Button } from \"./components/DeprecatedButton\";\nexport { default as CardBlock } from \"./components/CardBlock\";\nexport { default as CardContainer } from \"./components/CardContainer\";\nexport { default as CardContainerRating } from \"./components/CardContainerRating\";\nexport { default as CardInline } from \"./components/CardInline\";\nexport { default as DatePicker } from \"./components/DatePicker/DatePicker\";\nexport { default as HeaderLarge } from \"./components/HeaderLarge\";\nexport { default as HeaderMedium } from \"./components/HeaderMedium\";\nexport { default as HeaderOverline } from \"./components/HeaderOverline\";\nexport { default as Picker } from \"./components/Picker/Picker\";\nexport { default as ProgressBar } from \"./components/ProgressBar\";\nexport { default as ProgressCircle } from \"./components/ProgressCircle\";\nexport { default as RowBodyIcon } from \"./components/RowBodyIcon\";\nexport { default as RowHeadlineImageCaption } from \"./components/RowHeadlineImageCaption\";\nexport { default as RowHeadlineImageIcon } from \"./components/RowHeadlineImageIcon\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as Stepper } from \"./components/Stepper\";\nexport { useAuthState } from \"./components/useAuthState\";\n"]}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SEED_DATA = void 0;
|
|
7
|
+
|
|
8
|
+
var _types = require("@draftbit/types");
|
|
9
|
+
|
|
10
|
+
const SEED_DATA = [{
|
|
11
|
+
name: "TabView",
|
|
12
|
+
tag: "TabView",
|
|
13
|
+
category: _types.COMPONENT_TYPES.container,
|
|
14
|
+
layout: {},
|
|
15
|
+
props: {
|
|
16
|
+
tabBarPosition: (0, _types.createTextEnumProp)({
|
|
17
|
+
label: "Tab Bar Position",
|
|
18
|
+
description: "Tab Bar Position",
|
|
19
|
+
options: ["top", "bottom"],
|
|
20
|
+
defaultValue: "top"
|
|
21
|
+
}),
|
|
22
|
+
keyboardDismissMode: (0, _types.createTextEnumProp)({
|
|
23
|
+
label: "Keyboard Dismiss Mode",
|
|
24
|
+
description: "Keyboard Dismiss Mode",
|
|
25
|
+
options: ["auto", "on-drag", "none"],
|
|
26
|
+
defaultValue: "auto"
|
|
27
|
+
}),
|
|
28
|
+
swipeEnabled: (0, _types.createBoolProp)({
|
|
29
|
+
label: "Swipe Enabled",
|
|
30
|
+
description: "Swipe Enabled",
|
|
31
|
+
defaultValue: true
|
|
32
|
+
}),
|
|
33
|
+
scrollEnabled: (0, _types.createBoolProp)({
|
|
34
|
+
label: "Scroll Enabled",
|
|
35
|
+
description: "Scroll Enabled",
|
|
36
|
+
defaultValue: true
|
|
37
|
+
}),
|
|
38
|
+
activeColor: (0, _types.createColorProp)({
|
|
39
|
+
label: "Active Color",
|
|
40
|
+
description: "Active Color",
|
|
41
|
+
defaultValue: "primary"
|
|
42
|
+
}),
|
|
43
|
+
inactiveColor: (0, _types.createColorProp)({
|
|
44
|
+
label: "Inactive Color",
|
|
45
|
+
description: "Inactive Color",
|
|
46
|
+
defaultValue: null
|
|
47
|
+
}),
|
|
48
|
+
pressColor: (0, _types.createColorProp)({
|
|
49
|
+
label: "Press Color",
|
|
50
|
+
description: "Press Color",
|
|
51
|
+
defaultValue: null
|
|
52
|
+
}),
|
|
53
|
+
indicatorColor: (0, _types.createColorProp)({
|
|
54
|
+
label: "Indicator Color",
|
|
55
|
+
description: "Indicator Color",
|
|
56
|
+
defaultValue: null
|
|
57
|
+
})
|
|
58
|
+
}
|
|
59
|
+
}, {
|
|
60
|
+
name: "TabViewItem",
|
|
61
|
+
tag: "TabViewItem",
|
|
62
|
+
category: _types.COMPONENT_TYPES.container,
|
|
63
|
+
layout: {},
|
|
64
|
+
props: {
|
|
65
|
+
title: (0, _types.createTextProp)({
|
|
66
|
+
label: "Title",
|
|
67
|
+
description: "Tab Title"
|
|
68
|
+
}),
|
|
69
|
+
id: (0, _types.createTextProp)({
|
|
70
|
+
label: "Id",
|
|
71
|
+
description: "Tab Id"
|
|
72
|
+
}),
|
|
73
|
+
accessibilityLabel: (0, _types.createTextProp)({
|
|
74
|
+
label: "Accessibility Label",
|
|
75
|
+
description: "Accessibility Label"
|
|
76
|
+
})
|
|
77
|
+
}
|
|
78
|
+
}];
|
|
79
|
+
exports.SEED_DATA = SEED_DATA;
|
|
80
|
+
//# sourceMappingURL=TabView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["TabView.ts"],"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","container","layout","props","tabBarPosition","label","description","options","defaultValue","keyboardDismissMode","swipeEnabled","scrollEnabled","activeColor","inactiveColor","pressColor","indicatorColor","title","id","accessibilityLabel"],"mappings":";;;;;;;AAAA;;AAQO,MAAMA,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,QAAQ,EAAEC,uBAAgBC,SAH5B;AAIEC,EAAAA,MAAM,EAAE,EAJV;AAKEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,cAAc,EAAE,+BAAmB;AACjCC,MAAAA,KAAK,EAAE,kBAD0B;AAEjCC,MAAAA,WAAW,EAAE,kBAFoB;AAGjCC,MAAAA,OAAO,EAAE,CAAC,KAAD,EAAQ,QAAR,CAHwB;AAIjCC,MAAAA,YAAY,EAAE;AAJmB,KAAnB,CADX;AAOLC,IAAAA,mBAAmB,EAAE,+BAAmB;AACtCJ,MAAAA,KAAK,EAAE,uBAD+B;AAEtCC,MAAAA,WAAW,EAAE,uBAFyB;AAGtCC,MAAAA,OAAO,EAAE,CAAC,MAAD,EAAS,SAAT,EAAoB,MAApB,CAH6B;AAItCC,MAAAA,YAAY,EAAE;AAJwB,KAAnB,CAPhB;AAaLE,IAAAA,YAAY,EAAE,2BAAe;AAC3BL,MAAAA,KAAK,EAAE,eADoB;AAE3BC,MAAAA,WAAW,EAAE,eAFc;AAG3BE,MAAAA,YAAY,EAAE;AAHa,KAAf,CAbT;AAkBLG,IAAAA,aAAa,EAAE,2BAAe;AAC5BN,MAAAA,KAAK,EAAE,gBADqB;AAE5BC,MAAAA,WAAW,EAAE,gBAFe;AAG5BE,MAAAA,YAAY,EAAE;AAHc,KAAf,CAlBV;AAuBLI,IAAAA,WAAW,EAAE,4BAAgB;AAC3BP,MAAAA,KAAK,EAAE,cADoB;AAE3BC,MAAAA,WAAW,EAAE,cAFc;AAG3BE,MAAAA,YAAY,EAAE;AAHa,KAAhB,CAvBR;AA4BLK,IAAAA,aAAa,EAAE,4BAAgB;AAC7BR,MAAAA,KAAK,EAAE,gBADsB;AAE7BC,MAAAA,WAAW,EAAE,gBAFgB;AAG7BE,MAAAA,YAAY,EAAE;AAHe,KAAhB,CA5BV;AAiCLM,IAAAA,UAAU,EAAE,4BAAgB;AAC1BT,MAAAA,KAAK,EAAE,aADmB;AAE1BC,MAAAA,WAAW,EAAE,aAFa;AAG1BE,MAAAA,YAAY,EAAE;AAHY,KAAhB,CAjCP;AAsCLO,IAAAA,cAAc,EAAE,4BAAgB;AAC9BV,MAAAA,KAAK,EAAE,iBADuB;AAE9BC,MAAAA,WAAW,EAAE,iBAFiB;AAG9BE,MAAAA,YAAY,EAAE;AAHgB,KAAhB;AAtCX;AALT,CADuB,EAmDvB;AACEX,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,QAAQ,EAAEC,uBAAgBC,SAH5B;AAIEC,EAAAA,MAAM,EAAE,EAJV;AAKEC,EAAAA,KAAK,EAAE;AACLa,IAAAA,KAAK,EAAE,2BAAe;AACpBX,MAAAA,KAAK,EAAE,OADa;AAEpBC,MAAAA,WAAW,EAAE;AAFO,KAAf,CADF;AAKLW,IAAAA,EAAE,EAAE,2BAAe;AACjBZ,MAAAA,KAAK,EAAE,IADU;AAEjBC,MAAAA,WAAW,EAAE;AAFI,KAAf,CALC;AASLY,IAAAA,kBAAkB,EAAE,2BAAe;AACjCb,MAAAA,KAAK,EAAE,qBAD0B;AAEjCC,MAAAA,WAAW,EAAE;AAFoB,KAAf;AATf;AALT,CAnDuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createTextProp,\n createTextEnumProp,\n createBoolProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = [\n {\n name: \"TabView\",\n tag: \"TabView\",\n category: COMPONENT_TYPES.container,\n layout: {},\n props: {\n tabBarPosition: createTextEnumProp({\n label: \"Tab Bar Position\",\n description: \"Tab Bar Position\",\n options: [\"top\", \"bottom\"],\n defaultValue: \"top\",\n }),\n keyboardDismissMode: createTextEnumProp({\n label: \"Keyboard Dismiss Mode\",\n description: \"Keyboard Dismiss Mode\",\n options: [\"auto\", \"on-drag\", \"none\"],\n defaultValue: \"auto\",\n }),\n swipeEnabled: createBoolProp({\n label: \"Swipe Enabled\",\n description: \"Swipe Enabled\",\n defaultValue: true,\n }),\n scrollEnabled: createBoolProp({\n label: \"Scroll Enabled\",\n description: \"Scroll Enabled\",\n defaultValue: true,\n }),\n activeColor: createColorProp({\n label: \"Active Color\",\n description: \"Active Color\",\n defaultValue: \"primary\",\n }),\n inactiveColor: createColorProp({\n label: \"Inactive Color\",\n description: \"Inactive Color\",\n defaultValue: null,\n }),\n pressColor: createColorProp({\n label: \"Press Color\",\n description: \"Press Color\",\n defaultValue: null,\n }),\n indicatorColor: createColorProp({\n label: \"Indicator Color\",\n description: \"Indicator Color\",\n defaultValue: null,\n }),\n },\n },\n {\n name: \"TabViewItem\",\n tag: \"TabViewItem\",\n category: COMPONENT_TYPES.container,\n layout: {},\n props: {\n title: createTextProp({\n label: \"Title\",\n description: \"Tab Title\",\n }),\n id: createTextProp({\n label: \"Id\",\n description: \"Tab Id\",\n }),\n accessibilityLabel: createTextProp({\n label: \"Accessibility Label\",\n description: \"Accessibility Label\",\n }),\n },\n },\n];\n"]}
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.applyStyles = applyStyles;
|
|
7
7
|
exports.extractStyles = extractStyles;
|
|
8
|
-
exports.getRealValue = getRealValue;
|
|
9
8
|
|
|
10
9
|
var _reactNative = require("react-native");
|
|
11
10
|
|
|
@@ -72,19 +71,4 @@ function applyStyles(baseStyles, stylesToApply) {
|
|
|
72
71
|
|
|
73
72
|
return flattenedStyles;
|
|
74
73
|
}
|
|
75
|
-
|
|
76
|
-
function getRealValue(value) {
|
|
77
|
-
// console.log("getRealValue typeof", typeof value);
|
|
78
|
-
// console.log("getRealValue value", value);
|
|
79
|
-
switch (typeof value) {
|
|
80
|
-
case "string":
|
|
81
|
-
return value;
|
|
82
|
-
|
|
83
|
-
case "number":
|
|
84
|
-
return String(value);
|
|
85
|
-
|
|
86
|
-
default:
|
|
87
|
-
return undefined;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
74
|
//# sourceMappingURL=utilities.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utilities.ts"],"names":["extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","StyleSheet","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries"
|
|
1
|
+
{"version":3,"sources":["utilities.ts"],"names":["extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","StyleSheet","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries"],"mappings":";;;;;;;;AAAA;;AAEO,SAASA,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFC,wBAAWC,OAAX,CAAmBd,KAAK,IAAI,EAA5B,CAbJ;;AAeA,QAAMe,UAAqB,GAAG;AAC5Bd,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcG,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGN,wBAAWC,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\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\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -3,7 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import Config from "../Config";
|
|
5
5
|
import IconButton from "../IconButton";
|
|
6
|
-
import { getRealValue } from "../../utilities";
|
|
7
6
|
import { useRadioButtonGroupContext } from "./context";
|
|
8
7
|
|
|
9
8
|
const RadioButton = _ref => {
|
|
@@ -14,7 +13,7 @@ const RadioButton = _ref => {
|
|
|
14
13
|
value,
|
|
15
14
|
selected,
|
|
16
15
|
unselectedColor,
|
|
17
|
-
onPress,
|
|
16
|
+
onPress = () => {},
|
|
18
17
|
size = Config.radioButtonSize,
|
|
19
18
|
selectedIcon = "MaterialIcons/radio-button-checked",
|
|
20
19
|
unselectedIcon = "MaterialIcons/radio-button-unchecked",
|
|
@@ -25,17 +24,16 @@ const RadioButton = _ref => {
|
|
|
25
24
|
value: contextValue,
|
|
26
25
|
onValueChange
|
|
27
26
|
} = useRadioButtonGroupContext();
|
|
28
|
-
const realValue = getRealValue(value);
|
|
29
|
-
const realContextValue = getRealValue(contextValue);
|
|
30
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue && realValue && realContextValue === realValue;
|
|
31
27
|
|
|
32
28
|
const handlePress = () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
onPress && onPress();
|
|
30
|
+
|
|
31
|
+
if (onValueChange && value) {
|
|
32
|
+
onValueChange(value);
|
|
36
33
|
}
|
|
37
34
|
};
|
|
38
35
|
|
|
36
|
+
const isSelected = selected || contextValue != null && contextValue === value;
|
|
39
37
|
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
40
38
|
Icon: Icon,
|
|
41
39
|
icon: isSelected ? selectedIcon : unselectedIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButton.tsx"],"names":["React","Config","IconButton","
|
|
1
|
+
{"version":3,"sources":["RadioButton.tsx"],"names":["React","Config","IconButton","useRadioButtonGroupContext","RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","handlePress","isSelected"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAGA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,0BAAT,QAA2C,WAA3C;;AAiBA,MAAMC,WAAuC,GAAG,QAa1C;AAAA,MAb2C;AAC/CC,IAAAA,IAD+C;AAE/CC,IAAAA,QAAQ,GAAG,KAFoC;AAG/CC,IAAAA,KAH+C;AAI/CC,IAAAA,KAJ+C;AAK/CC,IAAAA,QAL+C;AAM/CC,IAAAA,eAN+C;AAO/CC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAP6B;AAQ/CC,IAAAA,IAAI,GAAGX,MAAM,CAACY,eARiC;AAS/CC,IAAAA,YAAY,GAAG,oCATgC;AAU/CC,IAAAA,cAAc,GAAG,sCAV8B;AAW/CC,IAAAA,KAX+C;AAY/C,OAAGC;AAZ4C,GAa3C;AACJ,QAAM;AAAET,IAAAA,KAAK,EAAEU,YAAT;AAAuBC,IAAAA;AAAvB,MAAyChB,0BAA0B,EAAzE;;AAEA,QAAMiB,WAAW,GAAG,MAAM;AACxBT,IAAAA,OAAO,IAAIA,OAAO,EAAlB;;AAEA,QAAIQ,aAAa,IAAIX,KAArB,EAA4B;AAC1BW,MAAAA,aAAa,CAACX,KAAD,CAAb;AACD;AACF,GAND;;AAQA,QAAMa,UAAU,GACdZ,QAAQ,IAAKS,YAAY,IAAI,IAAhB,IAAwBA,YAAY,KAAKV,KADxD;AAGA,sBACE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEH,IADR;AAEE,IAAA,IAAI,EAAEgB,UAAU,GAAGP,YAAH,GAAkBC,cAFpC;AAGE,IAAA,KAAK,EAAEM,UAAU,GAAGd,KAAH,GAAWG,eAH9B;AAIE,IAAA,QAAQ,EAAEJ,QAJZ;AAKE,IAAA,OAAO,EAAEc,WALX;AAME,IAAA,IAAI,EAAER,IANR;AAOE,IAAA,KAAK,EAAEI;AAPT,KAQMC,IARN,EADF;AAYD,CAvCD;;AAyCA,eAAeb,WAAf","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, ViewStyle } from \"react-native\";\n\nimport Config from \"../Config\";\nimport IconButton from \"../IconButton\";\nimport { useRadioButtonGroupContext } from \"./context\";\n\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\nexport type RadioButtonProps = {\n selected?: boolean;\n disabled?: boolean;\n color?: string;\n value?: string;\n unselectedColor?: string;\n onPress?: () => void;\n style?: StyleProp<ViewStyle>;\n size?: number;\n selectedIcon?: string;\n unselectedIcon?: string;\n} & IconSlot;\n\nconst RadioButton: React.FC<RadioButtonProps> = ({\n Icon,\n disabled = false,\n color,\n value,\n selected,\n unselectedColor,\n onPress = () => {},\n size = Config.radioButtonSize,\n selectedIcon = \"MaterialIcons/radio-button-checked\",\n unselectedIcon = \"MaterialIcons/radio-button-unchecked\",\n style,\n ...rest\n}) => {\n const { value: contextValue, onValueChange } = useRadioButtonGroupContext();\n\n const handlePress = () => {\n onPress && onPress();\n\n if (onValueChange && value) {\n onValueChange(value);\n }\n };\n\n const isSelected =\n selected || (contextValue != null && contextValue === value);\n\n return (\n <IconButton\n Icon={Icon}\n icon={isSelected ? selectedIcon : unselectedIcon}\n color={isSelected ? color : unselectedColor}\n disabled={disabled}\n onPress={handlePress}\n size={size}\n style={style}\n {...rest}\n />\n );\n};\n\nexport default RadioButton;\n"]}
|
|
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { View } from "react-native";
|
|
5
|
-
import { getRealValue } from "../../utilities";
|
|
6
5
|
import { radioButtonGroupContext, Direction } from "./context";
|
|
7
6
|
const {
|
|
8
7
|
Provider
|
|
@@ -12,35 +11,27 @@ const RadioButtonGroup = _ref => {
|
|
|
12
11
|
let {
|
|
13
12
|
direction = Direction.Vertical,
|
|
14
13
|
value,
|
|
15
|
-
onValueChange,
|
|
14
|
+
onValueChange = () => {},
|
|
16
15
|
defaultValue,
|
|
17
16
|
style,
|
|
18
17
|
children,
|
|
19
18
|
...rest
|
|
20
19
|
} = _ref;
|
|
21
|
-
const [internalValue, setInternalValue] = React.useState();
|
|
20
|
+
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
22
21
|
React.useEffect(() => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (realValue) {
|
|
26
|
-
setInternalValue(realValue);
|
|
22
|
+
if (value != null) {
|
|
23
|
+
setInternalValue(value);
|
|
27
24
|
}
|
|
28
25
|
}, [value]);
|
|
29
26
|
React.useEffect(() => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
if (realDefaultValue) {
|
|
33
|
-
setInternalValue(realDefaultValue);
|
|
27
|
+
if (defaultValue != null) {
|
|
28
|
+
setInternalValue(defaultValue);
|
|
34
29
|
}
|
|
35
30
|
}, [defaultValue]);
|
|
36
31
|
|
|
37
32
|
const handleValueChange = newValue => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
if (realNewValue) {
|
|
41
|
-
setInternalValue(newValue);
|
|
42
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
|
|
43
|
-
}
|
|
33
|
+
setInternalValue(newValue);
|
|
34
|
+
onValueChange(newValue);
|
|
44
35
|
};
|
|
45
36
|
|
|
46
37
|
const _containerStyle = [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","
|
|
1
|
+
{"version":3,"sources":["RadioButtonGroup.tsx"],"names":["React","View","radioButtonGroupContext","Direction","Provider","RadioButtonGroup","direction","Vertical","value","onValueChange","defaultValue","style","children","rest","internalValue","setInternalValue","useState","useEffect","handleValueChange","newValue","_containerStyle","flexDirection","Horizontal","push","alignItems","minHeight"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAA2C,cAA3C;AAEA,SAASC,uBAAT,EAAkCC,SAAlC,QAAmD,WAAnD;AAWA,MAAM;AAAEC,EAAAA;AAAF,IAAeF,uBAArB;;AAEA,MAAMG,gBAAiD,GAAG,QAQpD;AAAA,MARqD;AACzDC,IAAAA,SAAS,GAAGH,SAAS,CAACI,QADmC;AAEzDC,IAAAA,KAFyD;AAGzDC,IAAAA,aAAa,GAAG,MAAM,CAAE,CAHiC;AAIzDC,IAAAA,YAJyD;AAKzDC,IAAAA,KALyD;AAMzDC,IAAAA,QANyD;AAOzD,OAAGC;AAPsD,GAQrD;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCf,KAAK,CAACgB,QAAN,CACxCR,KAAK,IAAIE,YAD+B,CAA1C;AAIAV,EAAAA,KAAK,CAACiB,SAAN,CAAgB,MAAM;AACpB,QAAIT,KAAK,IAAI,IAAb,EAAmB;AACjBO,MAAAA,gBAAgB,CAACP,KAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,KAAD,CAJH;AAMAR,EAAAA,KAAK,CAACiB,SAAN,CAAgB,MAAM;AACpB,QAAIP,YAAY,IAAI,IAApB,EAA0B;AACxBK,MAAAA,gBAAgB,CAACL,YAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,YAAD,CAJH;;AAMA,QAAMQ,iBAAiB,GAAIC,QAAD,IAAsB;AAC9CJ,IAAAA,gBAAgB,CAACI,QAAD,CAAhB;AACAV,IAAAA,aAAa,CAACU,QAAD,CAAb;AACD,GAHD;;AAKA,QAAMC,eAAqC,GAAG,CAC5C;AACEC,IAAAA,aAAa,EAAEf,SAAS,KAAKH,SAAS,CAACmB,UAAxB,GAAqC,KAArC,GAA6C;AAD9D,GAD4C,CAA9C;;AAMA,MAAIhB,SAAS,KAAKH,SAAS,CAACI,QAA5B,EAAsC;AACpCa,IAAAA,eAAe,CAACG,IAAhB,CAAqB;AACnBC,MAAAA,UAAU,EAAE;AADO,KAArB;AAGD;;AAED,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAD,EAAoBd,KAApB;AAAb,KAA6CE,IAA7C,gBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAE;AACLL,MAAAA,KAAK,EAAEM,aAAa,IAAI,EADnB;AAELL,MAAAA,aAAa,EAAES,iBAFV;AAGLZ,MAAAA;AAHK;AADT,kBAOE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEc;AAAb,KAA+BR,QAA/B,CAPF,CADF,CADF;AAaD,CAvDD;;AAyDA,eAAeP,gBAAf","sourcesContent":["import * as React from \"react\";\nimport { View, StyleProp, ViewStyle } from \"react-native\";\nimport type { Theme } from \"../../styles/DefaultTheme\";\nimport { radioButtonGroupContext, Direction } from \"./context\";\nexport interface RadioButtonGroupProps {\n direction?: Direction;\n style?: StyleProp<ViewStyle>;\n value?: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string;\n theme: Theme;\n children: React.ReactNode;\n}\n\nconst { Provider } = radioButtonGroupContext;\n\nconst RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({\n direction = Direction.Vertical,\n value,\n onValueChange = () => {},\n defaultValue,\n style,\n children,\n ...rest\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 handleValueChange = (newValue: string) => {\n setInternalValue(newValue);\n onValueChange(newValue);\n };\n\n const _containerStyle: StyleProp<ViewStyle> = [\n {\n flexDirection: direction === Direction.Horizontal ? \"row\" : \"column\",\n },\n ];\n\n if (direction !== Direction.Vertical) {\n _containerStyle.push({\n alignItems: \"center\",\n });\n }\n\n return (\n <View style={[{ minHeight: 40 }, style]} {...rest}>\n <Provider\n value={{\n value: internalValue || \"\",\n onValueChange: handleValueChange,\n direction,\n }}\n >\n <View style={_containerStyle}>{children}</View>\n </Provider>\n </View>\n );\n};\n\nexport default RadioButtonGroup;\n"]}
|
|
@@ -7,7 +7,7 @@ import Text from "../Text";
|
|
|
7
7
|
import { useRadioButtonGroupContext } from "./context";
|
|
8
8
|
import { Direction as GroupDirection } from "./context";
|
|
9
9
|
import Touchable from "../Touchable";
|
|
10
|
-
import { extractStyles
|
|
10
|
+
import { extractStyles } from "../../utilities";
|
|
11
11
|
export let Direction;
|
|
12
12
|
|
|
13
13
|
(function (Direction) {
|
|
@@ -25,13 +25,13 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
|
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const renderLabel = (
|
|
29
|
-
if (typeof
|
|
28
|
+
const renderLabel = (value, labelStyle, textStyle) => {
|
|
29
|
+
if (typeof value === "string") {
|
|
30
30
|
return /*#__PURE__*/React.createElement(Text, {
|
|
31
31
|
style: [labelStyle, textStyle]
|
|
32
|
-
},
|
|
32
|
+
}, value);
|
|
33
33
|
} else {
|
|
34
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
34
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, value);
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
|
|
@@ -42,7 +42,7 @@ const RadioButtonRow = _ref => {
|
|
|
42
42
|
value,
|
|
43
43
|
color,
|
|
44
44
|
unselectedColor,
|
|
45
|
-
onPress,
|
|
45
|
+
onPress = () => {},
|
|
46
46
|
labelContainerStyle,
|
|
47
47
|
labelStyle,
|
|
48
48
|
radioButtonStyle,
|
|
@@ -57,15 +57,10 @@ const RadioButtonRow = _ref => {
|
|
|
57
57
|
onValueChange,
|
|
58
58
|
direction: parentDirection
|
|
59
59
|
} = useRadioButtonGroupContext();
|
|
60
|
-
const realValue = getRealValue(value);
|
|
61
|
-
const realContextValue = getRealValue(contextValue);
|
|
62
|
-
const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue && realValue && realContextValue === realValue;
|
|
63
60
|
|
|
64
61
|
const handlePress = () => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
|
|
68
|
-
}
|
|
62
|
+
onPress(value);
|
|
63
|
+
onValueChange && onValueChange(value);
|
|
69
64
|
};
|
|
70
65
|
|
|
71
66
|
const {
|
|
@@ -89,10 +84,10 @@ const RadioButtonRow = _ref => {
|
|
|
89
84
|
}
|
|
90
85
|
}, /*#__PURE__*/React.createElement(RadioButton, {
|
|
91
86
|
Icon: Icon,
|
|
92
|
-
selected:
|
|
93
|
-
value: realValue,
|
|
87
|
+
selected: selected || contextValue != null && contextValue === value,
|
|
94
88
|
color: color,
|
|
95
89
|
unselectedColor: unselectedColor,
|
|
90
|
+
onPress: handlePress,
|
|
96
91
|
style: radioButtonStyle
|
|
97
92
|
})));
|
|
98
93
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RadioButtonRow.tsx"],"names":["React","StyleSheet","View","Platform","RadioButton","Text","useRadioButtonGroupContext","Direction","GroupDirection","Touchable","extractStyles","
|
|
1
|
+
{"version":3,"sources":["RadioButtonRow.tsx"],"names":["React","StyleSheet","View","Platform","RadioButton","Text","useRadioButtonGroupContext","Direction","GroupDirection","Touchable","extractStyles","getRadioButtonAlignment","parentDirection","direction","Horizontal","Row","RowReverse","renderLabel","value","labelStyle","textStyle","RadioButtonRow","Icon","label","color","unselectedColor","onPress","labelContainerStyle","radioButtonStyle","selected","disabled","style","rest","contextValue","onValueChange","handlePress","textStyles","viewStyles","styles","mainParent","flexDirection","alignItems","flex","create","justifyContent","paddingStart","minHeight","paddingEnd","select","web","cursor","userSelect"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n StyleProp,\n ViewStyle,\n StyleSheet,\n TextStyle,\n View,\n Platform,\n} from \"react-native\";\nimport RadioButton, { RadioButtonProps } from \"./RadioButton\";\nimport Text from \"../Text\";\nimport { useRadioButtonGroupContext } from \"./context\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\nimport { Direction as GroupDirection } from \"./context\";\nimport Touchable from \"../Touchable\";\nimport { extractStyles } from \"../../utilities\";\n\nexport enum Direction {\n Row = \"row\",\n RowReverse = \"row-reverse\",\n}\n\nexport interface RadioButtonRowProps extends Omit<RadioButtonProps, \"onPress\"> {\n label: string | React.ReactNode;\n value: string; // A string that this radio button row represents when selected\n color?: string;\n unselectedColor?: string;\n labelContainerStyle: StyleProp<ViewStyle>;\n radioButtonStyle?: StyleProp<ViewStyle>;\n labelStyle?: StyleProp<TextStyle>;\n onPress?: (value: string) => void;\n direction?: Direction;\n}\n\nconst getRadioButtonAlignment = (\n parentDirection: GroupDirection | undefined,\n direction: Direction\n) => {\n if (parentDirection === GroupDirection.Horizontal) {\n return direction === Direction.Row ? \"flex-start\" : \"flex-end\";\n } else if (direction === Direction.RowReverse) {\n return \"flex-start\";\n } else {\n return \"flex-end\";\n }\n};\n\nconst renderLabel = (\n value: string | React.ReactNode,\n labelStyle: StyleProp<TextStyle>,\n textStyle: StyleProp<TextStyle>\n) => {\n if (typeof value === \"string\") {\n return <Text style={[labelStyle, textStyle]}>{value}</Text>;\n } else {\n return <>{value}</>;\n }\n};\n\nconst RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({\n Icon,\n label,\n value,\n color,\n unselectedColor,\n onPress = () => {},\n labelContainerStyle,\n labelStyle,\n radioButtonStyle,\n direction = Direction.Row,\n selected,\n disabled,\n style,\n ...rest\n}) => {\n const {\n value: contextValue,\n onValueChange,\n direction: parentDirection,\n } = useRadioButtonGroupContext();\n\n const handlePress = () => {\n onPress(value);\n onValueChange && onValueChange(value);\n };\n\n const { textStyles, viewStyles } = extractStyles(style);\n\n return (\n <Touchable\n onPress={handlePress}\n style={[styles.mainParent, { flexDirection: direction }, viewStyles]}\n disabled={disabled}\n {...rest}\n >\n <View\n style={[\n styles.label,\n {\n alignItems: direction === Direction.Row ? \"flex-start\" : \"flex-end\",\n },\n labelContainerStyle,\n ]}\n >\n {renderLabel(label, labelStyle, textStyles)}\n </View>\n <View\n style={{\n flex: 1,\n alignItems: getRadioButtonAlignment(parentDirection, direction),\n }}\n >\n <RadioButton\n Icon={Icon}\n selected={\n selected || (contextValue != null && contextValue === value)\n }\n color={color}\n unselectedColor={unselectedColor}\n onPress={handlePress}\n style={radioButtonStyle}\n />\n </View>\n </Touchable>\n );\n};\n\nconst styles = StyleSheet.create({\n mainParent: {\n alignItems: \"center\",\n justifyContent: \"space-around\",\n paddingStart: 20,\n minHeight: 50,\n paddingEnd: 20,\n flex: 1,\n ...Platform.select({\n web: {\n cursor: \"pointer\",\n userSelect: \"none\",\n },\n }),\n },\n label: {\n flex: 3,\n },\n});\n\nexport default RadioButtonRow;\n"]}
|
|
@@ -0,0 +1,88 @@
|
|
|
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
|
+
import * as React from "react";
|
|
4
|
+
import { TabView, TabBar, SceneMap } from "react-native-tab-view"; // import { withTheme } from "../../theming";
|
|
5
|
+
|
|
6
|
+
import TabViewItem from "./TabViewItem";
|
|
7
|
+
|
|
8
|
+
const TabViewComponent = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
Icon,
|
|
11
|
+
tabBarPosition,
|
|
12
|
+
keyboardDismissMode,
|
|
13
|
+
swipeEnabled,
|
|
14
|
+
scrollEnabled,
|
|
15
|
+
activeColor,
|
|
16
|
+
inactiveColor,
|
|
17
|
+
pressColor,
|
|
18
|
+
indicatorColor,
|
|
19
|
+
style,
|
|
20
|
+
children
|
|
21
|
+
} = _ref;
|
|
22
|
+
const [index, setIndex] = React.useState(0);
|
|
23
|
+
const [routes, setRoutes] = React.useState([]);
|
|
24
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
25
|
+
React.useEffect(() => {
|
|
26
|
+
const newRoutes = [];
|
|
27
|
+
const scenes = {};
|
|
28
|
+
React.Children.toArray(children).filter(child => child.type === TabViewItem).forEach(child => {
|
|
29
|
+
var _child$props;
|
|
30
|
+
|
|
31
|
+
if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
|
|
32
|
+
var _child$props2, _child$props3;
|
|
33
|
+
|
|
34
|
+
newRoutes.push({
|
|
35
|
+
key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
|
|
36
|
+
...(child === null || child === void 0 ? void 0 : child.props)
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
setRoutes(newRoutes);
|
|
43
|
+
setTabScenes(scenes);
|
|
44
|
+
}, [children]);
|
|
45
|
+
|
|
46
|
+
const indexChangeHandler = i => setIndex(i);
|
|
47
|
+
|
|
48
|
+
const renderTabBar = props => {
|
|
49
|
+
console.log(props);
|
|
50
|
+
return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
|
|
51
|
+
activeColor: activeColor,
|
|
52
|
+
inactiveColor: inactiveColor,
|
|
53
|
+
pressColor: pressColor,
|
|
54
|
+
scrollEnabled: scrollEnabled,
|
|
55
|
+
indicatorStyle: {
|
|
56
|
+
backgroundColor: indicatorColor
|
|
57
|
+
},
|
|
58
|
+
renderIcon: _ref2 => {
|
|
59
|
+
let {
|
|
60
|
+
route,
|
|
61
|
+
color
|
|
62
|
+
} = _ref2;
|
|
63
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
64
|
+
name: route.icon,
|
|
65
|
+
color: color,
|
|
66
|
+
size: 36
|
|
67
|
+
}) : null;
|
|
68
|
+
},
|
|
69
|
+
style: style
|
|
70
|
+
}));
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
return /*#__PURE__*/React.createElement(TabView, {
|
|
74
|
+
navigationState: {
|
|
75
|
+
index,
|
|
76
|
+
routes
|
|
77
|
+
},
|
|
78
|
+
renderScene: SceneMap(tabScenes),
|
|
79
|
+
renderTabBar: renderTabBar,
|
|
80
|
+
onIndexChange: indexChangeHandler,
|
|
81
|
+
tabBarPosition: tabBarPosition,
|
|
82
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
83
|
+
swipeEnabled: swipeEnabled
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default TabViewComponent;
|
|
88
|
+
//# sourceMappingURL=TabView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["TabView.tsx"],"names":["React","TabView","TabBar","SceneMap","TabViewItem","TabViewComponent","Icon","tabBarPosition","keyboardDismissMode","swipeEnabled","scrollEnabled","activeColor","inactiveColor","pressColor","indicatorColor","style","children","index","setIndex","useState","routes","setRoutes","tabScenes","setTabScenes","useEffect","newRoutes","scenes","Children","toArray","filter","child","type","forEach","props","id","push","key","indexChangeHandler","i","renderTabBar","console","log","backgroundColor","route","color","icon"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, TextStyle, ViewStyle } from \"react-native\";\nimport { TabView, TabBar, SceneMap } from \"react-native-tab-view\";\n\n// import { withTheme } from \"../../theming\";\nimport TabViewItem from \"./TabViewItem\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\ntype TabBarPosition = \"top\" | \"bottom\";\ntype KeyboardDismissMode = \"none\" | \"auto\" | \"on-drag\";\n\ntype TabViewProps = {\n tabBarPosition?: TabBarPosition;\n keyboardDismissMode?: KeyboardDismissMode;\n swipeEnabled?: boolean;\n scrollEnabled?: boolean;\n activeColor?: string;\n inactiveColor?: string;\n pressColor?: string;\n indicatorColor?: string;\n style?: StyleProp<TextStyle | ViewStyle>;\n children: React.ReactNode;\n} & IconSlot;\n\nconst TabViewComponent = ({\n Icon,\n tabBarPosition,\n keyboardDismissMode,\n swipeEnabled,\n scrollEnabled,\n activeColor,\n inactiveColor,\n pressColor,\n indicatorColor,\n style,\n children,\n}: TabViewProps) => {\n const [index, setIndex] = React.useState(0);\n const [routes, setRoutes] = React.useState([]);\n const [tabScenes, setTabScenes] = React.useState({});\n\n React.useEffect(() => {\n const newRoutes: any = [];\n const scenes: any = {};\n\n React.Children.toArray(children)\n .filter((child: any) => child.type === TabViewItem)\n .forEach((child: any) => {\n if (child?.props?.id) {\n newRoutes.push({\n key: child?.props?.id,\n ...child?.props,\n });\n scenes[child?.props?.id] = () => child;\n }\n });\n\n setRoutes(newRoutes);\n setTabScenes(scenes);\n }, [children]);\n\n const indexChangeHandler = (i: any) => setIndex(i);\n\n const renderTabBar = (props: any) => {\n console.log(props);\n return (\n <TabBar\n {...props}\n activeColor={activeColor}\n inactiveColor={inactiveColor}\n pressColor={pressColor}\n scrollEnabled={scrollEnabled}\n indicatorStyle={{ backgroundColor: indicatorColor }}\n renderIcon={({ route, color }) =>\n route?.icon ? (\n <Icon name={route.icon} color={color} size={36} />\n ) : null\n }\n style={style}\n />\n );\n };\n\n return (\n <TabView\n navigationState={{ index, routes }}\n renderScene={SceneMap(tabScenes)}\n renderTabBar={renderTabBar}\n onIndexChange={indexChangeHandler}\n tabBarPosition={tabBarPosition}\n keyboardDismissMode={keyboardDismissMode}\n swipeEnabled={swipeEnabled}\n />\n );\n};\n\nexport default TabViewComponent;\n"]}
|