@semcore/tab-line 2.8.4 → 2.8.5
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/CHANGELOG.md +6 -0
- package/lib/cjs/TabLine.js +2 -1
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/es6/TabLine.js +2 -1
- package/lib/es6/TabLine.js.map +1 -1
- package/package.json +2 -2
- package/src/TabLine.js +2 -1
package/CHANGELOG.md
CHANGED
package/lib/cjs/TabLine.js
CHANGED
|
@@ -113,7 +113,8 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
113
113
|
|
|
114
114
|
var offsetLeft = tab.offsetLeft,
|
|
115
115
|
offsetWidth = tab.offsetWidth;
|
|
116
|
-
|
|
116
|
+
var positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
|
|
117
|
+
indicator.style.transform = "translateX(".concat(offsetLeft - positionLeftParent, "px)");
|
|
117
118
|
indicator.style.width = "".concat(offsetWidth, "px");
|
|
118
119
|
});
|
|
119
120
|
_this.$observer = new _resizeObserverPolyfill["default"](_this.calculateStylesIndicator);
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.js"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","style","
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.js"],"names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","Component","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n Component,\n IFunctionProps,\n Merge,\n PropGetterFn,\n PropsAndRef,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance, {\n IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, {\n INeighborItemProps,\n INeighborLocationProps,\n neighborLocationEnhance,\n} from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
package/lib/es6/TabLine.js
CHANGED
|
@@ -101,7 +101,8 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
101
101
|
|
|
102
102
|
var offsetLeft = tab.offsetLeft,
|
|
103
103
|
offsetWidth = tab.offsetWidth;
|
|
104
|
-
|
|
104
|
+
var positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
|
|
105
|
+
indicator.style.transform = "translateX(".concat(offsetLeft - positionLeftParent, "px)");
|
|
105
106
|
indicator.style.width = "".concat(offsetWidth, "px");
|
|
106
107
|
});
|
|
107
108
|
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.js"],"names":["React","ComponentProps","HTMLAttributes","createComponent","Component","IFunctionProps","Merge","PropGetterFn","PropsAndRef","sstyled","Root","Box","IBoxProps","addonTextChildren","keyboardFocusEnhance","IKeyboardFocusProps","a11yEnhance","NeighborLocation","INeighborItemProps","INeighborLocationProps","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","style","transform","clientLeft","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,cAAhB,EAAgCC,cAAhC,QAAsD,OAAtD;AACA,OAAOC,eAAP,IACEC,SADF,EAEEC,cAFF,EAGEC,KAHF,EAIEC,YAJF,EAKEC,WALF,EAMEC,OANF,EAOEC,IAPF,QAQO,eARP;AASA,SAASC,GAAT,EAAcC,SAAd,QAA+B,mBAA/B;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,oBAAP,IACEC,mBADF,QAEO,kDAFP;AAGA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,OAAOC,gBAAP,IACEC,kBADF,EAEEC,sBAFF,EAGEC,uBAHF,QAIO,4BAJP;AAKA,OAAOC,cAAP,MAA2B,0BAA3B;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMC,kBAAkB,GAAG;AACzBC,EAAAA,gBAAgB,EAAE,0BAACC,eAAD,EAAqB;AACrC,QAAIA,eAAJ,EAAqB;AACnBA,MAAAA,eAAe,CAACC,KAAhB;AACAD,MAAAA,eAAe,CAACE,KAAhB;AACD;AACF,GANwB;AAOzBC,EAAAA,aAAa,EAAE,CAAC,MAAD,EAAS,KAAT;AAPU,CAA3B;;IAUMC,W;;;;;AAeJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB;;AAAA;;AAAA,8EAHN7B,KAAK,CAAC8B,SAAN,EAGM;;AAAA,+EAFL9B,KAAK,CAAC8B,SAAN,EAEK;;AAAA,uEAYA,UAACC,KAAD;AAAA,aAAW,UAACC,CAAD,EAAO;AACnC,cAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;AACD,OAFkB;AAAA,KAZA;;AAAA,+EAgBQ,YAAM;AAC/B,UAAME,SAAS,GAAG,MAAKC,UAAL,CAAgBC,OAAlC;AACA,UAAMC,UAAU,GAAG,MAAKC,WAAL,CAAiBF,OAApC;AACA,UAAI,CAACF,SAAD,IAAc,CAACG,UAAnB,EAA+B,OAAO,KAAP;AAC/B,UAAME,GAAG,GAAGC,KAAK,CAACC,IAAN,CAAWJ,UAAU,CAACK,gBAAX,CAA4B,+BAA5B,CAAX,EAAyEC,IAAzE,CACV,UAACC,IAAD;AAAA,eAAUA,IAAI,CAACC,YAAL,CAAkB,OAAlB,MAA+BC,MAAM,CAAC,MAAKC,OAAL,CAAahB,KAAd,CAA/C;AAAA,OADU,CAAZ;AAGA,UAAI,CAACQ,GAAL,EAAU,OAAO,KAAP;;AACV,YAAKS,YAAL,CAAkBC,OAAlB,CAA0BV,GAA1B;;AAR+B,UASvBW,UATuB,GASKX,GATL,CASvBW,UATuB;AAAA,UASXC,WATW,GASKZ,GATL,CASXY,WATW;AAU/BjB,MAAAA,SAAS,CAACkB,KAAV,CAAgBC,SAAhB,wBAA0CH,UAAU,GAAGb,UAAU,CAACiB,UAAlE;AACApB,MAAAA,SAAS,CAACkB,KAAV,CAAgBG,KAAhB,aAA2BJ,WAA3B;AACD,KA5BkB;;AAEjB,UAAKK,SAAL,GAAiB,IAAInC,cAAJ,CAAmB,MAAKoC,wBAAxB,CAAjB;AACA,UAAKT,YAAL,GAAoB,IAAI3B,cAAJ,CAAmB,MAAKoC,wBAAxB,CAApB;AAHiB;AAIlB;;;;WAED,6BAAoB;AAClB,aAAO;AACL1B,QAAAA,KAAK,EAAE;AADF,OAAP;AAGD;;;WAoBD,6BAAoB;AAClB,UAAI,KAAKO,WAAL,CAAiBF,OAArB,EAA8B;AAC5B,aAAKoB,SAAL,CAAeP,OAAf,CAAuB,KAAKX,WAAL,CAAiBF,OAAxC;AACD;;AACD,WAAKqB,wBAAL;AACD;;;WAED,8BAAqB;AACnB,WAAKT,YAAL,CAAkBU,UAAlB;AACA,WAAKD,wBAAL;AACD;;;WAED,gCAAuB;AACrB,WAAKD,SAAL,CAAeE,UAAf;AACA,WAAKV,YAAL,CAAkBU,UAAlB;AACD;;;WAED,sBAAa7B,KAAb,EAAoB;AAAA,0BACM,KAAKkB,OADX;AAAA,UACVhB,KADU,iBACVA,KADU;AAAA,UACH4B,IADG,iBACHA,IADG;AAElB,UAAMC,UAAU,GAAG7B,KAAK,KAAKF,KAAK,CAACE,KAAnC;AACA,aAAO;AACL4B,QAAAA,IAAI,EAAJA,IADK;AAELE,QAAAA,QAAQ,EAAED,UAFL;AAGLE,QAAAA,OAAO,EAAE,KAAKC,gBAAL,CAAsBlC,KAAK,CAACE,KAA5B,CAHJ;AAILiC,QAAAA,QAAQ,EAAEJ,UAAU,GAAG,CAAH,GAAO,CAAC,CAJvB;AAKL,yBAAiB7B,KALZ;AAML,yBAAiB6B;AANZ,OAAP;AAQD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMK,QAAQ,GAKMtD,GALpB;AACA,UAAMuD,UAAU,GAAG,KAAnB;AAFO,2BAGsC,KAAKnB,OAH3C;AAAA,UAGCoB,MAHD,kBAGCA,MAHD;AAAA,UAGSC,QAHT,kBAGSA,QAHT;AAAA,UAGmBC,cAHnB,kBAGmBA,cAHnB;AAKP,qBAAO5D,OAAO,CAAC0D,MAAD,CAAd,eACE,oBAAC,QAAD;AAAA,eAA4B,KAAK7B,WAAjC;AAAA,gBAAmD;AAAnD,+BACE,oBAAC,gBAAD;AAAA,0BAAkC+B;AAAlC,uBACE,oBAAC,QAAD,2BADF,CADF,eAIE,oBAAC,UAAD;AAAA,eAAiB,KAAKlC;AAAtB,SAJF,CADF;AAQD;;;;EAxFuB/B,S;;gBAApBwB,W,iBACiB,S;;gBADjBA,W,WAEWwB,K;;gBAFXxB,W,kBAGkB;AACpB0C,EAAAA,YAAY,EAAE,IADM;AAEpBX,EAAAA,IAAI,EAAE,GAFc;AAGpBY,EAAAA,UAAU,EAAE;AAHQ,C;;gBAHlB3C,W,aAQa,CAACZ,WAAW,CAACM,kBAAD,CAAZ,C;;AAmFnB,SAASkD,WAAT,CAAqB3C,KAArB,EAA4B;AAAA;AAAA;;AAC1B,MAAM4C,YAAY,GAIM9D,GAJxB;AAD0B,MAElByD,QAFkB,GAE0BvC,KAF1B,CAElBuC,QAFkB;AAAA,MAERD,MAFQ,GAE0BtC,KAF1B,CAERsC,MAFQ;AAAA,MAEAO,SAFA,GAE0B7C,KAF1B,CAEA6C,SAFA;AAAA,MAEWC,UAFX,GAE0B9C,KAF1B,CAEW8C,UAFX;AAI1B,iBAAOlE,OAAO,CAAC0D,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,YAAgC,QAAhC;AAAA,WAA6C,QAA7C;AAAA,YAA2D;AAA3D,eACGO,SAAS,gBAAG,oBAAC,OAAD,CAAS,IAAT,CAAc,KAAd;AAAoB,IAAA,GAAG,EAAEA;AAAzB,IAAH,GAA4C,IADxD,EAEG7D,iBAAiB,CAACuD,QAAD,EAAWQ,OAAO,CAACC,IAAR,CAAaC,IAAxB,EAA8BF,OAAO,CAACC,IAAR,CAAaE,KAA3C,CAFpB,EAGGJ,UAAU,gBAAG,oBAAC,OAAD,CAAS,IAAT,CAAc,KAAd;AAAoB,IAAA,GAAG,EAAEA;AAAzB,IAAH,GAA6C,IAH1D,CADF;AAOD;;AAEDH,WAAW,CAACQ,OAAZ,GAAsB,CAAClE,oBAAoB,EAArB,EAAyBM,uBAAuB,EAAhD,CAAtB;;AAEA,SAAS0D,IAAT,CAAcjD,KAAd,EAAqB;AAAA;AAAA;;AAAA,MACXsC,MADW,GACAtC,KADA,CACXsC,MADW;AAEnB,MAAMc,KAAK,GAC2BtE,GADtC;AACA,iBAAOF,OAAO,CAAC0D,MAAD,CAAd,eAAuB,oBAAC,KAAD;AAAA,WAAwB;AAAxB,cAAvB;AACD;;AAED,SAASY,KAAT,CAAelD,KAAf,EAAsB;AAAA;AAAA;;AAAA,MACZsC,MADY,GACDtC,KADC,CACZsC,MADY;AAEpB,MAAMe,MAAM,GAC2BvE,GADvC;AACA,iBAAOF,OAAO,CAAC0D,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,WAAyB;AAAzB,cAAvB;AACD;;AAED,IAAMS,OAAO,GAAGzE,eAAe,CAACyB,WAAD,EAAc;AAC3CiD,EAAAA,IAAI,EAAE,CAACL,WAAD,EAAc;AAAEM,IAAAA,IAAI,EAAJA,IAAF;AAAQC,IAAAA,KAAK,EAALA;AAAR,GAAd;AADqC,CAAd,CAA/B;AAIA,eAAeH,OAAf","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n Component,\n IFunctionProps,\n Merge,\n PropGetterFn,\n PropsAndRef,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance, {\n IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, {\n INeighborItemProps,\n INeighborLocationProps,\n neighborLocationEnhance,\n} from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n indicator.style.transform = `translateX(${offsetLeft - tabsParent.clientLeft}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.js"],"names":["React","ComponentProps","HTMLAttributes","createComponent","Component","IFunctionProps","Merge","PropGetterFn","PropsAndRef","sstyled","Root","Box","IBoxProps","addonTextChildren","keyboardFocusEnhance","IKeyboardFocusProps","a11yEnhance","NeighborLocation","INeighborItemProps","INeighborLocationProps","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n Component,\n IFunctionProps,\n Merge,\n PropGetterFn,\n PropsAndRef,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance, {\n IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, {\n INeighborItemProps,\n INeighborLocationProps,\n neighborLocationEnhance,\n} from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"file":"TabLine.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
3
|
"description": "SEMRush TabLine Component",
|
|
4
|
-
"version": "2.8.
|
|
4
|
+
"version": "2.8.5",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -23,6 +23,6 @@
|
|
|
23
23
|
"react": "16.8 - 17"
|
|
24
24
|
},
|
|
25
25
|
"jest": {
|
|
26
|
-
"preset": "jest-preset-ui"
|
|
26
|
+
"preset": "@semcore/jest-preset-ui"
|
|
27
27
|
}
|
|
28
28
|
}
|
package/src/TabLine.js
CHANGED
|
@@ -74,7 +74,8 @@ class TabLineRoot extends Component {
|
|
|
74
74
|
if (!tab) return false;
|
|
75
75
|
this.$observerTab.observe(tab);
|
|
76
76
|
const { offsetLeft, offsetWidth } = tab;
|
|
77
|
-
|
|
77
|
+
const positionLeftParent = tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
|
|
78
|
+
indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;
|
|
78
79
|
indicator.style.width = `${offsetWidth}px`;
|
|
79
80
|
};
|
|
80
81
|
|