UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 7.33 kB
1
{"version":3,"file":"FilterSidebar.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterSidebar/FilterSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Drawer } from '@/base-ui/Drawer';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nfunction usePageSidebar(wide: boolean | undefined, storageKey: string | undefined) {\n const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;\n const [prefs, setPrefs] = useLocalStorage<{ expand?: boolean; width?: number }>(storageKey, {\n expand: true,\n width: fallback,\n });\n return {\n expand: prefs.expand !== false,\n onExpandChange: (expand: boolean) => setPrefs((current) => ({ ...current, expand })),\n onSizeChange: (size: { width?: number | string }) => {\n const next = typeof size.width === 'number' ? size.width : fallback;\n setPrefs((current) => ({ ...current, width: clampSidebarWidth(next, fallback) }));\n },\n width: clampSidebarWidth(Number(prefs.width), fallback),\n };\n}\n\nfunction FilterSidebar({\n body,\n children,\n flush,\n head,\n header,\n label,\n storageKey,\n summary,\n wide,\n}: FilterSidebarProps) {\n const isCompact = useIsCompact();\n const [drawerOpen, setDrawerOpen] = useState(false);\n const sidebar = usePageSidebar(wide, storageKey);\n const close = () => setDrawerOpen(false);\n\n if (isCompact) {\n return (\n <FilterSplitProvider active={!flush}>\n <div className={styles.layout}>\n {header}\n <Button block icon={Filter} onClick={() => setDrawerOpen(true)}>\n {summary}\n </Button>\n <Drawer open={drawerOpen} placement=\"left\" title={label} width={300} onClose={close}>\n <div className={styles.drawerPanel}>\n {head?.(close)}\n {body(close)}\n </div>\n </Drawer>\n <div className={styles.content}>{children}</div>\n </div>\n </FilterSplitProvider>\n );\n }\n\n return (\n <FilterSplitProvider active={!flush}>\n <div\n className={flush ? styles.layout : `${styles.layout} ${surfaceStyles.card}`}\n data-flush={flush ? true : undefined}\n data-page-layout={flush ? 'flush' : undefined}\n data-split-card={flush ? undefined : true}\n >\n <DraggablePanel\n expandable\n showHandleWhenCollapsed\n aria-label={label}\n className={styles.sidebar}\n classNames={{ content: styles.panel }}\n collapseThreshold={sidebarWidth.collapse}\n data-flush={flush ? true : undefined}\n defaultSize={{ width: wide ? sidebarWidth.wide : sidebarWidth.narrow }}\n expand={sidebar.expand}\n maxWidth={sidebarWidth.max}\n minWidth={sidebarWidth.min}\n mode=\"fixed\"\n placement=\"left\"\n showBorder={false}\n size={{ width: sidebar.width }}\n onExpandChange={sidebar.onExpandChange}\n onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n >\n {head ? <div className={styles.head}>{head(close)}</div> : null}\n <div className={styles.body} data-flush={flush ? true : undefined}>\n {body(close)}\n </div>\n </DraggablePanel>\n <div className={styles.content} data-flush={flush ? true : undefined}>\n {header}\n {children}\n </div>\n </div>\n </FilterSplitProvider>\n );\n}\n\nFilterSidebar.displayName = 'FilterSidebar';\n\nfunction FilterRow({ count, name }: FilterRowProps) {\n return (\n <span className={styles.row}>\n <span className={styles.name}>{name}</span>\n {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n </span>\n );\n}\n\nFilterRow.displayName = 'FilterRow';\n\nfunction FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps) {\n return (\n <button\n aria-label={label}\n aria-pressed={selected}\n className={styles.option}\n title={title}\n type=\"button\"\n onClick={onClick}\n >\n {icon}\n <span className={styles.name}>{name}</span>\n {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n </button>\n );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":"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"}