Skip to content

Commit

Permalink
ref: move code to utils
Browse files Browse the repository at this point in the history
  • Loading branch information
mayan-000 committed Feb 6, 2024
1 parent 42c224f commit 2685a69
Show file tree
Hide file tree
Showing 6 changed files with 156 additions and 72 deletions.
74 changes: 9 additions & 65 deletions packages/design-system/src/components/cookieTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,13 @@ import React, {
useReducer,
} from 'react';
import { CookieTableData, getCookieKey } from '@ps-analysis-tool/common';
import { saveAs } from 'file-saver';
import classNames from 'classnames';

/**
* Internal dependencies.
*/
import { Table, TableColumn, TableData, TableFilter, TableRow } from '../table';
import { TableProvider } from '../table/useTable';
import { generateCookieTableCSV } from '../table/utils';
import { conditionalTableRowClassesHandler, exportCookies } from './utils';

interface CookieTableProps {
data: TableData[];
Expand Down Expand Up @@ -107,14 +105,6 @@ const CookieTable = forwardRef<
[onRowClick, onRowContextMenu]
);

const exportCookies = useCallback((rows: TableRow[]) => {
const _cookies = rows.map(({ originalData }) => originalData);
if (_cookies.length > 0 && 'parsedCookie' in _cookies[0]) {
const csvTextBlob = generateCookieTableCSV(_cookies as CookieTableData[]);
saveAs(csvTextBlob, 'Cookies Report.csv');
}
}, []);

const getRowObjectKey = useCallback(
(row: TableRow) =>
getCookieKey(
Expand All @@ -141,62 +131,16 @@ const CookieTable = forwardRef<
return key === null ? null : getCookieKey(key?.parsedCookie);
}, [selectedFrameCookie]);

const conditionalTableRowClasses = useCallback(
// eslint-disable-next-line complexity
const _conditionalTableRowClassesHandler = useCallback(
(row: TableRow, isRowFocused: boolean, rowIndex: number) => {
const rowKey = getRowObjectKey(row);
const isBlocked =
(row.originalData as CookieTableData)?.isBlocked ||
(((row.originalData as CookieTableData)?.isBlocked ?? false) &&
(row.originalData as CookieTableData)?.blockedReasons &&
(row.originalData as CookieTableData)?.blockedReasons?.length);
const isHighlighted = row.originalData?.highlighted;
const isDomainInAllowList = (row.originalData as CookieTableData)
?.isDomainInAllowList;

const tableRowClassName = classNames(
isBlocked &&
(rowKey !== selectedKey
? rowIndex % 2
? 'dark:bg-flagged-row-even-dark bg-flagged-row-even-light'
: 'dark:bg-flagged-row-odd-dark bg-flagged-row-odd-light'
: isRowFocused
? 'bg-gainsboro dark:bg-outer-space'
: 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'),
isDomainInAllowList &&
!isBlocked &&
(rowKey !== selectedKey
? rowIndex % 2
? 'dark:bg-jungle-green-dark bg-leaf-green-dark'
: 'dark:bg-jungle-green-light bg-leaf-green-light'
: isRowFocused
? 'bg-gainsboro dark:bg-outer-space'
: 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'),
rowKey !== selectedKey &&
!isBlocked &&
!isDomainInAllowList &&
(rowIndex % 2
? isHighlighted
? 'bg-dirty-pink'
: 'bg-anti-flash-white dark:bg-charleston-green'
: isHighlighted
? 'bg-dirty-pink text-dirty-red dark:text-dirty-red text-dirty-red'
: 'bg-white dark:bg-raisin-black'),
rowKey === selectedKey &&
!isBlocked &&
!isDomainInAllowList &&
(isRowFocused
? isHighlighted
? 'bg-dirty-red'
: 'bg-gainsboro dark:bg-outer-space'
: isHighlighted
? 'bg-dirty-pink text-dirty-red'
: 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver')
return conditionalTableRowClassesHandler(
row,
isRowFocused,
rowIndex,
selectedKey
);

return tableRowClassName;
},
[getRowObjectKey, selectedKey]
[selectedKey]
);

const hasVerticalBar = useCallback((row: TableRow) => {
Expand All @@ -223,7 +167,7 @@ const CookieTable = forwardRef<
onRowClick={onRowClick}
onRowContextMenu={onRowContextMenuHandler}
getRowObjectKey={getRowObjectKey}
conditionalTableRowClasses={conditionalTableRowClasses}
conditionalTableRowClassesHandler={_conditionalTableRowClassesHandler}
exportTableData={exportCookies}
hasVerticalBar={hasVerticalBar}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
/*
* Copyright 2023 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { CookieTableData, getCookieKey } from '@ps-analysis-tool/common';
import classnames from 'classnames';

import { TableRow } from '../../table';

// eslint-disable-next-line complexity
const conditionalTableRowClassesHandler = (
row: TableRow,
isRowFocused: boolean,
rowIndex: number,
selectedKey: string | null
) => {
const rowKey = getCookieKey(
(row?.originalData as CookieTableData).parsedCookie
) as string;
const isBlocked =
(row.originalData as CookieTableData)?.isBlocked ||
(((row.originalData as CookieTableData)?.isBlocked ?? false) &&
(row.originalData as CookieTableData)?.blockedReasons &&
(row.originalData as CookieTableData)?.blockedReasons?.length);
const isHighlighted = row.originalData?.highlighted;
const isDomainInAllowList = (row.originalData as CookieTableData)
?.isDomainInAllowList;

const tableRowClassName = classnames(
isBlocked &&
(rowKey !== selectedKey
? rowIndex % 2
? 'dark:bg-flagged-row-even-dark bg-flagged-row-even-light'
: 'dark:bg-flagged-row-odd-dark bg-flagged-row-odd-light'
: isRowFocused
? 'bg-gainsboro dark:bg-outer-space'
: 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'),
isDomainInAllowList &&
!isBlocked &&
(rowKey !== selectedKey
? rowIndex % 2
? 'dark:bg-jungle-green-dark bg-leaf-green-dark'
: 'dark:bg-jungle-green-light bg-leaf-green-light'
: isRowFocused
? 'bg-gainsboro dark:bg-outer-space'
: 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'),
rowKey !== selectedKey &&
!isBlocked &&
!isDomainInAllowList &&
(rowIndex % 2
? isHighlighted
? 'bg-dirty-pink'
: 'bg-anti-flash-white dark:bg-charleston-green'
: isHighlighted
? 'bg-dirty-pink text-dirty-red dark:text-dirty-red text-dirty-red'
: 'bg-white dark:bg-raisin-black'),
rowKey === selectedKey &&
!isBlocked &&
!isDomainInAllowList &&
(isRowFocused
? isHighlighted
? 'bg-dirty-red'
: 'bg-gainsboro dark:bg-outer-space'
: isHighlighted
? 'bg-dirty-pink text-dirty-red'
: 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver')
);

return tableRowClassName;
};

export default conditionalTableRowClassesHandler;
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* Copyright 2023 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* External dependencies
*/
import { CookieTableData } from '@ps-analysis-tool/common';
import { saveAs } from 'file-saver';

/**
* Internal dependencies
*/
import { TableRow } from '../../table';
import { generateCookieTableCSV } from '../../table/utils';

const exportCookies = (rows: TableRow[]) => {
const _cookies = rows.map(({ originalData }) => originalData);
if (_cookies.length > 0 && 'parsedCookie' in _cookies[0]) {
const csvTextBlob = generateCookieTableCSV(_cookies as CookieTableData[]);
saveAs(csvTextBlob, 'Cookies Report.csv');
}
};

export default exportCookies;
18 changes: 18 additions & 0 deletions packages/design-system/src/components/cookieTable/utils/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* Copyright 2023 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

export { default as exportCookies } from './exportCookies';
export { default as conditionalTableRowClassesHandler } from './conditionalTableRowClassesHandler';
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,16 @@ const TableBody = ({
onRowClick,
onRowContextMenu,
getRowObjectKey,
conditionalTableRowClasses,
conditionalTableRowClassesHandler,
hasVerticalBar,
} = useTable(({ state, actions }) => ({
rows: state.rows,
columns: state.columns,
onRowClick: actions.onRowClick,
onRowContextMenu: actions.onRowContextMenu,
getRowObjectKey: actions.getRowObjectKey,
conditionalTableRowClasses: actions.conditionalTableRowClasses,
conditionalTableRowClassesHandler:
actions.conditionalTableRowClassesHandler,
hasVerticalBar: actions.hasVerticalBar,
}));

Expand Down Expand Up @@ -148,7 +149,7 @@ const TableBody = ({
columns={columns}
selectedKey={selectedKey}
extraClasses={
conditionalTableRowClasses?.(row, isRowFocused, index) ?? ''
conditionalTableRowClassesHandler?.(row, isRowFocused, index) ?? ''
}
hasVerticalBar={hasVerticalBar?.(row) ?? false}
getRowObjectKey={getRowObjectKey}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ interface useTableProps {
row: TableRow
) => void;
getRowObjectKey: (row: TableRow) => string;
conditionalTableRowClasses?: (
conditionalTableRowClassesHandler?: (
row: TableRow,
isRowFocused: boolean,
rowIndex: number
Expand Down Expand Up @@ -144,7 +144,7 @@ export interface TableStoreContext {
onRowClick: useTableProps['onRowClick'];
onRowContextMenu: useTableProps['onRowContextMenu'];
getRowObjectKey: useTableProps['getRowObjectKey'];
conditionalTableRowClasses?: useTableProps['conditionalTableRowClasses'];
conditionalTableRowClassesHandler?: useTableProps['conditionalTableRowClassesHandler'];
exportTableData?: useTableProps['exportTableData'];
hasVerticalBar?: useTableProps['hasVerticalBar'];
};
Expand Down Expand Up @@ -195,7 +195,7 @@ export const TableProvider = ({
onRowClick,
onRowContextMenu,
getRowObjectKey,
conditionalTableRowClasses,
conditionalTableRowClassesHandler,
exportTableData,
hasVerticalBar,
children,
Expand Down Expand Up @@ -311,7 +311,7 @@ export const TableProvider = ({
onRowClick,
onRowContextMenu,
getRowObjectKey,
conditionalTableRowClasses,
conditionalTableRowClassesHandler,
exportTableData,
hasVerticalBar,
},
Expand Down

0 comments on commit 2685a69

Please sign in to comment.