✨ - feat: intergrate DateRangeInput with DataGrid

maykinmedia · Oct 10, 2024 · eadd13c · eadd13c
1 parent 6f074a4
commit eadd13c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/data/datagrid/datagridthead.tsx b/src/components/data/datagrid/datagridthead.tsx
@@ -163,7 +163,12 @@ export const DataGridTHead: React.FC = () => {
                 {field.filterable !== false && (
                   <FormControl
                     aria-label={_labelFilterField}
-                    icon={!field.options && <Outline.MagnifyingGlassIcon />}
+                    icon={
+                      !field.options &&
+                      !field.type.includes("date") && (
+                        <Outline.MagnifyingGlassIcon />
+                      )
+                    }
                     form={`${dataGridId}-filter-form`}
                     name={field.filterLookup || field.name}
                     options={field.options}

diff --git a/src/components/form/daterangeinput/daterangeinput.tsx b/src/components/form/daterangeinput/daterangeinput.tsx
@@ -8,6 +8,9 @@ import "./daterangeinput.scss";
 import { TRANSLATIONS } from "./daterangeinput.translations";
 
 export type DateRangeInputProps = Omit<DateInputProps, "type" | "value"> & {
+  /** Component to use as icon. */
+  icon?: React.ReactNode;
+
   /** Whether a date or date range should be provided. */
   type?: "daterange";
 
@@ -26,6 +29,7 @@ export type DateRangeInputProps = Omit<DateInputProps, "type" | "value"> & {
  */
 export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   form,
+  icon = <Outline.CodeBracketSquareIcon />,
   labelStartDate,
   labelEndDate,
   name,
@@ -204,7 +208,7 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
         value={valuesState?.[0]}
         onChange={handleStartChange}
       />
-      <Outline.CodeBracketSquareIcon />{" "}
+      {icon}
       <DateInput
         {...props}
         label={