1/**
2 * Copyright (c) Nicolas Gallagher.
3 * Copyright (c) Facebook, Inc. and its affiliates.
4 *
5 * This source code is licensed under the MIT license found in the
6 * LICENSE file in the root directory of this source tree.
7 *
8 * see: https://github.com/necolas/react-native-web
9 */
10import React from 'react';
11// @ts-ignore
12import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
13export default class ExpoCheckbox extends React.PureComponent {
14    handleChange = (event) => {
15        const value = event.nativeEvent.target.checked;
16        event.nativeEvent.value = value;
17        this.props.onChange?.(event);
18        this.props.onValueChange?.(value);
19    };
20    render() {
21        const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
22        const fakeControl = (React.createElement(View, { pointerEvents: "none", style: [
23                styles.fakeControl,
24                value && styles.fakeControlChecked,
25                // custom color
26                !!color && { backgroundColor: value ? color : undefined, borderColor: color },
27                disabled && styles.fakeControlDisabled,
28                value && disabled && styles.fakeControlCheckedAndDisabled,
29            ] }));
30        const nativeControl = createElement('input', {
31            accessibilityChecked: value,
32            accessibilityDisabled: disabled,
33            checked: value,
34            disabled,
35            onChange: this.handleChange,
36            style: [styles.nativeControl, styles.cursorInherit],
37            type: 'checkbox',
38        });
39        return (React.createElement(View, { ...other, style: [styles.root, style, disabled && styles.cursorDefault] },
40            nativeControl,
41            fakeControl));
42    }
43}
44const styles = StyleSheet.create({
45    root: {
46        // @ts-ignore
47        cursor: 'pointer',
48        height: 16,
49        userSelect: 'none',
50        width: 16,
51    },
52    cursorDefault: {
53        // @ts-ignore
54        cursor: 'default',
55    },
56    cursorInherit: {
57        // @ts-ignore
58        cursor: 'inherit',
59    },
60    fakeControl: {
61        ...StyleSheet.absoluteFillObject,
62        alignItems: 'center',
63        backgroundColor: '#fff',
64        borderColor: '#657786',
65        borderRadius: 2,
66        borderStyle: 'solid',
67        borderWidth: 2,
68        height: '100%',
69        justifyContent: 'center',
70        width: '100%',
71    },
72    fakeControlChecked: {
73        backgroundColor: '#009688',
74        // @ts-ignore
75        backgroundImage: 'url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")',
76        backgroundRepeat: 'no-repeat',
77        borderColor: '#009688',
78    },
79    fakeControlDisabled: {
80        borderColor: '#CCD6DD',
81    },
82    fakeControlCheckedAndDisabled: {
83        backgroundColor: '#AAB8C2',
84        borderColor: '#AAB8C2',
85    },
86    nativeControl: {
87        ...StyleSheet.absoluteFillObject,
88        height: '100%',
89        margin: 0,
90        padding: 0,
91        width: '100%',
92        // @ts-ignore
93        WebkitAppearance: 'none',
94    },
95});
96export const name = 'ExpoCheckbox';
97//# sourceMappingURL=ExpoCheckbox.web.js.map