@yeutech-lab/rollup-umd-documentation
Version:
Quickly build awesome documentation for your rollup-umd project.
171 lines (139 loc) • 8.53 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 _Button = require('@bootstrap-styled/v4/lib/Button');
var _Button2 = _interopRequireDefault(_Button);
var _A = require('@bootstrap-styled/v4/lib/A');
var _A2 = _interopRequireDefault(_A);
var _hover = require('@bootstrap-styled/css-mixins/lib/hover');
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-toolbar-button-padding': '2px',
'$rsg-toolbar-button-color': '#292b2c',
'$rsg-toolbar-button-background': 'transparent',
'$rsg-toolbar-button-transition': 'color 750ms ease-out',
'$rsg-toolbar-button-cursor': 'pointer',
'$rsg-toolbar-button-hover-focus-isolation': 'false',
'$rsg-toolbar-button-hover-focus-color': '#B31255',
'$rsg-toolbar-button-hover-focus-transition': 'color 150ms ease-in',
'$rsg-toolbar-button-focus-isolation': 'false',
'$rsg-toolbar-button-focus-outline': '1 dotted #B31255',
'$rsg-toolbar-button-children-isolation': 'false',
'$rsg-toolbar-button-children-margin-left': '8px',
'$rsg-toolbar-button-svg-width': '24px',
'$rsg-toolbar-button-svg-height': '24px',
'$rsg-toolbar-button-svg-color': '#CCCCCC',
'$rsg-toolbar-button-svg-cursor': 'inherit',
'$rsg-toolbar-button-small-width': '14px',
'$rsg-toolbar-button-small-height': '14px'
}
}
};
/* eslint-disable react/require-default-props */
var propTypes = exports.propTypes = {
/**
* @ignore
*/
className: _propTypes2.default.string, // eslint-disable-line react/require-default-props
/** Set href to `<A />` component. */
href: _propTypes2.default.string,
/** Set function passed to onclick button event. */
onClick: _propTypes2.default.func,
/** Set href to `<A />` or`<Button />` component. */
title: _propTypes2.default.string,
/** Toggle small style. */
small: _propTypes2.default.bool,
/** Specified node element will be passed as children of `<ToolbarButtonRenderer />` component. */
children: _propTypes2.default.node,
/** Theme variables. Can be: */
theme: _propTypes2.default.shape({
styleguide: _propTypes2.default.shape({
'$rsg-toolbar-button-padding': _propTypes2.default.string,
'$rsg-toolbar-button-color': _propTypes2.default.string,
'$rsg-toolbar-button-background': _propTypes2.default.string,
'$rsg-toolbar-button-transition': _propTypes2.default.string,
'$rsg-toolbar-button-cursor': _propTypes2.default.string,
'$rsg-toolbar-button-hover-focus-isolation': _propTypes2.default.string,
'$rsg-toolbar-button-hover-focus-color': _propTypes2.default.string,
'$rsg-toolbar-button-hover-focus-transition': _propTypes2.default.string,
'$rsg-toolbar-button-focus-isolation': _propTypes2.default.string,
'$rsg-toolbar-button-focus-outline': _propTypes2.default.string,
'$rsg-toolbar-button-children-isolation': _propTypes2.default.string,
'$rsg-toolbar-button-children-margin-left': _propTypes2.default.string,
'$rsg-toolbar-button-svg-width': _propTypes2.default.string,
'$rsg-toolbar-button-svg-height': _propTypes2.default.string,
'$rsg-toolbar-button-svg-color': _propTypes2.default.string,
'$rsg-toolbar-button-svg-cursor': _propTypes2.default.string,
'$rsg-toolbar-button-small-width': _propTypes2.default.string,
'$rsg-toolbar-button-small-height': _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 ToolbarButtonRendererUnstyled = function ToolbarButtonRendererUnstyled(props) {
var _omit = (0, _lodash2.default)(props, ['theme']),
className = _omit.className,
onClick = _omit.onClick,
href = _omit.href,
title = _omit.title,
small = _omit.small,
children = _omit.children,
cssModule = _omit.cssModule,
attributes = _objectWithoutProperties(_omit, ['className', 'onClick', 'href', 'title', 'small', 'children', 'cssModule']);
var classNames = (0, _lib2.default)((0, _classnames2.default)(className, 'rsg-toolbar-button no-print', small && 'small'), cssModule);
if (href !== undefined) {
return _react2.default.createElement(
_A2.default,
_extends({
href: href,
title: title,
className: classNames,
'aria-label': title
}, attributes),
children
);
}
return _react2.default.createElement(
_Button2.default,
_extends({
onClick: onClick,
title: title,
className: classNames,
'aria-label': title
}, attributes),
children
);
};
ToolbarButtonRendererUnstyled.defaultProps = defaultProps;
ToolbarButtonRendererUnstyled.propTypes = propTypes;
var ToolbarButtonRenderer = (0, _styledComponents2.default)(ToolbarButtonRendererUnstyled)(_templateObject, function (props) {
return '\n &.rsg-toolbar-button {\n padding: ' + props.theme.styleguide['$rsg-toolbar-button-padding'] + ';\n color: ' + props.theme.styleguide['$rsg-toolbar-button-color'] + ';\n background: ' + props.theme.styleguide['$rsg-toolbar-button-background'] + ';\n transition: ' + props.theme.styleguide['$rsg-toolbar-button-transition'] + ';\n cursor: ' + props.theme.styleguide['$rsg-toolbar-button-cursor'] + ';\n ' + (0, _hover.hoverFocus)(props.theme['$enable-hover-media-query'], '\n isolation: ' + props.theme.styleguide['$rsg-toolbar-button-hover-focus-isolation'] + ';\n color: ' + props.theme.styleguide['$rsg-toolbar-button-hover-focus-color'] + ';\n transition: ' + props.theme.styleguide['$rsg-toolbar-button-hover-focus-transition'] + ';\n ') + '\n &:focus {\n isolation: ' + props.theme.styleguide['$rsg-toolbar-button-focus-isolation'] + ';\n outline: ' + props.theme.styleguide['$rsg-toolbar-button-focus-outline'] + ';\n }\n & + & {\n isolation: ' + props.theme.styleguide['$rsg-toolbar-button-children-isolation'] + ';\n margin-left: ' + props.theme.styleguide['$rsg-toolbar-button-children-margin-left'] + ';\n }\n &:i {\n z-index: 1200;\n width: ' + props.theme.styleguide['$rsg-toolbar-button-svg-width'] + ';\n height: ' + props.theme.styleguide['$rsg-toolbar-button-svg-height'] + ';\n color: ' + props.theme.styleguide['$rsg-toolbar-button-svg-color'] + ';\n cursor: ' + props.theme.styleguide['$rsg-toolbar-button-svg-cursor'] + ';\n }\n }\n &.toolbar-button .small {\n &:i {\n width: ' + props.theme.styleguide['$rsg-toolbar-button-small-width'] + ';\n height: ' + props.theme.styleguide['$rsg-toolbar-button-small-height'] + ';\n }\n }\n ';
});
ToolbarButtonRenderer.defaultProps = defaultProps;
ToolbarButtonRenderer.propTypes = propTypes;
exports.default = ToolbarButtonRenderer;