export icon variants as props & listitem (wip)

OneKeyHQ · Oct 24, 2023 · 4047d8d · 4047d8d
1 parent 51318f1
commit 4047d8d
Show file tree

Hide file tree

Showing 23 changed files with 1,849 additions and 1,639 deletions.
diff --git a/packages/components/src/Avatar/index.tsx b/packages/components/src/Avatar/index.tsx
@@ -0,0 +1 @@
+export { Avatar } from 'tamagui';
diff --git a/packages/components/src/Icon/Icons.tsx b/packages/components/src/Icon/Icons.tsx
diff --git a/packages/components/src/Icon/index.tsx b/packages/components/src/Icon/index.tsx
@@ -6,19 +6,19 @@ import { useIsMounted } from '@onekeyhq/components/src/Provider/hooks/useIsMount
 import ICON_CONFIG from './Icons';
 
 import type { ICON_NAMES } from './Icons';
-import { styled } from 'tamagui';
+import { GetProps, styled } from 'tamagui';
 import type { Svg, SvgProps } from 'react-native-svg';
 import { TextStyle } from 'react-native';
 
-export type IconProps = Omit<SvgProps, 'color'> & {
+export type RowIconProps = Omit<SvgProps, 'color'> & {
   name?: ICON_NAMES;
   style?: TextStyle;
 };
 
 const ComponentMaps: Record<string, typeof Svg> = {};
 
-const DEFAULT_SIZE = 24
-const RawIcon = ({ name = 'AkashIllus', style }: IconProps) => {
+const DEFAULT_SIZE = 24;
+const RawIcon = ({ name = 'AkashIllus', style }: RowIconProps) => {
   const defaultColor = useThemeValue('icon-default') as string;
   const primaryColor: string = (style?.color as string) || defaultColor;
   const SVGComponent = ComponentMaps[name];
@@ -82,3 +82,4 @@ export const Icon = styled(RawIcon, {
 });
 
 export type { ICON_NAMES };
+export type IconProps = GetProps<typeof Icon> & RowIconProps;
diff --git a/packages/components/src/Icon/react/outline/ChevronLeftSmall.tsx b/packages/components/src/Icon/react/outline/ChevronLeftSmall.tsx
@@ -0,0 +1,12 @@
+import Svg, { SvgProps, Path } from 'react-native-svg';
+const SvgChevronLeftSmall = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14.293 7.293a1 1 0 0 1 0 1.414L11 12l3.293 3.293a1 1 0 0 1-1.414 1.414l-3.293-3.293a2 2 0 0 1 0-2.828l3.293-3.293a1 1 0 0 1 1.414 0Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);
+export default SvgChevronLeftSmall;
diff --git a/packages/components/src/Icon/react/outline/ChevronRightSmall.tsx b/packages/components/src/Icon/react/outline/ChevronRightSmall.tsx
@@ -1,12 +1,11 @@
 import Svg, { SvgProps, Path } from 'react-native-svg';
 const SvgChevronRightSmall = (props: SvgProps) => (
-  <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
+  <Svg viewBox="0 0 24 24" fill="none" accessibilityRole="image" {...props}>
     <Path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      d="m13.586 16-3.293-3.293a1 1 0 0 1 0-1.414L13.586 8"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.293 7.293a1 1 0 0 1 1.414 0L14 10.586a2 2 0 0 1 0 2.828l-3.293 3.293a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z"
+      fill="currentColor"
     />
   </Svg>
 );

diff --git a/packages/components/src/Icon/react/outline/QuestionMark.tsx b/packages/components/src/Icon/react/outline/QuestionMark.tsx
@@ -1,5 +1,5 @@
 import Svg, { SvgProps, Path } from 'react-native-svg';
-const SvgQuestionMark = (props: SvgProps) => (
+const SvgQuestionmark = (props: SvgProps) => (
   <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
     <Path
       fill="currentColor"
@@ -16,4 +16,4 @@ const SvgQuestionMark = (props: SvgProps) => (
     <Path fill="currentColor" d="M13 16a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
   </Svg>
 );
-export default SvgQuestionMark;
+export default SvgQuestionmark;
diff --git a/packages/components/src/Icon/react/outline/index.ts b/packages/components/src/Icon/react/outline/index.ts
@@ -209,6 +209,7 @@ export { default as ChevronLargeDown } from './ChevronLargeDown';
 export { default as ChevronLargeLeft } from './ChevronLargeLeft';
 export { default as ChevronLargeRight } from './ChevronLargeRight';
 export { default as ChevronLargeTop } from './ChevronLargeTop';
+export { default as ChevronLeftSmall } from './ChevronLeftSmall';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRightSmall } from './ChevronRightSmall';
 export { default as ChevronRight } from './ChevronRight';
@@ -602,7 +603,7 @@ export { default as Printer } from './Printer';
 export { default as Processor } from './Processor';
 export { default as PullRequest } from './PullRequest';
 export { default as QrCode } from './QrCode';
-export { default as QuestionMark } from './QuestionMark';
+export { default as Questionmark } from './Questionmark';
 export { default as Radar } from './Radar';
 export { default as Rainbow } from './Rainbow';
 export { default as Rainy } from './Rainy';

diff --git a/packages/components/src/Icon/react/solid/ChevronLeftSmall.tsx b/packages/components/src/Icon/react/solid/ChevronLeftSmall.tsx
@@ -0,0 +1,12 @@
+import Svg, { SvgProps, Path } from 'react-native-svg';
+const SvgChevronLeftSmall = (props: SvgProps) => (
+  <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14.293 7.293a1 1 0 0 0-1.414 0l-3.293 3.293a2 2 0 0 0 0 2.828l3.293 3.293a1 1 0 0 0 1.414-1.414L11 12l3.293-3.293a1 1 0 0 0 0-1.414Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);
+export default SvgChevronLeftSmall;
diff --git a/packages/components/src/Icon/react/solid/ChevronRightSmall.tsx b/packages/components/src/Icon/react/solid/ChevronRightSmall.tsx
@@ -4,7 +4,7 @@ const SvgChevronRightSmall = (props: SvgProps) => (
     <Path
       fill="currentColor"
       fillRule="evenodd"
-      d="M14.293 7.293a1 1 0 0 0-1.414 0l-3.293 3.293a2 2 0 0 0 0 2.828l3.293 3.293a1 1 0 0 0 1.414-1.414L11 12l3.293-3.293a1 1 0 0 0 0-1.414Z"
+      d="M9.293 7.293a1 1 0 0 1 1.414 0L14 10.586a2 2 0 0 1 0 2.828l-3.293 3.293a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z"
       clipRule="evenodd"
     />
   </Svg>

diff --git a/packages/components/src/Icon/react/solid/QuestionMark.tsx b/packages/components/src/Icon/react/solid/QuestionMark.tsx
@@ -1,5 +1,5 @@
 import Svg, { SvgProps, Path } from 'react-native-svg';
-const SvgQuestionMark = (props: SvgProps) => (
+const SvgQuestionmark = (props: SvgProps) => (
   <Svg fill="none" viewBox="0 0 24 24" accessibilityRole="image" {...props}>
     <Path
       fill="currentColor"
@@ -9,4 +9,4 @@ const SvgQuestionMark = (props: SvgProps) => (
     />
   </Svg>
 );
-export default SvgQuestionMark;
+export default SvgQuestionmark;
diff --git a/packages/components/src/Icon/react/solid/index.ts b/packages/components/src/Icon/react/solid/index.ts
@@ -209,6 +209,7 @@ export { default as ChevronLargeDown } from './ChevronLargeDown';
 export { default as ChevronLargeLeft } from './ChevronLargeLeft';
 export { default as ChevronLargeRight } from './ChevronLargeRight';
 export { default as ChevronLargeTop } from './ChevronLargeTop';
+export { default as ChevronLeftSmall } from './ChevronLeftSmall';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRightSmall } from './ChevronRightSmall';
 export { default as ChevronRight } from './ChevronRight';
@@ -602,7 +603,7 @@ export { default as Printer } from './Printer';
 export { default as Processor } from './Processor';
 export { default as PullRequest } from './PullRequest';
 export { default as QrCode } from './QrCode';
-export { default as QuestionMark } from './QuestionMark';
+export { default as Questionmark } from './Questionmark';
 export { default as Radar } from './Radar';
 export { default as Rainbow } from './Rainbow';
 export { default as Rainy } from './Rainy';

diff --git a/packages/components/src/IconButton/index.tsx b/packages/components/src/IconButton/index.tsx
@@ -7,26 +7,27 @@ import { Icon } from '../Icon';
 import { Spinner } from '../Spinner';
 import { Stack } from '../Stack';
 
-import type { ICON_NAMES } from '../Icon';
+import type { ICON_NAMES, IconProps } from '../Icon';
 
-interface IconButtonProps
+export interface IconButtonProps
   extends Omit<ButtonProps, 'iconAfter' | 'children' | 'icon'> {
   icon: ICON_NAMES;
+  iconProps?: IconProps;
 }
 
 const getSizeStyles = (size: ButtonProps['size']) => {
   const sizes = {
     small: {
       p: '$1',
-      negativeMargin: '$-1',
+      negativeMargin: -5,
     },
     medium: {
       p: '$1.5',
-      negativeMargin: '$-1.5',
+      negativeMargin: -7,
     },
     large: {
       p: '$3',
-      negativeMargin: '$-3',
+      negativeMargin: -13,
     },
   };
 
@@ -38,6 +39,7 @@ export const IconButton = (props: IconButtonProps) => {
     disabled,
     loading,
     icon,
+    iconProps,
     size,
     variant = 'secondary',
     ...rest
@@ -75,6 +77,7 @@ export const IconButton = (props: IconButtonProps) => {
           color={iconColor}
           name={icon}
           size={size === 'small' ? '$5' : '$6'}
+          {...iconProps}
         />
       )}
     </ButtonFrame>

diff --git a/packages/components/src/Image/index.tsx b/packages/components/src/Image/index.tsx
@@ -0,0 +1 @@
+export { Image } from 'tamagui';
diff --git a/packages/components/src/ListItem/index.tsx b/packages/components/src/ListItem/index.tsx
@@ -0,0 +1,170 @@
+import { isValidElement } from 'react';
+
+import { Avatar } from '../Avatar';
+import { type ICON_NAMES, Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Stack } from '../Stack';
+import { Text } from '../Text';
+
+import type { IconButtonProps } from '../IconButton';
+import type { AvatarProps, GetProps, StackProps } from 'tamagui';
+
+/* Image */
+type ListItemAvatarProps = {
+  src: string;
+} & AvatarProps;
+
+const ListItemAvatar = (props: ListItemAvatarProps) => {
+  const { src, ...rest } = props;
+
+  return (
+    <Avatar size="$10" {...rest}>
+      <Avatar.Image src={src} />
+      <Avatar.Fallback />
+    </Avatar>
+  );
+};
+
+/* Text */
+interface ListItemTextProps extends StackProps {
+  primary?: string | React.ReactNode;
+  secondary?: string | React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  primaryTextProps?: GetProps<typeof Text>;
+  secondaryTextProps?: GetProps<typeof Text>;
+}
+
+const ListItemText = (props: ListItemTextProps) => {
+  const {
+    primary,
+    secondary,
+    align = 'left',
+    primaryTextProps,
+    secondaryTextProps,
+    ...rest
+  } = props;
+
+  const getJustifyContent = () => {
+    if (align === 'left') {
+      return 'flex-start';
+    }
+    if (align === 'center') {
+      return 'center';
+    }
+    return 'flex-end';
+  };
+
+  return (
+    <Stack {...rest} justifyContent={getJustifyContent()}>
+      {primary &&
+        (isValidElement(primary) ? (
+          primary
+        ) : (
+          <Text
+            textAlign={align}
+            variant="$bodyLgMedium"
+            userSelect="none"
+            {...primaryTextProps}
+          >
+            {primary}
+          </Text>
+        ))}
+      {secondary &&
+        (isValidElement(secondary) ? (
+          secondary
+        ) : (
+          <Text
+            variant="$bodyMd"
+            tone="subdued"
+            textAlign={align}
+            userSelect="none"
+            {...secondaryTextProps}
+          >
+            {secondary}
+          </Text>
+        ))}
+    </Stack>
+  );
+};
+
+/* IconButton */
+const ListItemIconButton = (props: IconButtonProps) => (
+  <IconButton variant="tertiary" size="medium" {...props} />
+);
+
+/* ListItem */
+interface ListItemProps extends StackProps {
+  title?: string;
+  titleProps?: ListItemTextProps['primaryTextProps'];
+  subtitle?: string;
+  subtitleProps?: ListItemTextProps['secondaryTextProps'];
+  avatarProps?: ListItemAvatarProps;
+  icon?: ICON_NAMES;
+  drillIn?: boolean;
+  checkMark?: boolean;
+}
+
+function ListItem(props: ListItemProps) {
+  const {
+    avatarProps,
+    icon,
+    title,
+    titleProps,
+    subtitle,
+    subtitleProps,
+    drillIn,
+    checkMark,
+    onPress,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <Stack
+      flexDirection="row"
+      alignItems="center"
+      space="$3"
+      p="$2"
+      mx="$3"
+      borderRadius="$3"
+      onPress={onPress}
+      {...(onPress && {
+        hoverStyle: { bg: '$bgHover' },
+        pressStyle: { bg: '$bgActive' },
+        focusable: true,
+        focusStyle: {
+          outlineWidth: 2,
+          outlineStyle: 'solid',
+          outlineColor: '$focusRing',
+        },
+      })}
+      {...rest}
+    >
+      {avatarProps && (
+        <ListItemAvatar
+          {...(!avatarProps.circular && { borderRadius: '$2' })}
+          {...avatarProps}
+        />
+      )}
+      {icon && <Icon name={icon} color="$iconSubdued" />}
+      <ListItemText
+        flex={1}
+        primary={title}
+        primaryTextProps={titleProps}
+        secondary={subtitle}
+        secondaryTextProps={subtitleProps}
+      />
+      {children}
+      {drillIn && (
+        <Icon name="ChevronRightSmallOutline" color="$iconSubdued" mx="$-1.5" />
+      )}
+      {checkMark && <Icon name="CheckRadioSolid" color="$iconActive" />}
+    </Stack>
+  );
+}
+
+ListItem.Text = ListItemText;
+ListItem.Image = ListItemAvatar;
+ListItem.IconButton = ListItemIconButton;
+
+export { ListItem };
diff --git a/packages/components/src/Select/index.tsx b/packages/components/src/Select/index.tsx
@@ -54,7 +54,7 @@ function SelectSectionsContent({
       unstyled
       minWidth="$48"
       outlineWidth="$px"
-      outlineColor="$neutral2"
+      outlineColor="$neutral3"
       outlineStyle="solid"
       borderRadius="$3"
       overflow="hidden"
@@ -134,7 +134,7 @@ function SelectItemsContent({ items = [] }: { items?: ISelectItem[] }) {
       unstyled
       minWidth="$48"
       outlineWidth="$px"
-      outlineColor="$neutral2"
+      outlineColor="$neutral3"
       outlineStyle="solid"
       borderRadius="$3"
       overflow="hidden"

diff --git a/packages/components/src/Switch/index.tsx b/packages/components/src/Switch/index.tsx
@@ -9,13 +9,12 @@ export type SwitchProps = Omit<
   value?: boolean;
   onChange?: (checked: boolean) => void;
   size?: 'small' | 'large';
-  disabled?: boolean;
 };
 
 export function Switch({
   value,
   onChange,
-  size = 'small',
+  size = 'large',
   disabled,
   ...restProps
 }: SwitchProps) {