杂记

9 阅读2分钟
  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
    }
}
  1. Progress

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

  2. 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)

  1. 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;
    }
  1. 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 };
}