onekijs-ui 0.19.19 → 0.19.21

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

@@ -15,6 +15,7 @@ export type DropdownProps = {
     onCollapsing?: (node: HTMLElement) => void;
     animationTimeout?: number;
     placement?: Placement;
+    fallbackPlacements?: Placement[];
     widthModifier?: DropdownWidthModifier;
     width?: string;
     zIndex?: number;

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

@@ -1,6 +1,6 @@
 import { AnonymousObject, CollectionService } from 'onekijs-framework';
 import React from 'react';
-import { TableColumn, TableColumnWidth, TableConfig, TableController, TableItem, TableState } from './typings';
+import { TableColumn, TableColumnWidth, TableConfig, TableController, TableItem, TableSerializerFormat, TableState } from './typings';
 export declare const parseColumnWidth: (width?: string | number) => TableColumnWidth;
 declare class TableService<T = any, I extends TableItem<T> = TableItem<T>, S extends TableState<T, I> = TableState<T, I>> extends CollectionService<T, I, S> implements TableController<T, I> {
     protected cells: AnonymousObject<AnonymousObject<React.RefObject<HTMLDivElement>>>;
@@ -13,6 +13,7 @@ declare class TableService<T = any, I extends TableItem<T> = TableItem<T>, S ext
     initCell(rowNumber: number | 'header-title' | 'header-filter' | 'footer', colId: string, ref: React.RefObject<HTMLDivElement>): void;
     removeColumn(id: string): void;
     resetWidth(): void;
+    serialize(data: T[], format: TableSerializerFormat): string;
     toggle(item: I): void;
     protected _setCellWidth(fit: boolean): void;
 }

package/dist/components/table/seralizers/defaultCellSerializer.d.ts

@@ -0,0 +1,3 @@
+import { TableCellSerializer } from '../typings';
+declare const defaultCellSerializer: TableCellSerializer<any, any>;
+export default defaultCellSerializer;

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

@@ -92,6 +92,7 @@ export type TableBodyRowProps<T = any, I extends TableItem<T> = TableItem<T>> =
     onCollapsing?: (item: I | undefined, index: number) => void;
     onCollapsed?: (item: I | undefined, index: number) => void;
 };
+export type TableSerializerFormat = 'csv' | 'json';
 export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
     autoRefresh?: number;
     bodyClassName?: string;
@@ -127,6 +128,7 @@ export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
     preload?: number;
     rowClassName?: string | ((item: I | undefined, rowIndex: number, columns: TableColumn<T, I>[]) => string);
     RowComponent?: React.FC<TableBodyRowProps<T, I>>;
+    serializer?: (data: T[], format: TableSerializerFormat) => string;
     sortable?: boolean;
     stripRows?: boolean;
     tail?: boolean;
@@ -147,6 +149,7 @@ export type TableController<T = any, I extends TableItem<T> = TableItem<T>, S ex
     initCell(rowIndex: number | 'header-title' | 'header-filter' | 'footer', colId: string, ref: React.RefObject<HTMLDivElement>): void;
     removeColumn(id: string): void;
     removeSelected<B extends keyof CollectionBy<T, I>>(by: B, target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][]): I[];
+    serialize: (data: T[], format: TableSerializerFormat) => string;
     setSelected<B extends keyof CollectionBy<T, I>>(by: B, target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][]): I[];
     startAutoRefresh: (interval: number) => void;
     stopAutoRefresh: () => void;
@@ -167,6 +170,7 @@ export type TableCellDisplayerProps<T, I extends TableItem<T> = TableItem<T>> =
     value: T;
     format: FormDisplayerProps['format'];
 };
+export type TableCellSerializer<T, I extends TableItem<T> = TableItem<T>> = (data: T, column: TableColumn<T, I>, format: TableSerializerFormat) => any;
 export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
     className?: string | ((item: I, column: TableColumn<T, I>, rowIndex: number) => string);
     CellComponent?: Cell<T, I>;
@@ -177,15 +181,16 @@ export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
     filterable?: boolean;
     FilterComponent?: React.FC<TableHeaderCellProps<T, I>>;
     headerClassName?: string | ((column: TableColumn<T, I>) => string);
+    help?: ReactNode;
     id: string;
     maxWidth?: string;
     minWidth?: string;
+    serializer?: TableCellSerializer<T, I>;
     sortable?: boolean;
     title?: string;
     TitleComponent?: React.FC<TableHeaderCellProps<T, I>>;
     weight?: number;
     width?: string;
-    help?: ReactNode;
 };
 export type TableColumnWidth = {
     auto?: boolean;

package/dist/index.d.ts

@@ -160,7 +160,7 @@ export { default as useTextColumn } from './components/table/hooks/useTextColumn
 export { default as useTextareaColumn } from './components/table/hooks/useTextareaColumn';
 export { default as FormCardDisplayer } from './components/card/FormCardDisplayer';
 export { filterListStyle, tableStyle } from './components/table/style';
-export { ArrayTableProps, Cell, CheckboxColumn, CheckboxColumnOptions, ControllerTableProps, EnumColumnOptions, FormCellDisplayerProps, FormTableContext, FormTableItemDisplayerProps, FormTableProps, TableValueDisplayerProps, InputColumn, InputColumnOptions, LinkColumnOptions, SelectCell, SelectColumn, SelectColumnOptions, TableBodyCellProps, TableBodyProps, TableBodyRowProps, TableCellDisplayerProps, TableColumn, TableColumnComputedWidth, TableColumnOptions, TableColumnSpec, TableColumnWidth, TableColumnsState, TableConfig, TableController, TableExpandedProps, TableFilterOperator, TableFilterOperatorProps, TableFooterCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableItem, TableItemAdaptee, TableItemAdapter, TableItems, TableNotFoundProps, TableProps, TableRowHandler, TableSortProps, TableState, TextareaColumn, TextareaColumnOptions, UseTableController, UseTableOptions, } from './components/table/typings';
+export { ArrayTableProps, Cell, CheckboxColumn, CheckboxColumnOptions, ControllerTableProps, EnumColumnOptions, FormCellDisplayerProps, FormTableContext, FormTableItemDisplayerProps, FormTableProps, TableValueDisplayerProps, InputColumn, InputColumnOptions, LinkColumnOptions, SelectCell, SelectColumn, SelectColumnOptions, TableBodyCellProps, TableBodyProps, TableBodyRowProps, TableCellDisplayerProps, TableColumn, TableColumnComputedWidth, TableColumnOptions, TableColumnSpec, TableColumnWidth, TableColumnsState, TableConfig, TableController, TableExpandedProps, TableFilterOperator, TableFilterOperatorProps, TableFooterCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableItem, TableItemAdaptee, TableItemAdapter, TableItems, TableNotFoundProps, TableProps, TableRowHandler, TableSortProps, TableState, TextareaColumn, TextareaColumnOptions, UseTableController, UseTableOptions, TableCellSerializer, TableSerializerFormat } from './components/table/typings';
 export { default as Tag } from './components/tag';
 export { default as TagComponent } from './components/tag/components/TagComponent';
 export { tagStyle } from './components/tag/style';
@@ -182,6 +182,7 @@ export { default as ArrayTreeComponent } from './components/tree/components/Arra
 export { default as ControllerTreeComponent } from './components/tree/components/ControllerTreeComponent';
 export { default as TreeBodyComponent } from './components/tree/components/TreeBodyComponent';
 export { default as TreeComponent } from './components/tree/components/TreeComponent';
+export { default as defaultCellSerializer } from './components/table/seralizers/defaultCellSerializer';
 export { default as TreeItemComponent, TreeItemContent, TreeItemToggler, } from './components/tree/components/TreeItemComponent';
 export { default as TreeListComponent } from './components/tree/components/TreeListComponent';
 export { default as VirtualTreeBodyComponent } from './components/tree/components/VirtualTreeBodyComponent';

package/dist/index.js

@@ -405,6 +405,24 @@ const enumFormatter = (values) => {
         return String(value);
     };
 };
+const escapeCsvValue = (value, separator = ',') => {
+    const escape = (value) => {
+        if (Array.isArray(value)) {
+            return value.map((v) => escape(v)).join(',');
+        }
+        if (value === null || value === undefined)
+            return '';
+        return `${value}`;
+    };
+    const result = escape(value);
+    if (result.startsWith('"') && result.endsWith('"'))
+        return result; // the string is already escaped
+    // escape only if the string contains the separator
+    if (result.includes(separator)) {
+        return `"${result.replace(/"/g, '""')}"`;
+    }
+    return result;
+};
 const pxFormatter = (value) => {
     if (typeof value === 'string') {
         return value;
@@ -1094,7 +1112,7 @@ const sameWidthPopperModifier = refWidth('width');
 const minWidthPopperModifier = refWidth('minWidth');
 const maxWidthPopperModifier = refWidth('maxWidth');
 
-const DropdownComponent = ({ animationTimeout = 0, attachToBody = false, className, refElement, open, children, skidding = 0, distance = 0, onUpdate, onDropDone, onDropStart, onCollapseDone, onCollapseStart, onDropping, onCollapsing, placement = 'auto', width, widthModifier = 'same', zIndex = 1, }) => {
+const DropdownComponent = ({ animationTimeout = 0, attachToBody = false, className, refElement, open, children, skidding = 0, distance = 0, onUpdate, onDropDone, onDropStart, onCollapseDone, onCollapseStart, onDropping, onCollapsing, placement = 'auto', fallbackPlacements, width, widthModifier = 'same', zIndex = 1, }) => {
     const [popperElement, setPopperElement] = React.useState(null);
     const popperWidthModifier = widthModifier === 'same'
         ? sameWidthPopperModifier
@@ -1113,7 +1131,8 @@ const DropdownComponent = ({ animationTimeout = 0, attachToBody = false, classNa
             },
             {
                 name: 'flip',
-                enabled: placement === 'auto',
+                enabled: placement === 'auto' || (fallbackPlacements !== undefined && fallbackPlacements.length > 0),
+                options: fallbackPlacements && fallbackPlacements.length > 0 ? { fallbackPlacements } : undefined,
             },
             {
                 name: 'eventListeners',
@@ -9181,6 +9200,36 @@ let TableService = class TableService extends onekijsFramework.CollectionService
             column.computedWidth = undefined;
         });
     }
+    serialize(data, format) {
+        const serializer = this.config?.serializer;
+        if (serializer) {
+            return serializer(data, format);
+        }
+        const serializableColumns = (this.state.columns || []).filter((c) => c.serializer !== undefined);
+        switch (format) {
+            case 'csv':
+                let result = 'sep=,';
+                const header = serializableColumns.map((c) => escapeCsvValue(onekijsFramework.get(c, 'title', onekijsFramework.get(c, 'id')))).join(',');
+                result = `${result}\n${header}`;
+                const csvRows = data.map((row) => {
+                    const columns = serializableColumns
+                        .map((c) => c.serializer(row, c, format))
+                        .map((s) => {
+                        return escapeCsvValue(s, ',');
+                    });
+                    return columns.join(',');
+                });
+                return `${result}\n${csvRows.join('\n')}`;
+            case 'json':
+                const rows = data.map((row) => {
+                    return serializableColumns.reduce((accumulator, c) => {
+                        accumulator[c.title ?? c.id] = c.serializer(row, c, format);
+                        return accumulator;
+                    }, {});
+                });
+                return JSON.stringify(rows);
+        }
+    }
     toggle(item) {
         this.setMeta('item', item, 'expanded', !item.expanded);
     }
@@ -10481,6 +10530,10 @@ const DefaultFormCellDisplayer = (props) => {
     return null;
 };
 
+const defaultCellSerializer = (data, column) => {
+    return onekijsFramework.get(data, column.id, null);
+};
+
 const checkboxColumn = (id, options) => {
     const Component = options.CellComponent || CheckboxCellComponent;
     return Object.assign({
@@ -10488,6 +10541,7 @@ const checkboxColumn = (id, options) => {
         sortable: false,
         className: 'o-checkbox-cell',
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10540,12 +10594,28 @@ const TableSelectFilterComponent = ({ column, dataSource, }) => {
 TableSelectFilterComponent.displayName = 'TableInputFilterComponent';
 
 const enumColumn = (id, options) => {
+    const serializer = (data, column, format) => {
+        const value = onekijsFramework.get(data, column.id, null);
+        const entry = options.filterDataSource.find((item) => {
+            if (Array.isArray(item)) {
+                if (item[0] === value) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (entry) {
+            return entry[1];
+        }
+        return defaultCellSerializer(data, column);
+    };
     return Object.assign({
         CellComponent: DefaultCellComponent,
         filterable: true,
         FilterComponent: (props) => (React.createElement(TableSelectFilterComponent, { ...props, dataSource: options.filterDataSource })),
         sortable: true,
         Displayer: DefaultFormCellDisplayer,
+        serializer,
     }, options, {
         id,
     });
@@ -10569,6 +10639,7 @@ const inputColumn = (id, options) => {
         filterable: false,
         sortable: false,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10592,6 +10663,7 @@ const textColumn = (id, options) => {
         FilterComponent: TableTextFilterComponent,
         sortable: true,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
     });
@@ -10623,6 +10695,7 @@ const numberColumn = (id, options) => {
         FilterComponent: TableNumberFilterComponent,
         sortable: true,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
     });
@@ -10662,12 +10735,30 @@ const selectColumn = (id, options) => {
         };
         opts.adapter = adapter;
     }
+    const serializer = (data, column, format) => {
+        const value = onekijsFramework.get(data, column.id, null);
+        if (Array.isArray(opts.dataSource)) {
+            const entry = opts.dataSource.find((item) => {
+                if (Array.isArray(item)) {
+                    if (item[0] === value) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+            if (entry && Array.isArray(entry)) {
+                return entry[1];
+            }
+        }
+        return defaultCellSerializer(data, column);
+    };
     const broker = new DefaultSelectBroker(dataSource, opts);
     const Component = opts.CellComponent || SelectCellComponent;
     return Object.assign({
         filterable: false,
         sortable: false,
         Displayer: DefaultFormCellDisplayer,
+        serializer,
     }, opts, {
         id,
         CellComponent: Component(opts, broker),
@@ -10819,6 +10910,7 @@ const textareaColumn = (id, options) => {
         filterable: false,
         sortable: false,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -12610,6 +12702,7 @@ exports.cssProperty = cssProperty;
 exports.cursor = cursor;
 exports.darken = darken;
 exports.dashboardOverlayStyle = dashboardOverlayStyle;
+exports.defaultCellSerializer = defaultCellSerializer;
 exports.defaultTreeQueryEngine = defaultTreeQueryEngine;
 exports.deriveColor = deriveColor;
 exports.display = display;
@@ -12618,6 +12711,7 @@ exports.dropdownStyle = dropdownStyle;
 exports.emptyCells = emptyCells;
 exports.enumColumn = enumColumn;
 exports.enumFormatter = enumFormatter;
+exports.escapeCsvValue = escapeCsvValue;
 exports.fieldDescriptionStyle = fieldDescriptionStyle;
 exports.fieldDisplayerStyle = fieldDisplayerStyle;
 exports.fieldHelpStyle = fieldHelpStyle;