@ntbjs/react-components 2.0.16-rc.1 → 2.0.16
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":"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\nfunction buildTabs(children) {\n const tabs = [];\n function walk(nodes, prefix) {\n Children.forEach(nodes, (child, index) => {\n if (isNil(child)) {\n return;\n }\n\n const segment = child.key != null ? `k:${child.key}` : `i:${index}`;\n const path = prefix === '' ? segment : `${prefix}.${segment}`;\n\n if (child.type === Fragment) {\n walk(child.props?.children, path);\n }\n\n if (child.props?.hidden) {\n return;\n }\n\n if (child.type === Tab) {\n tabs.push({\n key: child.props?.id != null ? `id:${child.props.id}` : path,\n id: child.props?.id,\n trigger: child.props?.trigger,\n content: child.props?.children\n });\n }\n });\n }\n\n walk(children, '');\n return tabs;\n}\n\nfunction getInitialActiveKey(children, defaultActiveId) {\n const tabs = buildTabs(children);\n if (!isNil(defaultActiveId)) {\n const matchedTab = tabs.find(tab => tab.id === defaultActiveId);\n if (matchedTab) return matchedTab.key;\n }\n return tabs[0]?.key;\n}\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(() => getInitialActiveKey(children, defaultActiveId));\n const contentRef = useRef(null);\n\n const tabs = useMemo(() => {\n const built = buildTabs(children);\n\n if (!built.some(tab => tab.key === activeTab)) {\n setActiveTab(built[0]?.key);\n }\n\n return built;\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 * Initially-selected tab, matched against each `Tab`'s `id` prop.\n * Defaults to the first tab when omitted. Selection is tracked by each\n * `Tab`'s `id`, falling back to its React `key` and then its position, so\n * tabs keep their selection across reorders as long as they carry a stable\n * `id` or `key`.\n */\n defaultActiveId: PropTypes.string\n};\n\nexport default Tabs;\n"],"names":["buildTabs","children","tabs","walk","nodes","prefix","Children","forEach","child","index","isNil","segment","key","path","type","Fragment","props","hidden","Tab","push","id","trigger","content","getInitialActiveKey","defaultActiveId","matchedTab","find","tab","Tabs","React","forwardRef","defaultMinHeight","customPadding","onTabClick","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","useMemo","built","some","handleTabClick","triggerText","useEffect","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\nfunction buildTabs(children) {\n const tabs = [];\n function walk(nodes, prefix) {\n Children.forEach(nodes, (child, index) => {\n if (isNil(child)) {\n return;\n }\n\n const segment = child.key != null ? `k:${child.key}` : `i:${index}`;\n const path = prefix === '' ? segment : `${prefix}.${segment}`;\n\n if (child.type === Fragment) {\n walk(child.props?.children, path);\n }\n\n if (child.props?.hidden) {\n return;\n }\n\n if (child.type === Tab) {\n tabs.push({\n key: child.props?.id != null ? `id:${child.props.id}` : path,\n id: child.props?.id,\n trigger: child.props?.trigger,\n content: child.props?.children\n });\n }\n });\n }\n\n walk(children, '');\n return tabs;\n}\n\nfunction getInitialActiveKey(children, defaultActiveId) {\n const tabs = buildTabs(children);\n if (!isNil(defaultActiveId)) {\n const matchedTab = tabs.find(tab => tab.id === defaultActiveId);\n if (matchedTab) return matchedTab.key;\n }\n return tabs[0]?.key;\n}\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(() =>\n getInitialActiveKey(children, defaultActiveId)\n );\n const contentRef = useRef(null);\n\n const tabs = useMemo(() => {\n const built = buildTabs(children);\n\n if (!built.some(tab => tab.key === activeTab)) {\n setActiveTab(built[0]?.key);\n }\n\n return built;\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 * Initially-selected tab, matched against each `Tab`'s `id` prop.\n * Defaults to the first tab when omitted. Selection is tracked by each\n * `Tab`'s `id`, falling back to its React `key` and then its position, so\n * tabs keep their selection across reorders as long as they carry a stable\n * `id` or `key`.\n */\n defaultActiveId: PropTypes.string\n};\n\nexport default Tabs;\n"],"names":["buildTabs","children","tabs","walk","nodes","prefix","Children","forEach","child","index","isNil","segment","key","path","type","Fragment","props","hidden","Tab","push","id","trigger","content","getInitialActiveKey","defaultActiveId","matchedTab","find","tab","Tabs","React","forwardRef","defaultMinHeight","customPadding","onTabClick","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","useMemo","built","some","handleTabClick","triggerText","useEffect","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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePreviewVideoRef.js","sources":["../../src/hooks/usePreviewVideoRef.js"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/**\n * Ref for gallery preview videos. Chrome keeps the WebMediaPlayer of a detached\n * <video> alive until GC runs, so scrolling a large gallery exhausts the per-frame\n * player limit and new previews stop loading. Dropping the source the moment React\n * detaches the node releases the player right away. See https://crbug.com/1144736.\n *\n * Returns the ref holding the current node, and the callback ref to put on <video>.\n */\nexport function usePreviewVideoRef() {\n const videoRef = useRef(null);\n\n const setVideoRef = useCallback(node => {\n if (node) {\n videoRef.current = node;\n return;\n }\n\n const video = videoRef.current;\n if (video) {\n video.pause();\n video.removeAttribute('src');\n video.load();\n videoRef.current = null;\n }\n }, []);\n\n return [videoRef, setVideoRef];\n}\n"],"names":["usePreviewVideoRef","videoRef","useRef","setVideoRef","useCallback","node","current","video","pause","removeAttribute","load"],"mappings":";;AAUO,SAASA,kBAAkBA,GAAG;AACnC,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AAE7B,EAAA,MAAMC,WAAW,GAAGC,WAAW,CAACC,IAAI,IAAI;AACtC,IAAA,IAAIA,IAAI,EAAE;MACRJ,QAAQ,CAACK,OAAO,GAAGD,IAAI,CAAA;AACvB,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAME,KAAK,GAAGN,QAAQ,CAACK,OAAO,CAAA;AAC9B,IAAA,IAAIC,KAAK,EAAE;MACTA,KAAK,CAACC,KAAK,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"usePreviewVideoRef.js","sources":["../../src/hooks/usePreviewVideoRef.js"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/**\n * Ref for gallery preview videos. Chrome keeps the WebMediaPlayer of a detached\n * <video> alive until GC runs, so scrolling a large gallery exhausts the per-frame\n * player limit and new previews stop loading. Dropping the source the moment React\n * detaches the node releases the player right away. See https://crbug.com/1144736.\n *\n * Returns the ref holding the current node, and the callback ref to put on <video>.\n */\nexport function usePreviewVideoRef() {\n const videoRef = useRef(null);\n\n const setVideoRef = useCallback(node => {\n if (node) {\n videoRef.current = node;\n return;\n }\n\n const video = videoRef.current;\n if (video) {\n video.pause();\n // The URL lives on a child <source>, so clearing the video's own src is\n // not enough: load() would re-run resource selection and pick the source\n // again. Remove the children first so selection finds nothing to load.\n video.removeAttribute('src');\n while (video.firstChild) {\n video.removeChild(video.firstChild);\n }\n video.load();\n videoRef.current = null;\n }\n }, []);\n\n return [videoRef, setVideoRef];\n}\n"],"names":["usePreviewVideoRef","videoRef","useRef","setVideoRef","useCallback","node","current","video","pause","removeAttribute","firstChild","removeChild","load"],"mappings":";;AAUO,SAASA,kBAAkBA,GAAG;AACnC,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AAE7B,EAAA,MAAMC,WAAW,GAAGC,WAAW,CAACC,IAAI,IAAI;AACtC,IAAA,IAAIA,IAAI,EAAE;MACRJ,QAAQ,CAACK,OAAO,GAAGD,IAAI,CAAA;AACvB,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,MAAME,KAAK,GAAGN,QAAQ,CAACK,OAAO,CAAA;AAC9B,IAAA,IAAIC,KAAK,EAAE;MACTA,KAAK,CAACC,KAAK,EAAE,CAAA;AAIbD,MAAAA,KAAK,CAACE,eAAe,CAAC,KAAK,CAAC,CAAA;MAC5B,OAAOF,KAAK,CAACG,UAAU,EAAE;AACvBH,QAAAA,KAAK,CAACI,WAAW,CAACJ,KAAK,CAACG,UAAU,CAAC,CAAA;AACrC,OAAA;MACAH,KAAK,CAACK,IAAI,EAAE,CAAA;MACZX,QAAQ,CAACK,OAAO,GAAG,IAAI,CAAA;AACzB,KAAA;GACD,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,OAAO,CAACL,QAAQ,EAAEE,WAAW,CAAC,CAAA;AAChC;;;;"}
|