@bootstrap-styled/rsg-components
Version:
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.
291 lines (240 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.defaultProps = exports.propTypes = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Collapse = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Collapse"));
var _Ul = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Ul"));
var _Li = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Li"));
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _hover = require("@bootstrap-styled/css-mixins/lib/hover");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _lib = _interopRequireDefault(require("map-to-css-modules/lib"));
var _lodash = _interopRequireDefault(require("lodash.debounce"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash2 = _interopRequireDefault(require("lodash.omit"));
var _Link = _interopRequireDefault(require("../Link"));
/* eslint-disable react/prop-types */
var propTypes = {
/**
* @ignore
*/
className: _propTypes.default.string,
// eslint-disable-line react/require-default-props
/** Items used to create component list such as table of content and section. Can be: */
items: _propTypes.default.arrayOf(_propTypes.default.shape({
visibleName: _propTypes.default.string,
href: _propTypes.default.string,
filepath: _propTypes.default.string,
heading: _propTypes.default.bool,
sectionDepth: _propTypes.default.number,
content: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
collapse: _propTypes.default.bool,
slug: _propTypes.default.string,
components: _propTypes.default.array,
sections: _propTypes.default.array
})).isRequired,
/** Toggle use of isolated links. */
useIsolatedLinks: _propTypes.default.bool,
// eslint-disable-line react/no-unused-prop-types, react/require-default-props
/** Toggle menu collapse. */
isOpenCollapse: _propTypes.default.bool.isRequired,
/** Theme variables. Can be: */
theme: _propTypes.default.shape({
styleguide: _propTypes.default.shape({
'$rsg-component-list-color': _propTypes.default.string,
'$rsg-component-list-font-size': _propTypes.default.string,
'$rsg-component-list-line-height': _propTypes.default.string,
'$rsg-component-list-heading-button-outline': _propTypes.default.string,
'$rsg-component-list-heading-button-border': _propTypes.default.string,
'$rsg-component-list-heading-button-cursor': _propTypes.default.string,
'$rsg-component-list-heading-margin': _propTypes.default.string,
'$rsg-component-list-heading-border-bottom': _propTypes.default.string,
'$rsg-component-list-heading-color': _propTypes.default.string,
'$rsg-component-list-heading-hover-color': _propTypes.default.string,
'$rsg-component-list-heading-font-size': _propTypes.default.string,
'$rsg-component-list-icon-margin': _propTypes.default.string,
'$rsg-component-list-icon-color': _propTypes.default.string,
'$rsg-component-list-icon-transition': _propTypes.default.string,
'$rsg-component-list-icon-transform': _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 defaultProps = {
// eslint-disable-next-line react/default-props-match-prop-types
theme: {
styleguide: {
'$rsg-component-list-color': '#CCCCCC',
'$rsg-component-list-font-size': '14px',
'$rsg-component-list-line-height': '2.5',
'$rsg-component-list-heading-button-outline': 'none',
'$rsg-component-list-heading-button-border': 'none',
'$rsg-component-list-heading-button-cursor': 'pointer',
'$rsg-component-list-heading-margin': '15px 0 0 0',
'$rsg-component-list-heading-border-bottom': 'none',
'$rsg-component-list-heading-color': '#292b2c',
'$rsg-component-list-heading-hover-color': '#B31255',
'$rsg-component-list-heading-font-size': '16px',
'$rsg-component-list-icon-margin': '0 15px 0 0',
'$rsg-component-list-icon-color': '#292b2c',
'$rsg-component-list-icon-transition': 'transform 1s',
'$rsg-component-list-icon-transform': 'rotateX(180deg)'
}
}
};
exports.defaultProps = defaultProps;
var ComponentsListRendererUnstyled =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(ComponentsListRendererUnstyled, _React$Component);
function ComponentsListRendererUnstyled() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, ComponentsListRendererUnstyled);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ComponentsListRendererUnstyled)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
itemList: []
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (visibleName) {
_this.setState((0, _defineProperty2.default)({}, "".concat(visibleName, "-is-open"), !_this.state["".concat(visibleName, "-is-open")]));
});
return _this;
}
(0, _createClass2.default)(ComponentsListRendererUnstyled, [{
key: "UNSAFE_componentWillMount",
// eslint-disable-next-line camelcase
value: function UNSAFE_componentWillMount() {
var _this2 = this;
this.updateItems(this.props.items, function () {
var newState = {};
_this2.state.itemList.forEach(function (_ref) {
var heading = _ref.heading,
visibleName = _ref.visibleName,
sectionDepth = _ref.sectionDepth,
collapse = _ref.collapse;
if (heading) {
newState["".concat(visibleName, "-is-open")] = collapse;
newState["".concat(visibleName, "-index")] = sectionDepth;
}
});
_this2.setState(newState);
});
} // eslint-disable-next-line camelcase
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.items.length !== nextProps.items.length) {
this.updateItems(nextProps.items);
}
if (this.props.isOpenCollapse !== nextProps.isOpenCollapse) {
this.updateCollapseItems(nextProps.isOpenCollapse);
}
}
}, {
key: "updateItems",
value: function updateItems(items, cb) {
this.setState({
itemList: items.filter(function (item) {
return item.visibleName;
})
}, cb);
}
}, {
key: "updateCollapseItems",
value: function updateCollapseItems(isCollapse) {
var newState = {};
this.state.itemList.forEach(function (_ref2) {
var heading = _ref2.heading,
visibleName = _ref2.visibleName;
if (heading) {
newState["".concat(visibleName, "-is-open")] = isCollapse;
}
});
this.setState(newState);
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _omit = (0, _lodash2.default)(this.props, ['theme', 'isOpenCollapse', 'items']),
className = _omit.className,
cssModule = _omit.cssModule,
attributes = (0, _objectWithoutProperties2.default)(_omit, ["className", "cssModule"]);
var itemList = this.state.itemList;
if (!itemList.length) {
return null;
}
return _react.default.createElement(_Ul.default, (0, _extends2.default)({
className: (0, _lib.default)((0, _classnames.default)(className, 'rsg-component-list'), cssModule)
}, attributes), itemList.map(function (_ref3) {
var heading = _ref3.heading,
visibleName = _ref3.visibleName,
href = _ref3.href,
content = _ref3.content,
sectionDepth = _ref3.sectionDepth;
return _react.default.createElement(_Li.default, {
key: href,
className: "list-".concat(sectionDepth)
}, heading ? _react.default.createElement("div", {
role: "button",
tabIndex: "0",
onClick: (0, _lodash.default)(function () {
return _this3.onClick(visibleName);
}, 300),
onKeyPress: (0, _lodash.default)(function () {
return _this3.onClick(visibleName);
}, 300),
className: "list-button font-weight-bold d-flex align-items-center justify-content-between"
}, _react.default.createElement(_Link.default, {
className: "level-".concat(sectionDepth),
href: href
}, visibleName), _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
className: "rsg-component-list-icon font-weight-bold ".concat(!_this3.state["".concat(visibleName, "-is-open")] ? 'no-collapse' : ''),
size: "lg",
icon: ['fas', 'angle-up']
})) : _react.default.createElement(_Link.default, {
className: "level-".concat(sectionDepth),
href: href
}, visibleName), content ? _react.default.createElement(_Collapse.default, {
isOpen: _this3.state["".concat(visibleName, "-is-open")],
className: "font-weight-normal mt-2"
}, content) : null);
}));
}
}]);
return ComponentsListRendererUnstyled;
}(_react.default.Component);
(0, _defineProperty2.default)(ComponentsListRendererUnstyled, "propTypes", propTypes);
(0, _defineProperty2.default)(ComponentsListRendererUnstyled, "defaultProps", defaultProps);
var ComponentsListRenderer = (0, _styledComponents.default)(ComponentsListRendererUnstyled).withConfig({
displayName: "ComponentsListRenderer",
componentId: "rl6492-0"
})([" ", ""], function (props) {
return "\n &.rsg-component-list {\n color: ".concat(props.theme.styleguide['$rsg-component-list-color'], ";\n font-size: ").concat(props.theme.styleguide['$rsg-component-list-font-size'], ";\n line-height: ").concat(props.theme.styleguide['$rsg-component-list-line-height'], ";\n .list-0 {\n margin: ").concat(props.theme.styleguide['$rsg-component-list-heading-margin'], ";\n border-bottom: ").concat(props.theme.styleguide['$rsg-component-list-heading-border-bottom'], ";\n .list-button {\n outline: ").concat(props.theme.styleguide['$rsg-component-list-heading-button-outline'], ";\n border: ").concat(props.theme.styleguide['$rsg-component-list-heading-button-border'], ";\n cursor: ").concat(props.theme.styleguide['$rsg-component-list-heading-button-cursor'], ";\n }\n }\n & .level-0, .level-1, .level-2 {\n color: ").concat(props.theme.styleguide['$rsg-component-list-heading-color'], ";\n ").concat((0, _hover.hover)("\n color: ".concat(props.theme.styleguide['$rsg-component-list-heading-hover-color'], ";\n\n ")), "\n font-size: ").concat(props.theme.styleguide['$rsg-component-list-heading-font-size'], ";\n }\n & .rsg-component-list-icon {\n margin: ").concat(props.theme.styleguide['$rsg-component-list-icon-margin'], ";\n color: ").concat(props.theme.styleguide['$rsg-component-list-icon-color'], ";\n transition: ").concat(props.theme.styleguide['$rsg-component-list-icon-transition'], ";\n }\n & .rsg-component-list-icon.no-collapse {\n transform: ").concat(props.theme.styleguide['$rsg-component-list-icon-transform'], ";\n }\n }\n ");
});
ComponentsListRenderer.propTypes = propTypes;
ComponentsListRenderer.defaultProps = defaultProps;
/** @component */
var _default = ComponentsListRenderer;
exports.default = _default;