vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
255 lines (222 loc) • 10.6 kB
JavaScript
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
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; }
import React from "react";
import PropTypes from "prop-types";
import { Block, withTheme } from "../block";
import { Inline } from "../inline";
import { Click } from "../click";
import { Arrow } from "../arrow";
import { COLORS } from "../../";
import styles from "./styles";
var TabNavComponent =
/*#__PURE__*/
function (_React$Component) {
_inherits(TabNavComponent, _React$Component);
function TabNavComponent(props) {
var _this;
_classCallCheck(this, TabNavComponent);
_this = _possibleConstructorReturn(this, _getPrototypeOf(TabNavComponent).call(this, props));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
_this.root = React.createRef();
_this.navItemGroup = React.createRef();
_this.backButton = React.createRef();
return _this;
}
_createClass(TabNavComponent, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var resizeTimer;
this.resizeEventHandler = function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
_this2.forceUpdate();
}, 1);
};
this.forceUpdate();
window.addEventListener("resize", this.resizeEventHandler);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener("resize", this.resizeEventHandler);
}
}, {
key: "getElementProperty",
value: function getElementProperty(element, property) {
return element && element.getBoundingClientRect ? element.getBoundingClientRect()[property] : 0;
}
}, {
key: "getElementWidth",
value: function getElementWidth(element) {
return this.getElementProperty(element, "width");
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_, prevState) {
var textAlign = this.props.textAlign;
var navItemsWidth = this.getElementWidth(this.navItemGroup.current);
var width = this.getElementWidth(this.root.current);
var overflow = prevState.overflow,
useSimpleLayout = prevState.useSimpleLayout;
if (this.isCenterAlignedWithBackButton()) {
var backButtonWidth = this.getElementWidth(this.backButton.current);
if (width < backButtonWidth + navItemsWidth && !useSimpleLayout) {
this.setState(function () {
return {
useSimpleLayout: true,
overflow: "scroll"
};
});
} else if (width >= backButtonWidth + navItemsWidth && useSimpleLayout) {
this.setState(function () {
return {
useSimpleLayout: false,
overflow: null
};
});
}
}
if (navItemsWidth >= width && !this.shouldShowBackButton() && textAlign === "center" && overflow !== "scroll") {
this.setState(function () {
return {
overflow: "scroll"
};
});
} else if (navItemsWidth < width && overflow === "scroll" && !useSimpleLayout) {
this.setState(function () {
return {
overflow: null
};
});
}
}
}, {
key: "shouldShowBackButton",
value: function shouldShowBackButton() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
_ref$backButton = _ref.backButton,
backButton = _ref$backButton === void 0 ? {} : _ref$backButton;
return !!(backButton.clickHandler || backButton.href);
}
}, {
key: "isCenterAlignedWithBackButton",
value: function isCenterAlignedWithBackButton() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
textAlign = _ref2.textAlign;
return textAlign === "center" && this.shouldShowBackButton();
}
}, {
key: "renderCenteredLayoutWithBackButton",
value: function renderCenteredLayoutWithBackButton() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
children = _ref3.children;
return React.createElement(React.Fragment, null, React.createElement(Block, {
extend: styles.centeredLayoutLeft
}, React.createElement(Inline, {
extend: styles.centeredLayoutLeftInner
}, this.renderBackButton())), React.createElement(Block, {
extend: styles.centeredLayoutCenter
}, React.createElement(Block, {
extend: styles.centeredLayoutCenterInner
}, React.createElement(Inline, {
extend: styles.navItemGroupInner(true),
innerRef: this.navItemGroup
}, children))), React.createElement(Block, {
extend: styles.centeredLayoutRight
}, React.createElement(Inline, {
extend: styles.centeredLayoutRightInner
})));
}
}, {
key: "renderBackButton",
value: function renderBackButton() {
var _this$props = this.props,
_this$props$backButto = _this$props.backButton,
backButton = _this$props$backButto === void 0 ? {} : _this$props$backButto,
showBackButtonOn = _this$props.showBackButtonOn,
variant = _this$props.variant;
var href = backButton.href,
_backButton$clickHand = backButton.clickHandler,
clickHandler = _backButton$clickHand === void 0 ? function () {} : _backButton$clickHand,
text = backButton.text;
var reverseOut = variant === "dark";
return React.createElement(Click, {
extend: styles.backButton(reverseOut, showBackButtonOn),
innerRef: this.backButton,
href: href,
onClick: clickHandler
}, React.createElement(Arrow, {
direction: "left",
size: "10px",
color: reverseOut ? COLORS.white : COLORS.blue
}), React.createElement(Inline, {
extend: styles.backButtonText
}, text || ""));
}
}, {
key: "renderSimpleLayout",
value: function renderSimpleLayout() {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
children = _ref4.children,
textAlign = _ref4.textAlign;
var isScrolling = this.state.overflow === "scroll";
var showBackButton = this.shouldShowBackButton();
return React.createElement(React.Fragment, null, showBackButton && this.renderBackButton(), React.createElement(Block, {
extend: styles.navItemGroup(textAlign, isScrolling)
}, React.createElement(Inline, {
extend: styles.navItemGroupInner(showBackButton),
innerRef: this.navItemGroup
}, children)));
}
}, {
key: "render",
value: function render() {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
theme = _ref5.theme,
textAlign = _ref5.textAlign,
variant = _ref5.variant;
var useSimpleLayout = this.state.useSimpleLayout;
var reverseOut = variant === "dark";
var showBackButton = this.shouldShowBackButton();
return React.createElement(Block, {
as: "nav",
extend: styles.nav(theme, reverseOut, textAlign, showBackButton),
innerRef: this.root
}, !this.isCenterAlignedWithBackButton() || useSimpleLayout ? this.renderSimpleLayout() : this.renderCenteredLayoutWithBackButton());
}
}]);
return TabNavComponent;
}(React.Component);
var propTypes = {
/** Dark text on light background, or vice versa */
variant: PropTypes.oneOf(["light", "dark"]),
/** Text-align: left or center */
textAlign: PropTypes.oneOf(["center", "left"]),
/** Back button text, href, click handler */
backButton: PropTypes.shape({
text: PropTypes.string,
href: PropTypes.string,
clickHandler: PropTypes.func
}),
/** Which viewports to show the back button on */
showBackButtonOn: PropTypes.arrayOf(PropTypes.oneOf(["s", "m", "l"]))
};
var defaultProps = {
variant: "light",
textAlign: "center",
showBackButtonOn: ["s", "m", "l"]
};
TabNavComponent.propTypes = propTypes;
TabNavComponent.defaultProps = defaultProps;
TabNavComponent.displayName = "TabNav";
var TabNav = withTheme(TabNavComponent);
export { TabNav };