ac-patterns/dist/crate.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessagePageCrate = exports.PageCrate = exports.PageCrateHeading = exports.Page = exports.LogoCrate = void 0;

var _preact = require("preact");

var _classnames = _interopRequireDefault(require("classnames"));

var _logo = require("./logo");

var _getStyledComponent = _interopRequireDefault(require("./utils/get-styled-component"));

var _transitionIn = require("./transition-in");

var _omit = _interopRequireDefault(require("./utils/omit"));

var _icon = require("./icon");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const LogoCrate = () => (0, _preact.h)("div", {
  className: "mw6 mv3 ph3 pt2 pb3 center br2"
}, (0, _preact.h)("div", {
  className: "w-60"
}, (0, _preact.h)("a", {
  href: "/"
}, (0, _preact.h)(_logo.LogoLight, null))));

exports.LogoCrate = LogoCrate;
const Page = (0, _transitionIn.transitionIn)((0, _getStyledComponent.default)({
  baseClasses: 'transition',
  options: {
    transitions: ['firstRender']
  },
  fn: ({
    firstRender
  }) => firstRender ? 'o-0 translate-y' : 'o-100'
}));
exports.Page = Page;
const PageCrateHeading = (0, _getStyledComponent.default)({
  baseClasses: 'mt1 mb3',
  tagName: 'h3'
});
exports.PageCrateHeading = PageCrateHeading;
const PageCrate = (0, _getStyledComponent.default)({
  baseClasses: 'no-print-padding mv3 pa3 center br2',
  options: {
    title: '',
    backgroundColor: 'white',
    width: ['wide'],
    shadowExists: ['noShadow']
  },
  fn: ({
    wide,
    backgroundColor,
    noShadow
  }) => (0, _classnames.default)(wide ? 'mw7' : 'mw6', "bg-".concat(backgroundColor), {
    'shadow-1': !noShadow
  }),
  renderChildren: ({
    title,
    children
  }) => {
    const res = [children];

    if (title) {
      res.unshift((0, _preact.h)(PageCrateHeading, null, title));
    }

    return res;
  }
});
exports.PageCrate = PageCrate;

const MessagePageCrate = props => {
  const {
    loading,
    error,
    warning,
    success,
    children
  } = props;
  const rest = (0, _omit.default)(props, ['loading', 'error', 'warning', 'success', 'children']);
  let icon = null;
  let iconClasses = null;
  let backgroundColor = 'white';
  let colorClasses = null;

  if (loading) {
    icon = 'autorenew';
    iconClasses = 'spin-animation';
  }

  if (error) {
    icon = 'error';
    backgroundColor = 'red';
    colorClasses = 'black';
  }

  if (warning) {
    icon = 'warning';
    backgroundColor = 'orange';
    colorClasses = 'black';
  }

  if (success) {
    icon = 'check';
    backgroundColor = 'light-blue';
    colorClasses = 'black';
  }

  const iconComp = (loading || error || warning || success) && (0, _preact.h)(_icon.Icon, {
    className: (0, _classnames.default)('f3 mr3', iconClasses),
    size: "40",
    icon: icon
  });
  return (0, _preact.h)(PageCrate, _extends({
    backgroundColor: backgroundColor
  }, rest), (0, _preact.h)("div", {
    className: (0, _classnames.default)('flex items-center min-h3 f4', colorClasses)
  }, iconComp, children));
};

exports.MessagePageCrate = MessagePageCrate;