PLASMA-3884[DRAFT]: datepicker + react-hook-form async variant

packages/plasma-new-hope/package.json

@@ -103,6 +103,7 @@
     "default-browser-id": "2.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.54.2",
     "rollup": "^3.28.0",
     "storybook": "7.6.17",
     "styled-components": "5.3.1",
@@ -132,4 +133,4 @@
   "sideEffects": [
     "*.css"
   ]
-}
+}

packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, SyntheticEvent, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import type { KeyboardEvent } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
 
 import type { RootProps } from '../../../engines';
 import { cx, getPlacements, noop } from '../../../utils';
@@ -82,12 +83,14 @@ export const datePickerRoot = (
         ) => {
             const inputRef = useRef<HTMLInputElement | null>(null);
             const innerRef = useRef<HTMLInputElement | null>(null);
+            // const inputForkRef = useForkRef(inputRef, ref);
+            const inputForkRef = useForkRef(innerRef, ref);
             const [isInnerOpen, setIsInnerOpen] = useState(opened);
 
-            const [calendarValue, setCalendarValue] = useState(formatCalendarValue(value || defaultDate, format, lang));
-            const [inputValue, setInputValue] = useState(
-                formatInputValue({ value: value || defaultDate, format, lang }),
-            );
+            const externalDate = innerRef?.current?.value || value || defaultDate;
+
+            const [calendarValue, setCalendarValue] = useState(formatCalendarValue(externalDate, format, lang));
+            const [inputValue, setInputValue] = useState(formatInputValue({ value: externalDate, format, lang }));
 
             const dateFormatDelimiter = useCallback(() => getDateFormatDelimiter(format), [format]);
 
@@ -145,6 +148,22 @@ export const datePickerRoot = (
                 closeOnEsc,
             });
 
+            useEffect(() => {
+                console.log(innerRef?.current?.value, 'inputValue');
+            }, [innerRef?.current?.value]);
+
+            useEffect(() => {
+                setIsInnerOpen((prevOpen) => prevOpen !== opened && opened);
+            }, [opened]);
+
+            useLayoutEffect(() => {
+                // setTimeout(() => {
+                console.log('value from setter', innerRef?.current?.value);
+                // }, 1100);
+                const externalDate = value || defaultDate;
+                updateExternalDate(externalDate, setInputValue, setCalendarValue);
+            }, [innerRef?.current?.value, value, defaultDate, format, lang]);
+
             const DatePickerInput = (
                 <StyledInput
                     ref={inputRef}
@@ -171,23 +190,13 @@ export const datePickerRoot = (
                 />
             );
 
-            useEffect(() => {
-                setIsInnerOpen((prevOpen) => prevOpen !== opened && opened);
-            }, [opened]);
-
-            useLayoutEffect(() => {
-                const externalDate = value || defaultDate;
-                updateExternalDate(externalDate, setInputValue, setCalendarValue);
-            }, [value, defaultDate, format, lang]);
-
             return (
                 <Root
                     view={view}
                     size={size}
                     className={cx(classes.datePickerRoot, className)}
                     disabled={disabled}
                     readOnly={!disabled && readOnly}
-                    ref={ref}
                     {...rest}
                 >
                     <StyledPopover
@@ -241,7 +250,7 @@ export const datePickerRoot = (
                         datatype="datepicker-single"
                         name={name}
                         value={inputValue}
-                        ref={innerRef}
+                        ref={inputForkRef}
                         {...noop}
                     />
                 </Root>

packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -2,9 +2,12 @@ import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { useForm } from 'react-hook-form';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';
+import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
 import { RangeInputRefs } from '../../../../components/Range/Range.types';
 
 import { DatePicker, DatePickerRange } from './DatePicker';
@@ -398,3 +401,44 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
     },
     render: (args) => <StoryDeferred {...args} />,
 };
+
+const StoryHookForm = () => {
+    const { register, handleSubmit, setValue } = useForm();
+
+    // const date = watch('date');
+
+    // Simulate an asynchronous operation (e.g., fetching data from an API)
+    useEffect(() => {
+        const fetchData = async () => {
+            // Simulate an API call delay
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+
+            // Assume this is the data fetched from the API
+            const asyncData = { date: `${new Date()}`, text: 'asynchronous' };
+
+            // Set the value of the input field asynchronously
+            setValue('date', asyncData.date);
+            setValue('text', asyncData.text);
+            // console.log({ ...register('date') });
+            // console.log('******', watch('date'));
+        };
+
+        fetchData();
+    }, [setValue]);
+
+    const onSubmit = (data) => {
+        console.log(data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+            <DatePicker {...register('date')} />
+            <TextField {...register('text')} />
+            <Button type="submit">Отправить</Button>
+        </form>
+    );
+};
+
+export const HookForm = {
+    render: () => <StoryHookForm />,
+};