ac-patterns/dist/crate.js

var _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; };

import { h } from 'preact';
import cn from 'classnames';
import { LogoLight } from './logo';
import getComponent from './utils/get-styled-component';
import { transitionIn } from './transition-in';
import omit from './utils/omit';
import { Icon } from './icon';

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

export const Page = transitionIn(getComponent({
  baseClasses: 'transition',
  options: { transitions: ['firstRender'] },
  fn: ({ firstRender }) => firstRender ? 'o-0 translate-y' : 'o-100'
}));

export const PageCrateHeading = getComponent({
  baseClasses: 'mt1 mb3',
  tagName: 'h3'
});

export const PageCrate = getComponent({
  baseClasses: 'no-print-padding mv3 pa3 center br2',
  options: {
    title: '',
    backgroundColor: 'white',
    width: ['wide'],
    shadowExists: ['noShadow']
  },
  fn: ({ wide, backgroundColor, noShadow }) => cn(wide ? 'mw7' : 'mw6', `bg-${backgroundColor}`, {
    'shadow-1': !noShadow
  }),
  renderChildren: ({ title, children }) => {
    const res = [children];
    if (title) {
      res.unshift(h(
        PageCrateHeading,
        null,
        title
      ));
    }
    return res;
  }
});

export const MessagePageCrate = props => {
  const { loading, error, warning, success, children } = props;
  const rest = omit(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) && h(Icon, { className: cn('f3 mr3', iconClasses), size: '40', icon: icon });

  return h(
    PageCrate,
    _extends({ backgroundColor: backgroundColor }, rest),
    h(
      'div',
      { className: cn('flex items-center min-h3 f4', colorClasses) },
      iconComp,
      children
    )
  );
};