Skip to content

Commit

Permalink
Merge pull request #442 from sebgroup/develop
Browse files Browse the repository at this point in the history 
Minor release
  • Loading branch information
@kherP
kherP authored Jul 17, 2020
2 parents 9f68456 + 7b24661 commit 36e4a5a
Show file tree
Hide file tree
Showing 8 changed files with 81 additions and 149 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ npm-debug.log
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
.history/

# Windows
Thumbs.db
Expand Down
46 changes: 26 additions & 20 deletions develop/components/pages/TablePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Dropdown, DropdownItem } from "../../../src/Dropdown/Dropdown";
import { TextBox } from "../../../src/TextBox/TextBox";
import { Button } from "../../../src/Button/Button";
import Highlight from "react-highlight";
import { Chip } from "../../../src/Chip/Chip";
const docMD = require("../../../src/Table/readme.md");

interface TableDataProps {
Expand Down Expand Up @@ -94,6 +95,7 @@ const TablePage: React.FunctionComponent = () => {
],
[]
);

const [filters, setFilters] = React.useState<Array<FilterItem>>(columns.map((column: Column) => ({ accessor: column.accessor, filters: [] })));

React.useEffect(() => {
Expand Down Expand Up @@ -147,25 +149,6 @@ const TablePage: React.FunctionComponent = () => {

const filterProps: FilterProps = {
onAfterFilter: (rows: Array<TableRow>) => {},
onRemoveFilter: (item: { accessor: string; value: string }) => {
const updatedFilters: Array<FilterItem> = filters.map((filter: FilterItem) => {
if (filter.accessor === item.accessor) {
const indexOfFilterTobeRemoved: number = filter?.filters?.findIndex((filterItem: string) => filterItem === item.value);
return { ...filter, filters: [...filter?.filters?.slice(0, indexOfFilterTobeRemoved), ...filter?.filters?.slice(indexOfFilterTobeRemoved + 1)] };
}
return filter;
});
if (item?.accessor === "status") {
const selectedFilter: FilterItem = updatedFilters?.find((filter: FilterItem) => filter.accessor === "status");
const updatedStatus: Array<DropdownItem> = selectedFilter?.filters?.map((item: string) => ({ label: item, value: item }));
setStatusDropdownSelected(updatedStatus);
} else if (item?.accessor === "age") {
const selectedFilter: FilterItem = updatedFilters?.find((filter: FilterItem) => filter.accessor === "age");
const updatedStatus: Array<DropdownItem> = selectedFilter?.filters?.map((item: string) => ({ label: item, value: item }));
setAgeDropdownSelected(updatedStatus);
}
setFilters(updatedFilters);
},
filterItems: filters,
};

Expand Down Expand Up @@ -300,7 +283,13 @@ const TablePage: React.FunctionComponent = () => {

<p>Here is an example with actions column</p>
<div className="result wide">
<Table columns={columns} data={smallData} primaryActionButton={primaryButton} actionLinks={actionLinks} />
<Table
columns={columns}
data={smallData}
primaryActionButton={primaryButton}
actionLinks={actionLinks}
footer={<Pagination value={paginationValue1} onChange={setPagination1} size={listSize} useFirstAndLast={true} />}
/>
</div>

<p>Here is an example with filter</p>
Expand All @@ -314,6 +303,23 @@ const TablePage: React.FunctionComponent = () => {
</div>
<div className="col-3"></div>
</div>
<div className="d-flex flex-row">
{statusDropdownSelected.map((status: DropdownItem) => {
return (
<Chip key={status.value} className="m-2" onClose={null}>
{status.label}
</Chip>
);
})}

{ageDropdownSelected.map((status: DropdownItem) => {
return (
<Chip key={status.value} className="m-2" onClose={null}>
{status.label}
</Chip>
);
})}
</div>
<Table columns={columns} data={smallData} filterProps={filterProps} onRowSelected={(rows: Array<TableRow>) => {}} onRowExpanded={(rows: Array<TableRow>) => {}} />
</div>

Expand Down
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = (props: DropdownProps):
const allSelected: boolean = selectedList.length === uniqueList.length;

// adding the select all row on top of the list for multi select option
if (props.multi && searchText.length === 0) {
if (props.multi && props.list.length > 1 && searchText.length === 0) {
displayList.unshift({
id: "select-all",
dropdownItem: {
Expand Down
18 changes: 6 additions & 12 deletions src/Table/Table.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,8 @@ describe("Component: Table", () => {
it("Should render and enable custom button", async () => {
const primaryActionButton: PrimaryActionButton = {
label: "Buy",
buttonSize: "sm",
buttonTheme: "danger",
onClick: jest.fn((e: React.MouseEvent<HTMLButtonElement>) => {}),
};

Expand All @@ -483,6 +485,10 @@ describe("Component: Table", () => {
});

expect(primaryActionButton.onClick).toHaveBeenCalled();

//check theme and button sizes
expect(container.querySelector("tbody tr.parent-row td .action-column > .btn-danger")).toBeTruthy();
expect(container.querySelector("tbody tr.parent-row td .action-column > .btn-sm")).toBeTruthy();
});

it("Should render and support filtering ", async () => {
Expand All @@ -499,8 +505,6 @@ describe("Component: Table", () => {
results = rows;
});

const onRemoveFilter: jest.Mock = jest.fn();

const filterValues: Array<string> = smallData.map((data: DataItem<any>) => data.status);

await act(async () => {
Expand All @@ -516,7 +520,6 @@ describe("Component: Table", () => {
},
],
onAfterFilter: onAfterFilterCallBack,
onRemoveFilter: onRemoveFilter,
}}
/>,
container
Expand All @@ -526,15 +529,6 @@ describe("Component: Table", () => {
// after filter, the length of the result should decrease
expect(results.length).not.toEqual(smallData.length);
expect(onAfterFilterCallBack).toBeCalled();
expect(onRemoveFilter).not.toBeCalled();

// mock on

await act(async () => {
container.querySelector("tbody .filter-item-holder .filter-item .icon-holder").dispatchEvent(new MouseEvent("click", { bubbles: true }));
});

expect(onRemoveFilter).toBeCalled();
});

it("Should render and support searching ", async () => {
Expand Down
86 changes: 23 additions & 63 deletions src/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export interface ActionLinkItem {

export interface PrimaryActionButton {
label: string;
buttonTheme?: "link" | "outline-primary" | "secondary" | "ghost-dark" | "ghost-light" | "danger" | "primary";
buttonSize?: "lg" | "md" | "sm";
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, selectedRow: TableRow) => void;
}

Expand Down Expand Up @@ -95,17 +97,16 @@ export const enum sortDirectionTypes {
*/
function sumCols(colsLength: number, useSelection?: boolean, useShowActionColumn?: boolean, useGroupBy?: boolean): number {
let sum = colsLength;
if (useSelection || useGroupBy) {
if (useSelection) {
sum = sum + 1;
}

if (useGroupBy) {
sum = sum + 1;
}
if (useShowActionColumn) {
sum = sum + 1;
}
if (useSelection) {
sum = sum + 1;
}

if (useGroupBy) {
sum = sum + 1;
}
if (useShowActionColumn) {
sum = sum + 1;
}

return sum;
Expand Down Expand Up @@ -229,7 +230,9 @@ const ActionColumn: React.FunctionComponent<ActionColumnProps> = (props: ActionC
<button
id={btnPrimaryRandomIds}
type="button"
className="btn btn-outline-primary btn-sm"
className={`btn btn-${props.primaryActionButton.buttonTheme ? props.primaryActionButton.buttonTheme : "outline-primary"} btn-${
props.primaryActionButton?.buttonSize ? props.primaryActionButton?.buttonSize : "sm"
}`}
onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
props.primaryActionButton?.onClick && props.primaryActionButton.onClick(e, props.selectedRow);
}}
Expand Down Expand Up @@ -410,46 +413,6 @@ const RowUI: React.FunctionComponent<RowUIProps> = (props: RowUIProps) => {
);
};

interface FilterRowProps {
columns: Array<TableHeader>;
useRowCollapse: boolean;
useRowSelection: boolean;
showFilterRow?: boolean;
filterProps: FilterProps;
}

const FilterRowUI: React.FunctionComponent<FilterRowProps> = (props: FilterRowProps) => {
return (
props.showFilterRow && (
<tr className="tr-filter">
{(props.useRowSelection || props.useRowCollapse) && <td />}
{props.columns?.map((column: TableHeader, index: number) => (
<td key={`filter-column-${index}`} className="filter-column">
<div className="filter-item-holder">
{column.filters?.map((filter: string, filterIndex: number) => {
return (
<div className="filter-item" key={`filter-item-${filterIndex}`}>
{filter}
<div
className="icon-holder"
role="link"
onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
props.filterProps?.onRemoveFilter({ accessor: column?.accessor, value: filter });
}}
>
{timesIcon}
</div>
</div>
);
})}
</div>
</td>
))}
</tr>
)
);
};

interface TableUIProps {
actionLinks?: Array<ActionLinkItem>;
allRowsAreSelected?: boolean;
Expand Down Expand Up @@ -515,11 +478,11 @@ const TableUI: React.FunctionComponent<TableUIProps> = React.memo(
}
}}
>
{header.label}
<span className="th-label">{header.label}</span>
{props.sortable && header.canSort && (
<div role="link" className={"icon-holder" + (header.isSorted ? (header.isSortedDesc ? " desc" : " asc") : "")} id={header.accessor}>
<span role="link" className={"icon-holder" + (header.isSorted ? (header.isSortedDesc ? " desc" : " asc") : "")} id={header.accessor}>
{defaultSort}
</div>
</span>
)}
</th>
) : null;
Expand All @@ -528,13 +491,6 @@ const TableUI: React.FunctionComponent<TableUIProps> = React.memo(
</tr>
</thead>
<tbody>
<FilterRowUI
showFilterRow={props.showFilterRow}
columns={props.columns}
useRowCollapse={props.useRowCollapse}
filterProps={props.filterProps}
useRowSelection={props.useRowSelection}
/>
{props.rows?.map((row: TableRow, i: number) => {
return (
<React.Fragment key={row.rowIndex}>
Expand Down Expand Up @@ -592,6 +548,11 @@ const TableUI: React.FunctionComponent<TableUIProps> = React.memo(
</React.Fragment>
);
})}
{props.rows?.length === 0 && (
<tr>
<td colSpan={sumCols(props.columns?.length, props.useRowSelection || props.useRowCollapse, props.useShowActionColumn, false)}>Record empty</td>
</tr>
)}
</tbody>
<tfoot>
{props.footer && (
Expand Down Expand Up @@ -625,7 +586,6 @@ export interface FilterItem {
export interface FilterProps {
filterItems: Array<FilterItem>;
onAfterFilter: (rows: Array<TableRow>) => void;
onRemoveFilter: (item: { accessor: string; value: string }) => void;
}

export interface EditProps {
Expand Down Expand Up @@ -1135,7 +1095,7 @@ const Table: React.FunctionComponent<TableProps> = React.memo(
});

React.useEffect(() => {
if (tableColumns?.length && tableRows?.length) {
if (tableColumns?.length && tableRowsImage?.length) {
const shouldFilter: boolean = tableColumns.some((column: TableHeader) => column.filters?.length);
if (shouldFilter) {
const filteredRows: Array<TableRow> = filterArray(tableRowsImage, tableColumns);
Expand Down
Loading

0 comments on commit 36e4a5a

Please sign in to comment.