ac-patterns/dist/button.js

"use strict";

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

var _preact = require("preact");

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

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

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

/** @jsx h */
const preventDefault = e => {
  e.preventDefault();
};

const Button = (0, _getStyledComponent.default)({
  tagName: 'button',
  baseClasses: 'br2 ba',
  options: {
    size: ['tiny', 'large'],
    pressed: ['pressed'],
    variant: ['primary', 'stop', 'disabled']
  },
  defaultProps: {
    onContextMenu: preventDefault
  },
  fn: ({
    tiny,
    large,
    disabled,
    pressed,
    primary,
    stop
  }) => {
    let classes = ['bn']; // handle sizes

    if (tiny) {
      classes.push('pa1');
    } else if (large) {
      classes.push('pa3 fw6');
    } else {
      classes.push('pa2');
    } // if disabled stop here


    if (disabled) {
      classes.push('mid-gray bg-light-gray not-allowed');
      return classes.join(' ');
    } // pointer class


    classes.push('pointer');

    if (pressed) {
      classes.push('shadow-3');
    } else {
      classes.push('shadow-2');
    }

    if (stop) {
      classes.push('white bg-red');
    }

    if (primary) {
      classes.push('dark-blue bg-light-blue');
    }

    if (!stop && !primary) {
      classes.push('dark-blue');

      if (pressed) {
        classes.push('bg-lightest-blue');
      } else {
        classes.push('bg-white');
      }
    }

    return classes.join(' ');
  }
});
exports.Button = Button;
const TapIconButton = (0, _getStyledComponent.default)({
  baseClasses: 'button-reset pointer pa0 ma0 bn bg-transparent flex items-center justify-center',
  style: {
    width: '40px',
    height: '40px'
  },
  options: {
    icon: ['icon'],
    color: ['color']
  },
  renderChildren: ({
    icon,
    color
  }) => [(0, _preact.h)(_icon.Icon, {
    key: icon,
    icon: icon,
    color: color,
    size: "28"
  })]
});
exports.TapIconButton = TapIconButton;