@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

package/es/tests/DataTableTest.js

@@ -0,0 +1,145 @@
+// Libraries
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+// Components
+import { DataTable } from '../components/organism/DataTable';
+// Styled
+import { TableTestWrapper } from './styled';
+// Constants
+import { useDataTableListing } from '../components/organism/DataTable/hooks/useDataTableListing';
+export const DataTableTest = () => {
+    // Hooks
+    const { filter, modifyColumn, pagination, table, search } = useDataTableListing({
+        name: 'survey-project',
+        config: {
+            //  NOTES: This is no need pass auth props when had
+            // Provider wrapper
+            env: 'development',
+            auth: {
+                token: '5474r2x214z284d4w2b4y4z594l534v5m4j4t2f4n5m5',
+                userId: '1600083836',
+                accountId: '1600083836',
+                portalId: 33167,
+            },
+            api: {
+                listing: {
+                    url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
+                },
+                filter: {
+                    url: 'https://column.ants.tech/api/filter',
+                },
+                column: {
+                    url: 'https://column.ants.tech/api/column',
+                },
+                search: {
+                    url: `https://sandbox-survey.antsomi.com/api/v1/survey/performance`,
+                    params: {
+                        limit: 100,
+                        page: 1,
+                    },
+                },
+                matchesAny: {
+                    general: {
+                        url: `https://sandbox-survey.antsomi.com/api/v1/survey/filter/get-value-matches-any`,
+                        params(filterItem) {
+                            var _a;
+                            return {
+                                metric_code: (_a = filterItem === null || filterItem === void 0 ? void 0 : filterItem.column) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase(),
+                            };
+                        },
+                    },
+                    survey_id: {
+                        url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
+                        params() {
+                            return {
+                                page: 1,
+                                limit: 20,
+                            };
+                        },
+                    },
+                },
+            },
+            object: {
+                type: 5, // Survey,
+                objectId: -1, // NOTES: will note detail when to use objectId, current is no need
+            },
+        },
+        search: {
+            itemMapKeys: {
+                id: 'survey_id',
+                label: 'survey_name',
+            },
+            isClientSearch: false,
+            searchItemProps: {
+                style: {
+                    color: 'red',
+                },
+            },
+            link(record) {
+                return `/survey/${record.survey_id}`;
+            },
+            formatData(response) {
+                return (response === null || response === void 0 ? void 0 : response.body) || [];
+            },
+        },
+        queryOptions: {
+            getTableListing: {
+                refetchOnMount: 'always',
+            },
+        },
+        filter: {
+            matchesAny: {
+                general: {
+                    formatData(response) {
+                        return response === null || response === void 0 ? void 0 : response.rows.map(record => ({
+                            key: record.value,
+                            title: record.label,
+                        }));
+                    },
+                },
+                survey_id: {
+                    formatData(response) {
+                        return response === null || response === void 0 ? void 0 : response.body.map(record => ({
+                            key: record.survey_id,
+                            title: record.survey_id,
+                        }));
+                    },
+                },
+            },
+            // formatFilterValue: {
+            //   matches(value) {
+            //     return Array.isArray(value) && value.map(item => item.key).join(',');
+            //   },
+            //   matches_any(value) {
+            //     return Array.isArray(value) && value.map(item => item.key).join(',');
+            //   },
+            //   not_matches(value) {
+            //     return Array.isArray(value) && value.map(item => item.key).join(',');
+            //   },
+            // },
+        },
+    });
+    return (React.createElement(BrowserRouter, null,
+        React.createElement(TableTestWrapper, null,
+            React.createElement(DataTable, { table: table, filter: filter, toolbar: {
+                    actionButtons: {
+                        SEARCH: search,
+                        COLUMN: modifyColumn,
+                    },
+                    selectedRowButtons: {
+                        ACTION: {
+                            label: 'Action',
+                            dropdownProps: {
+                                menu: {
+                                    items: [
+                                        {
+                                            label: 'Action 1',
+                                            key: '1',
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                    },
+                }, pagination: pagination }))));
+};

package/es/tests/MatchesAnySelect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MatchesAnySelectTest: () => React.JSX.Element;

package/es/tests/MatchesAnySelect.js

@@ -0,0 +1,10 @@
+// Libraries
+import React, { useState } from 'react';
+import { MATCHES_ANY_SAMPLE_DATA, MatchesAnySelect } from '../components';
+export const MatchesAnySelectTest = () => {
+    const [state, setState] = useState({
+        selectedItems: [],
+        items: MATCHES_ANY_SAMPLE_DATA,
+    });
+    return (React.createElement(MatchesAnySelect, { items: state.items, selectedItems: state.selectedItems, onChange: selectedItems => setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems }))) }));
+};

package/es/tests/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTableTest } from './DataTableTest';
+export { MatchesAnySelectTest } from './MatchesAnySelect';

package/es/tests/index.js

@@ -0,0 +1,2 @@
+export { DataTableTest } from './DataTableTest';
+export { MatchesAnySelectTest } from './MatchesAnySelect';

package/es/tests/styled.d.ts

@@ -0,0 +1 @@
+export declare const TableTestWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/tests/styled.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const TableTestWrapper = styled.div `
+  padding: 10px;
+  height: 100vh;
+  overflow: auto;
+`;

package/es/types/actionsButton.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from 'antd';
+export type TActionButton = {
+    buttonProps?: ButtonProps;
+    key?: string;
+    label?: React.ReactNode;
+    icon?: string;
+    customRender?: (node: ReactNode) => ReactNode;
+};
+export type TActionOption = {
+    key: string;
+    label: string;
+    icon?: string;
+    iconSize?: number;
+};
+export type TActionOptions = Record<string, TActionOption>;

package/es/types/actionsButton.js

@@ -0,0 +1 @@
+export {};

package/es/types/api.d.ts

@@ -0,0 +1,10 @@
+export type TDataResponse<T> = {
+    meta: {
+        total: number;
+    };
+    entries: T[];
+};
+export type TConfirmResponse = {
+    success?: boolean;
+    message?: string;
+};

package/es/types/api.js

@@ -0,0 +1 @@
+export {};

package/es/types/condition.d.ts

@@ -0,0 +1,6 @@
+import { OPERATORS_CODE } from '../constants';
+export type TOperator = {
+    label: string;
+    value: string;
+};
+export type TOperatorKey = (typeof OPERATORS_CODE)[keyof typeof OPERATORS_CODE];

package/es/types/condition.js

@@ -0,0 +1 @@
+export {};

package/es/types/config.d.ts

@@ -0,0 +1,2 @@
+import { ENV } from '../config';
+export type TEnv = (typeof ENV)[keyof typeof ENV];

package/es/types/config.js

@@ -0,0 +1 @@
+export {};

package/es/types/index.d.ts

@@ -19,10 +19,19 @@ export * from './variables';
 export * from './service';
 export * from './templateListing';
 export * from './share-access';
+export * from './processingNotification';
+export * from './postMessage';
+export * from './actionsButton';
+export * from './condition';
+export * from './api';
 export type PayloadInfo = {
     url?: string;
     userId?: string;
     token?: string;
     accountId?: string;
+    portalId?: number;
 };
 export type TServiceAuth = PayloadInfo;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};

package/es/types/index.js

@@ -3,3 +3,8 @@ export * from './variables';
 export * from './service';
 export * from './templateListing';
 export * from './share-access';
+export * from './processingNotification';
+export * from './postMessage';
+export * from './actionsButton';
+export * from './condition';
+export * from './api';

package/es/types/postMessage.d.ts

@@ -0,0 +1,4 @@
+export interface IPostMessage {
+    type: string;
+    payload: any;
+}

package/es/types/postMessage.js

@@ -0,0 +1 @@
+export {};

package/es/types/processingNotification.d.ts

@@ -0,0 +1,4 @@
+export type TProcessingNotificationCallbackType = 'forecast_name';
+export interface ProcessingNotificationProps {
+    callback?: (type: TProcessingNotificationCallbackType, data: Record<string, any>) => void;
+}

package/es/types/processingNotification.js

@@ -0,0 +1 @@
+export {};

package/es/types/share-access.d.ts

@@ -12,6 +12,7 @@ export type TUserAccess = {
 };
 export type TShareAccess = {
     is_public: TBoolean;
+    owner_id: number | null;
     public_role: number | null;
     list_access: TUserAccess[];
 };

package/es/types/templateListing.d.ts

@@ -8,6 +8,7 @@ export type TTemplateListingConfig = {
     objectType: TObjectType;
     publicLevel: TPublicLevel;
     getListType: TGetListType;
+    channel?: number;
     categoryCodes?: string[];
     limitListPerPage?: number;
 };

package/es/utils/actionButtons.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { TActionButton, TActionOption, TActionOptions } from '../types';
+type TRenderActionButtons<T = any, K = TActionButton> = {
+    renderComponent: (actionButton: K, option?: TActionOption) => ReactNode;
+    actionButtons?: Partial<Record<keyof T, K>>;
+    defaultActionOptions?: TActionOptions;
+};
+/**
+ * Renders a set of action buttons based on the provided configuration.
+ *
+ * @param {Object} params - The parameters for rendering action buttons.
+ * @param {Function} params.renderComponent - The function to render a component. This function takes an object with
+ *   button properties and returns a React component.
+ * @param {Object} [params.actionButtons={}] - An object containing configuration for each action button. Each key in this object
+ *   corresponds to a specific action button, and the value is an object with properties defining the button's behavior and appearance.
+ * @param {Object} [params.defaultActionOptions={}] - An object containing default configuration options for each action button. Each key in this object
+ *   corresponds to a specific action button, and the value is an object with default properties for that button.
+ *
+ * @returns {Array} An array of rendered action button components.
+ *
+ * @typedef {Object} ActionButtonConfig
+ * @property {Object} buttonProps - The properties to be passed to the button component.
+ * @property {string} key - The unique key for the button.
+ * @property {string} label - The label to be displayed on the button.
+ * @property {React.Element} icon - The icon to be displayed on the button.
+ * @property {Function} [customRender] - A custom render function for the button. If provided, this function will receive the default
+ *   button component and should return the custom rendered component.
+ *
+ * @typedef {Object} DefaultActionOption
+ * @property {string} key - The default key for the button.
+ * @property {string} label - The default label to be displayed on the button.
+ * @property {React.Element} icon - The default icon to be displayed on the button.
+ *
+ * @typedef {Object} TRenderActionButtons
+ * @property {Function} renderComponent - The function to render a component.
+ * @property {Object<string, ActionButtonConfig>} actionButtons - Configuration for each action button.
+ * @property {Object<string, DefaultActionOption>} defaultActionOptions - Default configuration options for each action button.
+ */
+export declare function renderActionButtons<T = any, K = TActionButton>({ renderComponent, actionButtons, defaultActionOptions, }: TRenderActionButtons<T, K>): ReactNode[];
+export {};

package/es/utils/actionButtons.js

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Renders a set of action buttons based on the provided configuration.
+ *
+ * @param {Object} params - The parameters for rendering action buttons.
+ * @param {Function} params.renderComponent - The function to render a component. This function takes an object with
+ *   button properties and returns a React component.
+ * @param {Object} [params.actionButtons={}] - An object containing configuration for each action button. Each key in this object
+ *   corresponds to a specific action button, and the value is an object with properties defining the button's behavior and appearance.
+ * @param {Object} [params.defaultActionOptions={}] - An object containing default configuration options for each action button. Each key in this object
+ *   corresponds to a specific action button, and the value is an object with default properties for that button.
+ *
+ * @returns {Array} An array of rendered action button components.
+ *
+ * @typedef {Object} ActionButtonConfig
+ * @property {Object} buttonProps - The properties to be passed to the button component.
+ * @property {string} key - The unique key for the button.
+ * @property {string} label - The label to be displayed on the button.
+ * @property {React.Element} icon - The icon to be displayed on the button.
+ * @property {Function} [customRender] - A custom render function for the button. If provided, this function will receive the default
+ *   button component and should return the custom rendered component.
+ *
+ * @typedef {Object} DefaultActionOption
+ * @property {string} key - The default key for the button.
+ * @property {string} label - The default label to be displayed on the button.
+ * @property {React.Element} icon - The default icon to be displayed on the button.
+ *
+ * @typedef {Object} TRenderActionButtons
+ * @property {Function} renderComponent - The function to render a component.
+ * @property {Object<string, ActionButtonConfig>} actionButtons - Configuration for each action button.
+ * @property {Object<string, DefaultActionOption>} defaultActionOptions - Default configuration options for each action button.
+ */
+export function renderActionButtons({ renderComponent, actionButtons = {}, defaultActionOptions = {}, }) {
+    return Object.keys(actionButtons || {})
+        .map(key => {
+        const option = defaultActionOptions[key] || {};
+        const actionSettings = actionButtons[key];
+        if (actionSettings) {
+            const { buttonProps, key, label, icon, customRender } = actionSettings, restOfAction = __rest(actionSettings, ["buttonProps", "key", "label", "icon", "customRender"]);
+            const ButtonComponent = renderComponent(Object.assign({ buttonProps, key: key || option.key, label: label || option.label, icon: icon || option.icon, customRender }, restOfAction), option);
+            /**
+             * Handle custom render for action button
+             * If customRender is a function, return the function callback the ButtonComponent
+             * If not, return ButtonComponent
+             */
+            return typeof customRender === 'function' ? customRender(ButtonComponent) : ButtonComponent;
+        }
+        return null;
+    })
+        .filter(Boolean);
+}

package/es/utils/common.d.ts

@@ -5,24 +5,32 @@
  * @param {number} endIndex - end item index want to replace position: ;
  * @returns {object[]}
  */
-export declare const reorder: (list: Array<Record<string, unknown> | string | number>, startIndex: number, endIndex: number) => any[];
+export declare const reorder: <T = any>(list: Array<Record<string, T> | string | number>, startIndex: number, endIndex: number) => any[];
+/**
+ * Function to flat array
+ * @param {Array} tree - tree data
+ * @param {string} keyFlat = 'id' - key to flat
+ * @param {number} level = 0 - level of tree
+ * @returns {Array} - tree data with children
+ */
+export declare const flattenTree: (tree?: Array<any>, keyFlat?: string, level?: number) => Array<any>;
 export declare const safeParse: (val: any, defaultVal: any) => any;
 export declare const getObjectPropSafely: (fn: any, defaultValue?: string) => any;
 export declare const random: (number: any) => string;
-export declare function getPortalId(config: any): any;
-export declare const safeParseInt: (val: any, defaultVal: any) => any;
 export declare function isUrlEmbedded(): boolean;
 export declare function getWindowParam(name: any, config: any): any;
 export declare function getSessionStorage(key: any, config: any): any;
-export declare function getMessageByCode(messageCode: any, def?: undefined | string): any;
-export declare function urlHasQueryString(url: any): boolean;
-export declare function isNumeric(num: any): boolean;
-export declare function getUserLocaleLanguage(config: any): any;
+export declare const safeParseInt: (val: any, defaultVal: any) => any;
 export declare function getAppSession(key: any, config: any): any;
 export declare function getAppParamURL(pathname: any, forceVersionV2: boolean | undefined, config: any): {
     portalId: number;
     accessUserId: number;
 };
+export declare function getPortalId(config: any): any;
+export declare function getMessageByCode(messageCode: any, def?: undefined | string): any;
+export declare function urlHasQueryString(url: any): boolean;
+export declare function isNumeric(num: any): boolean;
+export declare function getUserLocaleLanguage(config: any): any;
 export declare function callApiWithAuth(endpoint: any, method: string | undefined, body: any, domain?: string, config?: {}, token?: string, userId?: string, isTicket?: boolean, type?: string, isAccount?: boolean, isPermission?: boolean, others?: any): Promise<void | import("axios").AxiosResponse<any, any>>;
 export declare function getData(res: any, def: any): {
     code: number;
@@ -55,7 +63,69 @@ export declare const isEmail: (email: string) => boolean;
  */
 export declare function mapNumberToOrdinalText(num: number): string;
 export declare const searchParamsToObject: (searchParams?: string) => Record<string, unknown>;
-export declare function asssertCannotReach(x: never): void;
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
+export declare function generateKey(): any;
+export declare const formatUserId: (userId?: number) => string;
+/**
+ * Function to remove accent
+ * @param str - String want to remove accent
+ * @returns {string} - Result after remove accent
+ */
+export declare const removeAccent: (str: string) => string;
+/** Remove all accents and convert string to lower case, remove leading and trailing white space */
+export declare const simplifyString: (str: string) => string;
+/**
+ * @param str target string
+ * @param queryStr search query
+ * @returns true if target string includes search query
+ */
+export declare const searchStringQuery: (str: string, queryStr: string) => boolean;
+export declare const isExistedImage: (imageUrl: string) => boolean;
+export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string;
+export declare const safeParseJson: (json?: string | null, defaultValue?: any) => any;
+/**
+ * Recursively searches through a list of items and their children to find matches based on specified search keys and a search value.
+ *
+ * @template T - The type of items in the list.
+ * @param {Object} params - The parameters for the search.
+ * @param {T[]} [params.list=[]] - The list of items to search through.
+ * @param {keyof T} [params.childrenKey='children'] - The key used to access children of each item.
+ * @param {Array<keyof T>} params.searchKeys - The keys of the item properties to search against.
+ * @param {string} params.searchValue - The value to search for in the specified keys.
+ * @returns {Object} The search results.
+ * @returns {T[]} returns.results - The list of items that match the search criteria.
+ * @returns {T[]} returns.matchedParents - The list of parent items that have matching children.
+ */
+export declare const recursiveSearchItems: <T = any>({ list, childrenKey, searchKeys, searchValue, }: {
+    list: T[];
+    searchValue: string;
+    searchKeys: (keyof T)[];
+    childrenKey?: keyof T;
+}) => {
+    results: T[];
+    matchedParents: T[];
+};
+/**
+ * Function to flat array
+ * @param {Array} tree - tree data
+ * @param {string} keyFlat = 'id' - key to flat
+ * @param {number} level = 0 - level of tree
+ * @returns {Array} - tree data with children
+ */
+export declare const flatTree: <T = any>(tree?: T[], keyFlat?: keyof T, level?: number) => T[];
+export declare function asssertCannotReach(x: never): void;
+/**
+ * Splits a string into an array of substrings separated by newline characters.
+ * @param text - The input text to split.
+ * @returns An array of strings, each representing a line of text from the input.
+ */
+export declare function splitTextByNewline(text?: string): string[];
+/**
+ * Safely parses a JSON string from localStorage.
+ *
+ * @param {string} key - The key of the item to retrieve from localStorage.
+ * @returns {any | null} The parsed JSON object if successful, or `null` if the parsing fails or the key does not exist.
+ */
+export declare function parseJSONFromLocalStorage<T = any>(key: string): T | null;