@transferwise/components 0.0.0-experimental-5d6e486 → 0.0.0-experimental-4aef76f
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,3 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}/* eslint-disable react/forbid-dom-props */import classNames from"classnames";import{Fragment,useEffect,useRef,useState}from"react";import{Direction,Width}from"../common";import{isTouchDevice as getIsTouchDevice}from"../common/deviceDetection";import keyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime"
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}/* eslint-disable react/forbid-dom-props */import classNames from"classnames";import{Fragment,useEffect,useRef,useState}from"react";import{Direction,Width}from"../common";import{isTouchDevice as getIsTouchDevice}from"../common/deviceDetection";import keyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";/*
|
|
2
|
+
scrolls vertically as well. need to use scrollTo https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
|
|
3
|
+
*/var NewTabs=function(a){var b=a.className,c=a.headerWidth,d=void 0===c?Width.BLOCK:c,e=a.tabs,f=a.name,g=a.selected,h=a.onTabSelect,i=a.animatePanelsOnClick,j=a.changeTabOnSwipe,k=void 0!==i&&i?"smooth":"auto",l=useState({translateLineX:void 0,fullWidthTabs:d===Width.BLOCK}),m=_slicedToArray(l,2),n=m[0],o=m[1],p=useRef(),q=useRef([]),r=useRef([]),s=useState(0),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useState(g||0),x=_slicedToArray(w,2),y=x[0],z=x[1],A=useRef(!1),B=useRef(),C=useState(!1),D=_slicedToArray(C,2),E=D[0],F=D[1],G=useRef(!0);useEffect(function(){F(getIsTouchDevice())},[]),useEffect(function(){y!==g&&h(y)},[y]),useEffect(function(){g!==y&&z(g)},[g]),useEffect(function(){return window.addEventListener("resize",H),function(){window.removeEventListener("resize",H)}},[]);var H=function(){p.current&&v(getContainerWidth(p.current))};useEffect(function(){var a=q.current.map(function(a){return a?getContainerWidth(a):0}).reduce(function(c,a){return c+a},0);!n.fullWidthTabs&&(d===Width.BLOCK||u<a)?o({fullWidthTabs:!0,translateLineX:"".concat(100*y,"%")}):n.fullWidthTabs&&d===Width.AUTO&&u>=a?o({fullWidthTabs:!1,translateLineX:"".concat(N(y),"px")}):o(function(a){return _objectSpread(_objectSpread({},a),{},{translateLineX:"".concat(N(y),"px")})})},[u,d,y,n.fullWidthTabs]),useEffect(function(){A.current||requestAnimationFrame(function(){r.current[y].scrollIntoView(G.current?void 0:{behavior:k}),G.current=!1})},[y,k]);var I=function(a){if(!A.current){var b;null===(b=r.current[a])||void 0===b?void 0:b.scrollIntoView({behavior:k})}},J=function(a,b){a&&a.keyCode===keyCodes.ENTER&&I(b)},K=function(a){return a-e.slice(0,a).filter(function(a){return a.disabled}).length},L=function(a){if(A.current=!0,clearTimeout(B.current),B.current=setTimeout(function(){A.current=!1},50),!!p.current){var b=K(Math.round(a.currentTarget.scrollLeft/a.currentTarget.offsetWidth));b!==y&&z(b)}},M=function(){var a=q.current[y],b=a?a.getBoundingClientRect().width:0;return"".concat(b,"px")},N=function(a){return q.current.filter(function(b,c){return c<a}).map(function(a){return a?getContainerWidth(a):0}).reduce(function(c,a){return c+a},0)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(a){var c=a===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:function ref(a){return p.current=a},className:classNames("tabs",b,{"tabs--auto-width":d===Width.AUTO,"tabs--touch-device":E,"tabs--no-drag":!(!(void 0!==j)||j)}),children:[/*#__PURE__*/_jsxs(TabList,{children:[e.map(function(a,b){var c=a.title,d=a.disabled;return/*#__PURE__*/ (/* @ts-expect-error Tab is not typescript */_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(a){q.current[b]=a},id:"".concat(f,"-tab-").concat(b),panelId:"".concat(f,"-panel-").concat(b),selected:y===b,disabled:d,focusTab:function focusTab(){var a;if(null!==(a=p.current)&&void 0!==a&&a.contains(document.activeElement)){var c;null===(c=q.current[b])||void 0===c?void 0:c.focus()}},onClick:d?null:function(){return I(b)},onKeyDown:function onKeyDown(a){return J(a,b)}},n.fullWidthTabs?{style:{width:"".concat(100*(1/e.length),"%")}}:{}),{},{children:c}),c))}),n.translateLineX?/*#__PURE__*/_jsx("li",{className:classNames("tabs__line"),style:{width:M(),transform:c?"translateX(-".concat(n.translateLineX,")"):"translateX(".concat(n.translateLineX,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:function ref(a){a&&(p.current=a,v(getContainerWidth(a)))},className:"tabs__panel-container",onScroll:L,children:e.filter(function(a){return!a.disabled}).map(function(a,b){var c=a.content;return/*#__PURE__*/_jsx(Fragment,{children:/*#__PURE__*/_jsx(TabPanel,{ref:function ref(a){r.current[b]=a},tabId:"".concat(f,"-tab-").concat(b),id:"".concat(f,"-panel-").concat(b),style:{width:"undefined"==typeof u?void 0:"".concat(u,"px")},children:c},e[b].title)},"".concat(e[b].title,"-fragment"))})})]})}})},getContainerWidth=function(a){var b=a.getBoundingClientRect(),c=b.width;return c};export default NewTabs;
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.array.concat.js";/* eslint-disable react/forbid-dom-props */import classNames from"classnames";import{Fragment,useEffect,useRef,useState}from"react";import{Direction,Width}from"../common";import{isTouchDevice as getIsTouchDevice}from"../common/deviceDetection";import keyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime"
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.array.concat.js";/* eslint-disable react/forbid-dom-props */import classNames from"classnames";import{Fragment,useEffect,useRef,useState}from"react";import{Direction,Width}from"../common";import{isTouchDevice as getIsTouchDevice}from"../common/deviceDetection";import keyCodes from"../common/keyCodes";import{DirectionContext}from"../provider/direction";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";/*
|
|
2
|
+
scrolls vertically as well. need to use scrollTo https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
|
|
3
|
+
*/var NewTabs=function(a){var b=a.className,c=a.headerWidth,d=void 0===c?Width.BLOCK:c,e=a.tabs,f=a.name,g=a.selected,h=a.onTabSelect,i=a.animatePanelsOnClick,j=a.changeTabOnSwipe,k=void 0!==i&&i?"smooth":"auto",l=useState({translateLineX:void 0,fullWidthTabs:d===Width.BLOCK}),m=_slicedToArray(l,2),n=m[0],o=m[1],p=useRef(),q=useRef([]),r=useRef([]),s=useState(0),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useState(g||0),x=_slicedToArray(w,2),y=x[0],z=x[1],A=useRef(!1),B=useRef(),C=useState(!1),D=_slicedToArray(C,2),E=D[0],F=D[1],G=useRef(!0);useEffect(function(){F(getIsTouchDevice())},[]),useEffect(function(){y!==g&&h(y)},[y]),useEffect(function(){g!==y&&z(g)},[g]),useEffect(function(){return window.addEventListener("resize",H),function(){window.removeEventListener("resize",H)}},[]);var H=function(){p.current&&v(getContainerWidth(p.current))};useEffect(function(){var a=q.current.map(function(a){return a?getContainerWidth(a):0}).reduce(function(c,a){return c+a},0);!n.fullWidthTabs&&(d===Width.BLOCK||u<a)?o({fullWidthTabs:!0,translateLineX:"".concat(100*y,"%")}):n.fullWidthTabs&&d===Width.AUTO&&u>=a?o({fullWidthTabs:!1,translateLineX:"".concat(N(y),"px")}):o(function(a){return _objectSpread(_objectSpread({},a),{},{translateLineX:"".concat(N(y),"px")})})},[u,d,y,n.fullWidthTabs]),useEffect(function(){A.current||requestAnimationFrame(function(){r.current[y].scrollIntoView(G.current?void 0:{behavior:k}),G.current=!1})},[y,k]);var I=function(a){if(!A.current){var b;null===(b=r.current[a])||void 0===b?void 0:b.scrollIntoView({behavior:k})}},J=function(a,b){a&&a.keyCode===keyCodes.ENTER&&I(b)},K=function(a){return a-e.slice(0,a).filter(function(a){return a.disabled}).length},L=function(a){if(A.current=!0,clearTimeout(B.current),B.current=setTimeout(function(){A.current=!1},50),!!p.current){var b=K(Math.round(a.currentTarget.scrollLeft/a.currentTarget.offsetWidth));b!==y&&z(b)}},M=function(){var a=q.current[y],b=a?a.getBoundingClientRect().width:0;return"".concat(b,"px")},N=function(a){return q.current.filter(function(b,c){return c<a}).map(function(a){return a?getContainerWidth(a):0}).reduce(function(c,a){return c+a},0)};return/*#__PURE__*/_jsx(DirectionContext.Consumer,{children:function children(a){var c=a===Direction.RTL;return/*#__PURE__*/_jsxs("div",{ref:function ref(a){return p.current=a},className:classNames("tabs",b,{"tabs--auto-width":d===Width.AUTO,"tabs--touch-device":E,"tabs--no-drag":!(!(void 0!==j)||j)}),children:[/*#__PURE__*/_jsxs(TabList,{children:[e.map(function(a,b){var c=a.title,d=a.disabled;return/*#__PURE__*/ (/* @ts-expect-error Tab is not typescript */_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(a){q.current[b]=a},id:"".concat(f,"-tab-").concat(b),panelId:"".concat(f,"-panel-").concat(b),selected:y===b,disabled:d,focusTab:function focusTab(){var a;if(null!==(a=p.current)&&void 0!==a&&a.contains(document.activeElement)){var c;null===(c=q.current[b])||void 0===c?void 0:c.focus()}},onClick:d?null:function(){return I(b)},onKeyDown:function onKeyDown(a){return J(a,b)}},n.fullWidthTabs?{style:{width:"".concat(100*(1/e.length),"%")}}:{}),{},{children:c}),c))}),n.translateLineX?/*#__PURE__*/_jsx("li",{className:classNames("tabs__line"),style:{width:M(),transform:c?"translateX(-".concat(n.translateLineX,")"):"translateX(".concat(n.translateLineX,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:function ref(a){a&&(p.current=a,v(getContainerWidth(a)))},className:"tabs__panel-container",onScroll:L,children:e.filter(function(a){return!a.disabled}).map(function(a,b){var c=a.content;return/*#__PURE__*/_jsx(Fragment,{children:/*#__PURE__*/_jsx(TabPanel,{ref:function ref(a){r.current[b]=a},tabId:"".concat(f,"-tab-").concat(b),id:"".concat(f,"-panel-").concat(b),style:{width:"undefined"==typeof u?void 0:"".concat(u,"px")},children:c},e[b].title)},"".concat(e[b].title,"-fragment"))})})]})}})},getContainerWidth=function(a){var b=a.getBoundingClientRect(),c=b.width;return c};export default NewTabs;
|
package/package.json
CHANGED