@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
238 lines (199 loc) • 8.9 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StyledSlide = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _transition = _interopRequireDefault(require("../transition"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var getMaxHeight = function getMaxHeight(_ref) {
var maxHeight = _ref.maxHeight;
if (maxHeight === 0) return "0px";
if (!maxHeight) return undefined;
return "".concat(maxHeight, "px");
};
var StyledSlide = _styledComponents.default.div.withConfig({
displayName: "Slide__StyledSlide",
componentId: "sc-1xbmdp2-0"
})(["position:relative;width:100%;transition:", ";max-height:", ";overflow:", ";visibility:", ";"], function (_ref2) {
var transitionDuration = _ref2.transitionDuration;
return (0, _transition.default)(["max-height"], transitionDuration, "linear");
}, getMaxHeight, function (_ref3) {
var transitionFinished = _ref3.transitionFinished;
return !transitionFinished && "hidden";
}, function (_ref4) {
var visible = _ref4.visible;
return !visible && "hidden";
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
exports.StyledSlide = StyledSlide;
StyledSlide.defaultProps = {
theme: _defaultTheme.default
};
var Slide = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(Slide, _React$Component);
var _super = _createSuper(Slide);
function Slide() {
var _this;
(0, _classCallCheck2.default)(this, Slide);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
maxHeight: typeof _this.props.maxHeight !== "undefined" ? _this.props.maxHeight : 0,
transitionFinished: false,
visible: false
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "expandTimeout", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "collapseTimeout", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "transitionFinishedTimeout", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "visibleTimeout", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setVisible", function (visible) {
return function () {
_this.setState({
visible: visible
});
};
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setMaxHeight", function () {
var maxHeight = _this.props.maxHeight;
_this.setState({
maxHeight: maxHeight
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "expandCallback", function () {
_this.setState({
maxHeight: null
});
_this.transitionFinishedTimeout = setTimeout(_this.transitionFinishedCallback(true), 100);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "collapseCallback", function () {
_this.setState({
maxHeight: 0,
transitionFinished: false
});
_this.visibleTimeout = setTimeout(_this.setVisible(false), 150);
if (_this.transitionFinishedTimeout && typeof clearTimeout === "function") {
clearTimeout(_this.transitionFinishedTimeout);
_this.transitionFinishedTimeout = null;
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "transitionFinishedCallback", function (transitionFinished) {
return function () {
_this.setState({
transitionFinished: transitionFinished
});
};
});
return _this;
}
(0, _createClass2.default)(Slide, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.expanded) {
this.setState({
transitionFinished: true,
visible: true
});
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
if (this.props.expanded) {
this.setMaxHeight();
if (typeof setTimeout === "function") {
if (this.visibleTimeout && typeof clearTimeout === "function") {
clearTimeout(this.visibleTimeout);
this.visibleTimeout = null;
}
this.setVisible(true)();
this.expandTimeout = setTimeout(this.expandCallback, 150);
}
} else {
if (this.state.maxHeight !== this.props.maxHeight) {
this.setMaxHeight();
}
if (typeof setTimeout === "function") {
if (this.expandTimeout && typeof clearTimeout === "function") {
clearTimeout(this.expandTimeout);
this.expandTimeout = null;
}
this.collapseTimeout = setTimeout(this.collapseCallback, 1);
}
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (typeof clearTimeout === "function") {
if (this.expandTimeout) {
clearTimeout(this.expandTimeout);
}
if (this.collapseTimeout) {
clearTimeout(this.collapseTimeout);
}
if (this.transitionFinishedTimeout) {
clearTimeout(this.transitionFinishedTimeout);
}
if (this.visibleTimeout) {
clearTimeout(this.visibleTimeout);
}
}
}
}, {
key: "getSnapshotBeforeUpdate",
value: function getSnapshotBeforeUpdate(prevProps) {
if (this.props.expanded === prevProps.expanded) return null;
return true;
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
children = _this$props.children,
_this$props$expanded = _this$props.expanded,
expanded = _this$props$expanded === void 0 ? false : _this$props$expanded,
id = _this$props.id,
ariaLabelledBy = _this$props.ariaLabelledBy,
transitionDuration = _this$props.transitionDuration;
var _this$state = this.state,
transitionFinished = _this$state.transitionFinished,
maxHeight = _this$state.maxHeight,
visible = _this$state.visible;
return /*#__PURE__*/React.createElement(StyledSlide, {
maxHeight: maxHeight,
expanded: expanded,
transitionFinished: transitionFinished,
transitionDuration: transitionDuration,
"aria-hidden": !expanded,
id: id,
"aria-labelledby": ariaLabelledBy,
visible: visible,
onClick: function onClick(ev) {
ev.stopPropagation();
}
}, children);
}
}]);
return Slide;
}(React.Component);
(0, _defineProperty2.default)(Slide, "defaultProps", {
transitionDuration: "fast"
});
var _default = Slide;
exports.default = _default;