1
- import React , { ChangeEvent , ReactNode , RefObject , useEffect , useRef , useState } from "react" ;
2
- import { Col , ColProps , RowProps , Input , Label , Offcanvas , OffcanvasBody , OffcanvasHeader , Row } from "reactstrap" ;
1
+ import React , { ChangeEvent , RefObject , useEffect , useRef , useState } from "react" ;
2
+ import { Col , ColProps , RowProps , Input , Offcanvas , OffcanvasBody , OffcanvasHeader , Row } from "reactstrap" ;
3
3
import partition from "lodash/partition" ;
4
4
import classNames from "classnames" ;
5
5
import { AssignmentDTO , ContentSummaryDTO , IsaacConceptPageDTO , QuestionDTO } from "../../../../IsaacApiTypes" ;
@@ -13,6 +13,7 @@ import { getHumanContext } from "../../../services/pageContext";
13
13
import { AssignmentState } from "../../pages/MyAssignments" ;
14
14
import { ShowLoadingQuery } from "../../handlers/ShowLoadingQuery" ;
15
15
import { Spacer } from "../Spacer" ;
16
+ import { StyledTabPicker } from "../inputs/StyledTabPicker" ;
16
17
17
18
export const SidebarLayout = ( props : RowProps ) => {
18
19
const { className, ...rest } = props ;
@@ -179,23 +180,7 @@ export const ConceptSidebar = (props: QuestionSidebarProps) => {
179
180
return < QuestionSidebar { ...props } /> ;
180
181
} ;
181
182
182
- interface FilterCheckboxBaseProps extends React . HTMLAttributes < HTMLLabelElement > {
183
- id : string ;
184
- checked ?: boolean ;
185
- onInputChange ?: React . ChangeEventHandler < HTMLInputElement > | undefined ;
186
- filterTitle : ReactNode ;
187
- conceptFilters ?: Tag [ ] ;
188
- count ?: number ;
189
- }
190
183
191
- const FilterCheckboxBase = ( props : FilterCheckboxBaseProps ) => {
192
- const { id, checked, onInputChange, filterTitle, count, ...rest } = props ;
193
- return < Label { ...rest } className = "d-flex align-items-center filters-checkbox py-2 mb-1" >
194
- < Input id = { `problem-search-${ id } ` } type = "checkbox" checked = { checked ?? false } onChange = { onInputChange } />
195
- < span className = "ms-3" > { filterTitle } </ span >
196
- { isDefined ( count ) && < span className = "badge rounded-pill ms-2" > { count } </ span > }
197
- </ Label > ;
198
- } ;
199
184
200
185
interface FilterCheckboxProps extends React . HTMLAttributes < HTMLLabelElement > {
201
186
tag : Tag ;
@@ -212,17 +197,17 @@ const FilterCheckbox = (props : FilterCheckboxProps) => {
212
197
setChecked ( conceptFilters . includes ( tag ) ) ;
213
198
} , [ conceptFilters , tag ] ) ;
214
199
215
- return < FilterCheckboxBase { ...rest } id = { tag . id } checked = { checked }
200
+ return < StyledTabPicker { ...rest } id = { tag . id } checked = { checked }
216
201
onInputChange = { ( e : ChangeEvent < HTMLInputElement > ) => setConceptFilters ( f => e . target . checked ? [ ...f , tag ] : f . filter ( c => c !== tag ) ) }
217
- filterTitle = { tag . title } count = { tagCounts && isDefined ( tagCounts [ tag . id ] ) ? tagCounts [ tag . id ] : undefined }
202
+ checkboxTitle = { tag . title } count = { tagCounts && isDefined ( tagCounts [ tag . id ] ) ? tagCounts [ tag . id ] : undefined }
218
203
/> ;
219
204
} ;
220
205
221
206
const AllFiltersCheckbox = ( props : Omit < FilterCheckboxProps , "tag" > ) => {
222
207
const { conceptFilters, setConceptFilters, tagCounts, ...rest } = props ;
223
208
const [ previousFilters , setPreviousFilters ] = useState < Tag [ ] > ( [ ] ) ;
224
- return < FilterCheckboxBase { ...rest }
225
- id = "all" checked = { ! conceptFilters . length } filterTitle = "All" count = { tagCounts && Object . values ( tagCounts ) . reduce ( ( a , b ) => a + b , 0 ) }
209
+ return < StyledTabPicker { ...rest }
210
+ id = "all" checked = { ! conceptFilters . length } checkboxTitle = "All" count = { tagCounts && Object . values ( tagCounts ) . reduce ( ( a , b ) => a + b , 0 ) }
226
211
onInputChange = { ( e ) => {
227
212
if ( e . target . checked ) {
228
213
setPreviousFilters ( conceptFilters ) ;
@@ -312,8 +297,8 @@ interface AssignmentStatusCheckboxProps extends React.HTMLAttributes<HTMLLabelEl
312
297
313
298
const AssignmentStatusCheckbox = ( props : AssignmentStatusCheckboxProps ) => {
314
299
const { status, statusFilter, setStatusFilter, count, ...rest } = props ;
315
- return < FilterCheckboxBase
316
- id = { status ?? "" } filterTitle = { status }
300
+ return < StyledTabPicker
301
+ id = { status ?? "" } checkboxTitle = { status }
317
302
onInputChange = { ( ) => ! statusFilter . includes ( status ) ? setStatusFilter ( c => [ ...c . filter ( s => s !== AssignmentState . ALL ) , status ] ) : setStatusFilter ( c => c . filter ( s => s !== status ) ) }
318
303
checked = { statusFilter . includes ( status ) }
319
304
count = { count } { ...rest }
@@ -323,8 +308,8 @@ const AssignmentStatusCheckbox = (props: AssignmentStatusCheckboxProps) => {
323
308
const AssignmentStatusAllCheckbox = ( props : Omit < AssignmentStatusCheckboxProps , "status" > ) => {
324
309
const { statusFilter, setStatusFilter, count, ...rest } = props ;
325
310
const [ previousFilters , setPreviousFilters ] = useState < AssignmentState [ ] > ( [ ] ) ;
326
- return < FilterCheckboxBase
327
- id = "all" filterTitle = "All"
311
+ return < StyledTabPicker
312
+ id = "all" checkboxTitle = "All"
328
313
onInputChange = { ( e ) => {
329
314
if ( e . target . checked ) {
330
315
setPreviousFilters ( statusFilter ) ;
@@ -505,4 +490,4 @@ export const MyAccountSidebar = (props: SidebarProps) => {
505
490
return < ContentSidebar buttonTitle = "Account settings" { ...props } >
506
491
{ props . children }
507
492
</ ContentSidebar > ;
508
- } ;
493
+ } ;
0 commit comments