react实现设置答题器选项个数

一，设置答题器选项
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'

import CloseButtonSmall from '../CloseButtonSmall'
import LargeButton from '../LargeButton'
import CancelButton from '../CancelButton'
import OptionSettings from '../OptionSettings'

import './index.less'

/**
 * 答题设置组件
 *
 * @param {*} props
 * @returns
 */
function AnswererSettings(props) {
  const { style, onConfirm, onClose } = props
  const wrapperStyle = _.assign({}, style)

  const [selectedCount, setSelectedCount] = useState(2)
  const [isShowLimitTip, setIsShowLimitTip] = useState(false)
  const minOptionCount = 2

  useEffect(() => {
    const tipTimeout = setTimeout(() => {
      setIsShowLimitTip(false)
    }, 3000)
    return () => {
      clearTimeout(tipTimeout)
    }
  }, [isShowLimitTip])

  const handleSelectOption = (optionCount) => {
    setSelectedCount(optionCount)
  }

  const handleSelectMinOption = (optionCount) => {
    setIsShowLimitTip(true)
    setSelectedCount(optionCount)
  }

  const handleConfirm = () => {
    onConfirm(selectedCount)
    onClose()
  }

  const handleCancel = () => {
    onClose()
  }

  return (
    

      

        

          

            
            

              
答题器
              
设置选项让学生实时参与答题
            
          
          
        
      
      

        

          
          

            
设定选项
          
          { isShowLimitTip
            ? (
              

                
                请至少保留两个选择选项
                <CloseButtonSmall
                  style={{
                    marginLeft: '20px',
                  }}
                  onClick={() => {
                    setIsShowLimitTip(false)
                  }}
                />
              
            )
            : ''}
        
        <OptionSettings
          style={{
            marginTop: '6px',
            marginRight: '23px',
          }}
          onSelectOption={handleSelectOption}
          onSelectMinOption={handleSelectMinOption}
          minOptionCount={minOptionCount}
        />
      
      

        

          <LargeButton
            text="确 定"
            className="btn-confirm"
            onClick={handleConfirm}
            style={{
              marginLeft: '29px',
            }}
          />
          <CancelButton
            text="取 消"
            className="btn-cancel"
            onClick={handleCancel}
            style={{
              marginLeft: '37px',
            }}
          />
        
      
    
  )
}

AnswererSettings.propTypes = {
  style: PropTypes.object,
  onConfirm: PropTypes.func.isRequired,
  onClose: PropTypes.func,
}

AnswererSettings.defaultProps = {
  style: {},
  onClose: _.noop,
}

export default AnswererSettings

import React, { useState, useRef } from 'react'
import PropTypes from 'prop-types'
import CX from 'classnames'
import _ from 'lodash'

import './index.less'

const optionItemImgs = [
  require('~/shared/assets/image/answerer-option-letter-a.svg'),
  require('~/shared/assets/image/answerer-option-letter-b.svg'),
  require('~/shared/assets/image/answerer-option-letter-c.svg'),
  require('~/shared/assets/image/answerer-option-letter-d.svg'),
  require('~/shared/assets/image/answerer-option-letter-e.svg'),
//   require('~/shared/assets/image/answerer-option-letter-f.svg'),
]

/**
 * 选项设置组件
 *
 * @param {*} props
 * @returns
 */
function OptionSettings(props) {
  const {
    style, onSelectOption, onSelectMinOption, minOptionCount,
  } = props
  const wrapperStyle = _.assign({}, style)

  const [selectedCount, setSelectedCount] = useState(2)
  const options = useRef(null)

  const handleClickItem = (e) => {
    const { target } = e
    if (target.classList.contains('last-selected')) {
      if (selectedCount !== minOptionCount) {
        setSelectedCount(selectedCount - 1)
        onSelectOption(selectedCount - 1)
      } else {
        onSelectMinOption(selectedCount)
      }
    } else if (target.classList.contains('first-non-selected')) {
      setSelectedCount(selectedCount + 1)
      onSelectOption(selectedCount + 1)
    }
  }

  const renderOptionItems = () => {
    return optionItemImgs.map((img, index) => {
      return (
        <div
          className={CX({
            item: true,
            selected: index < selectedCount,
            'last-selected': index === selectedCount - 1,
            'first-non-selected': index === selectedCount,
          })}
          key={img}
        >
          
          
          
        

) }) } return (

{renderOptionItems()}

) } OptionSettings.propTypes = { style: PropTypes.object, onSelectOption: PropTypes.func, onSelectMinOption: PropTypes.func, minOptionCount: PropTypes.number, } OptionSettings.defaultProps = { style: {}, onSelectOption: _.noop, onSelectMinOption: _.noop, minOptionCount: 2, } export default OptionSettings

效果如下：

 

二，展示答题器状态

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import CX from 'classnames'

import CloseButtonSmall from '../CloseButtonSmall'
import AnswererStatItem from '../AnswererStatItem'

import './index.less'

// 默认支持5个选项，名称、背景样式和进度条样式
const itemsOption = [
  {
    itemName: 'A',
    iconStyle: { backgroundImage: 'linear-gradient(135deg, #ff758c, #ffb867)' },
    processStyle: { backgroundImage: 'linear-gradient(273deg, #ff758c, #ffb867)' },
  },
  {
    itemName: 'B',
    iconStyle: { backgroundImage: 'linear-gradient(135deg, #ffb867, #fdde74)' },
    processStyle: { backgroundImage: 'linear-gradient(273deg, #ffb867, #fdde74)' },
  },
  {
    itemName: 'C',
    iconStyle: { backgroundImage: 'linear-gradient(135deg, #4cf27d, #6affcc)' },
    processStyle: { backgroundImage: 'linear-gradient(273deg, #4cf27d, #6affcc)' },
  },
  {
    itemName: 'D',
    iconStyle: { backgroundImage: 'linear-gradient(135deg, #63e4e4, #8affff)' },
    processStyle: { backgroundImage: 'linear-gradient(273deg, #63e4e4, #8affff)' },
  },
  {
    itemName: 'E',
    iconStyle: { backgroundImage: 'linear-gradient(135deg, #3977f6, #81d5fa)' },
    processStyle: { backgroundImage: 'linear-gradient(273deg, #3977f6, #81d5fa)' },
  },
]

/**
 * 答题结果展示组件
 * @param {onRestart} 重新开始
 * @param {onClose} 关闭
 * @param {itemNum} 选项的个数
 * @param {statData} 对象，{选项：次数}
 * @param {userCount} 投票人数
 */
function AnswererStat(props) {
  const {
    style, onRestart, onClose, itemNum, statData, userCount,
  } = props
  const wrapperStyle = _.assign({}, style)

  const [isRestarting, setIsRestarting] = useState(false)

  const renderItems = () => {
    return itemsOption.slice(0, itemNum).map((option, index) => {
      return (
        <AnswererStatItem
          style={{
            marginBottom: '12px',
          }}
          key={option.itemName}
          maxValue={userCount}
          value={statData[index]}
          {...option}
        />
      )
    })
  }
  return (
    

      

        <div
          className="restart"
          role="button"
          onClick={() => {
            setIsRestarting(!isRestarting)
            onRestart()
          }}
          tabIndex={0}
        >
          <img
            className={CX({
              'restart-icon': true,
              active: isRestarting,
            })}
            src={require('~/shared/assets/image/loading-icon-circle-50-50.svg')}
            alt=""
          />
          重新答题
        
        <CloseButtonSmall
          theme="dark"
          style={{
            backgroundColor: 'rgba(54, 65, 82, 0.4)',
            boxShadow: '0 2px 4px 0 rgba(51, 51, 51, 0.2)',
          }}
          onClick={onClose}
        />
      
      

        {renderItems()}
      
    

) } AnswererStat.propTypes = { style: PropTypes.object, itemNum: PropTypes.number.isRequired, userCount: PropTypes.number, statData: PropTypes.object.isRequired, onRestart: PropTypes.func, onClose: PropTypes.func, } AnswererStat.defaultProps = { style: {}, onClose: _.noop, onRestart: _.noop, userCount: 1, } export default AnswererStat

import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'

import './index.less'
/**
 * 答题选项组件
 *
 * @param {选项的名称} itemName
 * @param {名称所在区域的样式} iconStyle
 * @param {进度条的样式} processStyle
 * @param {当前值} value
 * @param {最大值} maxValue
 * @returns
 */
function AnswererStatItem(props) {
  const {
    style, itemName, iconStyle, processStyle, value, maxValue,
  } = props
  const wrapperStyle = _.assign({}, style)
  const wrapperIconStyle = _.assign({}, iconStyle)

  let dataPercentage // 数据计算出来的百分比
  if (maxValue === 0) {
    dataPercentage = 0
  } else {
    dataPercentage = value / maxValue
  }

  const textPercentage = Math.round(dataPercentage * 100) // 在进度条展示的百分比文本

  // 计算进度条样式相关的百分比
  // 根据可见长度的百分比换算符合可见长度比例的全部长度
  // 例，10%的区域被遮挡，此时若数据是50%，则需要填充整体宽度为 10%+50%*90%=55%
  const computeProcessBarOffset = () => {
    if (dataPercentage === 0) {
      return 0
    }
    const visibleLength = 0.9
    return ((dataPercentage * visibleLength + 1 - visibleLength) * 100).toFixed()
  }

  const wrapProcessStyle = _.assign({}, processStyle, { right: `${100 - computeProcessBarOffset()}%` })

  return (
    

      

        

          

            {itemName}
          
        
        

          

            

            

              
                {`${textPercentage}%`}
              
              { ' / ' }
              
                {`${value} 次`}
              
            
          
        
      
    
  )
}

AnswererStatItem.propTypes = {
  style: PropTypes.object,
  iconStyle: PropTypes.object,
  processStyle: PropTypes.object,
  itemName: PropTypes.string.isRequired,
  value: PropTypes.number,
  maxValue: PropTypes.number,
}

AnswererStatItem.defaultProps = {
  style: {},
  iconStyle: {},
  processStyle: {},
  value: 0,
  maxValue: 0,
}

export default AnswererStatItem

效果如下：

 

转载于:https://www.cnblogs.com/chenbeibei520/p/11460718.html