diff --git a/packages/plasma-new-hope/package-lock.json b/packages/plasma-new-hope/package-lock.json index 8230e9ede5..7c8fe911c6 100644 --- a/packages/plasma-new-hope/package-lock.json +++ b/packages/plasma-new-hope/package-lock.json @@ -69,6 +69,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", @@ -12905,6 +12906,22 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "node_modules/react-hook-form": { + "version": "7.54.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz", + "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==", + "dev": true, + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18 || ^19" + } + }, "node_modules/react-html-attributes": { "version": "1.4.6", "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.6.tgz", @@ -24192,6 +24209,12 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "react-hook-form": { + "version": "7.54.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz", + "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==", + "dev": true + }, "react-html-attributes": { "version": "1.4.6", "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.6.tgz", diff --git a/packages/plasma-new-hope/package.json b/packages/plasma-new-hope/package.json index bb7336c110..c6448ef940 100644 --- a/packages/plasma-new-hope/package.json +++ b/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" ] -} \ No newline at end of file +} diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx index 2ce88721f0..40905b5856 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx +++ b/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(null); const innerRef = useRef(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 = ( ); - useEffect(() => { - setIsInnerOpen((prevOpen) => prevOpen !== opened && opened); - }, [opened]); - - useLayoutEffect(() => { - const externalDate = value || defaultDate; - updateExternalDate(externalDate, setInputValue, setCalendarValue); - }, [value, defaultDate, format, lang]); - return ( diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx index cdb0e5baf9..19e1a7b77b 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx +++ b/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 = { }, render: (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 ( +
+ + + + + ); +}; + +export const HookForm = { + render: () => , +};