vcc-ui/lib/components/tab-nav/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabNav = exports.TabNavContext = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactFela = require("react-fela");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _block = require("../block");

var _click = require("../click");

var _arrow = require("../arrow");

var _inline = require("../inline");

var _flex = require("../flex");

var _getThemeStyle = require("../../get-theme-style");

var _deprecate = require("../../deprecate");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var TabNavContext = (0, _react.createContext)({});
exports.TabNavContext = TabNavContext;
var styles = {
  nav: function nav(_ref) {
    var theme = _ref.theme,
        reverseOut = _ref.reverseOut;
    return {
      flexDirection: 'row',
      overflow: 'hidden',
      borderBottomStyle: 'solid',
      borderBottomWidth: 1,
      borderBottomColor: reverseOut ? theme.color.primitive.grey200 : theme.color.ornament.divider,
      backgroundColor: reverseOut ? theme.color.primitive.grey200 : theme.color.background.secondary
    };
  },
  scrollContainer: {
    flex: '0 1 auto',
    overflowY: 'hidden',
    overflowX: 'auto',
    msOverflowY: 'hidden',
    msOverflowX: 'auto',
    msOverflowStyle: 'none',
    '::-webkit-scrollbar': {
      display: 'none'
    }
  },
  itemContainer: {
    flexDirection: 'row',
    padding: '0 0 0 19px'
  },
  stickyLeft: function stickyLeft(_ref2) {
    var isCentered = _ref2.isCentered;
    return {
      flexShrink: 0,
      flexBasis: 0,
      flexGrow: isCentered ? 1 : 0,
      msFlex: '1 0 auto',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center'
    };
  },
  stickyRight: {
    flexShrink: 0,
    flexBasis: 0,
    flexGrow: 1,
    msFlex: '1 0 auto',
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row'
  },
  border: function border(_ref3) {
    var reverseOut = _ref3.reverseOut,
        animatedMargin = _ref3.animatedMargin,
        duration = _ref3.duration,
        theme = _ref3.theme;
    return {
      width: 0,
      height: duration === 0 ? 0 : 3,
      marginRight: '0 !important',
      backgroundColor: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight,
      transitionProperty: "margin-".concat(animatedMargin, ", width"),
      transitionTimingFunction: 'ease-out',
      transitionDuration: duration + 'ms'
    };
  },
  backButton: function backButton(_ref4) {
    var _ref5;

    var reverseOut = _ref4.reverseOut,
        _ref4$showBackButtonO = _ref4.showBackButtonOn,
        showBackButtonOn = _ref4$showBackButtonO === void 0 ? [] : _ref4$showBackButtonO,
        theme = _ref4.theme;
    return _ref5 = {
      fontSize: 15,
      padding: '16px 10px 19px',
      verticalAlign: 'middle',
      fontWeight: 200,
      whiteSpace: 'nowrap',
      flexShrink: '0',
      color: reverseOut ? theme.color.primitive.white : theme.color.foreground.primary,
      display: showBackButtonOn.some(function (size) {
        return size === 's';
      }) ? 'inline' : 'none',
      '> svg': {
        marginRight: 8
      },
      ':hover > svg': {
        transform: 'translateX(-5px)'
      }
    }, _defineProperty(_ref5, theme.breakpoints.onlyM, {
      display: showBackButtonOn.some(function (size) {
        return size === 'm';
      }) ? 'inline' : 'none'
    }), _defineProperty(_ref5, theme.breakpoints.fromL, {
      display: showBackButtonOn.some(function (size) {
        return size === 'l';
      }) ? 'inline' : 'none'
    }), _ref5;
  },
  backButtonText: function backButtonText(_ref6) {
    var theme = _ref6.theme;
    return _defineProperty({}, theme.breakpoints.onlyS, {
      display: 'none'
    });
  }
};

function BackButton(_ref8) {
  var _ref8$backButtonConfi = _ref8.backButtonConfig,
      backButtonConfig = _ref8$backButtonConfi === void 0 ? {} : _ref8$backButtonConfi,
      showBackButtonOn = _ref8.showBackButtonOn,
      reverseOut = _ref8.reverseOut;

  var _useFela = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  var href = backButtonConfig.href,
      _backButtonConfig$cli = backButtonConfig.clickHandler,
      clickHandler = _backButtonConfig$cli === void 0 ? function () {} : _backButtonConfig$cli,
      text = backButtonConfig.text;
  var styleProps = {
    theme: theme,
    reverseOut: reverseOut,
    showBackButtonOn: showBackButtonOn
  };
  return _react.default.createElement(_click.Click, {
    onClick: clickHandler,
    href: href,
    extend: [styles.backButton(styleProps), (0, _getThemeStyle.getThemeStyle)('tabNavBackButton', theme, styleProps)]
  }, _react.default.createElement(_arrow.Arrow, {
    direction: "left",
    size: 10,
    color: reverseOut ? theme.color.primitive.white : theme.color.ornament.highlight
  }), _react.default.createElement(_inline.Inline, {
    extend: styles.backButtonText
  }, text || ''));
}

function TabNavBorder() {
  var _React$useContext = _react.default.useContext(TabNavContext),
      borderRef = _React$useContext.borderRef,
      reverseOut = _React$useContext.reverseOut,
      duration = _React$useContext.duration;

  var _useFela2 = (0, _reactFela.useFela)(),
      theme = _useFela2.theme;

  var animatedMargin = theme.direction === 'rtl' ? 'right' : 'left';
  return _react.default.createElement(_block.Block, {
    ref: borderRef,
    extend: styles.border({
      animatedMargin: animatedMargin,
      duration: duration,
      reverseOut: reverseOut,
      theme: theme
    })
  });
}

var TabNav = _react.default.forwardRef(function (_ref9, ref) {
  var children = _ref9.children,
      _ref9$duration = _ref9.duration,
      duration = _ref9$duration === void 0 ? 160 : _ref9$duration,
      _ref9$enableLineTrans = _ref9.enableLineTransition,
      enableLineTransition = _ref9$enableLineTrans === void 0 ? false : _ref9$enableLineTrans,
      _ref9$textAlign = _ref9.textAlign,
      textAlign = _ref9$textAlign === void 0 ? 'center' : _ref9$textAlign,
      variant = _ref9.variant,
      _ref9$stickyChildrenL = _ref9.stickyChildrenLeft,
      stickyChildrenLeft = _ref9$stickyChildrenL === void 0 ? null : _ref9$stickyChildrenL,
      _ref9$stickyChildrenR = _ref9.stickyChildrenRight,
      stickyChildrenRight = _ref9$stickyChildrenR === void 0 ? null : _ref9$stickyChildrenR,
      _ref9$showBackButtonO = _ref9.showBackButtonOn,
      showBackButtonOn = _ref9$showBackButtonO === void 0 ? ['s', 'm', 'l'] : _ref9$showBackButtonO,
      _ref9$backButton = _ref9.backButton,
      backButtonConfig = _ref9$backButton === void 0 ? {} : _ref9$backButton;

  var _useState = (0, _react.useState)(null),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var scrollRef = (0, _react.useRef)();
  var borderRef = (0, _react.useRef)();

  var _useFela3 = (0, _reactFela.useFela)(),
      theme = _useFela3.theme; // TODO: remove in 2.x


  (0, _deprecate.deprecate)('Variant for TabNav is deprecated, please use the volvo dark theme instead', variant);
  var reverseOut = variant === 'dark';
  var isCentered = textAlign === 'center';
  var backButtonVisible = !!(backButtonConfig.clickHandler || backButtonConfig.href);
  var styleProps = {
    theme: theme,
    reverseOut: reverseOut,
    isCentered: isCentered
  };
  var context = {
    active: active,
    setActive: setActive,
    scrollRef: scrollRef,
    borderRef: borderRef,
    reverseOut: reverseOut,
    duration: enableLineTransition ? duration : 0
  };
  return _react.default.createElement(_flex.Flex, {
    as: "nav",
    ref: ref,
    extend: [styles.nav(styleProps), (0, _getThemeStyle.getThemeStyle)('tabNav', theme, styleProps)]
  }, _react.default.createElement(_flex.Flex, {
    extend: styles.stickyLeft(styleProps)
  }, backButtonVisible ? _react.default.createElement(BackButton, {
    backButtonConfig: backButtonConfig,
    showBackButtonOn: showBackButtonOn,
    reverseOut: reverseOut
  }) : null, _react.default.createElement(TabNavContext.Provider, {
    value: {
      reverseOut: reverseOut
    }
  }, stickyChildrenLeft)), _react.default.createElement(TabNavContext.Provider, {
    value: context
  }, _react.default.createElement(_flex.Flex, {
    ref: scrollRef,
    extend: styles.scrollContainer
  }, _react.default.createElement(_flex.Flex, {
    extend: styles.itemContainer
  }, _react.default.createElement(_flex.Flex, {
    extend: {
      paddingRight: 1
    }
  }), children, _react.default.createElement(_flex.Flex, {
    extend: {
      paddingRight: 1
    }
  })), _react.default.createElement(TabNavBorder, null))), _react.default.createElement(_flex.Flex, {
    extend: styles.stickyRight
  }, _react.default.createElement(TabNavContext.Provider, {
    value: {
      reverseOut: reverseOut
    }
  }, stickyChildrenRight)));
});

exports.TabNav = TabNav;
TabNav.displayName = 'TabNav';
TabNav.propTypes = {
  /** Text-align: left or center */
  textAlign: _propTypes.default.oneOf(['center', 'left']),

  /** Back button text, href, click handler */
  backButton: _propTypes.default.shape({
    text: _propTypes.default.string,
    href: _propTypes.default.string,
    clickHandler: _propTypes.default.func
  }),

  /** A JSX node */
  children: _propTypes.default.node,

  /** A JSX node sticky to the left */
  stickyChildrenLeft: _propTypes.default.node,

  /** A JSX node sticky to the right */
  stickyChildrenRight: _propTypes.default.node,

  /** Which viewports to show the back button on */
  showBackButtonOn: _propTypes.default.arrayOf(_propTypes.default.oneOf(['s', 'm', 'l'])),

  /** Enable fancy transition when changing active tabs */
  enableLineTransition: _propTypes.default.bool,

  /** Set duration of lineTransition animation */
  duration: _propTypes.default.number
};