@lowdefy/blocks-aggrid 5.4.0 → 5.5.1

package/dist/cellRenderers/SelectorCell.js

@@ -0,0 +1,192 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useMemo } from 'react';
+import { ConfigProvider, Select, Tag } from 'antd';
+import { renderHtml } from '@lowdefy/block-utils';
+import { get, type } from '@lowdefy/helpers';
+import getSelectorOptions from '@lowdefy/blocks-antd/getSelectorOptions.js';
+import getSelectedIndex from '@lowdefy/blocks-antd/getSelectedIndex.js';
+import getContrastTextColor from '@lowdefy/blocks-antd/getContrastTextColor.js';
+import getOptionColorStyle from '@lowdefy/blocks-antd/getOptionColorStyle.js';
+import NullCell from './NullCell.js';
+const Option = Select.Option;
+// Maps an option index (the antd value) back to the real option value, the same way the
+// Selector / MultipleSelector blocks do.
+function indexToValue(options, index) {
+    const opt = options[index];
+    return type.isPrimitive(opt) ? opt : opt.value;
+}
+// Keep the dropdown open when clicking a tag's close icon.
+function preventMouseDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+function SelectorCell(params) {
+    const { value, data, cellConfig, methods } = params;
+    const multiple = cellConfig?.type === 'multipleSelector';
+    // Reuse the block option-normalisation util. Static options only (no per-cell `setData`),
+    // so call the pure helper directly rather than the block's `useSelectorOptions` hook.
+    const options = useMemo(()=>getSelectorOptions({
+            properties: cellConfig ?? {}
+        }), [
+        cellConfig
+    ]);
+    if (!type.isArray(options) || options.length === 0) return /*#__PURE__*/ React.createElement(NullCell, null);
+    // Display grid is one-way: drive the displayed value from the cell value. The chosen value is
+    // written back into ag-grid's own row node (not the Lowdefy block value) for immediate feedback
+    // that survives re-renders; the app persists via the event chain.
+    const selected = getSelectedIndex(value, options, {
+        properties: cellConfig,
+        multiple
+    });
+    // Variant handling mirrors the Selector / MultipleSelector blocks: `solid` is not a real antd
+    // Select variant — render an outlined frame and (for single-select) fill it via ConfigProvider;
+    // `bordered: false` maps to the borderless variant.
+    const isSolid = cellConfig.variant === 'solid';
+    let antdVariant = cellConfig.variant;
+    if (isSolid) antdVariant = 'outlined';
+    if (cellConfig.bordered === false) antdVariant = 'borderless';
+    const isOutline = antdVariant === 'outlined';
+    // Single-select: tint the whole control with the selected option's colour.
+    const selectedOption = multiple || type.isNone(selected) ? undefined : options[selected];
+    const selectedColor = type.isObject(selectedOption) ? selectedOption.color : undefined;
+    let selectTheme;
+    if (selectedColor) {
+        const token = {
+            colorPrimary: selectedColor,
+            colorBorder: selectedColor
+        };
+        if (isSolid) token.colorBgContainer = selectedColor;
+        selectTheme = {
+            token
+        };
+    }
+    function onChange(index) {
+        let newValue;
+        if (multiple) {
+            newValue = (type.isArray(index) ? index : []).map((i)=>indexToValue(options, i));
+        } else {
+            newValue = type.isNone(index) ? undefined : indexToValue(options, index);
+        }
+        const colId = params.column?.getColId?.();
+        if (params.node && colId) params.node.setDataValue(colId, newValue);
+        if (type.isString(cellConfig.eventName)) {
+            methods?.triggerEvent?.({
+                name: cellConfig.eventName,
+                event: {
+                    row: data,
+                    value,
+                    newValue
+                }
+            });
+        }
+    }
+    // Colour the selected label (single-select), following the block: solid fill → contrast text.
+    function labelRender(labelProps) {
+        const opt = options[labelProps.value];
+        const color = type.isPrimitive(opt) ? undefined : opt?.color;
+        if (type.isNone(color)) return labelProps.label;
+        const textColor = isSolid ? getContrastTextColor(color) ?? '#fff' : color;
+        return /*#__PURE__*/ React.createElement("span", {
+            style: {
+                color: textColor
+            }
+        }, labelProps.label);
+    }
+    // Colour the selected tags (multi-select), following the block: a hex colour gets an explicit
+    // solid/outlined style (dark-mode safe), an antd preset name is handed to antd's Tag `color`.
+    function tagRender(tagProps) {
+        const { label, value: idx, closable, onClose } = tagProps;
+        const opt = options[idx];
+        const color = type.isPrimitive(opt) ? undefined : opt?.color;
+        const contrast = type.isNone(color) ? undefined : getContrastTextColor(color);
+        const colorStyle = contrast ? getOptionColorStyle({
+            color,
+            isOutline
+        }) : {};
+        return /*#__PURE__*/ React.createElement(Tag, {
+            closable: closable,
+            onClose: onClose,
+            onMouseDown: preventMouseDown,
+            color: contrast || type.isNone(color) ? undefined : color,
+            style: {
+                marginInlineEnd: 4,
+                ...colorStyle
+            }
+        }, label);
+    }
+    const hasColouredOptions = options.some((opt)=>!type.isPrimitive(opt) && opt.color);
+    return(// The wrapper must fill the cell — the antd cell layout is flex, so without an explicit width
+    // the Select shrinks to its content instead of spanning the column. Synthetic stopPropagation
+    // keeps a stray click from bubbling within React; ag-grid uses native listeners, so a grid that
+    // also wires onCellClick / onRowClick may still see selector clicks (same as the buttons cell).
+    /*#__PURE__*/ React.createElement("div", {
+        style: {
+            width: '100%'
+        },
+        onClick: (e)=>e.stopPropagation()
+    }, /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: selectTheme
+    }, /*#__PURE__*/ React.createElement(Select, {
+        style: {
+            width: '100%',
+            minWidth: 'min(150px, 100%)'
+        },
+        size: cellConfig.size ?? 'small',
+        variant: antdVariant,
+        mode: multiple ? 'multiple' : undefined,
+        value: selected,
+        onChange: onChange,
+        allowClear: cellConfig.allowClear !== false,
+        showSearch: get(cellConfig, 'showSearch', {
+            default: true
+        }),
+        showArrow: cellConfig.showArrow,
+        autoFocus: cellConfig.autoFocus,
+        maxTagCount: cellConfig.maxTagCount,
+        autoClearSearchValue: cellConfig.autoClearSearchValue,
+        placeholder: cellConfig.placeholder,
+        disabled: cellConfig.disabled === true,
+        labelRender: multiple ? undefined : labelRender,
+        tagRender: multiple && hasColouredOptions ? tagRender : undefined,
+        // Render the dropdown to the body so it is not clipped by the ag-grid cell.
+        getPopupContainer: ()=>document.body,
+        filterOption: (input, option)=>(option.filterstring || option.children.props.html || '').toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }, options.map((opt, i)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Option, {
+            key: i,
+            value: `${i}`
+        }, renderHtml({
+            html: `${opt}`,
+            methods
+        })) : /*#__PURE__*/ React.createElement(Option, {
+            key: i,
+            value: `${i}`,
+            disabled: opt.disabled,
+            filterstring: opt.filterString,
+            style: {
+                ...opt.style,
+                ...opt.color ? {
+                    color: opt.color
+                } : {}
+            }
+        }, type.isNone(opt.label) ? renderHtml({
+            html: `${opt.value}`,
+            methods
+        }) : renderHtml({
+            html: opt.label,
+            methods
+        })))))));
+}
+export default SelectorCell;

package/dist/cellRenderers/SwitchCell.js

@@ -0,0 +1,74 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { ConfigProvider, Switch } from 'antd';
+import { serializer, type } from '@lowdefy/helpers';
+function normaliseIcon(icon) {
+    const copy = serializer.copy(icon);
+    return type.isString(copy) ? {
+        name: copy
+    } : copy;
+}
+function SwitchCell(params) {
+    const { value, data, cellConfig, methods, components } = params;
+    const Icon = components?.Icon;
+    function onChange(newValue) {
+        const colId = params.column?.getColId?.();
+        if (params.node && colId) params.node.setDataValue(colId, newValue);
+        if (type.isString(cellConfig.eventName)) {
+            methods?.triggerEvent?.({
+                name: cellConfig.eventName,
+                event: {
+                    row: data,
+                    value,
+                    newValue
+                }
+            });
+        }
+    }
+    const checkedIcon = normaliseIcon(cellConfig.checkedIcon);
+    const uncheckedIcon = normaliseIcon(cellConfig.uncheckedIcon);
+    function children(text, icon, key) {
+        if (!type.isNone(text)) return /*#__PURE__*/ React.createElement("span", null, text);
+        if (icon && Icon) return /*#__PURE__*/ React.createElement(Icon, {
+            blockId: `switchcell_${key}`,
+            events: {},
+            properties: icon
+        });
+        return undefined;
+    }
+    const switchEl = /*#__PURE__*/ React.createElement(Switch, {
+        checked: !!value,
+        size: cellConfig.size ?? 'small',
+        disabled: cellConfig.disabled === true,
+        autoFocus: cellConfig.autoFocus,
+        checkedChildren: children(cellConfig.checkedText, checkedIcon, 'checked'),
+        unCheckedChildren: children(cellConfig.uncheckedText, uncheckedIcon, 'unchecked'),
+        onChange: onChange
+    });
+    return(// Synthetic stopPropagation keeps a stray click from bubbling within React (see SelectorCell).
+    /*#__PURE__*/ React.createElement("div", {
+        onClick: (e)=>e.stopPropagation()
+    }, cellConfig.color ? /*#__PURE__*/ React.createElement(ConfigProvider, {
+        theme: {
+            components: {
+                Switch: {
+                    colorPrimary: cellConfig.color
+                }
+            }
+        }
+    }, switchEl) : switchEl));
+}
+export default SwitchCell;

package/dist/cellRenderers/TextInputCell.js

@@ -0,0 +1,66 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useState, useEffect } from 'react';
+import { Input } from 'antd';
+import { type } from '@lowdefy/helpers';
+function TextInputCell(params) {
+    const { value, data, cellConfig, methods } = params;
+    // Keep the typed text local: firing the change event per keystroke would re-render the grid,
+    // remount the cell and lose focus. Commit once on blur / Enter instead. Resync when the row
+    // value changes externally (e.g. after the app persists).
+    const [text, setText] = useState(value ?? '');
+    useEffect(()=>setText(value ?? ''), [
+        value
+    ]);
+    function commit() {
+        if ((value ?? '') === text) return;
+        const colId = params.column?.getColId?.();
+        if (params.node && colId) params.node.setDataValue(colId, text);
+        if (type.isString(cellConfig.eventName)) {
+            methods?.triggerEvent?.({
+                name: cellConfig.eventName,
+                event: {
+                    row: data,
+                    value,
+                    newValue: text
+                }
+            });
+        }
+    }
+    return(// Width fills the cell; synthetic stopPropagation keeps clicks from bubbling (see SelectorCell).
+    /*#__PURE__*/ React.createElement("div", {
+        style: {
+            width: '100%'
+        },
+        onClick: (e)=>e.stopPropagation()
+    }, /*#__PURE__*/ React.createElement(Input, {
+        style: {
+            width: '100%'
+        },
+        size: cellConfig.size ?? 'small',
+        value: text,
+        onChange: (e)=>setText(e.target.value),
+        onBlur: commit,
+        onPressEnter: commit,
+        allowClear: cellConfig.allowClear,
+        placeholder: cellConfig.placeholder,
+        maxLength: cellConfig.maxLength,
+        showCount: cellConfig.showCount,
+        variant: cellConfig.bordered === false ? 'borderless' : cellConfig.variant,
+        type: cellConfig.inputType,
+        disabled: cellConfig.disabled === true
+    })));
+}
+export default TextInputCell;

package/dist/cellRenderers/index.js

@@ -20,6 +20,10 @@ import BooleanCell from './BooleanCell.js';
 import ProgressCell from './ProgressCell.js';
 import NumberCell from './NumberCell.js';
 import ButtonsCell from './ButtonsCell.js';
+import SelectorCell from './SelectorCell.js';
+import SwitchCell from './SwitchCell.js';
+import TextInputCell from './TextInputCell.js';
+import ParagraphInputCell from './ParagraphInputCell.js';
 const CELL_RENDERERS = {
     tag: TagCell,
     avatar: AvatarCell,
@@ -28,7 +32,12 @@ const CELL_RENDERERS = {
     boolean: BooleanCell,
     progress: ProgressCell,
     number: NumberCell,
-    buttons: ButtonsCell
+    buttons: ButtonsCell,
+    selector: SelectorCell,
+    multipleSelector: SelectorCell,
+    switch: SwitchCell,
+    textInput: TextInputCell,
+    paragraphInput: ParagraphInputCell
 };
 function getCellRenderer(type) {
     return CELL_RENDERERS[type];