feat(design): add DateRangePicker (#1510)

* feat(design): add `DateRangePicker`

* fix: lint

examples/package.json

@@ -18,7 +18,7 @@
         "@univerjs/engine-render": "workspace:*",
         "@univerjs/facade": "workspace:*",
         "@univerjs/find-replace": "workspace:*",
-        "@univerjs/icons": "^0.1.39",
+        "@univerjs/icons": "^0.1.40",
         "@univerjs/rpc": "workspace:*",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-find-replace": "workspace:*",

packages/design/package.json

@@ -71,7 +71,7 @@
     "dependencies": {
         "@rc-component/color-picker": "^1.5.2",
         "@rc-component/trigger": "^1.18.3",
-        "@univerjs/icons": "^0.1.39",
+        "@univerjs/icons": "^0.1.40",
         "dayjs": ">=1.11.10",
         "rc-dialog": "^9.4.0",
         "rc-dropdown": "^4.1.0",

packages/design/src/components/date-range-picker/DateRangePicker.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import type { NoUndefinedRangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';
+import { DateRangePicker } from './DateRangePicker';
+
+const meta: Meta<typeof DateRangePicker> = {
+    title: 'Components / DateRangePicker',
+    component: DateRangePicker,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const DateRangePickerBasic = {
+    render() {
+        const [value, setValue] = useState<NoUndefinedRangeValueType<Dayjs>>([dayjs(), dayjs().add(7, 'day')]);
+
+        return (
+            <>
+                <DateRangePicker value={value} onChange={setValue} />
+            </>
+        );
+    },
+};

packages/design/src/components/date-range-picker/DateRangePicker.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext } from 'react';
+import { RangePicker } from 'rc-picker';
+import generateConfig from 'rc-picker/lib/generate/dayjs';
+import { CalendarSingle, GuideSingle } from '@univerjs/icons';
+import type { Dayjs } from 'dayjs';
+import type { NoUndefinedRangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';
+import { ConfigContext } from '../config-provider/ConfigProvider';
+import styles from './index.module.less';
+
+export interface IDateRangePickerProps {
+    /**
+     * The value of the date picker.
+     */
+    value: NoUndefinedRangeValueType<Dayjs>;
+
+    /**
+     * Callback when the value of the date picker changes.
+     */
+    onChange: (date: NoUndefinedRangeValueType<Dayjs>, dateString: [string, string]) => void;
+}
+
+export function DateRangePicker(props: IDateRangePickerProps) {
+    const { value, onChange } = props;
+
+    const { locale } = useContext(ConfigContext);
+
+    function handleChange(date: NoUndefinedRangeValueType<Dayjs>, dateString: [string, string]) {
+        if (Array.isArray(date) && Array.isArray(dateString)) {
+            onChange(date, dateString);
+        }
+    }
+
+    return (
+        <RangePicker<Dayjs>
+            value={value}
+            prefixCls={styles.dateRangePicker}
+            generateConfig={generateConfig}
+            locale={locale.design.Picker}
+            separator={<GuideSingle />}
+            suffixIcon={<CalendarSingle className={styles.dateRangePickerSuffixIcon} />}
+            onChange={handleChange}
+        />
+    );
+}