jobiqo-cl/lib/src/components/02-atoms/17-tabs/animated/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$2 = require('../../../../../node_modules/@styled-system/color/dist/index.esm.js');
require('../../../../../node_modules/styled-system/dist/index.esm.js');
var index$1 = require('../../../../../node_modules/@reach/rect/es/index.js');
var index = require('../../../../../node_modules/@reach/tabs/es/index.js');
var index$2 = require('../index.js');

// @ts-ignore
const AnimatedContext = React__default.createContext();
const AnimatedTabsBar = styled__default.div `
	position: absolute;
	height: 2px;
	transition: all 300ms ease;
	left: ${props => props.activeRect && props.activeRect.left}px;
	width: ${props => props.activeRect && props.activeRect.width}px;
	top: ${props => props.activeRect && props.activeRect.bottom - 2}px;
	${index_esm$2.color}
`;
const AnimatedTabs = (_a) => {
    var { barColor, children } = _a, rest = tslib_es6.__rest(_a, ["barColor", "children"]);
    // some state to store the position we want to animate to
    const [activeRect, setActiveRect] = React.useState(null);
    return (
    // put the function to change the styles on context so an active Tab
    // can call it, then style it up
    React__default.createElement(AnimatedContext.Provider, { value: setActiveRect },
        React__default.createElement(index$2.Tabs, Object.assign({}, rest), children),
        React__default.createElement(AnimatedTabsBar, { activeRect: activeRect, bg: barColor })));
};
const AnimatedTab = props => {
    const { isSelected } = props;
    // measure the size of our element, only listen to rect if active
    const ref = React.useRef();
    const rect = index$1.useRect(ref, isSelected);
    // get the style changing function from context
    const setActiveRect = React.useContext(AnimatedContext);
    // callup to set styles whenever we're active
    React.useLayoutEffect(() => {
        if (isSelected) {
            setActiveRect(rect);
        }
    }, [isSelected, rect, setActiveRect]);
    return React__default.createElement(index.Tab, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { border: 'none' }) }));
};

exports.AnimatedTab = AnimatedTab;
exports.AnimatedTabs = AnimatedTabs;