onekijs-ui 0.19.13 → 0.19.15

package/dist/components/select/SelectService.d.ts

@@ -5,15 +5,15 @@ declare class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S
     protected lastCheckQuery: Query | undefined;
     get defaultValue(): T | T[] | null | undefined;
     get defaultValueLoading(): boolean | undefined;
-    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
+    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
     setData(data: T[], query?: Query): void;
-    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
+    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
     setDefaultValueLoading(loading: boolean): void;
     setItemWidth(_item: I, value: number): void;
     setValue(value: null | T | T[]): void;
     setUrl(url: string, query?: Query): void;
     _buildItem(data: T | null | undefined, adaptee: unknown, context?: AnonymousObject): I;
-    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
+    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
     _compareItem(a: I | undefined, b: I | undefined): boolean;
     _setDefaultValue(value: T | T[] | null | undefined): void;
     _setValidDefaultValue(value: T | T[] | null): void;

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;
@@ -10643,7 +10647,7 @@ const selectColumn = (id, options) => {
 };
 
 const TextareaComponent = (props) => {
-    const { className, size = 'medium', status, onFocus: forwardFocus, onBlur: forwardBlur, ...textareaProps } = props;
+    const { className, size = 'medium', status, onFocus: forwardFocus, onBlur: forwardBlur, onChange: forwardChange, value, ...textareaProps } = props;
     const [focus, setFocus] = React.useState(false);
     const classNames = addClassname(`o-textarea o-textarea-size-${size}${focus ? ' o-textarea-focus' : ''}${status ? ' o-textarea-status-' + status.toLowerCase() : ''}`, className);
     const onFocus = (e) => {
@@ -10654,8 +10658,20 @@ const TextareaComponent = (props) => {
         setFocus(false);
         forwardBlur && forwardBlur(e);
     };
+    const ref = React.useRef(null);
+    const selectorRef = React.useRef();
+    const onChange = (e) => {
+        selectorRef.current = e.target.selectionStart;
+        forwardChange && forwardChange(e);
+    };
+    React.useEffect(() => {
+        if (selectorRef.current !== undefined && selectorRef.current !== null && ref.current) {
+            ref.current.setSelectionRange(selectorRef.current, selectorRef.current);
+            selectorRef.current = undefined;
+        }
+    }, [value]);
     return (React.createElement("div", { className: classNames },
-        React.createElement("textarea", { className: "o-textarea-field", ...textareaProps, onFocus: onFocus, onBlur: onBlur })));
+        React.createElement("textarea", { className: "o-textarea-field", ...textareaProps, ref: ref, onFocus: onFocus, onBlur: onBlur, onChange: value === undefined ? undefined : onChange, value: value })));
 };
 TextareaComponent.displayName = 'TextareaComponent';
 
@@ -10758,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;