diff --git a/web/app/(commonLayout)/apps/check-legacy/page.tsx b/web/app/(commonLayout)/apps/check-legacy/page.tsx index ff53261a89..d886a28eb9 100644 --- a/web/app/(commonLayout)/apps/check-legacy/page.tsx +++ b/web/app/(commonLayout)/apps/check-legacy/page.tsx @@ -4,7 +4,8 @@ import Header from './components/header' import List from './components/list' import useLegacyList from './use-legacy-list' import Chip from '@/app/components/base/chip' -import { RiFile3Line } from '@remixicon/react' +import { RiFilter3Line } from '@remixicon/react' +import { useCallback } from 'react' const Page = () => { const { @@ -14,6 +15,21 @@ const Page = () => { setPublished, clearPublished, } = useLegacyList() + + const handleSelectPublished = useCallback(({ value }: { value: number }) => { + setPublished(value) + }, [setPublished]) + + const renderTriggerContent = useCallback(() => { + if(published === undefined) + return 'Published' + return ( +
+ Published {published === 1 ? 'Yes' : 'No'} +
+ ) + }, [published]) + return (
@@ -22,9 +38,10 @@ const Page = () => { } + leftIcon={} value={published} - onSelect={setPublished} + renderTriggerContent={renderTriggerContent} + onSelect={handleSelectPublished} onClear={clearPublished} items={[ { value: 1, name: 'Yes' }, diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx index eeaf2b19c6..b0b0e38fef 100644 --- a/web/app/components/base/chip/index.tsx +++ b/web/app/components/base/chip/index.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react' -import { useMemo, useState } from 'react' +import React, { useMemo, useState } from 'react' import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react' import cn from '@/utils/classnames' import { @@ -20,6 +20,7 @@ type Props = { leftIcon?: any value: number | string items: Item[] + renderTriggerContent?: () => React.ReactNode onSelect: (item: any) => void onClear: () => void } @@ -30,14 +31,17 @@ const Chip: FC = ({ leftIcon, value, items, + renderTriggerContent, onSelect, onClear, }) => { const [open, setOpen] = useState(false) const triggerContent = useMemo(() => { + if(renderTriggerContent) + return renderTriggerContent() return items.find(item => item.value === value)?.name || '' - }, [items, value]) + }, [items, renderTriggerContent, value]) return (