Skip to content

Commit

Permalink
fix: Add background to selectable tr table (#252)
Browse files Browse the repository at this point in the history 
Fixes #183
Fixes #289
  • Loading branch information
@OgDev-01
OgDev-01 committed Sep 6, 2022
1 parent 777f6ba commit 7d6ae16
Showing 1 changed file with 53 additions and 37 deletions.
90 changes: 53 additions & 37 deletions components/molecules/RepositoryTable/repository-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import StarIcon from "public/icons/star-icon.svg";
import Person from "public/icons/person-icon.svg";
import Icon3 from "public/icons/icon3.svg";
import ComponentHeader from "../ComponentHeader/component-header";
import { truncateString } from "../../../lib/utils/truncate-string";
import humanizeNumber from "../../../lib/utils/humanizeNumber";

interface RepoSelectableTableProps {
Expand All @@ -28,6 +27,9 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
const tableRef = useRef<HTMLDivElement>(null);
const allCheckboxRefs = useRef<HTMLElement[]>([]);

const tableRowClassesBG = `hover:content-['${title}'] flex align-middle rounded justify-between border-dark-blue-10 bg-blue-100 cursor-pointer`;
const tableRowClassesNoBG = `hover:content-['${title}'] flex align-middle rounded justify-between hover:border-dark-blue-10 hover:bg-blue-100 cursor-pointer`;

const addCheckboxToRef = (element: any) => {
if (element && !allCheckboxRefs.current.includes(element)) allCheckboxRefs.current.push(element);
};
Expand All @@ -38,12 +40,20 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
allCheckboxRefs.current.forEach((element) => {
const checkbox: HTMLInputElement | null = element.querySelector("input[type='checkbox']");
if (checkbox) checkbox.checked = checked;

if(checked) {
element.setAttribute("class", tableRowClassesBG);
} else {
element.setAttribute("class", tableRowClassesNoBG);
}
});
};

const entireRowClickChangesCheckbox = (element: any) => {
const entireRowClickChangesCheckbox = (element: any, title: string) => {
const checkbox: HTMLInputElement | null = element.querySelector("input[type='checkbox']");
if (checkbox) checkbox.checked = !checkbox.checked;
if(checkbox?.checked) element.setAttribute("class", tableRowClassesBG);
if(checkbox?.checked === false) element.setAttribute("class", tableRowClassesNoBG);
};

const [divSize, setDivSize] = useState(0);
Expand All @@ -56,51 +66,57 @@ const RepoSelectableTable: React.FC<RepoSelectableTableProps> = ({ title, tableT
<>
<ComponentHeader title={title} />
<div ref={tableRef}>
<table className="table-auto w-full">
<thead className="border-b-[1px]">
<tr>
<th className="p-2">
<div className="w-full">
<div className="border-b-[1px]">
<div className="flex justify-between">
<span className="p-2 inline-block">
<Checkbox onChange={(event) => changeAllCheckboxes(event)} label="" />
</th>
<th className="text-right p-2">
<Icon IconImage={iconSuite[tableType].star} />
</th>
<th className="text-right p-2">
<Icon IconImage={iconSuite[tableType].fork} />
</th>
<th className="text-right p-2">
<Icon IconImage={iconSuite[tableType].person} />
</th>
<th className="text-right p-2">
<Icon IconImage={iconSuite[tableType].icon3} />
</th>
</tr>
<tr className="h-3"></tr>
</thead>
<tbody>
<tr className="h-3"></tr>
</span>
<div className="flex gap-x-2.5">
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">
<Icon IconImage={iconSuite[tableType].star} />
</span>
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">
<Icon IconImage={iconSuite[tableType].fork} />
</span>
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">
<Icon IconImage={iconSuite[tableType].person} />
</span>
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">
<Icon IconImage={iconSuite[tableType].icon3} />
</span>
</div>
</div>
<div className="h-3"></div>
</div>
<div>
<div className="h-3"></div>
{rows?.map(({ name, stars, size }, index) => {
return (
<tr
className={`hover:content-['${title}'] hover:bg-blue-100 cursor-pointer`}
<div
className={tableRowClassesNoBG}
key={index}
ref={(element) => addCheckboxToRef(element)}
onClick={(event: any) => {
const isNotCheckbox = event.target.getAttribute("type") !== "checkbox";
if (isNotCheckbox) entireRowClickChangesCheckbox(allCheckboxRefs.current[index]);
if (isNotCheckbox) entireRowClickChangesCheckbox(allCheckboxRefs.current[index], name);
}}
>
<td className="flex flex-row text-left p-2" ref={(element) => addCheckboxToRef(element)}>
<Checkbox label="" /> {divSize > 0 && divSize < 350 ? truncateString(name, 9) : name}
</td>
<td className="text-right p-2">{humanizeNumber(stars)}</td>
<td className="text-right p-2">{humanizeNumber(12)}</td>
<td className="text-right p-2">{humanizeNumber(1234)}</td>
<td className="text-right p-2">{humanizeNumber(size)}</td>
</tr>
<span className="flex w-1/5 xs:w-2/5 overflow-hidden whitespace-nowrap text-ellipsis md:w-fit flex-row align-middle text-left p-2">
<Checkbox className="mt-0.5" label="" />{" "}
{name}
</span>
<div className="flex gap-x-2.5">
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">{humanizeNumber(stars)}</span>
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">{humanizeNumber(12)}</span>
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">{humanizeNumber(1234)}</span>
<span className="text-right overflow-hidden whitespace-nowrap text-ellipsis py-2 w-10 md:w-20">{humanizeNumber(size)}</span>
</div>
</div>
);
})}
</tbody>
</table>
</div>
</div>
</div>
</>
);
Expand Down

0 comments on commit 7d6ae16

Please sign in to comment.