From 707ffeef80eb3436239d792f9bbedf85eb7b9065 Mon Sep 17 00:00:00 2001 From: DeDxYk594 Date: Sat, 30 Nov 2024 03:37:16 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9C=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20UX-?= =?UTF-8?q?=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input.tsx | 97 +++++++++------------------------- src/components/ModalDialog.tsx | 10 +++- src/containers/LeftPanel.tsx | 16 +++--- src/containers/UserPopup.tsx | 18 +++---- src/containers/userPopup.scss | 58 ++++++++++++++++++++ src/index.scss | 51 ------------------ src/jsxCore/hooks.ts | 32 +++++++++++ src/screens/MainApp.tsx | 2 +- 8 files changed, 139 insertions(+), 145 deletions(-) create mode 100644 src/containers/userPopup.scss diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 3b2117d..ff00a84 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,6 +1,5 @@ import { useEffectRefs, useState } from '@/jsxCore/hooks'; import { ComponentProps } from '@/jsxCore/types'; -import { showToast } from '@/stores/toastNotificationStore'; interface InputProps extends ComponentProps { onEnter?: (value: string) => void; @@ -10,30 +9,18 @@ interface InputProps extends ComponentProps { placeholder?: string; readOnly?: boolean; validationMessage?: string | undefined; - copyOnClick?: boolean; isPassword?: boolean; focusOnInstance?: boolean; } -interface Callbacks { - onKeyPress: (ev: KeyboardEvent) => void; - onClick: (ev: MouseEvent) => void; - onChanged: (ev: Event) => void; -} - //TODO исправить эти баги -let globalUid = 0; -const instMap: Map = new Map(); - -let tttt = 0; - export const Input = (props: InputProps) => { - const [activated, setIsActivated] = useState(false); - const [uid, setUid] = useState(-1); + const [init, setInit] = useState(false); + const [value, setValue] = useState(''); useEffectRefs((refs) => { const inp = refs.get('input') as HTMLInputElement; - if (!activated) { + if (!init) { if (props.initialValue) { inp.value = props.initialValue; } @@ -45,72 +32,38 @@ export const Input = (props: InputProps) => { inp.focus(); } }, 200); - setIsActivated(true); - const myUid = globalUid; - globalUid++; - setUid(myUid); - inp.addEventListener('keyup', (ev: KeyboardEvent) => { - const CBs = instMap.get(myUid); - if (CBs !== undefined) { - CBs.onKeyPress(ev); - } - }); - inp.addEventListener('click', (ev: MouseEvent) => { - const CBs = instMap.get(myUid); - if (CBs !== undefined) { - CBs.onClick(ev); - } - }); - inp.addEventListener('change', (ev: Event) => { - const CBs = instMap.get(myUid); - if (CBs !== undefined) { - CBs.onChanged(ev); - } - }); - } else { - instMap.set(uid, { - onKeyPress: (ev) => { - if (ev.key === 'Enter') { - if (props.onEnter) { - props.onEnter(inp.value); - } - } - if (ev.key === 'Escape') { - if (props.onEscape) { - props.onEscape(inp.value); - } - } - if (props.onChanged) { - props.onChanged(inp.value); - } - }, - onClick: () => { - if (props.copyOnClick === true) { - navigator.clipboard.writeText(inp.value); - showToast('Скопировано в буфер обмена!', 'success'); - if (props.onChanged) { - props.onChanged(inp.value); - } - } - }, - onChanged: () => { - if (props.onChanged) { - props.onChanged(inp.value); - } - }, - }); + setInit(true); } }); - tttt++; return (
{ + if (ev.key === 'Enter') { + if (props.onEnter !== undefined) { + props.onEnter(value); + } + } + if (ev.key === 'Escape') { + ev.stopPropagation(); + if (props.onEscape !== undefined) { + props.onEscape(value); + } + (ev.target as HTMLInputElement).blur(); + } + }} + ON_input={(ev: InputEvent) => { + const newValue = (ev.target as HTMLInputElement).value; + setValue(newValue); + if (props.onChanged !== undefined) { + props.onChanged(newValue); + } + }} /> {props.validationMessage !== undefined && (
diff --git a/src/components/ModalDialog.tsx b/src/components/ModalDialog.tsx index e721d8b..07ca2f6 100644 --- a/src/components/ModalDialog.tsx +++ b/src/components/ModalDialog.tsx @@ -1,5 +1,6 @@ import { ComponentProps, JsxNode } from '@/jsxCore/types'; import './modalDialog.scss'; +import { useEscape } from '@/jsxCore/hooks'; interface ModalDialogProps extends ComponentProps { title?: string; @@ -17,10 +18,15 @@ export const ModalDialog = (props: ModalDialogProps) => { if (!props.isOpened) { return
; } - console.log('I AM OPENED'); + useEscape(props.closeCallback); return (
-
+
{ + ev.stopPropagation(); + }} + >
{props.title}
diff --git a/src/containers/LeftPanel.tsx b/src/containers/LeftPanel.tsx index c311e2d..6b1dfc7 100644 --- a/src/containers/LeftPanel.tsx +++ b/src/containers/LeftPanel.tsx @@ -2,14 +2,14 @@ import { createBoard } from '@/api/boards'; import { BoardCard } from '@/components/BoardCard'; import { Button } from '@/components/Button'; import { Input } from '@/components/Input'; -import { useState } from '@/jsxCore/hooks'; +import { useEscape, useState } from '@/jsxCore/hooks'; import { ComponentProps } from '@/jsxCore/types'; import { updateBoards, useBoardsStore } from '@/stores/boardsStore'; import './leftPanel.scss'; import { showToast } from '@/stores/toastNotificationStore'; interface LeftPanelProps extends ComponentProps { - onClose: () => void; + closeCallback: () => void; } /** @@ -27,6 +27,7 @@ export const LeftPanel = (props: LeftPanelProps) => { } else if (newBoardName.length > 30) { validationMessage = 'Должно быть не больше 30 символов'; } + useEscape(props.closeCallback); const submitNewBoard = (boardName: string) => { if (boardName.length < 3) { @@ -47,7 +48,7 @@ export const LeftPanel = (props: LeftPanelProps) => { return ( <> -
+