@omniumretail/component-library 0.1.16 → 0.1.17

package/dist/types/components/Table/Table.stories.d.ts

@@ -5,3 +5,4 @@ export default _default;
 export declare const Primary: Story<customTableProps>;
 export declare const Secondary: Story<customTableProps>;
 export declare const WithCheckbox: Story<customTableProps>;
+export declare const withActions: Story<customTableProps>;

package/dist/types/components/Table/index.d.ts

@@ -4,6 +4,10 @@ export interface FilterOptions {
     label: string;
     direction: string;
 }
+export interface Actions {
+    key: string;
+    label: string;
+}
 export declare enum sortBy {
     asc = "asc",
     desc = "desc"
@@ -15,5 +19,7 @@ export interface customTableProps extends TableProps<any> {
     sortInfo?: any;
     paginationInfo?: any;
     headingTranslationsKey?: string;
+    actions: boolean;
+    actionsArray: any;
 }
 export declare const CustomTable: (props: customTableProps) => JSX.Element;

package/dist/types/constants/i18n.d.ts

@@ -1 +1 @@
-export {};
+export declare const mergei18n: (appResources: any) => void;

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './constants/i18n';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -43,6 +43,7 @@
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
+    "lodash.merge": "^4.6.2",
     "mini-css-extract-plugin": "^2.7.2",
     "moment": "^2.29.4",
     "postcss": "^8.4.4",

package/src/components/Table/Table.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import { CustomTable, customTableProps } from '.';
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export default {
     title: 'customTable',
@@ -8,20 +9,30 @@ export default {
 } as Meta;
 
 const Template: Story<customTableProps> = (args) => {
+    const { t } = useTranslation();
     const [pageInfo, setPageInfo] = useState<any>({});
     // const [sortingInfo, setSortingInfo] = useState<any>({});
     const [sortBy, setSortBy] = useState<string[]>(['key', 'desc']);
 
     const newDataSource = args.dataSource?.slice().sort((a, b) => {
-        if(sortBy[1] === 'asc') {
+        if (sortBy[1] === 'asc') {
             return a[sortBy[0]].localeCompare(b[sortBy[0]]);
         } else {
-            debugger;
             return b[sortBy[0]].localeCompare(a[sortBy[0]]);
         }
     });
 
-    return <CustomTable {...args} dataSource={newDataSource} onSort={(field, sort) => setSortBy([field, sort]) } paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} ></CustomTable>;
+    return <CustomTable {...args} dataSource={newDataSource} onSort={(field, sort) => setSortBy([field, sort])} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} actionsArray={
+        [
+            { key: '1', label: `${t('actions.one')}`, onClick: () => {
+                console.log('oi');
+            } },
+            { key: '2', label: `${t('actions.two')}` },
+            {
+                key: '3', label: 'label 3'
+            }
+        ]
+    }></CustomTable>;
 };
 
 export const Primary = Template.bind({});
@@ -150,3 +161,48 @@ WithCheckbox.args = {
         type: "checkbox"
     }
 };
+
+export const withActions = Template.bind({});
+withActions.args = {
+    fieldsToSort: ['store', 'mecanographicNumber'],
+    selectPlaceholder: 'Order by',
+    dataSource: [
+        {
+            key: `1`,
+            name: `John Brown`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            key: `2`,
+            name: `Mary Brown`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            key: `3`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            key: `4`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    actions: true,
+};

package/src/components/Table/index.tsx

@@ -1,14 +1,20 @@
 import { useState, useEffect } from 'react';
-import { Space, TableProps, Select } from 'antd';
+import { Space, TableProps, Select, Dropdown, MenuProps } from 'antd';
 import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
+import { EllipsisOutlined } from '@ant-design/icons';
 
 export interface FilterOptions {
-    value: string,
-    label: string,
-    direction: string,
+    value: string;
+    label: string;
+    direction: string;
+}
+
+export interface Actions {
+    key: string;
+    label: string;
 }
 
 export enum sortBy {
@@ -23,18 +29,22 @@ export interface customTableProps extends TableProps<any> {
     sortInfo?: any;
     paginationInfo?: any;
     headingTranslationsKey?: string;
+    actions: boolean;
+    actionsArray: any;
 }
 
 export const CustomTable = (props: customTableProps) => {
     const { t } = useTranslation();
 
-    const { 
-        dataSource, 
-        fieldsToSort = ['key', 'name', 'store'], 
-        selectPlaceholder, onSort, 
-        headingTranslationsKey 
+    const {
+        dataSource,
+        fieldsToSort = ['key', 'name', 'store'],
+        selectPlaceholder, onSort,
+        headingTranslationsKey,
+        actions,
+        actionsArray: items,
     } = props;
-    
+
     const [customFilters, setCustomFilters] = useState<any>([]);
     const [customColumns, setCustomColumns] = useState<ColumnsType<any>>([]);
     const [sortInfo, setSortInfo] = useState<any>([]);
@@ -44,7 +54,7 @@ export const CustomTable = (props: customTableProps) => {
             currentPage: pagination.current,
         }
 
-        const getSortAndPaginationInfo = {...sortInfo, ...getPagination}
+        const getSortAndPaginationInfo = { ...sortInfo, ...getPagination }
         props.paginationInfo(getSortAndPaginationInfo);
     };
 
@@ -60,12 +70,32 @@ export const CustomTable = (props: customTableProps) => {
 
     useEffect(() => {
         // Columns
-        const columns = Object.keys(dataSource?.[0]).map(key => ({
-            title: headingTranslationsKey ? `${headingTranslationsKey}.${key}` : key,
-            dataIndex: key,
-            key: key,
-            ellipsis: true,
-        }));
+        let columns = Object.keys(dataSource?.[0]).map(key => {
+            return ({
+                title: headingTranslationsKey ? t(`${headingTranslationsKey}.${key}`) : key,
+                dataIndex: key,
+                key: key,
+                ellipsis: true,
+            })
+        });
+
+        let columnActions = {
+            title: 'Action',
+            key: 'action',
+            dataIndex: 6,
+            ellipsis: false,
+            render: () => (
+                <Space size="middle">
+                    <Dropdown menu={{ items }}>
+                        <a>
+                            <EllipsisOutlined />
+                        </a>
+                    </Dropdown>
+                </Space>
+            ),
+        };
+
+        actions && columns.push(columnActions as any);
 
         setCustomColumns(columns);
 
@@ -113,15 +143,8 @@ export const CustomTable = (props: customTableProps) => {
                 dataSource={dataSource}
                 onChange={handleChange}
                 {...props}
-            >
-                {customColumns.map((column) => (
-                    <Table.Column
-                        key={column.key}
-                        title={headingTranslationsKey ? t(column.title as string) : column.title}
-                        dataIndex={(column as any).dataIndex}
-                    />
-                ))}
-            </Table>
+                columns={customColumns}
+            />
         </div>
     );
 } 

package/src/constants/i18n.ts

@@ -4,19 +4,22 @@ import { initReactI18next } from "react-i18next";
 import en from '../locales/en.json';
 import es from '../locales/es.json';
 import pt from '../locales/pt.json';
+var merge = require('lodash.merge');
 
-i18next
+export const mergei18n = (appResources: any) => {
+    i18next
     .use(initReactI18next)
     .use(LanguageDetector)
     .init({
-        resources: {
+        resources: merge({
             en: { translation: en },
             pt: { translation: pt },
             es: { translation: es },
-        },
+        }, appResources),
         detection: {
             order: ['querystring', 'navigator', 'htmlTag'],
             lookupQuerystring: 'lng',
             htmlTag: document.documentElement,
         },
     });
+}

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './constants/i18n';

package/src/locales/en.json

@@ -11,5 +11,9 @@
         "back": "Go Back",
         "logout": "Log Out",
         "home": "Home"
+    },
+    "actions": {
+        "one": "one",
+        "two": "two"
     }
 }

package/src/locales/es.json

@@ -11,5 +11,9 @@
         "back": "Go Back ES",
         "logout": "Log Out ES",
         "home": "Home ES"
+    },
+    "actions": {
+        "one": "one ES",
+        "two": "two ES"
     }
 }

package/src/locales/pt.json

@@ -11,5 +11,9 @@
         "back": "Go Back PT",
         "logout": "Log Out PT",
         "home": "Home PT"
+    },
+    "actions": {
+        "one": "one PT",
+        "two": "two PT"
     }
 }