Skip to content

Commit

Permalink
feat(table): add mor etypings and finitions
Browse files Browse the repository at this point in the history 
refactor, add more typings and move searcj to a props
  • Loading branch information
Salihu Abdullahi authored and Salihu Abdullahi committed Jan 2, 2020
1 parent d612ff4 commit 2fafdd1
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 104 deletions.
24 changes: 13 additions & 11 deletions develop/components/pages/TablePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { Table, Column, TableRow, PrimaryActionButton, ActionLinkItem, TableHeader } from "../../../src/Table/Table";
import { Table, Column, TableRow, PrimaryActionButton, ActionLinkItem, TableHeader, DataItem } from "../../../src/Table/Table";
import makeData from "../../utils/makeData";
import { Pagination } from "../../../src/Pagination/Pagination";
import { Dropdown, DropdownItem } from "../../../src/Dropdown/Dropdown";
Expand Down Expand Up @@ -61,8 +61,8 @@ const TablePage: React.FunctionComponent = () => {
],
[]
);
const data = React.useMemo(() => makeData(listSize, 5), []);
const smallData = React.useMemo(() => makeData(5, 5), []);
const data: Array<DataItem> = React.useMemo(() => makeData<Array<DataItem>>([listSize, 5]), []);
const smallData: Array<DataItem> = React.useMemo(() => makeData<Array<DataItem>>([5, 5]), []);
return (
<div className="route-template container">
<div className="info-holder">
Expand Down Expand Up @@ -127,7 +127,7 @@ const TablePage: React.FunctionComponent = () => {
<Table
columns={columns}
data={smallData}
onRowSelection={(rows: Array<TableRow>) => { console.log("The selected rows are ", rows); }}
onRowSelected={(rows: Array<TableRow>) => { console.log("The selected rows are ", rows); }}
/>
</div>

Expand All @@ -136,7 +136,7 @@ const TablePage: React.FunctionComponent = () => {
<Table
columns={columns}
data={smallData}
onRowSelection={(rows: Array<TableRow>) => { console.log("The selected rows are ", rows); }}
onRowSelected={(rows: Array<TableRow>) => { console.log("The selected rows are ", rows); }}
onRowExpanded={(rows: Array<TableRow>) => { console.log("the expanded ros are ", rows); }}
/>
</div>
Expand Down Expand Up @@ -185,15 +185,17 @@ const TablePage: React.FunctionComponent = () => {
offset={pageSize}
currentpage={paginationValue}
usePagination={true}
searchInColumns={dropDownList1Selected ? dropDownList1Selected.map((item: DropdownItem) => item.value) : []}
searchText={textBoxValue2}
triggerSearchOn="Submit"
searchProps={{
searchInColumns: dropDownList1Selected ? dropDownList1Selected.map((item: DropdownItem) => item.value) : [],
searchText: textBoxValue2,
triggerSearchOn: "Submit",
searchTriggered: searchTriggered,
onSearch: (searchResults: Array<TableRow>) => { console.log("the search is now ", searchResults); }
}}
primaryActionButton={primaryButton}
actionLinks={actionLinks}
searchTriggered={searchTriggered}
onSearch={(searchResults: Array<TableRow>) => { console.log("the search is now ", searchResults); }}
onSort={(rows: Array<TableRow>, sortByColumn: TableHeader) => { console.log("The sorted rows are ", rows); }}
onRowSelection={(rows: Array<TableRow>) => { console.log("The selected rows are ", rows); }}
onRowSelected={(rows: Array<TableRow>) => { console.log("The selected rows are ", rows); }}
onRowExpanded={(rows: Array<TableRow>) => { console.log("the expanded ros are ", rows); }}
footer={
<Pagination
Expand Down
16 changes: 8 additions & 8 deletions develop/utils/makeData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import * as React from "react";
const namor = require("namor");

const range = (len: number) => {
const arr = [];
function range(len: number): Array<number> {
const arr: Array<number> = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};

const newPerson = (): object => {
const statusChance = Math.random();
function newPerson(): object {
const statusChance: number = Math.random();
return {
id: namor.generate({ words: 1, numbers: 1}),
id: namor.generate({ words: 1, numbers: 1 }),
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
Expand All @@ -27,9 +27,9 @@ const newPerson = (): object => {
};
};

export default function makeData(...lens) {
const makeDataLevel = (depth = 0) => {
const len = lens[depth]
export default function makeData<T>(lens: Array<number>): T {
const makeDataLevel: Function = (depth: number = 0): object | Function => {
const len: number = lens[depth]
return range(len).map((d: number) => {
return {
...newPerson(),
Expand Down
28 changes: 16 additions & 12 deletions src/Table/Table.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from "react";
import { unmountComponentAtNode, render } from "react-dom";
import { Column, Table, TableRow, TableHeader, ActionLinkItem, Data } from "./Table";
import { Column, Table, TableRow, TableHeader, ActionLinkItem, DataItem } from "./Table";
import makeData from "../../develop/utils/makeData";
import { act } from "react-dom/test-utils";
import { Pagination } from "../Pagination/Pagination";
Expand Down Expand Up @@ -40,8 +40,8 @@ describe("Component: Table", () => {
},
];

const data: Array<Data> = makeData(30, 5);
const smallData: Array<Data> = makeData(5, 5);
const data: Array<DataItem> = makeData([30, 5]);
const smallData: Array<DataItem> = makeData([5, 5]);

beforeEach(() => {
container = document.createElement("div");
Expand Down Expand Up @@ -159,7 +159,7 @@ describe("Component: Table", () => {
<Table
columns={columns}
data={smallData}
onRowSelection={onItemSelected}
onRowSelected={onItemSelected}
/>, container
);
});
Expand Down Expand Up @@ -246,10 +246,12 @@ describe("Component: Table", () => {
<Table
columns={columns}
data={smallData}
searchInColumns={[]}
triggerSearchOn="Change"
searchText={smallData[1].firstName}
onSearch={customButtonCallBack}
searchProps={{
searchInColumns: [],
triggerSearchOn: "Change",
searchText: smallData[1].firstName,
onSearch: customButtonCallBack
}}
/>, container
);
});
Expand All @@ -262,10 +264,12 @@ describe("Component: Table", () => {
<Table
columns={columns}
data={smallData}
searchInColumns={["firstName", "lastName"]}
triggerSearchOn="Change"
searchText={smallData[1].firstName}
onSearch={customButtonCallBack}
searchProps={{
searchInColumns: ["firstName", "lastName"],
triggerSearchOn: "Change",
searchText: smallData[1].firstName,
onSearch: customButtonCallBack
}}
/>, container
);
});
Expand Down
91 changes: 41 additions & 50 deletions src/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from "react";
import { randomId } from "../__utils/randomId";

import "./table-style.scss";

Expand All @@ -9,7 +10,7 @@ const sortAsc: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0
const sortDesc: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 644"><path transform="translate(0 240)" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" /><path fill="#adadad" transform="translate(0 -100)" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>;
const defaultSort: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 644"><path transform="translate(0 240)" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" /><path transform="translate(0 -100)" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" /></svg>;

export type Data = { [name: string]: any } & TableRow;
export type DataItem = { [name: string]: any } & TableRow;

export interface Column {
label: string;
Expand Down Expand Up @@ -42,15 +43,11 @@ export interface TableRow {
rowIndex: number;
cells: Array<Cell>;
selected?: boolean;
subRows: Array<TableRow>;
subRows?: Array<TableRow>;
expanded?: boolean;
rowContentDetail?: React.ReactNode;
}

function generateRandomId(seed: string): string {
return seed + String((Math.random() * 1000) + (new Date()).getTime());
}

export const enum sortDirectionTypes {
Ascending = "ASC",
Descending = "DESC"
Expand Down Expand Up @@ -145,7 +142,7 @@ interface ActionColumnProps {
}

const ActionColumn: React.FunctionComponent<ActionColumnProps> = (props: ActionColumnProps) => {
const btnPrimaryRandomIds = generateRandomId("btn");
const btnPrimaryRandomIds = randomId("btn");
return (
<div className="action-column">
{props.primaryActionButton &&
Expand Down Expand Up @@ -210,8 +207,8 @@ interface TableUIProps {
primaryActionButton?: PrimaryActionButton;
}

export const TableUI: React.FunctionComponent<TableUIProps> = React.memo((props: TableUIProps): React.ReactElement<void> => {
const checkAllRandomIds = generateRandomId("chk-all");
const TableUI: React.FunctionComponent<TableUIProps> = React.memo((props: TableUIProps): React.ReactElement<void> => {
const checkAllRandomIds: string = randomId("chk-all");
return (
<div className={"table-responsive" + (props.loading ? " skeleton-loader skeleton-loader-table" : "")}>
<table className={"table" + (props.className ? ` ${props.className}` : "")}>
Expand Down Expand Up @@ -270,7 +267,7 @@ export const TableUI: React.FunctionComponent<TableUIProps> = React.memo((props:
</thead>
<tbody>
{props.rows.map((row: TableRow, i: number) => {
const checkRowRandomIds = generateRandomId("chk-");
const checkRowRandomIds: string = randomId("chk-");
return (
<React.Fragment key={row.rowIndex}>
<tr className={"parent-row" + (row.expanded ? " expanded" : "")}>
Expand Down Expand Up @@ -324,7 +321,7 @@ export const TableUI: React.FunctionComponent<TableUIProps> = React.memo((props:
</tr>

{row.subRows.map((subRow: TableRow) => {
const checkSubRowRandomIds = generateRandomId("sub-chk-");
const checkSubRowRandomIds: string = randomId("sub-chk-");
return (
<React.Fragment key={`sub-row-${subRow.rowIndex}`}>
<tr
Expand Down Expand Up @@ -423,34 +420,27 @@ export const TableUI: React.FunctionComponent<TableUIProps> = React.memo((props:
);

});

interface TableProps {
columns: Array<Column>;
data: Array<Data>;
className?: string;

// pagination
usePagination?: boolean;
offset?: number;
currentpage?: number;

// search and filter
interface SearchProps {
onSearch?: (rows: Array<TableRow>) => void;
searchInColumns?: Array<string>;
searchText?: string;
triggerSearchOn?: "Change" | "Submit";
searchTriggered?: boolean;

// actions props
triggerSearchOn?: "Change" | "Submit";
}
interface TableProps {
actionLinks?: Array<ActionLinkItem>;
primaryActionButton?: PrimaryActionButton;

className?: string;
searchProps?: SearchProps;
columns: Array<Column>;
currentpage?: number;
data: Array<DataItem>;
footer?: React.ReactNode;

// events
onRowSelection?: (selectedRows: Array<TableRow>) => void;
offset?: number;
onRowExpanded?: (expandedRowList: Array<TableRow>) => void;
onRowSelected?: (selectedRows: Array<TableRow>) => void;
onSort?: (rows: Array<TableRow>, sortByColumn: TableHeader) => void;
onSearch?: (rows: Array<TableRow>) => void;
primaryActionButton?: PrimaryActionButton;
usePagination?: boolean;
}

export const Table: React.FunctionComponent<TableProps> = React.memo((props: TableProps): React.ReactElement<void> => {
Expand Down Expand Up @@ -485,7 +475,7 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab
setCurrentTableRows(updatedRows);
setTableRows(updatedOriginalRows);
setTableRowsImage(updatedOriginalRows);
props.onRowSelection(selectedRowList);
props.onRowSelected(selectedRowList);
};

/**
Expand Down Expand Up @@ -515,7 +505,7 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab
setCurrentTableRows(updatedRows);
setTableRows(updatedOriginalRows);
setTableRowsImage(updatedOriginalRows);
props.onRowSelection(updatedOriginalRows);
props.onRowSelected(updatedOriginalRows);
};

/**
Expand Down Expand Up @@ -636,7 +626,7 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab
*
* @param rows The table or or data to initialize rows from
*/
const getRows = (rows: Array<Data>): Array<TableRow> => {
const getRows = (rows: Array<DataItem>): Array<TableRow> => {
const updatedRows: Array<TableRow> = rows.map((row: TableRow, index: number) => {
const updatedCells: Array<Cell> = Object.keys(row).filter((key: string) => {
return key !== "rowContentDetail" && key !== "subRows";
Expand Down Expand Up @@ -702,10 +692,6 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab
setTableRowsImage(updatedRows);
};

React.useEffect(() => {
doPaginate();
}, [tableRows]);

const doPaginate = (): void => {
if (props.usePagination && props.currentpage && props.offset && (tableRows.length > 0)) {
// pagination start from 1 hence the need fro deducting 1
Expand All @@ -730,19 +716,24 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab

const doSearch = (): void => {
let searchResult: Array<TableRow> = [];
if (props.searchText && props.searchInColumns && props.searchInColumns.length > 0) {
searchResult = searchTextInArray(tableRowsImage, props.searchText, props.searchInColumns);
if (props.searchProps?.searchText && props.searchProps?.searchInColumns && props.searchProps?.searchInColumns.length > 0) {
searchResult = searchTextInArray(tableRowsImage, props.searchProps.searchText, props.searchProps.searchInColumns);
} else {
searchResult = [...tableRowsImage];
}

setTableRows(searchResult);
props.onSearch && props.onSearch(searchResult);
props.searchProps?.onSearch && props.searchProps?.onSearch(searchResult);
};

// useEffects ----------------------------------------------------------

React.useEffect(() => {
doPaginate();
}, [tableRows]);

React.useEffect(() => {
if (!!props.onRowSelection) {
if (!!props.onRowSelected) {
const notAllsAreRowsSelected = tableRows.some((row: TableRow) => !row.selected);

if (notAllsAreRowsSelected) {
Expand All @@ -754,20 +745,20 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab
}, [currentTableRows]);

React.useEffect(() => {
if (!!props.onSearch) {
if (props.triggerSearchOn === "Change") {
if (!!props.searchProps?.onSearch) {
if (props.searchProps.triggerSearchOn === "Change") {
doSearch();
}
}
}, [props.searchInColumns, props.searchText]);
}, [props.searchProps?.searchInColumns, props.searchProps?.searchText]);

React.useEffect(() => {
if (!!props.onSearch) {
if (props.triggerSearchOn === "Submit") {
if (!!props.searchProps?.onSearch) {
if (props.searchProps?.triggerSearchOn === "Submit") {
doSearch();
}
}
}, [props.searchTriggered]);
}, [props.searchProps?.searchTriggered]);

React.useEffect(() => {
const updatedColumns: Array<TableHeader> = props.columns.map((column: TableHeader) => {
Expand Down Expand Up @@ -798,7 +789,7 @@ export const Table: React.FunctionComponent<TableProps> = React.memo((props: Tab
footer={props.footer}
onSort={onSortItems}
sortable={!!props.onSort}
useRowSelection={!!props.onRowSelection}
useRowSelection={!!props.onRowSelected}
useRowCollapse={!!props.onRowExpanded}
allRowsAreSelected={allItemsChecked}
onItemSelected={onItemSelected}
Expand Down
Loading

0 comments on commit 2fafdd1

Please sign in to comment.