diff --git a/react/example/package.json b/react/example/package.json index 3b60fb736e..03856b86bd 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,7 +10,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.2-beta.48", + "@egovernments/digit-ui-components": "0.0.2-beta.49", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", "@egovernments/digit-ui-module-common": "1.7.10", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", diff --git a/react/modules/core/package.json b/react/modules/core/package.json index b596b75b0f..f6468049a6 100644 --- a/react/modules/core/package.json +++ b/react/modules/core/package.json @@ -14,7 +14,7 @@ "prepublish": "yarn build" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.2-beta.48", + "@egovernments/digit-ui-components": "0.0.2-beta.49", "@egovernments/digit-ui-react-components": "1.8.1-beta.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json index c2c26516c3..928af8ed43 100644 --- a/react/modules/sample/package.json +++ b/react/modules/sample/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.2-beta.48", + "@egovernments/digit-ui-components": "0.0.2-beta.49", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/react/package.json b/react/package.json index 216d112adb..b58aec4cd5 100644 --- a/react/package.json +++ b/react/package.json @@ -85,7 +85,7 @@ "@egovernments/digit-ui-module-sample": "0.0.1", "@egovernments/digit-ui-react-components": "1.7.10", "@egovernments/digit-ui-svg-components": "1.0.12", - "@egovernments/digit-ui-components": "0.0.2-beta.48", + "@egovernments/digit-ui-components": "0.0.2-beta.49", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "css-loader": "5.2.6", diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 61f33a9a67..6a1a498ae1 100644 --- a/react/ui-components/package.json +++ b/react/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-components", - "version": "0.0.2-beta.48", + "version": "0.0.2-beta.49", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", diff --git a/react/ui-components/src/molecules/CustomDropdown.js b/react/ui-components/src/molecules/CustomDropdown.js index 7bfc0ce68e..dabd67f7f9 100644 --- a/react/ui-components/src/molecules/CustomDropdown.js +++ b/react/ui-components/src/molecules/CustomDropdown.js @@ -7,7 +7,7 @@ import Dropdown from "../atoms/Dropdown"; import Toggle from "../atoms/Toggle"; import { createFunction } from "./techMolecules/createFunction"; -const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disabled, type, additionalWrapperClass = "",variant }) => { +const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disabled, type, additionalWrapperClass = "",variant,mdmsv2}) => { const master = { name: config?.mdmsConfig?.masterName }; if (config?.mdmsConfig?.filter) { master["filter"] = config?.mdmsConfig?.filter; @@ -15,15 +15,15 @@ const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyl const { isLoading, data } = window?.Digit?.Hooks.useCustomMDMS(Digit?.ULBService?.getStateId(), config?.mdmsConfig?.moduleName, [master], { select: config?.mdmsConfig?.select - ? createFunction(config?.mdmsConfig?.select) - : (data) => { + ? createFunction(config?.mdmsConfig?.select) + : (data) => { const optionsData = _.get(data, `${config?.mdmsConfig?.moduleName}.${config?.mdmsConfig?.masterName}`, []); return optionsData .filter((opt) => (opt?.hasOwnProperty("active") ? opt.active : true)) .map((opt) => ({ ...opt, name: `${config?.mdmsConfig?.localePrefix}_${Digit.Utils.locale.getTransformedLocale(opt.code)}` })); }, - enabled: config?.mdmsConfig ? true : false, - }); + enabled: (config?.mdmsConfig || config?.mdmsv2) ? true : false, + },mdmsv2); if (isLoading) { return ; diff --git a/react/ui-components/src/molecules/TableMolecule.js b/react/ui-components/src/molecules/TableMolecule.js index 984a527cca..57cf9760d6 100644 --- a/react/ui-components/src/molecules/TableMolecule.js +++ b/react/ui-components/src/molecules/TableMolecule.js @@ -27,6 +27,11 @@ const TableMolecule = ({ pagination = { initialRowsPerPage: 5, rowsPerPageOptions: [5, 10, 15, 20], + manualPagination : false, + onPageSizeChange : () => {}, + onNextPage : () => {}, + onPrevPage : () => {}, + currentPage : 1 }, styles = { withBorder: false, @@ -43,6 +48,7 @@ const TableMolecule = ({ sorting = { isTableSortable: true, initialSortOrder: "ascending", + customSortFunction:()=>{} }, selection = { addCheckbox: false, @@ -69,7 +75,7 @@ const TableMolecule = ({ actions, }) => { const { t } = useTranslation(); - const [currentPage, setCurrentPage] = useState(1); + const [currentPage, setCurrentPage] = useState(pagination?.currentPage || 1); const [expandedRows, setExpandedRows] = useState([]); const [rowsPerPage, setRowsPerPage] = useState( pagination?.initialRowsPerPage @@ -159,6 +165,10 @@ const TableMolecule = ({ if (!sortOrder) return; const sortRows = (columnIndex) => { const newSortedRows = [...rows]; + if (sortOrder === "custom") { + setSortedRows(sorting?.customSortFunction(newSortedRows,columnIndex)); + return; + } newSortedRows.sort((a, b) => { const columnA = a[columnIndex]; const columnB = b[columnIndex]; @@ -192,7 +202,7 @@ const TableMolecule = ({ sortRows(firstSortableColumnIndex); } } - }, [sortedColumnIndex, sortOrder, rows, headerData]); + }, [sortedColumnIndex, sortOrder, rows, headerData,sorting]); const currentRows = sorting?.isTableSortable ? sortedRows?.slice(indexOfFirstRow, indexOfLastRow) @@ -661,7 +671,7 @@ const TableMolecule = ({ className="pagination-dropdown" id="rowsPerPage" value={rowsPerPage} - onChange={handleRowsPerPageChange} + onChange={pagination?.manualPagination ? pagination?.onPageSizeChange : handleRowsPerPageChange} > {pagination?.rowsPerPageOptions.map((option) => ( @@ -679,7 +689,7 @@ const TableMolecule = ({ handlePageChange(currentPage - 1)} + onClick={pagination?.manualPagination ? () => pagination?.onPrevPage() : () => handlePageChange(currentPage - 1)} disabled={currentPage === 1} > handlePageChange(currentPage + 1)} + onClick={pagination?.manualPagination ? () => pagination?.onNextPage() : () => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} > {}, + onNextPage: () => {}, + onPrevPage: () => {} }, styles: { withBorder: false, diff --git a/react/ui-components/src/molecules/stories/TableMolecule.stories.js b/react/ui-components/src/molecules/stories/TableMolecule.stories.js index fd90ed50a8..9f47e563f5 100644 --- a/react/ui-components/src/molecules/stories/TableMolecule.stories.js +++ b/react/ui-components/src/molecules/stories/TableMolecule.stories.js @@ -1374,7 +1374,11 @@ const commonArgs = { }, pagination:{ initialRowsPerPage:5, - rowsPerPageOptions:[5,10,15,20] + rowsPerPageOptions:[5,10,15,20], + manualPagination:false, + onNextPage:()=>{}, + onPrevPage:()=>{}, + onPageSizeChange:()=>{} }, tableDetails:{ tableTitle: "", @@ -1382,7 +1386,8 @@ const commonArgs = { }, sorting:{ isTableSortable:false, - initialSortOrder:"" + initialSortOrder:"", + customSortFunction:()=>{} }, selection: { addCheckbox: false, @@ -2616,4 +2621,71 @@ WithOnlyOneRowNestedTable.args = { showSelectedState: false, }, onRowClick: undefined +}; + +export const ManualPagination = Template.bind({}); +ManualPagination.args = { + ...commonArgs, + headerData: headerData, + rows:rows, + pagination:{ + initialRowsPerPage: 2, + rowsPerPageOptions: [2, 4, 6, 8, 10], + manualPagination: true, + onPageSizeChange:(event)=> { console.log(event)}, + onNextPage:()=>{console.log("onNextPage")}, + onPrevPage:()=>{console.log("onPrevPage")} + }, + styles:{ + withAlternateBg: false, + withColumnDivider: false, + extraStyles: {}, + withHeaderDivider:true, + withRowDivider:true, + withBorder:true, + }, + selection: { + addCheckbox: false, + checkboxLabel: '', + initialSelectedRows: [], + onSelectedRowsChange: (e) => { + console.log("These are the selected rows", e); + }, + showSelectedState: false, + }, + onRowClick:undefined, +}; + +const myCustomSort = (rows, columnIndex) => { + const middleIndex = Math.floor(rows.length / 2); + const firstHalfReversed = [...rows.slice(0, middleIndex)].reverse(); + const secondHalf = rows.slice(middleIndex); + return [...firstHalfReversed, ...secondHalf]; +}; + + +export const WithCustomSortOrder = Template.bind({}); +WithCustomSortOrder.args = { + ...commonArgs, + headerData: headerData, + rows:rows, + pagination:{ + initialRowsPerPage: 2, + rowsPerPageOptions: [2, 4, 6, 8, 10], + }, + selection: { + addCheckbox: false, + checkboxLabel: 'Select All', + initialSelectedRows: [], + onSelectedRowsChange: (e) => { + console.log("These are the selected rows", e); + }, + showSelectedState: false, + }, + sorting:{ + initialSortOrder: "custom", + isTableSortable:true, + customSortFunction:myCustomSort + }, + onRowClick:undefined, }; \ No newline at end of file