@aws-amplify/ui-react-native 0.0.0-fileuploader-41bde68-20221115171326

package/src/primitives/Radio/getRadioDimensions.ts

@@ -0,0 +1,38 @@
+import { capitalize } from '../../utils';
+
+import { RadioDimensions, RadioStyles, Size } from './types';
+
+/**
+ * These utility functions are used to apply styles to
+ * the two nested View's comprising the Radio:
+ *   - The outer <View> is named 'radioContainer'
+ *   - The inner <View> is named 'radioDot'
+ *
+ * If a customer passes a number to the `size` prop, then we simply calculate the dimensions
+ * for both the 'radioContainer' and 'radioDot' based on that number.
+ *
+ * If a customer passes a string ('small' | 'medium' | 'large') to the `size` prop,
+ * then we return the respective dimensions as defined in the `styles` object
+ * (e.g., 'small' => { radioContainerSmall, radioDotSmall } )
+ */
+
+export const getRadioDimensions = (
+  size: Size,
+  styles: RadioStyles
+): {
+  radioContainerSize: RadioDimensions;
+  radioDotSize: RadioDimensions;
+} => {
+  if (typeof size === 'number') {
+    return {
+      radioContainerSize: { height: size, width: size },
+      radioDotSize: { height: size * 0.5, width: size * 0.5 },
+    };
+  }
+
+  const sizeKey = capitalize(size);
+  return {
+    radioContainerSize: styles[`radioContainer${sizeKey}`],
+    radioDotSize: styles[`radioDot${sizeKey}`],
+  };
+};

package/src/primitives/Radio/index.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio';
+export { RadioProps, RadioStyles } from './types';

package/src/primitives/Radio/styles.ts

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+
+import { RadioStyles } from './types';
+
+const RADIO_COLOR = '#317d95';
+const ROUNDED_BORDER_RADIUS: number = 999;
+
+export const styles: RadioStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  radioContainer: {
+    alignItems: 'center',
+    borderColor: RADIO_COLOR,
+    borderRadius: ROUNDED_BORDER_RADIUS,
+    borderWidth: 2,
+    justifyContent: 'center',
+  },
+  radioDot: {
+    backgroundColor: RADIO_COLOR,
+    borderRadius: ROUNDED_BORDER_RADIUS,
+  },
+  radioContainerLarge: {
+    height: 24,
+    width: 24,
+  },
+  radioContainerMedium: {
+    height: 20,
+    width: 20,
+  },
+  radioContainerSmall: {
+    height: 16,
+    width: 16,
+  },
+  radioDotLarge: {
+    height: 12,
+    width: 12,
+  },
+  radioDotMedium: {
+    height: 10,
+    width: 10,
+  },
+  radioDotSmall: {
+    height: 8,
+    width: 8,
+  },
+});

package/src/primitives/Radio/types.ts

@@ -0,0 +1,32 @@
+import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { LabelPosition } from '../Label/types';
+
+export type Size = number | 'small' | 'medium' | 'large';
+
+export interface RadioProps<T> extends PressableProps {
+  disabled?: boolean;
+  label?: string;
+  labelPosition?: LabelPosition;
+  labelStyle?: StyleProp<TextStyle>;
+  onChange?: (value?: T) => void;
+  radioContainerStyle?: StyleProp<ViewStyle>;
+  radioDotStyle?: StyleProp<ViewStyle>;
+  size?: Size;
+  selected?: boolean;
+  value: T;
+}
+
+export type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
+export interface RadioStyles {
+  container: ViewStyle;
+  disabled: ViewStyle;
+  radioContainer: ViewStyle;
+  radioContainerLarge: RadioDimensions;
+  radioContainerMedium: RadioDimensions;
+  radioContainerSmall: RadioDimensions;
+  radioDot: ViewStyle;
+  radioDotLarge: RadioDimensions;
+  radioDotMedium: RadioDimensions;
+  radioDotSmall: RadioDimensions;
+}

package/src/primitives/index.ts

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './Carousel';
+export * from './Checkbox';
+export * from './Heading';
+export * from './Icon';
+export * from './IconButton';
+export * from './Label';
+export * from './Radio';

package/src/utils/index.ts

@@ -0,0 +1,10 @@
+// as a safeguard against known React Native lineHeight issues, e.g. https://github.com/facebook/react-native/issues/29507
+// use a value of 1.5 as the default line height multiplier
+const LINE_HEIGHT_MULTIPLIER = 1.5;
+
+export const getLineHeight = (fontSize: number): number =>
+  fontSize * LINE_HEIGHT_MULTIPLIER;
+
+export function capitalize<T extends string>(value: T): Capitalize<T> {
+  return (value.charAt(0).toUpperCase() + value.slice(1)) as Capitalize<T>;
+}

package/tsconfig.dist.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**.*"]
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "noImplicitAny": false,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "outDir": "./dist",
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}