@patternplate/client/lib/app/components/pattern/index.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 _reactHelmet = _interopRequireDefault(require("react-helmet"));

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

var _tagHoc = _interopRequireDefault(require("tag-hoc"));

var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));

var _patternDemo = _interopRequireDefault(require("./pattern-demo"));

var _patternSheet = _interopRequireDefault(require("./pattern-sheet"));

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

const btoa = global.btoa ? global.btoa : input => Buffer.from(input).toString('base64');

const VISIBILITY = props => props.checkers ? "block" : "none";

const CROSSES = props => btoa(`
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
  <path stroke-width="1" stroke="#f2f2f2" fill="none" d="M10 6v8M6 10h8"/>
</svg>
`);

const PAD = props => props.padded ? 50 : 0;

const OFF = props => props.navigationEnabled ? 300 : 0;

const OFFSET = props => PAD(props) + OFF(props);

const StyledPattern = (0, _components.styled)((0, _tagHoc.default)(["checkers", "navigationEnabled", "padded"])("div")).withConfig({
  displayName: "pattern__StyledPattern"
})(["position:fixed;width:calc(100% - ", "px);top:", "px;left:", "px;right:", "px;bottom:", "px;box-sizing:border-box;height:100%;&::before{content:\"\";display:", ";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-image:url(\"data:image/svg+xml;base64,", "\");background-size:20px 20px;background-repeat:repeat;background-position:50% 50%;}"], props => OFFSET(props) + PAD(props), PAD, props => OFFSET(props), PAD, PAD, VISIBILITY, CROSSES);

const StyledPatternFolder = _components.styled.div.withConfig({
  displayName: "pattern__StyledPatternFolder"
})(["height:100%;width:100%;"]);

const StyledPatternDoc = _components.styled.div.withConfig({
  displayName: "pattern__StyledPatternDoc"
})(["width:100%;max-width:800px;margin:0 auto;padding:30px;box-sizing:border-box;"]);

const StyledPatternDemo = _components.styled.div.withConfig({
  displayName: "pattern__StyledPatternDemo"
})(["position:relative;z-index:2;width:100%;height:100%;max-width:1920px;margin:0 auto;"]);

const StyledPatternLoader = _components.styled.div.withConfig({
  displayName: "pattern__StyledPatternLoader"
})(["position:absolute;z-index:3;top:0;right:0;left:0;height:3px;", " &::after{position:absolute;top:0;z-index:2;content:\"\";display:block;width:100%;height:100%;background:", ";opacity:1;transition:", ";", ";}"], props => props.hidden ? 'display: none;' : '', props => props.error ? props.theme.colors.error : props.theme.colors.active, props => props.error ? "none" : "transform 1s ease-in-out", props => {
  switch (props.status) {
    case "entering":
      return `
            transform: translateX(-100%);
          `;

    case "entered":
      return `${props => props.error ? "" : "transform: translateX(-15%);"}`;

    case "exiting":
      return `
            transition: transform .3s ease-out;
            transform: translateX(0);
          `;

    case "exited":
    default:
      return `
            transform: translateX(-100%);
            transition: opacity .3s .25s ease-out;
          `;
  }
});

const PatternContainer = _components.styled.div.withConfig({
  displayName: "pattern__PatternContainer"
})(["height:100%;padding-left:", "px;"], props => props.navigationEnabled ? 0 : 60);

class Pattern extends _react.default.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      srcdoc: false
    };
  }

  render() {
    const props = this.props;

    if (props.contentType !== "pattern") {
      return null;
    }

    if (props.type === "folder") {
      return _react.default.createElement(StyledPatternFolder, null, _react.default.createElement(StyledPatternDoc, null, _react.default.createElement(_components.Markdown, {
        source: props.docs
      })));
    }

    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledPattern, {
      padded: props.screenshot,
      checkers: props.opacity,
      navigationEnabled: props.navigationEnabled
    }, _react.default.createElement(_reactHelmet.default, {
      title: [getPrefix(props), props.displayName].filter(Boolean).join(": ")
    }), _react.default.createElement(_Transition.default, {
      "in": props.loading || props.error,
      timeout: {
        enter: 1000,
        exit: 850
      }
    }, status => _react.default.createElement(StyledPatternLoader, {
      hidden: props.screenshot,
      status: status,
      error: props.error
    })), _react.default.createElement(StyledPatternDemo, null, _react.default.createElement(PatternContainer, {
      navigationEnabled: props.navigationEnabled
    }, _react.default.createElement(_patternDemo.default, {
      src: props.src,
      contents: props.contents,
      loading: props.loading,
      updated: props.updated
    })))), _react.default.createElement(_patternSheet.default, null));
  }

}

exports.default = Pattern;

function getPrefix(props) {
  if (props.loading) {
    return "Load";
  }

  if (props.error) {
    return "Error";
  }

  return "";
}
//# sourceMappingURL=index.js.map