feat(ui): checkbox component

src/framework/ui/checkbox/checkbox.component.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  TouchableOpacityProps,
+} from 'react-native';
+import {
+  StyledComponentProps,
+  StyleType,
+  Interaction,
+} from '@kitten/theme';
+import { CheckMark } from '@kitten/ui/drawable/checkmark/checkmark.component';
+
+interface CheckBoxProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  appearance?: string | 'default';
+  status?: string | 'error';
+  size?: string | 'big' | 'small';
+}
+
+export type Props = CheckBoxProps & StyledComponentProps & TouchableOpacityProps;
+
+export class CheckBox extends React.Component<Props> {
+
+  onPress = () => {
+    this.props.onChange && this.props.onChange(this.props.checked);
+  };
+
+  onPressIn = () => {
+    this.props.dispatch([Interaction.ACTIVE]);
+  };
+
+  onPressOut = () => {
+    this.props.dispatch([]);
+  };
+
+  // We don't use `check-mark` icon currently
+  // FIXME: Use icon
+
+  private getComponentStyle = (style: StyleType): StyleType => {
+    return ({
+      border: {
+        width: style.size,
+        height: style.size,
+        borderRadius: style.borderRadius,
+        borderWidth: style.borderWidth,
+        borderColor: style.borderColor,
+        backgroundColor: style.backgroundColor,
+      },
+      icon: {
+        width: style.size / 2,
+        height: style.size / 8,
+        backgroundColor: style.selectColor,
+      },
+      highlight: {
+        width: style.highlightSize,
+        height: style.highlightSize,
+        borderRadius: style.highlightBorderRadius,
+        backgroundColor: style.highlightColor,
+        opacity: style.highlightOpacity,
+      },
+    });
+  };
+
+  render() {
+    const componentStyle = this.getComponentStyle(this.props.themedStyle);
+    return (
+      <TouchableOpacity
+        {...this.props}
+        activeOpacity={1.0}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}>
+        <View style={styles.border}>
+          <View style={[styles.highlight, componentStyle.highlight]}/>
+          <View style={[styles.border, componentStyle.border]}>
+            <CheckMark style={componentStyle.icon}/>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  border: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  highlight: {
+    position: 'absolute',
+    alignSelf: 'center',
+  },
+});

src/framework/ui/checkbox/checkbox.spec.config.ts

@@ -0,0 +1,106 @@
+import { ThemeMappingType } from 'eva/packages/common';
+import { ThemeType } from '@kitten/theme';
+
+export const mapping: ThemeMappingType = {
+  CheckBox: {
+    meta: {
+      variants: {
+        status: [
+          'error',
+        ],
+        size: [
+          'small',
+          'big',
+        ],
+      },
+      states: [
+        'checked',
+        'disabled',
+        'active',
+      ],
+    },
+    appearance: {
+      'default': {
+        mapping: {
+          size: 30,
+          highlightSize: 50,
+          borderWidth: 2,
+          borderRadius: 4,
+          highlightBorderRadius: 8,
+          borderColor: 'gray-primary',
+          backgroundColor: 'gray-light',
+          selectColor: 'transparent',
+          highlightColor: 'transparent',
+          state: {
+            active: {
+              borderColor: 'gray-dark',
+              highlightColor: 'gray-light',
+            },
+            checked: {
+              borderColor: 'transparent',
+              selectColor: '#FFFFFF',
+              backgroundColor: 'blue-primary',
+            },
+            disabled: {
+              borderColor: 'gray-light',
+              backgroundColor: '#F1F5F5',
+            },
+            'checked.active': {
+              borderColor: 'blue-dark',
+            },
+            'checked.disabled': {
+              borderColor: 'transparent',
+              backgroundColor: 'gray-primary',
+            },
+          },
+        },
+        variant: {
+          status: {
+            error: {
+              mapping: {
+                borderColor: 'pink-primary',
+                backgroundColor: '#FFC9D9',
+                state: {
+                  active: {
+                    borderColor: 'pink-primary',
+                  },
+                  checked: {
+                    borderColor: 'pink-primary',
+                    backgroundColor: 'pink-primary',
+                  },
+                  'checked.active': {
+                    borderColor: 'pink-primary',
+                  },
+                },
+              },
+            },
+          },
+          size: {
+            big: {
+              mapping: {
+                size: 36,
+                highlightSize: 60,
+              },
+            },
+            small: {
+              mapping: {
+                size: 24,
+                highlightSize: 40,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const theme: ThemeType = {
+  'blue-primary': '#3366FF',
+  'blue-dark': '#2541CC',
+  'gray-light': '#DDE1EB',
+  'gray-primary': '#A6AEBD',
+  'gray-dark': '#8992A3',
+  'gray-highlight': '#EDF0F5',
+  'pink-primary': '#FF3D71',
+};

src/framework/ui/checkbox/checkbox.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import {
+  render,
+  fireEvent,
+  RenderAPI,
+} from 'react-native-testing-library';
+import {
+  styled,
+  StyleProvider,
+  StyleProviderProps,
+} from '@kitten/theme';
+import {
+  CheckBox,
+  Props,
+} from './checkbox.component';
+import * as config from './checkbox.spec.config';
+
+const StyledComponent = styled<CheckBox, Props>(CheckBox);
+
+const Mock = (props?: Props): React.ReactElement<StyleProviderProps> => (
+  <StyleProvider mapping={config.mapping} theme={config.theme} styles={{}}>
+    <StyledComponent {...props} />
+  </StyleProvider>
+);
+
+const renderComponent = (props?: Props): RenderAPI => render(<Mock {...props}/>);
+
+describe('@checkbox: component checks', () => {
+
+  it('* emits onChange with correct args', () => {
+    const onChange = jest.fn();
+    const component = renderComponent({
+      checked: true,
+      onChange: onChange,
+    });
+    fireEvent.press(component.getByType(TouchableOpacity));
+
+    expect(onChange).toBeCalledWith(true);
+  });
+
+});

src/framework/ui/drawable/checkmark/checkmark.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  View,
+  ViewProps,
+} from 'react-native';
+
+type Props = ViewProps;
+
+// TODO(ui): checkmark component
+
+export class CheckMark extends React.Component<Props> {
+
+  render() {
+    return (
+      <View {...this.props}/>
+    );
+  }
+}

src/framework/ui/index.ts

@@ -7,14 +7,21 @@ import {
   RadioGroup as RadioGroupComponent,
   Props as RadioGroupProps,
 } from './radioGroup/radioGroup.component';
+import {
+  CheckBox as CheckBoxComponent,
+  Props as CheckBoxProps,
+} from './checkbox/checkbox.component';
 
 const Radio = styled<RadioComponent, RadioProps>(RadioComponent);
 const RadioGroup = styled<RadioGroupComponent, RadioGroupProps>(RadioGroupComponent);
+const CheckBox = styled<CheckBoxComponent, CheckBoxProps>(CheckBoxComponent);
 
 export {
   Radio,
   RadioGroup,
+  CheckBox,
   RadioProps,
   RadioGroupProps,
+  CheckBoxProps,
 };