@patternplate/client/lib/app/components/indicator.js

Universal javascript client application for patternplate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _components = require("@patternplate/components");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _default = Indicator;
exports.default = _default;

function Indicator(props) {
  return _react.default.createElement(StyledIndicator, {
    onClick: props.onClick,
    title: isValid(props.status) ? `Force sync ${props.shortcut.toString()}` : ""
  }, _react.default.createElement(StyledLabel, {
    size: "s",
    status: props.status
  }, getLabel(props)), _react.default.createElement(StyledDot, {
    status: props.status
  }));
}

const StyledDot = _components.styled.div.withConfig({
  displayName: "indicator__StyledDot"
})(["position:relative;flex-grow:0;flex-shrink:0;height:7.5px;width:7.5px;margin-right:5px;border-radius:50%;background:", ";transition:background 0.4s ease-in-out,opacity 0.5s ease-in;opacity:", ";cursor:", ";", ";"], props => props.status === "error" || props.status === "offline" ? "rgb(205, 63, 69)" : props.theme.colors.active, props => props.status ? 1 : 0, props => props.status ? "pointer" : "", props => getGlow(props));

const StyledIndicator = _components.styled.div.withConfig({
  displayName: "indicator__StyledIndicator"
})(["display:flex;align-items:center;cursor:pointer;position:relative;"]);

const StyledLabel = (0, _components.styled)(_components.Text).withConfig({
  displayName: "indicator__StyledLabel"
})(["position:absolute;right:20px;color:", ";", ";"], props => props.theme.colors.color, props => getOut(props));

function getGlow(props) {
  return (0, _components.css)(["&::before{content:'';position:absolute;top:50%;left:50%;height:12px;width:12px;filter:blur(3px);background:inherit;transform:translate(-50%,-50%);opacity:.6;", ";}"], getPulse(props));
}

const out = (0, _components.keyframes)(["to{opacity:0;}"]);

function getOut(props) {
  if (props.status !== "loaded") {
    return;
  }

  return (0, _components.css)(["animation:", " 1s 0.15s;animation-fill-mode:forwards;"], out);
}

function getLabel(props) {
  switch (props.status) {
    case "error":
      return "error";

    case "offline":
      return "offline";

    case "loaded":
      return "synced";

    case "loading":
      return "syncing";

    default:
      return "";
  }
}

const pulse = (0, _components.keyframes)(["from{opacity:.6;transform:translate(-50%,-50%) scale(1);}50%{opacity:0;transform:translate(-50%,-50%) scale(.75);}to{opacity:.6;transform:translate(-50%,-50%) scale(1);}"]);

function getPulse(props) {
  if (props.status !== "loading") {
    return;
  }

  return (0, _components.css)(["animation:", " 1s infinite;"], pulse);
}

function isValid(status) {
  return ["loading", "loaded"].includes(status);
}
//# sourceMappingURL=indicator.js.map