@yeutech-lab/rollup-umd-documentation
Version:
Quickly build awesome documentation for your rollup-umd project.
303 lines (260 loc) • 16.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.propTypes = exports.defaultProps = undefined;
var _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; };
var _templateObject = _taggedTemplateLiteral(['\n ', '\n'], ['\n ', '\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Table = require('@bootstrap-styled/v4/lib/Table');
var _Table2 = _interopRequireDefault(_Table);
var _Thead = require('@bootstrap-styled/v4/lib/Table/Thead');
var _Thead2 = _interopRequireDefault(_Thead);
var _Tr = require('@bootstrap-styled/v4/lib/Table/Tr');
var _Tr2 = _interopRequireDefault(_Tr);
var _Th = require('@bootstrap-styled/v4/lib/Table/Th');
var _Th2 = _interopRequireDefault(_Th);
var _Tbody = require('@bootstrap-styled/v4/lib/Table/Tbody');
var _Tbody2 = _interopRequireDefault(_Tbody);
var _Td = require('@bootstrap-styled/v4/lib/Table/Td');
var _Td2 = _interopRequireDefault(_Td);
var _Strong = require('@bootstrap-styled/v4/lib/Strong');
var _Strong2 = _interopRequireDefault(_Strong);
var _breakpoints = require('@bootstrap-styled/css-mixins/lib/breakpoints');
var _breakpoints2 = _interopRequireDefault(_breakpoints);
var _lodash = require('lodash.omit');
var _lodash2 = _interopRequireDefault(_lodash);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _lib = require('map-to-css-modules/lib');
var _lib2 = _interopRequireDefault(_lib);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var defaultProps = exports.defaultProps = {
theme: {
styleguide: {
'$rsg-table-border': 'none',
'$rsg-table-layout': {
xs: 'fixed',
md: 'fixed',
xxl: 'auto'
},
'$rsg-table-width': {
xs: '100%',
md: 'fixed',
xxl: '1000px'
},
'$rsg-table-th-width': {
xs: '21.6666666667%;',
md: '18.3333333333%',
xxl: '81.48148148px'
},
'$rsg-table-th-last-width': {
xs: '35%',
md: '45%',
xxl: '200px'
},
'$rsg-table-td-width': {
xs: '21.6666666667%',
md: '18.3333333333%',
xxl: '81.48148148px'
},
'$rsg-table-td-last-width': {
xs: '35%',
md: '45%',
xxl: '200px'
},
'$rsg-table-cell-heading-vertical-align': 'text-top',
'$rsg-table-cell-heading-first-child-white-space': 'pre-wrap',
'$rsg-table-cell-heading-font-size': {
xs: '12px',
sm: '15px'
},
'$rsg-table-cell-padding': '5px 5px 7px 0',
'$rsg-table-cell-font-size': {
xs: '12px',
sm: '15px'
},
'$rsg-table-cell-span-font-size': {
xs: '12px',
sm: '15px'
},
'$rsg-table-overflow': 'auto',
'$rsg-table-border-collapse': 'collapse',
'$rsg-table-margin': '24px 0 0 0',
'$rsg-table-head-border-bottom': '1px #e8e8e8 solid',
'$rsg-table-cell-heading-color': '#333',
'$rsg-table-cell-heading-padding': '0 8px 4px 0',
'$rsg-table-cell-heading-text-align': 'left',
'$rsg-table-cell-heading-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
'$rsg-table-cell-heading-font-weight': 'bold',
'$rsg-table-cell-heading-white-space': 'nowrap',
'$rsg-table-cell-border-top': '0',
'$rsg-table-cell-color': '#333',
'$rsg-table-cell-vertical-align': 'top',
'$rsg-table-cell-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
'$rsg-table-cell-child-isolation': 'false',
'$rsg-table-cell-child-p-isolation': 'false',
'$rsg-table-cell-child-p-margin': '0 0 0 0'
}
}
};
/* eslint-disable react/require-default-props */
var propTypes = exports.propTypes = {
/**
* @ignore
*/
className: _propTypes2.default.string, // eslint-disable-line react/require-default-props
/** Columns to be rendered. */
columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
caption: _propTypes2.default.string.isRequired,
render: _propTypes2.default.func.isRequired
})).isRequired,
/** Rows to be rendered. */
rows: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,
/** Set function passed to `<Tr />` component. */
getRowKey: _propTypes2.default.func.isRequired,
/** Theme variables. Can be: */
theme: _propTypes2.default.shape({
styleguide: _propTypes2.default.shape({
'$rsg-table-border': _propTypes2.default.string,
'$rsg-table-layout': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
xxl: _propTypes2.default.string
}),
'$rsg-table-width': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
xxl: _propTypes2.default.string
}),
'$rsg-table-th-width': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
xxl: _propTypes2.default.string
}),
'$rsg-table-th-last-width': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
xxl: _propTypes2.default.string
}),
'$rsg-table-td-width': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
xxl: _propTypes2.default.string
}),
'$rsg-table-td-last-width': _propTypes2.default.shape({
xs: _propTypes2.default.string,
md: _propTypes2.default.string,
xxl: _propTypes2.default.string
}),
'$rsg-table-cell-heading-vertical-align': _propTypes2.default.string,
'$rsg-table-cell-heading-first-child-white-space': _propTypes2.default.string,
'$rsg-table-cell-heading-font-size': _propTypes2.default.shape({
xs: _propTypes2.default.string,
sm: _propTypes2.default.string
}),
'$rsg-table-cell-padding': _propTypes2.default.string,
'$rsg-table-cell-font-size': _propTypes2.default.shape({
xs: _propTypes2.default.string,
sm: _propTypes2.default.string
}),
'$rsg-table-cell-span-font-size': _propTypes2.default.shape({
xs: _propTypes2.default.string,
sm: _propTypes2.default.string
}),
'$rsg-table-overflow': _propTypes2.default.string,
'$rsg-table-border-collapse': _propTypes2.default.string,
'$rsg-table-margin': _propTypes2.default.string,
'$rsg-table-head-border-bottom': _propTypes2.default.string,
'$rsg-table-cell-heading-color': _propTypes2.default.string,
'$rsg-table-cell-heading-padding': _propTypes2.default.string,
'$rsg-table-cell-heading-text-align': _propTypes2.default.string,
'$rsg-table-cell-heading-font-family': _propTypes2.default.string,
'$rsg-table-cell-heading-font-weight': _propTypes2.default.string,
'$rsg-table-cell-heading-white-space': _propTypes2.default.string,
'$rsg-table-cell-border-top': _propTypes2.default.string,
'$rsg-table-cell-color': _propTypes2.default.string,
'$rsg-table-cell-vertical-align': _propTypes2.default.string,
'$rsg-table-cell-font-family': _propTypes2.default.string,
'$rsg-table-cell-child-isolation': _propTypes2.default.string,
'$rsg-table-cell-child-p-isolation': _propTypes2.default.string,
'$rsg-table-cell-child-p-margin': _propTypes2.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: _propTypes2.default.object // eslint-disable-line react/require-default-props
};
/* eslint-enable react/require-default-props */
var TableRendererUnstyled = function TableRendererUnstyled(props) {
var _omit = (0, _lodash2.default)(props, ['theme']),
className = _omit.className,
columns = _omit.columns,
rows = _omit.rows,
getRowKey = _omit.getRowKey,
cssModule = _omit.cssModule,
attributes = _objectWithoutProperties(_omit, ['className', 'columns', 'rows', 'getRowKey', 'cssModule']);
/* eslint-disable react/no-array-index-key */
return _react2.default.createElement(
_Table2.default,
_extends({
className: (0, _lib2.default)((0, _classnames2.default)(className, 'rsg-table'), cssModule)
}, attributes),
_react2.default.createElement(
_Thead2.default,
{ className: 'rsg-table-head' },
_react2.default.createElement(
_Tr2.default,
{ className: 'rsg-table-row' },
columns.map(function (_ref) {
var caption = _ref.caption;
return _react2.default.createElement(
_Th2.default,
{ key: caption, className: 'rsg-table-cell-heading' },
_react2.default.createElement(
_Strong2.default,
{ className: 'rsg-table-cell-heading-content' },
caption
)
);
})
)
),
_react2.default.createElement(
_Tbody2.default,
{ className: 'rsg-table-body' },
rows.map(function (row) {
return _react2.default.createElement(
_Tr2.default,
{ key: getRowKey(row), className: 'rsg-table-row' },
columns.map(function (_ref2, index) {
var render = _ref2.render;
return _react2.default.createElement(
_Td2.default,
{ key: 'rsg-table-cell-' + index, className: 'rsg-table-cell' },
render(row)
);
})
);
})
)
);
/* eslint-enable react/no-array-index-key */
};
TableRendererUnstyled.defaultProps = defaultProps;
TableRendererUnstyled.propTypes = propTypes;
var TableRenderer = (0, _styledComponents2.default)(TableRendererUnstyled)(_templateObject, function (props) {
return '\n &.rsg-table {\n border: ' + props.theme.styleguide['$rsg-table-border'] + ';\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n table-layout: ' + props.theme.styleguide['$rsg-table-layout'].xs + ';\n width: ' + props.theme.styleguide['$rsg-table-width'].xs + ';\n ') + '\n ' + _breakpoints2.default.up('xxl', { xxl: '1500px' }, '\n table-layout: ' + props.theme.styleguide['$rsg-table-layout'].xxl + ';\n width: ' + props.theme.styleguide['$rsg-table-width'].xxl + ';\n ') + '\n overflow: ' + props.theme.styleguide['$rsg-table-overflow'] + ';\n border-collapse: ' + props.theme.styleguide['$rsg-table-border-collapse'] + ' !important;\n margin: ' + props.theme.styleguide['$rsg-table-margin'] + ';\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n thead tr th:not(:last-child) {\n width: ' + props.theme.styleguide['$rsg-table-th-width'].xs + ';\n }\n thead tr th:last-child {\n width: ' + props.theme.styleguide['$rsg-table-th-last-width'].xs + ';\n }\n tbody tr td:not(:last-child) {\n width: ' + props.theme.styleguide['$rsg-table-td-width'].xs + ';\n }\n tbody tr td:last-child {\n width: ' + props.theme.styleguide['$rsg-table-td-last-width'].xs + ';\n }\n ') + '\n ' + _breakpoints2.default.up('md', props.theme['$grid-breakpoints'], '\n thead tr th:not(:last-child) {\n width: ' + props.theme.styleguide['$rsg-table-th-width'].md + ';\n }\n thead tr th:last-child {\n width: ' + props.theme.styleguide['$rsg-table-th-last-width'].md + ';\n }\n tbody tr td:not(:last-child) {\n width: ' + props.theme.styleguide['$rsg-table-td-width'].md + ';\n }\n tbody tr td:last-child {\n width: ' + props.theme.styleguide['$rsg-table-td-last-width'].md + ';\n }\n ') + '\n ' + _breakpoints2.default.up('xxl', { xxl: '1500px' }, '\n thead tr th:not(:last-child) {\n width: ' + props.theme.styleguide['$rsg-table-th-width'].xxl + ';\n }\n thead tr th:last-child {\n width: ' + props.theme.styleguide['$rsg-table-th-last-width'].xxl + ';\n }\n tbody tr td:not(:last-child) {\n width: ' + props.theme.styleguide['$rsg-table-td-width'].xxl + ';\n }\n tbody tr td:last-child {\n width: ' + props.theme.styleguide['$rsg-table-td-last-width'].xxl + ';\n }\n ') + '\n .rsg-table-head {\n border-bottom: ' + props.theme.styleguide['$rsg-table-head-border-bottom'] + ';\n & .rsg-table-cell-heading {\n padding: ' + props.theme.styleguide['$rsg-table-cell-heading-padding'] + ';\n color: ' + props.theme.styleguide['$rsg-table-cell-heading-color'] + ';\n text-align: ' + props.theme.styleguide['$rsg-table-cell-heading-text-align'] + ';\n font-weight: ' + props.theme.styleguide['$rsg-table-cell-heading-font-weight'] + ';\n font-family: ' + props.theme.styleguide['$rsg-table-cell-heading-font-family'] + ';\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n font-size: ' + props.theme.styleguide['$rsg-table-cell-heading-font-size'].xs + ';\n ') + '\n ' + _breakpoints2.default.up('sm', props.theme['$grid-breakpoints'], '\n font-size: ' + props.theme.styleguide['$rsg-table-cell-heading-font-size'].xs + ';\n ') + '\n white-space: ' + props.theme.styleguide['$rsg-table-cell-heading-white-space'] + ';\n vertical-align: ' + props.theme.styleguide['$rsg-table-cell-heading-vertical-align'] + ';\n &:first-child {\n white-space: ' + props.theme.styleguide['$rsg-table-cell-heading-first-child-white-space'] + ';\n }\n }\n }\n & .rsg-table-cell {\n padding: ' + props.theme.styleguide['$rsg-table-cell-padding'] + ';\n border-top: ' + props.theme.styleguide['$rsg-table-cell-border-top'] + ';\n color: ' + props.theme.styleguide['$rsg-table-cell-color'] + ';\n vertical-align: ' + props.theme.styleguide['$rsg-table-cell-vertical-align'] + ';\n font-family: ' + props.theme.styleguide['$rsg-table-cell-font-family'] + ';\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n font-size: ' + props.theme.styleguide['$rsg-table-cell-font-size'].xs + ';\n\n ') + '\n ' + _breakpoints2.default.up('sm', props.theme['$grid-breakpoints'], '\n font-size: ' + props.theme.styleguide['$rsg-table-cell-font-size'].sm + ';\n\n ') + '\n & span {\n ' + _breakpoints2.default.up('xs', props.theme['$grid-breakpoints'], '\n font-size: ' + props.theme.styleguide['$rsg-table-cell-span-font-size'].xs + ';\n\n ') + '\n ' + _breakpoints2.default.up('sm', props.theme['$grid-breakpoints'], '\n font-size: ' + props.theme.styleguide['$rsg-table-cell-span-font-size'].sm + ';\n\n ') + '\n }\n &:last-child {\n isolation: ' + props.theme.styleguide['$rsg-table-cell-child-isolation'] + ';\n }\n & p:last-child {\n isolation: ' + props.theme.styleguide['$rsg-table-cell-child-p-isolation'] + ' !important;\n margin: ' + props.theme.styleguide['$rsg-table-cell-child-p-margin'] + ';\n }\n }\n }\n ';
});
TableRenderer.defaultProps = defaultProps;
TableRenderer.propTypes = propTypes;
exports.default = TableRenderer;