| 294 | } |
| 295 | |
| 296 | function ProblemSelectionDisplay(props) { // eslint-disable-line |
| 297 | const [pids, setPids] = React.useState<string[]>([]); |
| 298 | const [dialogOpen, setDialogOpen] = React.useState(false); |
| 299 | const [copyIdRef, setCopyIdRef] = React.useState(null); |
| 300 | const [copyPidRef, setCopyPidRef] = React.useState(null); |
| 301 | const problemSelectAutoCompleteRef = React.useRef(null); |
| 302 | |
| 303 | React.useEffect(() => { |
| 304 | props.onClear?.(() => { |
| 305 | setPids([]); |
| 306 | }); |
| 307 | }, [props.onClear]); |
| 308 | |
| 309 | React.useEffect(() => { |
| 310 | const cb = () => queueMicrotask(() => { |
| 311 | const all = getAllPids(); |
| 312 | const selected = getSelectedPids(); |
| 313 | setPids((o) => { |
| 314 | const ret = o.filter((i) => !all.includes(i) || selected.includes(i)); |
| 315 | for (const val of selected) if (!ret.includes(val)) ret.push(val); |
| 316 | return ret; |
| 317 | }); |
| 318 | }); |
| 319 | $(document).on('click', '[data-checkbox-group="problem"]', cb); |
| 320 | $(document).on('click', '[data-checkbox-toggle="problem"]', cb); |
| 321 | return () => { |
| 322 | $(document).off('click', '[data-checkbox-group="problem"]', cb); |
| 323 | $(document).off('click', '[data-checkbox-toggle="problem"]', cb); |
| 324 | }; |
| 325 | }, []); |
| 326 | React.useEffect(() => { |
| 327 | (window as any).__getPids = () => pids; |
| 328 | (window as any).__setPids = (newIds: string[]) => setPids(newIds); |
| 329 | }, [pids]); |
| 330 | React.useEffect(() => { |
| 331 | if (!copyIdRef) return; |
| 332 | const clip = new Clipboard(copyIdRef, { |
| 333 | text: () => problemSelectAutoCompleteRef.current.getSelectedItems().map((i) => i.docId).join(','), |
| 334 | }); |
| 335 | clip.on('success', () => { |
| 336 | Notification.success(i18n('Problem ids copied to clipboard!')); |
| 337 | }); |
| 338 | clip.on('error', () => { |
| 339 | Notification.error(i18n('Copy failed :(')); |
| 340 | }); |
| 341 | }, [copyIdRef]); |
| 342 | React.useEffect(() => { |
| 343 | if (!copyPidRef) return; |
| 344 | const clip = new Clipboard(copyPidRef, { |
| 345 | text: () => problemSelectAutoCompleteRef.current.getSelectedItems().map((i) => i.pid || i.docId).join(','), |
| 346 | }); |
| 347 | clip.on('success', () => { |
| 348 | Notification.success(i18n('Problem ids copied to clipboard!')); |
| 349 | }); |
| 350 | clip.on('error', () => { |
| 351 | Notification.error(i18n('Copy failed :(')); |
| 352 | }); |
| 353 | }, [copyPidRef]); |