diff --git a/src/pages/demo/index.less b/src/pages/demo/index.less new file mode 100644 index 0000000..43b13e3 --- /dev/null +++ b/src/pages/demo/index.less @@ -0,0 +1,22 @@ +.block { + height: 300px; + border: 3px solid #ccc; + margin-bottom: 20px; + color: white; + padding: 24px; + line-height: 32px; + font-size: 24px; +} + +.lazyloadImg{ + display: flex; + flex-wrap: wrap; + &>li{ + width: 400px; + margin-right: 10px; + margin-bottom: 10px; + img{ + width: 100%; + } + } +} diff --git a/src/pages/demo/website/[picLazyLoading]/index.tsx b/src/pages/demo/website/[picLazyLoading]/index.tsx new file mode 100644 index 0000000..fd37f4d --- /dev/null +++ b/src/pages/demo/website/[picLazyLoading]/index.tsx @@ -0,0 +1,48 @@ +import React, { useEffect, useRef } from "react"; +import styles from "../../index.less"; + +interface OwnProps {} + +type Props = OwnProps; + +const Index: React.FC = (props) => { + const itemRef = useRef([]); + const ob = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + const img: any = entry.target; + img.src = img.dataset.src; + ob.unobserve(entry.target); + } + } + }); + useEffect(() => { + if (itemRef.current) { + _.forEach(itemRef.current, (item) => { + ob.observe(item); + }); + } + + return () => { + if (itemRef.current) { + _.forEach(itemRef.current, (item) => { + ob.unobserve(item); + }); + } + }; + }, [itemRef.current]); + return ( + + ); +}; + +export default Index; diff --git a/src/pages/demo/website/default.jpeg b/src/pages/demo/website/default.jpeg new file mode 100644 index 0000000..deb573f Binary files /dev/null and b/src/pages/demo/website/default.jpeg differ diff --git a/src/pages/demo/website/index.tsx b/src/pages/demo/website/index.tsx new file mode 100644 index 0000000..fe98cd2 --- /dev/null +++ b/src/pages/demo/website/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import SlideInItem from "./slideInItem"; + +interface OwnProps {} + +type Props = OwnProps; + +const list = [ + { id: 1, bg: "red" }, + { id: 2, bg: "blue" }, + { id: 3, bg: "green" }, + { id: 4, bg: "yellowgreen" }, + { id: 5, bg: "orange" }, + { id: 6, bg: "pink" }, + { id: 7, bg: "antiquewhite" }, + { id: 8, bg: "darkseagreen" }, + { id: 9, bg: "purple" }, + { id: 10, bg: "red" }, + { id: 11, bg: "black" } +]; +const Index: React.FC = (props) => { + const map = new WeakMap(); + const ob = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + const animation = map.get(entry.target); + if (animation) { + animation.play(); + ob.unobserve(entry.target); + } + } + } + }); + return ( + <> + {list.map((item, index) => { + return ; + })} + + ); +}; + +export default Index; diff --git a/src/pages/demo/website/slideInItem.tsx b/src/pages/demo/website/slideInItem.tsx new file mode 100644 index 0000000..6b82e92 --- /dev/null +++ b/src/pages/demo/website/slideInItem.tsx @@ -0,0 +1,64 @@ +import React, { useEffect, useRef } from "react"; +import styles from "../index.less"; + +interface OwnProps { + item: any; + ob: any; + map: any; +} + +type Props = OwnProps; +const SLIDE_FADE_DISTANCE = 50; +const SLIDE_FADE_DURATION = 1000; + +const isBelowViewport = (el: HTMLDivElement) => { + const rect = el.getBoundingClientRect(); + return rect.top - SLIDE_FADE_DISTANCE > window.innerHeight; +}; +const slideInItem: React.FC = (props) => { + const { item, ob, map } = props; + const itemRef = useRef(null); + + useEffect(() => { + if (itemRef.current && ob) { + if (!isBelowViewport(itemRef.current)) { + return; + } + const animation = itemRef.current.animate( + [ + { + transform: `translateY(${SLIDE_FADE_DISTANCE}px)`, + opacity: 0.1 + }, + { + transform: `translateY(0)`, + opacity: 1 + } + ], + { + duration: SLIDE_FADE_DURATION, + easing: "ease-in-out", + fill: "forwards" // 当动画完成后，保留最后一个关键帧的样式 + } + ); + animation.pause(); + map.set(itemRef.current, animation); + ob.observe(itemRef.current); + } + + return () => { + ob.unobserve(itemRef.current); + }; + }, [itemRef.current]); + + return ( +
+

The most popular component library

+ +
for Tailwind CSS
+

daisyUI adds component class names to Tailwind CSS so you can make beautiful websites faster than ever.

+
+ ); +}; + +export default slideInItem; diff --git a/src/pages/unitTable/renderColsOpts.tsx b/src/pages/unitTable/renderColsOpts.tsx index 16761d4..c38e0ee 100644 --- a/src/pages/unitTable/renderColsOpts.tsx +++ b/src/pages/unitTable/renderColsOpts.tsx @@ -442,41 +442,49 @@ export function renderCols(initialState: any[], type: string, i18n?: AnyObject, case "operate": col = { ...col, - width: 176, - fixed: "right" // render: (__: string, record: any) => { - // let items: MenuProps["items"] = [ - // { - // key: "DeleteList", - // label: i18n?.["删除"], - // onClick: () => postMessageToParent("DEL", record) - // }, - // { - // key: "Log", - // label: i18n?.["操作日志"], - // onClick: () => postMessageToParent("log", record) - // } - // ]; - // isSpecial && items.shift(); - // return ( - // - // - // {isSpecial ? ( - // - // ) : ( - // - // )} - // - // + ))} + + ); + } + }; + break; + default: + col = { ...col }; + break; + } + return col; + }) + ]; + } else if (type === "declare") { + return [ + ..._.map(initialState, (g) => { + let col = { ...g, ellipsis: true }; + switch (g.dataIndex) { + case "operate": + col = { + ...col, + ellipsis: false, + width: 120, + render: (__: string, record: any) => { + return ( + + {_.map(col?.operateType, (o) => ( + + ))} + + ); + } }; break; default: