@patternplate/client/lib/app/components/pattern/pattern-sheet.js

Universal javascript client application for patternplate

"use strict";

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

var _reactRedux = require("react-redux");

var _react = _interopRequireDefault(require("react"));

var _remark = _interopRequireDefault(require("remark"));

var _remarkGemojiToEmoji = _interopRequireDefault(require("remark-gemoji-to-emoji"));

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

var item = _interopRequireWildcard(require("../../selectors/item"));

var _triggerFullscreen = _interopRequireDefault(require("../../containers/trigger-fullscreen"));

var _toggleOpacity = _interopRequireDefault(require("../../containers/toggle-opacity"));

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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 processor = (0, _remark.default)().use(_remarkGemojiToEmoji.default);

var _default = (0, _reactRedux.connect)(mapProps)(PatternSheet);

exports.default = _default;

function PatternSheet(props) {
  return _react.default.createElement(StyledPatternSheet, {
    screenshot: props.screenshot
  }, _react.default.createElement(StyledPatternSheetContainer, null, _react.default.createElement(StyledControlsBox, null, _react.default.createElement(StyledName, null, props.name, _react.default.createElement(StyledVersion, null, "@", props.version)), _react.default.createElement(_components.ThemeProvider, {
    theme: _components.themes.getThemes().dark
  }, _react.default.createElement(StyledControlsArea, {
    orient: "right"
  }, _react.default.createElement(StyledControlsItem, null, _react.default.createElement(_toggleOpacity.default, null)), _react.default.createElement(StyledControlsItem, null, _react.default.createElement(_triggerFullscreen.default, null))))), props.description && _react.default.createElement(StyledDescription, null, processor.processSync(props.description).contents), _react.default.createElement(StyledBoxLine, null, _react.default.createElement(SearchTrigger, {
    field: "flag",
    search: props.flag
  }, _react.default.createElement(_components.Flag, null, props.flag)), _react.default.createElement(StyledTagList, null, props.tags.map((tag, index) => _react.default.createElement(SearchTrigger, {
    key: `${tag}-${index}`,
    field: "tags",
    search: tag
  }, _react.default.createElement(_components.Tag, null, tag))))), typeof props.doc === "string" && _react.default.createElement(StyledMarkdownBox, null, _react.default.createElement(_components.Markdown, {
    linkable: true,
    source: props.doc
  }))));
}

const StyledSearchTrigger = _components.styled.span.withConfig({
  displayName: "pattern-sheet__StyledSearchTrigger"
})(["&:not(:first-child){margin-left:10px;}"]);

const StyledLink = (0, _components.styled)(_components.Link).withConfig({
  displayName: "pattern-sheet__StyledLink"
})(["text-decoration:none;"]);

function SearchTrigger(props) {
  return _react.default.createElement(StyledSearchTrigger, null, _react.default.createElement(StyledLink, {
    className: props.className,
    query: {
      "search-enabled": true,
      search: `${props.field}=${props.search}`
    },
    title: `Search other patterns with ${props.field} "${props.search}"`
  }, props.children));
}

function mapProps(state) {
  return {
    doc: item.selectContents(state),
    description: item.selectDescription(state),
    id: state.id,
    icon: item.selectIcon(state),
    type: item.selectType(state),
    name: item.selectName(state),
    flag: item.selectFlag(state),
    tags: item.selectTags(state),
    version: item.selectVersion(state),
    screenshot: state.routing.locationBeforeTransitions.query.screenshot === "true"
  };
}

const TOOLBAR_HEIGHT = 60;
const StyledName = (0, _components.styled)(props => _react.default.createElement(_components.Headline, _extends({}, props, {
  as: "h1",
  order: 1
}))).withConfig({
  displayName: "pattern-sheet__StyledName"
})(["margin:0 0 10px 0;"]);
const StyledVersion = (0, _components.styled)(props => _react.default.createElement(_components.Headline, _extends({}, props, {
  as: "small",
  order: 3
}))).withConfig({
  displayName: "pattern-sheet__StyledVersion"
})(["display:inline-block;color:", ";margin:0;"], props => props.theme.colors.color);
const StyledDescription = (0, _components.styled)(_components.Text).withConfig({
  displayName: "pattern-sheet__StyledDescription"
})(["color:", ";margin-bottom:20px;"], props => props.theme.colors.recess);

const StyledPatternSheet = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledPatternSheet"
})(["position:relative;z-index:2;box-sizing:border-box;width:100%;min-height:30vh;margin-top:70vh;padding:30px 60px;border-top:1px solid ", ";background:", ";"], props => props.theme.colors.border, props => props.theme.colors.background);

const ORIENTATION = props => {
  const direction = props.orient === "right" ? "left" : "right";
  return `margin-${direction}: auto`;
};

const StyledPatternSheetContainer = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledPatternSheetContainer"
})(["margin:0 auto;max-width:740px;"]);

const StyledControlsArea = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledControlsArea"
})(["display:flex;", ";"], ORIENTATION);

const StyledControlsBox = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledControlsBox"
})(["display:flex;align-items:center;flex:0 0 auto;position:relative;z-index:2;box-sizing:border-box;background:white;"]);

const StyledControlsItem = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledControlsItem"
})(["& + &{padding-left:10px;}"]);

const StyledTagList = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledTagList"
})(["display:inline-block;margin-left:10px;padding:2px 10px;border-left:1px solid ", ";"], props => props.theme.colors.border);

const StyledBoxLine = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledBoxLine"
})(["display:flex;align-items:center;min-height:32px;"]);

const StyledMarkdownBox = _components.styled.div.withConfig({
  displayName: "pattern-sheet__StyledMarkdownBox"
})(["margin-top:30px;"]);
//# sourceMappingURL=pattern-sheet.js.map