@onesy/ui-react
Version:
UI for React
144 lines (143 loc) • 7.02 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _styleReact = require("@onesy/style-react");
var _Surface = _interopRequireDefault(require("../Surface"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["tonal", "color", "size", "elevation", "header", "footer", "WrapperComponentProps", "TableComponent", "WrapperComponent", "Component", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: _objectSpread({
borderRadius: `${theme.shape.radius.unit * 2}px`,
overflow: 'hidden'
}, theme.typography.values.b2),
table: {
display: 'table',
width: '100%',
borderCollapse: 'collapse',
borderSpacing: '0px',
background: 'inherit'
},
wrapper: {
overflowX: 'auto',
background: 'inherit'
}
}), {
name: 'onesy-Table'
});
const Table = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
const $ = (0, _compilerRuntime.c)(14);
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTable) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
const {
tonal: t0,
color: t1,
size: t2,
elevation: t3,
header,
footer,
WrapperComponentProps,
TableComponent: t4,
WrapperComponent: t5,
Component: t6,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const tonal = t0 === undefined ? true : t0;
const color = t1 === undefined ? "themed" : t1;
const size = t2 === undefined ? "regular" : t2;
const elevation = t3 === undefined ? 1 : t3;
const TableComponent = t4 === undefined ? "table" : t4;
const WrapperComponent = t5 === undefined ? "div" : t5;
const Component = t6 === undefined ? "div" : t6;
const {
classes
} = useStyle();
const t7 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Table", theme) && ["onesy-Table-root", `onesy-Table-size-${size}`], className, classes.root]);
const t8 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Table", theme) && ["onesy-Table-wrapper"], WrapperComponentProps === null || WrapperComponentProps === void 0 ? void 0 : WrapperComponentProps.className, classes.wrapper]);
const t9 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Table", theme) && ["onesy-Table-table", header && "onesy-Table-header", footer && "onesy-Table-footer"], classes.table]);
const t10 = _react.default.Children.toArray(children).map(item => /*#__PURE__*/_react.default.cloneElement(item, {
tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
color: item.props.color !== undefined ? item.props.color : color,
size: item.props.size !== undefined ? item.props.size : size
}));
let t11;
if ($[0] !== TableComponent || $[1] !== t10 || $[2] !== t9) {
t11 = /*#__PURE__*/(0, _jsxRuntime.jsx)(TableComponent, {
className: t9,
children: t10
});
$[0] = TableComponent;
$[1] = t10;
$[2] = t9;
$[3] = t11;
} else {
t11 = $[3];
}
let t12;
if ($[4] !== WrapperComponent || $[5] !== WrapperComponentProps || $[6] !== t11 || $[7] !== t8) {
t12 = /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, _objectSpread(_objectSpread({}, WrapperComponentProps), {}, {
className: t8,
children: t11
}));
$[4] = WrapperComponent;
$[5] = WrapperComponentProps;
$[6] = t11;
$[7] = t8;
$[8] = t12;
} else {
t12 = $[8];
}
let t13;
if ($[9] !== color || $[10] !== footer || $[11] !== size || $[12] !== tonal) {
t13 = footer && /*#__PURE__*/_react.default.cloneElement(footer, {
tonal: footer.props.tonal !== undefined ? footer.props.tonal : tonal,
color: footer.props.color !== undefined ? footer.props.color : color,
size: footer.props.size !== undefined ? footer.props.size : size
});
$[9] = color;
$[10] = footer;
$[11] = size;
$[12] = tonal;
$[13] = t13;
} else {
t13 = $[13];
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
align: "unset",
justify: "unset",
fullWidth: true,
tonal: tonal,
color: color,
elevation: elevation,
Component: Surface,
AdditionalProps: {
Component
},
className: t7
}, other), {}, {
children: [header && /*#__PURE__*/_react.default.cloneElement(header, {
tonal: header.props.tonal !== undefined ? header.props.tonal : tonal,
color: header.props.color !== undefined ? header.props.color : color,
size: header.props.size !== undefined ? header.props.size : size
}), t12, t13]
}));
};
Table.displayName = 'onesy-Table';
var _default = exports.default = Table;