@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.
160 lines (137 loc) • 7.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StyledSpinner = exports.StyledLoading = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));
var _consts = require("./consts");
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 _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 getToken = function getToken(name) {
return function (_ref) {
var _TOKENS$ALIGN, _TOKENS$HEIGHT, _tokens;
var type = _ref.type;
var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.TOKENS.ALIGN, (_TOKENS$ALIGN = {}, _defineProperty(_TOKENS$ALIGN, _consts.TYPE_OPTIONS.BUTTON_LOADER, "center"), _defineProperty(_TOKENS$ALIGN, _consts.TYPE_OPTIONS.SEARCH_LOADER, "start"), _defineProperty(_TOKENS$ALIGN, _consts.TYPE_OPTIONS.BOX_LOADER, "center"), _defineProperty(_TOKENS$ALIGN, _consts.TYPE_OPTIONS.PAGE_LOADER, "center"), _TOKENS$ALIGN)), _defineProperty(_tokens, _consts.TOKENS.HEIGHT, (_TOKENS$HEIGHT = {}, _defineProperty(_TOKENS$HEIGHT, _consts.TYPE_OPTIONS.BUTTON_LOADER, "100%"), _defineProperty(_TOKENS$HEIGHT, _consts.TYPE_OPTIONS.SEARCH_LOADER, "40px"), _defineProperty(_TOKENS$HEIGHT, _consts.TYPE_OPTIONS.BOX_LOADER, "80px"), _defineProperty(_TOKENS$HEIGHT, _consts.TYPE_OPTIONS.PAGE_LOADER, "120px"), _TOKENS$HEIGHT)), _tokens);
return tokens[name][type];
};
}; // Animations
var SpinnerAnimation = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg);}"]);
var LoaderAnimation = (0, _styledComponents.keyframes)(["0%{opacity:.3;transform:translateY(0px);}20%{opacity:1;transform:translateY(-3px);}40%{opacity:.3;transform:translateY(0px);}100%{opacity:.3;transform:translateY(0px);}"]);
var StyledLoading = (0, _styledComponents.default)(function (_ref2) {
var children = _ref2.children,
className = _ref2.className,
dataTest = _ref2.dataTest;
return React.createElement("div", {
className: className,
"data-test": dataTest
}, children);
}).withConfig({
displayName: "Loading__StyledLoading",
componentId: "sc-1psg3na-0"
})(["position:", ";left:", ";top:", ";width:", ";height:", ";padding:0 ", ";display:flex;flex-direction:", ";justify-content:", ";align-items:center;overflow:hidden;box-sizing:border-box;"], function (_ref3) {
var type = _ref3.type;
return type === _consts.TYPE_OPTIONS.BUTTON_LOADER && "absolute";
}, function (_ref4) {
var type = _ref4.type;
return type === _consts.TYPE_OPTIONS.BUTTON_LOADER && "0";
}, function (_ref5) {
var type = _ref5.type;
return type === _consts.TYPE_OPTIONS.BUTTON_LOADER && "0";
}, function (_ref6) {
var type = _ref6.type;
return type === _consts.TYPE_OPTIONS.BUTTON_LOADER && "100%";
}, getToken(_consts.TOKENS.HEIGHT), function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.spaceSmall;
}, function (_ref8) {
var type = _ref8.type;
return type === _consts.TYPE_OPTIONS.PAGE_LOADER ? "column" : "row";
}, getToken(_consts.TOKENS.ALIGN));
exports.StyledLoading = StyledLoading;
StyledLoading.defaultProps = {
theme: _defaultTokens.default
};
var StyledLoadingText = _styledComponents.default.div.withConfig({
displayName: "Loading__StyledLoadingText",
componentId: "sc-1psg3na-1"
})(["font-family:", ";font-size:", ";color:", ";line-height:", ";margin-top:", ";margin-left:", ";"], function (_ref9) {
var theme = _ref9.theme;
return theme.orbit.fontFamily;
}, function (_ref10) {
var theme = _ref10.theme;
return theme.orbit.fontSizeTextNormal;
}, function (_ref11) {
var theme = _ref11.theme;
return theme.orbit.paletteInkLighter;
}, function (_ref12) {
var theme = _ref12.theme;
return theme.orbit.lineHeightText;
}, function (_ref13) {
var theme = _ref13.theme,
type = _ref13.type;
return type === _consts.TYPE_OPTIONS.PAGE_LOADER && theme.orbit.spaceMedium;
}, function (_ref14) {
var theme = _ref14.theme,
type = _ref14.type;
return type !== _consts.TYPE_OPTIONS.PAGE_LOADER && theme.orbit.spaceSmall;
});
StyledLoadingText.defaultProps = {
theme: _defaultTokens.default
};
var StyledSpinner = _styledComponents.default.svg.withConfig({
displayName: "Loading__StyledSpinner",
componentId: "sc-1psg3na-2"
})(["width:40px;height:40px;animation:", " 0.75s linear infinite;"], SpinnerAnimation);
exports.StyledSpinner = StyledSpinner;
var StyledSpinnerCircle = _styledComponents.default.circle.withConfig({
displayName: "Loading__StyledSpinnerCircle",
componentId: "sc-1psg3na-3"
})(["fill:transparent;stroke:", ";stroke-width:3px;stroke-linecap:round;stroke-dasharray:128px;stroke-dashoffset:64px;"], function (_ref15) {
var theme = _ref15.theme,
type = _ref15.type;
return type === _consts.TYPE_OPTIONS.BUTTON_LOADER ? "currentColor" : theme.orbit.paletteInkLighter;
});
StyledSpinnerCircle.defaultProps = {
theme: _defaultTokens.default
};
var StyledLoader = _styledComponents.default.div.withConfig({
displayName: "Loading__StyledLoader",
componentId: "sc-1psg3na-4"
})(["display:flex;justify-content:center;align-items:center;"]);
var StyledLoaderCircle = _styledComponents.default.div.withConfig({
displayName: "Loading__StyledLoaderCircle",
componentId: "sc-1psg3na-5"
})(["width:8px;height:8px;border-radius:50%;margin-right:6px;background:", ";animation:", " 1.25s infinite ease-in-out;&:nth-child(2){animation-delay:0.1s;}&:nth-child(3){animation-delay:0.2s;margin:0;}"], function (_ref16) {
var theme = _ref16.theme;
return theme.orbit.paletteInkLighter;
}, LoaderAnimation);
StyledLoaderCircle.defaultProps = {
theme: _defaultTokens.default
};
var Loading = function Loading(props) {
var _props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$type = props.type,
type = _props$type === void 0 ? _consts.TYPE_OPTIONS.PAGE_LOADER : _props$type,
text = props.text,
children = props.children,
dataTest = props.dataTest;
return children && !loading ? children : React.createElement(StyledLoading, {
type: type,
dataTest: dataTest
}, type === _consts.TYPE_OPTIONS.BOX_LOADER || type === _consts.TYPE_OPTIONS.SEARCH_LOADER ? React.createElement(StyledLoader, null, React.createElement(StyledLoaderCircle, null), React.createElement(StyledLoaderCircle, null), React.createElement(StyledLoaderCircle, null)) : React.createElement(StyledSpinner, {
viewBox: "0 0 40 40"
}, React.createElement(StyledSpinnerCircle, {
cx: "50%",
cy: "50%",
r: "18",
type: type
})), type !== _consts.TYPE_OPTIONS.BUTTON_LOADER && React.createElement(StyledLoadingText, {
type: type
}, text));
};
var _default = Loading;
exports.default = _default;