(defaultDateInView);
@@ -97,10 +154,40 @@ export function DatePicker({
const min = dirty ? dirty.min : value instanceof Date ? value : value?.min;
const max = dirty ? dirty.max : value instanceof Date ? value : value?.max;
- quickOptions ??= [
- { label: textToday, value: today },
- { label: textThisWeek, value: () => thisWeek(firstDayOfWeek) },
- ];
+ let resolvedQuickOptions;
+
+ {
+ quickOptions ??= ['today', 'thisWeek', 'thisMonth', 'thisYear', 'lastSevenDays', 'lastThirtyDays'];
+
+ resolvedQuickOptions = [...quickOptions, { label: , value: null }].map((option, index) => {
+ if (option instanceof Function) {
+ return option((value) => {
+ setDirty(undefined);
+ onChange(value);
+ });
+ }
+
+ const { label, value } = typeof option === 'string' ? commonQuickOptions[option] : option;
+
+ return (
+
+ );
+ });
+ }
const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({
onDateSelected: () => undefined,
@@ -272,27 +359,7 @@ export function DatePicker({
))}
- {quickOptions instanceof Function
- ? quickOptions((value) => {
- setDirty(undefined);
- onChange(value);
- })
- : [...quickOptions, { label: textReset, value: null }].map(({ label, value }, index) => (
-
- ))}
+ {resolvedQuickOptions}
);
diff --git a/src/components/text.tsx b/src/components/text.tsx
new file mode 100644
index 0000000..3305331
--- /dev/null
+++ b/src/components/text.tsx
@@ -0,0 +1,12 @@
+import { useTheme } from '../hooks/useTheme';
+import type { TableTheme } from '../types';
+
+export interface TextProps {
+ id: keyof TableTheme['text'];
+}
+
+export function Text({ id }: TextProps) {
+ const text = useTheme((t) => t.text[id]);
+
+ return <>{text};
+}
diff --git a/src/theme/defaultTheme/defaultTexts.tsx b/src/theme/defaultTheme/defaultTexts.tsx
index 9760877..beb858a 100644
--- a/src/theme/defaultTheme/defaultTexts.tsx
+++ b/src/theme/defaultTheme/defaultTexts.tsx
@@ -8,6 +8,10 @@ export const defaultTexts: TableTheme['text'] = {
exportDownload: 'Download',
today: 'Today',
thisWeek: 'This week',
+ thisMonth: 'This month',
+ thisYear: 'This year',
+ lastSevenDays: 'Last 7 days',
+ lastThirtyDays: 'Last 30 days',
clearFilters: 'Clear all filters',
reset: 'Reset',
loading: 'Loading',
diff --git a/src/types.ts b/src/types.ts
index 9997be1..d32499e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -24,6 +24,10 @@ export interface TableTheme {
exportDownload: ReactNode;
today: ReactNode;
thisWeek: ReactNode;
+ thisMonth: ReactNode;
+ thisYear: ReactNode;
+ lastSevenDays: ReactNode;
+ lastThirtyDays: ReactNode;
reset: ReactNode;
loading: ReactNode;
clearFilters: ReactNode;