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