@confi/conflux-react-ui-test-package/esm/loading/loading.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
var defaultProps = {
  size: 'medium',
  type: 'default'
};

var getIconSize = function getIconSize(size) {
  var sizes = {
    mini: '2px',
    small: '3px',
    medium: '4px',
    large: '5px'
  };
  return sizes[size];
};

var getIconBgColor = function getIconBgColor(type, palette, color) {
  var colors = {
    "default": palette.accents_6,
    secondary: palette.secondary,
    success: palette.success,
    warning: palette.warning,
    error: palette.error
  };
  return color ? color : colors[type];
};

var Loading = function Loading(_ref) {
  var children = _ref.children,
      size = _ref.size,
      type = _ref.type,
      color = _ref.color;
  var theme = useTheme();
  var width = useMemo(function () {
    return getIconSize(size);
  }, [size]);
  var bgColor = useMemo(function () {
    return getIconBgColor(type, theme.palette, color);
  }, [type, theme.palette, color]);
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2921856664", [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]]]) + " " + "loading-container"
  }, /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["2921856664", [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]]]) + " " + "loading"
  }, children && /*#__PURE__*/React.createElement("label", {
    className: _JSXStyle.dynamic([["2921856664", [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]]])
  }, children), /*#__PURE__*/React.createElement("i", {
    className: _JSXStyle.dynamic([["2921856664", [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]]])
  }), /*#__PURE__*/React.createElement("i", {
    className: _JSXStyle.dynamic([["2921856664", [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]]])
  }), /*#__PURE__*/React.createElement("i", {
    className: _JSXStyle.dynamic([["2921856664", [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]]])
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2921856664",
    dynamic: [theme.layout.gapHalf, theme.palette.accents_5, width, width, bgColor]
  }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;height:100%;}label.__jsx-style-dynamic-selector{margin-right:".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_5, ";}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:").concat(width, ";height:").concat(width, ";border-radius:50%;background-color:").concat(bgColor, ";margin:0 1px;display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
};

var MemoLoading = React.memo(Loading);
export default withDefaults(MemoLoading, defaultProps);