@react-page-plugins/slate-table
Version:
react-page plugin for slate table
20 lines • 2.47 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from 'styled-components';
import { Editable } from 'slate-react';
var controlStyle = function (_a) {
var _b = _a.headerColor, headerColor = _b === void 0 ? '#fff' : _b, _c = _a.evenColor, evenColor = _c === void 0 ? '#fff' : _c, _d = _a.oddColor, oddColor = _d === void 0 ? '#fff' : _d, _e = _a.columnWidth, columnWidth = _e === void 0 ? [] : _e;
return "\n & .table {\n & .table-row:nth-of-type(even) {\n background-color: " + evenColor + ";\n }\n & .table-row:nth-of-type(odd) {\n background-color: " + oddColor + ";\n }\n & .table-row:first-child {\n background-color: " + headerColor + ";\n }\n & .table-row {\n width: 100% !important;\n " + columnWidth.map(function (w, n) {
return w
? "\n & .table-cell:nth-child(" + (n + 1) + ") { width:" + (n === 0 ? w : w - columnWidth[n - 1]) + "%; }\n "
: '';
}) + "\n }\n }\n";
};
var commonStyle = "\n & .table {\n width: 100%;\n background: #fff;\n margin: 1em 0em;\n border: 1px solid rgba(34, 36, 38, 0.15);\n -webkit-box-shadow: none;\n box-shadow: none;\n border-radius: 0.28571429rem;\n text-align: left;\n color: rgba(0, 0, 0, 0.87);\n font-size: 0.9em;\n flex-wrap: wrap;\n\n & .table-row {\n display: flex;\n\n & > .table-cell {\n padding: 0.78571429em 0.78571429em;\n border-top: 1px solid rgba(34, 36, 38, 0.1);\n border-left: 1px solid rgba(34, 36, 38, 0.1);\n border-right: 1px solid rgba(34, 36, 38, 0.1);\n box-sizing: border-box;\n // flex-grow: 1;\n // width: 10px;\n overflow: hidden;\n }\n }\n }\n";
export var EditableEdit = styled(Editable)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), commonStyle, controlStyle);
export var EditableReadOnly = styled(Editable)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), commonStyle, controlStyle);
export default { EditableEdit: EditableEdit, EditableReadOnly: EditableReadOnly };
var templateObject_1, templateObject_2;
//# sourceMappingURL=StyledEditable.js.map