init

src/ui/components/row/cell.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { TouchableOpacity } from 'react-native';
+import styled from 'styled-components/native';
+import { Theme } from '#/ui/theme';
+
+interface Props {
+  accessibilityRole?: TouchableOpacity['props']['accessibilityRole'];
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  children?: ReactNode;
+  onPress?: () => any;
+  background?: string;
+  flex?: string | number;
+  direction?: 'row' | 'column';
+  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch';
+  opacity?: number;
+}
+
+const Wrapper = styled.View<{
+  background?: string;
+  flex?: string | number;
+  direction?: 'row' | 'column';
+  theme: Theme;
+  align?: 'flex-start' | 'flex-end' | 'center' | 'stretch';
+  opacity?: number;
+}>`
+  padding: ${({ theme }) => theme.margins.medium / 2}px;
+  ${({ background }) => (background ? `background: ${background};` : '')}
+  ${({ flex }) => (flex ? `flex: ${flex};` : '')}
+  flex-direction: ${({ direction }) => (direction ? direction : 'row')};
+  align-items: ${({ align }) => (align ? align : 'center')};
+  ${({ opacity }) => (opacity? `opacity: ${opacity};` : '')}
+`;
+
+const Touch = styled.TouchableOpacity``;
+
+const Cell: React.FC<Props> = ({ children, onPress, ...props}) => {
+  const {
+    accessibilityLabel,
+    accessibilityRole,
+    accessibilityHint,
+    ...others
+  } = props;
+  const node = (
+    <Wrapper {...others}>
+      {children}
+    </Wrapper>
+  );
+  if (onPress) {
+    return (
+      <Touch
+        accessible
+        accessibilityRole={accessibilityRole || 'button'}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        onPress={onPress}
+      >
+        {node}
+      </Touch>
+    );
+  }
+  return node;
+};
+
+export { Cell };

src/ui/components/row/index.ts

@@ -0,0 +1,3 @@
+export * from './cell';
+export * from './row';
+export * from './placeholder-icon';

src/ui/components/row/placeholder-icon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Cell } from './cell';
+
+interface Props {
+  color?: string;
+  size?: number;
+  onPress?: () => void;
+}
+
+const Icon = styled.View<{ size: number; color: string }>`
+  background: ${({ color }) => color};
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+  border-radius: ${({ size }) => size / 4}px;
+`;
+
+const PlaceholderIcon: React.FC<Props> = ({
+  color = 'red',
+  size = 24,
+  onPress,
+}) => (
+  <Cell onPress={onPress}>
+    <Icon color={color} size={size} />
+  </Cell>
+);
+
+export { PlaceholderIcon };

src/ui/components/row/row.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components/native';
+import { Title1, Body1, Overline } from '#/ui/typography';
+import { Cell } from './cell';
+
+type RowProps = {
+  background?: string;
+  top?: ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
+  title?: ReactNode;
+  overline?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  opacity?: number;
+  onPress?: () => any;
+}
+
+const Children = styled.View``;
+
+const componentOrString = (
+  input: ReactNode,
+  Component: React.FC<{ children: ReactNode }>
+) => {
+  if (!input) {
+    return null;
+  }
+  if (typeof input === 'string') {
+    return <Component>{input}</Component>;
+  }
+  return input;
+};
+
+const Row: React.FC<RowProps> = ({
+  background,
+  top,
+  left,
+  right,
+  title,
+  opacity,
+  overline,
+  description,
+  children,
+  onPress,
+}) => (
+  <Cell background={background} opacity={opacity} onPress={onPress}>
+    {left}
+    <Cell flex={1} direction="column" align="stretch">
+      {!!top}
+      {componentOrString(overline, Overline)}
+      {componentOrString(title, Title1)}
+      {componentOrString(description, Body1)}
+      {!!children && <Children>{children}</Children>}
+    </Cell>
+    {right}
+  </Cell>
+);
+
+export type { RowProps };
+export { Row };