@ntbjs/react-components 2.0.15-rc.1 → 2.0.15-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,13 +14,6 @@ const Dot = styled.span`
|
|
|
14
14
|
.live-dot__core {
|
|
15
15
|
fill: #d83000;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
body.light-theme & {
|
|
19
|
-
.live-dot__ring,
|
|
20
|
-
.live-dot__core {
|
|
21
|
-
fill: #ffe2da;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
17
|
`;
|
|
25
18
|
const LiveDot = () => React__default.createElement(Dot, null, React__default.createElement("svg", {
|
|
26
19
|
width: "12",
|
|
@@ -52,8 +45,8 @@ const LiveBadge = React__default.forwardRef(function LiveBadge({
|
|
|
52
45
|
ref: forwardedRef,
|
|
53
46
|
badgeIcon: React__default.createElement(LiveDot, null),
|
|
54
47
|
badgeContent: label,
|
|
55
|
-
backgroundColors: ['#000000', '#
|
|
56
|
-
colors: ['#ffffff', '#
|
|
48
|
+
backgroundColors: ['#000000', '#000000'],
|
|
49
|
+
colors: ['#ffffff', '#ffffff'],
|
|
57
50
|
fontSize: fontSize,
|
|
58
51
|
fontWeight: fontWeight,
|
|
59
52
|
height: height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveBadge.js","sources":["../../../src/components/data/LiveBadge/LiveBadge.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Badge from '../Badge/Badge';\n\
|
|
1
|
+
{"version":3,"file":"LiveBadge.js","sources":["../../../src/components/data/LiveBadge/LiveBadge.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Badge from '../Badge/Badge';\n\nconst Dot = styled.span`\n display: inline-flex;\n line-height: 0;\n\n .live-dot__ring {\n fill: #7f1b1b;\n }\n .live-dot__core {\n fill: #d83000;\n }\n`;\n\nconst LiveDot = () => (\n <Dot>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"live-dot__ring\" cx=\"6\" cy=\"6\" r=\"6\" />\n <circle className=\"live-dot__core\" cx=\"6\" cy=\"6\" r=\"4\" />\n </svg>\n </Dot>\n);\n\n/**\n * A red \"live\" pill (dot + label) marking an asset that is currently a live\n * video recording. Thin wrapper around Badge with the fixed live styling.\n *\n * ### Import\n *\n * ```js\n * import { LiveBadge } from '@ntbjs/react-components/data';\n * ```\n */\nconst LiveBadge = React.forwardRef(function LiveBadge(\n {\n label = 'LIVE',\n fontSize = 12,\n fontWeight = 500,\n height = 20,\n horizontalPadding = 8,\n verticalPadding = 2,\n ...rest\n },\n forwardedRef\n) {\n return (\n <Badge\n ref={forwardedRef}\n badgeIcon={<LiveDot />}\n badgeContent={label}\n backgroundColors={['#000000', '#000000']}\n colors={['#ffffff', '#ffffff']}\n fontSize={fontSize}\n fontWeight={fontWeight}\n height={height}\n horizontalPadding={horizontalPadding}\n verticalPadding={verticalPadding}\n {...rest}\n />\n );\n});\n\nLiveBadge.propTypes = {\n /** Badge label. Defaults to \"LIVE\"; pass a localized string to override. */\n label: PropTypes.node,\n /** Font size in pixels. */\n fontSize: PropTypes.number,\n /** Font weight. */\n fontWeight: PropTypes.number,\n /** Badge height in pixels. */\n height: PropTypes.number,\n /** Left and right padding in pixels. */\n horizontalPadding: PropTypes.number,\n /** Top and bottom padding in pixels. */\n verticalPadding: PropTypes.number\n};\n\nexport default LiveBadge;\n"],"names":["Dot","styled","span","LiveDot","React","createElement","width","height","viewBox","fill","xmlns","className","cx","cy","r","LiveBadge","forwardRef","label","fontSize","fontWeight","horizontalPadding","verticalPadding","rest","forwardedRef","Badge","_extends","ref","badgeIcon","badgeContent","backgroundColors","colors","propTypes","process","env","NODE_ENV","PropTypes","node","number"],"mappings":";;;;;;AAKA,MAAMA,GAAG,GAAGC,MAAM,CAACC,IAAI,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,OAAO,GAAGA,MACdC,cAAA,CAAAC,aAAA,CAACL,GAAG,EAAA,IAAA,EACFI,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,KAAK,EAAC,IAAI;AAACC,EAAAA,MAAM,EAAC,IAAI;AAACC,EAAAA,OAAO,EAAC,WAAW;AAACC,EAAAA,IAAI,EAAC,MAAM;AAACC,EAAAA,KAAK,EAAC,4BAAA;AAA4B,CAC5FN,EAAAA,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQM,EAAAA,SAAS,EAAC,gBAAgB;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,CAAC,EAAC,GAAA;AAAG,CAAE,CAAC,EACzDV,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQM,EAAAA,SAAS,EAAC,gBAAgB;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,CAAC,EAAC,GAAA;AAAG,CAAE,CACrD,CACF,CACN,CAAA;AAYKC,MAAAA,SAAS,GAAGX,cAAK,CAACY,UAAU,CAAC,SAASD,SAASA,CACnD;AACEE,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,UAAU,GAAG,GAAG;AAChBZ,EAAAA,MAAM,GAAG,EAAE;AACXa,EAAAA,iBAAiB,GAAG,CAAC;AACrBC,EAAAA,eAAe,GAAG,CAAC;EACnB,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,OACEnB,cAAA,CAAAC,aAAA,CAACmB,KAAK,EAAAC,QAAA,CAAA;AACJC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,SAAS,EAAEvB,cAAA,CAAAC,aAAA,CAACF,OAAO,MAAE,CAAE;AACvByB,IAAAA,YAAY,EAAEX,KAAM;AACpBY,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;AACzCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;AAC/BZ,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBZ,IAAAA,MAAM,EAAEA,MAAO;AACfa,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCC,IAAAA,eAAe,EAAEA,eAAAA;GACbC,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC,EAAC;AAEFP,SAAS,CAACgB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAEpBjB,KAAK,EAAEkB,SAAS,CAACC,IAAI;EAErBlB,QAAQ,EAAEiB,SAAS,CAACE,MAAM;EAE1BlB,UAAU,EAAEgB,SAAS,CAACE,MAAM;EAE5B9B,MAAM,EAAE4B,SAAS,CAACE,MAAM;EAExBjB,iBAAiB,EAAEe,SAAS,CAACE,MAAM;EAEnChB,eAAe,EAAEc,SAAS,CAACE,MAAAA;AAC7B,CAAC,GAAA,EAAA;;;;"}
|
package/build/data/Tab/Tab.js
CHANGED
|
@@ -15,7 +15,8 @@ const Tab = React__default.forwardRef(function Tab({
|
|
|
15
15
|
});
|
|
16
16
|
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
17
17
|
children: PropTypes.any,
|
|
18
|
-
hidden: PropTypes.bool
|
|
18
|
+
hidden: PropTypes.bool,
|
|
19
|
+
id: PropTypes.string
|
|
19
20
|
} : {};
|
|
20
21
|
Tab.defaultProps = {
|
|
21
22
|
hidden: false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../../src/components/data/Tab/Tab.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tab.styled';\n\n/**\n * This is a component to help you get started with development.\n */\nconst Tab = React.forwardRef(function Tab({ children, hidden, ...props }, forwardedRef) {\n if (hidden) return null;\n\n return (\n <S.Tab ref={forwardedRef} {...props}>\n {children}\n </S.Tab>\n );\n});\n\nTab.propTypes = {\n children: PropTypes.any,\n hidden: PropTypes.bool\n};\n\nTab.defaultProps = {\n hidden: false\n};\n\nexport default Tab;\n"],"names":["Tab","React","forwardRef","children","hidden","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","any","bool","defaultProps"],"mappings":";;;;;AAOMA,MAAAA,GAAG,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EACtF,IAAIF,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACEH,cAAA,CAAAM,aAAA,CAACC,KAAK,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CAChCF,EAAAA,QACI,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFH,GAAG,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACdX,QAAQ,EAAEY,SAAS,CAACC,GAAG;EACvBZ,MAAM,EAAEW,SAAS,CAACE,
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../../src/components/data/Tab/Tab.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tab.styled';\n\n/**\n * This is a component to help you get started with development.\n */\nconst Tab = React.forwardRef(function Tab({ children, hidden, ...props }, forwardedRef) {\n if (hidden) return null;\n\n return (\n <S.Tab ref={forwardedRef} {...props}>\n {children}\n </S.Tab>\n );\n});\n\nTab.propTypes = {\n children: PropTypes.any,\n hidden: PropTypes.bool,\n /**\n * Stable identifier used by `Tabs` `defaultActiveId` to select this tab.\n */\n id: PropTypes.string\n};\n\nTab.defaultProps = {\n hidden: false\n};\n\nexport default Tab;\n"],"names":["Tab","React","forwardRef","children","hidden","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","any","bool","id","string","defaultProps"],"mappings":";;;;;AAOMA,MAAAA,GAAG,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EACtF,IAAIF,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACEH,cAAA,CAAAM,aAAA,CAACC,KAAK,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CAChCF,EAAAA,QACI,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFH,GAAG,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACdX,QAAQ,EAAEY,SAAS,CAACC,GAAG;EACvBZ,MAAM,EAAEW,SAAS,CAACE,IAAI;EAItBC,EAAE,EAAEH,SAAS,CAACI,MAAAA;AAChB,CAAC,GAAA,EAAA,CAAA;AAEDnB,GAAG,CAACoB,YAAY,GAAG;AACjBhB,EAAAA,MAAM,EAAE,KAAA;AACV,CAAC;;;;"}
|
package/build/data/Tabs/Tabs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import {
|
|
2
|
+
import { isNil, isEmpty } from 'lodash';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import React__default, { useState, useRef, useMemo, Children, Fragment } from 'react';
|
|
4
|
+
import React__default, { useState, useRef, useMemo, useEffect, Children, Fragment } from 'react';
|
|
5
5
|
import Tab from '../Tab/Tab.js';
|
|
6
6
|
import { Tabs as Tabs$1, TabHeaders, TabHeader, TabHeaderBorder, TabContent } from './Tabs.styled.js';
|
|
7
7
|
|
|
@@ -10,6 +10,7 @@ const Tabs = React__default.forwardRef(function Tabs({
|
|
|
10
10
|
defaultMinHeight = '',
|
|
11
11
|
customPadding = 0,
|
|
12
12
|
onTabClick = () => {},
|
|
13
|
+
defaultActiveId,
|
|
13
14
|
...props
|
|
14
15
|
}, forwardedRef) {
|
|
15
16
|
const [activeTab, setActiveTab] = useState(0);
|
|
@@ -30,6 +31,7 @@ const Tabs = React__default.forwardRef(function Tabs({
|
|
|
30
31
|
if (child.type === Tab) {
|
|
31
32
|
tabs.push({
|
|
32
33
|
key: index,
|
|
34
|
+
id: child.props?.id,
|
|
33
35
|
trigger: child.props?.trigger,
|
|
34
36
|
content: child.props?.children
|
|
35
37
|
});
|
|
@@ -55,6 +57,11 @@ const Tabs = React__default.forwardRef(function Tabs({
|
|
|
55
57
|
});
|
|
56
58
|
}
|
|
57
59
|
};
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (isNil(defaultActiveId)) return;
|
|
62
|
+
const matchedTab = tabs.find(tab => tab.id === defaultActiveId);
|
|
63
|
+
if (matchedTab) handleTabClick(matchedTab);
|
|
64
|
+
}, []);
|
|
58
65
|
return React__default.createElement(Tabs$1, _extends({
|
|
59
66
|
ref: forwardedRef
|
|
60
67
|
}, props, {
|
|
@@ -84,7 +91,8 @@ Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
84
91
|
backgroundColor: PropTypes.string,
|
|
85
92
|
defaultMinHeight: PropTypes.string,
|
|
86
93
|
customPadding: PropTypes.string,
|
|
87
|
-
onTabClick: PropTypes.func
|
|
94
|
+
onTabClick: PropTypes.func,
|
|
95
|
+
defaultActiveId: PropTypes.string
|
|
88
96
|
} : {};
|
|
89
97
|
|
|
90
98
|
export { Tabs as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../src/components/data/Tabs/Tabs.js"],"sourcesContent":["import { isEmpty, isNil } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { Children, Fragment, useMemo, useRef, useState } from 'react';\nimport Tab from '../Tab';\nimport * as S from './Tabs.styled';\n\n/**\n * Tabs that let you group content\n *\n * ### Import\n *\n * ``` js\n * import { Tabs, Tab } from '@ntbjs/react-components/data'\n * // or\n * import Tabs from '@ntbjs/react-components/data/Tabs'\n * import Tab from '@ntbjs/react-components/data/Tab'\n * ```\n * ### Tab - Tabs - Badge\n * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * </Tabs>\n * ```\n * ## Wrapping\n * Content (data displayed inside the `Tab`) is wrapped by `Tab`:\n * ```\n * <Tab>\n * Tab content\n * </Tab>\n * ```\n * ### Badge\n * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):\n *\n *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).\n * ```\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * ```\n * All tabs are wrapped by `Tabs`:\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>\n * </Tabs>\n * ```\n * ## Props\n * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.\n * ```\n * <Tabs backgroundColor={'#bfe0d5'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n * ### hidden\n * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):\n * ```\n * <Tabs>\n * <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>\n * </Tabs>\n * ```\n * ### Default minHeight\n * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.\n *\n * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs defaultMinHeight={'500px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *\n * ### Custom padding\n * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,\n * not to the content within the Tabs.\n *\n * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs customPadding={'40px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef(function Tabs(\n { children, defaultMinHeight = '', customPadding = 0, onTabClick = () => {}, ...props },\n forwardedRef\n) {\n const [activeTab, setActiveTab] = useState(0);\n const contentRef = useRef(null);\n\n const tabs = useMemo(() => {\n const tabs = [];\n function extractChildren(children) {\n Children.forEach(children, (child, index) => {\n if (isNil(child)) {\n return null;\n }\n\n if (child.type === Fragment) {\n extractChildren(child.props?.children);\n }\n\n if (child.props?.hidden) {\n return null;\n }\n\n if (child.type === Tab) {\n tabs.push({\n key: index,\n trigger: child.props?.trigger,\n content: child.props?.children\n });\n }\n });\n }\n\n extractChildren(children);\n\n if (!tabs.some(tab => tab?.key === activeTab)) {\n setActiveTab(tabs[0]?.key);\n }\n\n return tabs;\n }, [children]);\n\n const handleTabClick = tab => {\n setActiveTab(tab.key);\n let triggerText = '';\n\n if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {\n triggerText = tab.trigger.props.children;\n }\n if (onTabClick) {\n onTabClick({\n ...tab,\n triggerText: triggerText\n });\n }\n };\n\n return (\n <S.Tabs ref={forwardedRef} {...props} role=\"tablist\">\n <S.TabHeaders custompadding={customPadding}>\n {tabs.map(tab => (\n <S.TabHeader\n key={tab.key}\n hidden={tab.hidden}\n $active={tab.key === activeTab}\n onClick={() => handleTabClick(tab)}\n role=\"tab\"\n >\n {tab.trigger}\n </S.TabHeader>\n ))}\n </S.TabHeaders>\n <S.TabHeaderBorder custompadding={customPadding}></S.TabHeaderBorder>\n <S.TabContent>\n {tabs.map(tab => (\n <div\n ref={tab.key === activeTab?.key ? contentRef : null}\n key={tab.key}\n role=\"tabpanel\"\n hidden={tab.key !== activeTab}\n style={{\n minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''\n }}\n >\n {tab.content}\n </div>\n ))}\n </S.TabContent>\n </S.Tabs>\n );\n});\n\nTabs.propTypes = {\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n /**\n * Whether `Tabs` component has a background color\n */\n backgroundColor: PropTypes.string,\n /**\n * Whether `tabs` will have a predefined min-height.\n */\n defaultMinHeight: PropTypes.string,\n /**\n * Custom padding.\n */\n customPadding: PropTypes.string,\n /**\n * Callback for clicked tab\n */\n onTabClick: PropTypes.func\n};\n\nexport default Tabs;\n"],"names":["Tabs","React","forwardRef","children","defaultMinHeight","customPadding","onTabClick","props","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","tabs","useMemo","extractChildren","Children","forEach","child","index","isNil","type","Fragment","hidden","Tab","push","key","trigger","content","some","tab","handleTabClick","triggerText","createElement","S","_extends","ref","role","custompadding","map","$active","onClick","style","minHeight","isEmpty","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","array","object","backgroundColor","string","func"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/components/data/Tabs/Tabs.js"],"sourcesContent":["import { isEmpty, isNil } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { Children, Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport Tab from '../Tab';\nimport * as S from './Tabs.styled';\n\n/**\n * Tabs that let you group content\n *\n * ### Import\n *\n * ``` js\n * import { Tabs, Tab } from '@ntbjs/react-components/data'\n * // or\n * import Tabs from '@ntbjs/react-components/data/Tabs'\n * import Tab from '@ntbjs/react-components/data/Tab'\n * ```\n * ### Tab - Tabs - Badge\n * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * </Tabs>\n * ```\n * ## Wrapping\n * Content (data displayed inside the `Tab`) is wrapped by `Tab`:\n * ```\n * <Tab>\n * Tab content\n * </Tab>\n * ```\n * ### Badge\n * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):\n *\n *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).\n * ```\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * ```\n * All tabs are wrapped by `Tabs`:\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>\n * </Tabs>\n * ```\n * ## Props\n * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.\n * ```\n * <Tabs backgroundColor={'#bfe0d5'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n * ### hidden\n * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):\n * ```\n * <Tabs>\n * <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>\n * </Tabs>\n * ```\n * ### Default minHeight\n * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.\n *\n * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs defaultMinHeight={'500px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *\n * ### Custom padding\n * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,\n * not to the content within the Tabs.\n *\n * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs customPadding={'40px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef(function Tabs(\n {\n children,\n defaultMinHeight = '',\n customPadding = 0,\n onTabClick = () => {},\n defaultActiveId,\n ...props\n },\n forwardedRef\n) {\n const [activeTab, setActiveTab] = useState(0);\n const contentRef = useRef(null);\n\n const tabs = useMemo(() => {\n const tabs = [];\n function extractChildren(children) {\n Children.forEach(children, (child, index) => {\n if (isNil(child)) {\n return null;\n }\n\n if (child.type === Fragment) {\n extractChildren(child.props?.children);\n }\n\n if (child.props?.hidden) {\n return null;\n }\n\n if (child.type === Tab) {\n tabs.push({\n key: index,\n id: child.props?.id,\n trigger: child.props?.trigger,\n content: child.props?.children\n });\n }\n });\n }\n\n extractChildren(children);\n\n if (!tabs.some(tab => tab?.key === activeTab)) {\n setActiveTab(tabs[0]?.key);\n }\n\n return tabs;\n }, [children]);\n\n const handleTabClick = tab => {\n setActiveTab(tab.key);\n let triggerText = '';\n\n if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {\n triggerText = tab.trigger.props.children;\n }\n if (onTabClick) {\n onTabClick({\n ...tab,\n triggerText: triggerText\n });\n }\n };\n\n useEffect(() => {\n if (isNil(defaultActiveId)) return;\n const matchedTab = tabs.find(tab => tab.id === defaultActiveId);\n if (matchedTab) handleTabClick(matchedTab);\n }, []); // eslint-disable-line\n\n return (\n <S.Tabs ref={forwardedRef} {...props} role=\"tablist\">\n <S.TabHeaders custompadding={customPadding}>\n {tabs.map(tab => (\n <S.TabHeader\n key={tab.key}\n hidden={tab.hidden}\n $active={tab.key === activeTab}\n onClick={() => handleTabClick(tab)}\n role=\"tab\"\n >\n {tab.trigger}\n </S.TabHeader>\n ))}\n </S.TabHeaders>\n <S.TabHeaderBorder custompadding={customPadding}></S.TabHeaderBorder>\n <S.TabContent>\n {tabs.map(tab => (\n <div\n ref={tab.key === activeTab?.key ? contentRef : null}\n key={tab.key}\n role=\"tabpanel\"\n hidden={tab.key !== activeTab}\n style={{\n minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''\n }}\n >\n {tab.content}\n </div>\n ))}\n </S.TabContent>\n </S.Tabs>\n );\n});\n\nTabs.propTypes = {\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n /**\n * Whether `Tabs` component has a background color\n */\n backgroundColor: PropTypes.string,\n /**\n * Whether `tabs` will have a predefined min-height.\n */\n defaultMinHeight: PropTypes.string,\n /**\n * Custom padding.\n */\n customPadding: PropTypes.string,\n /**\n * Callback for clicked tab\n */\n onTabClick: PropTypes.func,\n /**\n *\n * Defaults to the first tab.\n */\n /**\n *\n * Initially-selected tab, matched against each `Tab`'s `id` prop.\n */\n defaultActiveId: PropTypes.string\n};\n\nexport default Tabs;\n"],"names":["Tabs","React","forwardRef","children","defaultMinHeight","customPadding","onTabClick","defaultActiveId","props","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","tabs","useMemo","extractChildren","Children","forEach","child","index","isNil","type","Fragment","hidden","Tab","push","key","id","trigger","content","some","tab","handleTabClick","triggerText","useEffect","matchedTab","find","createElement","S","_extends","ref","role","custompadding","map","$active","onClick","style","minHeight","isEmpty","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","array","object","backgroundColor","string","func"],"mappings":"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"}
|