All files / molecules/Tabs Indicator.jsx

33.33% Statements 3/9
0% Branches 0/2
0% Functions 0/1
37.5% Lines 3/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38            1x                                     1x           1x            
import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
 
import Paper from '../../atoms/Paper';
 
const TabsIndicator = ({ activeTab, color, height, domNode }) => {
  const tabNode = get(domNode, ['childNodes', activeTab]);
 
  if (!tabNode) return null;
  const { offsetLeft, offsetWidth } = tabNode;
  const css = {
    backgroundColor: color,
    bottom: 0,
    height: `${height}px`,
    left: 0,
    position: 'absolute',
    transform: `translateX(${offsetLeft}px)`,
    transition: 'transform 0.24s ease, width 0.24s ease',
    width: `${offsetWidth}px`,
    willChange: 'transform, width',
  };
  return <Paper css={css} />;
};
 
TabsIndicator.propTypes = {
  activeTab: PropTypes.number.isRequired,
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.number.isRequired,
  domNode: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};
TabsIndicator.defaultProps = {
  color: undefined,
  domNode: null,
};
 
export default TabsIndicator;