final ref hw4

2025-12-16 20:39:24 +00:00 · 2022-09-14 18:37:48 +03:00
parent b33a5ee91a
commit 8bcb1bc9a8
8 changed files with 114 additions and 121 deletions
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -3,6 +3,7 @@ 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'

 function App() {
    // для дз 12
@@ -19,7 +20,7 @@ function App() {
            <HW1/>
            <HW2/>
            <HW3/>
-            {/*<HW4/>*/}
+            <HW4/>

            {/*<HW5/>*/}
        </div>
--- a/src/s2-homeworks/hw04/HW4.tsx
+++ b/src/s2-homeworks/hw04/HW4.tsx
@@ -2,6 +2,13 @@ import React from 'react'
 import s2 from '../../s1-main/App.module.css'
 import Stand from './Stand'

+/*
+* 1 - понять (и простить) SuperInputText
+* 2 - в зависимости от типа и дизэйбла прицепить нужный класс в SuperButton.tsx (строка 21)
+* 3 - дописать onChangeCallback в SuperCheckbox.tsx чтоб оба чекбокса работали на стенде
+* 4 - сделать стили в соответствии с дизайном
+* */
+
 const HW4 = () => {
    return (
        <div id={'hw4'}>
--- a/src/s2-homeworks/hw04/Stand.tsx
+++ b/src/s2-homeworks/hw04/Stand.tsx
@@ -5,14 +5,22 @@ 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 | string>(undefined)
+    const [stateForAllInputs, setValue] = useState<string>('')
+    const [error, setError] = useState<string>('')

-    const [stateForAllCheckboxes, setChecked] = useState(false)
+    const [stateForAllCheckboxes, setChecked] = useState<boolean>(false)

    return (
        <div id={'hw4-stand'} className={s.stand}>
            <div className={s.inputs}>
+                {/*совместим со старым кодом:*/}
+                <div>
+                    <SuperInputText
+                        id={'hw4-super-input-like-old'}
+                        value={stateForAllInputs}
+                        onChange={(e) => setValue(e.currentTarget.value)}
+                    />
+                </div>
                {/*инпут с ошибкой:*/}
                <div>
                    <SuperInputText
@@ -23,21 +31,13 @@ const Stand = () => {
                        onEnter={() => {
                            setError(
                                stateForAllInputs.trim()
-                                    ? undefined
-                                    : 'some error'
+                                    ? ''
+                                    : 'Error'
                            )
                            setValue('')
                        }}
                    />
                </div>
-                {/*совместим со старым кодом*/}
-                <div>
-                    <SuperInputText
-                        id={'hw4-super-input-like-old'}
-                        value={stateForAllInputs}
-                        onChange={(e) => setValue(e.currentTarget.value)}
-                    />
-                </div>
            </div>

            <div className={s.buttons}>
@@ -63,6 +63,15 @@ const Stand = () => {
                        disabled
                    </SuperButton>
                </div>
+                {/*задизэйбленная кнопка:*/}
+                <div>
+                    <SuperButton
+                        id={'hw4-super-button-secondary'}
+                        xType={'secondary'}
+                    >
+                        secondary
+                    </SuperButton>
+                </div>
            </div>

            <div className={s.checkboxes}>
@@ -76,7 +85,7 @@ const Stand = () => {
                        some text
                    </SuperCheckbox>
                </div>
-                {/*совместим со старым кодом*/}
+                {/*совместим со старым кодом:*/}
                <div>
                    <SuperCheckbox
                        id={'hw4-super-checkbox-like-old'}
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
@@ -7,18 +7,20 @@
 }

 .input {
+    width: 370px;
+    height: 36px;
+    padding: 8px 0 8px 12px;
+
+    color: #000;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
-    width: 370px;
+    outline: none;
+
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
-    padding: 8px 0 8px 12px;
-    color: #000;
-    outline: none;
-    height: 36px;
 }

 .inputWrapper {
@@ -30,13 +32,14 @@
 }

 .error {
+    position: absolute;
+    top: -17px;
+    left: 0;
+
+    color: #cc1439;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
-    color: #cc1439;
-    position: absolute;
-    top: -17px;
-    left: 0;
 }
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
@@ -8,10 +8,8 @@ import React, {
 import s from './SuperInputText.module.css'

 // тип пропсов обычного инпута
-type DefaultInputPropsType = DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
->
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement>

 // здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута, кроме type
 // (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
@@ -23,18 +21,20 @@ type SuperInputTextPropsType = Omit<DefaultInputPropsType, 'type'> & {
    spanClassName?: string
 }

-const SuperInputText: React.FC<SuperInputTextPropsType> = ({
-    onChange,
-    onChangeText,
-    onKeyPress,
-    onEnter,
-    error,
-    className,
-    spanClassName,
-    id,
+const SuperInputText: React.FC<SuperInputTextPropsType> = (
+    {
+        onChange,
+        onChangeText,
+        onKeyPress,
+        onEnter,
+        error,
+        className,
+        spanClassName,
+        id,

-    ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
+        ...restProps // все остальные пропсы попадут в объект restProps
+    }
+) => {
    const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
        onChange?.(e) // если есть пропс onChange, то передать ему е (поскольку onChange не обязателен)

@@ -44,16 +44,15 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = ({
        onKeyPress?.(e)

        onEnter && // если есть пропс onEnter
-            e.key === 'Enter' && // и если нажата кнопка Enter
-            onEnter() // то вызвать его
+        e.key === 'Enter' && // и если нажата кнопка Enter
+        onEnter() // то вызвать его
    }

-    const finalSpanClassName = `${s.error} ${
-        spanClassName ? spanClassName : ''
-    }`
-    const finalInputClassName = `${s.input} ${
-        error ? s.errorInput : s.superInput
-    } ${className}` // задача на смешивание классов
+    const finalSpanClassName = s.error
+        + (spanClassName ? ' ' + spanClassName : '')
+    const finalInputClassName = s.input
+        + (error ? ' ' + s.errorInput : ' ' + s.superInput)
+        + (className ? ' ' + s.className : '') // задача на смешивание классов

    return (
        <div className={s.inputWrapper}>
--- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
+++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
@@ -1,38 +1,29 @@
-@keyframes blink {
-    0% {
-        left: -130%;
-    }
-    100% {
-        left: 130%;
-    }
-}
-
-
-.disabled {
-    background: #004d99;
-    opacity: 0.5;
-    color: #002e5c;
-}
-
-
 .button {
    overflow: hidden;
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #0066CC;
-    color: white;
    padding: 5px 24px;
+
+    border-radius: 3px;
+    border: none;
+
+    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
+    cursor: pointer;
+}
+
+.disabled {
+    color: #002e5c;
+    background: #004d99;
+    opacity: 0.5;
 }

 .secondary {
+    color: #0066CC;
    background: transparent;
    border: 1px solid #0066CC;
    border-radius: 3px;
-    color: #0066CC;
 }

 .default {
@@ -43,24 +34,6 @@
    background: #cc1439;
 }

-.button::after {
-    display: block;
-    content: '';
-    position: absolute;
-
-    left: -130%;
-    top: 0;
-    height: 100%;
-    width: 20%;
-
-    transform: skew(45deg);
-
-    background-color: #fff;
-    opacity: 0.7;
-
-    z-index: 14;
-}
-
 .default:hover {
    background: #0080ff;
 }
--- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx
+++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx
@@ -1,31 +1,31 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
+import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react'
 import s from './SuperButton.module.css'

 // тип пропсов обычной кнопки, children в котором храниться название кнопки там уже описан
-type DefaultButtonPropsType = DetailedHTMLProps<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
->
+type DefaultButtonPropsType = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement>

 type SuperButtonPropsType = DefaultButtonPropsType & {
    xType?: string
 }

-const SuperButton: React.FC<SuperButtonPropsType> = ({
-    xType,
-    className,
-    disabled,
-    ...restProps // все остальные пропсы попадут в объект restProps, там же будет children
-}) => {
-    const finalClassName = `${s.button} ${
-        disabled
-            ? s.disabled
-            : xType === 'red'
-            ? s.red
-            : xType === 'secondary'
-            ? s.secondary
-            : s.default
-    } ${className}` // задачка на смешивание классов
+const SuperButton: React.FC<SuperButtonPropsType> = (
+    {
+        xType,
+        className,
+        disabled,
+        ...restProps // все остальные пропсы попадут в объект restProps, там же будет children
+    }
+) => {
+    const finalClassName = s.button
+        + (disabled
+                ? ' ' + s.disabled
+                : xType === 'red'
+                    ? ' ' + s.red
+                    : xType === 'secondary'
+                        ? ' ' + s.secondary
+                        : ' ' + s.default)
+        + (className ? ' ' + className : '') // задачка на смешивание классов

    return (
        <button
--- a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx
+++ b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx
@@ -6,26 +6,26 @@ import React, {
 import s from './SuperCheckbox.module.css'

 // тип пропсов обычного инпута
-type DefaultInputPropsType = DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
->
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement>

 type SuperCheckboxPropsType = Omit<DefaultInputPropsType, 'type'> & {
    onChangeChecked?: (checked: boolean) => void
    spanClassName?: string
 }

-const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
-    onChange,
-    onChangeChecked,
-    className,
-    spanClassName,
-    children, // в эту переменную попадёт текст, типизировать не нужно так как он затипизирован в React.FC
-    id,
+const SuperCheckbox: React.FC<SuperCheckboxPropsType> = (
+    {
+        onChange,
+        onChangeChecked,
+        className,
+        spanClassName,
+        children, // в эту переменную попадёт текст, типизировать не нужно так как он затипизирован в React.FC
+        id,

-    ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
+        ...restProps // все остальные пропсы попадут в объект restProps
+    }
+) => {
    const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
        // задачка на написание онченджа
        onChange?.(e)
@@ -33,7 +33,8 @@ const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
        onChangeChecked?.(e.currentTarget.checked)
    }

-    const finalInputClassName = `${s.checkbox} ${className ? className : ''}`
+    const finalInputClassName = s.checkbox
+        + (className ? ' ' + className : '')

    return (
        <label className={s.label}>