@trilogy-ds/react 4.0.1-beta-1 → 4.0.1-ref-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/components/autocomplete/AutoCompletePropsNativeDefaults.js +20 -4
- package/lib/components/autocomplete/AutoCompletePropsWebDefaults.js +20 -4
- package/lib/components/autolayout/AutoLayout.helpers.js +7 -5
- package/lib/components/autolayout/DefaultSpacingMatrix.js +4 -3
- package/lib/components/breadcrumb/item/BreadcrumbItemPropsWebDefaults.js +3 -3
- package/lib/components/button/Button.native.d.ts +2 -2
- package/lib/components/button/Button.native.js +66 -98
- package/lib/components/button/ButtonPropsDefaults.js +5 -5
- package/lib/components/checkbox/Checkbox.native.js +6 -95
- package/lib/components/checkbox/tiles/CheckboxTiles.d.ts +4 -2
- package/lib/components/checkbox/tiles/CheckboxTiles.js +5 -3
- package/lib/components/checkbox/tiles/CheckboxTiles.native.d.ts +8 -0
- package/lib/components/checkbox/tiles/CheckboxTiles.native.js +20 -0
- package/lib/components/checkbox/tiles/tile/CheckboxTile.d.ts +12 -2
- package/lib/components/checkbox/tiles/tile/CheckboxTile.js +13 -3
- package/lib/components/checkbox/tiles/tile/CheckboxTile.native.d.ts +8 -0
- package/lib/components/checkbox/tiles/tile/CheckboxTile.native.js +126 -0
- package/lib/components/columns/Columns.d.ts +1 -1
- package/lib/components/columns/Columns.js +10 -8
- package/lib/components/columns/column/Column.d.ts +1 -1
- package/lib/components/columns/column/Column.js +10 -8
- package/lib/components/enumsComponentsName.d.ts +6 -1
- package/lib/components/enumsComponentsName.js +7 -2
- package/lib/components/input/Input.js +2 -2
- package/lib/components/input/InputEnum.d.ts +2 -1
- package/lib/components/input/InputEnum.js +1 -1
- package/lib/components/input/InputPropsDefaults.js +20 -4
- package/lib/components/link/LinkPropsDefaults.js +3 -3
- package/lib/components/price/Price.native.d.ts +1 -1
- package/lib/components/price/Price.native.js +11 -11
- package/lib/components/progress/radial/ProgressRadial.js +2 -2
- package/lib/components/range/Range.js +2 -2
- package/lib/components/select/Select.js +2 -2
- package/lib/components/tabs/Tabs.d.ts +2 -1
- package/lib/components/tabs/Tabs.js +16 -7
- package/lib/components/tabs/Tabs.native.d.ts +14 -0
- package/lib/components/tabs/Tabs.native.js +32 -0
- package/lib/components/tabs/context/index.d.ts +2 -0
- package/lib/components/tabs/context/index.js +3 -1
- package/lib/components/tabs/tab-list/TabList.d.ts +5 -1
- package/lib/components/tabs/tab-list/TabList.js +5 -3
- package/lib/components/tabs/tab-list/TabList.native.d.ts +17 -0
- package/lib/components/tabs/tab-list/TabList.native.js +37 -0
- package/lib/components/tabs/tab-list/tab/Tab.d.ts +2 -2
- package/lib/components/tabs/tab-list/tab/Tab.js +10 -7
- package/lib/components/tabs/tab-list/tab/Tab.native.d.ts +19 -0
- package/lib/components/tabs/tab-list/tab/Tab.native.js +62 -0
- package/lib/components/tabs/tab-list/tab/TabPropsDefaults.js +3 -3
- package/lib/components/tabs/tab-panels/TabPanels.d.ts +1 -1
- package/lib/components/tabs/tab-panels/TabPanels.js +6 -4
- package/lib/components/tabs/tab-panels/TabPanels.native.d.ts +16 -0
- package/lib/components/tabs/tab-panels/TabPanels.native.js +35 -0
- package/lib/components/tabs/tab-panels/tab-panel/TabPanel.d.ts +1 -1
- package/lib/components/tabs/tab-panels/tab-panel/TabPanel.js +6 -4
- package/lib/components/tabs/tab-panels/tab-panel/TabPanel.native.d.ts +15 -0
- package/lib/components/tabs/tab-panels/tab-panel/TabPanel.native.js +46 -0
- package/lib/components/view/ViewPropsDefaults.js +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +2 -2
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
2
3
|
import Tab from '../../../components/tabs/tab-list/tab/Tab';
|
|
3
4
|
import { useTrilogyContext } from '../../../context';
|
|
4
5
|
import { hashClass } from '../../../helpers/hashClassesHelpers';
|
|
@@ -15,15 +16,16 @@ import React from 'react';
|
|
|
15
16
|
* @param align
|
|
16
17
|
* @param others
|
|
17
18
|
*/
|
|
18
|
-
var TabList = function (_a) {
|
|
19
|
+
var TabList = function (_a, ref) {
|
|
19
20
|
var children = _a.children, className = _a.className, id = _a.id, testId = _a.testId, align = _a.align, others = __rest(_a, ["children", "className", "id", "testId", "align"]);
|
|
20
21
|
var styled = useTrilogyContext().styled;
|
|
21
22
|
var classes = hashClass(styled, clsx('tab-list', align && is(getAlignClassName(align)), className));
|
|
22
|
-
return (React.createElement("div", __assign({ id: id, "data-testid": testId, className: classes }, others), React.Children.map(children, function (child, index) {
|
|
23
|
+
return (React.createElement("div", __assign({ ref: ref, id: id, "data-testid": testId, className: classes }, others), React.Children.map(children, function (child, index) {
|
|
23
24
|
if (!React.isValidElement(child))
|
|
24
25
|
return false;
|
|
25
26
|
return React.createElement(Tab, __assign({}, child.props, { index: index }));
|
|
26
27
|
})));
|
|
27
28
|
};
|
|
29
|
+
TabList.displayName = ComponentName.TabList;
|
|
28
30
|
export default TabList;
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiTGlzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItbGlzdC9UYWJMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sR0FBRyxNQUFNLG9DQUFvQyxDQUFBO0FBRXBELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDOUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUMvQixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsVUFDZCxFQUFtRSxFQUNuRSxHQUE4QjtJQUQ1QixJQUFBLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLEtBQUssV0FBQSxFQUFLLE1BQU0sY0FBbkQsa0RBQXFELENBQUY7SUFHM0MsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLEtBQUssSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRXJHLE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLGlCQUFlLE1BQU0sRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sR0FDdkUsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLFVBQUMsS0FBSyxFQUFFLEtBQUs7UUFDekMsSUFBSSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxLQUFLLENBQUE7UUFDOUMsT0FBTyxvQkFBQyxHQUFHLGVBQUssS0FBSyxDQUFDLEtBQUssSUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUE7SUFDL0MsQ0FBQyxDQUFDLENBQ0UsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGVBQWUsT0FBTyxDQUFBIn0=
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
2
|
+
import { TabListProps } from '../../../components/tabs/tab-list/TabListProps';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Tabs Nav Component
|
|
6
|
+
* @param children {ReactChild} React Child Element
|
|
7
|
+
* @param className
|
|
8
|
+
* @param id
|
|
9
|
+
* @param testId
|
|
10
|
+
* @param align
|
|
11
|
+
* @param others
|
|
12
|
+
*/
|
|
13
|
+
declare const TabList: {
|
|
14
|
+
({ children, ...others }: TabListProps): React.JSX.Element;
|
|
15
|
+
displayName: ComponentName;
|
|
16
|
+
};
|
|
17
|
+
export default TabList;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
3
|
+
import { TabsContext } from '../../../components/tabs/context';
|
|
4
|
+
import Tab from '../../../components/tabs/tab-list/tab/Tab';
|
|
5
|
+
import { getColorStyle, TrilogyColor } from '../../../objects';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { ScrollView, StyleSheet } from 'react-native';
|
|
8
|
+
/**
|
|
9
|
+
* Tabs Nav Component
|
|
10
|
+
* @param children {ReactChild} React Child Element
|
|
11
|
+
* @param className
|
|
12
|
+
* @param id
|
|
13
|
+
* @param testId
|
|
14
|
+
* @param align
|
|
15
|
+
* @param others
|
|
16
|
+
*/
|
|
17
|
+
var TabList = function (_a) {
|
|
18
|
+
var children = _a.children, others = __rest(_a, ["children"]);
|
|
19
|
+
var inverted = React.useContext(TabsContext).inverted;
|
|
20
|
+
var styles = React.useMemo(function () {
|
|
21
|
+
return StyleSheet.create({
|
|
22
|
+
tabList: {
|
|
23
|
+
flexDirection: 'row',
|
|
24
|
+
overflow: 'visible',
|
|
25
|
+
backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : undefined,
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
}, [inverted]);
|
|
29
|
+
return (React.createElement(ScrollView, __assign({ horizontal: true, showsHorizontalScrollIndicator: false, style: styles.tabList }, others), React.Children.map(children, function (child, index) {
|
|
30
|
+
if (!React.isValidElement(child))
|
|
31
|
+
return false;
|
|
32
|
+
return React.createElement(Tab, __assign({}, child.props, { index: index }));
|
|
33
|
+
})));
|
|
34
|
+
};
|
|
35
|
+
TabList.displayName = ComponentName.TabList;
|
|
36
|
+
export default TabList;
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiTGlzdC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvdGFiLWxpc3QvVGFiTGlzdC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBQ3ZELE9BQU8sR0FBRyxNQUFNLG9DQUFvQyxDQUFBO0FBRXBELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZELE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVyRDs7Ozs7Ozs7R0FRRztBQUNILElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBcUM7SUFBbkMsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDNUIsSUFBQSxRQUFRLEdBQUssS0FBSyxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsU0FBbEMsQ0FBa0M7SUFFbEQsSUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FDMUI7UUFDRSxPQUFBLFVBQVUsQ0FBQyxNQUFNLENBQUM7WUFDaEIsT0FBTyxFQUFFO2dCQUNQLGFBQWEsRUFBRSxLQUFLO2dCQUNwQixRQUFRLEVBQUUsU0FBUztnQkFDbkIsZUFBZSxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUzthQUN6RTtTQUNGLENBQUM7SUFORixDQU1FLEVBQ0osQ0FBQyxRQUFRLENBQUMsQ0FDWCxDQUFBO0lBRUQsT0FBTyxDQUNMLG9CQUFDLFVBQVUsYUFBQyxVQUFVLFFBQUMsOEJBQThCLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxJQUFNLE1BQU0sR0FDNUYsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLFVBQUMsS0FBSyxFQUFFLEtBQUs7UUFDekMsSUFBSSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxLQUFLLENBQUE7UUFDOUMsT0FBTyxvQkFBQyxHQUFHLGVBQUssS0FBSyxDQUFDLEtBQUssSUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUE7SUFDL0MsQ0FBQyxDQUFDLENBQ1MsQ0FDZCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGVBQWUsT0FBTyxDQUFBIn0=
|
|
@@ -8,11 +8,11 @@ import React from 'react';
|
|
|
8
8
|
* @param iconName {IconNameValues | IconName} add icon name
|
|
9
9
|
* @param disabled {boolean} disable tab item
|
|
10
10
|
* @param label {string} Tab content
|
|
11
|
+
* @param to {string} Link
|
|
12
|
+
* @param href {string} <a />
|
|
11
13
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
12
14
|
* @param className {string} Additionnal CSS Classes
|
|
13
15
|
* @param testId {string} Test Id for Test Integration
|
|
14
|
-
* @param to {string} Link
|
|
15
|
-
* @param href {string} <a />
|
|
16
16
|
* @param routerLink Custom Router Link as props
|
|
17
17
|
*/
|
|
18
18
|
declare const Tab: ({ active, className, onClick, to, href, routerLink, iconName, label, disabled, testId, ariaControls, ...others }: TabProps) => React.JSX.Element;
|
|
@@ -13,11 +13,11 @@ import React from 'react';
|
|
|
13
13
|
* @param iconName {IconNameValues | IconName} add icon name
|
|
14
14
|
* @param disabled {boolean} disable tab item
|
|
15
15
|
* @param label {string} Tab content
|
|
16
|
+
* @param to {string} Link
|
|
17
|
+
* @param href {string} <a />
|
|
16
18
|
* - -------------------------- WEB PROPERTIES -------------------------------
|
|
17
19
|
* @param className {string} Additionnal CSS Classes
|
|
18
20
|
* @param testId {string} Test Id for Test Integration
|
|
19
|
-
* @param to {string} Link
|
|
20
|
-
* @param href {string} <a />
|
|
21
21
|
* @param routerLink Custom Router Link as props
|
|
22
22
|
*/
|
|
23
23
|
var Tab = function (_a) {
|
|
@@ -28,10 +28,13 @@ var Tab = function (_a) {
|
|
|
28
28
|
var isActive = React.useMemo(function () { return activeIndex === index; }, [activeIndex, index]);
|
|
29
29
|
var classes = hashClass(styled, clsx('tab', className, { 'is-active': isActive }));
|
|
30
30
|
var handleClick = React.useCallback(function (e) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
if (!disabled) {
|
|
32
|
+
if (!routerLink)
|
|
33
|
+
setActiveIndex(index);
|
|
34
|
+
if (onClick)
|
|
35
|
+
onClick(e);
|
|
36
|
+
}
|
|
37
|
+
}, [disabled, onClick, index, setActiveIndex, routerLink]);
|
|
35
38
|
React.useEffect(function () {
|
|
36
39
|
if (active)
|
|
37
40
|
setActiveIndex(index);
|
|
@@ -47,4 +50,4 @@ var Tab = function (_a) {
|
|
|
47
50
|
label && label));
|
|
48
51
|
};
|
|
49
52
|
export default Tab;
|
|
50
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
53
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1saXN0L3RhYi9UYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBRXZELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBQ0gsSUFBTSxHQUFHLEdBQUcsVUFBQyxFQWFGO0lBWlQsSUFBQSxNQUFNLFlBQUEsRUFDTixTQUFTLGVBQUEsRUFDVCxPQUFPLGFBQUEsRUFDUCxFQUFFLFFBQUEsRUFDRixJQUFJLFVBQUEsRUFDSixVQUFVLGdCQUFBLEVBQ1YsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBLEVBQ04sWUFBWSxrQkFBQSxFQUNULE1BQU0sY0FaRSx5SEFhWixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxLQUFzQixNQUFhLEVBQWpDLEtBQUssV0FBQSxFQUFLLEtBQUssY0FBakIsU0FBbUIsQ0FBZ0IsQ0FBQTtJQUNuQyxJQUFBLEtBQWtDLEtBQUssQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLEVBQTdELFdBQVcsaUJBQUEsRUFBRSxjQUFjLG9CQUFrQyxDQUFBO0lBRXJFLElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsY0FBTSxPQUFBLFdBQVcsS0FBSyxLQUFLLEVBQXJCLENBQXFCLEVBQUUsQ0FBQyxXQUFXLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQTtJQUNqRixJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUVwRixJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNuQyxVQUFDLENBQW1CO1FBQ2xCLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDYixJQUFJLENBQUMsVUFBVTtnQkFBRSxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDdEMsSUFBSSxPQUFPO2dCQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtTQUN4QjtJQUNILENBQUMsRUFDRCxDQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLGNBQWMsRUFBRSxVQUFVLENBQUMsQ0FDdkQsQ0FBQTtJQUVELEtBQUssQ0FBQyxTQUFTLENBQUM7UUFDZCxJQUFJLE1BQU07WUFBRSxjQUFjLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDbkMsQ0FBQyxFQUFFLENBQUMsTUFBTSxFQUFFLGNBQWMsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFBO0lBRW5DLElBQUksVUFBVSxJQUFJLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxFQUFFO1FBQzlCLElBQU0sVUFBVSxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBc0IsQ0FBQTtRQUN2RSxPQUFPLENBQ0wsb0JBQUMsVUFBVSw0QkFDSSxNQUFNLEVBQ25CLEVBQUUsRUFBRSxFQUFFLEVBQ04sSUFBSSxFQUFFLElBQUksRUFDVixTQUFTLEVBQUUsT0FBTyxFQUNsQixPQUFPLEVBQUUsV0FBVyxnQkFDUixLQUFLLElBQ2IsTUFBTTtZQUVWLDZCQUFLLFNBQVMsRUFBQyxVQUFVLElBQUUsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUMsZ0JBQWdCLEVBQUMsSUFBSSxFQUFDLE9BQU8sRUFBQyxJQUFJLEVBQUUsUUFBUSxHQUFJLENBQU87WUFDekcsS0FBSyxJQUFJLEtBQUssQ0FDSixDQUNkLENBQUE7S0FDRjtJQUVELE9BQU8sQ0FDTCwwREFDaUIsWUFBWSxtQkFDWixRQUFRLG1CQUNSLFFBQVEseUJBQ0gsRUFBRSxFQUN0QixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsT0FBTyxFQUNsQixJQUFJLEVBQUMsS0FBSyxpQkFDRyxNQUFNLGdCQUNQLEtBQUssRUFDakIsT0FBTyxFQUFFLFdBQVcsSUFDaEIsS0FBSztRQUVULDZCQUFLLFNBQVMsRUFBQyxVQUFVLElBQUUsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUMsZ0JBQWdCLEVBQUMsSUFBSSxFQUFDLE9BQU8sRUFBQyxJQUFJLEVBQUUsUUFBUSxHQUFJLENBQU87UUFDekcsS0FBSyxJQUFJLEtBQUssQ0FDUixDQUNWLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEdBQUcsQ0FBQSJ9
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
2
|
+
import { TabProps } from '../../../../components/tabs/tab-list/tab/TabProps';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Tabs Item Component
|
|
6
|
+
* @param active {boolean} active tab item
|
|
7
|
+
* @param children {ReactChild} React Child Element
|
|
8
|
+
* @param onClick onClick Event
|
|
9
|
+
* @param iconName {IconNameValues | IconName} add icon name
|
|
10
|
+
* @param disabled {boolean} disable tab item
|
|
11
|
+
* @param label {string} Tab content
|
|
12
|
+
* @param to {string} Link
|
|
13
|
+
* @param href {string} Link
|
|
14
|
+
*/
|
|
15
|
+
declare const Tab: {
|
|
16
|
+
({ active, onClick, to, href, iconName, label, disabled, ...others }: TabProps): React.JSX.Element;
|
|
17
|
+
displayName: ComponentName;
|
|
18
|
+
};
|
|
19
|
+
export default Tab;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
3
|
+
import { Icon } from '../../../../components/icon';
|
|
4
|
+
import { TabsContext } from '../../../../components/tabs/context';
|
|
5
|
+
import { Text } from '../../../../components/text';
|
|
6
|
+
import { getColorStyle, TrilogyColor } from '../../../../objects/facets/Color';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { Linking, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
9
|
+
/**
|
|
10
|
+
* Tabs Item Component
|
|
11
|
+
* @param active {boolean} active tab item
|
|
12
|
+
* @param children {ReactChild} React Child Element
|
|
13
|
+
* @param onClick onClick Event
|
|
14
|
+
* @param iconName {IconNameValues | IconName} add icon name
|
|
15
|
+
* @param disabled {boolean} disable tab item
|
|
16
|
+
* @param label {string} Tab content
|
|
17
|
+
* @param to {string} Link
|
|
18
|
+
* @param href {string} Link
|
|
19
|
+
*/
|
|
20
|
+
var Tab = function (_a) {
|
|
21
|
+
var active = _a.active, onClick = _a.onClick, to = _a.to, href = _a.href, iconName = _a.iconName, label = _a.label, disabled = _a.disabled, others = __rest(_a, ["active", "onClick", "to", "href", "iconName", "label", "disabled"]);
|
|
22
|
+
var _b = others, index = _b.index, props = __rest(_b, ["index"]);
|
|
23
|
+
var _c = React.useContext(TabsContext), activeIndex = _c.activeIndex, setActiveIndex = _c.setActiveIndex, inverted = _c.inverted;
|
|
24
|
+
var isActive = React.useMemo(function () { return activeIndex === index; }, [activeIndex, index]);
|
|
25
|
+
var handleClick = React.useCallback(function (e) {
|
|
26
|
+
if (!disabled) {
|
|
27
|
+
if (onClick)
|
|
28
|
+
onClick(e);
|
|
29
|
+
if (!to && !href)
|
|
30
|
+
setActiveIndex(index);
|
|
31
|
+
if (to || href)
|
|
32
|
+
Linking.openURL(to || href || '');
|
|
33
|
+
}
|
|
34
|
+
}, [disabled, onClick, index, setActiveIndex, to, href]);
|
|
35
|
+
var styles = React.useMemo(function () {
|
|
36
|
+
return StyleSheet.create({
|
|
37
|
+
tab: {
|
|
38
|
+
paddingVertical: 4,
|
|
39
|
+
paddingHorizontal: 12,
|
|
40
|
+
borderBottomWidth: 2,
|
|
41
|
+
borderBottomColor: isActive
|
|
42
|
+
? getColorStyle(disabled ? TrilogyColor.DISABLED : inverted ? TrilogyColor.BACKGROUND : TrilogyColor.MAIN)
|
|
43
|
+
: 'transparent',
|
|
44
|
+
},
|
|
45
|
+
text: {
|
|
46
|
+
textAlign: 'center',
|
|
47
|
+
color: getColorStyle(disabled ? TrilogyColor.DISABLED : inverted ? TrilogyColor.BACKGROUND : TrilogyColor.MAIN),
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
}, [isActive, disabled, inverted]);
|
|
51
|
+
React.useEffect(function () {
|
|
52
|
+
if (active)
|
|
53
|
+
setActiveIndex(index);
|
|
54
|
+
}, [active, setActiveIndex, index]);
|
|
55
|
+
return (React.createElement(TouchableOpacity, __assign({ activeOpacity: 1, style: styles.tab, onPress: handleClick }, props),
|
|
56
|
+
iconName && (React.createElement(View, { style: { alignSelf: 'center' } },
|
|
57
|
+
React.createElement(Icon, { color: disabled ? TrilogyColor.DISABLED : inverted ? TrilogyColor.BACKGROUND : TrilogyColor.MAIN, size: 'small', name: iconName }))),
|
|
58
|
+
React.createElement(Text, { style: styles.text }, label && label)));
|
|
59
|
+
};
|
|
60
|
+
Tab.displayName = ComponentName.Tab;
|
|
61
|
+
export default Tab;
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItbGlzdC90YWIvVGFiLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBRXZELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQXlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRWpHOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLEdBQUcsR0FBRyxVQUFDLEVBQTZFO0lBQTNFLElBQUEsTUFBTSxZQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFqRSxvRUFBbUUsQ0FBRjtJQUM1RSxJQUFNLEtBQXNCLE1BQWEsRUFBakMsS0FBSyxXQUFBLEVBQUssS0FBSyxjQUFqQixTQUFtQixDQUFnQixDQUFBO0lBQ25DLElBQUEsS0FBNEMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsRUFBdkUsV0FBVyxpQkFBQSxFQUFFLGNBQWMsb0JBQUEsRUFBRSxRQUFRLGNBQWtDLENBQUE7SUFDL0UsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyxjQUFNLE9BQUEsV0FBVyxLQUFL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
|
|
@@ -29,6 +29,9 @@ export default {
|
|
|
29
29
|
"object",
|
|
30
30
|
"text",
|
|
31
31
|
"search",
|
|
32
|
+
"button",
|
|
33
|
+
"image",
|
|
34
|
+
"time",
|
|
32
35
|
"a",
|
|
33
36
|
"abbr",
|
|
34
37
|
"address",
|
|
@@ -44,7 +47,6 @@ export default {
|
|
|
44
47
|
"blockquote",
|
|
45
48
|
"body",
|
|
46
49
|
"br",
|
|
47
|
-
"button",
|
|
48
50
|
"canvas",
|
|
49
51
|
"caption",
|
|
50
52
|
"center",
|
|
@@ -136,7 +138,6 @@ export default {
|
|
|
136
138
|
"tfoot",
|
|
137
139
|
"th",
|
|
138
140
|
"thead",
|
|
139
|
-
"time",
|
|
140
141
|
"title",
|
|
141
142
|
"tr",
|
|
142
143
|
"track",
|
|
@@ -183,7 +184,6 @@ export default {
|
|
|
183
184
|
"filter",
|
|
184
185
|
"foreignObject",
|
|
185
186
|
"g",
|
|
186
|
-
"image",
|
|
187
187
|
"line",
|
|
188
188
|
"linearGradient",
|
|
189
189
|
"marker",
|
|
@@ -8,5 +8,5 @@ import React from 'react';
|
|
|
8
8
|
* @param testId
|
|
9
9
|
* @param others
|
|
10
10
|
*/
|
|
11
|
-
declare const TabPanels:
|
|
11
|
+
declare const TabPanels: React.ForwardRefExoticComponent<TabPanelsProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
12
|
export default TabPanels;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
2
3
|
import TabPanel from '../../../components/tabs/tab-panels/tab-panel';
|
|
3
4
|
import { useTrilogyContext } from '../../../context';
|
|
4
5
|
import { hashClass } from '../../../helpers/hashClassesHelpers';
|
|
@@ -12,15 +13,16 @@ import React from 'react';
|
|
|
12
13
|
* @param testId
|
|
13
14
|
* @param others
|
|
14
15
|
*/
|
|
15
|
-
var TabPanels = function (_a) {
|
|
16
|
+
var TabPanels = React.forwardRef(function (_a, ref) {
|
|
16
17
|
var children = _a.children, className = _a.className, id = _a.id, testId = _a.testId, others = __rest(_a, ["children", "className", "id", "testId"]);
|
|
17
18
|
var styled = useTrilogyContext().styled;
|
|
18
19
|
var classes = hashClass(styled, clsx('tab-panels', className));
|
|
19
|
-
return (React.createElement("div", __assign({ id: id, "data-testid": testId, className: classes }, others), React.Children.map(children, function (child, index) {
|
|
20
|
+
return (React.createElement("div", __assign({ ref: ref, id: id, "data-testid": testId, className: classes }, others), React.Children.map(children, function (child, index) {
|
|
20
21
|
if (!React.isValidElement(child))
|
|
21
22
|
return false;
|
|
22
23
|
return React.createElement(TabPanel, __assign({}, child.props, { index: index }));
|
|
23
24
|
})));
|
|
24
|
-
};
|
|
25
|
+
});
|
|
26
|
+
TabPanels.displayName = ComponentName.TabPanels;
|
|
25
27
|
export default TabPanels;
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1wYW5lbHMvVGFiUGFuZWxzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sUUFBUSxNQUFNLHdDQUF3QyxDQUFBO0FBRTdELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDaEMsVUFBQyxFQUE4RCxFQUFFLEdBQThCO0lBQTVGLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUE1Qyx5Q0FBOEMsQ0FBRjtJQUNuQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUVoRSxPQUFPLENBQ0wsc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxpQkFBZSxNQUFNLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEdBQ3ZFLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxVQUFDLEtBQUssRUFBRSxLQUFLO1FBQ3pDLElBQUksQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sS0FBSyxDQUFBO1FBQzlDLE9BQU8sb0JBQUMsUUFBUSxlQUFLLEtBQUssQ0FBQyxLQUFLLElBQUUsS0FBSyxFQUFFLEtBQUssSUFBSSxDQUFBO0lBQ3BELENBQUMsQ0FBQyxDQUNFLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBQy9DLGVBQWUsU0FBUyxDQUFBIn0=
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
2
|
+
import { TabPanelsProps } from '../../../components/tabs/tab-panels/TabPanelsProps';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Tabs Nav Component
|
|
6
|
+
* @param children {ReactChild} React Child Element
|
|
7
|
+
* @param className
|
|
8
|
+
* @param id
|
|
9
|
+
* @param testId
|
|
10
|
+
* @param others
|
|
11
|
+
*/
|
|
12
|
+
declare const TabPanels: {
|
|
13
|
+
({ children, ...others }: TabPanelsProps): React.JSX.Element;
|
|
14
|
+
displayName: ComponentName;
|
|
15
|
+
};
|
|
16
|
+
export default TabPanels;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../components/enumsComponentsName';
|
|
3
|
+
import { TabsContext } from '../../../components/tabs/context';
|
|
4
|
+
import TabPanel from '../../../components/tabs/tab-panels/tab-panel';
|
|
5
|
+
import { getColorStyle, TrilogyColor } from '../../../objects';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { StyleSheet, View } from 'react-native';
|
|
8
|
+
/**
|
|
9
|
+
* Tabs Nav Component
|
|
10
|
+
* @param children {ReactChild} React Child Element
|
|
11
|
+
* @param className
|
|
12
|
+
* @param id
|
|
13
|
+
* @param testId
|
|
14
|
+
* @param others
|
|
15
|
+
*/
|
|
16
|
+
var TabPanels = function (_a) {
|
|
17
|
+
var children = _a.children, others = __rest(_a, ["children"]);
|
|
18
|
+
var inverted = React.useContext(TabsContext).inverted;
|
|
19
|
+
var styles = React.useMemo(function () {
|
|
20
|
+
return StyleSheet.create({
|
|
21
|
+
tabPanels: {
|
|
22
|
+
paddingVertical: 8,
|
|
23
|
+
backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : undefined,
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
}, [inverted]);
|
|
27
|
+
return (React.createElement(View, __assign({ style: styles.tabPanels }, others), React.Children.map(children, function (child, index) {
|
|
28
|
+
if (!React.isValidElement(child))
|
|
29
|
+
return false;
|
|
30
|
+
return React.createElement(TabPanel, __assign({}, child.props, { index: index }));
|
|
31
|
+
})));
|
|
32
|
+
};
|
|
33
|
+
TabPanels.displayName = ComponentName.TabPanels;
|
|
34
|
+
export default TabPanels;
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWxzLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItcGFuZWxzL1RhYlBhbmVscy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBQ3ZELE9BQU8sUUFBUSxNQUFNLHdDQUF3QyxDQUFBO0FBRTdELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZELE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQzs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsVUFBQyxFQUF1QztJQUFyQyxJQUFBLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBckIsWUFBdUIsQ0FBRjtJQUM5QixJQUFBLFFBQVEsR0FBSyxLQUFLLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQyxTQUFsQyxDQUFrQztJQUVsRCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsT0FBTyxDQUMxQjtRQUNFLE9BQUEsVUFBVSxDQUFDLE1BQU0sQ0FBQztZQUNoQixTQUFTLEVBQUU7Z0JBQ1QsZUFBZSxFQUFFLENBQUM7Z0JBQ2xCLGVBQWUsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVM7YUFDekU7U0FDRixDQUFDO0lBTEYsQ0FLRSxFQUNKLENBQUMsUUFBUSxDQUFDLENBQ1gsQ0FBQTtJQUVELE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxTQUFTLElBQU0sTUFBTSxHQUN0QyxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsVUFBQyxLQUFLLEVBQUUsS0FBSztRQUN6QyxJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUM7WUFBRSxPQUFPLEtBQUssQ0FBQTtRQUM5QyxPQUFPLG9CQUFDLFFBQVEsZUFBSyxLQUFLLENBQUMsS0FBSyxJQUFFLEtBQUssRUFBRSxLQUFLLElBQUksQ0FBQTtJQUNwRCxDQUFDLENBQUMsQ0FDRyxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFDL0MsZUFBZSxTQUFTLENBQUEifQ==
|
|
@@ -7,5 +7,5 @@ import React from 'react';
|
|
|
7
7
|
* @param testId
|
|
8
8
|
* @param others
|
|
9
9
|
*/
|
|
10
|
-
declare const TabPanel:
|
|
10
|
+
declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
export default TabPanel;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
2
3
|
import { TabsContext } from '../../../../components/tabs/context';
|
|
3
4
|
import { useTrilogyContext } from '../../../../context';
|
|
4
5
|
import { hashClass } from '../../../../helpers/hashClassesHelpers';
|
|
@@ -12,13 +13,14 @@ import React from 'react';
|
|
|
12
13
|
* @param testId
|
|
13
14
|
* @param others
|
|
14
15
|
*/
|
|
15
|
-
var TabPanel = function (_a) {
|
|
16
|
+
var TabPanel = React.forwardRef(function (_a, ref) {
|
|
16
17
|
var children = _a.children, className = _a.className, testId = _a.testId, others = __rest(_a, ["children", "className", "testId"]);
|
|
17
18
|
var styled = useTrilogyContext().styled;
|
|
18
19
|
var _b = others, index = _b.index, props = __rest(_b, ["index"]);
|
|
19
20
|
var activeIndex = React.useContext(TabsContext).activeIndex;
|
|
20
21
|
var classes = hashClass(styled, clsx('tab-panel', index === activeIndex && is('active'), className));
|
|
21
|
-
return (React.createElement("div", __assign({ "data-testid": testId, className: classes }, props), children));
|
|
22
|
-
};
|
|
22
|
+
return (React.createElement("div", __assign({ ref: ref, "data-testid": testId, className: classes }, props), children));
|
|
23
|
+
});
|
|
24
|
+
TabPanel.displayName = ComponentName.TabPanel;
|
|
23
25
|
export default TabPanel;
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
26
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvdGFiLXBhbmVscy90YWItcGFuZWwvVGFiUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBRXZELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ3hDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7OztHQU1HO0FBQ0gsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDL0IsVUFBQyxFQUF5RCxFQUFFLEdBQThCO0lBQXZGLElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUF4QyxtQ0FBMEMsQ0FBRjtJQUMvQixJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLEtBQXNCLE1BQWEsRUFBakMsS0FBSyxXQUFBLEVBQUssS0FBSyxjQUFqQixTQUFtQixDQUFnQixDQUFBO0lBQ2pDLElBQUEsV0FBVyxHQUFLLEtBQUssQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLFlBQWxDLENBQWtDO0lBRXJELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFdBQVcsRUFBRSxLQUFLLEtBQUssV0FBVyxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRXRHLE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxpQkFBZSxNQUFNLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxLQUFLLEdBQzlELFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELFFBQVEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQTtBQUM3QyxlQUFlLFFBQVEsQ0FBQSJ9
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
2
|
+
import { TabPanelProps } from '../../../../components/tabs/tab-panels/tab-panel/TabPanelProps';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Tab Panel Component
|
|
6
|
+
* @param children {ReactChild} React Child Element
|
|
7
|
+
* @param className
|
|
8
|
+
* @param testId
|
|
9
|
+
* @param others
|
|
10
|
+
*/
|
|
11
|
+
declare const TabPanel: {
|
|
12
|
+
({ children, testId, ...others }: TabPanelProps): React.JSX.Element;
|
|
13
|
+
displayName: ComponentName;
|
|
14
|
+
};
|
|
15
|
+
export default TabPanel;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { ComponentName } from '../../../../components/enumsComponentsName';
|
|
3
|
+
import { TabsContext } from '../../../../components/tabs/context';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { Animated, StyleSheet } from 'react-native';
|
|
6
|
+
/**
|
|
7
|
+
* Tab Panel Component
|
|
8
|
+
* @param children {ReactChild} React Child Element
|
|
9
|
+
* @param className
|
|
10
|
+
* @param testId
|
|
11
|
+
* @param others
|
|
12
|
+
*/
|
|
13
|
+
var TabPanel = function (_a) {
|
|
14
|
+
var children = _a.children, testId = _a.testId, others = __rest(_a, ["children", "testId"]);
|
|
15
|
+
var _b = others, index = _b.index, props = __rest(_b, ["index"]);
|
|
16
|
+
var activeIndex = React.useContext(TabsContext).activeIndex;
|
|
17
|
+
var opacity = React.useRef(new Animated.Value(0)).current;
|
|
18
|
+
var styles = React.useMemo(function () {
|
|
19
|
+
return StyleSheet.create({
|
|
20
|
+
tabPanel: {
|
|
21
|
+
display: activeIndex !== index ? 'none' : 'flex',
|
|
22
|
+
opacity: opacity,
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
}, [activeIndex, index, opacity]);
|
|
26
|
+
React.useEffect(function () {
|
|
27
|
+
if (activeIndex === index) {
|
|
28
|
+
Animated.timing(opacity, {
|
|
29
|
+
toValue: 1,
|
|
30
|
+
duration: 300,
|
|
31
|
+
useNativeDriver: true,
|
|
32
|
+
}).start();
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
Animated.timing(opacity, {
|
|
36
|
+
toValue: 0,
|
|
37
|
+
duration: 300,
|
|
38
|
+
useNativeDriver: true,
|
|
39
|
+
}).start();
|
|
40
|
+
}
|
|
41
|
+
}, [activeIndex, index, opacity]);
|
|
42
|
+
return (React.createElement(Animated.View, __assign({ style: styles.tabPanel }, props, { testID: testId }), children));
|
|
43
|
+
};
|
|
44
|
+
TabPanel.displayName = ComponentName.TabPanel;
|
|
45
|
+
export default TabPanel;
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1wYW5lbHMvdGFiLXBhbmVsL1RhYlBhbmVsLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sMkJBQTJCLENBQUE7QUFFdkQsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRW5EOzs7Ozs7R0FNRztBQUNILElBQU0sUUFBUSxHQUFHLFVBQUMsRUFBOEM7SUFBNUMsSUFBQSxRQUFRLGNBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQTdCLHNCQUErQixDQUFGO0lBQzdDLElBQU0sS0FBc0IsTUFBYSxFQUFqQyxLQUFLLFdBQUEsRUFBSyxLQUFLLGNBQWpCLFNBQW1CLENBQWdCLENBQUE7SUFDakMsSUFBQSxXQUFXLEdBQUssS0FBSyxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsWUFBbEMsQ0FBa0M7SUFDckQsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUE7SUFFM0QsSUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FDMUI7UUFDRSxPQUFBLFVBQVUsQ0FBQyxNQUFNLENBQUM7WUFDaEIsUUFBUSxFQUFFO2dCQUNSLE9BQU8sRUFBRSxXQUFXLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07Z0JBQ2hELE9BQU8sRUFBRSxPQUFPO2FBQ2pCO1NBQ0YsQ0FBQztJQUxGLENBS0UsRUFDSixDQUFDLFdBQVcsRUFBRSxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQzlCLENBQUE7SUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsSUFBSSxXQUFXLEtBQUssS0FBSyxFQUFFO1lBQ3pCLFFBQVEsQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFO2dCQUN2QixPQUFPLEVBQUUsQ0FBQztnQkFDVixRQUFRLEVBQUUsR0FBRztnQkFDYixlQUFlLEVBQUUsSUFBSTthQUN0QixDQUFDLENBQUMsS0FBSyxFQUFFLENBQUE7U0FDWDthQUFNO1lBQ0wsUUFBUSxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUU7Z0JBQ3ZCLE9BQU8sRUFBRSxDQUFDO2dCQUNWLFFBQVEsRUFBRSxHQUFHO2dCQUNiLGVBQWUsRUFBRSxJQUFJO2FBQ3RCLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQTtTQUNYO0lBQ0gsQ0FBQyxFQUFFLENBQUMsV0FBVyxFQUFFLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQyxDQUFBO0lBRWpDLE9BQU8sQ0FDTCxvQkFBQyxRQUFRLENBQUMsSUFBSSxhQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsUUFBUSxJQUFNLEtBQUssSUFBRSxNQUFNLEVBQUUsTUFBTSxLQUM3RCxRQUFRLENBQ0ssQ0FDakIsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELFFBQVEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQTtBQUM3QyxlQUFlLFFBQVEsQ0FBQSJ9
|
package/lib/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "4.0.1-
|
|
1
|
+
export declare const version = "4.0.1-ref-1";
|
package/lib/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var version = "4.0.1-
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
export var version = "4.0.1-ref-1";
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLElBQU0sT0FBTyxHQUFHLGFBQWEsQ0FBQSJ9
|