midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance ListBetter and ListUI components with additional className props for better styling control

This commit is contained in:
faisolavolut 2025-04-29 10:50:48 +07:00
parent 246b1a80fe
commit fc87554da1
3 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/list/ListUI.tsx
View File

@ -3,9 +3,11 @@ import React from "react";
import { useLocal } from "@/lib/utils/use-local"; import { useLocal } from "@/lib/utils/use-local";
import get from "lodash.get"; import get from "lodash.get";
import { ListBetter } from "../tablelist/List"; import { ListBetter } from "../tablelist/List";
import { cn } from "@/lib/utils";
export const ListUI: React.FC<any> = ({ export const ListUI: React.FC<any> = ({
tabHeader, tabHeader,
className, className,
classNameScrollArea,
name, name,
modeTab, modeTab,
column, column,
@ -29,6 +31,7 @@ export const ListUI: React.FC<any> = ({
tab, tab,
onTab, onTab,
breadcrumb, breadcrumb,
classNameContainer,
content, content,
ready = true, ready = true,
}) => { }) => {
@ -50,7 +53,7 @@ export const ListUI: React.FC<any> = ({
} }
return ( return (
<div <div
className={cx( className={cn(
"flex flex-col flex-grow rounded-lg border border-gray-200 py-2 overflow-hidden", "flex flex-col flex-grow rounded-lg border border-gray-200 py-2 overflow-hidden",
className className
)} )}
@ -70,6 +73,8 @@ export const ListUI: React.FC<any> = ({
<div className="w-full flex flex-row flex-grow overflow-hidden "> <div className="w-full flex flex-row flex-grow overflow-hidden ">
<ListBetter <ListBetter
name={name} name={name}
classNameScrollArea={classNameScrollArea}
classNameContainer={classNameContainer}
content={content} content={content}
onLoad={onLoad} onLoad={onLoad}
onCount={async (params: any) => { onCount={async (params: any) => {

128
components/partials/SidebarBetter.tsx
View File

@ -25,6 +25,9 @@ import {
TooltipTrigger, TooltipTrigger,
} from "../ui/tooltip"; } from "../ui/tooltip";
import ImageBetter from "../ui/Image"; import ImageBetter from "../ui/Image";
import { ListUI } from "../list/ListUI";
import { apix } from "@/lib/utils/apix";
import { getNumber } from "@/lib/utils/getNumber";
interface TreeMenuItem { interface TreeMenuItem {
title: string; title: string;
@ -527,7 +530,7 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
<Popover <Popover
classNameTrigger={cx("flex flex-row justify-center flex-grow")} classNameTrigger={cx("flex flex-row justify-center flex-grow")}
popoverClassName={cx( popoverClassName={cx(
"max-w-[24rem] bg-white shadow-lg rounded-lg" "w-[24rem] h-[32rem] bg-white shadow-lg rounded-lg"
)} )}
placement={"right-start"} placement={"right-start"}
arrow={false} arrow={false}
@ -537,79 +540,62 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
}} }}
open={notification} open={notification}
content={ 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"> <div className="block rounded-t-xl bg-gray-50 py-2 px-4 text-center text-base font-medium text-gray-700">
Notifications Notifications
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col flex-grow">
<a <ListUI
href="#" className={"border-none py-0"}
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600" classNameContainer={"gap-y-0"}
> classNameScrollArea={"p-0"}
<div className="w-full pl-3"> name="todo"
<div className="mb-1.5 text-md font-normal text-gray-500 "> content={({ item }: any) => {
New message from&nbsp; return (
<span className="font-semibold text-gray-900 "> <>
Bonnie Green <a
</span> href="#"
: "Hey, what's up? All set for the presentation?" className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
</div> >
<div className="text-md font-medium text-primary-700 "> <div className="w-full pl-3">
a few moments ago <div className="mb-1.5 text-md font-normal text-gray-500 ">
</div> New message from&nbsp;
</div> <span className="font-semibold text-gray-900 ">
</a> Bonnie Green
<a </span>
href="#" : "Hey, what's up? All set for the
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600" presentation?"
> </div>
<div className="w-full pl-3"> <div className="text-md font-medium text-primary-700 ">
<div className="mb-1.5 text-md font-normal text-gray-500 "> a few moments ago
New message from&nbsp; </div>
<span className="font-semibold text-gray-900 "> </div>
Bonnie Green </a>
</span> </>
: "Hey, what's up? All set for the presentation?" );
</div> }}
<div className="text-md font-medium text-primary-700 "> onLoad={async (param: any) => {
a few moments ago const params = await events("onload-param", {
</div> ...param,
</div> });
</a> const result: any = await apix({
<a port: "recruitment",
href="#" value: "data.data.job_postings",
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600" path: `/api/job-postings${params}`,
> validate: "array",
<div className="w-full pl-3"> });
<div className="mb-1.5 text-md font-normal text-gray-500 "> return result;
New message from&nbsp; }}
<span className="font-semibold text-gray-900 "> onCount={async () => {
Bonnie Green const result: any = await apix({
</span> port: "recruitment",
: "Hey, what's up? All set for the presentation?" value: "data.data.total",
</div> path: `/api/job-postings?page=1&page_size=1`,
<div className="text-md font-medium text-primary-700 "> validate: "object",
a few moments ago });
</div> return getNumber(result);
</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&nbsp;
<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> </div>
<a <a
href="#" href="#"

15
components/tablelist/List.tsx
View File

@ -5,8 +5,11 @@ import { toast } from "sonner";
import { Loader2 } from "lucide-react"; import { Loader2 } from "lucide-react";
import { ScrollArea } from "../ui/scroll-area"; import { ScrollArea } from "../ui/scroll-area";
import get from "lodash.get"; import get from "lodash.get";
import { cn } from "@/lib/utils";
export const ListBetter: React.FC<any> = ({ export const ListBetter: React.FC<any> = ({
classNameContainer,
classNameScrollArea,
autoPagination = true, autoPagination = true,
name, name,
column, column,
@ -279,7 +282,10 @@ export const ListBetter: React.FC<any> = ({
<> <>
<div className="tbl-wrapper flex flex-grow flex-col"> <div className="tbl-wrapper flex flex-grow flex-col">
<ScrollArea <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} reload={reload}
> >
{!local.ready ? ( {!local.ready ? (
@ -289,7 +295,12 @@ export const ListBetter: React.FC<any> = ({
</div> </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 ? ( {Array.isArray(local.data) && local.data?.length ? (
local.data?.map((e, idx) => { local.data?.map((e, idx) => {
return ( return (