@evlop/native-components 1.0.154 → 1.0.156
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RenderTabs/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RenderTabs/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAkC,MAAM,uBAAuB,CAAC;AAK9E,UAAU,GAAI,SAAQ,KAAK;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAe;IACrB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,qBAAqB,CAAC,EAAE,GAAG,CAAC;CAC/B;AAqBD,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAE,EAAE,eAAe,eAgFnE;AA0BD,eAAe,UAAU,CAAC"}
|
|
@@ -26,50 +26,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const commons_1 = require("@evlop/commons");
|
|
30
|
+
const native_1 = require("@react-navigation/native");
|
|
29
31
|
const react_1 = __importStar(require("react"));
|
|
30
|
-
const react_native_tab_view_1 = require("react-native-tab-view");
|
|
31
32
|
const react_native_1 = require("react-native");
|
|
33
|
+
const react_native_tab_view_1 = require("react-native-tab-view");
|
|
34
|
+
const Icon_1 = require("../Icon");
|
|
32
35
|
const RenderBlocks_1 = __importDefault(require("../RenderBlocks"));
|
|
33
|
-
const commons_1 = require("@evlop/commons");
|
|
34
|
-
const native_1 = require("@react-navigation/native");
|
|
35
36
|
const View_1 = __importDefault(require("../View"));
|
|
37
|
+
const tabViewCommonOptions = {
|
|
38
|
+
icon: (props) => {
|
|
39
|
+
if (!props.route.icon)
|
|
40
|
+
return null;
|
|
41
|
+
return (react_1.default.createElement(Icon_1.BaseIcon, { icon: props.route.icon, color: props.color, size: 16 }));
|
|
42
|
+
},
|
|
43
|
+
};
|
|
36
44
|
const renderLazyPlaceholder = () => {
|
|
37
45
|
return (react_1.default.createElement(View_1.default, { p: "md" },
|
|
38
46
|
react_1.default.createElement(View_1.default, { width: "100%", height: "100%", backgroundColor: "gray-100", borderRadius: 10 })));
|
|
39
47
|
};
|
|
40
48
|
function RenderTabs({ tabs, animatedScrollPostion }) {
|
|
41
|
-
var _a, _b, _c;
|
|
49
|
+
var _a, _b, _c, _d, _e;
|
|
42
50
|
const layout = (0, react_native_1.useWindowDimensions)();
|
|
43
51
|
const [index, setIndex] = (0, react_1.useState)(0);
|
|
44
52
|
const theme = (0, commons_1.useTheme)();
|
|
45
53
|
const route = (0, native_1.useRoute)();
|
|
46
54
|
const tabIdFromParams = (_a = route.params) === null || _a === void 0 ? void 0 : _a.tab;
|
|
47
55
|
const tabBackgroundColor = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b['body-background'];
|
|
48
|
-
const tabTintColor = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c['primary'];
|
|
49
|
-
const
|
|
56
|
+
const tabTintColor = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c['primary-700'];
|
|
57
|
+
const tabInactiveTintColor = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d['gray-700'];
|
|
58
|
+
const tabBorderColor = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e['gray-200'];
|
|
59
|
+
const tabRoutes = (0, react_1.useMemo)(() => tabs.map((tab) => ({
|
|
60
|
+
key: tab.id,
|
|
61
|
+
title: tab.label,
|
|
62
|
+
blocks: tab.blocks,
|
|
63
|
+
icon: tab.icon,
|
|
64
|
+
})), [tabs]);
|
|
65
|
+
const onIndexChange = (0, react_1.useCallback)((index) => {
|
|
66
|
+
setIndex(index);
|
|
67
|
+
if (react_native_1.Platform.OS === 'web') {
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
commons_1.remoteAction.do({ setParams: { tab: tabRoutes[index].key } });
|
|
70
|
+
}
|
|
71
|
+
}, [tabRoutes]);
|
|
50
72
|
// Watch for tab parameter changes
|
|
51
73
|
(0, react_1.useEffect)(() => {
|
|
52
74
|
if (!tabIdFromParams)
|
|
53
75
|
return;
|
|
54
|
-
const tabIndex =
|
|
76
|
+
const tabIndex = tabRoutes.findIndex(route => route.key === tabIdFromParams);
|
|
55
77
|
if (tabIndex >= 0)
|
|
56
78
|
setIndex(tabIndex);
|
|
57
79
|
}, [tabIdFromParams]);
|
|
58
80
|
const tabBarStyles = (0, react_1.useMemo)(() => ({
|
|
59
|
-
tabBar: [styles.tabBar, { backgroundColor: tabBackgroundColor }],
|
|
81
|
+
tabBar: [styles.tabBar, { backgroundColor: tabBackgroundColor, borderColor: tabBorderColor }],
|
|
60
82
|
label: [styles.label, { color: tabTintColor }],
|
|
61
|
-
indicator: [styles.indicator, { backgroundColor: tabTintColor }]
|
|
62
|
-
|
|
83
|
+
indicator: [styles.indicator, { backgroundColor: tabTintColor }],
|
|
84
|
+
tab: styles.tab
|
|
85
|
+
}), [tabBackgroundColor, tabTintColor, tabBorderColor]);
|
|
63
86
|
const renderScene = ({ route }) => {
|
|
64
87
|
return (react_1.default.createElement(RenderBlocks_1.default, { blocks: route.blocks, animatedScrollPostion: animatedScrollPostion }));
|
|
65
88
|
};
|
|
66
|
-
const renderTabBar = (props) => (react_1.default.createElement(react_native_tab_view_1.TabBar, Object.assign({}, props, { scrollEnabled: true, style: tabBarStyles.tabBar, labelStyle: tabBarStyles.label, indicatorStyle: tabBarStyles.indicator, activeColor: tabTintColor, inactiveColor:
|
|
67
|
-
return (react_1.default.createElement(react_native_tab_view_1.TabView, { navigationState: { index, routes }, tabBarPosition: "top", lazy: true, renderScene: renderScene, onIndexChange:
|
|
89
|
+
const renderTabBar = (props) => (react_1.default.createElement(react_native_tab_view_1.TabBar, Object.assign({}, props, { scrollEnabled: true, style: tabBarStyles.tabBar, labelStyle: tabBarStyles.label, indicatorStyle: tabBarStyles.indicator, tabStyle: tabBarStyles.tab, activeColor: tabTintColor, inactiveColor: tabInactiveTintColor })));
|
|
90
|
+
return (react_1.default.createElement(react_native_tab_view_1.TabView, { navigationState: { index, routes: tabRoutes }, tabBarPosition: "top", lazy: true, renderScene: renderScene, onIndexChange: onIndexChange, initialLayout: { width: layout.width }, renderTabBar: renderTabBar, renderLazyPlaceholder: renderLazyPlaceholder, commonOptions: tabViewCommonOptions }));
|
|
68
91
|
}
|
|
69
92
|
const styles = react_native_1.StyleSheet.create({
|
|
70
93
|
tabBar: {
|
|
71
94
|
elevation: 0,
|
|
72
95
|
shadowOpacity: 0,
|
|
96
|
+
borderBottomWidth: 1,
|
|
73
97
|
},
|
|
74
98
|
indicator: {
|
|
75
99
|
height: 2,
|
|
@@ -77,6 +101,15 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
77
101
|
label: {
|
|
78
102
|
fontWeight: '600',
|
|
79
103
|
textTransform: 'none',
|
|
104
|
+
fontSize: 13,
|
|
105
|
+
marginVertical: 0,
|
|
106
|
+
marginHorizontal: 4,
|
|
107
|
+
},
|
|
108
|
+
tab: {
|
|
109
|
+
width: 'auto',
|
|
110
|
+
flexDirection: 'row',
|
|
111
|
+
alignItems: 'center',
|
|
112
|
+
justifyContent: 'center',
|
|
80
113
|
},
|
|
81
114
|
});
|
|
82
115
|
exports.default = RenderTabs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/RenderTabs/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/RenderTabs/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAAwE;AACxE,qDAAoD;AACpD,+CAAyE;AACzE,+CAAyE;AACzE,iEAA8E;AAC9E,kCAAmC;AACnC,mEAA2C;AAC3C,mDAA2B;AAkB3B,MAAM,oBAAoB,GAAmC;IACzD,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE;QACZ,IAAG,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAClC,OAAO,CAAC,8BAAC,eAAQ,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAsB,EAAE,KAAK,EAAE,KAAK,CAAC,KAAY,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAA;IACxG,CAAC;CACJ,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;IAC/B,OAAO,CACH,8BAAC,cAAI,IAAC,CAAC,EAAC,IAAI;QACR,8BAAC,cAAI,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,eAAe,EAAC,UAAU,EAAC,YAAY,EAAE,EAAS,GAAI,CACpF,CACV,CAAA;AACL,CAAC,CAAA;AAED,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAmB;;IAChE,MAAM,MAAM,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,IAAA,kBAAQ,GAAE,CAAC;IACzB,MAAM,KAAK,GAAG,IAAA,iBAAQ,GAAE,CAAC;IAEzB,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,0CAAE,GAAG,CAAC;IAE1C,MAAM,kBAAkB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAG,iBAAiB,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAG,aAAa,CAAC,CAAC;IACpD,MAAM,oBAAoB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAG,UAAU,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAG,UAAU,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAsB,IAAA,eAAO,EAAC,GAAG,EAAE,CAC9C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACf,GAAG,EAAE,GAAG,CAAC,EAAE;QACX,KAAK,EAAE,GAAG,CAAC,KAAK;QAChB,MAAM,EAAE,GAAG,CAAC,MAAM;QAClB,IAAI,EAAE,GAAG,CAAC,IAAI;KACjB,CAAC,CAAC,EACH,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAa,EAAE,EAAE;QAChD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,IAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;YACtB,aAAa;YACb,sBAAY,CAAC,EAAE,CAAC,EAAC,SAAS,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAC,CAAC,CAAA;SAC9D;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,kCAAkC;IAClC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAG,CAAC,eAAe;YAAE,OAAO;QAC5B,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,eAAe,CAAC,CAAC;QAC7E,IAAI,QAAQ,IAAI,CAAC;YAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC;QAChC,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;QAC7F,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;QAC9C,SAAS,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;QAChE,GAAG,EAAE,MAAM,CAAC,GAAG;KAClB,CAAC,EAAE,CAAC,kBAAkB,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAA8B,EAAE,EAAE;QAC1D,OAAO,CACH,8BAAC,sBAAY,IACT,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,qBAAqB,EAAE,qBAAqB,GAC9C,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,CACjC,8BAAC,8BAAM,oBACC,KAAK,IACT,aAAa,QACb,KAAK,EAAE,YAAY,CAAC,MAAM,EAC1B,UAAU,EAAE,YAAY,CAAC,KAAK,EAC9B,cAAc,EAAE,YAAY,CAAC,SAAS,EACtC,QAAQ,EAAE,YAAY,CAAC,GAAG,EAC1B,WAAW,EAAE,YAAY,EACzB,aAAa,EAAE,oBAAoB,IACrC,CACL,CAAC;IAEF,OAAO,CACH,8BAAC,+BAAO,IACJ,eAAe,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAC7C,cAAc,EAAC,KAAK,EACpB,IAAI,QACJ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EACtC,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,oBAAoB,GACrC,CACL,CAAC;AACN,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC7B,MAAM,EAAE;QACJ,SAAS,EAAE,CAAC;QACZ,aAAa,EAAE,CAAC;QAChB,iBAAiB,EAAE,CAAC;KACvB;IACD,SAAS,EAAE;QACP,MAAM,EAAE,CAAC;KACZ;IACD,KAAK,EAAE;QACH,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,MAAM;QACrB,QAAQ,EAAE,EAAE;QACZ,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,CAAC;KACtB;IACD,GAAG,EAAE;QACD,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC;AAEH,kBAAe,UAAU,CAAC"}
|