Skip to content

Commit

Permalink
fmt
Browse files Browse the repository at this point in the history
  • Loading branch information
@karl-kallavus
karl-kallavus committed Oct 18, 2023
1 parent 1eb768f commit c273790
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 75 deletions.
62 changes: 31 additions & 31 deletions next-docs/public/examples/table/ExpandableCheckboxes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Example = () => {
const [selected, setSelected] = useState<{ [key: string]: boolean }>({});

const columnShift = (depth: number) => {
const shiftMap: { [key: number]: string } = [
const shiftMap: { [key: number]: string } = [
'ps-0',
'ps-6',
'ps-12',
Expand All @@ -33,15 +33,15 @@ const Example = () => {
const checkIfSelected = (id: string, canExpand: boolean, rowsById: { [key: string]: boolean }) => {
return canExpand
? Object.keys(rowsById)
.filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id)
.every((rowId) => selected[rowId] === true)
.filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id)
.every((rowId) => selected[rowId] === true)
: selected[id] === true;
}

const checkIfIndeterminate = (id: string, rowsById: { [key: string]: boolean }) => {
const matches = Object.keys(rowsById)
const matches = Object.keys(rowsById)
.filter((rowId) => rowId.indexOf(id) === 0 && rowId !== id);
return !matches.every((rowId) => selected[rowId] === true) && matches.some((rowId) => selected[rowId] === true);
return !matches.every((rowId) => selected[rowId] === true) && matches.some((rowId) => selected[rowId] === true);
}

const columnsInitial = [
Expand All @@ -60,7 +60,7 @@ const Example = () => {
<div className="flex items-center gap-x-1">
<div className="flex items-center h-full">
<Checkbox
id={ PREFIX && PREFIX.length ? `${PREFIX}_root` : 'root'}
id={PREFIX && PREFIX.length ? `${PREFIX}_root` : 'root'}
checked={(Object.keys(rowsById).length === Object.keys(selected).length)}
indeterminate={!!Object.keys(selected).length && Object.keys(selected).length < Object.keys(rowsById).length}
onClick={(e) => { e.stopPropagation() }}
Expand All @@ -72,28 +72,28 @@ const Example = () => {
</div>
),
Cell: ({ row, rowsById }: any) => (
<div className={mergeClassnames(
"flex items-center gap-x-1",
columnShift(row.depth),
)}
onClick={(e) => {
if ((e.target as unknown as HTMLElement).tagName === 'SPAN') e.stopPropagation();
}}
>
<div className="flex items-center h-full">
<Checkbox
id={ PREFIX && PREFIX.length ? `${PREFIX}_${row.id}` : row.id}
checked={checkIfSelected(row.id, row.canExpand, rowsById)}
indeterminate={checkIfIndeterminate(row.id, rowsById)}
onClick={(e) => e.stopPropagation()}
/>
</div>
{ row.canExpand ? (
<span {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? '👇' : '👉'}
</span>
) : null }
<div className={mergeClassnames(
"flex items-center gap-x-1",
columnShift(row.depth),
)}
onClick={(e) => {
if ((e.target as unknown as HTMLElement).tagName === 'SPAN') e.stopPropagation();
}}
>
<div className="flex items-center h-full">
<Checkbox
id={PREFIX && PREFIX.length ? `${PREFIX}_${row.id}` : row.id}
checked={checkIfSelected(row.id, row.canExpand, rowsById)}
indeterminate={checkIfIndeterminate(row.id, rowsById)}
onClick={(e) => e.stopPropagation()}
/>
</div>
{row.canExpand ? (
<span {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? '👇' : '👉'}
</span>
) : null}
</div>
)
},
],
Expand Down Expand Up @@ -304,10 +304,10 @@ const Example = () => {
useCheckbox={true}
expandedByDefault={true}
getOnRowSelect={() => (rows) => {
setSelected(rows.reduce((acc: {[key: string]: boolean}, item) => {
acc[item.id] = true;
return acc;
}, {})
setSelected(rows.reduce((acc: { [key: string]: boolean }, item) => {
acc[item.id] = true;
return acc;
}, {})
);
}}
/>
Expand Down
6 changes: 3 additions & 3 deletions next-docs/public/examples/table/ExpandedWithModals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { ReactNode, useState } from 'react';
import { Table } from '@heathmont/moon-table-tw';
import { Button, Chip, Modal, Tooltip } from '@heathmont/moon-core-tw';
import { OtherFrame } from '@heathmont/moon-icons-tw';
import { number } from 'zod';

interface HeaderProps {
isAllRowsExpanded: boolean;
Expand Down Expand Up @@ -107,7 +106,8 @@ const Example = () => {
onClick={() => {
setTitle(modal.title);
setPanel(modal.panel);
openModal(); }}
openModal();
}}
/>
</Tooltip.Trigger>
<Tooltip.Content position="top-start">
Expand All @@ -128,7 +128,7 @@ const Example = () => {
<li>Activity: {Math.floor(index * 100)}</li>
<li>Actions: {Math.floor(index * 100)}</li>
</ul>
)
)
};
}

Expand Down
82 changes: 41 additions & 41 deletions workspaces/tables/src/components/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,8 @@ const Table = ({
setSelectedRows(
rows?.length
? rows.filter((row: Row<{ isSelected?: boolean }>) => {
return row.original?.isSelected;
})
return row.original?.isSelected;
})
: []
);
}, []);
Expand All @@ -143,12 +143,12 @@ const Table = ({
stickySide={
// @ts-ignore
(column.sticky === 'left' || column.parent?.sticky === 'left') &&
scrollState.scrolledToRight
scrollState.scrolledToRight
? 'left'
: // @ts-ignore
column.sticky === 'right' || column.parent?.sticky === 'right'
? 'right'
: ''
? 'right'
: ''
}
isLastColumn={isLastColumn}
rowSize={rowSize}
Expand Down Expand Up @@ -199,8 +199,8 @@ const Table = ({
? 'left'
: // @ts-ignore
column.sticky === 'right' && scrollState.scrolledToLeft
? 'right'
: ''
? 'right'
: ''
}
rowSize={rowSize}
isCellBorder={isCellBorder}
Expand All @@ -219,7 +219,7 @@ const Table = ({
);
};

const setForceUpdateRowSelectedState = (callback: () => React.Dispatch<React.SetStateAction<{[key: string]: boolean}>>) => {
const setForceUpdateRowSelectedState = (callback: () => React.Dispatch<React.SetStateAction<{ [key: string]: boolean }>>) => {
updateRowSelectState = callback;
}

Expand Down Expand Up @@ -286,10 +286,10 @@ const Table = ({
const isAllRowsSelectedAtThisBranch = branchRowsAtSpecifiedDepth.every(Boolean);

if (isAllRowsSelectedAtThisBranch) {
const isNodeRowAlreadyAffected = alreadySelectedRows.filter(({ id }) => id === mask).length;
if (!isNodeRowAlreadyAffected) {
alreadySelectedRows.push(rowsById[mask]);
}
const isNodeRowAlreadyAffected = alreadySelectedRows.filter(({ id }) => id === mask).length;
if (!isNodeRowAlreadyAffected) {
alreadySelectedRows.push(rowsById[mask]);
}
}
}
depth--;
Expand Down Expand Up @@ -369,37 +369,37 @@ const Table = ({
<Body reactTableProps={{ ...getTableBodyProps() }} rowGap={rowGap}>
{variant === 'calendar'
? renderSpanRows({
rows,
prepareRow,
getOnRowClickHandler,
evenRowBackgroundColor,
defaultRowBackgroundColor,
rowSpanHeaders,
selectable,
useCheckbox,
rowSize,
isCellBorder,
})
rows,
prepareRow,
getOnRowClickHandler,
evenRowBackgroundColor,
defaultRowBackgroundColor,
rowSpanHeaders,
selectable,
useCheckbox,
rowSize,
isCellBorder,
})
: renderRows({
rows,
prepareRow,
getOnRowClickHandler,
getOnRowSelectHandler: !selectable
? undefined
: useCheckbox
? (row) => selectCheckableRow
: (row) => selectCommonRow,
rows,
prepareRow,
getOnRowClickHandler,
getOnRowSelectHandler: !selectable
? undefined
: useCheckbox
? (row) => selectCheckableRow
: (row) => selectCommonRow,

evenRowBackgroundColor,
defaultRowBackgroundColor,
renderRowSubComponent,
setForceUpdateRowSelectedState,
selectable,
useCheckbox,
rowSize,
isCellBorder,
textClip,
})}
evenRowBackgroundColor,
defaultRowBackgroundColor,
renderRowSubComponent,
setForceUpdateRowSelectedState,
selectable,
useCheckbox,
rowSize,
isCellBorder,
textClip,
})}
</Body>

{withFooter && (
Expand Down

0 comments on commit c273790

Please sign in to comment.