feat(radio): add radio component

example/src/examples/CheckboxExample.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { Checkbox, Panel, Fieldset } from 'react95-native';
 
 const CheckboxExample = () => {
-  const [isChecked, setIsChecked] = useState(false);
+  const [isChecked, setIsChecked] = useState(true);
   const [isIndeterminate, setIsIndeterminate] = useState(true);
 
   return (

example/src/examples/RadioExample.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { Radio, Panel, Fieldset } from 'react95-native';
+
+const CheckboxExample = () => {
+  const [value, setValue] = useState('Apple');
+
+  return (
+    <Panel style={styles.container}>
+      <Fieldset label='Default'>
+        <Radio
+          status={value === 'Apple' ? 'checked' : 'unchecked'}
+          onPress={() => setValue('Apple')}
+          label='Apple'
+        />
+        <Radio
+          status={value === 'Orange' ? 'checked' : 'unchecked'}
+          onPress={() => setValue('Orange')}
+          label='Orange'
+        />
+        <Radio
+          status={value === 'Watermelon' ? 'checked' : 'unchecked'}
+          onPress={() => setValue('Watermelon')}
+          label='Watermelon'
+        />
+      </Fieldset>
+      <Fieldset label='Disabled'>
+        <Radio
+          status='checked'
+          onPress={() => console.warn('pressed')}
+          label='Apple'
+          disabled
+        />
+        <Radio
+          status='unchecked'
+          onPress={() => console.warn('pressed')}
+          label='Pear'
+          disabled
+        />
+      </Fieldset>
+    </Panel>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+});
+
+export default CheckboxExample;

example/src/examples/index.tsx

@@ -6,6 +6,7 @@ import CutoutExample from './CutoutExample';
 import TextExample from './TextExample';
 import DividerExample from './DividerExample';
 import CheckboxExample from './CheckboxExample';
+import RadioExample from './RadioExample';
 import WindowExample from './WindowExample';
 import FieldsetExample from './FieldsetExample';
 import MenuExample from './MenuExample';
@@ -20,6 +21,7 @@ export default [
   { name: 'TextExample', component: TextExample, title: 'Text' },
   { name: 'DividerExample', component: DividerExample, title: 'Divider' },
   { name: 'CheckboxExample', component: CheckboxExample, title: 'Checkbox' },
+  { name: 'RadioExample', component: RadioExample, title: 'Radio' },
   { name: 'WindowExample', component: WindowExample, title: 'Window' },
   { name: 'FieldsetExample', component: FieldsetExample, title: 'Fieldset' },
   { name: 'MenuExample', component: MenuExample, title: 'Menu' },

src/Checkbox/Checkbox.tsx

@@ -1,20 +1,6 @@
 import React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TouchableHighlight,
-  ImageBackground,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { Border } from '../common/styleElements';
-import { original as theme } from '../common/themes';
-import { border } from '../common/styles';
-
-import { Text } from '..';
-
-const checkboxSize = 20;
+import { StyleProp, ViewStyle } from 'react-native';
+import SwitchBase from '../SwitchBase';
 
 type Props = {
   disabled?: boolean;
@@ -31,108 +17,16 @@ const Checkbox = ({
   status,
   style = {},
 }: Props) => {
-  const [isPressed, setIsPressed] = React.useState(false);
-
-  const renderBox = () => {
-    if (status === 'checked') {
-      return (
-        <ImageBackground
-          // border to compensate for Border
-          style={[{ width: '100%', height: '100%', borderWidth: 4 }]}
-          imageStyle={{
-            resizeMode: 'contain',
-            flex: 1,
-          }}
-          source={{
-            uri: disabled
-              ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAR0lEQVQoU2NkIAIw4lPT0tryv6a6hhGnIpACkAFwRTAdMFNhCjAUwQTQFYDEwdYhS8BMA1kDY8MZ2EzAUAQzEdkErIpwBQcA7RckCvjAHfcAAAAASUVORK5CYII='
-              : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQoU42Q0Q4AIARFj///6BqNSat4sXFcF6ER8mEGIC9IAY2AbCKpOnBAVgA2wIuac8MFQ/m6Ih9UjVdvy3njTUwR1AkKqm4yNwAAAABJRU5ErkJggg==',
-          }}
-        />
-      );
-    }
-    if (status === 'indeterminate') {
-      return (
-        <ImageBackground
-          style={[{ width: '100%', height: '100%' }]}
-          imageStyle={{
-            resizeMode: 'repeat',
-          }}
-          source={{
-            uri: disabled
-              ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC'
-              : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
-          }}
-        />
-      );
-    }
-
-    return <Text> </Text>;
-  };
-
   return (
-    <TouchableHighlight
-      style={[styles.wrapper, style]}
-      onPress={onPress}
-      activeOpacity={1}
+    <SwitchBase
+      component='checkbox'
       disabled={disabled}
-      onHideUnderlay={() => setIsPressed(false)}
-      onShowUnderlay={() => setIsPressed(true)}
-      // TODO: check if those accessibility properties are correct
-      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
-      accessibilityComponentType='button'
-      accessibilityRole='checkbox'
-      accessibilityState={{ disabled, checked: status === 'checked' }}
-      underlayColor='none'
-    >
-      <View style={[styles.content]} pointerEvents='none'>
-        <View
-          style={[
-            styles.checkbox,
-            { backgroundColor: disabled ? theme.material : theme.canvas },
-          ]}
-        >
-          {renderBox()}
-          <Border variant='cutout' />
-        </View>
-        {Boolean(label) && (
-          <View
-            style={[
-              !disabled && isPressed
-                ? border.focusOutline
-                : { borderWidth: 2, borderColor: 'transparent' },
-            ]}
-          >
-            <Text disabled={disabled} style={[styles.label]}>
-              {label}
-            </Text>
-          </View>
-        )}
-      </View>
-    </TouchableHighlight>
+      label={label}
+      onPress={onPress}
+      status={status}
+      style={style}
+    />
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: {
-    width: 'auto',
-    alignSelf: 'flex-start',
-    padding: 4,
-    backgroundColor: theme.material,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: 'auto',
-  },
-  checkbox: {
-    width: checkboxSize,
-    height: checkboxSize,
-    marginRight: 8,
-  },
-  label: {
-    fontSize: 16,
-  },
-});
-
 export default Checkbox;

src/Radio/Radio.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import SwitchBase from '../SwitchBase';
+
+type Props = {
+  disabled?: boolean;
+  label?: string;
+  onPress?: () => void;
+  status: 'checked' | 'unchecked';
+  style?: StyleProp<ViewStyle>;
+};
+
+const Radio = ({
+  disabled = false,
+  label = '',
+  onPress = () => {},
+  status,
+  style = {},
+}: Props) => {
+  return (
+    <SwitchBase
+      component='radio'
+      disabled={disabled}
+      label={label}
+      onPress={onPress}
+      status={status}
+      style={style}
+    />
+  );
+};
+
+export default Radio;

src/Radio/index.ts

@@ -0,0 +1 @@
+export { default } from './Radio';