@geezee/react-ui
Version:
Modern and minimalist React UI library.
45 lines (40 loc) • 17.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import RcTable from '@cfxjs/rc-table';
import React from 'react';
import useTheme from '../styles/use-theme';
import ExpandIcon from './ExpandIcon';
var defaultProps = {
variant: 'solid'
};
function Table(_ref) {
var variant = _ref.variant,
children = _ref.children,
className = _ref.className,
props = _objectWithoutProperties(_ref, ["variant", "children", "className"]);
var theme = useTheme();
var expressiveness = theme.expressiveness,
palette = theme.palette,
layout = theme.layout;
if (props.expandable && !props.expandable.expandIcon) {
props.expandable.expandIcon = ExpandIcon;
}
var _styles$className = {
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
id: "845639194",
dynamic: [palette.cNeutral8, palette.cNeutral7, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, layout.gap, layout.gapHalf, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral8, palette.cNeutral5, palette.cNeutral0, palette.cNeutral0, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, palette.cNeutral8, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, palette.cNeutral2, layout.gap, layout.gapHalf, layout.gap, layout.gapHalf, layout.gapQuarter, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, expressiveness.L1, expressiveness.L1, expressiveness.L1, expressiveness.L1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, layout.gap, layout.gapHalf, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, layout.gap, layout.gapHalf, expressiveness.L1, expressiveness.cLineStyle1, layout.gapHalf, expressiveness.R2, palette.cNeutral0, palette.cTheme0, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral1, expressiveness.L1, expressiveness.cLineStyle1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5]
}, ".table.__jsx-style-dynamic-selector{background-color:".concat(palette.cNeutral8, ";font-size:1rem;color:").concat(palette.cNeutral7, ";line-height:1.5;box-sizing:border-box;position:relative;}.table-rtl.__jsx-style-dynamic-selector{direction:rtl;}.table.__jsx-style-dynamic-selector table{border-spacing:0px;width:100%;}.table.__jsx-style-dynamic-selector th,.table.__jsx-style-dynamic-selector td{font-weight:normal;padding:0;position:relative;border:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";border-top:0;border-left:0;border-right:0;-webkit-transition:box-shadow 0.3s;transition:box-shadow 0.3s;padding:").concat(layout.gap, " calc((").concat(layout.gapHalf, " / 2) * 3);box-sizing:border-box;white-space:normal;word-break:break-word;}.table-rtl.table.__jsx-style-dynamic-selector th,.table-rtl.table.__jsx-style-dynamic-selector td{border-left:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";border-right:0;}.table.__jsx-style-dynamic-selector .table-cell-fix-left,.table.__jsx-style-dynamic-selector .table-cell-fix-right{z-index:1;}.table.__jsx-style-dynamic-selector .table-cell-fix-right:last-child:not(&-fix-sticky){border-right-color:transparent;}.table.table-rtl.__jsx-style-dynamic-selector .table-cell-fix-right:last-child{border-right-color:").concat(palette.cNeutral2, ";}.table.table-rtl.__jsx-style-dynamic-selector .table-cell-fix-left:last-child{border-left-color:transparent;}.table.table-rtl.__jsx-style-dynamic-selector .table-cell-fix-left-first{box-shadow:1px 0 0 ").concat(palette.cNeutral2, ";}.table.__jsx-style-dynamic-selector .table-cell-fix-left-first::after,.table.__jsx-style-dynamic-selector .table-cell-fix-left-last::after{pointer-events:none;content:'';-webkit-transition:box-shadow 0.3s;transition:box-shadow 0.3s;position:absolute;top:0;bottom:-1px;width:1.4286rem;right:-1px;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}.table.__jsx-style-dynamic-selector .table-cell-fix-right-first,.table.__jsx-style-dynamic-selector .table-cell-fix-right-last{box-shadow:-1px 0 0 ").concat(palette.cNeutral2, ";}.table.table-rtl.__jsx-style-dynamic-selector .table-cell-fix-right-first,.table.table-rtl.__jsx-style-dynamic-selector .table-cell-fix-right-last{box-shadow:none;}.table.__jsx-style-dynamic-selector .table-cell.table-cell-fix-right-first::after,.table.__jsx-style-dynamic-selector .table-cell.table-cell-fix-right-last::after{pointer-events:none;content:'';-webkit-transition:box-shadow 0.3s;transition:box-shadow 0.3s;position:absolute;top:0;bottom:-1px;width:1.4286rem;left:-1px;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis.table-cell-fix-left-first,.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis.table-cell-fix-left-last,.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis.table-cell-fix-right-first .table-cell.table-cell-ellipsis.table-cell-fix-right-last{overflow:visible;}.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis.table-cell-fix-left-first .table-cell-content,.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis.table-cell-fix-left-last .table-cell-content,.table.__jsx-style-dynamic-selector .table-cell.table-cell-ellipsis.table-cell-fix-right-first .table-cell.table-cell-ellipsis.table-cell-fix-right-last .table-cell-content{overflow:hidden;text-overflow:ellipsis;display:block;}.table.table-ping-left.__jsx-style-dynamic-selector .table-cell-fix-left-first::after,.table.table-ping-left.__jsx-style-dynamic-selector .table-cell-fix-left-last::after{box-shadow:inset 10px 0 8px -8px ").concat(palette.cNeutral2, ";}.table.table-ping-right.__jsx-style-dynamic-selector .table-cell-fix-right-first::after,.table.table-ping-right.__jsx-style-dynamic-selector .table-cell-fix-right-last::after{box-shadow:inset -10px 0 8px -8px ").concat(palette.cNeutral2, ";}.table.__jsx-style-dynamic-selector .table-expand-icon-col{width:4.2857rem;}.table.__jsx-style-dynamic-selector .table-row-expand-icon-cell{text-align:left;}.table.__jsx-style-dynamic-selector thead td,.table.__jsx-style-dynamic-selector thead th{text-align:left;background:").concat(palette.cNeutral8, ";color:").concat(palette.cNeutral5, ";}.table.variant-line.__jsx-style-dynamic-selector thead td,.table.variant-line.__jsx-style-dynamic-selector thead th{background:").concat(palette.cNeutral0, ";}.table.__jsx-style-dynamic-selector thead .table-cell-scrollbar::after{position:absolute;content:'';top:0;bottom:0;left:-1px;width:1px;background:").concat(palette.cNeutral0, ";}.table-rtl.table.__jsx-style-dynamic-selector thead .table-cell-scrollbar::after{right:-1px;left:auto;}.table.__jsx-style-dynamic-selector .table-header{border:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";border-right:0;border-bottom:0;}.table.__jsx-style-dynamic-selector .table-placeholder{text-align:left;}.table.__jsx-style-dynamic-selector tbody tr td,.table.__jsx-style-dynamic-selector tbody tr th{background:").concat(palette.cNeutral8, ";}.table.__jsx-style-dynamic-selector .table-content{border-bottom:0;}.table.__jsx-style-dynamic-selector .table-body{border:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";border-right:0;border-bottom:0;border-top:0;}.table.table-fixed-column.__jsx-style-dynamic-selector .table-body::after{content:'';position:absolute;right:0;top:0;bottom:0;border-right:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";z-index:1;}.table.__jsx-style-dynamic-selector .table-expanded-row .table-cell{box-shadow:inset 0 8px 8px -8px ").concat(palette.cNeutral2, ";}.table.__jsx-style-dynamic-selector .table-expanded-row-fixed{box-sizing:border-box;margin:-").concat(layout.gap, " -").concat(layout.gapHalf, ";padding:").concat(layout.gap, " ").concat(layout.gapHalf, ";margin-right:-calc((").concat(layout.gapQuarter, " * 5) / 2);}.table.__jsx-style-dynamic-selector .table-expanded-row-fixed::after{content:'';position:absolute;width:0;top:0;bottom:0;right:1px;border-right:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";}.table.__jsx-style-dynamic-selector .table-row-expand-icon{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;float:left;box-sizing:border-box;width:1rem;height:1rem;padding:0;color:inherit;line-height:1rem;vertical-align:-2px;border:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " currentColor;cursor:pointer;outline:none;-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.table.__jsx-style-dynamic-selector .table-row-expand-icon:hover,.table.__jsx-style-dynamic-selector .table-row-expand-icon:focus,.table.__jsx-style-dynamic-selector .table-row-expand-icon:active{border-color:currentColor;}.table.__jsx-style-dynamic-selector .table-row-expand-icon::before,.table.__jsx-style-dynamic-selector .table-row-expand-icon::after{position:absolute;background:currentColor;-webkit-transition:-webkit-transform 0.3s ease-out;-webkit-transition:transform 0.3s ease-out;transition:transform 0.3s ease-out;content:'';}.table.__jsx-style-dynamic-selector .table-row-expand-icon::before{top:calc(50% - (").concat(expressiveness.L1, " / 2));right:calc(1rem / 4);left:calc(1rem / 4);height:").concat(expressiveness.L1, ";}.table.__jsx-style-dynamic-selector .table-row-expand-icon::after{top:calc(1rem / 4);bottom:calc(1rem / 4);left:calc(50% - (").concat(expressiveness.L1, " / 2));width:").concat(expressiveness.L1, ";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.table.__jsx-style-dynamic-selector .table-row-expand-icon.table-row-expand-icon-collapsed::before{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);}.table.__jsx-style-dynamic-selector .table-row-expand-icon.table-row-expand-icon-collapsed::after{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}.table.__jsx-style-dynamic-selector .table-row-expand-icon.table-row-expand-icon-spaced{background:transparent;border:0;visibility:hidden;}.table.__jsx-style-dynamic-selector .table-row-expand-icon.table-row-expand-icon-spaced::before,.table.__jsx-style-dynamic-selector .table-row-expand-icon.table-row-expand-icon-spaced::after{display:none;content:none;}.table.__jsx-style-dynamic-selector .table-title{border:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";border-bottom:0;padding:").concat(layout.gap, " ").concat(layout.gapHalf, ";}.table.__jsx-style-dynamic-selector .table-footer{border:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";border-top:0;padding:").concat(layout.gap, " ").concat(layout.gapHalf, ";}.table.__jsx-style-dynamic-selector tfoot td{background:#fff;}.table.__jsx-style-dynamic-selector .table-sticky-header{position:-webkit-sticky;position:sticky;z-index:2;}.table.__jsx-style-dynamic-selector .table-sticky-scroll{position:fixed;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " #f3f3f3;opacity:0.6;-webkit-transition:-webkit-transform 0.1s ease-in 0s;-webkit-transition:transform 0.1s ease-in 0s;transition:transform 0.1s ease-in 0s;z-index:2;}.table.__jsx-style-dynamic-selector .table-sticky-scroll:hover{-webkit-transform:scaleY(1.2);-ms-transform:scaleY(1.2);transform:scaleY(1.2);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;}.table.__jsx-style-dynamic-selector .table-sticky-scroll-bar{height:").concat(layout.gapHalf, ";border-radius:").concat(expressiveness.R2, ";background-color:#bbb;}.table.__jsx-style-dynamic-selector .table-sticky-scroll-bar:hover{background-color:#999;}.table.__jsx-style-dynamic-selector .table-sticky-scroll-bar-active{background-color:#999;}.table.variant-solid.__jsx-style-dynamic-selector *{border:transparent;}.table.variant-solid.__jsx-style-dynamic-selector tbody tr.table-row-even th,.table.variant-solid.__jsx-style-dynamic-selector tbody tr.table-row-even td{background-color:").concat(palette.cNeutral0, ";}.table.variant-solid.__jsx-style-dynamic-selector tbody tr:hover td{background-color:").concat(palette.cTheme0, ";}.table.variant-line.__jsx-style-dynamic-selector tr th{border-top:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral1, ";}.table.variant-line.__jsx-style-dynamic-selector tr th:first-child{border-left:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral1, ";}.table.variant-line.__jsx-style-dynamic-selector tr th:last-child{border-right:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral1, ";}.table.variant-line.__jsx-style-dynamic-selector tbody tr td{border-top:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " transparent;}.table.variant-line.__jsx-style-dynamic-selector tr td:first-child{border-left:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";}.table.variant-line.__jsx-style-dynamic-selector tr td:last-child{border-right:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cNeutral2, ";}.table.variant-line.__jsx-style-dynamic-selector tbody tr:hover td{border-top:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cTheme5, ";border-bottom:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cTheme5, ";}.table.variant-line.__jsx-style-dynamic-selector tbody tr:hover td:first-child{border-left:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cTheme5, ";}.table.variant-line.__jsx-style-dynamic-selector tbody tr:hover td:last-child{border-right:").concat(expressiveness.L1, " ").concat(expressiveness.cLineStyle1, " ").concat(palette.cTheme5, ";}")),
className: _JSXStyle.dynamic([["845639194", [palette.cNeutral8, palette.cNeutral7, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, layout.gap, layout.gapHalf, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral2, palette.cNeutral8, palette.cNeutral5, palette.cNeutral0, palette.cNeutral0, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, palette.cNeutral8, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, palette.cNeutral2, layout.gap, layout.gapHalf, layout.gap, layout.gapHalf, layout.gapQuarter, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, expressiveness.L1, expressiveness.L1, expressiveness.L1, expressiveness.L1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, layout.gap, layout.gapHalf, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, layout.gap, layout.gapHalf, expressiveness.L1, expressiveness.cLineStyle1, layout.gapHalf, expressiveness.R2, palette.cNeutral0, palette.cTheme0, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral1, expressiveness.L1, expressiveness.cLineStyle1, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, palette.cNeutral2, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5, expressiveness.L1, expressiveness.cLineStyle1, palette.cTheme5]]])
},
innerStyleClassName = _styles$className.className,
styles = _styles$className.styles;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RcTable, _extends({
prefixCls: "table",
className: "".concat(className, " ").concat(innerStyleClassName, " ").concat(variant === 'solid' ? 'variant-solid' : 'variant-line')
}, props), children), styles);
}
Table.defaultProps = defaultProps;
Table.Column = RcTable.Column;
Table.ColumnGroup = RcTable.ColumnGroup;
export default Table;