index.jsx 2.51 KB
Newer Older
Muhammadali's avatar
Muhammadali committed
1 2 3 4 5 6
import React, {useEffect, useState} from 'react'
import SettingMainStyle from './style'
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import FormatPaintIcon from '@mui/icons-material/FormatPaint';
import BuildIcon from '@mui/icons-material/Build';
import FixComponent from "../settingComponents/fixComponent"
Muhammadali's avatar
Muhammadali committed
7 8
import StyleComponent from "../settingComponents/styleComponent"
import {useColorConfig} from "../../storage/globalColorConfig"
Muhammadali's avatar
Muhammadali committed
9 10 11 12 13
const SettingComponent = ({
                              settingHidden, variant, position
                          }) => {

    const [settingPage, setSettingPage] = useState(0)
Muhammadali's avatar
Muhammadali committed
14 15
    const elem = document.getElementById('data');
    const useColorConfigStore = useColorConfig((store) => store)
Muhammadali's avatar
Muhammadali committed
16 17
    const allData = [
        {
Muhammadali's avatar
Muhammadali committed
18 19 20 21
            id: 2,
            title: 'Test-1',
            icon: <FormatPaintIcon className={'leftIcons'} />,
            content: <SettingMainStyle.RightSelectInfoOneBlock><StyleComponent /></SettingMainStyle.RightSelectInfoOneBlock>
Muhammadali's avatar
Muhammadali committed
22 23 24
        },
        {
            id: 1,
Muhammadali's avatar
Muhammadali committed
25 26 27
            title: 'Test-2',
            icon: <BuildIcon className={'leftIcons'} />,
            content: <SettingMainStyle.RightSelectInfoOneBlock><FixComponent /></SettingMainStyle.RightSelectInfoOneBlock>
Muhammadali's avatar
Muhammadali committed
28
        }
Muhammadali's avatar
Muhammadali committed
29 30 31 32 33 34 35 36 37
    ]

    const changeSettingPageCountFunc = (count) => {
        setSettingPage(count)
    }

    console.log('elem: ', elem)

    useEffect(() => {
Muhammadali's avatar
Muhammadali committed
38
        console.log('settingPage: ', settingPage)
Muhammadali's avatar
Muhammadali committed
39
        if(elem){
Muhammadali's avatar
Muhammadali committed
40
            elem.scrollTo({top: elem.scrollHeight / allData.length * settingPage, behavior: typeof useColorConfigStore.state.switchAnim !== 'undefined' ? useColorConfigStore.state.switchAnim ? 'smooth' : 'auto' : 'smooth'})
Muhammadali's avatar
Muhammadali committed
41 42 43 44 45 46 47 48 49 50 51
        }
    }, [settingPage]);

    return (<SettingMainStyle
        hiddenValue={!settingHidden}
        // hiddenValue={false}
        variant={variant}
        position={position}
    >
        <SettingMainStyle.LeftMenu>
            {
Muhammadali's avatar
Muhammadali committed
52
                allData.map(({id, title, icon}, index)=> <div id={id} className={`menuItem ${settingPage === index && 'active'}`} onClick={()=> changeSettingPageCountFunc(index)}>
Muhammadali's avatar
Muhammadali committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
                    {icon}
                    <div className={'backgroundFilter'}></div>
                </div>)
            }
        </SettingMainStyle.LeftMenu>
        <SettingMainStyle.RightSelectInfo id={'data'}>
            {
                allData.map(({content, id})=> content)
            }
        </SettingMainStyle.RightSelectInfo>

    </SettingMainStyle>)
}

export default SettingComponent