@geneui/components
Version:
The Gene UI components library designed for BI tools
97 lines (93 loc) • 6.12 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .paper{align-content:flex-start;display:flex;width:100%}[data-gene-ui-version=\"2.16.5\"] .paper:not(.bg-transparent){background:var(--background)}[data-gene-ui-version=\"2.16.5\"] .paper.with-shadow{box-shadow:0 .3rem .6rem 0 #0000000d}[data-gene-ui-version=\"2.16.5\"] .paper.top-radius{border-radius:2rem 2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .paper.bottom-radius{border-radius:0 0 2rem 2rem}[data-gene-ui-version=\"2.16.5\"] .paper.full-radius{border-radius:2rem}[data-gene-ui-version=\"2.16.5\"] .paper.with-border{border:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.5\"] .pd-row{flex-direction:row}[data-gene-ui-version=\"2.16.5\"] .pd-row-reverse{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.5\"] .pd-column{flex-direction:column}[data-gene-ui-version=\"2.16.5\"] .pd-column-reverse{flex-direction:column-reverse}[data-gene-ui-version=\"2.16.5\"] .pw-nowrap{flex-wrap:nowrap}[data-gene-ui-version=\"2.16.5\"] .pw-wrap{flex-wrap:wrap}[data-gene-ui-version=\"2.16.5\"] .pw-wrap-reverse{flex-wrap:wrap-reverse}[data-gene-ui-version=\"2.16.5\"] .jc-paper-start{justify-content:flex-start}[data-gene-ui-version=\"2.16.5\"] .jc-paper-end{justify-content:flex-end}[data-gene-ui-version=\"2.16.5\"] .jc-center{justify-content:center}[data-gene-ui-version=\"2.16.5\"] .jc-start{justify-content:start}[data-gene-ui-version=\"2.16.5\"] .jc-end{justify-content:end}[data-gene-ui-version=\"2.16.5\"] .jc-left{justify-content:left}[data-gene-ui-version=\"2.16.5\"] .jc-right{justify-content:right}[data-gene-ui-version=\"2.16.5\"] .jc-normal{justify-content:normal}[data-gene-ui-version=\"2.16.5\"] .jc-space-between{justify-content:space-between}[data-gene-ui-version=\"2.16.5\"] .jc-space-around{justify-content:space-around}[data-gene-ui-version=\"2.16.5\"] .jc-space-evenly{justify-content:space-evenly}[data-gene-ui-version=\"2.16.5\"] .jc-stretch{justify-content:stretch}[data-gene-ui-version=\"2.16.5\"] .jc-inherit{justify-content:inherit}[data-gene-ui-version=\"2.16.5\"] .jc-initial{justify-content:normal}[data-gene-ui-version=\"2.16.5\"] .jc-unset{justify-content:unset}[data-gene-ui-version=\"2.16.5\"] .ai-normal{align-items:normal}[data-gene-ui-version=\"2.16.5\"] .ai-stretch{align-items:stretch}[data-gene-ui-version=\"2.16.5\"] .ai-center{align-items:center}[data-gene-ui-version=\"2.16.5\"] .ai-start{align-items:start}[data-gene-ui-version=\"2.16.5\"] .ai-end{align-items:end}[data-gene-ui-version=\"2.16.5\"] .ai-paper-start{align-items:flex-start}[data-gene-ui-version=\"2.16.5\"] .ai-paper-end{align-items:flex-end}[data-gene-ui-version=\"2.16.5\"] .ai-self-start{align-items:self-start}[data-gene-ui-version=\"2.16.5\"] .ai-self-end{align-items:self-end}[data-gene-ui-version=\"2.16.5\"] .ai-baseline{align-items:baseline}[data-gene-ui-version=\"2.16.5\"] .ai-inherit{align-items:inherit}[data-gene-ui-version=\"2.16.5\"] .ai-initial{align-items:normal}[data-gene-ui-version=\"2.16.5\"] .ai-unset{align-items:unset}";
styleInject(css_248z);
const paperDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
const paperWraps = ['nowrap', 'wrap', 'wrap-reverse'];
const justifyContents = ['paper-start', 'paper-end', 'center', 'start', 'end', 'left', 'right', 'normal', 'space-between', 'space-around', 'space-evenly', 'stretch', 'inherit', 'initial', 'unset'];
const alignItems = ['stretch', 'normal', 'center', 'start', 'end', 'paper-start', 'paper-end', 'self-start', 'self-end', 'baseline', 'inherit', 'initial', 'unset'];
const cornersRadius = ['none', 'top-radius', 'bottom-radius', 'full-radius'];
const Paper = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
padding,
children,
className,
paperDirection,
paperWrap,
justifyContent,
alignItems,
cornerRadius,
shadow,
border,
isTransparent,
...restProps
} = _ref;
return /*#__PURE__*/React__default.createElement("div", _extends({
ref: ref,
className: "paper bg-".concat(isTransparent ? 'transparent' : 'color', "\n ").concat(border ? 'with-border' : '', "\n ").concat(className, "\n pd-").concat(paperDirection, "\n pw-").concat(paperWrap, "\n jc-").concat(justifyContent, "\n ai-").concat(alignItems, "\n ").concat(cornerRadius, "\n ").concat(shadow ? 'with-shadow' : ''),
style: {
padding: typeof padding === 'number' ? "".concat(padding / 10, "rem") : padding
}
}, restProps), children);
});
Paper.propTypes = {
/**
* Paper padding. Any padding value valid in css
*/
padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Additional className
*/
className: PropTypes.string,
/**
* Wrapping with paper anything passed as child. Any valid React node
*/
children: PropTypes.node,
/**
* Paper direction
*/
paperDirection: PropTypes.oneOf(paperDirections),
/**
* Paper wrapping
*/
paperWrap: PropTypes.oneOf(paperWraps),
/**
* Paper justify content
*/
justifyContent: PropTypes.oneOf(justifyContents),
/**
* Paper align items
*/
alignItems: PropTypes.oneOf(alignItems),
/**
* Paper corner radius
*/
cornerRadius: PropTypes.oneOf(cornersRadius),
/**
* Will add transparency to the Paper when set to "true"
*/
isTransparent: PropTypes.bool,
/**
* Will add borders to the Paper when set to "true"
*/
border: PropTypes.bool,
/**
* Will add shadow to the Paper when set to "true"
*/
shadow: PropTypes.bool
};
Paper.defaultProps = {
padding: 0,
className: '',
paperDirection: paperDirections[0],
paperWrap: paperWraps[0],
justifyContent: justifyContents[0],
alignItems: alignItems[0],
cornerRadius: cornersRadius[0],
shadow: false,
border: false,
isTransparent: false
};
export { alignItems, cornersRadius, Paper as default, justifyContents, paperDirections, paperWraps };