@sth87/shadcn-design-system 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ImageViewer/ImageViewer.cjs +1 -1
- package/dist/cjs/components/ImageViewer/ImageViewer.cjs.map +1 -1
- package/dist/cjs/components/Table/TableFilter/data-table-date-filter.cjs.map +1 -1
- package/dist/cjs/components/Table/TableFilter/data-table-filter-popover.cjs.map +1 -1
- package/dist/cjs/components/Table/TableFilter/data-table-slider-filter.cjs.map +1 -1
- package/dist/cjs/components/Table/data-table-column-header.cjs.map +1 -1
- package/dist/cjs/components/Table/data-table-toolbar.cjs +2 -0
- package/dist/cjs/components/Table/data-table-toolbar.cjs.map +1 -0
- package/dist/cjs/components/Table/data-table-view-options.cjs +2 -0
- package/dist/cjs/components/Table/data-table-view-options.cjs.map +1 -0
- package/dist/cjs/components/Table/data-table.cjs +1 -1
- package/dist/cjs/components/Table/data-table.cjs.map +1 -1
- package/dist/cjs/components/Table/select-column.cjs +2 -0
- package/dist/cjs/components/Table/select-column.cjs.map +1 -0
- package/dist/cjs/hooks/use-data-table.cjs +1 -1
- package/dist/cjs/hooks/use-data-table.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_accessibility@3.1.1_react@19.1.1/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.cjs +2 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_accessibility@3.1.1_react@19.1.1/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.cjs.map +1 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/core/dist/core.esm.cjs +6 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/core/dist/core.esm.cjs.map +1 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1__react@19.1.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.cjs +2 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1__react@19.1.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.cjs.map +1 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.1.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs +2 -0
- package/dist/cjs/node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.1.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs.map +1 -0
- package/dist/cjs/packages/ui/src/components/table.cjs +1 -1
- package/dist/cjs/packages/ui/src/components/table.cjs.map +1 -1
- package/dist/cjs/styles/index.css +1 -1
- package/dist/esm/components/ImageViewer/ImageViewer.js +3 -3
- package/dist/esm/components/ImageViewer/ImageViewer.js.map +1 -1
- package/dist/esm/components/Table/TableFilter/data-table-date-filter.js.map +1 -1
- package/dist/esm/components/Table/TableFilter/data-table-filter-popover.js.map +1 -1
- package/dist/esm/components/Table/TableFilter/data-table-slider-filter.js.map +1 -1
- package/dist/esm/components/Table/data-table-column-header.js.map +1 -1
- package/dist/esm/components/Table/data-table-toolbar.js +116 -0
- package/dist/esm/components/Table/data-table-toolbar.js.map +1 -0
- package/dist/esm/components/Table/data-table-view-options.js +258 -0
- package/dist/esm/components/Table/data-table-view-options.js.map +1 -0
- package/dist/esm/components/Table/data-table.js +1 -1
- package/dist/esm/components/Table/data-table.js.map +1 -1
- package/dist/esm/components/Table/select-column.js +33 -0
- package/dist/esm/components/Table/select-column.js.map +1 -0
- package/dist/esm/hooks/use-data-table.js +68 -64
- package/dist/esm/hooks/use-data-table.js.map +1 -1
- package/dist/esm/index.js +211 -197
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/node_modules/.pnpm/@dnd-kit_accessibility@3.1.1_react@19.1.1/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js +57 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_accessibility@3.1.1_react@19.1.1/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js.map +1 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/core/dist/core.esm.js +2345 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/core/dist/core.esm.js.map +1 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1__react@19.1.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.js +440 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1__react@19.1.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.js.map +1 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.1.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.js +236 -0
- package/dist/esm/node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.1.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.js.map +1 -0
- package/dist/esm/packages/ui/src/components/table.js +5 -5
- package/dist/esm/packages/ui/src/components/table.js.map +1 -1
- package/dist/esm/styles/index.css +1 -1
- package/dist/types/components/Table/TableFilter/data-table-date-filter.d.ts +1 -2
- package/dist/types/components/Table/TableFilter/data-table-date-filter.d.ts.map +1 -1
- package/dist/types/components/Table/TableFilter/data-table-filter-popover.d.ts +1 -2
- package/dist/types/components/Table/TableFilter/data-table-filter-popover.d.ts.map +1 -1
- package/dist/types/components/Table/TableFilter/data-table-slider-filter.d.ts +1 -2
- package/dist/types/components/Table/TableFilter/data-table-slider-filter.d.ts.map +1 -1
- package/dist/types/components/Table/data-table-column-header.d.ts +1 -2
- package/dist/types/components/Table/data-table-column-header.d.ts.map +1 -1
- package/dist/types/components/Table/data-table-toolbar.d.ts +4 -3
- package/dist/types/components/Table/data-table-toolbar.d.ts.map +1 -1
- package/dist/types/components/Table/data-table-view-options.d.ts +12 -3
- package/dist/types/components/Table/data-table-view-options.d.ts.map +1 -1
- package/dist/types/components/Table/index.d.ts +7 -0
- package/dist/types/components/Table/index.d.ts.map +1 -1
- package/dist/types/hooks/use-data-table.d.ts.map +1 -1
- package/package.json +4 -1
|
@@ -200,7 +200,7 @@ const S = ({
|
|
|
200
200
|
"div",
|
|
201
201
|
{
|
|
202
202
|
className: L(
|
|
203
|
-
"ds:
|
|
203
|
+
"ds:image-viewer-root ds:relative ds:inline-block",
|
|
204
204
|
h
|
|
205
205
|
),
|
|
206
206
|
children: /* @__PURE__ */ v("div", { className: "ds:relative ds:inline-block", children: [
|
|
@@ -220,7 +220,7 @@ const S = ({
|
|
|
220
220
|
width: n,
|
|
221
221
|
height: i,
|
|
222
222
|
className: L(
|
|
223
|
-
"ds:
|
|
223
|
+
"ds:image-viewer-img ds:max-w-full ds:h-auto ds:align-middle",
|
|
224
224
|
g && "ds:opacity-0",
|
|
225
225
|
f
|
|
226
226
|
),
|
|
@@ -234,7 +234,7 @@ const S = ({
|
|
|
234
234
|
{
|
|
235
235
|
onClick: u,
|
|
236
236
|
className: L(
|
|
237
|
-
"ds:
|
|
237
|
+
"ds:image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer",
|
|
238
238
|
"ds:bg-black/50 ds:backdrop-blur-sm"
|
|
239
239
|
),
|
|
240
240
|
children: /* @__PURE__ */ v("div", { className: "ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageViewer.js","sources":["../../../../src/components/ImageViewer/ImageViewer.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ZoomIn } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/index\";\n\n// Dynamic import for react-viewer to avoid SSR issues\nlet Viewer: any = null;\nif (typeof window !== \"undefined\") {\n import(\"react-viewer\").then((module) => {\n Viewer = module.default;\n });\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ImageInfo {\n src: string;\n alt?: string;\n downloadUrl?: string;\n}\n\nexport interface ImageViewerProps {\n images: ImageInfo[];\n visible?: boolean;\n onClose?: () => void;\n activeIndex?: number;\n onIndexChange?: (_index: number) => void;\n zoomSpeed?: number;\n disableKeyboardSupport?: boolean;\n noNavbar?: boolean;\n noToolbar?: boolean;\n rotatable?: boolean;\n scalable?: boolean;\n changeable?: boolean;\n noClose?: boolean;\n minScale?: number;\n maxScale?: number;\n defaultScale?: number;\n className?: string;\n downloadable?: boolean;\n noImgDetails?: boolean;\n noResetZoomAfterChange?: boolean;\n drag?: boolean;\n}\n\nexport interface ImageViewerImageProps\n extends React.ImgHTMLAttributes<HTMLImageElement> {\n src: string;\n alt?: string;\n width?: string | number;\n height?: string | number;\n preview?: boolean;\n previewSrc?: string;\n fallback?: string;\n placeholder?: React.ReactNode | boolean;\n className?: string;\n wrapperClassName?: string;\n onPreviewClick?: () => void;\n}\n\n// ============================================================================\n// ImageViewer Component\n// ============================================================================\n\nexport const ImageViewer: React.FC<ImageViewerProps> = ({\n images,\n visible = false,\n onClose,\n activeIndex = 0,\n onIndexChange,\n zoomSpeed = 0.1,\n disableKeyboardSupport = false,\n noNavbar = false,\n noToolbar = false,\n rotatable = true,\n scalable = true,\n changeable = true,\n noClose = false,\n minScale = 0.1,\n maxScale = 50,\n defaultScale = 1,\n className,\n downloadable = false,\n noImgDetails = false,\n noResetZoomAfterChange = false,\n drag = false,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(activeIndex);\n const [ViewerComponent, setViewerComponent] = useState<any>(null);\n\n // Load Viewer dynamically on client-side only\n useEffect(() => {\n if (typeof window !== \"undefined\" && !ViewerComponent) {\n import(\"react-viewer\").then((module) => {\n setViewerComponent(() => module.default);\n });\n }\n }, [ViewerComponent]);\n\n useEffect(() => {\n setCurrentIndex(activeIndex);\n }, [activeIndex]);\n\n const handleClose = useCallback(() => {\n onClose?.();\n }, [onClose]);\n\n const handleIndexChange = useCallback(\n (_activeImage: any, index: number) => {\n setCurrentIndex(index);\n onIndexChange?.(index);\n },\n [onIndexChange]\n );\n\n // Handle download to save file locally\n const handleDownload = useCallback(() => {\n const currentImage = images[currentIndex];\n const downloadUrl = currentImage.downloadUrl || currentImage.src;\n\n // Create a temporary anchor element to trigger download\n const link = document.createElement(\"a\");\n link.href = downloadUrl;\n link.download = currentImage.alt || `image-${currentIndex + 1}`;\n\n // For cross-origin images, try to download via fetch\n fetch(downloadUrl)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n link.href = url;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n window.URL.revokeObjectURL(url);\n })\n .catch(() => {\n // Fallback: do nothing if fetch fails\n });\n }, [images, currentIndex]);\n\n // Transform images to include downloadUrl\n const viewerImages = images.map((img) => ({\n src: img.src,\n alt: img.alt || \"\",\n downloadUrl: img.downloadUrl || img.src,\n }));\n\n // Don't render until Viewer is loaded\n if (!ViewerComponent) {\n return null;\n }\n\n return (\n <ViewerComponent\n visible={visible}\n onClose={handleClose}\n onMaskClick={handleClose}\n images={viewerImages}\n activeIndex={currentIndex}\n onChange={handleIndexChange}\n zoomSpeed={zoomSpeed}\n disableKeyboardSupport={disableKeyboardSupport}\n noNavbar={noNavbar}\n noToolbar={noToolbar}\n rotatable={rotatable}\n scalable={scalable}\n changeable={changeable}\n noClose={noClose}\n minScale={minScale}\n maxScale={maxScale}\n defaultScale={defaultScale}\n className={cn(\"ds:image-viewer-antd-style\", className)}\n downloadable={downloadable}\n noImgDetails={noImgDetails}\n noResetZoomAfterChange={noResetZoomAfterChange}\n showTotal={true}\n drag={drag}\n customToolbar={(toolbars: any) => {\n // Replace download button with a custom-rendered button to prevent viewer state change\n return toolbars.map((toolbar: any) => {\n if (toolbar.key === \"download\") {\n return {\n ...toolbar,\n actionType: undefined, // Remove default action\n onClick: undefined,\n render: (\n <button\n type=\"button\"\n className=\"ds:react-viewer-icon ds:react-viewer-download\"\n title=\"Download\"\n style={{\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n padding: 0,\n }}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleDownload();\n }}\n >\n {/* SVG icon for download (Ant Design style) */}\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3v10m0 0l-4-4m4 4l4-4\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <rect\n x=\"4\"\n y=\"17\"\n width=\"12\"\n height=\"2\"\n rx=\"1\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n ),\n };\n }\n return toolbar;\n });\n }}\n />\n );\n};\n\nImageViewer.displayName = \"ImageViewer\";\n\n// ============================================================================\n// ImageViewerImage Component (Wrapper for single image with preview)\n// ============================================================================\n\nexport const ImageViewerImage: React.FC<ImageViewerImageProps> = ({\n src,\n alt = \"\",\n width,\n height,\n preview = true,\n previewSrc,\n fallback,\n placeholder,\n className,\n wrapperClassName,\n onPreviewClick,\n onError,\n ...props\n}) => {\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(false);\n const [viewerVisible, setViewerVisible] = useState(false);\n\n const handleLoad = () => {\n setLoading(false);\n setError(false);\n };\n\n const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n setLoading(false);\n setError(true);\n onError?.(e);\n };\n\n const handlePreview = () => {\n if (!preview) return;\n setViewerVisible(true);\n onPreviewClick?.();\n };\n\n const handleCloseViewer = () => {\n setViewerVisible(false);\n };\n\n const showPlaceholder = loading && placeholder;\n const showFallback = error && fallback;\n const showPreviewMask = preview && !loading && !error;\n\n return (\n <>\n <div\n className={cn(\n \"ds:ds-image-viewer-root ds:relative ds:inline-block\",\n wrapperClassName\n )}\n >\n <div className=\"ds:relative ds:inline-block\">\n {showPlaceholder && (\n <div\n className=\"ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:bg-muted ds:animate-pulse\"\n style={{ width, height }}\n >\n {placeholder === true ? (\n <div className=\"ds:w-8 ds:h-8 ds:border-2 ds:border-primary ds:border-t-transparent ds:rounded-full ds:animate-spin\" />\n ) : (\n placeholder\n )}\n </div>\n )}\n\n <img\n src={showFallback ? fallback : src}\n alt={alt}\n width={width}\n height={height}\n className={cn(\n \"ds:ds-image-viewer-img ds:max-w-full ds:h-auto ds:align-middle\",\n loading && \"ds:opacity-0\",\n className\n )}\n onLoad={handleLoad}\n onError={handleError}\n {...props}\n />\n\n {showPreviewMask && (\n <div\n onClick={handlePreview}\n className={cn(\n \"ds:ds-image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer\",\n \"ds:bg-black/50 ds:backdrop-blur-sm\"\n )}\n >\n <div className=\"ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2\">\n <ZoomIn className=\"ds:w-5 ds:h-5\" />\n <span>Preview</span>\n </div>\n </div>\n )}\n </div>\n </div>\n\n {/* Viewer Modal */}\n <ImageViewer\n images={[{ src: previewSrc || src, alt }]}\n visible={viewerVisible}\n onClose={handleCloseViewer}\n rotatable\n scalable\n downloadable\n />\n </>\n );\n};\n\nImageViewerImage.displayName = \"ImageViewer.Image\";\n\n// ============================================================================\n// ImageViewerGroup Component\n// ============================================================================\n\ninterface ImageViewerGroupProps {\n children: React.ReactNode;\n images: ImageInfo[];\n preview?: boolean;\n}\n\nexport const ImageViewerGroup: React.FC<ImageViewerGroupProps> = ({\n children,\n images,\n preview = true,\n}) => {\n const [viewerVisible, setViewerVisible] = useState(false);\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const handlePreview = useCallback((index: number) => {\n setCurrentIndex(index);\n setViewerVisible(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setViewerVisible(false);\n }, []);\n\n const contextValue = React.useMemo(\n () => ({\n handlePreview,\n preview,\n }),\n [handlePreview, preview]\n );\n\n return (\n <>\n <ImageViewerGroupContext.Provider value={contextValue}>\n {children}\n </ImageViewerGroupContext.Provider>\n\n <ImageViewer\n images={images}\n visible={viewerVisible}\n onClose={handleClose}\n activeIndex={currentIndex}\n onIndexChange={setCurrentIndex}\n rotatable\n scalable\n downloadable\n />\n </>\n );\n};\n\nImageViewerGroup.displayName = \"ImageViewer.Group\";\n\n// Context for Group\nconst ImageViewerGroupContext = React.createContext<{\n handlePreview?: (_index: number) => void;\n preview?: boolean;\n} | null>(null);\n\n// Export with namespace\nconst ImageViewerNamespace = Object.assign(ImageViewer, {\n Image: ImageViewerImage,\n Group: ImageViewerGroup,\n});\n\nexport default ImageViewerNamespace;\n"],"names":["n","module","ImageViewer","images","visible","onClose","activeIndex","onIndexChange","zoomSpeed","disableKeyboardSupport","noNavbar","noToolbar","rotatable","scalable","changeable","noClose","minScale","maxScale","defaultScale","className","downloadable","noImgDetails","noResetZoomAfterChange","drag","currentIndex","setCurrentIndex","useState","ViewerComponent","setViewerComponent","useEffect","handleClose","useCallback","handleIndexChange","_activeImage","index","handleDownload","currentImage","downloadUrl","link","response","blob","url","viewerImages","img","jsx","cn","toolbars","toolbar","e","jsxs","ImageViewerImage","src","alt","width","height","preview","previewSrc","fallback","placeholder","wrapperClassName","onPreviewClick","onError","props","loading","setLoading","error","setError","viewerVisible","setViewerVisible","handleLoad","handleError","handlePreview","handleCloseViewer","showPlaceholder","showFallback","showPreviewMask","Fragment","ZoomIn","ImageViewerGroup","children","contextValue","React","ImageViewerGroupContext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageViewer.js","sources":["../../../../src/components/ImageViewer/ImageViewer.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ZoomIn } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/index\";\n\n// Dynamic import for react-viewer to avoid SSR issues\nlet Viewer: any = null;\nif (typeof window !== \"undefined\") {\n import(\"react-viewer\").then((module) => {\n Viewer = module.default;\n });\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ImageInfo {\n src: string;\n alt?: string;\n downloadUrl?: string;\n}\n\nexport interface ImageViewerProps {\n images: ImageInfo[];\n visible?: boolean;\n onClose?: () => void;\n activeIndex?: number;\n onIndexChange?: (_index: number) => void;\n zoomSpeed?: number;\n disableKeyboardSupport?: boolean;\n noNavbar?: boolean;\n noToolbar?: boolean;\n rotatable?: boolean;\n scalable?: boolean;\n changeable?: boolean;\n noClose?: boolean;\n minScale?: number;\n maxScale?: number;\n defaultScale?: number;\n className?: string;\n downloadable?: boolean;\n noImgDetails?: boolean;\n noResetZoomAfterChange?: boolean;\n drag?: boolean;\n}\n\nexport interface ImageViewerImageProps\n extends React.ImgHTMLAttributes<HTMLImageElement> {\n src: string;\n alt?: string;\n width?: string | number;\n height?: string | number;\n preview?: boolean;\n previewSrc?: string;\n fallback?: string;\n placeholder?: React.ReactNode | boolean;\n className?: string;\n wrapperClassName?: string;\n onPreviewClick?: () => void;\n}\n\n// ============================================================================\n// ImageViewer Component\n// ============================================================================\n\nexport const ImageViewer: React.FC<ImageViewerProps> = ({\n images,\n visible = false,\n onClose,\n activeIndex = 0,\n onIndexChange,\n zoomSpeed = 0.1,\n disableKeyboardSupport = false,\n noNavbar = false,\n noToolbar = false,\n rotatable = true,\n scalable = true,\n changeable = true,\n noClose = false,\n minScale = 0.1,\n maxScale = 50,\n defaultScale = 1,\n className,\n downloadable = false,\n noImgDetails = false,\n noResetZoomAfterChange = false,\n drag = false,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(activeIndex);\n const [ViewerComponent, setViewerComponent] = useState<any>(null);\n\n // Load Viewer dynamically on client-side only\n useEffect(() => {\n if (typeof window !== \"undefined\" && !ViewerComponent) {\n import(\"react-viewer\").then((module) => {\n setViewerComponent(() => module.default);\n });\n }\n }, [ViewerComponent]);\n\n useEffect(() => {\n setCurrentIndex(activeIndex);\n }, [activeIndex]);\n\n const handleClose = useCallback(() => {\n onClose?.();\n }, [onClose]);\n\n const handleIndexChange = useCallback(\n (_activeImage: any, index: number) => {\n setCurrentIndex(index);\n onIndexChange?.(index);\n },\n [onIndexChange]\n );\n\n // Handle download to save file locally\n const handleDownload = useCallback(() => {\n const currentImage = images[currentIndex];\n const downloadUrl = currentImage.downloadUrl || currentImage.src;\n\n // Create a temporary anchor element to trigger download\n const link = document.createElement(\"a\");\n link.href = downloadUrl;\n link.download = currentImage.alt || `image-${currentIndex + 1}`;\n\n // For cross-origin images, try to download via fetch\n fetch(downloadUrl)\n .then((response) => response.blob())\n .then((blob) => {\n const url = window.URL.createObjectURL(blob);\n link.href = url;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n window.URL.revokeObjectURL(url);\n })\n .catch(() => {\n // Fallback: do nothing if fetch fails\n });\n }, [images, currentIndex]);\n\n // Transform images to include downloadUrl\n const viewerImages = images.map((img) => ({\n src: img.src,\n alt: img.alt || \"\",\n downloadUrl: img.downloadUrl || img.src,\n }));\n\n // Don't render until Viewer is loaded\n if (!ViewerComponent) {\n return null;\n }\n\n return (\n <ViewerComponent\n visible={visible}\n onClose={handleClose}\n onMaskClick={handleClose}\n images={viewerImages}\n activeIndex={currentIndex}\n onChange={handleIndexChange}\n zoomSpeed={zoomSpeed}\n disableKeyboardSupport={disableKeyboardSupport}\n noNavbar={noNavbar}\n noToolbar={noToolbar}\n rotatable={rotatable}\n scalable={scalable}\n changeable={changeable}\n noClose={noClose}\n minScale={minScale}\n maxScale={maxScale}\n defaultScale={defaultScale}\n className={cn(\"ds:image-viewer-antd-style\", className)}\n downloadable={downloadable}\n noImgDetails={noImgDetails}\n noResetZoomAfterChange={noResetZoomAfterChange}\n showTotal={true}\n drag={drag}\n customToolbar={(toolbars: any) => {\n // Replace download button with a custom-rendered button to prevent viewer state change\n return toolbars.map((toolbar: any) => {\n if (toolbar.key === \"download\") {\n return {\n ...toolbar,\n actionType: undefined, // Remove default action\n onClick: undefined,\n render: (\n <button\n type=\"button\"\n className=\"ds:react-viewer-icon ds:react-viewer-download\"\n title=\"Download\"\n style={{\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n padding: 0,\n }}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleDownload();\n }}\n >\n {/* SVG icon for download (Ant Design style) */}\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 3v10m0 0l-4-4m4 4l4-4\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <rect\n x=\"4\"\n y=\"17\"\n width=\"12\"\n height=\"2\"\n rx=\"1\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n ),\n };\n }\n return toolbar;\n });\n }}\n />\n );\n};\n\nImageViewer.displayName = \"ImageViewer\";\n\n// ============================================================================\n// ImageViewerImage Component (Wrapper for single image with preview)\n// ============================================================================\n\nexport const ImageViewerImage: React.FC<ImageViewerImageProps> = ({\n src,\n alt = \"\",\n width,\n height,\n preview = true,\n previewSrc,\n fallback,\n placeholder,\n className,\n wrapperClassName,\n onPreviewClick,\n onError,\n ...props\n}) => {\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(false);\n const [viewerVisible, setViewerVisible] = useState(false);\n\n const handleLoad = () => {\n setLoading(false);\n setError(false);\n };\n\n const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n setLoading(false);\n setError(true);\n onError?.(e);\n };\n\n const handlePreview = () => {\n if (!preview) return;\n setViewerVisible(true);\n onPreviewClick?.();\n };\n\n const handleCloseViewer = () => {\n setViewerVisible(false);\n };\n\n const showPlaceholder = loading && placeholder;\n const showFallback = error && fallback;\n const showPreviewMask = preview && !loading && !error;\n\n return (\n <>\n <div\n className={cn(\n \"ds:image-viewer-root ds:relative ds:inline-block\",\n wrapperClassName\n )}\n >\n <div className=\"ds:relative ds:inline-block\">\n {showPlaceholder && (\n <div\n className=\"ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:bg-muted ds:animate-pulse\"\n style={{ width, height }}\n >\n {placeholder === true ? (\n <div className=\"ds:w-8 ds:h-8 ds:border-2 ds:border-primary ds:border-t-transparent ds:rounded-full ds:animate-spin\" />\n ) : (\n placeholder\n )}\n </div>\n )}\n\n <img\n src={showFallback ? fallback : src}\n alt={alt}\n width={width}\n height={height}\n className={cn(\n \"ds:image-viewer-img ds:max-w-full ds:h-auto ds:align-middle\",\n loading && \"ds:opacity-0\",\n className\n )}\n onLoad={handleLoad}\n onError={handleError}\n {...props}\n />\n\n {showPreviewMask && (\n <div\n onClick={handlePreview}\n className={cn(\n \"ds:image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer\",\n \"ds:bg-black/50 ds:backdrop-blur-sm\"\n )}\n >\n <div className=\"ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2\">\n <ZoomIn className=\"ds:w-5 ds:h-5\" />\n <span>Preview</span>\n </div>\n </div>\n )}\n </div>\n </div>\n\n {/* Viewer Modal */}\n <ImageViewer\n images={[{ src: previewSrc || src, alt }]}\n visible={viewerVisible}\n onClose={handleCloseViewer}\n rotatable\n scalable\n downloadable\n />\n </>\n );\n};\n\nImageViewerImage.displayName = \"ImageViewer.Image\";\n\n// ============================================================================\n// ImageViewerGroup Component\n// ============================================================================\n\ninterface ImageViewerGroupProps {\n children: React.ReactNode;\n images: ImageInfo[];\n preview?: boolean;\n}\n\nexport const ImageViewerGroup: React.FC<ImageViewerGroupProps> = ({\n children,\n images,\n preview = true,\n}) => {\n const [viewerVisible, setViewerVisible] = useState(false);\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const handlePreview = useCallback((index: number) => {\n setCurrentIndex(index);\n setViewerVisible(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setViewerVisible(false);\n }, []);\n\n const contextValue = React.useMemo(\n () => ({\n handlePreview,\n preview,\n }),\n [handlePreview, preview]\n );\n\n return (\n <>\n <ImageViewerGroupContext.Provider value={contextValue}>\n {children}\n </ImageViewerGroupContext.Provider>\n\n <ImageViewer\n images={images}\n visible={viewerVisible}\n onClose={handleClose}\n activeIndex={currentIndex}\n onIndexChange={setCurrentIndex}\n rotatable\n scalable\n downloadable\n />\n </>\n );\n};\n\nImageViewerGroup.displayName = \"ImageViewer.Group\";\n\n// Context for Group\nconst ImageViewerGroupContext = React.createContext<{\n handlePreview?: (_index: number) => void;\n preview?: boolean;\n} | null>(null);\n\n// Export with namespace\nconst ImageViewerNamespace = Object.assign(ImageViewer, {\n Image: ImageViewerImage,\n Group: ImageViewerGroup,\n});\n\nexport default ImageViewerNamespace;\n"],"names":["n","module","ImageViewer","images","visible","onClose","activeIndex","onIndexChange","zoomSpeed","disableKeyboardSupport","noNavbar","noToolbar","rotatable","scalable","changeable","noClose","minScale","maxScale","defaultScale","className","downloadable","noImgDetails","noResetZoomAfterChange","drag","currentIndex","setCurrentIndex","useState","ViewerComponent","setViewerComponent","useEffect","handleClose","useCallback","handleIndexChange","_activeImage","index","handleDownload","currentImage","downloadUrl","link","response","blob","url","viewerImages","img","jsx","cn","toolbars","toolbar","e","jsxs","ImageViewerImage","src","alt","width","height","preview","previewSrc","fallback","placeholder","wrapperClassName","onPreviewClick","onError","props","loading","setLoading","error","setError","viewerVisible","setViewerVisible","handleLoad","handleError","handlePreview","handleCloseViewer","showPlaceholder","showFallback","showPreviewMask","Fragment","ZoomIn","ImageViewerGroup","children","contextValue","React","ImageViewerGroupContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMI,OAAO,SAAW,OACpB,OAAO,yBAAc,EAAA,KAAA,CAAAA,MAAAA,EAAA,CAAA,EAAE,KAAK,CAACC,MAAW;AAC7B,EAAAA,EAAO;AAClB,CAAC;AAwDI,MAAMC,IAA0C,CAAC;AAAA,EACtD,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,wBAAAC,IAAyB;AAAA,EACzB,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,wBAAAC,IAAyB;AAAA,EACzB,MAAAC,IAAO;AACT,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASpB,CAAW,GACtD,CAACqB,GAAiBC,CAAkB,IAAIF,EAAc,IAAI;AAGhE,EAAAG,EAAU,MAAM;AACd,IAAI,OAAO,SAAW,OAAe,CAACF,KACpC,OAAO,yBAAc,EAAA,KAAA,CAAA3B,MAAAA,EAAA,CAAA,EAAE,KAAK,CAACC,MAAW;AACtC,MAAA2B,EAAmB,MAAM3B,EAAO,OAAO;AAAA,IACzC,CAAC;AAAA,EAEL,GAAG,CAAC0B,CAAe,CAAC,GAEpBE,EAAU,MAAM;AACd,IAAAJ,EAAgBnB,CAAW;AAAA,EAC7B,GAAG,CAACA,CAAW,CAAC;AAEhB,QAAMwB,IAAcC,EAAY,MAAM;AACpC,IAAA1B,IAAA;AAAA,EACF,GAAG,CAACA,CAAO,CAAC,GAEN2B,IAAoBD;AAAA,IACxB,CAACE,GAAmBC,MAAkB;AACpC,MAAAT,EAAgBS,CAAK,GACrB3B,IAAgB2B,CAAK;AAAA,IACvB;AAAA,IACA,CAAC3B,CAAa;AAAA,EAAA,GAIV4B,IAAiBJ,EAAY,MAAM;AACvC,UAAMK,IAAejC,EAAOqB,CAAY,GAClCa,IAAcD,EAAa,eAAeA,EAAa,KAGvDE,IAAO,SAAS,cAAc,GAAG;AACvC,IAAAA,EAAK,OAAOD,GACZC,EAAK,WAAWF,EAAa,OAAO,SAASZ,IAAe,CAAC,IAG7D,MAAMa,CAAW,EACd,KAAK,CAACE,MAAaA,EAAS,MAAM,EAClC,KAAK,CAACC,MAAS;AACd,YAAMC,IAAM,OAAO,IAAI,gBAAgBD,CAAI;AAC3C,MAAAF,EAAK,OAAOG,GACZ,SAAS,KAAK,YAAYH,CAAI,GAC9BA,EAAK,MAAA,GACL,SAAS,KAAK,YAAYA,CAAI,GAC9B,OAAO,IAAI,gBAAgBG,CAAG;AAAA,IAChC,CAAC,EACA,MAAM,MAAM;AAAA,IAEb,CAAC;AAAA,EACL,GAAG,CAACtC,GAAQqB,CAAY,CAAC,GAGnBkB,IAAevC,EAAO,IAAI,CAACwC,OAAS;AAAA,IACxC,KAAKA,EAAI;AAAA,IACT,KAAKA,EAAI,OAAO;AAAA,IAChB,aAAaA,EAAI,eAAeA,EAAI;AAAA,EAAA,EACpC;AAGF,SAAKhB,IAKH,gBAAAiB;AAAA,IAACjB;AAAA,IAAA;AAAA,MACC,SAAAvB;AAAA,MACA,SAAS0B;AAAA,MACT,aAAaA;AAAA,MACb,QAAQY;AAAA,MACR,aAAalB;AAAA,MACb,UAAUQ;AAAA,MACV,WAAAxB;AAAA,MACA,wBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAW2B,EAAG,8BAA8B1B,CAAS;AAAA,MACrD,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,WAAW;AAAA,MACX,MAAAC;AAAA,MACA,eAAe,CAACuB,MAEPA,EAAS,IAAI,CAACC,MACfA,EAAQ,QAAQ,aACX;AAAA,QACL,GAAGA;AAAA,QACH,YAAY;AAAA;AAAA,QACZ,SAAS;AAAA,QACT,QACE,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAM;AAAA,YACN,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,SAAS;AAAA,YAAA;AAAA,YAEX,SAAS,CAACI,MAAM;AACd,cAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA,GACFb,EAAA;AAAA,YACF;AAAA,YAGA,UAAA,gBAAAc;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBAEN,UAAA;AAAA,kBAAA,gBAAAL;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,GAAE;AAAA,sBACF,QAAO;AAAA,sBACP,aAAY;AAAA,sBACZ,eAAc;AAAA,sBACd,gBAAe;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEjB,gBAAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,GAAE;AAAA,sBACF,GAAE;AAAA,sBACF,OAAM;AAAA,sBACN,QAAO;AAAA,sBACP,IAAG;AAAA,sBACH,MAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACP;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF,IAICG,CACR;AAAA,IACH;AAAA,EAAA,IAnFK;AAsFX;AAEA7C,EAAY,cAAc;AAMnB,MAAMgD,IAAoD,CAAC;AAAA,EAChE,KAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAvC;AAAA,EACA,kBAAAwC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAItC,EAAS,EAAI,GACrC,CAACuC,GAAOC,CAAQ,IAAIxC,EAAS,EAAK,GAClC,CAACyC,GAAeC,CAAgB,IAAI1C,EAAS,EAAK,GAElD2C,IAAa,MAAM;AACvB,IAAAL,EAAW,EAAK,GAChBE,EAAS,EAAK;AAAA,EAChB,GAEMI,IAAc,CAACtB,MAAqD;AACxE,IAAAgB,EAAW,EAAK,GAChBE,EAAS,EAAI,GACbL,IAAUb,CAAC;AAAA,EACb,GAEMuB,IAAgB,MAAM;AAC1B,IAAKhB,MACLa,EAAiB,EAAI,GACrBR,IAAA;AAAA,EACF,GAEMY,IAAoB,MAAM;AAC9B,IAAAJ,EAAiB,EAAK;AAAA,EACxB,GAEMK,IAAkBV,KAAWL,GAC7BgB,IAAeT,KAASR,GACxBkB,IAAkBpB,KAAW,CAACQ,KAAW,CAACE;AAEhD,SACE,gBAAAhB,EAAA2B,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAhC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAc;AAAA,QAAA;AAAA,QAGF,UAAA,gBAAAV,EAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,UAAAwB,KACC,gBAAA7B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAAS,GAAO,QAAAC,EAAA;AAAA,cAEf,gBAAgB,KACf,gBAAAV,EAAC,OAAA,EAAI,WAAU,uGAAsG,IAErHc;AAAA,YAAA;AAAA,UAAA;AAAA,UAKN,gBAAAd;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK8B,IAAejB,IAAWN;AAAA,cAC/B,KAAAC;AAAA,cACA,OAAAC;AAAA,cACA,QAAAC;AAAA,cACA,WAAWT;AAAA,gBACT;AAAA,gBACAkB,KAAW;AAAA,gBACX5C;AAAA,cAAA;AAAA,cAEF,QAAQkD;AAAA,cACR,SAASC;AAAA,cACR,GAAGR;AAAA,YAAA;AAAA,UAAA;AAAA,UAGLa,KACC,gBAAA/B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS2B;AAAA,cACT,WAAW1B;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAGF,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,6DACb,UAAA;AAAA,gBAAA,gBAAAL,EAACiC,GAAA,EAAO,WAAU,gBAAA,CAAgB;AAAA,gBAClC,gBAAAjC,EAAC,UAAK,UAAA,UAAA,CAAO;AAAA,cAAA,EAAA,CACf;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIF,gBAAAA;AAAA,MAAC1C;AAAA,MAAA;AAAA,QACC,QAAQ,CAAC,EAAE,KAAKsD,KAAcL,GAAK,KAAAC,GAAK;AAAA,QACxC,SAASe;AAAA,QACT,SAASK;AAAA,QACT,WAAS;AAAA,QACT,UAAQ;AAAA,QACR,cAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,GACF;AAEJ;AAEAtB,EAAiB,cAAc;AAYxB,MAAM4B,IAAoD,CAAC;AAAA,EAChE,UAAAC;AAAA,EACA,QAAA5E;AAAA,EACA,SAAAoD,IAAU;AACZ,MAAM;AACJ,QAAM,CAACY,GAAeC,CAAgB,IAAI1C,EAAS,EAAK,GAClD,CAACF,GAAcC,CAAe,IAAIC,EAAS,CAAC,GAE5C6C,IAAgBxC,EAAY,CAACG,MAAkB;AACnD,IAAAT,EAAgBS,CAAK,GACrBkC,EAAiB,EAAI;AAAA,EACvB,GAAG,CAAA,CAAE,GAECtC,IAAcC,EAAY,MAAM;AACpC,IAAAqC,EAAiB,EAAK;AAAA,EACxB,GAAG,CAAA,CAAE,GAECY,IAAeC,EAAM;AAAA,IACzB,OAAO;AAAA,MACL,eAAAV;AAAA,MACA,SAAAhB;AAAA,IAAA;AAAA,IAEF,CAACgB,GAAehB,CAAO;AAAA,EAAA;AAGzB,SACE,gBAAAN,EAAA2B,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAhC,EAACsC,EAAwB,UAAxB,EAAiC,OAAOF,GACtC,UAAAD,GACH;AAAA,IAEA,gBAAAnC;AAAA,MAAC1C;AAAA,MAAA;AAAA,QACC,QAAAC;AAAA,QACA,SAASgE;AAAA,QACT,SAASrC;AAAA,QACT,aAAaN;AAAA,QACb,eAAeC;AAAA,QACf,WAAS;AAAA,QACT,UAAQ;AAAA,QACR,cAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,GACF;AAEJ;AAEAqD,EAAiB,cAAc;AAG/B,MAAMI,IAA0BD,EAAM,cAG5B,IAAI;AAGe,OAAO,OAAO/E,GAAa;AAAA,EACtD,OAAOgD;AAAA,EACP,OAAO4B;AACT,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-date-filter.js","sources":["../../../../../src/components/Table/TableFilter/data-table-date-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport { formatDate } from \"@/utils/datetime\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { CalendarIcon, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Separator } from \"../../Separator\";\nimport { Popover } from \"../../Popover\";\nimport { Button } from \"../../Button\";\nimport { Calendar } from \"../../Calendar\";\n\ntype DateSelection = Date[] | DateRange;\n\nfunction getIsDateRange(value: DateSelection): value is DateRange {\n return value && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction parseAsDate(timestamp: number | string | undefined): Date | undefined {\n if (!timestamp) return undefined;\n const numericTimestamp =\n typeof timestamp === \"string\" ? Number(timestamp) : timestamp;\n const date = new Date(numericTimestamp);\n return !Number.isNaN(date.getTime()) ? date : undefined;\n}\n\nfunction parseColumnFilterValue(value: unknown) {\n if (value === null || value === undefined) {\n return [];\n }\n\n if (Array.isArray(value)) {\n return value.map((item) => {\n if (typeof item === \"number\" || typeof item === \"string\") {\n return item;\n }\n return undefined;\n });\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return [value];\n }\n\n return [];\n}\n\ninterface DataTableDateFilterProps<TData> {\n column: Column<TData, unknown>;\n title?: string;\n multiple?: boolean;\n}\n\nexport function DataTableDateFilter<TData>({\n column,\n title,\n multiple,\n}: DataTableDateFilterProps<TData>) {\n const columnFilterValue = column.getFilterValue();\n\n const selectedDates = React.useMemo<DateSelection>(() => {\n if (!columnFilterValue) {\n return multiple ? { from: undefined, to: undefined } : [];\n }\n\n if (multiple) {\n const timestamps = parseColumnFilterValue(columnFilterValue);\n return {\n from: parseAsDate(timestamps[0]),\n to: parseAsDate(timestamps[1]),\n };\n }\n\n const timestamps = parseColumnFilterValue(columnFilterValue);\n const date = parseAsDate(timestamps[0]);\n return date ? [date] : [];\n }, [columnFilterValue, multiple]);\n\n const onSelect = React.useCallback(\n (date: Date | DateRange | undefined) => {\n if (!date) {\n column.setFilterValue(undefined);\n return;\n }\n\n if (multiple && !(\"getTime\" in date)) {\n const from = date.from?.getTime();\n const to = date.to?.getTime();\n column.setFilterValue(from || to ? [from, to] : undefined);\n } else if (!multiple && \"getTime\" in date) {\n column.setFilterValue(date.getTime());\n }\n },\n [column, multiple]\n );\n\n const onReset = React.useCallback(\n (event: React.MouseEvent) => {\n event.stopPropagation();\n column.setFilterValue(undefined);\n },\n [column]\n );\n\n const hasValue = React.useMemo(() => {\n if (multiple) {\n if (!getIsDateRange(selectedDates)) return false;\n return selectedDates.from || selectedDates.to;\n }\n if (!Array.isArray(selectedDates)) return false;\n return selectedDates.length > 0;\n }, [multiple, selectedDates]);\n\n const formatDateRange = React.useCallback((range: DateRange) => {\n if (!range.from && !range.to) return \"\";\n if (range.from && range.to) {\n return `${formatDate(range.from)} - ${formatDate(range.to)}`;\n }\n return formatDate(range.from ?? range.to);\n }, []);\n\n const label = React.useMemo(() => {\n if (multiple) {\n if (!getIsDateRange(selectedDates)) return null;\n\n const hasSelectedDates = selectedDates.from || selectedDates.to;\n const dateText = hasSelectedDates\n ? formatDateRange(selectedDates)\n : \"Select date range\";\n\n return (\n <span className=\"ds:flex ds:items-center ds:gap-2\">\n <span>{title}</span>\n {hasSelectedDates && (\n <>\n <Separator\n orientation=\"vertical\"\n className=\"ds:mx-0.5 ds:data-[orientation=vertical]:h-4\"\n />\n <span>{dateText}</span>\n </>\n )}\n </span>\n );\n }\n\n if (getIsDateRange(selectedDates)) return null;\n\n const hasSelectedDate = selectedDates.length > 0;\n const dateText = hasSelectedDate\n ? formatDate(selectedDates[0])\n : \"Select date\";\n\n return (\n <span className=\"ds:flex ds:items-center ds:gap-2\">\n <span>{title}</span>\n {hasSelectedDate && (\n <>\n <Separator\n orientation=\"vertical\"\n className=\"ds:mx-0.5 ds:data-[orientation=vertical]:h-4\"\n />\n <span>{dateText}</span>\n </>\n )}\n </span>\n );\n }, [selectedDates, multiple, formatDateRange, title]);\n\n const PopContent = (\n <div className=\"ds:w-auto ds:p-0\">\n {multiple ? (\n <Calendar\n autoFocus\n captionLayout=\"dropdown\"\n mode=\"range\"\n selected={\n getIsDateRange(selectedDates)\n ? selectedDates\n : { from: undefined, to: undefined }\n }\n onSelect={onSelect}\n />\n ) : (\n <Calendar\n captionLayout=\"dropdown\"\n mode=\"single\"\n selected={\n !getIsDateRange(selectedDates) ? selectedDates[0] : undefined\n }\n onSelect={onSelect}\n />\n )}\n </div>\n );\n\n return (\n <Popover content={PopContent}>\n <Button variant=\"outline\" size=\"sm\" className=\"ds:border-dashed ds:font-normal\">\n {hasValue ? (\n <div\n role=\"button\"\n aria-label={`Clear ${title} filter`}\n tabIndex={0}\n onClick={onReset}\n className=\"ds:rounded-sm ds:opacity-70 ds:transition-opacity ds:hover:opacity-100 ds:focus-visible:outline-none ds:focus-visible:ring-1 ds:focus-visible:ring-ring\"\n >\n <XCircle />\n </div>\n ) : (\n <CalendarIcon />\n )}\n {label}\n </Button>\n </Popover>\n );\n}\n"],"names":["getIsDateRange","value","parseAsDate","timestamp","numericTimestamp","date","parseColumnFilterValue","item","DataTableDateFilter","column","title","multiple","columnFilterValue","selectedDates","React","timestamps","onSelect","from","to","onReset","event","hasValue","formatDateRange","range","formatDate","label","hasSelectedDates","dateText","jsxs","jsx","Fragment","Separator","hasSelectedDate","PopContent","Calendar","Popover","Button","XCircle","CalendarIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-date-filter.js","sources":["../../../../../src/components/Table/TableFilter/data-table-date-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport { formatDate } from \"@/utils/datetime\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { CalendarIcon, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Separator } from \"../../Separator\";\nimport { Popover } from \"../../Popover\";\nimport { Button } from \"../../Button\";\nimport { Calendar } from \"../../Calendar\";\n\ntype DateSelection = Date[] | DateRange;\n\nfunction getIsDateRange(value: DateSelection): value is DateRange {\n return value && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction parseAsDate(timestamp: number | string | undefined): Date | undefined {\n if (!timestamp) return undefined;\n const numericTimestamp =\n typeof timestamp === \"string\" ? Number(timestamp) : timestamp;\n const date = new Date(numericTimestamp);\n return !Number.isNaN(date.getTime()) ? date : undefined;\n}\n\nfunction parseColumnFilterValue(value: unknown) {\n if (value === null || value === undefined) {\n return [];\n }\n\n if (Array.isArray(value)) {\n return value.map((item) => {\n if (typeof item === \"number\" || typeof item === \"string\") {\n return item;\n }\n return undefined;\n });\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return [value];\n }\n\n return [];\n}\n\nexport interface DataTableDateFilterProps<TData> {\n column: Column<TData, unknown>;\n title?: string;\n multiple?: boolean;\n}\n\nexport function DataTableDateFilter<TData>({\n column,\n title,\n multiple,\n}: DataTableDateFilterProps<TData>) {\n const columnFilterValue = column.getFilterValue();\n\n const selectedDates = React.useMemo<DateSelection>(() => {\n if (!columnFilterValue) {\n return multiple ? { from: undefined, to: undefined } : [];\n }\n\n if (multiple) {\n const timestamps = parseColumnFilterValue(columnFilterValue);\n return {\n from: parseAsDate(timestamps[0]),\n to: parseAsDate(timestamps[1]),\n };\n }\n\n const timestamps = parseColumnFilterValue(columnFilterValue);\n const date = parseAsDate(timestamps[0]);\n return date ? [date] : [];\n }, [columnFilterValue, multiple]);\n\n const onSelect = React.useCallback(\n (date: Date | DateRange | undefined) => {\n if (!date) {\n column.setFilterValue(undefined);\n return;\n }\n\n if (multiple && !(\"getTime\" in date)) {\n const from = date.from?.getTime();\n const to = date.to?.getTime();\n column.setFilterValue(from || to ? [from, to] : undefined);\n } else if (!multiple && \"getTime\" in date) {\n column.setFilterValue(date.getTime());\n }\n },\n [column, multiple]\n );\n\n const onReset = React.useCallback(\n (event: React.MouseEvent) => {\n event.stopPropagation();\n column.setFilterValue(undefined);\n },\n [column]\n );\n\n const hasValue = React.useMemo(() => {\n if (multiple) {\n if (!getIsDateRange(selectedDates)) return false;\n return selectedDates.from || selectedDates.to;\n }\n if (!Array.isArray(selectedDates)) return false;\n return selectedDates.length > 0;\n }, [multiple, selectedDates]);\n\n const formatDateRange = React.useCallback((range: DateRange) => {\n if (!range.from && !range.to) return \"\";\n if (range.from && range.to) {\n return `${formatDate(range.from)} - ${formatDate(range.to)}`;\n }\n return formatDate(range.from ?? range.to);\n }, []);\n\n const label = React.useMemo(() => {\n if (multiple) {\n if (!getIsDateRange(selectedDates)) return null;\n\n const hasSelectedDates = selectedDates.from || selectedDates.to;\n const dateText = hasSelectedDates\n ? formatDateRange(selectedDates)\n : \"Select date range\";\n\n return (\n <span className=\"ds:flex ds:items-center ds:gap-2\">\n <span>{title}</span>\n {hasSelectedDates && (\n <>\n <Separator\n orientation=\"vertical\"\n className=\"ds:mx-0.5 ds:data-[orientation=vertical]:h-4\"\n />\n <span>{dateText}</span>\n </>\n )}\n </span>\n );\n }\n\n if (getIsDateRange(selectedDates)) return null;\n\n const hasSelectedDate = selectedDates.length > 0;\n const dateText = hasSelectedDate\n ? formatDate(selectedDates[0])\n : \"Select date\";\n\n return (\n <span className=\"ds:flex ds:items-center ds:gap-2\">\n <span>{title}</span>\n {hasSelectedDate && (\n <>\n <Separator\n orientation=\"vertical\"\n className=\"ds:mx-0.5 ds:data-[orientation=vertical]:h-4\"\n />\n <span>{dateText}</span>\n </>\n )}\n </span>\n );\n }, [selectedDates, multiple, formatDateRange, title]);\n\n const PopContent = (\n <div className=\"ds:w-auto ds:p-0\">\n {multiple ? (\n <Calendar\n autoFocus\n captionLayout=\"dropdown\"\n mode=\"range\"\n selected={\n getIsDateRange(selectedDates)\n ? selectedDates\n : { from: undefined, to: undefined }\n }\n onSelect={onSelect}\n />\n ) : (\n <Calendar\n captionLayout=\"dropdown\"\n mode=\"single\"\n selected={\n !getIsDateRange(selectedDates) ? selectedDates[0] : undefined\n }\n onSelect={onSelect}\n />\n )}\n </div>\n );\n\n return (\n <Popover content={PopContent}>\n <Button variant=\"outline\" size=\"sm\" className=\"ds:border-dashed ds:font-normal\">\n {hasValue ? (\n <div\n role=\"button\"\n aria-label={`Clear ${title} filter`}\n tabIndex={0}\n onClick={onReset}\n className=\"ds:rounded-sm ds:opacity-70 ds:transition-opacity ds:hover:opacity-100 ds:focus-visible:outline-none ds:focus-visible:ring-1 ds:focus-visible:ring-ring\"\n >\n <XCircle />\n </div>\n ) : (\n <CalendarIcon />\n )}\n {label}\n </Button>\n </Popover>\n );\n}\n"],"names":["getIsDateRange","value","parseAsDate","timestamp","numericTimestamp","date","parseColumnFilterValue","item","DataTableDateFilter","column","title","multiple","columnFilterValue","selectedDates","React","timestamps","onSelect","from","to","onReset","event","hasValue","formatDateRange","range","formatDate","label","hasSelectedDates","dateText","jsxs","jsx","Fragment","Separator","hasSelectedDate","PopContent","Calendar","Popover","Button","XCircle","CalendarIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-filter-popover.js","sources":["../../../../../src/components/Table/TableFilter/data-table-filter-popover.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Popover } from \"../../Popover\";\nimport { Input } from \"../../Input\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Radio } from \"../../Radio\";\nimport { DataTableSliderFilter } from \"./data-table-slider-filter\";\nimport { DataTableDateFilter } from \"./data-table-date-filter\";\nimport { Separator } from \"@/components/Separator\";\nimport { Button } from \"@/components/Button\";\n\
|
|
1
|
+
{"version":3,"file":"data-table-filter-popover.js","sources":["../../../../../src/components/Table/TableFilter/data-table-filter-popover.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Popover } from \"../../Popover\";\nimport { Input } from \"../../Input\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Radio } from \"../../Radio\";\nimport { DataTableSliderFilter } from \"./data-table-slider-filter\";\nimport { DataTableDateFilter } from \"./data-table-date-filter\";\nimport { Separator } from \"@/components/Separator\";\nimport { Button } from \"@/components/Button\";\n\nexport interface DataTableFilterPopoverProps<TData> {\n column: Column<TData>;\n trigger: React.ReactNode;\n open?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport function DataTableFilterPopover<TData>({\n column,\n trigger,\n open,\n onOpenChange,\n}: DataTableFilterPopoverProps<TData>) {\n const [internalOpen, setInternalOpen] = React.useState(false);\n\n const isOpen = open !== undefined ? open : internalOpen;\n const setIsOpen = onOpenChange || setInternalOpen;\n\n const columnMeta = column.columnDef.meta;\n\n const renderFilterContent = () => {\n if (!columnMeta?.variant) return <div>No filter available</div>;\n\n switch (columnMeta.variant) {\n case \"text\":\n return (\n <Input\n placeholder={columnMeta.placeholder ?? columnMeta.label}\n value={(column.getFilterValue() as string) ?? \"\"}\n onChange={(event: React.ChangeEvent<HTMLInputElement>) =>\n column.setFilterValue(event.target.value)\n }\n className=\"ds:h-8 ds:w-full\"\n />\n );\n\n case \"number\":\n return (\n <Input\n type=\"number\"\n placeholder={columnMeta.placeholder ?? columnMeta.label}\n value={(column.getFilterValue() as string) ?? \"\"}\n onChange={(event: React.ChangeEvent<HTMLInputElement>) =>\n column.setFilterValue(event.target.value)\n }\n className=\"ds:h-8 ds:w-full\"\n />\n );\n\n case \"date\":\n case \"dateRange\":\n return (\n <DataTableDateFilter\n column={column}\n title={columnMeta.label ?? column.id}\n multiple={columnMeta.variant === \"dateRange\"}\n />\n );\n\n case \"range\":\n return (\n <DataTableSliderFilter\n column={column}\n title={columnMeta.label ?? column.id}\n />\n );\n\n case \"select\":\n case \"multiSelect\": {\n const options = columnMeta.options || [];\n const multiple = columnMeta.variant === \"multiSelect\";\n\n if (multiple) {\n const currentValues = (column.getFilterValue() as string[]) || [];\n return (\n <>\n <div className=\"ds:space-y-2 ds:max-h-48 ds:overflow-y-auto ds:text-sm\">\n {options.map((option) => (\n <div\n key={option.value}\n className=\"ds:flex ds:items-center ds:space-x-2\"\n >\n <Checkbox\n checked={currentValues.includes(option.value)}\n onCheckedChange={(checked) => {\n if (checked) {\n column.setFilterValue([\n ...currentValues,\n option.value,\n ]);\n } else {\n column.setFilterValue(\n currentValues.filter((v) => v !== option.value)\n );\n }\n }}\n label={option.label}\n />\n </div>\n ))}\n </div>\n {/* <Separator className=\"my-2\" /> */}\n {/* <div className=\"flex justify-center gap-0 mt-2\">\n <Button\n variant=\"ghost\"\n onClick={() =>\n column.setFilterValue(options.map((o) => o.value))\n }\n >\n Check All\n </Button>\n <Button\n variant=\"ghost\"\n onClick={() => column.setFilterValue(undefined)}\n >\n <X className=\"size-3\" />\n Clear Filter\n </Button>\n </div> */}\n </>\n );\n } else {\n const currentValue = column.getFilterValue() as string;\n return (\n <Radio\n value={currentValue}\n onValueChange={(value) => column.setFilterValue(value)}\n options={options.map((option) => ({\n label: option.label,\n value: option.value,\n }))}\n className=\"ds:p-1\"\n />\n );\n }\n }\n\n default:\n return <div>No filter available</div>;\n }\n };\n\n const hasFilterValue = column.getFilterValue() != null;\n\n return (\n <Popover\n open={isOpen}\n onOpenChange={setIsOpen}\n trigger={trigger}\n content={\n <div className=\"ds:p-2 ds:min-w-32\">\n {renderFilterContent()}\n {hasFilterValue && (\n <>\n <Separator className=\"ds:mt-3 ds:mb-1\" />\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => column.setFilterValue(undefined)}\n >\n <X className=\"ds:size-3\" />\n Clear Filter\n </Button>\n </>\n )}\n </div>\n }\n contentClassName=\"ds:p-0\"\n />\n );\n}\n"],"names":["DataTableFilterPopover","column","trigger","open","onOpenChange","internalOpen","setInternalOpen","React","isOpen","setIsOpen","columnMeta","renderFilterContent","jsx","Input","event","DataTableDateFilter","DataTableSliderFilter","options","currentValues","Fragment","option","Checkbox","checked","v","currentValue","Radio","value","hasFilterValue","Popover","jsxs","Separator","Button","X"],"mappings":";;;;;;;;;;;AAsBO,SAASA,EAA8B;AAAA,EAC5C,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AACF,GAAuC;AACrC,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAM,SAAS,EAAK,GAEtDC,IAASL,MAAS,SAAYA,IAAOE,GACrCI,IAAYL,KAAgBE,GAE5BI,IAAaT,EAAO,UAAU,MAE9BU,IAAsB,MAAM;AAChC,QAAI,CAACD,GAAY,QAAS,QAAO,gBAAAE,EAAC,SAAI,UAAA,uBAAmB;AAEzD,YAAQF,EAAW,SAAA;AAAA,MACjB,KAAK;AACH,eACE,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAaH,EAAW,eAAeA,EAAW;AAAA,YAClD,OAAQT,EAAO,eAAA,KAA+B;AAAA,YAC9C,UAAU,CAACa,MACTb,EAAO,eAAea,EAAM,OAAO,KAAK;AAAA,YAE1C,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAIhB,KAAK;AACH,eACE,gBAAAF;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,aAAaH,EAAW,eAAeA,EAAW;AAAA,YAClD,OAAQT,EAAO,eAAA,KAA+B;AAAA,YAC9C,UAAU,CAACa,MACTb,EAAO,eAAea,EAAM,OAAO,KAAK;AAAA,YAE1C,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAIhB,KAAK;AAAA,MACL,KAAK;AACH,eACE,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,QAAAd;AAAA,YACA,OAAOS,EAAW,SAAST,EAAO;AAAA,YAClC,UAAUS,EAAW,YAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAIvC,KAAK;AACH,eACE,gBAAAE;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,QAAAf;AAAA,YACA,OAAOS,EAAW,SAAST,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAIxC,KAAK;AAAA,MACL,KAAK,eAAe;AAClB,cAAMgB,IAAUP,EAAW,WAAW,CAAA;AAGtC,YAFiBA,EAAW,YAAY,eAE1B;AACZ,gBAAMQ,IAAiBjB,EAAO,eAAA,KAAiC,CAAA;AAC/D,iBACE,gBAAAW,EAAAO,GAAA,EACE,4BAAC,OAAA,EAAI,WAAU,0DACZ,UAAAF,EAAQ,IAAI,CAACG,MACZ,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAEV,UAAA,gBAAAA;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,SAASH,EAAc,SAASE,EAAO,KAAK;AAAA,kBAC5C,iBAAiB,CAACE,MAAY;AAC5B,oBAAIA,IACFrB,EAAO,eAAe;AAAA,sBACpB,GAAGiB;AAAA,sBACHE,EAAO;AAAA,oBAAA,CACR,IAEDnB,EAAO;AAAA,sBACLiB,EAAc,OAAO,CAACK,MAAMA,MAAMH,EAAO,KAAK;AAAA,oBAAA;AAAA,kBAGpD;AAAA,kBACA,OAAOA,EAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YAChB;AAAA,YAlBKA,EAAO;AAAA,UAAA,CAoBf,GACH,EAAA,CAmBF;AAAA,QAEJ,OAAO;AACL,gBAAMI,IAAevB,EAAO,eAAA;AAC5B,iBACE,gBAAAW;AAAA,YAACa;AAAA,YAAA;AAAA,cACC,OAAOD;AAAA,cACP,eAAe,CAACE,MAAUzB,EAAO,eAAeyB,CAAK;AAAA,cACrD,SAAST,EAAQ,IAAI,CAACG,OAAY;AAAA,gBAChC,OAAOA,EAAO;AAAA,gBACd,OAAOA,EAAO;AAAA,cAAA,EACd;AAAA,cACF,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAGhB;AAAA,MACF;AAAA,MAEA;AACE,eAAO,gBAAAR,EAAC,SAAI,UAAA,sBAAA,CAAmB;AAAA,IAAA;AAAA,EAErC,GAEMe,IAAiB1B,EAAO,eAAA,KAAoB;AAElD,SACE,gBAAAW;AAAA,IAACgB;AAAA,IAAA;AAAA,MACC,MAAMpB;AAAA,MACN,cAAcC;AAAA,MACd,SAAAP;AAAA,MACA,SACE,gBAAA2B,EAAC,OAAA,EAAI,WAAU,sBACZ,UAAA;AAAA,QAAAlB,EAAA;AAAA,QACAgB,KACC,gBAAAE,EAAAV,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAP,EAACkB,GAAA,EAAU,WAAU,kBAAA,CAAkB;AAAA,UACvC,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM9B,EAAO,eAAe,MAAS;AAAA,cAE9C,UAAA;AAAA,gBAAA,gBAAAW,EAACoB,GAAA,EAAE,WAAU,YAAA,CAAY;AAAA,gBAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAE7B,EAAA,CACF;AAAA,MAAA,GAEJ;AAAA,MAEF,kBAAiB;AAAA,IAAA;AAAA,EAAA;AAGvB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-slider-filter.js","sources":["../../../../../src/components/Table/TableFilter/data-table-slider-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { PlusCircle, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../../Button\";\nimport { Input } from \"../../Input\";\nimport { Popover } from \"../../Popover\";\nimport { Separator } from \"../../Separator\";\nimport { Slider } from \"../../Slider\";\nimport { cn } from \"@dsui/ui/index\";\n\ninterface Range {\n min: number;\n max: number;\n}\n\ntype RangeValue = [number, number];\n\nfunction getIsValidRange(value: unknown): value is RangeValue {\n return (\n Array.isArray(value) &&\n value.length === 2 &&\n typeof value[0] === \"number\" &&\n typeof value[1] === \"number\"\n );\n}\n\nfunction parseValuesAsNumbers(value: unknown): RangeValue | undefined {\n if (\n Array.isArray(value) &&\n value.length === 2 &&\n value.every(\n (v) =>\n (typeof v === \"string\" || typeof v === \"number\") && !Number.isNaN(v)\n )\n ) {\n return [Number(value[0]), Number(value[1])];\n }\n\n return undefined;\n}\n\ninterface DataTableSliderFilterProps<TData> {\n column: Column<TData, unknown>;\n title?: string;\n}\n\nexport function DataTableSliderFilter<TData>({\n column,\n title,\n}: DataTableSliderFilterProps<TData>) {\n const id = React.useId();\n\n const columnFilterValue = parseValuesAsNumbers(column.getFilterValue());\n\n const defaultRange = column.columnDef.meta?.range;\n const unit = column.columnDef.meta?.unit;\n\n const { min, max, step } = React.useMemo<Range & { step: number }>(() => {\n let minValue = 0;\n let maxValue = 100;\n\n if (defaultRange && getIsValidRange(defaultRange)) {\n [minValue, maxValue] = defaultRange;\n } else {\n const values = column.getFacetedMinMaxValues();\n if (values && Array.isArray(values) && values.length === 2) {\n const [facetMinValue, facetMaxValue] = values;\n if (\n typeof facetMinValue === \"number\" &&\n typeof facetMaxValue === \"number\"\n ) {\n minValue = facetMinValue;\n maxValue = facetMaxValue;\n }\n }\n }\n\n const rangeSize = maxValue - minValue;\n const step =\n rangeSize <= 20\n ? 1\n : rangeSize <= 100\n ? Math.ceil(rangeSize / 20)\n : Math.ceil(rangeSize / 50);\n\n return { min: minValue, max: maxValue, step };\n }, [column, defaultRange]);\n\n const range = React.useMemo((): RangeValue => {\n return columnFilterValue ?? [min, max];\n }, [columnFilterValue, min, max]);\n\n const formatValue = React.useCallback((value: number) => {\n return value.toLocaleString(undefined, { maximumFractionDigits: 0 });\n }, []);\n\n const onFromInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const numValue = Number(event.target.value);\n if (!Number.isNaN(numValue) && numValue >= min && numValue <= range[1]) {\n column.setFilterValue([numValue, range[1]]);\n }\n },\n [column, min, range]\n );\n\n const onToInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const numValue = Number(event.target.value);\n if (!Number.isNaN(numValue) && numValue <= max && numValue >= range[0]) {\n column.setFilterValue([range[0], numValue]);\n }\n },\n [column, max, range]\n );\n\n const onSliderValueChange = React.useCallback(\n (value: RangeValue) => {\n if (Array.isArray(value) && value.length === 2) {\n column.setFilterValue(value);\n }\n },\n [column]\n );\n\n const onReset = React.useCallback(\n (event: React.MouseEvent) => {\n if (event.target instanceof HTMLDivElement) {\n event.stopPropagation();\n }\n column.setFilterValue(undefined);\n },\n [column]\n );\n\n const PopContent = (\n <div className=\"ds:flex ds:w-auto ds:flex-col ds:gap-4\">\n <div className=\"ds:flex ds:flex-col ds:gap-3\">\n <p className=\"ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\">\n {title}\n </p>\n <div className=\"ds:flex ds:items-center ds:gap-4\">\n <label htmlFor={`${id}-from`} className=\"ds:sr-only\">\n From\n </label>\n <div className=\"ds:relative\">\n <Input\n id={`${id}-from`}\n type=\"number\"\n aria-valuemin={min}\n aria-valuemax={max}\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n placeholder={min.toString()}\n min={min}\n max={max}\n value={range[0]?.toString()}\n onChange={onFromInputChange}\n className={cn(\"ds:h-8 ds:w-24\", unit && \"ds:pr-8\")}\n />\n {unit && (\n <span className=\"ds:absolute ds:top-0 ds:right-0 ds:bottom-0 ds:flex ds:items-center ds:rounded-r-md ds:bg-accent ds:px-2 ds:text-muted-foreground ds:text-sm\">\n {unit}\n </span>\n )}\n </div>\n <label htmlFor={`${id}-to`} className=\"ds:sr-only\">\n to\n </label>\n <div className=\"ds:relative\">\n <Input\n id={`${id}-to`}\n type=\"number\"\n aria-valuemin={min}\n aria-valuemax={max}\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n placeholder={max.toString()}\n min={min}\n max={max}\n value={range[1]?.toString()}\n onChange={onToInputChange}\n className={cn(\"ds:h-8 ds:w-24\", unit && \"ds:pr-8\")}\n />\n {unit && (\n <span className=\"ds:absolute ds:top-0 ds:right-0 ds:bottom-0 ds:flex ds:items-center ds:rounded-r-md ds:bg-accent ds:px-2 ds:text-muted-foreground ds:text-sm\">\n {unit}\n </span>\n )}\n </div>\n </div>\n <label htmlFor={`${id}-slider`} className=\"ds:sr-only\">\n {title} slider\n </label>\n <Slider\n id={`${id}-slider`}\n min={min}\n max={max}\n step={step}\n value={range}\n onValueChange={onSliderValueChange}\n />\n </div>\n <Button\n aria-label={`Clear ${title} filter`}\n variant=\"outline\"\n size=\"sm\"\n onClick={onReset}\n >\n Clear\n </Button>\n </div>\n );\n\n return (\n <Popover content={PopContent}>\n <Button variant=\"outline\" size=\"sm\" className=\"ds:border-dashed ds:font-normal\">\n {columnFilterValue ? (\n <div\n role=\"button\"\n aria-label={`Clear ${title} filter`}\n tabIndex={0}\n className=\"ds:rounded-sm ds:opacity-70 ds:transition-opacity ds:hover:opacity-100 ds:focus-visible:outline-none ds:focus-visible:ring-1 ds:focus-visible:ring-ring\"\n onClick={onReset}\n >\n <XCircle />\n </div>\n ) : (\n <PlusCircle />\n )}\n <span>{title}</span>\n {columnFilterValue ? (\n <>\n <Separator\n orientation=\"vertical\"\n className=\"ds:mx-0.5 ds:data-[orientation=vertical]:h-4\"\n />\n {formatValue(columnFilterValue[0])} -{\" \"}\n {formatValue(columnFilterValue[1])}\n {unit ? ` ${unit}` : \"\"}\n </>\n ) : null}\n </Button>\n </Popover>\n );\n}\n"],"names":["getIsValidRange","value","parseValuesAsNumbers","v","DataTableSliderFilter","column","title","id","React","columnFilterValue","defaultRange","unit","min","max","step","minValue","maxValue","values","facetMinValue","facetMaxValue","rangeSize","range","formatValue","onFromInputChange","event","numValue","onToInputChange","onSliderValueChange","onReset","PopContent","jsxs","jsx","Input","cn","Slider","Button","Popover","XCircle","PlusCircle","Fragment","Separator"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-slider-filter.js","sources":["../../../../../src/components/Table/TableFilter/data-table-slider-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { PlusCircle, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../../Button\";\nimport { Input } from \"../../Input\";\nimport { Popover } from \"../../Popover\";\nimport { Separator } from \"../../Separator\";\nimport { Slider } from \"../../Slider\";\nimport { cn } from \"@dsui/ui/index\";\n\ninterface Range {\n min: number;\n max: number;\n}\n\ntype RangeValue = [number, number];\n\nfunction getIsValidRange(value: unknown): value is RangeValue {\n return (\n Array.isArray(value) &&\n value.length === 2 &&\n typeof value[0] === \"number\" &&\n typeof value[1] === \"number\"\n );\n}\n\nfunction parseValuesAsNumbers(value: unknown): RangeValue | undefined {\n if (\n Array.isArray(value) &&\n value.length === 2 &&\n value.every(\n (v) =>\n (typeof v === \"string\" || typeof v === \"number\") && !Number.isNaN(v)\n )\n ) {\n return [Number(value[0]), Number(value[1])];\n }\n\n return undefined;\n}\n\nexport interface DataTableSliderFilterProps<TData> {\n column: Column<TData, unknown>;\n title?: string;\n}\n\nexport function DataTableSliderFilter<TData>({\n column,\n title,\n}: DataTableSliderFilterProps<TData>) {\n const id = React.useId();\n\n const columnFilterValue = parseValuesAsNumbers(column.getFilterValue());\n\n const defaultRange = column.columnDef.meta?.range;\n const unit = column.columnDef.meta?.unit;\n\n const { min, max, step } = React.useMemo<Range & { step: number }>(() => {\n let minValue = 0;\n let maxValue = 100;\n\n if (defaultRange && getIsValidRange(defaultRange)) {\n [minValue, maxValue] = defaultRange;\n } else {\n const values = column.getFacetedMinMaxValues();\n if (values && Array.isArray(values) && values.length === 2) {\n const [facetMinValue, facetMaxValue] = values;\n if (\n typeof facetMinValue === \"number\" &&\n typeof facetMaxValue === \"number\"\n ) {\n minValue = facetMinValue;\n maxValue = facetMaxValue;\n }\n }\n }\n\n const rangeSize = maxValue - minValue;\n const step =\n rangeSize <= 20\n ? 1\n : rangeSize <= 100\n ? Math.ceil(rangeSize / 20)\n : Math.ceil(rangeSize / 50);\n\n return { min: minValue, max: maxValue, step };\n }, [column, defaultRange]);\n\n const range = React.useMemo((): RangeValue => {\n return columnFilterValue ?? [min, max];\n }, [columnFilterValue, min, max]);\n\n const formatValue = React.useCallback((value: number) => {\n return value.toLocaleString(undefined, { maximumFractionDigits: 0 });\n }, []);\n\n const onFromInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const numValue = Number(event.target.value);\n if (!Number.isNaN(numValue) && numValue >= min && numValue <= range[1]) {\n column.setFilterValue([numValue, range[1]]);\n }\n },\n [column, min, range]\n );\n\n const onToInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const numValue = Number(event.target.value);\n if (!Number.isNaN(numValue) && numValue <= max && numValue >= range[0]) {\n column.setFilterValue([range[0], numValue]);\n }\n },\n [column, max, range]\n );\n\n const onSliderValueChange = React.useCallback(\n (value: RangeValue) => {\n if (Array.isArray(value) && value.length === 2) {\n column.setFilterValue(value);\n }\n },\n [column]\n );\n\n const onReset = React.useCallback(\n (event: React.MouseEvent) => {\n if (event.target instanceof HTMLDivElement) {\n event.stopPropagation();\n }\n column.setFilterValue(undefined);\n },\n [column]\n );\n\n const PopContent = (\n <div className=\"ds:flex ds:w-auto ds:flex-col ds:gap-4\">\n <div className=\"ds:flex ds:flex-col ds:gap-3\">\n <p className=\"ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\">\n {title}\n </p>\n <div className=\"ds:flex ds:items-center ds:gap-4\">\n <label htmlFor={`${id}-from`} className=\"ds:sr-only\">\n From\n </label>\n <div className=\"ds:relative\">\n <Input\n id={`${id}-from`}\n type=\"number\"\n aria-valuemin={min}\n aria-valuemax={max}\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n placeholder={min.toString()}\n min={min}\n max={max}\n value={range[0]?.toString()}\n onChange={onFromInputChange}\n className={cn(\"ds:h-8 ds:w-24\", unit && \"ds:pr-8\")}\n />\n {unit && (\n <span className=\"ds:absolute ds:top-0 ds:right-0 ds:bottom-0 ds:flex ds:items-center ds:rounded-r-md ds:bg-accent ds:px-2 ds:text-muted-foreground ds:text-sm\">\n {unit}\n </span>\n )}\n </div>\n <label htmlFor={`${id}-to`} className=\"ds:sr-only\">\n to\n </label>\n <div className=\"ds:relative\">\n <Input\n id={`${id}-to`}\n type=\"number\"\n aria-valuemin={min}\n aria-valuemax={max}\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n placeholder={max.toString()}\n min={min}\n max={max}\n value={range[1]?.toString()}\n onChange={onToInputChange}\n className={cn(\"ds:h-8 ds:w-24\", unit && \"ds:pr-8\")}\n />\n {unit && (\n <span className=\"ds:absolute ds:top-0 ds:right-0 ds:bottom-0 ds:flex ds:items-center ds:rounded-r-md ds:bg-accent ds:px-2 ds:text-muted-foreground ds:text-sm\">\n {unit}\n </span>\n )}\n </div>\n </div>\n <label htmlFor={`${id}-slider`} className=\"ds:sr-only\">\n {title} slider\n </label>\n <Slider\n id={`${id}-slider`}\n min={min}\n max={max}\n step={step}\n value={range}\n onValueChange={onSliderValueChange}\n />\n </div>\n <Button\n aria-label={`Clear ${title} filter`}\n variant=\"outline\"\n size=\"sm\"\n onClick={onReset}\n >\n Clear\n </Button>\n </div>\n );\n\n return (\n <Popover content={PopContent}>\n <Button variant=\"outline\" size=\"sm\" className=\"ds:border-dashed ds:font-normal\">\n {columnFilterValue ? (\n <div\n role=\"button\"\n aria-label={`Clear ${title} filter`}\n tabIndex={0}\n className=\"ds:rounded-sm ds:opacity-70 ds:transition-opacity ds:hover:opacity-100 ds:focus-visible:outline-none ds:focus-visible:ring-1 ds:focus-visible:ring-ring\"\n onClick={onReset}\n >\n <XCircle />\n </div>\n ) : (\n <PlusCircle />\n )}\n <span>{title}</span>\n {columnFilterValue ? (\n <>\n <Separator\n orientation=\"vertical\"\n className=\"ds:mx-0.5 ds:data-[orientation=vertical]:h-4\"\n />\n {formatValue(columnFilterValue[0])} -{\" \"}\n {formatValue(columnFilterValue[1])}\n {unit ? ` ${unit}` : \"\"}\n </>\n ) : null}\n </Button>\n </Popover>\n );\n}\n"],"names":["getIsValidRange","value","parseValuesAsNumbers","v","DataTableSliderFilter","column","title","id","React","columnFilterValue","defaultRange","unit","min","max","step","minValue","maxValue","values","facetMinValue","facetMaxValue","rangeSize","range","formatValue","onFromInputChange","event","numValue","onToInputChange","onSliderValueChange","onReset","PopContent","jsxs","jsx","Input","cn","Slider","Button","Popover","XCircle","PlusCircle","Fragment","Separator"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/Table/data-table-column-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport {\n ChevronDown,\n ChevronsUpDown,\n ChevronUp,\n EyeOff,\n Filter,\n X,\n} from \"lucide-react\";\n\nimport { cn } from \"@dsui/ui\";\nimport DropdownMenu, {\n type DropdownMenuItem,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { DataTableFilterPopover } from \"./TableFilter/data-table-filter-popover\";\nimport { Button } from \"../Button\";\n\
|
|
1
|
+
{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/Table/data-table-column-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport {\n ChevronDown,\n ChevronsUpDown,\n ChevronUp,\n EyeOff,\n Filter,\n X,\n} from \"lucide-react\";\n\nimport { cn } from \"@dsui/ui\";\nimport DropdownMenu, {\n type DropdownMenuItem,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { DataTableFilterPopover } from \"./TableFilter/data-table-filter-popover\";\nimport { Button } from \"../Button\";\n\nexport interface DataTableColumnHeaderProps<TData, TValue> {\n column: Column<TData, TValue>;\n label?: string;\n className?: string;\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n column,\n label,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n const displayLabel =\n label ||\n (typeof column.columnDef.header === \"string\"\n ? column.columnDef.header\n : null);\n\n const hasActions =\n column.getCanSort() || column.getCanHide() || column.getCanFilter();\n\n if (!hasActions) {\n return <div className={cn(className)}>{displayLabel}</div>;\n }\n\n const sortTrigger = (\n <button className=\"ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground\">\n {displayLabel}\n {column.getCanSort() &&\n (column.getIsSorted() === \"desc\" ? (\n <ChevronDown />\n ) : column.getIsSorted() === \"asc\" ? (\n <ChevronUp />\n ) : (\n <ChevronsUpDown />\n ))}\n </button>\n );\n\n const filterButton =\n column.getCanFilter() && column.columnDef.meta?.variant ? (\n <DataTableFilterPopover\n column={column}\n trigger={\n <Button\n variant=\"ghost\"\n className={cn(\n \"ds:hover:bg-accent ds:rounded ds:p-1\",\n column.getFilterValue() ? \"ds:text-primary\" : \"\"\n )}\n >\n <Filter className=\"ds:size-4\" />\n </Button>\n }\n />\n ) : null;\n\n const items: DropdownMenuItem[] = [];\n\n if (column.getCanSort()) {\n items.push({\n key: \"asc\",\n type: \"checkbox\",\n label: \"Asc\",\n icon: <ChevronUp />,\n checked: column.getIsSorted() === \"asc\",\n onClick: () => column.toggleSorting(false),\n className:\n \"ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground\",\n });\n items.push({\n key: \"desc\",\n type: \"checkbox\",\n label: \"Desc\",\n icon: <ChevronDown />,\n checked: column.getIsSorted() === \"desc\",\n onClick: () => column.toggleSorting(true),\n className:\n \"ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground\",\n });\n if (column.getIsSorted()) {\n items.push({\n key: \"reset\",\n type: \"item\",\n label: \"Reset\",\n icon: <X />,\n onClick: () => column.clearSorting(),\n className: \"ds:pl-2 ds:[&_svg]:text-muted-foreground\",\n });\n }\n }\n\n if (column.getCanHide()) {\n items.push({\n key: \"hide\",\n type: \"checkbox\",\n label: \"Hide\",\n icon: <EyeOff />,\n checked: !column.getIsVisible(),\n onClick: () => column.toggleVisibility(false),\n className:\n \"ds:relative ds:pr-8 ds:pl-2 ds:[&>span:first-child]:right-2 ds:[&>span:first-child]:left-auto ds:[&_svg]:text-muted-foreground\",\n });\n }\n\n return (\n <div className={cn(\"ds:flex ds:items-center ds:gap-1.5\", className)}>\n <DropdownMenu\n trigger={sortTrigger}\n items={items}\n align=\"start\"\n contentClassName=\"ds:w-28\"\n />\n {filterButton}\n </div>\n );\n}\n"],"names":["DataTableColumnHeader","column","label","className","displayLabel","cn","sortTrigger","jsxs","jsx","ChevronDown","ChevronUp","ChevronsUpDown","filterButton","DataTableFilterPopover","Button","Filter","items","X","EyeOff","DropdownMenu"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAASA,GAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAA8C;AAC5C,QAAMC,IACJF,MACC,OAAOD,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjB;AAKN,MAAI,EAFFA,EAAO,WAAA,KAAgBA,EAAO,WAAA,KAAgBA,EAAO,aAAA;AAGrD,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAC,GAAa;AAGtD,QAAME,IACJ,gBAAAC,EAAC,UAAA,EAAO,WAAU,0QACf,UAAA;AAAA,IAAAH;AAAA,IACAH,EAAO,WAAA,MACLA,EAAO,YAAA,MAAkB,SACxB,gBAAAO,EAACC,GAAA,EAAY,IACXR,EAAO,kBAAkB,0BAC1BS,GAAA,CAAA,CAAU,sBAEVC,GAAA,EAAe;AAAA,EAAA,GAEtB,GAGIC,IACJX,EAAO,aAAA,KAAkBA,EAAO,UAAU,MAAM,UAC9C,gBAAAO;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,QAAAZ;AAAA,MACA,SACE,gBAAAO;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAWT;AAAA,YACT;AAAA,YACAJ,EAAO,eAAA,IAAmB,oBAAoB;AAAA,UAAA;AAAA,UAGhD,UAAA,gBAAAO,EAACO,GAAA,EAAO,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC;AAAA,EAAA,IAGF,MAEAC,IAA4B,CAAA;AAElC,SAAIf,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAON,GAAA,EAAU;AAAA,IACjB,SAAST,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAK;AAAA,IACzC,WACE;AAAA,EAAA,CACH,GACDe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOP,GAAA,EAAY;AAAA,IACnB,SAASR,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAI;AAAA,IACxC,WACE;AAAA,EAAA,CACH,GACGA,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOC,GAAA,EAAE;AAAA,IACT,SAAS,MAAMhB,EAAO,aAAA;AAAA,IACtB,WAAW;AAAA,EAAA,CACZ,IAIDA,EAAO,gBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOE,GAAA,EAAO;AAAA,IACd,SAAS,CAACjB,EAAO,aAAA;AAAA,IACjB,SAAS,MAAMA,EAAO,iBAAiB,EAAK;AAAA,IAC5C,WACE;AAAA,EAAA,CACH,qBAIA,OAAA,EAAI,WAAWI,EAAG,sCAAsCF,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,SAASb;AAAA,QACT,OAAAU;AAAA,QACA,OAAM;AAAA,QACN,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAElBJ;AAAA,EAAA,GACH;AAEJ;"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { X as g, XCircle as h, PlusCircle as b } from "lucide-react";
|
|
3
|
+
import * as m from "react";
|
|
4
|
+
import { DataTableFilterPopover as F } from "./TableFilter/data-table-filter-popover.js";
|
|
5
|
+
import { DataTableViewOptions as v } from "./data-table-view-options.js";
|
|
6
|
+
import "@radix-ui/react-slot";
|
|
7
|
+
import "../../packages/ui/src/components/button.js";
|
|
8
|
+
import "../../packages/ui/src/components/button-group.js";
|
|
9
|
+
import "../../packages/ui/src/components/input.js";
|
|
10
|
+
import "../../packages/ui/src/components/textarea.js";
|
|
11
|
+
import "@radix-ui/react-label";
|
|
12
|
+
import { cn as x } from "../../packages/ui/src/lib/utils.js";
|
|
13
|
+
import "../../packages/ui/src/components/select.js";
|
|
14
|
+
import "../../packages/ui/src/components/combobox.js";
|
|
15
|
+
import "@radix-ui/react-tooltip";
|
|
16
|
+
import "react-day-picker";
|
|
17
|
+
import "../../packages/ui/src/components/popover.js";
|
|
18
|
+
import "@radix-ui/react-separator";
|
|
19
|
+
import "../../packages/ui/src/components/switch.js";
|
|
20
|
+
import "vaul";
|
|
21
|
+
import "@radix-ui/react-scroll-area";
|
|
22
|
+
import "../../packages/ui/src/components/tree-view.js";
|
|
23
|
+
import "@radix-ui/react-alert-dialog";
|
|
24
|
+
import "@radix-ui/react-avatar";
|
|
25
|
+
import "../../packages/ui/src/components/badge.js";
|
|
26
|
+
import "../../packages/ui/src/components/checkbox.js";
|
|
27
|
+
import "@radix-ui/react-collapsible";
|
|
28
|
+
import "cmdk";
|
|
29
|
+
import "@radix-ui/react-dialog";
|
|
30
|
+
import "@radix-ui/react-dropdown-menu";
|
|
31
|
+
import "../../packages/ui/src/components/input-otp.js";
|
|
32
|
+
import "../../packages/ui/src/components/radio-group.js";
|
|
33
|
+
import "../../packages/ui/src/components/sidebar.js";
|
|
34
|
+
import "@radix-ui/react-slider";
|
|
35
|
+
import "../../packages/ui/src/components/tabs.js";
|
|
36
|
+
import "../../packages/ui/src/components/toggle.js";
|
|
37
|
+
import p from "../Button/Button.js";
|
|
38
|
+
function ot({
|
|
39
|
+
table: t,
|
|
40
|
+
children: i,
|
|
41
|
+
className: a,
|
|
42
|
+
showColumnFilters: s = !1,
|
|
43
|
+
showColumnVisibilityToggle: l = !1,
|
|
44
|
+
columnVisibilityOptions: n,
|
|
45
|
+
...d
|
|
46
|
+
}) {
|
|
47
|
+
const c = t.getState().columnFilters.length > 0, f = m.useMemo(
|
|
48
|
+
() => t.getAllColumns().filter((o) => o.getCanFilter()),
|
|
49
|
+
[t]
|
|
50
|
+
), u = m.useCallback(() => {
|
|
51
|
+
t.resetColumnFilters();
|
|
52
|
+
}, [t]);
|
|
53
|
+
return /* @__PURE__ */ e(
|
|
54
|
+
"div",
|
|
55
|
+
{
|
|
56
|
+
role: "toolbar",
|
|
57
|
+
"aria-orientation": "horizontal",
|
|
58
|
+
className: x(
|
|
59
|
+
"ds:flex ds:w-full ds:items-start ds:justify-between ds:gap-2 ds:p-1",
|
|
60
|
+
a
|
|
61
|
+
),
|
|
62
|
+
...d,
|
|
63
|
+
children: [
|
|
64
|
+
s ? /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-1 ds:flex-wrap ds:items-center ds:justify-start ds:gap-2", children: [
|
|
65
|
+
f.map((o) => /* @__PURE__ */ r(T, { column: o }, o.id)),
|
|
66
|
+
c && /* @__PURE__ */ e(
|
|
67
|
+
p,
|
|
68
|
+
{
|
|
69
|
+
"aria-label": "Reset filters",
|
|
70
|
+
variant: "outline",
|
|
71
|
+
size: "sm",
|
|
72
|
+
className: "ds:border-dashed",
|
|
73
|
+
onClick: u,
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ r(g, {}),
|
|
76
|
+
"Reset"
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
)
|
|
80
|
+
] }) : /* @__PURE__ */ r("div", {}),
|
|
81
|
+
/* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:gap-2", children: [
|
|
82
|
+
i,
|
|
83
|
+
l && /* @__PURE__ */ r(
|
|
84
|
+
v,
|
|
85
|
+
{
|
|
86
|
+
table: t,
|
|
87
|
+
align: "end",
|
|
88
|
+
...n
|
|
89
|
+
}
|
|
90
|
+
)
|
|
91
|
+
] })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
function T({
|
|
97
|
+
column: t
|
|
98
|
+
}) {
|
|
99
|
+
const i = t.columnDef.meta;
|
|
100
|
+
if (!i?.variant) return null;
|
|
101
|
+
const s = t.getFilterValue() != null ? /* @__PURE__ */ r(h, {}) : /* @__PURE__ */ r(b, {});
|
|
102
|
+
return /* @__PURE__ */ r(
|
|
103
|
+
F,
|
|
104
|
+
{
|
|
105
|
+
column: t,
|
|
106
|
+
trigger: /* @__PURE__ */ e(p, { variant: "outline", size: "sm", className: "ds:border-dashed", children: [
|
|
107
|
+
s,
|
|
108
|
+
i.label ?? t.id
|
|
109
|
+
] })
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
export {
|
|
114
|
+
ot as DataTableToolbar
|
|
115
|
+
};
|
|
116
|
+
//# sourceMappingURL=data-table-toolbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/Table/data-table-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column, Table } from \"@tanstack/react-table\";\nimport { PlusCircle, X, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { DataTableFilterPopover } from \"./TableFilter/data-table-filter-popover\";\nimport {\n DataTableViewOptions,\n type DataTableViewOptionsProps,\n} from \"./data-table-view-options\";\nimport { Button } from \"../Button\";\nimport { cn } from \"@dsui/ui\";\n\nexport interface DataTableToolbarProps<TData>\n extends React.ComponentProps<\"div\"> {\n table: Table<TData>;\n showColumnFilters?: boolean;\n showColumnVisibilityToggle?: boolean;\n columnVisibilityOptions?: Omit<\n DataTableViewOptionsProps<TData>,\n \"table\" | \"align\"\n >;\n}\n\nexport function DataTableToolbar<TData>({\n table,\n children,\n className,\n showColumnFilters = false,\n showColumnVisibilityToggle = false,\n columnVisibilityOptions,\n ...props\n}: DataTableToolbarProps<TData>) {\n const isFiltered = table.getState().columnFilters.length > 0;\n\n const columns = React.useMemo(\n () => table.getAllColumns().filter((column) => column.getCanFilter()),\n [table]\n );\n\n const onReset = React.useCallback(() => {\n table.resetColumnFilters();\n }, [table]);\n\n return (\n <div\n role=\"toolbar\"\n aria-orientation=\"horizontal\"\n className={cn(\n \"ds:flex ds:w-full ds:items-start ds:justify-between ds:gap-2 ds:p-1\",\n className\n )}\n {...props}\n >\n {showColumnFilters ? (\n <div className=\"ds:flex ds:flex-1 ds:flex-wrap ds:items-center ds:justify-start ds:gap-2\">\n {columns.map((column) => (\n <DataTableToolbarFilter key={column.id} column={column} />\n ))}\n {isFiltered && (\n <Button\n aria-label=\"Reset filters\"\n variant=\"outline\"\n size=\"sm\"\n className=\"ds:border-dashed\"\n onClick={onReset}\n >\n <X />\n Reset\n </Button>\n )}\n </div>\n ) : (\n <div />\n )}\n <div className=\"ds:flex ds:items-center ds:gap-2\">\n {children}\n {showColumnVisibilityToggle && (\n <DataTableViewOptions\n table={table}\n align=\"end\"\n {...columnVisibilityOptions}\n />\n )}\n </div>\n </div>\n );\n}\ninterface DataTableToolbarFilterProps<TData> {\n column: Column<TData>;\n}\n\nfunction DataTableToolbarFilter<TData>({\n column,\n}: DataTableToolbarFilterProps<TData>) {\n const columnMeta = column.columnDef.meta;\n\n if (!columnMeta?.variant) return null;\n\n const hasFilterValue = column.getFilterValue() != null;\n const icon = hasFilterValue ? <XCircle /> : <PlusCircle />;\n\n const getTriggerLabel = () => {\n return columnMeta.label ?? column.id;\n };\n\n return (\n <DataTableFilterPopover\n column={column}\n trigger={\n <Button variant=\"outline\" size=\"sm\" className=\"ds:border-dashed\">\n {icon}\n {getTriggerLabel()}\n </Button>\n }\n />\n );\n}\n"],"names":["DataTableToolbar","table","children","className","showColumnFilters","showColumnVisibilityToggle","columnVisibilityOptions","props","isFiltered","columns","React","column","onReset","jsxs","cn","jsx","DataTableToolbarFilter","Button","X","DataTableViewOptions","columnMeta","icon","XCircle","PlusCircle","DataTableFilterPopover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,SAASA,GAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,4BAAAC,IAA6B;AAAA,EAC7B,yBAAAC;AAAA,EACA,GAAGC;AACL,GAAiC;AAC/B,QAAMC,IAAaP,EAAM,SAAA,EAAW,cAAc,SAAS,GAErDQ,IAAUC,EAAM;AAAA,IACpB,MAAMT,EAAM,gBAAgB,OAAO,CAACU,MAAWA,EAAO,cAAc;AAAA,IACpE,CAACV,CAAK;AAAA,EAAA,GAGFW,IAAUF,EAAM,YAAY,MAAM;AACtC,IAAAT,EAAM,mBAAA;AAAA,EACR,GAAG,CAACA,CAAK,CAAC;AAEV,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,WAAWC;AAAA,QACT;AAAA,QACAX;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAH,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,4EACZ,UAAA;AAAA,UAAAJ,EAAQ,IAAI,CAACE,MACZ,gBAAAI,EAACC,KAAuC,QAAAL,EAAA,GAAXA,EAAO,EAAoB,CACzD;AAAA,UACAH,KACC,gBAAAK;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,cAAW;AAAA,cACX,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAASL;AAAA,cAET,UAAA;AAAA,gBAAA,gBAAAG,EAACG,GAAA,EAAE;AAAA,gBAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAEP,EAAA,CAEJ,sBAEC,OAAA,EAAI;AAAA,QAEP,gBAAAL,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAX;AAAA,UACAG,KACC,gBAAAU;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,OAAAlB;AAAA,cACA,OAAM;AAAA,cACL,GAAGK;AAAA,YAAA;AAAA,UAAA;AAAA,QACN,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAKA,SAASU,EAA8B;AAAA,EACrC,QAAAL;AACF,GAAuC;AACrC,QAAMS,IAAaT,EAAO,UAAU;AAEpC,MAAI,CAACS,GAAY,QAAS,QAAO;AAGjC,QAAMC,IADiBV,EAAO,eAAA,KAAoB,OACpB,gBAAAI,EAACO,GAAA,CAAA,CAAQ,sBAAMC,GAAA,EAAW;AAMxD,SACE,gBAAAR;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,QAAAb;AAAA,MACA,2BACGM,GAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,oBAC3C,UAAA;AAAA,QAAAI;AAAA,QARAD,EAAW,SAAST,EAAO;AAAA,MASX,EAAA,CACnB;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|