@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/organism/DataTable/components/ToolbarActionButton/index.js

@@ -0,0 +1,52 @@
+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;
+};
+// Libraries
+import React, { memo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+// Styled
+import { ActionButton, ToolbarActionButtonWrapper } from './styled';
+// Context
+import { useDataTableContext } from '../../contexts/DataTableContext';
+// Constants
+import { TOOLBAR_ACTION_OPTIONS } from '../../constants';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ToolbarActionButtons = memo(props => {
+    const restProps = __rest(props, []);
+    // Store
+    const actionButtons = useDataTableContext(useShallow(store => store.toolbar.actionButtons));
+    console.log('🚀 ~ acitonButtons:', actionButtons);
+    if (!actionButtons)
+        return null;
+    // Handlers
+    const renderActionButtons = () => Object.keys(actionButtons)
+        .map(key => {
+        const option = TOOLBAR_ACTION_OPTIONS[key];
+        const actionSettings = actionButtons[key];
+        if (actionSettings) {
+            const { buttonProps, key, label, icon, customRender } = actionSettings;
+            const ButtonComponent = (React.createElement(ActionButton, Object.assign({ key: key || option.key, type: "text" }, buttonProps),
+                React.createElement(Icon, { type: icon || option.icon, size: 18 }),
+                `${label || option.label}`.toUpperCase()));
+            /**
+             * 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);
+    return (React.createElement(ToolbarActionButtonWrapper, { align: "center", gap: 2 }, renderActionButtons()));
+});

package/es/components/organism/DataTable/components/ToolbarActionButton/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ToolbarActionButtonWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

package/es/components/organism/DataTable/components/ToolbarActionButton/styled.js

@@ -0,0 +1,26 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex, Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ToolbarActionButtonWrapper = styled(Flex) ``;
+export const ActionButton = styled(Button) `
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px 0px !important;
+  height: 43px !important;
+  width: 50px !important;
+  font-size: 8px !important;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8} !important;
+
+  &:hover,
+  &:active {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+  }
+
+  &:disabled {
+    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2} !important;
+  }
+`;

package/es/components/organism/DataTable/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Table';
+export * from './ModifyColumn';
+export * from './Filter';
+export * from './Toolbar';
+export * from './ToolbarActionButton';
+export * from './Pagination';

package/es/components/organism/DataTable/components/index.js

@@ -0,0 +1,6 @@
+export * from './Table';
+export * from './ModifyColumn';
+export * from './Filter';
+export * from './Toolbar';
+export * from './ToolbarActionButton';
+export * from './Pagination';

package/es/components/organism/DataTable/constants/common.d.ts

@@ -0,0 +1,6 @@
+declare const DATA_TABLE_PREFIX = "data-table";
+declare const DATA_TABLE_DEFAULT_NAME = "default";
+declare const DEFAULT_COLUMN_WIDTH = 200;
+declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
+declare const DEFAULT_COLUMN_WIDTHS: number[];
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, DEFAULT_COLUMN_WIDTHS, };

package/es/components/organism/DataTable/constants/common.js

@@ -0,0 +1,7 @@
+const DATA_TABLE_PREFIX = 'data-table';
+const DATA_TABLE_DEFAULT_NAME = 'default';
+const DEFAULT_COLUMN_WIDTH = 200;
+const DEFAULT_FIRST_COLUMN_WIDTH = 400;
+const DEFAULT_ROW_SELECTION_WIDTH = 47;
+const DEFAULT_COLUMN_WIDTHS = [DEFAULT_FIRST_COLUMN_WIDTH].concat(Array.from({ length: 20 }, () => DEFAULT_COLUMN_WIDTH));
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, DEFAULT_COLUMN_WIDTHS, };

package/es/components/organism/DataTable/constants/index.d.ts

@@ -0,0 +1,7 @@
+import { DataTableState } from '../types';
+export declare const dataTableInitialState: DataTableState<any>;
+export * from './pagination';
+export * from './common';
+export * from './theme';
+export * from './toolbar';
+export * from './sample';

package/es/components/organism/DataTable/constants/index.js

@@ -0,0 +1,18 @@
+import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE } from './pagination';
+export const dataTableInitialState = {
+    name: 'dataTable',
+    modifyColumn: {},
+    filter: {},
+    toolbar: {},
+    table: {},
+    pagination: {
+        page: DEFAULT_PAGE,
+        pageSize: DEFAULT_PAGE_SIZE,
+    },
+};
+export * from './pagination';
+export * from './common';
+export * from './theme';
+export * from './toolbar';
+/* Sample */
+export * from './sample';

package/es/components/organism/DataTable/constants/pagination.d.ts

@@ -0,0 +1,6 @@
+declare const PAGE_SIZE_OPTIONS: number[];
+declare const DEFAULT_PAGE_SIZE = 25;
+declare const DEFAULT_PAGE = 1;
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+declare const DEFAULT_PAGE_SIZE_DEFAULT = 10;
+export { PAGE_SIZE_OPTIONS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAGE_SIZE_DEFAULT, };

package/es/components/organism/DataTable/constants/pagination.js

@@ -0,0 +1,6 @@
+const PAGE_SIZE_OPTIONS = [25, 50, 100];
+const DEFAULT_PAGE_SIZE = 25;
+const DEFAULT_PAGE = 1;
+const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100];
+const DEFAULT_PAGE_SIZE_DEFAULT = 10;
+export { PAGE_SIZE_OPTIONS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAGE_SIZE_DEFAULT, };

package/es/components/organism/DataTable/constants/sample.d.ts

@@ -0,0 +1,242 @@
+export declare const CDP_DATA_TABLE_SAMPLE: {
+    meta: {
+        total: number;
+        totalPerf: {
+            calc_viewable_rate: number;
+            calc_web_ctr: number;
+            events_impression: number;
+            events_viewable: number;
+            calc_click_rate: number;
+            events_click: number;
+            calc_5770548: number;
+            calc_5625216: number;
+            calc_5625215: number;
+            calc_1792083: number;
+            calc_1792082: number;
+            calc_1792087: number;
+            calc_1792085: number;
+            calc_1376300: number;
+            calc_1374678: number;
+        };
+    };
+    entries: {
+        status: number;
+        story_name: string;
+        start_date: string;
+        end_date: null;
+        ctime: string;
+        owner_id: number;
+        c_user_id: string;
+        trigger_type: string;
+        story_id: number;
+        utime: string;
+        u_user_id: string;
+        label_ids: never[];
+        channel_id: number;
+        is_blast_campaign: string;
+        portal_id: number;
+        row_count: number;
+        calc_viewable_rate: number;
+        calc_web_ctr: number;
+        events_impression: number;
+        events_viewable: number;
+        calc_click_rate: number;
+        events_click: number;
+        calc_5770548: number;
+        calc_5625216: number;
+        calc_5625215: number;
+        calc_1792083: number;
+        calc_1792082: number;
+        calc_1792087: number;
+        calc_1792085: number;
+        calc_1376300: number;
+        calc_1374678: number;
+        accepted_actions: {
+            ADD_NODE: boolean;
+            EDIT: boolean;
+            EDIT_STORY_STATUS: boolean;
+            EDIT_STORY_NAME: boolean;
+            EDIT_DESCRIPTION: boolean;
+            EDIT_NODE_NAME: boolean;
+            EDIT_TRIGGER_NODE_EVENT: boolean;
+            EDIT_TRIGGER_EVENT_CONDITIONS: boolean;
+            EDIT_TRIGGER_SCHEDULE_TIME: boolean;
+            EDIT_TRIGGER_TARGET: boolean;
+            EDIT_START_DATE: boolean;
+            EDIT_END_DATE: boolean;
+            EDIT_FREQUENCY_CAPPING: boolean;
+            EDIT_ACTION_NODE: boolean;
+            EDIT_NODE_DESTINATION_TYPE: boolean;
+            EDIT_NODE_DESTINATION_CONTENT: boolean;
+            ADD_VARIANT: boolean;
+            REMOVE_VARIANT: boolean;
+            REMOVE_NODE: boolean;
+            REMOVE_STORY: boolean;
+            CLONE_STORY: boolean;
+        };
+        available_status: number[];
+        channel_name: string;
+        translate_label: string;
+        translate_description: null;
+    }[];
+};
+export declare const FILTER_METRICS: ({
+    groupId: number;
+    groupName: string;
+    groupNameMultilang: {
+        EN: string;
+        VI: string;
+        JA: string;
+        DEFAULT_LANG: string;
+    };
+    translateLabel: string;
+    type: number;
+    displayOrder: number;
+    properties: {
+        propertyId: number;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        objectType: string;
+        dataType: string;
+        status: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        displayOrder: number;
+        isSort: number;
+        type: number;
+        displayFormat: {
+            type: string;
+            config: {};
+        };
+        rowCount: string;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    }[];
+} | {
+    groupId: number;
+    groupName: string;
+    groupNameMultilang: {
+        EN: string;
+        VI: string;
+        JA: string;
+        DEFAULT_LANG: string;
+    };
+    translateLabel: string;
+    type: number;
+    displayOrder: number;
+    properties: ({
+        propertyId: null;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        fieldNameMultilang: string;
+        objectType: string;
+        dataType: string;
+        type: number;
+        status: number;
+        displayFormat: {
+            type: string;
+            config: {
+                decimalPlace: number;
+                group?: undefined;
+                decimal?: undefined;
+            };
+        };
+        storageType: number;
+        treatAs: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        isSort: number;
+        displayOrder: number;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    } | {
+        propertyId: null;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        fieldNameMultilang: string;
+        objectType: string;
+        dataType: string;
+        type: number;
+        status: number;
+        displayFormat: {
+            type: string;
+            config: {
+                group: string;
+                decimal: string;
+                decimalPlace: number;
+            };
+        };
+        storageType: number;
+        treatAs: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        isSort: number;
+        displayOrder: number;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    })[];
+} | {
+    groupId: number;
+    groupName: string;
+    groupNameMultilang: {
+        EN: string;
+        VI: string;
+        JA: string;
+        DEFAULT_LANG: string;
+    };
+    translateLabel: string;
+    type: number;
+    displayOrder: number;
+    properties: {
+        propertyId: null;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            DEFAULT_LANG: string;
+        };
+        fieldNameMultilang: string;
+        objectType: string;
+        dataType: string;
+        type: number;
+        status: number;
+        displayFormat: {
+            type: string;
+            config: {};
+        };
+        storageType: number;
+        treatAs: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        isSort: number;
+        displayOrder: number;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    }[];
+})[];