forked from Gitlink/forgeplus-react
98 lines
4.0 KiB
JavaScript
98 lines
4.0 KiB
JavaScript
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}
|
||
disabled={!isAdminOrCreator}
|
||
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 className="color-grey-6"
|
||
onClick={() => trigger('groupAdd')}
|
||
>新建分班</a>
|
||
</p>
|
||
</ul>
|
||
)
|
||
}
|
||
export default CourseGroupChooser |