@bootstrap-styled/rsg-components/lib/Pathline/PathlineRenderer.js

Create documentation layouts for your react-styleguidist using Bootstrap-Styled rsg-component. Boostrap Styled rsg-components use the @bootstrap-styled/v4 for recreating the original rsg-components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));

var _reactFontawesome = require("@fortawesome/react-fontawesome");

var _hover = require("@bootstrap-styled/css-mixins/lib/hover");

var _breakpoints = _interopRequireDefault(require("@bootstrap-styled/css-mixins/lib/breakpoints"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lodash = _interopRequireDefault(require("lodash.omit"));

var _lib = _interopRequireDefault(require("map-to-css-modules/lib"));

var _ToolbarButton = _interopRequireDefault(require("../ToolbarButton"));

var defaultProps = {
  theme: {
    styleguide: {
      '$rsg-path-line-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
      '$rsg-path-line-color': '#CCCCCC',
      '$rsg-path-line-font-size': '0.8em',
      '$rsg-path-line-copy-button-margin': '0 0 0 4px',
      '$rsg-path-line-copy-button-border': 'none',
      '$rsg-path-line-copy-button-outline': 'none',
      '$rsg-path-line-copy-button-box-shadow': 'none',
      '$rsg-path-line-cursor': 'pointer',
      '$rsg-path-line-icon-color': '#CCCCCC',
      '$rsg-path-line-icon-font-size': '0.8em',
      '$rsg-path-line-icon-cursor': 'pointer',
      '$rsg-path-line-icon-bottom': '3px',
      '$rsg-path-line-icon-hover-color': '#B31255',
      '$rsg-path-line-word-break': 'break-all'
    }
  }
};
exports.defaultProps = defaultProps;
var propTypes = {
  /**
   * @ignore
   */
  className: _propTypes.default.string,
  // eslint-disable-line react/require-default-props

  /** Specified node element will be passed as children of `<PathlineRenderer />` component. */
  children: _propTypes.default.node,
  // eslint-disable-line react/require-default-props

  /** Theme variables. Can be: */
  theme: _propTypes.default.shape({
    styleguide: _propTypes.default.shape({
      '$rsg-path-line-font-family': _propTypes.default.string,
      '$rsg-path-line-color': _propTypes.default.string,
      '$rsg-path-line-font-size': _propTypes.default.string,
      '$rsg-path-line-copy-button-margin': _propTypes.default.string,
      '$rsg-path-line-copy-button-border': _propTypes.default.string,
      '$rsg-path-line-copy-button-outline': _propTypes.default.string,
      '$rsg-path-line-copy-button-box-shadow': _propTypes.default.string,
      '$rsg-path-line-cursor': _propTypes.default.string,
      '$rsg-path-line-icon-color': _propTypes.default.string,
      '$rsg-path-line-icon-font-size': _propTypes.default.string,
      '$rsg-path-line-icon-cursor': _propTypes.default.string,
      '$rsg-path-line-icon-bottom': _propTypes.default.string,
      '$rsg-path-line-icon-hover-color': _propTypes.default.string,
      '$rsg-path-line-word-break': _propTypes.default.string
    })
  }),

  /**
   * Replace or remove a className from the component.
   * See example <a href="https://www.npmjs.com/package/map-to-css-modules" target="_blank">here</a>.
   */
  cssModule: _propTypes.default.object // eslint-disable-line react/require-default-props

};
exports.propTypes = propTypes;

var PathlineRendererUnstyled = function PathlineRendererUnstyled(props) {
  var _omit = (0, _lodash.default)(props, ['theme']),
      className = _omit.className,
      cssModule = _omit.cssModule,
      children = _omit.children,
      attributes = (0, _objectWithoutProperties2.default)(_omit, ["className", "cssModule", "children"]);

  return _react.default.createElement("div", (0, _extends2.default)({
    className: (0, _lib.default)((0, _classnames.default)(className, 'rsg-path-line d-flex justify-content-start'), cssModule)
  }, attributes), children, _react.default.createElement(_ToolbarButton.default, {
    className: "copy-button",
    onClick: function onClick() {
      return (0, _clipboardCopy.default)(children);
    },
    title: "Copy to clipboard"
  }, _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: ['fas', 'copy']
  })));
};

PathlineRendererUnstyled.defaultProps = defaultProps;
PathlineRendererUnstyled.propTypes = propTypes;
var PathlineRenderer = (0, _styledComponents.default)(PathlineRendererUnstyled).withConfig({
  displayName: "PathlineRenderer",
  componentId: "hqj31n-0"
})(["  ", ""], function (props) {
  return "\n    &.rsg-path-line {\n      font-family: ".concat(props.theme.styleguide['$rsg-path-line-font-family'], ";\n      word-break: ").concat(props.theme.styleguide['$rsg-path-line-word-break'], ";\n  ").concat(_breakpoints.default.up('xs', props.theme['$grid-breakpoints'], "\n      font-size: 75%;\n    "), "\n  ").concat(_breakpoints.default.up('sm', props.theme['$grid-breakpoints'], "\n      font-size: ".concat(props.theme.styleguide['$rsg-path-line-font-size'], ";\n    ")), "\n      color: ").concat(props.theme.styleguide['$rsg-path-line-color'], ";\n      .copy-button {\n        margin: ").concat(props.theme.styleguide['$rsg-path-line-copy-button-margin'], ";\n        &:active, &:focus {\n          border: ").concat(props.theme.styleguide['$rsg-path-line-copy-button-border'], ";\n          outline: ").concat(props.theme.styleguide['$rsg-path-line-copy-button-outline'], ";\n          box-shadow: ").concat(props.theme.styleguide['$rsg-path-line-copy-button-box-shadow'], ";\n        }\n      }\n      & i {\n        color: ").concat(props.theme.styleguide['$rsg-path-line-icon-color'], ";\n        font-size: ").concat(props.theme.styleguide['$rsg-path-line-icon-font-size'], ";\n        cursor: ").concat(props.theme.styleguide['$rsg-path-line-icon-cursor'], ";\n        bottom: ").concat(props.theme.styleguide['$rsg-path-line-icon-bottom'], ";\n  ").concat((0, _hover.hover)("\n      color: ".concat(props.theme.styleguide['$rsg-path-line-icon-hover-color'], ";\n\n    ")), "\n      }\n    }\n ");
});
PathlineRenderer.defaultProps = defaultProps;
PathlineRenderer.propTypes = propTypes;
/** @component */

var _default = PathlineRenderer;
exports.default = _default;