Merge pull request #30077 from software-mansion-labs/ts-migration/Sel…

…ectCircle
Expensify · Nov 6, 2023 · 1c1fb1d · 1c1fb1d
2 parents ee0fb61 + 6535cea
commit 1c1fb1d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 40 deletions.
diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import globalStyles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+
+type SelectCircleProps = {
+    /** Should we show the checkmark inside the circle */
+    isChecked: boolean;
+
+    /** Additional styles to pass to SelectCircle */
+    styles?: StyleProp<ViewStyle>;
+};
+
+function SelectCircle({isChecked = false, styles}: SelectCircleProps) {
+    return (
+        <View style={[globalStyles.selectCircle, globalStyles.alignSelfCenter, styles]}>
+            {isChecked && (
+                <Icon
+                    src={Expensicons.Checkmark}
+                    fill={themeColors.iconSuccessFill}
+                />
+            )}
+        </View>
+    );
+}
+
+SelectCircle.displayName = 'SelectCircle';
+
+export default SelectCircle;