onekijs-ui 0.19.14 → 0.19.15

package/dist/components/table/typings.d.ts

@@ -40,10 +40,12 @@ export type FormTableProps<T = any, I extends TableItem<T> = TableItem<T>, S ext
 export type FormTableContext<T = any> = {
     tableName: string;
     onSelect: (item: TableItem<T>, selected: boolean) => void;
+    onAdd: (initialValue: Partial<T> | undefined) => void;
     addLabel: string;
     required?: boolean;
     maxLength?: number;
     minLength?: number;
+    editable?: boolean;
 };
 export type FormTableItemDisplayerProps<T = any> = {
     value: T;

package/dist/index.js

@@ -10245,11 +10245,11 @@ const SelectRowComponent = ({ item }) => {
 };
 const FooterComponent = () => {
     const form = onekijsFramework.useForm();
-    const { tableName, addLabel, maxLength } = useFormTableContext();
+    const { tableName, addLabel, maxLength, onAdd } = useFormTableContext();
     const isSingleColumnTable = useTableColumns().find((c) => c.id === '');
     const addRow = (e) => {
-        form.add(tableName, isSingleColumnTable ? undefined : {});
         e.preventDefault();
+        onAdd(isSingleColumnTable ? undefined : {});
     };
     const currentSize = (form.getValue(tableName) || []).length;
     if (maxLength !== undefined && currentSize >= maxLength)
@@ -10295,7 +10295,11 @@ const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, on
                 onChange && onChange(currentValues.filter((v) => getId(v) !== getId(value)));
             }
         };
-        return { tableName: name, onSelect, addLabel, required, minLength, maxLength };
+        const onAdd = (initialValue) => {
+            formTableContext.current.editable = true;
+            form.add(name, initialValue);
+        };
+        return { tableName: name, onSelect, onAdd, addLabel, required, minLength, maxLength };
     });
     // listen on value change from the form
     // for the initial value in the table controller
@@ -10416,12 +10420,12 @@ FormTable.displayName = 'FormTable';
 
 const CheckboxCellComponent = (options) => {
     const CheckboxCellComponent = ({ item, column, rowIndex }) => {
-        const { tableName } = useFormTableContext();
+        const { tableName, editable } = useFormTableContext();
         const { size, ...checkboxOptions } = options;
         // if the id is empty, it's a single table column and the value is the row itself
         const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React.createElement(FormCheckbox, { layout: "table", ...checkboxOptions, name: name, className: addClassname('o-table-checkbox', className) }));
+        return (React.createElement(FormCheckbox, { layout: "table", ...checkboxOptions, name: name, className: addClassname('o-table-checkbox', className), editable: editable ?? options.editable }));
     };
     CheckboxCellComponent.displayName = 'CheckboxCellComponent';
     return CheckboxCellComponent;
@@ -10520,11 +10524,11 @@ const enumColumn = (id, options) => {
 
 const InputCellComponent = (options) => {
     const InputCellComponent = ({ item, column, rowIndex }) => {
-        const { tableName } = useFormTableContext();
+        const { tableName, editable } = useFormTableContext();
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
         // if the id is empty, it's a single table column and the value is the row itself
         const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
-        return (React.createElement(FormInput, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-input', className) }));
+        return (React.createElement(FormInput, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-input', className), editable: editable ?? options.editable }));
     };
     InputCellComponent.displayName = 'InputCellComponent';
     return InputCellComponent;
@@ -10597,7 +10601,7 @@ const numberColumn = (id, options) => {
 
 const SelectCellComponent = (options, broker) => {
     const SelectCellComponent = ({ item, column, rowIndex }) => {
-        const { tableName } = useFormTableContext();
+        const { tableName, editable } = useFormTableContext();
         const controller = useSelectController(options.dataSource, options);
         const service = controller.asService();
         // if the id is empty, it's a single table column and the value is the row itself
@@ -10610,7 +10614,7 @@ const SelectCellComponent = (options, broker) => {
                 broker.removeSubscriber(name);
             };
         }, [name, service]);
-        return (React.createElement(Component, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller }));
+        return (React.createElement(Component, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller, editable: editable ?? options.editable }));
     };
     SelectCellComponent.displayName = 'SelectCellComponent';
     return SelectCellComponent;
@@ -10770,11 +10774,11 @@ FormTextarea.displayName = 'FormTextarea';
 
 const TextareaCellComponent = (options) => {
     const TextareaCellComponent = ({ item, column, rowIndex }) => {
-        const { tableName } = useFormTableContext();
+        const { tableName, editable } = useFormTableContext();
         // if the id is empty, it's a single table column and the value is the row itself
         const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React.createElement(FormTextarea, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-textarea', className) }));
+        return (React.createElement(FormTextarea, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-textarea', className), editable: editable ?? options.editable }));
     };
     TextareaCellComponent.displayName = 'TextareaCellComponent';
     return TextareaCellComponent;