Chengzhebei/src/pages/A6ybwx/Genealogy/components/Utils/index.tsx

import React from 'react'
import styles from './index.module.scss'

interface dataType {
  name: string
  customN?: string
  type: string
  addTxt: { time: string; pos: string; backEnd: string }
  extra: string
  position: {
    x: number
    y: number
  }
  text: {
    title: string
    content: string
  }[]
}

interface nodeProps {
  type?: string
  className?: string
  nameClick?: () => void
  style?: React.CSSProperties
  data: dataType
}

const RightLine = () => {
  return (
    <div className={`${styles.rightLine}`} id='rightLine'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const RightLineDash = ({ className }: { className?: string }) => {
  return (
    <div className={`${styles.rightLineDash} ${className}`} id='rightLineDash'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const BottomLine = () => {
  return (
    <div className={styles.bottomLine} id='bottomLine'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const BottomLineDash = () => {
  return (
    <div className={styles.bottomLineDash} id='bottomLineDash'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const TurnRightLine = () => {
  return (
    <div className={styles.turnRightLine} id='turnRightLine'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const TurnBottomRightLine = () => {
  return (
    <div className={styles.turnBottomRightLine} id='turnBottomRightLine'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const TurnBottomRightLineDash = () => {
  return (
    <div className={styles.turnBottomRightLineDash} id='turnBottomRightLineDash'>
      <div className='line'></div>
      <div className='arrow'></div>
    </div>
  )
}

const NodeNormal = ({ className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeNormal} ${className}`} style={style} id='nodeNormal'>
      <div
        className='bg'
        onClick={e => {
          nameClick?.()
          console.log(123)
        }}
      >
        <div className='span1 songFont'> {data.name}</div>
        <div className='span2'>{data.customN}</div>
      </div>
      <div className='time'>{data.addTxt.time}</div>
      <div className='txt'>{data.addTxt.pos}</div>
      <div className='extra'>{data.extra}</div>
    </div>
  )
}
const NodeActive = ({ className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeActive} ${className}`} style={style} id='nodeActive'>
      <div
        className='bg'
        onClick={e => {
          e.stopPropagation()
          nameClick?.()
        }}
      >
        <div className='span1 songFont'> {data.name}</div>
        <div className='span2'>{data.customN}</div>
      </div>
      <div className='time'>{data.addTxt.time}</div>
      <div className='txt'>{data.addTxt.pos}</div>
      <div className='extra'>{data.extra}</div>
    </div>
  )
}
const NodeFalse = ({ className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeFalse} ${className}`} style={style} id='nodeFalse'>
      <div
        className='bg'
        onClick={e => {
          e.stopPropagation()
          nameClick?.()
        }}
      >
        <div className='span1 songFont'> {data.name}</div>
        <div className='span2'>{data.customN}</div>
      </div>
      <div className='time'>{data.addTxt.time}</div>
      <div className='txt'>{data.addTxt.pos}</div>
      <div className='extra'>{data.extra}</div>
    </div>
  )
}

const NodeRight = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeRight} ${className}`} id='nodeRight' style={style}>
      <RightLine />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

const NodeRightDash = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeRightDash} ${className}`} id='nodeRightDash' style={style}>
      <RightLineDash />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

const NodeBottom = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeBottom} ${className}`} id='nodeBottom' style={style}>
      <BottomLine />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

const NodeBottomDash = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeBottomDash} ${className}`} id='nodeBottomDash' style={style}>
      <BottomLineDash />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

const NodeTurnRight = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div className={`${styles.nodeTurnRight} ${className}`} id='nodeTurnRight' style={style}>
      <TurnRightLine />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

const NodeTurnBottomRight = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div
      className={`${styles.nodeTurnBottomRight} ${className}`}
      id='nodeTurnBottomRight'
      style={style}
    >
      <TurnBottomRightLine />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

const NodeTurnBottomDashRight = ({ type, className, nameClick, style, data }: nodeProps) => {
  return (
    <div
      className={`${styles.nodeTurnBottomDashRight} ${className}`}
      id='nodeTurnBottomDashRight'
      style={style}
    >
      <TurnBottomRightLineDash />
      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
    </div>
  )
}

export {
  NodeRightDash,
  NodeTurnBottomRight,
  NodeTurnBottomDashRight,
  NodeTurnRight,
  NodeRight,
  NodeBottom,
  NodeBottomDash,
  RightLine,
  RightLineDash,
  BottomLine,
  BottomLineDash,
  TurnRightLine,
  NodeNormal,
  NodeActive,
  NodeFalse
}