ac-patterns/dist/drawer.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Drawer = exports.DrawerLinkContainer = exports.DrawerLink = exports.FlipIcon = exports.FlipContainer = void 0;

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

var _preact = require("preact");

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

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

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); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

const cardStyles = {
  backfaceVisibility: 'hidden',
  webkitBackfaceVisibility: 'hidden',
  top: '0',
  left: '0'
};

const FlipContainer = (_ref) => {
  let {
    front,
    back,
    flipped,
    height,
    width,
    className,
    style,
    direction = 'vertical',
    perspective = '100px'
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["front", "back", "flipped", "height", "width", "className", "style", "direction", "perspective"]);

  const axis = direction === 'vertical' ? 'X' : 'Y';
  const rotateZero = "rotate".concat(axis, "(0deg)");
  const rotateFlipped = "rotate".concat(axis, "(180deg)");
  return (0, _preact.h)("div", _extends({}, rest, {
    className: className,
    style: Object.assign({
      position: 'relative',
      perspective,
      width,
      height
    }, style)
  }), (0, _preact.h)("div", {
    style: {
      transition: '0.6s',
      transformStyle: 'preserve-3d',
      webkitTransformStyle: 'preserve-3d',
      position: 'relative',
      transformOrigin: 'center',
      webkitTransformOrigin: 'center',
      width: '100%',
      height: '100%',
      transform: !flipped ? rotateFlipped : '',
      webkitTransform: !flipped ? rotateFlipped : ''
    }
  }, (0, _preact.h)("div", {
    style: Object.assign({}, cardStyles, {
      transform: rotateFlipped,
      webkitTransform: rotateFlipped,
      width: '100%',
      height: '100%',
      position: 'relative'
    })
  }, front), (0, _preact.h)("div", {
    style: Object.assign({}, cardStyles, {
      zIndex: 2,
      transform: rotateZero,
      webkitTransform: rotateZero,
      width: '100%',
      height: '100%',
      position: 'absolute'
    })
  }, back)));
};

exports.FlipContainer = FlipContainer;
const FlipIcon = (0, _getStyledComponent.default)({
  options: {
    complete: ['complete'],
    icon: ['icon']
  },
  renderChildren: ({
    icon,
    complete
  }) => {
    return [(0, _preact.h)(FlipContainer, {
      key: "flipContainer",
      width: "20px",
      height: "20px",
      flipped: complete,
      front: (0, _preact.h)(_icon.Icon, {
        size: "20",
        icon: icon
      }),
      back: (0, _preact.h)(_icon.Icon, {
        className: "light-blue",
        size: "20",
        icon: "check_circle"
      })
    })];
  }
});
exports.FlipIcon = FlipIcon;
const DrawerLink = (0, _getStyledComponent.default)({
  tagName: 'a',
  baseClasses: 'link pv1 mt1 f5 fw3 flex items-center',
  options: {
    active: ['active'],
    disabled: ['disabled'],
    completeness: ['complete']
  },
  fn: ({
    active,
    disabled
  }) => (0, _classnames.default)({
    'light-blue': active,
    'mid-gray not-allowed': disabled,
    'white hover-moon-gray': !active && !disabled
  }),
  renderChildren: ({
    icon,
    title,
    complete
  }) => [(0, _preact.h)(FlipIcon, {
    key: "flipIcon",
    icon: icon,
    complete: complete
  }), (0, _preact.h)("span", {
    key: "span",
    "data-e2e": "".concat(title, "Nav"),
    className: icon ? 'pl2' : null
  }, title)]
});
exports.DrawerLink = DrawerLink;
const DrawerLinkContainer = (0, _getStyledComponent.default)({
  baseClasses: 'link db pt2 pl3 f4',
  options: {
    completeness: ['complete'],
    title: ['title']
  },
  renderChildren: ({
    complete,
    title,
    children
  }) => [(0, _preact.h)("div", {
    key: title,
    className: "flex items-center"
  }, (0, _preact.h)(_icon.Icon, {
    className: (0, _classnames.default)('light-blue pr2', {
      hidden: !complete
    }),
    size: "20",
    icon: "check_circle"
  }), (0, _preact.h)("h3", {
    className: "fw3 f6 ma0 ttu mid-gray bb b--mid-gray pb2 pt1 relative flex-grow-1"
  }, title)), (0, _preact.h)("div", {
    key: title + 'children'
  }, children)]
});
exports.DrawerLinkContainer = DrawerLinkContainer;
const Drawer = (0, _getStyledComponent.default)({
  baseClasses: 'bg-dark-blue white fixed top-0 vh-100 overflow-x-hidden'
});
exports.Drawer = Drawer;