add hw 11

src/s2-homeworks/hw11/common/c7-SuperRange/SuperRange.tsx

@@ -0,0 +1,45 @@
+import React, {ChangeEvent, DetailedHTMLProps, InputHTMLAttributes} from 'react'
+import s from './SuperRange.module.css'
+
+// тип пропсов обычного инпута
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+
+// здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута
+// (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
+type SuperRangePropsType = DefaultInputPropsType & { // и + ещё пропсы которых нет в стандартном инпуте
+    onChangeRange?: (value: number) => void
+};
+
+const SuperRange: React.FC<SuperRangePropsType> = (
+    {
+        type, // достаём и игнорируем чтоб нельзя было задать другой тип инпута
+        onChange, onChangeRange,
+        className,
+
+        ...restProps// все остальные пропсы попадут в объект restProps
+    }
+) => {
+    const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange && onChange(e) // сохраняем старую функциональность
+
+        onChangeRange && onChangeRange(+e.currentTarget.value)
+    }
+
+    const finalRangeClassName = `${s.range} ${className ? className : ''}`
+
+    // взять одинарный ползунок из материал-юай и повесить на него ид
+    return (
+        <>
+            <input
+                id={'hw11-single-slider'}
+                type={'range'}
+                onChange={onChangeCallback}
+                className={finalRangeClassName}
+
+                {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри)
+            />
+        </>
+    )
+}
+
+export default SuperRange