phx-react
Version:
PHX REACT
81 lines • 4.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CellContext = exports.INSERT_NEW_TABLE_COMMAND = void 0;
exports.TableContext = TableContext;
exports.InsertTableDialog = InsertTableDialog;
exports.TablePlugin = TablePlugin;
const tslib_1 = require("tslib");
const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
const table_1 = require("@lexical/table");
const lexical_1 = require("lexical");
const react_1 = require("react");
const React = tslib_1.__importStar(require("react"));
const invariant_1 = tslib_1.__importDefault(require("../shared/invariant"));
const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
const Dialog_1 = require("../ui/Dialog");
const TextInput_1 = tslib_1.__importDefault(require("../ui/TextInput"));
exports.INSERT_NEW_TABLE_COMMAND = (0, lexical_1.createCommand)('INSERT_NEW_TABLE_COMMAND');
exports.CellContext = (0, react_1.createContext)({
cellEditorConfig: null,
cellEditorPlugins: null,
set: () => {
// Empty
},
});
function TableContext({ children }) {
const [contextValue, setContextValue] = (0, react_1.useState)({
cellEditorConfig: null,
cellEditorPlugins: null,
});
return (React.createElement(exports.CellContext.Provider, { value: (0, react_1.useMemo)(() => ({
cellEditorConfig: contextValue.cellEditorConfig,
cellEditorPlugins: contextValue.cellEditorPlugins,
set: (cellEditorConfig, cellEditorPlugins) => {
setContextValue({ cellEditorConfig, cellEditorPlugins });
},
}), [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]) }, children));
}
function InsertTableDialog({ activeEditor, onClose, }) {
const [rows, setRows] = (0, react_1.useState)('5');
const [columns, setColumns] = (0, react_1.useState)('5');
const [isDisabled, setIsDisabled] = (0, react_1.useState)(true);
(0, react_1.useEffect)(() => {
const row = Number(rows);
const column = Number(columns);
if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
setIsDisabled(false);
}
else {
setIsDisabled(true);
}
}, [rows, columns]);
const onClick = () => {
activeEditor.dispatchCommand(table_1.INSERT_TABLE_COMMAND, {
columns,
rows,
});
onClose();
};
return (React.createElement(React.Fragment, null,
React.createElement(TextInput_1.default, { "data-test-id": 'table-modal-rows', label: 'Rows', onChange: setRows, placeholder: '# of rows (1-500)', type: 'number', value: rows }),
React.createElement(TextInput_1.default, { "data-test-id": 'table-modal-columns', label: 'Columns', onChange: setColumns, placeholder: '# of columns (1-50)', type: 'number', value: columns }),
React.createElement(Dialog_1.DialogActions, { "data-test-id": 'table-model-confirm-insert' },
React.createElement(Button_1.default, { disabled: isDisabled, onClick: onClick }, "Confirm"))));
}
function TablePlugin({ cellEditorConfig, children, }) {
const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
const cellContext = (0, react_1.useContext)(exports.CellContext);
(0, react_1.useEffect)(() => {
if (!editor.hasNodes([table_1.TableNode])) {
(0, invariant_1.default)(false, 'TablePlugin: TableNode is not registered on editor');
}
cellContext.set(cellEditorConfig, children);
return editor.registerCommand(exports.INSERT_NEW_TABLE_COMMAND, ({ columns, includeHeaders, rows }) => {
const tableNode = (0, table_1.$createTableNodeWithDimensions)(Number(rows), Number(columns), includeHeaders);
(0, lexical_1.$insertNodes)([tableNode]);
return true;
}, lexical_1.COMMAND_PRIORITY_EDITOR);
}, [cellContext, cellEditorConfig, children, editor]);
return null;
}
//# sourceMappingURL=TablePlugin.js.map