vue-styleguidist
Version:
Vue components style guide generator
77 lines • 2.59 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["classes"];
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.function.name.js";
import React, { useState } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import Link from 'rsg-components/Link';
import Styled from 'rsg-components/Styled';
var styles = function styles(_ref) {
var space = _ref.space,
fontFamily = _ref.fontFamily;
return {
root: {
isolate: false,
fontFamily: fontFamily.base,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
marginBottom: space[3]
},
toggler: {
isolate: false,
cursor: 'pointer'
},
title: {
isolate: false,
marginRight: space[1]
},
open: {
isolate: false,
display: 'flex',
flexWrap: 'wrap'
},
element: {
// To override the isolation of link we need to wrap
// this selector
'$root &': {
isolate: false,
marginRight: space[1]
}
}
};
};
export var SubComponents = function SubComponents(_ref2) {
var classes = _ref2.classes,
props = _objectWithoutProperties(_ref2, _excluded);
// only collapse if there is more than 3 requires
var collapsibleSubComponents = props.subComponents.length > 3;
var _useState = useState(!collapsibleSubComponents),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
return /*#__PURE__*/React.createElement("div", {
className: clsx(classes.root, open && classes.open)
}, /*#__PURE__*/React.createElement("b", {
onClick: function onClick() {
return setOpen(!collapsibleSubComponents || !open);
},
className: clsx(classes.title, collapsibleSubComponents && classes.toggler)
}, collapsibleSubComponents ? open ? '-' : '+' : '', " Requires", collapsibleSubComponents ? " (".concat(props.subComponents.length, ")") : ''), props.subComponents.map(function (subComponent, i) {
return /*#__PURE__*/React.createElement(Link, {
key: i,
href: subComponent.url,
className: classes.element
}, subComponent.name);
}));
};
SubComponents.propTypes = {
classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
subComponents: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
url: PropTypes.string.isRequired
}).isRequired).isRequired
};
export default Styled(styles)(SubComponents);