@adiraku/react-native-ui 1.2.7 → 1.2.8-canary-1

package/src/components/selection-card/SelectionCard.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TouchableHighlight, View } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { SelectionCardProps } from './SelectionCard.type';
+import { getStyle } from './SelectionCard.styles';
+import { Palettes } from '../../themes';
+
+export function SelectionCard(props: SelectionCardProps) {
+  const {
+    state = 'default',
+    title,
+    subtitle,
+    leadingComponent,
+    trailingComponent,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle({
+    ...props,
+    state,
+  });
+
+  return (
+    <TouchableHighlight
+      style={{ borderRadius: 12 }}
+      underlayColor={Palettes.black[50]}
+      {...rest}
+    >
+      <View style={[computedStyle.container]}>
+        {!!leadingComponent && (
+          <View style={computedStyle.leadingWrapper}>{leadingComponent}</View>
+        )}
+
+        <View style={computedStyle.contentWrapper}>
+          {typeof title === 'string' ? (
+            <Typography variant="subtitle2">{title}</Typography>
+          ) : (
+            title
+          )}
+
+          {typeof subtitle === 'string' ? (
+            <Typography variant="body2">{subtitle}</Typography>
+          ) : (
+            subtitle
+          )}
+        </View>
+
+        {!!trailingComponent && (
+          <View style={computedStyle.trailingWrapper}>{trailingComponent}</View>
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+}

package/src/components/selection-card/SelectionCard.styles.ts

@@ -0,0 +1,53 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { SelectionCardProps } from './SelectionCard.type';
+import { Palettes, Radius, Shadow, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  leadingWrapper?: ViewStyle;
+  trailingWrapper?: ViewStyle;
+  contentWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: SelectionCardProps) => {
+  const { state, disabled } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    borderRadius: Radius[12],
+    borderWidth: 3,
+    borderColor:
+      state === 'error'
+        ? Palettes.red[600]
+        : state === 'selected'
+        ? Palettes.yellow[600]
+        : 'transparent',
+    backgroundColor: disabled ? Palettes.grey[50] : Palettes.white[50],
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  computedStyle.contentWrapper = {
+    flex: 1,
+    paddingVertical: Spacing[16],
+  };
+
+  computedStyle.leadingWrapper = {
+    marginRight: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.trailingWrapper = {
+    marginLeft: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/selection-card/SelectionCard.type.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+import { TouchableWithoutFeedbackProps } from 'react-native';
+
+export type SelectionCardProps = {
+  /**
+   * Title of the component
+   */
+  title: ReactNode;
+
+  /**
+   * Subtitle of the component
+   */
+  subtitle?: ReactNode;
+
+  /**
+   * The state of the component, indicated by border color around the component
+   *  - default: no border
+   *  - selected: yellow border
+   *  - error: red border
+   *
+   * @default 'default'
+   */
+  state?: 'default' | 'selected' | 'error';
+
+  /**
+   * A slot placed on the left side of the component. Could be used to pass a custom Icon or component
+   */
+  leadingComponent?: ReactNode;
+
+  /**
+   * A slot placed on the right side of the component. Could be used to pass a custom Icon or component
+   */
+  trailingComponent?: ReactNode;
+} & Omit<TouchableWithoutFeedbackProps, 'style'>;