杂记

1. Button

   动态类名：classMap：base（classname，type，shape，size），loading，disabled 动态切换：useCssClassManger（classMap）解构 classList, removeClassName, addClassName，hasClassName 最初组件具有base类名，组件挂载后根据disabled add类名，useEffect监听loading增减类名 点击：disabled，loading return，else onClick（e）

export const useCssClassManger = (cssClassMap: cssMap) => {
    const [classMap, setClassMap] = useState<cssMap>({
        base: cssClassMap.base
    })
    const [classList, setClassList] = useState('')

    const addClassName = (classKey: string) => {
        setClassMap((prev) =>({...prev, [classKey]:cssClassMap[classKey]}))
    }
    const removeClassName = (classKey: string) => {
        setClassMap((prev) => {
            const template = { ...prev };
            delete template[classKey];
            return template;
        });
    }
    const hasClassName = (className: string) => {
        return Object.keys(classMap).find((c: string) => c === className);
    };

    useEffect(() => {
        setClassList(Object.values(classMap).join(' '));
    }, [classMap]);

    return {
        addClassName,
        removeClassName,
        hasClassName,
        classList
    }
}

2. Progress

   参数：必须：value、max，其他：showProgress展示值、size、classname、align 计算百分比percent：(value / max) * 100; 背景颜色：getColorStage(percent: number)计算类名，控制background color

3. Switch

   参数：size，disabled，activeValue，inactiveValue，activeLabel，inactiveLabel，defaultValue,onChange 样式：button--span，div.main--div.wapper(position: relative;left: -50%;width: 150%;)--::after(width: calc(33.33% - 2px);圆形;)，span

   挂载：根据defaultValue计算state为true或false，监听state控制类名'jyy-switch__active'的添加()

    &__active {
        background-color: #3875f6;
        .jyy-switch__wrapper {
            left: 0;
        }
    }

点击：state取反，disabled return ，根据state调用onChange（inactiveValue/activeLabel）

4. Driver

   参数：风格 variant?: 'dashed' | 'dotted' | 'solid';位置 orientation?: 'left' | 'right' | 'center';文字 children?: string;className; 字体不加粗 plain?: boolean; 样式：div（classList：hasText__oriention）-- children && <span className={ plain ? ${Y}__plain : ${Y}__text}>{children}, 伪元素

    &__hastext__right {
        display: flex;
        align-items: center;
        &::after,
        &::before {
            content: '';
            display: inline-block;
            border-bottom: currentColor 1px solid;
            height: 1px;
        }
        &::before {
            width: 95%;
        }
        &::after {
            width: 5%;
        }
    }
    &__text {
        .jyy-text-small();
        position: relative;
        margin: 0 5px;
        font-weight: bold;
        color: rgb(150, 150, 150);
        white-space: nowrap;
    }

5. Image

   类名：src（必须），link，width，height，alt，title，lazy，preview 结构：div（imgRef，handleClick结合 preview控制图片预览）--img（imgSrc），title &&p，preview &&Modal 懒加载：通过更新imgSrc控制图片的加载，调用useLazyLoad（imgRef，（）=>，lazy）

useLazyLoad(imgRef, () => {
        const image = new Image();

        image.onload = function () { //资源加载完毕
            setImgSrc(src);
        }
        image.onerror = function () {
        }

        image.src = src; //加载资源

    }, lazy)
    
 // hooks核心，lazy为true && target.current
 const options = {
            rootMargin: '0px',
            root: null,
            threshold
        }

        const observer = new IntersectionObserver((entries) => {
            const currentView = entries[0].intersectionRatio;
            if (currentView >= threshold && !loaded.current) {
                callback();
                loaded.current = true;//资源已经被加载过
            }

        }, options);

        observer.observe(target.current);

缩放（IV）：rotate('left'｜'right'),scaleDown,scaleUp,reset. const { target, scaleDown, scaleUp, reset, rotate } = useTransform();target绑在img上：

function useTransform() {
    const target = useRef<any>(null);
    const [scaleFactor, setScaleFactor] = useState(1);//数据同步
    const [rotateAngle, setRotateAngle] = useState(0);

    const scaleDown = () => {
        if (scaleFactor >= 0.4) { //缩小有限制
            target.current.style.transform = `rotate(${rotateAngle}deg) scale(${
                scaleFactor - 0.5
            })`;
            setScaleFactor(scaleFactor - 0.5);
        }
    };

    const scaleUp = () => {
        target.current.style.transform = `rotate(${rotateAngle}deg) scale(${
            scaleFactor + 0.5
        })`;
        setScaleFactor(scaleFactor + 0.5);
    };

    const rotate = (direction: 'left' | 'right') => {
        const step = direction === 'left' ? -90 : 90;
        target.current.style.transform = `rotate(${
            rotateAngle + step
        }deg) scale(${scaleFactor})`;
        setRotateAngle(rotateAngle + step);
    };

    const reset = () => {
        target.current.style.transform = '';
        setScaleFactor(1);
        setRotateAngle(0);
    };

    return { scaleDown, scaleUp, reset, rotate, target };
}