Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 1x 16x 3x 3x 3x 3x 16x 16x 16x 1x 1x | /**
* Copyright (c) Nicolas Gallagher.
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type { ColorValue } from '../../types';
import type { ViewProps } from '../View';
import * as React from 'react';
import createElement from '../createElement';
import StyleSheet from '../StyleSheet';
import View from '../View';
type CheckBoxProps = {
...ViewProps,
color?: ?ColorValue,
disabled?: boolean,
onChange?: ?(e: any) => void,
onValueChange?: ?(e: any) => void,
value?: boolean
};
const CheckBox: React.AbstractComponent<
CheckBoxProps,
React.ElementRef<typeof View>
> = React.forwardRef((props, forwardedRef) => {
const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
function handleChange(event: Object) {
const value = event.nativeEvent.target.checked;
event.nativeEvent.value = value;
onChange && onChange(event);
onValueChange && onValueChange(value);
}
const fakeControl = (
<View
style={[
styles.fakeControl,
value && styles.fakeControlChecked,
// custom color
value && color && { backgroundColor: color, borderColor: color },
disabled && styles.fakeControlDisabled,
value && disabled && styles.fakeControlCheckedAndDisabled
]}
/>
);
const nativeControl = createElement('input', {
checked: value,
disabled: disabled,
onChange: handleChange,
ref: forwardedRef,
style: [styles.nativeControl, styles.cursorInherit],
type: 'checkbox'
});
return (
<View
{...other}
accessibilityDisabled={disabled}
style={[styles.root, style, disabled && styles.cursorDefault]}
>
{fakeControl}
{nativeControl}
</View>
);
});
CheckBox.displayName = 'CheckBox';
const styles = StyleSheet.create({
root: {
cursor: 'pointer',
height: 16,
userSelect: 'none',
width: 16
},
cursorDefault: {
cursor: 'default'
},
cursorInherit: {
cursor: 'inherit'
},
fakeControl: {
alignItems: 'center',
backgroundColor: '#fff',
borderColor: '#657786',
borderRadius: 2,
borderStyle: 'solid',
borderWidth: 2,
height: '100%',
justifyContent: 'center',
width: '100%'
},
fakeControlChecked: {
backgroundColor: '#009688',
backgroundImage:
'url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")',
backgroundRepeat: 'no-repeat',
borderColor: '#009688'
},
fakeControlDisabled: {
borderColor: '#CCD6DD'
},
fakeControlCheckedAndDisabled: {
backgroundColor: '#AAB8C2',
borderColor: '#AAB8C2'
},
nativeControl: {
...StyleSheet.absoluteFillObject,
height: '100%',
margin: 0,
opacity: 0,
padding: 0,
width: '100%'
}
});
export default CheckBox;
|