diff --git a/src/organisms/Filter/components/Footer/index.tsx b/src/organisms/Filter/components/Footer/index.tsx index e4676d5..236654c 100644 --- a/src/organisms/Filter/components/Footer/index.tsx +++ b/src/organisms/Filter/components/Footer/index.tsx @@ -6,6 +6,19 @@ import { Flex, Typography } from '../../../../atomics'; import { Form, Select, Space, Tooltip } from '../../../../molecules'; import { FilterFooterWrapper } from './styles'; import { RdFilterFooterProps } from './types'; +import { localize } from '../../../../utils/localize'; + +// export const rdI118next = i18next; +// (rdI118next as any).fromLib = '1byte-react-design'; + +// export const useRdLocation = useLocation; +// (useRdLocation as any).fromLib = '1byte-react-design'; + +// export const rdReact = React; +// (rdReact as any).fromLib = '1byte-react-design'; + +// export const rdYup = Yup; +// (rdYup as any).fromLib = '1byte-react-design'; export const FilterFooter = >(props: RdFilterFooterProps) => { const { @@ -16,6 +29,7 @@ export const FilterFooter = >(props: RdFilterFo isLoading, filterValue, localization, + children, onChangeFilterValue, } = props; @@ -39,38 +53,46 @@ export const FilterFooter = >(props: RdFilterFo {Boolean(fields?.length) && ( - {fields?.map(field => ( - - { + const newFilterValue = { ...filterValue } as T; + newFilterValue[field.name] = e; - onChangeFilterValue?.(newFilterValue); - }} - popupMatchSelectWidth={false} - /> - - ))} + onChangeFilterValue?.(newFilterValue); + }} + popupMatchSelectWidth={false} + /> + )} + + ); + })} )} + {children} + {Boolean(totalItems || showTotalItemsCount) && ( {isLoading && } - {i18next.t(showing, { total: totalItems, count: showTotalItemsCount })}{' '} - + {localize(showing, { total: totalItems, count: showTotalItemsCount })}{' '} + diff --git a/src/organisms/Filter/components/Footer/types.ts b/src/organisms/Filter/components/Footer/types.ts index f3a2f7a..0a740cf 100644 --- a/src/organisms/Filter/components/Footer/types.ts +++ b/src/organisms/Filter/components/Footer/types.ts @@ -24,6 +24,7 @@ export type RdFilterFooterComponent = ( interface IFieldItem extends RdSelectProps { name: keyof T; label: ReactNode; + render?: () => ReactNode; } export interface FilterFooterLocalization { diff --git a/src/organisms/Filter/components/Header/index.tsx b/src/organisms/Filter/components/Header/index.tsx index 7c8e7e0..4d52ce3 100644 --- a/src/organisms/Filter/components/Header/index.tsx +++ b/src/organisms/Filter/components/Header/index.tsx @@ -3,6 +3,7 @@ import { RdSearchProps, Space } from '../../../../molecules'; import { FilterHeaderWrapper, InputFilterStyles } from './styles'; import { RdFilterHeaderProps } from './types'; import i18next from 'i18next'; +import { localize } from '../../../../utils/localize'; export const FilterHeader = (props: RdFilterHeaderProps) => { const { defaultKeywords, className, localization, onChangeKeywords } = props; @@ -17,7 +18,7 @@ export const FilterHeader = (props: RdFilterHeaderProps) => { diff --git a/src/organisms/Filter/index.ts b/src/organisms/Filter/index.ts index 0eea779..a2da1ed 100644 --- a/src/organisms/Filter/index.ts +++ b/src/organisms/Filter/index.ts @@ -1 +1,2 @@ +export * from './components/Footer'; export * from './Filter'; diff --git a/src/utils/localize.ts b/src/utils/localize.ts new file mode 100644 index 0000000..ed7d294 --- /dev/null +++ b/src/utils/localize.ts @@ -0,0 +1,32 @@ +// utils/localize.ts + +/** + * Localize template string by replacing {{variables}} with values from context. + * Supports nested keys (e.g. {{user.name}}) and fallback (e.g. {{key|default}}). + * + * Example: + * localize("Hi {{user.name|there}}!", { user: { name: "Kenneth" } }) + * -> "Hi Kenneth!" + */ +export function localize( + template: string, + context: Record = {}, + options?: { strict?: boolean } +): string { + if (typeof template !== 'string') return template as any; + + const getValue = (path: string, ctx: any): any => { + return path.split('.').reduce((acc, key) => (acc ? acc[key] : undefined), ctx); + }; + + return template.replace(/\{\{(.*?)\}\}/g, (_, match) => { + const [path, fallback] = match.split('|').map((s: string) => s.trim()); + const value = getValue(path, context); + + if (value !== undefined && value !== null) return String(value); + + if (fallback !== undefined) return fallback; + if (options?.strict) throw new Error(`Missing localization key: ${path}`); + return ''; + }); +}