feat(checkmarkicon): add checkmarkicon component

react95-io · Jan 7, 2021 · 7894b70 · 7894b70
1 parent cbfe787
commit 7894b70
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 50 deletions.
diff --git a/src/ArrowIcon/index.ts b/src/ArrowIcon/index.ts
diff --git a/src/ArrowIcon/ArrowIcon.tsx → src/Icons/ArrowIcon.tsx b/src/ArrowIcon/ArrowIcon.tsx → src/Icons/ArrowIcon.tsx
@@ -53,8 +53,8 @@ const ArrowIcon = ({
                 ? theme.materialTextDisabledShadow
                 : 'transparent',
               shadowOffset: {
-                width: 1,
-                height: 1,
+                width: pixelSize,
+                height: pixelSize,
               },
               shadowOpacity: 1,
               shadowRadius: 0,

diff --git a/src/Icons/CheckmarkIcon.tsx b/src/Icons/CheckmarkIcon.tsx
@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { ThemeContext } from '../common/theming/Theme';
+
+type Props = {
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+const pixelSize = 1.5;
+const segmentSize = 3 * pixelSize;
+
+const CheckmarkIcon = ({ disabled = false, style = {}, ...rest }: Props) => {
+  const theme = useContext(ThemeContext);
+
+  const segmentOffsets = [2, 3, 4, 3, 2, 1, 0];
+
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      {segmentOffsets.map((offset, i) => (
+        <View
+          key={i}
+          style={[
+            styles.segment,
+            {
+              marginTop: offset * pixelSize,
+              backgroundColor: disabled
+                ? theme.checkmarkDisabled
+                : theme.checkmark,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    flexDirection: 'row',
+  },
+  segment: {
+    width: pixelSize,
+    height: segmentSize,
+  },
+});
+
+export default CheckmarkIcon;
diff --git a/src/Icons/index.ts b/src/Icons/index.ts
@@ -0,0 +1,2 @@
+export { default as ArrowIcon } from './ArrowIcon';
+export { default as CheckmarkIcon } from './CheckmarkIcon';
diff --git a/src/SwitchBase/SwitchBase.tsx b/src/SwitchBase/SwitchBase.tsx
@@ -11,30 +11,10 @@ import {
 import { Border } from '../common/styleElements';
 import { ThemeContext } from '../common/theming/Theme';
 
-import { Text } from '..';
+import { Text, CheckmarkIcon } from '..';
 
-const switchSize = 20;
-
-const symbols = {
-  checkbox: {
-    default:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQoU42Q0Q4AIARFj///6BqNSat4sXFcF6ER8mEGIC9IAY2AbCKpOnBAVgA2wIuac8MFQ/m6Ih9UjVdvy3njTUwR1AkKqm4yNwAAAABJRU5ErkJggg==',
-    disabled:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAR0lEQVQoU2NkIAIw4lPT0tryv6a6hhGnIpACkAFwRTAdMFNhCjAUwQTQFYDEwdYhS8BMA1kDY8MZ2EzAUAQzEdkErIpwBQcA7RckCvjAHfcAAAAASUVORK5CYII=',
-  },
-  radio: {
-    default:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKElEQVQoU2NkIAAYSVXwH6oBrhHZBJgkzFCwHEkKQBrwWoHVvQR9AQAfmgQJp08TYAAAAABJRU5ErkJggg==',
-    disabled:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVQoU2NkIAAYSVLQ0tryH6ShproGrhHOgEnCTIQpIl4BSCdeK3A5lqAvAEBkEAkDjL/SAAAAAElFTkSuQmCC',
-  },
-  indeterminate: {
-    default:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
-    disabled:
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC',
-  },
-};
+const checkboxSize = 20;
+const radioSize = 20;
 
 export type SwitchStatus = 'checked' | 'unchecked' | 'indeterminate';
 
@@ -67,46 +47,41 @@ export const SwitchBase = ({
   const theme = useContext(ThemeContext);
   const [isPressed, setIsPressed] = React.useState(false);
   const isRadio = component === 'radio';
+  const switchSize = component === 'checkbox' ? checkboxSize : radioSize;
   const boxSize = variant === 'flat' ? switchSize - 4 : switchSize;
   const borderRadius = isRadio ? boxSize / 2 : 0;
 
   const renderCheckmark = () => {
-    const symbolOffset = variant === 'flat' ? 2 : 4;
     if (status === 'checked') {
-      const symbol = symbols[component][disabled ? 'disabled' : 'default'];
-
-      return (
-        <ImageBackground
-          // border to compensate for Border
-          style={[
-            {
-              width: boxSize,
-              height: boxSize,
-              borderWidth: symbolOffset,
-              borderColor: 'transparent',
-            },
-          ]}
-          imageStyle={{
-            resizeMode: 'contain',
-            flex: 1,
-          }}
-          source={{
-            uri: symbol,
+      return component === 'checkbox' ? (
+        <CheckmarkIcon disabled={disabled} />
+      ) : (
+        <View
+          style={{
+            borderRadius: 6,
+            height: 6,
+            width: 6,
+            backgroundColor: disabled
+              ? theme.checkmarkDisabled
+              : theme.checkmark,
           }}
         />
       );
     }
     if (status === 'indeterminate') {
-      const symbol = symbols[status][disabled ? 'disabled' : 'default'];
-
       return (
         <ImageBackground
           style={[{ width: '100%', height: '100%' }]}
           imageStyle={{
             resizeMode: 'repeat',
           }}
           source={{
-            uri: symbol,
+            uri: {
+              default:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
+              disabled:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC',
+            }[disabled ? 'disabled' : 'default'],
           }}
         />
       );
@@ -189,6 +164,8 @@ const styles = StyleSheet.create({
   },
   switchSymbol: {
     marginRight: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   labelWrapper: {
     paddingHorizontal: 4,

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,4 @@
 export { default as AppBar } from './AppBar';
-export { default as ArrowIcon } from './ArrowIcon';
 export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as Checkbox } from './Checkbox';
@@ -26,6 +25,7 @@ export { default as Window } from './Window';
 export { Select, SelectBox } from './Select';
 export { Text, Title, Anchor } from './Typography';
 
+export * from './Icons';
 export * from './common/theming';
 
 export { Theme } from './types';