@geezee/react-ui/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',
  color: 'default'
};

var getIconSize = function getIconSize(size) {
  var sizes = {
    mini: '10px',
    small: '15px',
    medium: '20px',
    large: '25px'
  };
  return sizes[size] || size;
};

var getIconStrokeColor = function getIconStrokeColor(palette, color) {
  var colors = {
    "default": palette.cNeutral3,
    primary: palette.cTheme5,
    secondary: palette.secondary,
    success: palette.success,
    warning: palette.warning,
    error: palette.error
  };
  return colors[color] || color;
};

var Loading = function Loading(_ref) {
  var children = _ref.children,
      size = _ref.size,
      color = _ref.color;
  var theme = useTheme();
  var width = useMemo(function () {
    return getIconSize(size);
  }, [size]);
  var fill = useMemo(function () {
    return getIconStrokeColor(theme.palette, color);
  }, [theme.palette, color]);
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) + " " + "loading-container"
  }, /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) + " " + "loading"
  }, children && /*#__PURE__*/React.createElement("label", {
    className: _JSXStyle.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]])
  }, children), /*#__PURE__*/React.createElement("svg", {
    width: width,
    height: width,
    viewBox: "0 0 16 16",
    fill: "none",
    className: _JSXStyle.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]]) + " " + "svg"
  }, /*#__PURE__*/React.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14V16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8H14C14 4.68629 11.3137 2 8 2Z",
    fill: fill,
    className: _JSXStyle.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]])
  }), /*#__PURE__*/React.createElement("path", {
    d: "M15 12.5C15 13.3284 14.3284 14 13.5 14C12.6716 14 12 13.3284 12 12.5C12 11.6716 12.6716 11 13.5 11C14.3284 11 15 11.6716 15 12.5Z",
    fill: fill,
    className: _JSXStyle.dynamic([["3670930641", [theme.layout.gapHalf, theme.palette.cNeutral3]]])
  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3670930641",
    dynamic: [theme.layout.gapHalf, theme.palette.cNeutral3]
  }, ".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%;}.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;}label.__jsx-style-dynamic-selector{margin-right:".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.cNeutral3, ";}label.__jsx-style-dynamic-selector *{margin:0;}.svg.__jsx-style-dynamic-selector{-webkit-animation:loading-rotate-__jsx-style-dynamic-selector 1.4s infinite;animation:loading-rotate-__jsx-style-dynamic-selector 1.4s infinite;}@-webkit-keyframes loading-rotate-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes loading-rotate-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}")));
};

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