feat: Home components

src/Home/Banner.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { isImg } from './utils';
+import { Link } from 'react-router-dom';
+import { BannerProps } from '../types';
+
+
+const Banner: React.FC<BannerProps> = ({ dataSource }: BannerProps) => {
+  return (
+    <div {...dataSource.wrapper}>
+      <QueueAnim
+        key="QueueAnim"
+        type={['bottom', 'top']}
+        delay={200}
+        {...dataSource.textWrapper}
+      >
+        <div key="title" {...dataSource.title}>
+          {typeof dataSource.title.children === 'string' &&
+            dataSource.title.children.match(isImg) ? (
+            <img src={dataSource.title.children} width="100%" alt="img" />
+          ) : (
+            dataSource.title.children
+          )}
+        </div>
+        <div key="content" {...dataSource.content}>
+          {dataSource.content.children}
+        </div>
+        <Link to={"/Service"}>
+          <Button ghost key="button" {...dataSource.button}>
+            {dataSource.button.children}
+          </Button>
+        </Link>
+      </QueueAnim>
+      <TweenOne
+        animation={{
+          y: "-=20",
+          yoyo: true,
+          repeat: -1,
+          duration: 1000,
+        }}
+        className="banner0-icon"
+        key="icon"
+      >
+        <DownOutlined />
+      </TweenOne>
+    </div>
+  );
+};
+
+export default Banner;

src/Home/Content0.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import QueueAnim from 'rc-queue-anim';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { getChildrenToRender } from './utils';
+import { BannerProps } from '../types';
+
+const Content: React.FC<BannerProps> = ({ dataSource, isMobile }: BannerProps) => {
+  const {
+    wrapper,
+    titleWrapper,
+    page,
+    OverPack: overPackData,
+    childWrapper,
+  } = dataSource;
+
+  return (
+    <div {...wrapper}>
+      <div {...page}>
+        <div {...titleWrapper}>
+          {titleWrapper.children.map(getChildrenToRender)}
+        </div>
+        <OverPack {...overPackData}>
+          <QueueAnim
+            type="bottom"
+            key="block"
+            leaveReverse
+            componentProps={childWrapper}
+          >
+            {childWrapper.children.map((block: any, i: number) => {
+              const { children: item, ...blockProps } = block;
+              return (
+                <Col key={i.toString()} {...blockProps}>
+                  <div {...item}>
+                    {item.children.map(getChildrenToRender)}
+                  </div>
+                </Col>
+              );
+            })}
+          </QueueAnim>
+        </OverPack>
+      </div>
+    </div>
+  );
+};
+
+export default Content;

src/Home/Content11.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Button } from 'antd';
+import { getChildrenToRender } from './utils';
+import { BannerProps } from '../types';
+
+const Content11: React.FC<BannerProps> = ({ dataSource, ...props }) => {
+
+  const [dataSource1, setDataSource] = useState(dataSource);
+
+  useEffect(() => {
+    setDataSource(dataSource);
+  }, [dataSource]);
+
+  return (
+    <OverPack {...props} {...dataSource1.OverPack}>
+      <QueueAnim
+        type="bottom"
+        leaveReverse
+        key="page"
+        delay={[0, 100]}
+        {...dataSource1.titleWrapper}
+      >
+        {dataSource1.titleWrapper.children.map(getChildrenToRender)}
+      </QueueAnim>
+      <TweenOne
+        key="button"
+        style={{ textAlign: 'center' }}
+        {...dataSource1.button}
+        animation={
+          [
+            { x: 0, y: "+=30", duration: 200, type: 'from', opacity: 0 },
+            { x: 0, y: 0, opacity: 1 },
+          ]
+        }
+      >
+        <Button {...dataSource1.button.children.a}>
+          {dataSource1.button.children.a.children}
+        </Button>
+      </TweenOne>
+    </OverPack>
+  );
+};
+
+export default Content11;

src/Home/Content3.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { getChildrenToRender, getDelay } from './utils';
+import { BannerProps } from '../types';
+
+const Content3: React.FC<BannerProps> = ({ dataSource, isMobile }) => {
+  const [clearFloatNum, setClearFloatNum] = useState(0);
+
+  useEffect(() => {
+    setClearFloatNum(0);
+  }, [dataSource]);
+
+  const blockChildren = dataSource.block.children;
+  const children = blockChildren.map((item: any, i: number) => {
+    const childObj = item.children;
+    const delay = isMobile ? i * 50 : getDelay(i, 24 / item.md);
+    const newClearFloatNum = (clearFloatNum + item.md) % 24;
+
+    const colClassName = !newClearFloatNum
+      ? `${item.className || ''} clear-both`.trim()
+      : item.className;
+
+    return (
+      <TweenOne
+        component={Col}
+        animation={[
+          { x: 0, y: "+=30", duration: 200, type: 'from', opacity: 0, delay: delay },
+          { x: 0, y: 0, opacity: 1 },
+        ]}
+        key={item.name}
+        {...item}
+        componentProps={{ md: item.md, xs: item.xs }}
+        className={colClassName}
+      >
+        <TweenOne
+          animation={[
+            { x: 0, y: "+=30", duration: 200, type: 'from', opacity: 0, delay: delay },
+            { x: 0, y: 0, opacity: 1 },
+          ]}
+          key="img"
+          {...childObj.icon}
+        >
+          <img src={childObj.icon.children} width="100%" alt="img" />
+        </TweenOne>
+        <div {...childObj.textWrapper}>
+          <TweenOne
+            key="h2"
+            animation={[
+              { x: 0, y: "+=30", duration: 200, type: 'from', opacity: 0, delay: delay },
+              { x: 0, y: 0, opacity: 1 },
+            ]}
+            component="h2"
+            {...childObj.title}
+          >
+            {childObj.title.children}
+          </TweenOne>
+          <TweenOne
+            key="p"
+            animation={[
+              { x: 0, y: "+=30", duration: 200, type: 'from', opacity: 0, delay: 400 },
+              { x: 0, y: 0, opacity: 1 },
+            ]}
+            component="div"
+            {...childObj.content}
+          >
+            {childObj.content.children}
+          </TweenOne>
+        </div>
+      </TweenOne>
+    );
+  });
+
+  return (
+    <div {...dataSource.wrapper}>
+      <div {...dataSource.page}>
+        <div {...dataSource.titleWrapper}>
+          {dataSource.titleWrapper.children.map(getChildrenToRender)}
+        </div>
+        <OverPack {...dataSource.OverPack}>
+          <QueueAnim key="u" type="bottom">
+            <Row key="row" {...dataSource.block}>
+              {children}
+            </Row>
+          </QueueAnim>
+        </OverPack>
+      </div>
+    </div>
+  );
+};
+
+export default Content3;

src/Home/Feature1.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import QueueAnim, { IQueueType } from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { BannerProps } from '../types';
+
+const Content1: React.FC<BannerProps> = ({ dataSource, isMobile }) => {
+  const animType = React.useMemo(() => {
+    return {
+      queue: isMobile ? 'bottom' : 'right',
+      one: isMobile
+        ? {
+          scaleY: '+=0.3',
+          opacity: 0,
+          type: 'from',
+          ease: 'easeOutQuad',
+        }
+        : [
+          { x: "-=30", y: 0, duration: 200, type: 'from', opacity: 0 },
+          { x: 0, y: 0, opacity: 1 },
+        ],
+    };
+  }, [isMobile]);
+
+  return (
+    <div {...dataSource.wrapper}>
+      <OverPack {...dataSource.OverPack} component={Row as any}>
+        <TweenOne
+          key="img"
+          // animation={animType.one }
+          resetStyle
+          {...dataSource.imgWrapper}
+          component={Col}
+          componentProps={{
+            md: dataSource.imgWrapper.md,
+            xs: dataSource.imgWrapper.xs,
+          }}
+        >
+          <span>
+            <img src={dataSource.img} width="100%" alt="img" />
+          </span>
+        </TweenOne>
+        <QueueAnim
+          data-testid="anim"
+          key="text"
+          type={animType.queue as IQueueType}
+          leaveReverse
+          ease={['easeOutQuad', 'easeInQuad']}
+          {...dataSource.textWrapper}
+          component={Col as any}
+          componentProps={{
+            md: dataSource.textWrapper.md,
+            xs: dataSource.textWrapper.xs,
+          }}
+        >
+          <h2 key="h1" {...dataSource.title}>
+            {dataSource.title.children}
+          </h2>
+          <div key="p" {...dataSource.content}>
+            {dataSource.content.children}
+          </div>
+        </QueueAnim>
+      </OverPack>
+    </div>
+  );
+};
+
+export default Content1;