hw7

src/s2-homeworks/hw05/pages/Junior.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import HW6 from '../../hw06/HW6'
+import HW7 from '../../hw07/HW7'
 
 function Junior() {
     return (
         <div id={'hw5-page-junior'}>
             junior page
             <HW6/>
-            {/*<HW7/>*/}
+            <HW7/>
             {/*<HW8/>*/}
             {/*<HW9/>*/}
         </div>

src/s2-homeworks/hw07/HW7.tsx

@@ -0,0 +1,46 @@
+import React, {useState} from 'react'
+import SuperSelect from './common/c5-SuperSelect/SuperSelect'
+import SuperRadio from './common/c6-SuperRadio/SuperRadio'
+import s2 from '../../s1-main/App.module.css'
+
+const arr = [{id: 1, value: 'x'}, {id: 2, value: 'y'}, {id: 3, value: 'z'}] // value может быть изменено
+
+const HW7 = () => {
+    const [value, onChangeOption] = useState(1) // селект и радио должны работать синхронно
+    console.log(value)
+
+    return (
+        <div id={'hw7'} className={s2.hw}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            <div className={s2.hwTitle}>homeworks 7</div>
+
+            {/*should work (должно работать)*/}
+            <div>
+                <SuperSelect
+                    id={'hw7-super-select'}
+                    options={arr}
+                    value={value}
+                    onChangeOption={onChangeOption}
+                />
+            </div>
+            <div>
+                <SuperRadio
+                    id={'hw7-super-radio'}
+                    name={'hw7-radio'}
+                    options={arr}
+                    value={value}
+                    onChangeOption={onChangeOption}
+                />
+            </div>
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW7

src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css

@@ -0,0 +1,38 @@
+.select {
+    width: 100px;
+    padding: 5px;
+    padding-right: 30px;
+
+    cursor: pointer;
+    appearance: none;
+    background-color: #003300; /*---------------------------------------------------------------------------------------------------------------------------------------------------fill---------99ff99*/
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2399FF99%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+
+    border: 2px inset rgb(118, 118, 118);
+    color: #99ff99;
+}
+
+.select:focus {
+    outline: none;
+    border: #99ff99 solid 2px;
+}
+
+.option {
+    /*padding: 30px;*/
+    color: #003300;
+    background: #99ff99;
+}
+
+.option:checked {
+    background: #003300;
+    color: #99ff99;
+}
+
+.option:hover{
+    box-shadow: 0 0 10px 100px #FED20F inset;
+    transition: all .2s ease-in-out;
+    background: red;
+}

src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.tsx

@@ -0,0 +1,40 @@
+import React, {SelectHTMLAttributes, DetailedHTMLProps, ChangeEvent} from 'react'
+import s from './SuperSelect.module.css'
+
+type DefaultSelectPropsType = DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>
+
+type SuperSelectPropsType = DefaultSelectPropsType & {
+    options?: any[]
+    onChangeOption?: (option: any) => void
+}
+
+const SuperSelect: React.FC<SuperSelectPropsType> = (
+    {
+        options, className,
+        onChange, onChangeOption,
+        ...restProps
+    }
+) => {
+    const mappedOptions: any[] = options ? options.map(o => (
+        <option id={'hw7-option-' + o.id} className={s.option} key={o.id} value={o.id}>{o.value}</option>
+    )) : [] // map options with key
+
+    const onChangeCallback = (e: ChangeEvent<HTMLSelectElement>) => { // делают студенты
+        onChange?.(e)
+        onChangeOption?.(e.currentTarget.value)
+    }
+
+    const finalSelectClassName = s.select + (
+        className
+            ? ' ' + className
+            : ''
+    )
+
+    return (
+        <select className={finalSelectClassName} onChange={onChangeCallback} {...restProps}>
+            {mappedOptions}
+        </select>
+    )
+}
+
+export default SuperSelect

src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css

@@ -0,0 +1,26 @@
+.radio {
+    appearance: none;
+    height: 10px;
+    width: 10px;
+
+    cursor: pointer;
+    border-radius: 50%;
+    outline: none;
+    background: #335533;
+}
+
+.radio:hover {
+    border: 2px solid #cc99ff;
+}
+
+.radio:checked {
+    background: #55ffff;
+}
+
+.radio:focus {
+    border: 2px solid #cc99ff;
+}
+
+.label {
+    cursor: pointer;
+}

src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx

@@ -0,0 +1,65 @@
+import React, {ChangeEvent, InputHTMLAttributes, DetailedHTMLProps, HTMLAttributes} from 'react'
+import s from './SuperRadio.module.css'
+
+type DefaultRadioPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+// тип пропсов обычного спана
+type DefaultSpanPropsType = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+
+type SuperRadioPropsType = Omit<DefaultRadioPropsType, 'type'> & {
+    options?: any[]
+    onChangeOption?: (option: any) => void
+
+    spanProps?: DefaultSpanPropsType // пропсы для спана
+}
+
+const SuperRadio: React.FC<SuperRadioPropsType> = (
+    {
+        id,
+        name, className,
+        options, value,
+        onChange, onChangeOption,
+        spanProps,
+        ...restProps
+    }
+) => {
+    const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e)
+        onChangeOption?.(+e.currentTarget.value)
+    }
+
+    const finalRadioClassName = `${s.radio} ${className ? className : ''}`
+    const spanClassName = `${s.span} ${spanProps?.className ? spanProps.className : ''}`
+
+    const mappedOptions: any[] = options ? options.map(o => (
+        <label key={name + '-' + o.id} className={s.label}>
+            <input
+                id={id + '-input-' + o.id}
+                className={finalRadioClassName}
+                type={'radio'}
+
+                // name, checked, value делают студенты
+                name={name}
+                checked={o.id === value}
+                value={o.id}
+
+                onChange={onChangeCallback}
+                {...restProps}
+            />
+            <span
+                id={id + '-span-' + o.id}
+                {...spanProps}
+                className={spanClassName}
+            >
+                {o.value}
+            </span>
+        </label>
+    )) : []
+
+    return (
+        <>
+            {mappedOptions}
+        </>
+    )
+}
+
+export default SuperRadio