rtgk-screen-web/components/screen/TimerShaft/index.js

import React, { useRef, useEffect, useState } from 'react'

const TimeShaft = React.forwardRef((props, ref) => {
  const sizeRef = useRef();
  const timeShaftRef = useRef();
  const timeShaftContentRef = useRef();
  const [move, setTranslateY] = useState(false);
  const { data = [], time = "time", type = "type", name = "name", detail = "detail" } = props
  //获取组件高度
  const tableSetting = () => {
    //组件实际高度
    let comHeight = timeShaftRef.current.clientHeight;
    let contentHeight = timeShaftContentRef.current.clientHeight;
    let slate = comHeight < contentHeight;

    setTranslateY(slate)
  }

  useEffect(() => {
    //监听父级宽度变化
    let innerWindow = sizeRef.current.contentDocument.defaultView;
    innerWindow.addEventListener("resize", tableSetting);
    tableSetting();
    return () => {
      innerWindow.removeEventListener("resize", tableSetting);
    }
  }, [])

  return (
    <div ref={timeShaftRef} className="screen-time-shaft">
      <object
        ref={sizeRef}
        tabIndex="-1"
        type="text/html"
        aria-hidden="true"
        data="about:blank"
        style={{
          display: "block",
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          border: "none",
          padding: 0,
          margin: 0,
          opacity: 0,
          zIndex: -1000,
          pointerEvents: "none",
        }} />
      <div ref={timeShaftContentRef} className={move ? "screen-time-shaft-content move" : "screen-time-shaft-content"}>
        {
          data.map((item, index) => {
            return (<div className="screen-time-shaft-item" key={index}>
              <div className={`${(item[type] === 'm' && item[time] <= 10) ? 'screen-time-shaft-time-before' : ''} screen-time-shaft-time`}>{`${item[time]}${item[type] === 'm' ? '分钟' : '小时'}前`}</div>
              <div className="screen-time-shaft-axle">
                <div className="screen-time-shaft-dot"></div>
                <div className="screen-time-shaft-line"></div>
              </div>
              <div className="screen-time-shaft-name">【{item[name]}】</div>
              <div className="screen-time-shaft-detail">{item[detail]}</div>
            </div>)
          })
        }
      </div>
      <style jsx>{`
        .screen-time-shaft{
          height: 100%;
          width: 100%;
          overflow: hidden;
        }
        @keyframes move {
          0% ,10% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(-100%);
          }
        }
        .screen-time-shaft-content.move{
          animation: 20s move linear infinite;
        }
        .screen-time-shaft-item{
          width: 100%;
          line-height: 34px;
          display: flex;
        }
        .screen-time-shaft-time{
          width: 68px;
          height: 24px;
          line-height: 24px;
          margin-top: 5px;
          margin-right: 5px;
          text-align: center;
          background: #0072EE;
          border-radius: 2px;
          color: #FFFFFF;
          padding: 0 5px;
          white-space: nowrap;
        }
        .screen-time-shaft-time-before{
          background: #F5A623;
        }
        .screen-time-shaft-axle{
          width: 5px;
          padding: 0 4px;
          display: flex;
          flex-direction: column;
          align-items: center;
          transform: translateY(16px);
        }
        .screen-time-shaft-dot{
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #0072EE;
        }
        .screen-time-shaft-line{
          height: 100%;
          width: 1px;
          background: #0072EE;
        }
        .screen-time-shaft-name{
          width: 198px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #28A3FF;
        }
        .screen-time-shaft-detail{
          width: calc( 100% - 268px);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      `}</style>
    </div>
  )
})

export default TimeShaft;