|
|
import React, { useState, useEffect } from 'react'
|
|
|
import { trigger } from 'educoder'
|
|
|
import { Input, Checkbox } from "antd";
|
|
|
|
|
|
/**
|
|
|
arg_course_groups 选中的id数组
|
|
|
joinCourseGroup 选中时触发 joinCourseGroup(checkedValues, item, index) 传入item：数据对象，index： 数据对象index
|
|
|
checkAllValue 是否全选
|
|
|
onCheckAllChange 全选 onCheckAllChange(e, item, index)
|
|
|
course_groups 所有的group
|
|
|
|
|
|
*/
|
|
|
function CourseGroupChooser({ course_groups, isAdminOrCreator = true, item, index, arg_course_groups, checkAllValue, alwaysShow
|
|
|
, onCheckAllChange, joinCourseGroup }) {
|
|
|
const [state, setState] = useState({counter: 0})
|
|
|
const [search, setSearch] = useState('')
|
|
|
// useEffect(() => {
|
|
|
// console.log(' cdm')
|
|
|
// return () => {
|
|
|
// console.log(' cwum')
|
|
|
// };
|
|
|
// // , [state.counter] 加了这个后，onClick就消失了 加错位置了？
|
|
|
// }, [state.counter] )
|
|
|
// TODO 为什么每次onClick都会执行 cwum
|
|
|
|
|
|
// const add1ToCounter = () => {
|
|
|
// const newCounterValue = state.counter + 1
|
|
|
// setState({ counter: newCounterValue })
|
|
|
// }
|
|
|
|
|
|
/**
|
|
|
that.state.groupSearchValue
|
|
|
that.setState({groupSearchValue: e.target.value})
|
|
|
|
|
|
that.onCheckAllChange(e, item, index) - onCheckAllChange(e, item, index)
|
|
|
that.joinCourseGroup(checkedValues, item, index) - joinCourseGroup(checkedValues, item, index)
|
|
|
|
|
|
that.state.checkAllArray[index] - checkAllValue
|
|
|
*/
|
|
|
|
|
|
console.log('arg_course_groups', arg_course_groups)
|
|
|
|
|
|
|
|
|
const urlStyle = {"left":"unset", minWidth: '262px'};
|
|
|
if (alwaysShow == true) {
|
|
|
urlStyle.display = 'block'
|
|
|
}
|
|
|
return (
|
|
|
<ul className="drop_down_menu" style={urlStyle}>
|
|
|
{
|
|
|
course_groups && course_groups.length > 10?
|
|
|
(<p className="drop_down_search">
|
|
|
<Input placeholder="搜索" value={search} onChange={(e) => {setSearch(e.target.value)}} allowClear/>
|
|
|
</p>):
|
|
|
''
|
|
|
}
|
|
|
|
|
|
<Checkbox.Group onChange={(checkedValues) => joinCourseGroup(checkedValues, item, index)}
|
|
|
value={arg_course_groups.length && arg_course_groups[0].id ? arg_course_groups.map(item => item.id): arg_course_groups}
|
|
|
disabled={!isAdminOrCreator} className="mainGroup"
|
|
|
>
|
|
|
{course_groups && course_groups.length > 1 && <li key={'_all' + index} >
|
|
|
{/* 防止被外面group包裹 */}
|
|
|
<Checkbox.Group onChange={(e) => onCheckAllChange(e, item, index)} value={[checkAllValue]}>
|
|
|
<Checkbox
|
|
|
value={true}
|
|
|
style={{ marginRight: '6px' }} onClick={() => {}}
|
|
|
>全选</Checkbox>
|
|
|
</Checkbox.Group>
|
|
|
</li>}
|
|
|
{
|
|
|
course_groups && course_groups.filter((item) => {
|
|
|
return (!search || item.name.indexOf(search) != -1)
|
|
|
}).map((item,key)=>{
|
|
|
return(
|
|
|
<li key={item.id} value={item.id} >
|
|
|
<Checkbox value={item.id}
|
|
|
key={item.id}
|
|
|
id={`check${item.id}`}
|
|
|
style={{ marginRight: '6px' }}
|
|
|
></Checkbox>
|
|
|
<label for={`check${item.id}`}>{item.name}</label>
|
|
|
</li>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
</Checkbox.Group>
|
|
|
<p className="drop_down_btn">
|
|
|
<a href="javascript:void(0)" className="color-grey-6"
|
|
|
onClick={() => trigger('groupAdd')}
|
|
|
>添加分班</a>
|
|
|
</p>
|
|
|
</ul>
|
|
|
)
|
|
|
}
|
|
|
export default CourseGroupChooser |
