@udecode/plate-ui-table
Version:
Table UI for Plate
493 lines (449 loc) • 20 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _styled = require('styled-components');
var React = require('react');
var plateFloating = require('@udecode/plate-floating');
var plateTable = require('@udecode/plate-table');
var plateUiButton = require('@udecode/plate-ui-button');
var plateUiToolbar = require('@udecode/plate-ui-toolbar');
var plateCommon = require('@udecode/plate-common');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : 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;
};
return _extends.apply(this, arguments);
}
const CheckIcon = props => /*#__PURE__*/React__default["default"].createElement("svg", _extends({
"aria-hidden": "true",
viewBox: "0 0 24 24",
focusable: "false",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "none",
d: "M0 0h24v24H0z"
}), /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
}));
var _StyledCheckIcon = _styled__default["default"](CheckIcon).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledCheckIcon",
componentId: "sc-1ukuss6-0"
})({
"display": "block",
"width": "1rem"
});
const Check = ({
checked
}) => checked ? /*#__PURE__*/React__default["default"].createElement(_StyledCheckIcon, null) : /*#__PURE__*/React__default["default"].createElement(_StyledDiv$1, null);
const PlateTableBordersDropdownMenuContent = () => {
const {
getOnSelectTableBorder,
hasOuterBorders,
hasBottomBorder,
hasLeftBorder,
hasNoBorders,
hasRightBorder,
hasTopBorder
} = plateTable.useTableBordersDropdownMenuContentState();
return /*#__PURE__*/React__default["default"].createElement(_StyledDropdownMenuContent, {
side: "right",
align: "start",
sideOffset: 8,
$_css: [plateUiToolbar.floatingRootCss, {
"minWidth": "220px",
"paddingTop": "0.375rem",
"paddingBottom": "0.375rem",
"--tw-text-opacity": "1",
"color": "rgb(23 23 23 / var(--tw-text-opacity))"
}]
}, /*#__PURE__*/React__default["default"].createElement(_StyledDiv2, null, /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Item, {
onSelect: getOnSelectTableBorder('bottom')
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton$1, null, /*#__PURE__*/React__default["default"].createElement(Check, {
checked: hasBottomBorder
}), /*#__PURE__*/React__default["default"].createElement(plateTable.BorderBottomIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "Bottom Border"))), /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Item, {
onSelect: getOnSelectTableBorder('top')
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton2, null, /*#__PURE__*/React__default["default"].createElement(Check, {
checked: hasTopBorder
}), /*#__PURE__*/React__default["default"].createElement(plateTable.BorderTopIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "Top Border"))), /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Item, {
onSelect: getOnSelectTableBorder('left')
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton3, null, /*#__PURE__*/React__default["default"].createElement(Check, {
checked: hasLeftBorder
}), /*#__PURE__*/React__default["default"].createElement(plateTable.BorderLeftIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "Left Border"))), /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Item, {
onSelect: getOnSelectTableBorder('right')
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton4, null, /*#__PURE__*/React__default["default"].createElement(Check, {
checked: hasRightBorder
}), /*#__PURE__*/React__default["default"].createElement(plateTable.BorderRightIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "Right Border")))), /*#__PURE__*/React__default["default"].createElement(_StyledDiv3, null), /*#__PURE__*/React__default["default"].createElement(_StyledDiv4, null, /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Item, {
onSelect: getOnSelectTableBorder('none')
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton5, null, /*#__PURE__*/React__default["default"].createElement(Check, {
checked: hasNoBorders
}), /*#__PURE__*/React__default["default"].createElement(plateTable.BorderNoneIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "No Border"))), /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Item, {
onSelect: getOnSelectTableBorder('outer')
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton6, null, /*#__PURE__*/React__default["default"].createElement(Check, {
checked: hasOuterBorders
}), /*#__PURE__*/React__default["default"].createElement(plateTable.BorderOuterIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "Outside Borders")))));
};
var _StyledDiv$1 = _styled__default["default"]("div").withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledDiv",
componentId: "sc-1ukuss6-1"
})({
"height": "1rem",
"width": "1rem"
});
var _StyledDropdownMenuContent = _styled__default["default"](plateFloating.DropdownMenu.Content).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledDropdownMenuContent",
componentId: "sc-1ukuss6-2"
})(["", ""], p => p.$_css);
var _StyledDiv2 = _styled__default["default"]("div").withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledDiv2",
componentId: "sc-1ukuss6-3"
})({
"paddingLeft": "0.25rem",
"paddingRight": "0.25rem"
});
var _StyledPlateButton$1 = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton",
componentId: "sc-1ukuss6-4"
})(["", ""], plateUiButton.cssMenuItemButton);
var _StyledPlateButton2 = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton2",
componentId: "sc-1ukuss6-5"
})(["", ""], plateUiButton.cssMenuItemButton);
var _StyledPlateButton3 = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton3",
componentId: "sc-1ukuss6-6"
})(["", ""], plateUiButton.cssMenuItemButton);
var _StyledPlateButton4 = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton4",
componentId: "sc-1ukuss6-7"
})(["", ""], plateUiButton.cssMenuItemButton);
var _StyledDiv3 = _styled__default["default"]("div").withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledDiv3",
componentId: "sc-1ukuss6-8"
})({
"marginTop": "0.375rem",
"marginBottom": "0.375rem",
"height": "1px",
"width": "100%",
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(229 231 235 / var(--tw-bg-opacity))"
});
var _StyledDiv4 = _styled__default["default"]("div").withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledDiv4",
componentId: "sc-1ukuss6-9"
})({
"paddingLeft": "0.25rem",
"paddingRight": "0.25rem"
});
var _StyledPlateButton5 = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton5",
componentId: "sc-1ukuss6-10"
})(["", ""], plateUiButton.cssMenuItemButton);
var _StyledPlateButton6 = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton6",
componentId: "sc-1ukuss6-11"
})(["", ""], plateUiButton.cssMenuItemButton);
const getCssTableCellRoot = ({
hideBorder,
isHeader,
selected,
borders
} = {}) => [{
"position": "relative",
"overflow": "visible",
"borderStyle": "none",
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity))",
"padding": "0px"
}, hideBorder && {
"::before": {
"content": "var(--tw-content)",
"borderStyle": "none"
}
}, !hideBorder && [{
"::before": {
"content": "var(--tw-content)",
"position": "absolute",
"boxSizing": "border-box",
"userSelect": "none",
"--tw-content": "''"
}
}, borders && [borders.bottom && _styled.css(["::before{border-bottom:", "px ", " ", ";}"], borders.bottom.size, borders.bottom.style, borders.bottom.color), borders.right && _styled.css(["::before{border-right:", "px ", " ", ";}"], borders.right.size, borders.right.style, borders.right.color), borders.left && _styled.css(["::before{border-left:", "px ", " ", ";}"], borders.left.size, borders.left.style, borders.left.color), borders.top && _styled.css(["::before{border-top:", "px ", " ", ";}"], borders.top.size, borders.top.style, borders.top.color)]], isHeader && {
"textAlign": "left"
}, isHeader && _styled.css(["::before{background-color:rgb(244,245,247);}> *{margin:0;}"]), {
"::before": {
"content": "var(--tw-content)",
"height": "100%",
"width": "100%"
}
}, selected && {
"::before": {
"content": "var(--tw-content)",
"zIndex": "10",
"--tw-border-opacity": "1",
"borderColor": "rgb(59 130 246 / var(--tw-border-opacity))",
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(239 246 255 / var(--tw-bg-opacity))"
}
}];
const cssTableCellContent = [{
"position": "relative",
"zIndex": "20",
"boxSizing": "border-box",
"height": "100%",
"paddingLeft": "0.75rem",
"paddingRight": "0.75rem",
"paddingTop": "0.5rem",
"paddingBottom": "0.5rem"
}];
const cssTableCellResizable = [{
"position": "absolute",
"top": "0px",
"height": "100%",
"width": "100%",
"userSelect": "none"
}];
const getCssTableCellHandle = ({
side
}) => [{
"position": "absolute",
"zIndex": "30",
"width": "0.25rem",
"--tw-bg-opacity": "1",
"backgroundColor": "rgb(59 130 246 / var(--tw-bg-opacity))"
}, _styled.css(["top:-12px;", ":-1.5px;height:calc(100% + 12px);"], side)];
const PlateTableCellElement = props => {
const {
children,
hideBorder,
isHeader,
...rootProps
} = props;
const {
colIndex,
rowIndex,
readOnly,
selected,
hovered,
hoveredLeft,
rowSize,
borders
} = plateTable.useTableCellElementState(); // const [openDropdown, setOpenDropdown] = useState(false);
return /*#__PURE__*/React__default["default"].createElement(_StyledTableCellElementRoot, _extends({
asAlias: isHeader ? 'th' : 'td'
}, rootProps, {
$_css: getCssTableCellRoot({
borders,
hideBorder,
isHeader,
selected
})
}), /*#__PURE__*/React__default["default"].createElement(_StyledTableCellElementContent, {
style: {
minHeight: rowSize
}
}, children), /*#__PURE__*/React__default["default"].createElement(_StyledTableCellElementResizableWrapper, {
className: "group"
}, /*#__PURE__*/React__default["default"].createElement(plateTable.TableCellElement.Resizable, {
colIndex: colIndex,
rowIndex: rowIndex,
readOnly: readOnly
}), !readOnly && hovered && /*#__PURE__*/React__default["default"].createElement(_StyledTableCellElementHandle, {
$_css2: getCssTableCellHandle({
side: 'right'
})
}), !readOnly && hoveredLeft && /*#__PURE__*/React__default["default"].createElement(_StyledTableCellElementHandle2, {
$_css3: getCssTableCellHandle({
side: 'left'
})
})));
};
var _StyledTableCellElementRoot = _styled__default["default"](plateTable.TableCellElement.Root).withConfig({
displayName: "PlateTableCellElement___StyledTableCellElementRoot",
componentId: "sc-1lpt1jm-0"
})(["", ""], p => p.$_css);
var _StyledTableCellElementContent = _styled__default["default"](plateTable.TableCellElement.Content).withConfig({
displayName: "PlateTableCellElement___StyledTableCellElementContent",
componentId: "sc-1lpt1jm-1"
})(["", ""], cssTableCellContent);
var _StyledTableCellElementResizableWrapper = _styled__default["default"](plateTable.TableCellElement.ResizableWrapper).withConfig({
displayName: "PlateTableCellElement___StyledTableCellElementResizableWrapper",
componentId: "sc-1lpt1jm-2"
})(["", ""], cssTableCellResizable);
var _StyledTableCellElementHandle = _styled__default["default"](plateTable.TableCellElement.Handle).withConfig({
displayName: "PlateTableCellElement___StyledTableCellElementHandle",
componentId: "sc-1lpt1jm-3"
})(["", ""], p => p.$_css2);
var _StyledTableCellElementHandle2 = _styled__default["default"](plateTable.TableCellElement.Handle).withConfig({
displayName: "PlateTableCellElement___StyledTableCellElementHandle2",
componentId: "sc-1lpt1jm-4"
})(["", ""], p => p.$_css3);
const PlateTableCellHeaderElement = props => {
return /*#__PURE__*/React__default["default"].createElement(PlateTableCellElement, _extends({}, props, {
isHeader: true
}));
};
const PlateTablePopover = ({
children,
...props
}) => {
const element = plateCommon.useElement();
return /*#__PURE__*/React__default["default"].createElement(_StyledElementPopover, _extends({
content: /*#__PURE__*/React__default["default"].createElement(_StyledDiv, null, /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Root, null, /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Trigger, {
asChild: true
}, /*#__PURE__*/React__default["default"].createElement(_StyledPlateButton, {
type: "button",
"aria-label": "Borders"
}, /*#__PURE__*/React__default["default"].createElement(_StyledBorderAllIcon, null), /*#__PURE__*/React__default["default"].createElement("div", null, "Borders"))), /*#__PURE__*/React__default["default"].createElement(plateFloating.DropdownMenu.Portal, null, /*#__PURE__*/React__default["default"].createElement(PlateTableBordersDropdownMenuContent, null))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(_StyledRemoveNodeButton, {
element: element,
contentEditable: false,
$_css: [plateUiButton.cssMenuItemButton, {
"width": "10rem",
"justifyContent": "flex-start"
}]
}, /*#__PURE__*/React__default["default"].createElement("div", null, "Delete"))))
}, props), children);
};
var _StyledDiv = _styled__default["default"]("div").withConfig({
displayName: "PlateTablePopover___StyledDiv",
componentId: "sc-17z6fo8-0"
})({
"minWidth": "140px",
"paddingLeft": "0.25rem",
"paddingRight": "0.25rem",
"paddingTop": "0.375rem",
"paddingBottom": "0.375rem"
});
var _StyledPlateButton = _styled__default["default"](plateUiButton.PlateButton).withConfig({
displayName: "PlateTablePopover___StyledPlateButton",
componentId: "sc-17z6fo8-1"
})({
"width": "100%",
"justifyContent": "flex-start"
});
var _StyledBorderAllIcon = _styled__default["default"](plateTable.BorderAllIcon).withConfig({
displayName: "PlateTablePopover___StyledBorderAllIcon",
componentId: "sc-17z6fo8-2"
})({
"width": "1rem"
});
var _StyledRemoveNodeButton = _styled__default["default"](plateUiButton.RemoveNodeButton).withConfig({
displayName: "PlateTablePopover___StyledRemoveNodeButton",
componentId: "sc-17z6fo8-3"
})(["", ""], p => p.$_css);
var _StyledElementPopover = _styled__default["default"](plateFloating.ElementPopover).withConfig({
displayName: "PlateTablePopover___StyledElementPopover",
componentId: "sc-17z6fo8-4"
})(["", ""], plateUiToolbar.floatingRootCss);
const PlateTableElement = props => {
const {
as,
children,
...rootProps
} = props;
const {
colSizes,
isSelectingCell,
minColumnWidth,
marginLeft
} = plateTable.useTableElementState();
return /*#__PURE__*/React__default["default"].createElement(PlateTablePopover, null, /*#__PURE__*/React__default["default"].createElement(plateTable.TableElement.Wrapper, {
style: {
paddingLeft: marginLeft
}
}, /*#__PURE__*/React__default["default"].createElement(_StyledTableElementRoot, _extends({}, rootProps, {
$_css: [{
"marginTop": "1rem",
"marginBottom": "1rem",
"marginLeft": "1px",
"marginRight": "0px",
"display": "table",
"height": "1px",
"width": "100%",
"tableLayout": "fixed",
"borderCollapse": "collapse"
}, isSelectingCell && _styled.css(["*::selection{background:none;}"])]
}), /*#__PURE__*/React__default["default"].createElement(plateTable.TableElement.ColGroup, null, colSizes.map((width, index) => /*#__PURE__*/React__default["default"].createElement(plateTable.TableElement.Col, {
key: index,
style: {
minWidth: minColumnWidth,
width: width || undefined
}
}))), /*#__PURE__*/React__default["default"].createElement(_StyledTableElementTBody, null, children))));
};
var _StyledTableElementRoot = _styled__default["default"](plateTable.TableElement.Root).withConfig({
displayName: "PlateTableElement___StyledTableElementRoot",
componentId: "sc-1ibsave-0"
})(["", ""], p => p.$_css);
var _StyledTableElementTBody = _styled__default["default"](plateTable.TableElement.TBody).withConfig({
displayName: "PlateTableElement___StyledTableElementTBody",
componentId: "sc-1ibsave-1"
})({
"minWidth": "100%"
});
const PlateTableRowElement = props => {
const {
as,
children,
hideBorder,
...rootProps
} = props;
return /*#__PURE__*/React__default["default"].createElement(_StyledTableRowElementRoot, _extends({}, rootProps, {
$_css: [{
"height": "100%"
}, hideBorder && {
"borderStyle": "none"
}]
}), children);
};
var _StyledTableRowElementRoot = _styled__default["default"](plateTable.TableRowElement.Root).withConfig({
displayName: "PlateTableRowElement___StyledTableRowElementRoot",
componentId: "sc-16lthnv-0"
})(["", ""], p => p.$_css);
const TableToolbarButton = ({
id,
transform,
header,
...props
}) => {
const editor = plateCommon.usePlateEditorState(plateCommon.useEventPlateId(id));
const type = plateCommon.getPluginType(editor, plateTable.ELEMENT_TABLE);
const active = !!(editor !== null && editor !== void 0 && editor.selection) && plateCommon.someNode(editor, {
match: {
type
}
});
return /*#__PURE__*/React__default["default"].createElement(plateUiToolbar.ToolbarButton, _extends({
active: active,
onClick: e => {
e.preventDefault();
e.stopPropagation();
transform(editor, {
header
});
plateCommon.focusEditor(editor);
}
}, props));
};
exports.PlateTableBordersDropdownMenuContent = PlateTableBordersDropdownMenuContent;
exports.PlateTableCellElement = PlateTableCellElement;
exports.PlateTableCellHeaderElement = PlateTableCellHeaderElement;
exports.PlateTableElement = PlateTableElement;
exports.PlateTablePopover = PlateTablePopover;
exports.PlateTableRowElement = PlateTableRowElement;
exports.TableToolbarButton = TableToolbarButton;
exports.cssTableCellContent = cssTableCellContent;
exports.cssTableCellResizable = cssTableCellResizable;
exports.getCssTableCellHandle = getCssTableCellHandle;
exports.getCssTableCellRoot = getCssTableCellRoot;
//# sourceMappingURL=index.js.map