feat: enhance ListBetter and ListUI components with additional className props for better styling control
This commit is contained in:
parent
246b1a80fe
commit
fc87554da1
|
|
@ -3,9 +3,11 @@ import React from "react";
|
|||
import { useLocal } from "@/lib/utils/use-local";
|
||||
import get from "lodash.get";
|
||||
import { ListBetter } from "../tablelist/List";
|
||||
import { cn } from "@/lib/utils";
|
||||
export const ListUI: React.FC<any> = ({
|
||||
tabHeader,
|
||||
className,
|
||||
classNameScrollArea,
|
||||
name,
|
||||
modeTab,
|
||||
column,
|
||||
|
|
@ -29,6 +31,7 @@ export const ListUI: React.FC<any> = ({
|
|||
tab,
|
||||
onTab,
|
||||
breadcrumb,
|
||||
classNameContainer,
|
||||
content,
|
||||
ready = true,
|
||||
}) => {
|
||||
|
|
@ -50,7 +53,7 @@ export const ListUI: React.FC<any> = ({
|
|||
}
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
className={cn(
|
||||
"flex flex-col flex-grow rounded-lg border border-gray-200 py-2 overflow-hidden",
|
||||
className
|
||||
)}
|
||||
|
|
@ -70,6 +73,8 @@ export const ListUI: React.FC<any> = ({
|
|||
<div className="w-full flex flex-row flex-grow overflow-hidden ">
|
||||
<ListBetter
|
||||
name={name}
|
||||
classNameScrollArea={classNameScrollArea}
|
||||
classNameContainer={classNameContainer}
|
||||
content={content}
|
||||
onLoad={onLoad}
|
||||
onCount={async (params: any) => {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,9 @@ import {
|
|||
TooltipTrigger,
|
||||
} from "../ui/tooltip";
|
||||
import ImageBetter from "../ui/Image";
|
||||
import { ListUI } from "../list/ListUI";
|
||||
import { apix } from "@/lib/utils/apix";
|
||||
import { getNumber } from "@/lib/utils/getNumber";
|
||||
|
||||
interface TreeMenuItem {
|
||||
title: string;
|
||||
|
|
@ -527,7 +530,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
|
|||
<Popover
|
||||
classNameTrigger={cx("flex flex-row justify-center flex-grow")}
|
||||
popoverClassName={cx(
|
||||
"max-w-[24rem] bg-white shadow-lg rounded-lg"
|
||||
"w-[24rem] h-[32rem] bg-white shadow-lg rounded-lg"
|
||||
)}
|
||||
placement={"right-start"}
|
||||
arrow={false}
|
||||
|
|
@ -537,79 +540,62 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
|
|||
}}
|
||||
open={notification}
|
||||
content={
|
||||
<div className="max-w-[24rem]">
|
||||
<div className="flex-grow w-full h-full flex flex-col">
|
||||
<div className="block rounded-t-xl bg-gray-50 py-2 px-4 text-center text-base font-medium text-gray-700">
|
||||
Notifications
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<a
|
||||
href="#"
|
||||
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="w-full pl-3">
|
||||
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
||||
New message from
|
||||
<span className="font-semibold text-gray-900 ">
|
||||
Bonnie Green
|
||||
</span>
|
||||
: "Hey, what's up? All set for the presentation?"
|
||||
</div>
|
||||
<div className="text-md font-medium text-primary-700 ">
|
||||
a few moments ago
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="w-full pl-3">
|
||||
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
||||
New message from
|
||||
<span className="font-semibold text-gray-900 ">
|
||||
Bonnie Green
|
||||
</span>
|
||||
: "Hey, what's up? All set for the presentation?"
|
||||
</div>
|
||||
<div className="text-md font-medium text-primary-700 ">
|
||||
a few moments ago
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="w-full pl-3">
|
||||
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
||||
New message from
|
||||
<span className="font-semibold text-gray-900 ">
|
||||
Bonnie Green
|
||||
</span>
|
||||
: "Hey, what's up? All set for the presentation?"
|
||||
</div>
|
||||
<div className="text-md font-medium text-primary-700 ">
|
||||
a few moments ago
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="w-full pl-3">
|
||||
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
||||
New message from
|
||||
<span className="font-semibold text-gray-900 ">
|
||||
Bonnie Green
|
||||
</span>
|
||||
: "Hey, what's up? All set for the presentation?"
|
||||
</div>
|
||||
<div className="text-md font-medium text-primary-700 ">
|
||||
a few moments ago
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className="flex flex-col flex-grow">
|
||||
<ListUI
|
||||
className={"border-none py-0"}
|
||||
classNameContainer={"gap-y-0"}
|
||||
classNameScrollArea={"p-0"}
|
||||
name="todo"
|
||||
content={({ item }: any) => {
|
||||
return (
|
||||
<>
|
||||
<a
|
||||
href="#"
|
||||
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="w-full pl-3">
|
||||
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
||||
New message from
|
||||
<span className="font-semibold text-gray-900 ">
|
||||
Bonnie Green
|
||||
</span>
|
||||
: "Hey, what's up? All set for the
|
||||
presentation?"
|
||||
</div>
|
||||
<div className="text-md font-medium text-primary-700 ">
|
||||
a few moments ago
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
onLoad={async (param: any) => {
|
||||
const params = await events("onload-param", {
|
||||
...param,
|
||||
});
|
||||
const result: any = await apix({
|
||||
port: "recruitment",
|
||||
value: "data.data.job_postings",
|
||||
path: `/api/job-postings${params}`,
|
||||
validate: "array",
|
||||
});
|
||||
return result;
|
||||
}}
|
||||
onCount={async () => {
|
||||
const result: any = await apix({
|
||||
port: "recruitment",
|
||||
value: "data.data.total",
|
||||
path: `/api/job-postings?page=1&page_size=1`,
|
||||
validate: "object",
|
||||
});
|
||||
return getNumber(result);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@ import { toast } from "sonner";
|
|||
import { Loader2 } from "lucide-react";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import get from "lodash.get";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const ListBetter: React.FC<any> = ({
|
||||
classNameContainer,
|
||||
classNameScrollArea,
|
||||
autoPagination = true,
|
||||
name,
|
||||
column,
|
||||
|
|
@ -279,7 +282,10 @@ export const ListBetter: React.FC<any> = ({
|
|||
<>
|
||||
<div className="tbl-wrapper flex flex-grow flex-col">
|
||||
<ScrollArea
|
||||
className="w-full h-full flex flex-col gap-y-4 p-4"
|
||||
className={cn(
|
||||
"w-full h-full flex flex-col gap-y-4 p-4",
|
||||
classNameScrollArea
|
||||
)}
|
||||
reload={reload}
|
||||
>
|
||||
{!local.ready ? (
|
||||
|
|
@ -289,7 +295,12 @@ export const ListBetter: React.FC<any> = ({
|
|||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex-grow flex flex-col gap-y-4">
|
||||
<div
|
||||
className={cn(
|
||||
"flex-grow flex flex-col gap-y-4",
|
||||
classNameContainer
|
||||
)}
|
||||
>
|
||||
{Array.isArray(local.data) && local.data?.length ? (
|
||||
local.data?.map((e, idx) => {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue