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.
343 lines (300 loc) • 13.3 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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
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 _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, { Children, cloneElement, createContext } from "react";
import PropTypes from "prop-types";
import { withTheme } from "react-fela";
import { Block } from "../block";
import { Inline } from "../inline";
import { Click } from "../click";
import { Arrow } from "../arrow";
import { TabNavItem } from "../tab-nav-item";
import styles from "./styles";
import ActiveLineWithTransition from "./active-line-with-transition";
import { getThemeStyle } from "../../get-theme-style";
export var LineTransitionContext = createContext({});
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(_this), "state", {});
_defineProperty(_assertThisInitialized(_this), "getActiveIndex", function () {
var children = _this.props.children;
return children.length ? children.filter(Boolean).findIndex(function (child) {
var props = child.props;
var nestLimit = 5;
while (!("isActive" in props) && nestLimit > 0 && props.children && props.children.props) {
props = props.children.props;
nestLimit -= 1;
}
return props.isActive;
}) : 0;
});
_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() {
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({
showBackButton: true
}),
innerRef: this.navItemGroup
}, this.renderChildren()))), 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,
theme = _this$props.theme,
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";
var styleProps = {
theme: theme,
reverseOut: reverseOut,
showBackButtonOn: showBackButtonOn
};
return React.createElement(Click, {
extend: [styles.backButton(styleProps), getThemeStyle("tabNavBackButton", theme, styleProps)],
innerRef: this.backButton,
href: href,
onClick: clickHandler
}, React.createElement(Arrow, {
direction: "left",
size: 10,
color: reverseOut ? theme.colors.white : theme.colors.primary
}), React.createElement(Inline, {
extend: styles.backButtonText({
theme: theme
})
}, text || ""));
}
}, {
key: "renderSimpleLayout",
value: function renderSimpleLayout() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
textAlign = _ref3.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: textAlign,
isScrolling: isScrolling
})
}, React.createElement(Inline, {
extend: styles.navItemGroupInner({
showBackButton: showBackButton
}),
innerRef: this.navItemGroup
}, this.renderChildren())));
}
}, {
key: "renderChildren",
value: function renderChildren() {
var _this3 = this;
var _this$props2 = this.props,
children = _this$props2.children,
enableLineTransition = _this$props2.enableLineTransition;
if (enableLineTransition) {
var itemsDimensions = this.state.itemsDimensions;
var updateDimensions = function updateDimensions(index, newDimensions) {
if (!itemsDimensions) {
itemsDimensions = children.map(function () {
return {
x: 0,
width: 0
};
});
}
if (itemsDimensions[index] === newDimensions) {
return;
}
var newItemsDimensions = itemsDimensions;
newItemsDimensions[index] = newDimensions;
_this3.setState({
itemsDimensions: newItemsDimensions
});
};
var activeIndex = this.getActiveIndex();
return React.createElement(LineTransitionContext.Provider, {
value: {
activeIndex: activeIndex,
itemsDimensions: itemsDimensions,
updateDimensions: updateDimensions
}
}, Children.map(children, function (child, index) {
return child.type === TabNavItem ? cloneElement(child, {
index: index
}) : cloneElement(child);
}), React.createElement(ActiveLineWithTransition, null));
}
return children;
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
theme = _this$props3.theme,
textAlign = _this$props3.textAlign,
variant = _this$props3.variant;
var useSimpleLayout = this.state.useSimpleLayout;
var reverseOut = variant === "dark";
var showBackButton = this.shouldShowBackButton();
var styleProps = {
showBackButton: showBackButton,
textAlign: textAlign,
reverseOut: reverseOut,
theme: theme
};
return React.createElement(Block, {
as: "nav",
extend: [styles.nav(styleProps), getThemeStyle("tabNav", theme, styleProps)],
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"])),
/** Enable fancy transition when changing active tabs */
enableLineTransition: PropTypes.bool
};
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 };