From d7e7ef9471e17e52dcc1e3f9280aa0b0efcc7b01 Mon Sep 17 00:00:00 2001 From: neko Date: Tue, 7 Jun 2022 20:27:43 +0300 Subject: [PATCH] hw4 --- src/s1-main/App.module.css | 8 ++ src/s1-main/App.tsx | 22 +++-- src/s2-homeworks/hw01/HW1.tsx | 5 +- src/s2-homeworks/hw01/Message.module.css | 8 -- src/s2-homeworks/hw02/Affairs.module.css | 4 - src/s2-homeworks/hw02/HW2.tsx | 4 +- src/s2-homeworks/hw03/HW3.tsx | 9 +- src/s2-homeworks/hw04/HW4.tsx | 25 +++++ src/s2-homeworks/hw04/Stand.module.css | 16 ++++ src/s2-homeworks/hw04/Stand.tsx | 79 ++++++++++++++++ .../SuperInputText.module.css | 26 ++++++ .../c1-SuperInputText/SuperInputText.tsx | 60 ++++++++++++ .../c2-SuperButton/SuperButton.module.css | 88 ++++++++++++++++++ .../common/c2-SuperButton/SuperButton.tsx | 35 +++++++ .../c3-SuperCheckbox/SuperCheckbox.module.css | 42 +++++++++ .../common/c3-SuperCheckbox/SuperCheckbox.tsx | 45 +++++++++ .../hw04/common/c3-SuperCheckbox/checked.png | Bin 0 -> 711 bytes 17 files changed, 447 insertions(+), 29 deletions(-) create mode 100644 src/s2-homeworks/hw04/HW4.tsx create mode 100644 src/s2-homeworks/hw04/Stand.module.css create mode 100644 src/s2-homeworks/hw04/Stand.tsx create mode 100644 src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css create mode 100644 src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx create mode 100644 src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css create mode 100644 src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx create mode 100644 src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css create mode 100644 src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx create mode 100644 src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.png diff --git a/src/s1-main/App.module.css b/src/s1-main/App.module.css index 34b8ee0..c4c5b31 100644 --- a/src/s1-main/App.module.css +++ b/src/s1-main/App.module.css @@ -1,3 +1,11 @@ .App { } + +.hw { + +} + +.hwTitle { + +} \ No newline at end of file diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index bea96f8..56214e4 100644 --- a/src/s1-main/App.tsx +++ b/src/s1-main/App.tsx @@ -3,19 +3,21 @@ import s from './App.module.css' import HW1 from '../s2-homeworks/hw01/HW1' import HW2 from '../s2-homeworks/hw02/HW2' import HW3 from '../s2-homeworks/hw03/HW3' +import HW4 from '../s2-homeworks/hw04/HW4' const App = () => { - return ( -
-
react homeworks:
- - - - {/**/} - {/**/} + return ( +
+
react homeworks:
-
- ) + + + + + + +
+ ) } export default App \ No newline at end of file diff --git a/src/s2-homeworks/hw01/HW1.tsx b/src/s2-homeworks/hw01/HW1.tsx index 5c5038a..72b4556 100644 --- a/src/s2-homeworks/hw01/HW1.tsx +++ b/src/s2-homeworks/hw01/HW1.tsx @@ -2,6 +2,7 @@ import React from 'react' import Message from './Message' import MessageSender from './MessageSender' import s from './Message.module.css' +import s2 from '../../s1-main/App.module.css' import FriendMessage from './FriendMessage' // нужно создать правильный тип вместо any @@ -34,11 +35,11 @@ export const friendMessage0: MessageType = { const HW1 = () => { return ( -
+

{/*можно убрать этот тег*/} -
homeworks 1
+
homeworks 1
{/*проверка отображения (не менять)*/} diff --git a/src/s2-homeworks/hw01/Message.module.css b/src/s2-homeworks/hw01/Message.module.css index b70ebcf..34034e3 100644 --- a/src/s2-homeworks/hw01/Message.module.css +++ b/src/s2-homeworks/hw01/Message.module.css @@ -1,11 +1,3 @@ -.hw1 { - -} - -.hwTitle { - -} - .message { display: flex; justify-content: right; diff --git a/src/s2-homeworks/hw02/Affairs.module.css b/src/s2-homeworks/hw02/Affairs.module.css index 68eb82b..453d646 100644 --- a/src/s2-homeworks/hw02/Affairs.module.css +++ b/src/s2-homeworks/hw02/Affairs.module.css @@ -1,7 +1,3 @@ -.hw2 { - -} - .button { margin: 10px; width: 60px; diff --git a/src/s2-homeworks/hw02/HW2.tsx b/src/s2-homeworks/hw02/HW2.tsx index 32ca749..1b85dfb 100644 --- a/src/s2-homeworks/hw02/HW2.tsx +++ b/src/s2-homeworks/hw02/HW2.tsx @@ -1,7 +1,7 @@ import React, {useState} from 'react' import Affairs from './Affairs' import s from './Affairs.module.css' -import s2 from '../hw01/Message.module.css' +import s2 from '../../s1-main/App.module.css' // types export type AffairPriorityType = any // 'high' | 'low' | 'middle' // need to fix any @@ -44,7 +44,7 @@ function HW2() { const deleteAffairCallback = (_id: any) => setAffairs(deleteAffair(affairs, _id)) // need to fix any // number return ( -
+

{/*можно убрать этот тег*/} diff --git a/src/s2-homeworks/hw03/HW3.tsx b/src/s2-homeworks/hw03/HW3.tsx index 9d104ad..493838d 100644 --- a/src/s2-homeworks/hw03/HW3.tsx +++ b/src/s2-homeworks/hw03/HW3.tsx @@ -1,6 +1,7 @@ import React, {useState} from 'react' import {v1} from 'uuid' import s from './Greeting.module.css' +import s2 from '../../s1-main/App.module.css' import GreetingContainer from './GreetingContainer' // types @@ -9,7 +10,7 @@ export type UserType = { name: string // need to fix any } -const HW1 = () => { +const HW3 = () => { const [users, setUsers] = useState([]) // need to fix any const addUserCallback = (name: string) => { // need to fix any @@ -21,10 +22,12 @@ const HW1 = () => { } return ( -
+

{/*можно убрать этот тег*/} +
homeworks 3
+ {/*для автоматической проверки дз (не менять)*/} @@ -36,4 +39,4 @@ const HW1 = () => { ) } -export default HW1 +export default HW3 diff --git a/src/s2-homeworks/hw04/HW4.tsx b/src/s2-homeworks/hw04/HW4.tsx new file mode 100644 index 0000000..d9b7af3 --- /dev/null +++ b/src/s2-homeworks/hw04/HW4.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import s2 from '../../s1-main/App.module.css' +import Stand from './Stand' + +const HW4 = () => { + return ( +
+
+ {/*можно убрать этот тег*/} + +
homeworks 4
+ + {/*проверка отображения*/} + демострация возможностей компонент: + + +
+ {/*можно убрать этот тег*/} +
+ {/*можно убрать этот тег*/} +
+ ) +} + +export default HW4 diff --git a/src/s2-homeworks/hw04/Stand.module.css b/src/s2-homeworks/hw04/Stand.module.css new file mode 100644 index 0000000..f0e083a --- /dev/null +++ b/src/s2-homeworks/hw04/Stand.module.css @@ -0,0 +1,16 @@ +.stand { + display: flex; + justify-content: space-around; +} + +.inputs { + +} + +.buttons { + +} + +.checkboxes { + +} \ No newline at end of file diff --git a/src/s2-homeworks/hw04/Stand.tsx b/src/s2-homeworks/hw04/Stand.tsx new file mode 100644 index 0000000..c57a28f --- /dev/null +++ b/src/s2-homeworks/hw04/Stand.tsx @@ -0,0 +1,79 @@ +import React, {useState} from 'react' +import s from './Stand.module.css' +import SuperInputText from './common/c1-SuperInputText/SuperInputText' +import SuperCheckbox from './common/c3-SuperCheckbox/SuperCheckbox' +import SuperButton from "./common/c2-SuperButton/SuperButton"; + +const Stand = () => { + const [stateForAllInputs, setValue] = useState('') + const [error, setError] = useState(undefined) + + const [stateForAllCheckboxes, setChecked] = useState(false) + + return ( +
+
+ инпут с ошибкой: +
+ { + setError(stateForAllInputs.trim() ? undefined : 'some error') + setValue('') + }} + /> +
+ совместим со старым кодом +
+ setValue(e.currentTarget.value)} + /> +
+
+ +
+ обычная кнопка: +
+ default +
+ красная кнопка: +
+ red +
+ задизэйбленная кнопка: +
+ disabled +
+ +
+ +
+ чекбокс с текстом: +
+ + some text + +
+ совместим со старым кодом +
+ setChecked(e.currentTarget.checked)} + /> +
+
+
+ ) +} + +export default Stand diff --git a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css new file mode 100644 index 0000000..a8f4624 --- /dev/null +++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css @@ -0,0 +1,26 @@ +.input:focus { + outline: none; + border: #99ff99 solid 2px; +} + +.superInput { + margin: 10px; + + background: #003300; + color: #99ff99; +} + +.errorInput { + margin: 10px; + + background: #003300; + color: #99ff99; + + border: 2px solid #dd3355; +} + +.error { + color: #dd3355; + height: 21px; + margin-left: 10px; +} \ No newline at end of file diff --git a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx new file mode 100644 index 0000000..60de30f --- /dev/null +++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx @@ -0,0 +1,60 @@ +import React, {ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, KeyboardEvent, ReactNode} from 'react' +import s from './SuperInputText.module.css' + +// тип пропсов обычного инпута +type DefaultInputPropsType = DetailedHTMLProps, HTMLInputElement> + +// здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута, кроме type +// (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType) +type SuperInputTextPropsType = Omit & { // и + ещё пропсы которых нет в стандартном инпуте + onChangeText?: (value: string) => void + onEnter?: () => void + error?: ReactNode + spanClassName?: string +} + +const SuperInputText: React.FC = ( + { + // type, // достаём и игнорируем чтоб нельзя было задать другой тип инпута + onChange, onChangeText, + onKeyPress, onEnter, + error, + className, spanClassName, + id, + + ...restProps// все остальные пропсы попадут в объект restProps + } +) => { + const onChangeCallback = (e: ChangeEvent) => { + onChange?.(e) // если есть пропс onChange, то передать ему е (поскольку onChange не обязателен) + + onChangeText?.(e.currentTarget.value) + } + const onKeyPressCallback = (e: KeyboardEvent) => { + onKeyPress?.(e) + + onEnter // если есть пропс onEnter + && e.key === 'Enter' // и если нажата кнопка Enter + && onEnter() // то вызвать его + } + + const finalSpanClassName = `${s.error} ${spanClassName ? spanClassName : ''}` + const finalInputClassName = `${s.input} ${error ? s.errorInput : s.superInput} ${className}` // задача на смешивание классов + + return ( + <> + + {error} + + ) +} + +export default SuperInputText diff --git a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css new file mode 100644 index 0000000..5d5a3db --- /dev/null +++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css @@ -0,0 +1,88 @@ +@keyframes blink { + 0% { + left: -130%; + } + 100% { + left: 130%; + } +} + +.default { + background: #003300; + color: #99ff99; + outline: none; +} + +.red { + background: #dd3355; +} + +.disabled { + color: #005500; +} + +.button { + position: relative; + margin: 10px; + overflow: hidden; + cursor: pointer; +} + +.button::after { + display: block; + content: ''; + position: absolute; + + left: -130%; + top: 0; + height: 100%; + width: 20%; + + transform: skew(45deg); + + background-color: #ffffff; + opacity: 0.7; + + z-index: 14; +} + +.button:hover::after { + animation: blink 0.35s ease; /*https://html5book.ru/css3-animation/*/ +} + +.button:hover::before { + display: block; + content: ''; + position: absolute; + + left: -100vw; + top: 0; + height: 100vh; + width: 300vw; + + background-color: #ffffff; + opacity: 0.2; + + z-index: 7; +} + +.button:focus { + outline: #99ff99 solid 1px; +} + +.button:active { + background: #99ff99; + color: #003300; +} + +.button:disabled { + cursor: no-drop; +} + +.button:disabled::after { + z-index: -1; +} + +.button:disabled::before { + z-index: -1; +} \ No newline at end of file diff --git a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx new file mode 100644 index 0000000..653fe69 --- /dev/null +++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx @@ -0,0 +1,35 @@ +import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react' +import s from './SuperButton.module.css' + +// тип пропсов обычной кнопки, children в котором храниться название кнопки там уже описан +type DefaultButtonPropsType = DetailedHTMLProps, HTMLButtonElement> + +type SuperButtonPropsType = DefaultButtonPropsType & { + xType?: string +} + +const SuperButton: React.FC = ( + { + xType, className, + disabled, + ...restProps// все остальные пропсы попадут в объект restProps, там же будет children + } +) => { + const finalClassName = `${s.button} ${ + disabled + ? s.disabled + : xType === 'red' + ? s.red + : s.default + } ${className}` // задачка на смешивание классов + + return ( +