feat(calendar-range): add component (#426)

* feat(calendar-range): add base functionality * feat(calendar-range): change period behaviour * feat(calendar-range): add tests
core-ds · Dec 29, 2020 · 7bf76d9 · 7bf76d9
1 parent 18f8080
commit 7bf76d9
Show file tree

Hide file tree

Showing 11 changed files with 1,998 additions and 14 deletions.
diff --git a/packages/calendar-input/src/Component.tsx b/packages/calendar-input/src/Component.tsx
@@ -275,21 +275,25 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
 
         const renderCalendar = useCallback(
             () => (
-                <Calendar
-                    {...calendarProps}
-                    ref={calendarRef}
-                    defaultMonth={defaultMonth}
-                    value={isCalendarValueValid ? calendarValue : undefined}
-                    onChange={handleCalendarChange}
-                    minDate={minDate}
-                    maxDate={maxDate}
-                />
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div onMouseDown={handleCalendarWrapperMouseDown}>
+                    <Calendar
+                        {...calendarProps}
+                        ref={calendarRef}
+                        defaultMonth={defaultMonth}
+                        value={isCalendarValueValid ? calendarValue : undefined}
+                        onChange={handleCalendarChange}
+                        minDate={minDate}
+                        maxDate={maxDate}
+                    />
+                </div>
             ),
             [
                 calendarProps,
                 calendarValue,
                 defaultMonth,
                 handleCalendarChange,
+                handleCalendarWrapperMouseDown,
                 isCalendarValueValid,
                 maxDate,
                 minDate,
@@ -351,8 +355,7 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
                         withTransition={false}
                         preventFlip={preventFlip}
                     >
-                        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                        <div onMouseDown={handleCalendarWrapperMouseDown}>{renderCalendar()}</div>
+                        {renderCalendar()}
                     </Popover>
                 )}
             </div>

diff --git a/packages/calendar-range/package.json b/packages/calendar-range/package.json
@@ -0,0 +1,25 @@
+{
+    "name": "@alfalab/core-components-calendar-range",
+    "version": "1.0.0",
+    "description": "Calendar range component",
+    "keywords": [],
+    "license": "ISC",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0",
+        "react-dom": "^16.9.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-calendar-input": "^1.0.0",
+        "@alfalab/core-components-calendar": "^1.0.0",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.16.1",
+        "react-merge-refs": "^1.1.0"
+    }
+}
diff --git a/packages/calendar-range/src/Component.stories.mdx b/packages/calendar-range/src/Component.stories.mdx
@@ -0,0 +1,115 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { text, select, boolean, number } from '@storybook/addon-knobs';
+import { Container, Row, Col } from 'storybook/blocks/grid';
+import { ComponentHeader } from 'storybook/blocks/component-header';
+
+import { startOfMonth, startOfDay, subMonths, addMonths } from 'date-fns';
+
+import { CalendarRange } from './Component';
+import { name, version } from '../package.json';
+
+import { parseDateString } from '../../calendar-input/src/utils';
+
+<Meta
+    title='Компоненты'
+    component={CalendarRange}
+    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+/>
+
+<!-- Canvas -->
+
+<Story name='CalendarRange'>
+    <CalendarRange />
+</Story>
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='CalendarRange'
+    version={version}
+    package='@alfalab/core-components-calendar-range'
+    stage={1}
+    design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=13931%3A20767'
+/>
+
+```tsx
+import { CalendarRange } from '@alfalab/core-components-calendar-range';
+```
+
+Компонент для ввода даты.
+
+<Props of={CalendarRange} />
+
+
+### Controlled-way
+
+<Preview>
+    {React.createElement(() => {
+        const [valueFrom, setValueFrom] = React.useState('10.10.2020');
+        const [valueTo, setValueTo] = React.useState('10.11.2020');
+        return (
+            <CalendarRange
+                valueFrom={valueFrom}
+                valueTo={valueTo}
+                onDateFromChange={({ value }) => setValueFrom(value)}
+                onDateToChange={({ value }) => setValueTo(value)}
+            />
+        );
+    })}
+</Preview>
+
+### Min/Max даты
+
+<Preview>
+    {React.createElement(() => {
+        const [valueFrom, setValueFrom] = React.useState('10.11.2020');
+        const [valueTo, setValueTo] = React.useState('20.11.2020');
+        const minDate = subMonths(startOfDay(new Date()), 2).getTime();
+        const maxDate = addMonths(startOfDay(new Date()), 2).getTime();
+        const [fromError, setFromError] = React.useState('');
+        const [toError, setToError] = React.useState('');
+        const valid = (value) => {
+            const date = parseDateString(value);
+            return !value || (!Number.isNaN(date.getTime()) && date >= minDate && date <= maxDate);
+        }
+        const handleFromBlur = (event) => {
+            if (!valid(event.target.value)) {
+                setFromError(true);
+            }
+        }
+        const handleFromFocus = () => setFromError('');
+        const handleToBlur = (event) => {
+            if (!valid(event.target.value)) {
+                setToError(true);
+            }
+        }
+        const handleToFocus = () => setToError('');
+        return (
+            <CalendarRange
+                minDate={subMonths(startOfDay(new Date()), 2).getTime()}
+                maxDate={addMonths(startOfDay(new Date()), 2).getTime()}
+                valueFrom={valueFrom}
+                valueTo={valueTo}
+                onDateFromChange={({ value }) => {
+                    setFromError(false)
+                    setValueFrom(value)
+                }}
+                onDateToChange={({ value }) => {
+                    setToError(false);
+                    setValueTo(value)
+                }}
+                inputFromProps={{
+                    error: fromError,
+                    onBlur: handleFromBlur,
+                    onFocus: handleFromFocus
+                }}
+                inputToProps={{
+                    error: toError,
+                    onBlur: handleToBlur,
+                    onFocus: handleToFocus
+                }}
+            />
+        );
+    })}
+</Preview>