From 5efc1d9d37c6c21504ff39ebd37cf57b0fe1ca6b Mon Sep 17 00:00:00 2001 From: neko Date: Tue, 20 Sep 2022 13:02:00 +0300 Subject: [PATCH] final ref hw6 --- src/s2-homeworks/hw06/HW6.module.css | 4 ++ src/s2-homeworks/hw06/HW6.tsx | 15 +++-- .../SuperEditableSpan.module.css | 17 +++-- .../SuperEditableSpan.tsx | 65 ++++++++++--------- .../hw06/localStorage/localStorage.ts | 4 +- 5 files changed, 64 insertions(+), 41 deletions(-) diff --git a/src/s2-homeworks/hw06/HW6.module.css b/src/s2-homeworks/hw06/HW6.module.css index d25b829..616d889 100644 --- a/src/s2-homeworks/hw06/HW6.module.css +++ b/src/s2-homeworks/hw06/HW6.module.css @@ -1,4 +1,8 @@ .buttonsContainer { display: flex; gap: 24px; +} + +.editableSpanContainer { + height: 50px; } \ No newline at end of file diff --git a/src/s2-homeworks/hw06/HW6.tsx b/src/s2-homeworks/hw06/HW6.tsx index b647f78..8d7344e 100644 --- a/src/s2-homeworks/hw06/HW6.tsx +++ b/src/s2-homeworks/hw06/HW6.tsx @@ -5,6 +5,12 @@ import s2 from '../../s1-main/App.module.css' import SuperButton from '../hw04/common/c2-SuperButton/SuperButton' import s from './HW6.module.css' +/* + * 1 - в файле SuperEditableSpan.tsx дописать логику функций onEnterCallback, onBlurCallback, onDoubleClickCallBack + * 2 - дописать логику функции restore + * 3 - сделать стили в соответствии с дизайном + */ + const HW6 = () => { const [value, setValue] = useState('') @@ -22,27 +28,26 @@ const HW6 = () => { {/*should work (должно работать)*/}
-
+
- save to ls + Save to ls - get from ls + Get from ls
diff --git a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css index b78cd0e..17ba0be 100644 --- a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css +++ b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css @@ -1,17 +1,24 @@ -.span { +.spanBlock { display: flex; align-items: center; gap: 10px; - margin-bottom: 28px; - cursor: pointer; +} + +.span { + color: #0080FF; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 16px; line-height: 20px; - color: #0080FF; + cursor: pointer; } .input { - margin-bottom: 16px; width: 276px; + margin-bottom: 16px; +} + +.pen { + width: 24px; + height: 24px; } \ No newline at end of file diff --git a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx index 616372b..f0ecd1e 100644 --- a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx +++ b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx @@ -7,16 +7,13 @@ import React, { import s from './SuperEditableSpan.module.css' import SuperInputText from '../../../hw04/common/c1-SuperInputText/SuperInputText' import editIcon from './editIcon.svg' + // тип пропсов обычного инпута -type DefaultInputPropsType = DetailedHTMLProps< - InputHTMLAttributes, - HTMLInputElement -> +type DefaultInputPropsType = DetailedHTMLProps, + HTMLInputElement> // тип пропсов обычного спана -type DefaultSpanPropsType = DetailedHTMLProps< - HTMLAttributes, - HTMLSpanElement -> +type DefaultSpanPropsType = DetailedHTMLProps, + HTMLSpanElement> // здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута, кроме type // (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType) @@ -26,20 +23,23 @@ type SuperEditableSpanType = Omit & { onEnter?: () => void error?: string - spanProps?: DefaultSpanPropsType // пропсы для спана + spanProps?: DefaultSpanPropsType & {defaultText?: string}// пропсы для спана } -const SuperEditableSpan: React.FC = ({ - autoFocus, - onBlur, - onEnter, - spanProps, +const SuperEditableSpan: React.FC = ( + { + id, + autoFocus, + onBlur, + onEnter, + spanProps, - ...restProps // все остальные пропсы попадут в объект restProps -}) => { + ...restProps // все остальные пропсы попадут в объект restProps + } +) => { const [editMode, setEditMode] = useState(false) - const { children, onDoubleClick, className, ...restSpanProps } = - spanProps || {} + const {children, onDoubleClick, className, defaultText, ...restSpanProps} = + spanProps || {} const onEnterCallback = () => { setEditMode(false) // выключить editMode при нажатии Enter // делают студенты @@ -59,12 +59,14 @@ const SuperEditableSpan: React.FC = ({ onDoubleClick?.(e) } - const spanClassName = `${s.span} ${className ? className : ''}` + const spanClassName = s.span + + (className ? ' ' + className : '') return ( <> {editMode ? ( = ({ {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри) /> ) : ( - - {/*если нет захардкодженного текста для спана, то значение инпута*/} +
{'edit'}{' '} - {children || restProps.value} - + /> + + {/*если нет захардкодженного текста для спана, то значение инпута*/} + + {children || restProps.value || defaultText} + +
)} ) diff --git a/src/s2-homeworks/hw06/localStorage/localStorage.ts b/src/s2-homeworks/hw06/localStorage/localStorage.ts index e42abe5..3665337 100644 --- a/src/s2-homeworks/hw06/localStorage/localStorage.ts +++ b/src/s2-homeworks/hw06/localStorage/localStorage.ts @@ -15,6 +15,7 @@ export function restoreState(key: string, defaultState: T) { // --------------------------------------------------------------------------------------------------------------- // пример использования: +/* type StateType = { x: string y: number @@ -23,5 +24,6 @@ type StateType = { // сохраняем объект типа StateType в ячейке 'test' saveState('test', { x: 'A', y: 1 }) -// получем в переменную state объект из ячейки 'test' или дэфолтный объект если ячейка пуста +// получаем в переменную state объект из ячейки 'test' или дэфолтный объект если ячейка пуста const state: StateType = restoreState('test', { x: '', y: 0 }) + */