All files / app/ui/form MultiCheckboxControl.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
110x
 
110x
 
110x
 
 
 
 
 
 
 
110x
1x
1x
1x
 
1x
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110x
 
import React, { memo, useCallback, FunctionComponent, MouseEvent } from 'react';
 
import { TranslatedString } from '../../locale';
 
import './MultiCheckboxControl.scss';
 
export interface MultiCheckboxControlProps {
    testId?: string;
    onSelectedAll(): void;
    onSelectedNone(): void;
}
 
const MultiCheckboxControl: FunctionComponent<MultiCheckboxControlProps> = ({
    testId,
    onSelectedAll,
    onSelectedNone,
}) => {
    const handleSelectAllClick = useCallback((event: MouseEvent) => {
        event.preventDefault();
        onSelectedAll();
    }, [onSelectedAll]);
 
    const handleSelectNoneClick = useCallback((event: MouseEvent) => {
        event.preventDefault();
        onSelectedNone();
    }, [onSelectedNone]);
 
    return <ul className="multiCheckbox--controls">
        <li className="multiCheckbox--control">
            <TranslatedString id="address.select" />
        </li>
 
        <li className="multiCheckbox--control">
            <a
                data-test={ `${testId}Checkbox-all-button` }
                href="#"
                onClick={ handleSelectAllClick }
            >
                <TranslatedString id="address.select_all" />
            </a>
        </li>
 
        <li className="multiCheckbox--control">
            <a
                data-test={ `${testId}Checkbox-none-button` }
                href="#"
                onClick={ handleSelectNoneClick }
            >
                <TranslatedString id="address.select_none" />
            </a>
        </li>
    </ul>;
};
 
export default memo(MultiCheckboxControl);