Merge pull request #67 from 1Byte-Software/develop

Update version 1.12.0

Author: KennethWise

CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.12.0]
+
+### Added
+
+-   Added `QuickRangePicker` component.
+
+### Changed
+
+-   Improve `Filter` component.
+
+### Fixed
+
+-   Fixed `localization` props in `Filter` component.
+
 ## [1.11.3]
 
 ### Remove

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.11.3",
+    "version": "1.12.0",
     "description": "A simple React UI library",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -18,7 +18,8 @@
     "peerDependencies": {
         "react": "^18.0.0",
         "react-router": "^7.0.0",
-        "yup": "1.7.0"
+        "yup": "1.7.0",
+        "i18next": "^25.5.3"
     },
     "dependencies": {
         "@ant-design/cssinjs": "^1.24.0",
@@ -34,7 +35,6 @@
         "antd": "^5.21.2",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.13",
-        "i18next": "^25.5.3",
         "polished": "^4.3.1",
         "rc-field-form": "^2.7.0",
         "rc-image": "^7.12.0",

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 = <T extends Record<string, string>>(props: RdFilterFooterProps<T>) => {
     const {
@@ -16,6 +29,7 @@ export const FilterFooter = <T extends Record<string, string>>(props: RdFilterFo
         isLoading,
         filterValue,
         localization,
+        children,
         onChangeFilterValue,
     } = props;
 
@@ -39,38 +53,46 @@ export const FilterFooter = <T extends Record<string, string>>(props: RdFilterFo
             <Flex justify="space-between" wrap>
                 {Boolean(fields?.length) && (
                     <Space>
-                        {fields?.map(field => (
-                            <Form.Item
-                                key={field.name as string}
-                                label={field.label}
-                                disableMargin
-                                // labelCol={{
-                                //     flex: 1,
-                                // }}
-                                // wrapperCol={false}
-                            >
-                                <Select
-                                    options={field.options}
-                                    value={filterValue?.[field.name] || null}
-                                    onChange={e => {
-                                        const newFilterValue = { ...filterValue } as T;
-                                        newFilterValue[field.name] = e;
+                        {fields?.map(field => {
+                            return (
+                                <Form.Item
+                                    key={field.name as string}
+                                    label={field.label}
+                                    disableMargin
+                                    // labelCol={{
+                                    //     flex: 1,
+                                    // }}
+                                    // wrapperCol={false}
+                                >
+                                    {field?.render ? (
+                                        field.render()
+                                    ) : (
+                                        <Select
+                                            options={field.options}
+                                            value={filterValue?.[field.name] || null}
+                                            onChange={e => {
+                                                const newFilterValue = { ...filterValue } as T;
+                                                newFilterValue[field.name] = e;
 
-                                        onChangeFilterValue?.(newFilterValue);
-                                    }}
-                                    popupMatchSelectWidth={false}
-                                />
-                            </Form.Item>
-                        ))}
+                                                onChangeFilterValue?.(newFilterValue);
+                                            }}
+                                            popupMatchSelectWidth={false}
+                                        />
+                                    )}
+                                </Form.Item>
+                            );
+                        })}
                     </Space>
                 )}
 
+                {children}
+
                 {Boolean(totalItems || showTotalItemsCount) && (
                     <Space size={'small'} style={{ marginLeft: 'auto' }} align="end">
                         {isLoading && <LoadingOutlined />}
                         <Typography.Text>
-                            {i18next.t(showing, { total: totalItems, count: showTotalItemsCount })}{' '}
-                            <Tooltip title={i18next.t(showing_tooltip)}>
+                            {localize(showing, { total: totalItems, count: showTotalItemsCount })}{' '}
+                            <Tooltip title={localize(showing_tooltip)}>
                                 <Typography.Text type="secondary">
                                     <InfoCircleFilled />
                                 </Typography.Text>

src/organisms/Filter/components/Footer/types.ts

@@ -24,6 +24,7 @@ export type RdFilterFooterComponent = <T extends {}>(
 interface IFieldItem<T extends {}> extends RdSelectProps {
     name: keyof T;
     label: ReactNode;
+    render?: () => ReactNode;
 }
 
 export interface FilterFooterLocalization {

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) => {
             <Space size="small" direction="vertical" block>
                 <InputFilterStyles
                     defaultValue={defaultKeywords}
-                    placeholder={i18next.t(search_placeholder)}
+                    placeholder={localize(search_placeholder)}
                     onSearch={handleChangeKeywords}
                 />
 

src/organisms/Filter/index.ts

@@ -1 +1,2 @@
+export * from './components/Footer';
 export * from './Filter';