@patternplate/client/lib/app/components/toggle-doc.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 _components = require("@patternplate/components");

var _toggleButton = _interopRequireDefault(require("./common/toggle-button"));

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

var _default = ToggleDoc;
exports.default = _default;

function ToggleDoc(props) {
  return _react.default.createElement(StyledToggleButton, {
    active: props.active,
    enabled: props.enabled,
    shortcut: props.shortcut,
    title: title(props)
  }, _react.default.createElement(StyledIcon, {
    active: props.active,
    enabled: props.enabled,
    symbol: "doc"
  }), props.shortcut.toString());
}

function title(props) {
  return props.active ? null : "No documentation available.";
}

const CURSOR = props => props.active ? "pointer" : "not-allowed";

const COLOR = props => {
  if (props.active) {
    return props.enabled ? props.theme.colors.active : props.theme.colors.color;
  }

  return props.theme.colors.border;
};

const StyledIcon = (0, _components.styled)(_components.Icon).withConfig({
  displayName: "toggle-doc__StyledIcon"
})(["fill:", ";"], COLOR);
const StyledToggleButton = (0, _components.styled)(_toggleButton.default).withConfig({
  displayName: "toggle-doc__StyledToggleButton"
})(["font-size:0;line-height:0;cursor:", ";"], CURSOR);
//# sourceMappingURL=toggle-doc.js.map