Merge pull request #39 from BlueBaseJS/fix/checkboxchange

fix(CheckBox): Added onValueChange prop in checkbox

Author: artalat

src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
-import { Checkbox as RNPCheckbox } from 'react-native-paper';
 import { CheckboxProps } from '@bluebase/components';
+// tslint:disable-next-line: sort-imports
+import { Checkbox as RNPCheckbox } from 'react-native-paper';
 import { SelectionControl } from '../SelectionControl';
 import { Theme } from '@bluebase/core';
 import { componentMapper } from '@bluebase/component-mapper';
@@ -21,6 +22,14 @@ export const Checkbox = componentMapper<CheckboxProps>(SelectionControl, {
 
 		return color;
 	},
+	onPress: ({ onPress, onValueChange, value, checked }: any) => ()  => {
+		if (onPress) {
+			onPress();
+		}
+		if (onValueChange) {
+			onValueChange(value, !checked);
+		}
+	},
 
 	status: ({ checked, indeterminate }: CheckboxProps) => {
 		if (indeterminate === true) {

src/components/Checkbox/__stories__/Checkbox.stories.tsx

@@ -23,7 +23,11 @@ stories
 			color="blue"
 		/>
 		<Checkbox
-			onValueChange={action('Checked')}
+			value="test1"
+			onValueChange={(a, b)=>{
+				// console.log(a);
+				// console.log(b);
+			}}
 			label="Unchecked"
 			color="blue"
 			checked={false}

src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,4 +1,5 @@
 import { BlueBaseApp, getComponent } from '@bluebase/core';
+
 import { Checkbox } from '../Checkbox';
 import React from 'react';
 import { mount } from 'enzyme';
@@ -110,6 +111,29 @@ describe.only('Checkbox', () => {
 		expect(component.find('Checkbox Text').last().text()).toEqual('Foo');
 	});
 
+	it('should check that the onPress and onValueChange is binded correctly', async () => {
+		const onPressFunc = jest.fn();
+		const onValueChangeFunc = jest.fn();
+
+		const BBCheckbox = getComponent('Checkbox');
+
+		const component = mount(
+			<BlueBaseApp components={{ Checkbox }}>
+				<BBCheckbox color="default" onPress={onPressFunc} value={1} onValueChange={onValueChangeFunc} />
+			</BlueBaseApp>
+		);
+
+		await waitForElement(component as any, BBCheckbox);
+
+		const  onPress = component.find('TouchableHighlight').last().prop('onPress') as any;
+		onPress();
+		expect(onPressFunc).toBeCalled();
+
+		const  onValueChange = component.find('TouchableHighlight').last().prop('onValueChange') as any;
+		onValueChange();
+		expect(onValueChangeFunc).toBeCalledWith(1, true);
+	});
+
 });