From 56d8922efbfb45df242993d2e21843f2cbbacf1e Mon Sep 17 00:00:00 2001 From: DreamHarakiri Date: Fri, 7 Jun 2024 22:06:51 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=B1=D0=BE=D0=B6=D0=B5=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=BC=D0=BE=D0=B3=D0=B8=20=D1=871?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +- .../arrow-button/ArrowButton.module.scss | 9 ++ .../arrow-button/ArrowButton.stories.tsx | 2 +- src/components/arrow-button/ArrowButton.tsx | 25 +++- .../ArticleParamsForm.module.scss | 1 + .../article-params-form/ArticleParamsForm.tsx | 125 +++++++++++++++++- .../radio-group/RadioGroup.module.scss | 2 +- src/components/select/Select.module.scss | 6 +- .../select/hooks/useOutsideClickClose.ts | 4 +- src/components/separator/index.module.scss | 2 +- src/constants/articleProps.ts | 2 + src/index.tsx | 25 ++-- 12 files changed, 181 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 3c383bc..1adf3fc 100644 --- a/package.json +++ b/package.json @@ -82,9 +82,9 @@ "react-dom": "^18.2.0" }, "lint-staged": { - "*.{css,scss}": "yarn stylelint:fix", - "*.{js,jsx,ts,tsx}": "yarn lint", - "*.{js,jsx,ts,tsx,json,css,scss,md}": "yarn format" + "*.{css,scss}": "npm run stylelint:fix", + "*.{js,jsx,ts,tsx}": "npm run lint", + "*.{js,jsx,ts,tsx,json,css,scss,md}": "npm run format" }, "config": { "commitizen": { diff --git a/src/components/arrow-button/ArrowButton.module.scss b/src/components/arrow-button/ArrowButton.module.scss index 5767d78..3d8a62f 100644 --- a/src/components/arrow-button/ArrowButton.module.scss +++ b/src/components/arrow-button/ArrowButton.module.scss @@ -13,6 +13,15 @@ transition: transform 0.5s ease; } +.container:hover { + background-color: var(--gold, #ffc802); + cursor: pointer; +} + +.container:active { + background-color: #787878; +} + .container_open { transform: translate(616px); } diff --git a/src/components/arrow-button/ArrowButton.stories.tsx b/src/components/arrow-button/ArrowButton.stories.tsx index 46e5382..50f0107 100644 --- a/src/components/arrow-button/ArrowButton.stories.tsx +++ b/src/components/arrow-button/ArrowButton.stories.tsx @@ -13,7 +13,7 @@ export const ArrowButtonStory: Story = { render: () => { return ( <> - + console.log('click')} isOpenForm={false} /> ); }, diff --git a/src/components/arrow-button/ArrowButton.tsx b/src/components/arrow-button/ArrowButton.tsx index 5e2e0f7..6bcaf5d 100644 --- a/src/components/arrow-button/ArrowButton.tsx +++ b/src/components/arrow-button/ArrowButton.tsx @@ -1,19 +1,36 @@ import arrow from 'src/images/arrow.svg'; import styles from './ArrowButton.module.scss'; +import clsx from 'clsx'; /** Функция для обработки открытия/закрытия формы */ -export type OnClick = () => void; +export type OnClick = (isOpenForm: boolean) => void; -export const ArrowButton = () => { +export type TArrowButton = { + isOpenForm: boolean; + onClick: OnClick; +}; + +export const ArrowButton = ({ isOpenForm, onClick }: TArrowButton) => { return ( /* Не забываем указаывать role и aria-label атрибуты для интерактивных элементов */
- иконка стрелочки + className={clsx(styles.container, { + [styles.container_open]: isOpenForm, + })} + onClick={() => { + onClick(!isOpenForm); + }}> + иконка стрелочки
); }; diff --git a/src/components/article-params-form/ArticleParamsForm.module.scss b/src/components/article-params-form/ArticleParamsForm.module.scss index 6420940..6b1e7f1 100644 --- a/src/components/article-params-form/ArticleParamsForm.module.scss +++ b/src/components/article-params-form/ArticleParamsForm.module.scss @@ -16,6 +16,7 @@ display: flex; flex-shrink: 0; flex-direction: column; + gap: 50px; box-sizing: border-box; width: 616px; height: auto; diff --git a/src/components/article-params-form/ArticleParamsForm.tsx b/src/components/article-params-form/ArticleParamsForm.tsx index 8f213da..8204d34 100644 --- a/src/components/article-params-form/ArticleParamsForm.tsx +++ b/src/components/article-params-form/ArticleParamsForm.tsx @@ -2,19 +2,130 @@ import { ArrowButton } from 'components/arrow-button'; import { Button } from 'components/button'; import styles from './ArticleParamsForm.module.scss'; +import { useState, useRef } from 'react'; +import clsx from 'clsx'; + +import { Text } from '../text'; +import { Select } from '../select'; +import { + ArticleStateType, + fontSizeOptions, + contentWidthArr, + fontFamilyOptions, + fontColors, + backgroundColors, + OptionType, + defaultArticleState, +} from 'src/constants/articleProps'; +import { RadioGroup } from '../radio-group'; +import { Separator } from '../separator'; +import { useOutsideClickClose } from '../select/hooks/useOutsideClickClose'; + +export type TArticleParamsForm = { + articleState: ArticleStateType; + onSubmitState: (articleState: ArticleStateType) => void; +}; + +export const ArticleParamsForm = ({ + articleState, + onSubmitState, +}: TArticleParamsForm) => { + const [isOpenForm, setOpenForm] = useState(false); + const [isOptionForm, setOptionForm] = + useState(articleState); + const formRef = useRef(null); + + const onSubmitForm = (e: React.FormEvent) => { + e.preventDefault(); + onSubmitState(isOptionForm); + }; + + useOutsideClickClose({ + rootRef: formRef, + isOpen: isOpenForm, + onChange: () => setOpenForm(false), + }); + + const onChangeSelected = ( + key: keyof ArticleStateType, + option: OptionType + ) => { + setOptionForm((prev) => ({ ...prev, [key]: option })); + }; -export const ArticleParamsForm = () => { return ( - <> - -