@seakoi/native-ui 1.0.0

package/src/components/base/cell/cell.tsx

@@ -0,0 +1,165 @@
+import { RightOutlined } from '@seakoi/svg-icons';
+import React, { type RefAttributes, useContext, useMemo } from 'react';
+import {
+  type FlexAlignType,
+  type GestureResponderEvent,
+  type Insets,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '#native-provider';
+import { safetyRenderChildren } from '#shared/utils';
+
+import { Flex } from '../flex';
+import { Text } from '../text';
+import { CellContext, type CellContextValue } from './cell-context';
+import { useCellStyles } from './style';
+
+const DEFAULT_INSET_SIZE = 16;
+export interface CellProps
+  extends RefAttributes<View>,
+    Pick<CellContextValue, 'bordered' | 'borderedColor'> {
+  /** 是否显示右侧箭头 */
+  showArrow?: boolean;
+  /** 对齐方式 */
+  align?: FlexAlignType;
+  /** 自定义前缀 */
+  prefix?: React.ReactElement;
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 内容容器样式 */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** 标题 */
+  title: string | React.ReactNode;
+  /** 多行文本省略 */
+  titleNumberOfLines?: number;
+  /** 标题样式 */
+  titleStyle?: StyleProp<TextStyle>;
+  /** 下方内容描述 */
+  description?: string | React.ReactNode;
+  /** 多行文本省略 */
+  descriptionNumberOfLines?: number;
+  /** 内容描述样式 */
+  descriptionStyle?: StyleProp<TextStyle>;
+  /** 和标题同行的说明文字 */
+  extra?: React.ReactNode;
+  /** 文字容器样式 */
+  extraStyle?: StyleProp<ViewStyle>;
+  /** 是否禁用点击事件 */
+  disabledPress?: boolean;
+  /** 点击范围 */
+  hitSlop?: null | Insets | number;
+  /** 自定义右侧箭头图标 */
+  renderArrowIcon?: () => React.ReactElement;
+  /** 点击事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** 长按点击事件 */
+  onLongPress?: (event: GestureResponderEvent) => void;
+  /** 布局回调 */
+  onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const Cell: React.FC<CellProps> = ({
+  titleNumberOfLines = 1,
+  descriptionNumberOfLines = 1,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCellStyles();
+  const context = useContext(CellContext);
+
+  const bordered = props.bordered ?? context?.bordered;
+  const borderedColor = props.borderedColor ?? context?.borderedColor;
+
+  const borderedInset = useMemo(() => {
+    if (typeof bordered !== 'object') return;
+    if (typeof bordered.inset !== 'object') {
+      return {
+        left: bordered.inset ?? DEFAULT_INSET_SIZE,
+        right: bordered.inset ?? DEFAULT_INSET_SIZE,
+      };
+    }
+    return bordered.inset;
+  }, [bordered]);
+
+  const showRightContent = !!(props.showArrow || props.extra);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={props.disabledPress || !props.onPress}
+      onPress={props.onPress}
+      onLayout={props.onLayout}
+      onLongPress={props.onLongPress}
+      style={[
+        styles.container,
+        props.style,
+        props.align && { alignItems: props.align },
+      ]}
+    >
+      {props.prefix}
+      <Flex
+        vertical
+        gap={4}
+        align="flex-start"
+        justify="flex-start"
+        style={[styles.contentContainer, props.contentContainerStyle]}
+      >
+        {safetyRenderChildren(props.title, title => (
+          <Text
+            size={16}
+            style={props.titleStyle}
+            color={theme.palette.fontGray1}
+            numberOfLines={titleNumberOfLines}
+          >
+            {title}
+          </Text>
+        ))}
+        {safetyRenderChildren(props.description, description => (
+          <Text
+            size={14}
+            style={props.descriptionStyle}
+            color={theme.palette.fontGray3}
+            numberOfLines={descriptionNumberOfLines}
+          >
+            {description}
+          </Text>
+        ))}
+      </Flex>
+      {!!showRightContent && (
+        <>
+          {!!props.extra && (
+            <View style={[styles.extra, props.extraStyle]}>
+              {safetyRenderChildren(props.extra, content => (
+                <Text size={14} color={theme.palette.fontGray3} numberOfLines={1}>
+                  {content}
+                </Text>
+              ))}
+            </View>
+          )}
+          {!!props.showArrow && (
+            <View style={styles.arrow}>
+              {props.renderArrowIcon?.() ?? (
+                <RightOutlined size={16} color={theme.palette.fontGray4} />
+              )}
+            </View>
+          )}
+        </>
+      )}
+      {!!bordered && (
+        <View
+          style={[
+            styles.bordered,
+            borderedInset,
+            { backgroundColor: borderedColor ?? theme.palette.blueGray3 },
+          ]}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};

package/src/components/base/cell/index.ts

@@ -0,0 +1,6 @@
+import { Cell as _Cell } from './cell';
+import { CellGroup } from './cell-group';
+
+export * from './cell';
+export * from './cell-group';
+export const Cell = Object.assign(_Cell, { Group: CellGroup });

package/src/components/base/cell/style/index.ts

@@ -0,0 +1,45 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useCellStyles = createThemedStyles(theme => ({
+  container: {
+    width: '100%',
+    padding: 16,
+    gap: theme.spacing.sm,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderBottomColor: 'transparent',
+    backgroundColor: theme.palette.white,
+  },
+  contentContainer: { flex: 1 },
+  bordered: {
+    height: 1,
+    insetInline: 16,
+    insetBlockEnd: 0,
+    position: 'absolute',
+  },
+  extra: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  arrow: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  },
+}));
+
+export const useGroupStyles = createThemedStyles(theme => ({
+  container: { width: '100%' },
+  title: { marginBottom: 6 },
+  contentContainer: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  card: { borderRadius: theme.roundness.xl },
+}));

package/src/components/base/checkbox/checkbox-card.tsx

@@ -0,0 +1,89 @@
+import { CheckOutlined } from '@seakoi/svg-icons';
+import { useMemoizedFn } from 'ahooks';
+import React, { useContext, useState } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '#native-provider';
+
+import { Checkbox, type CheckboxProps } from './checkbox';
+import { CheckboxContext, type CheckboxIconState } from './checkbox-context';
+import { useCheckboxCardStyles } from './style';
+
+export interface CheckboxCardProps extends CheckboxProps {
+  /** Radio.Card 图标样式 */
+  variant?: 'normal' | 'ribbon';
+}
+export const CheckboxCard: React.FC<CheckboxCardProps> = ({
+  variant = 'normal',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCheckboxCardStyles();
+  const context = useContext(CheckboxContext);
+
+  const [checkboxIconState, setCheckboxIconState] = useState<CheckboxIconState>();
+
+  const isRibbonVariant = variant === 'ribbon';
+  const titleIsSemiBold = !!(isRibbonVariant || props.description);
+  const checkboxIconPlacement =
+    props.checkboxIconPlacement ?? context.checkboxIconPlacement;
+
+  const isRibbonUncheckedDisabled =
+    isRibbonVariant && checkboxIconState?.disabled && !checkboxIconState.checked;
+  const iconRender = useMemoizedFn((iconState: CheckboxIconState) => {
+    if (!iconState.checked) return null;
+    const borderColor = iconState.disabled
+      ? theme.palette.brand4
+      : theme.palette.brand7;
+    return (
+      <>
+        <View
+          style={[
+            styles.ribbon,
+            {
+              borderColor,
+              borderRightColor: 'transparent',
+              borderBottomColor: 'transparent',
+            },
+          ]}
+        />
+        <View style={styles.checkIcon}>
+          <CheckOutlined size={20} color={theme.palette.white} />
+        </View>
+      </>
+    );
+  });
+  return (
+    <Checkbox
+      {...props}
+      titleStyle={[
+        titleIsSemiBold && theme.fonts.medium.size16,
+        isRibbonUncheckedDisabled && { color: theme.palette.fontGray5 },
+        props.titleStyle,
+      ]}
+      descriptionStyle={[
+        !isRibbonVariant && { color: theme.palette.fontGray3 },
+        isRibbonUncheckedDisabled && { color: theme.palette.fontGray5 },
+
+        props.descriptionStyle,
+      ]}
+      iconRender={isRibbonVariant ? iconRender : props.iconRender}
+      checkboxIconPlacement={
+        isRibbonVariant ? 'left' : (checkboxIconPlacement ?? 'right')
+      }
+      onCheckboxIconStateChange={iconState => {
+        setCheckboxIconState(iconState);
+        props.onCheckboxIconStateChange?.(iconState);
+      }}
+      style={[
+        styles.checkbox,
+        checkboxIconState?.checked && {
+          borderColor: checkboxIconState.disabled
+            ? theme.palette.brand4
+            : theme.palette.brand7,
+        },
+        props.style,
+      ]}
+    />
+  );
+};

package/src/components/base/checkbox/checkbox-context.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export type CheckboxValue = string | number;
+export interface CheckboxIconState {
+  checked?: boolean;
+  disabled?: boolean;
+  indeterminate?: boolean;
+}
+export interface CheckboxContextValue {
+  /** 是否撑满容器 */
+  block?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 当前选中的值数组 */
+  checkedValues?: CheckboxValue[];
+  /** 内置图标形状 */
+  checkboxIconShape?: 'circle' | 'square';
+  /** 图标位置 */
+  checkboxIconPlacement?: 'left' | 'right';
+  /** 自定义图标渲染 */
+  iconRender?: (state: CheckboxIconState) => React.ReactElement | null;
+  /** 值变化回调 */
+  onCheckedChange?: (state: React.SetStateAction<CheckboxValue[]>) => void;
+}
+
+export const CheckboxContext = React.createContext<CheckboxContextValue>({});

package/src/components/base/checkbox/checkbox-group.tsx

@@ -0,0 +1,64 @@
+import { useControllableValue, useLatest } from 'ahooks';
+import React, { useMemo } from 'react';
+
+import {
+  CheckboxContext,
+  type CheckboxContextValue,
+  type CheckboxValue,
+} from './checkbox-context';
+
+export interface CheckboxGroupProps
+  extends Pick<
+    CheckboxContextValue,
+    | 'block'
+    | 'disabled'
+    | 'iconRender'
+    | 'checkboxIconShape'
+    | 'checkboxIconPlacement'
+  > {
+  /** 受控值 */
+  value?: CheckboxValue[];
+  /** 默认值 */
+  defaultValue?: CheckboxValue[];
+  /** 数据变化回调函数 */
+  onChange?: (value?: CheckboxValue[]) => void;
+}
+
+export const CheckboxGroup: React.FC<
+  React.PropsWithChildren<CheckboxGroupProps>
+> = ({ checkboxIconPlacement, checkboxIconShape = 'circle', ...props }) => {
+  const iconRender = useLatest(props.iconRender);
+  const [checkedValues, setCheckedValues] = useControllableValue(props, {
+    defaultValue: [],
+    valuePropName: 'value',
+    trigger: 'onChange',
+    defaultValuePropName: 'defaultValue',
+  });
+
+  const contextValue = useMemo(
+    () =>
+      ({
+        checkboxIconShape,
+        checkedValues,
+        checkboxIconPlacement,
+        disabled: props.disabled,
+        block: props.block,
+        iconRender: iconRender.current,
+        onCheckedChange: setCheckedValues,
+      }) satisfies CheckboxContextValue,
+    [
+      checkboxIconShape,
+      checkedValues,
+      checkboxIconPlacement,
+      props.disabled,
+      props.block,
+      iconRender,
+      setCheckedValues,
+    ],
+  );
+  return (
+    <CheckboxContext.Provider value={contextValue}>
+      {props.children}
+    </CheckboxContext.Provider>
+  );
+};

package/src/components/base/checkbox/checkbox.tsx

@@ -0,0 +1,243 @@
+import {
+  CheckCircleFilled,
+  CheckSquareFilled,
+  CircleMinusFilled,
+  CircleOutlined,
+  SquareMinusFilled,
+  SquareOutlined,
+} from '@seakoi/svg-icons';
+import { useControllableValue, useLatest, useMemoizedFn } from 'ahooks';
+import React, { type RefAttributes, useContext, useEffect, useMemo } from 'react';
+import {
+  type FlexAlignType,
+  type GestureResponderEvent,
+  type Insets,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Flex, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import {
+  CheckboxContext,
+  type CheckboxContextValue,
+  type CheckboxIconState,
+  type CheckboxValue,
+} from './checkbox-context';
+import { useCheckboxStyles } from './style';
+
+export interface CheckboxProps
+  extends Pick<
+      CheckboxContextValue,
+      | 'block'
+      | 'disabled'
+      | 'iconRender'
+      | 'checkboxIconShape'
+      | 'checkboxIconPlacement'
+    >,
+    RefAttributes<View> {
+  /** 内容垂直方向对齐方式 */
+  align?: FlexAlignType;
+  /** 表单值 */
+  value?: CheckboxValue;
+  /** 是否选中 */
+  checked?: boolean;
+  /** 默认是否选中 */
+  defaultChecked?: boolean;
+  /** 半选样式 */
+  indeterminate?: boolean;
+  /** 外层自定义样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 文本容器自定义样式 */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** 内容前缀 */
+  contentPrefix?: React.ReactNode;
+  /** 标题内容 */
+  title: string;
+  /** 标题行数 */
+  titleNumberOfLines?: number;
+  /** 标题样式 */
+  titleStyle?: StyleProp<TextStyle>;
+  /** 描述文本 */
+  description?: React.ReactNode;
+  /** 描述样式 */
+  descriptionStyle?: StyleProp<TextStyle>;
+  /** 描述行数 */
+  descriptionNumberOfLines?: number;
+  /** 点击范围 */
+  hitSlop?: null | Insets | number;
+  /** 选中状态改变回调 */
+  onChecked?: (checked: boolean) => void;
+  /** 图标状态回调函数 */
+  onCheckboxIconStateChange?: (iconState: CheckboxIconState) => void;
+  /** 点击事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** 长按点击事件 */
+  onLongPress?: (event: GestureResponderEvent) => void;
+  /** 布局回调 */
+  onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  align = 'center',
+  titleNumberOfLines = 2,
+  descriptionNumberOfLines = 2,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCheckboxStyles();
+  const context = useContext(CheckboxContext);
+
+  const onCheckboxIconStateChange = useLatest(props.onCheckboxIconStateChange);
+  const [innerChecked, setInnerChecked] = useControllableValue(props, {
+    trigger: 'onChecked',
+    valuePropName: 'checked',
+    defaultValuePropName: 'defaultChecked',
+  });
+
+  const isBlock = props.block ?? context.block;
+  const isDisabled = props.disabled ?? context.disabled;
+  const iconShape = props.checkboxIconShape ?? context.checkboxIconShape;
+  const iconPlacement =
+    props.checkboxIconPlacement ?? context.checkboxIconPlacement;
+  const isConfigureValue = props.value || typeof props.value === 'number';
+
+  const isChecked = useMemo(() => {
+    if (props.checked !== undefined) return props.checked;
+    if (context.checkedValues && isConfigureValue) {
+      /** 使用 Checkbox.Group 包裹，且存在 value 值 */
+      return context.checkedValues.includes(props.value!);
+    }
+    return innerChecked;
+  }, [
+    props.value,
+    props.checked,
+    innerChecked,
+    isConfigureValue,
+    context.checkedValues,
+  ]);
+
+  const getCheckboxSvgIcon = useMemoizedFn(
+    (checked: boolean, indeterminate: boolean) => {
+      const isSquareIcon = iconShape === 'square';
+      if (indeterminate && !checked) {
+        return isSquareIcon ? SquareMinusFilled : CircleMinusFilled;
+      }
+      if (isSquareIcon) {
+        return !checked ? SquareOutlined : CheckSquareFilled;
+      }
+      return !checked ? CircleOutlined : CheckCircleFilled;
+    },
+  );
+
+  const iconRender = useMemoizedFn((iconState: CheckboxIconState) => {
+    if (props.iconRender) return props.iconRender(iconState);
+    if (context.iconRender) return context.iconRender(iconState);
+
+    const isActiveState = iconState.checked || iconState.indeterminate;
+    const CheckboxSvgIcon = getCheckboxSvgIcon(
+      !!iconState.checked,
+      !!iconState.indeterminate,
+    );
+    return (
+      <View style={styles.icon}>
+        <CheckboxSvgIcon
+          size={24}
+          color={
+            !isActiveState
+              ? theme.palette.gray4
+              : iconState.disabled
+                ? theme.palette.brand4
+                : theme.palette.brand7
+          }
+        />
+        {!!iconState.disabled && !isActiveState && (
+          <View
+            style={[
+              styles.disabledIconBackground,
+              iconShape !== 'square' && {
+                borderRadius: theme.roundness.full,
+              },
+            ]}
+          />
+        )}
+      </View>
+    );
+  });
+
+  useEffect(() => {
+    onCheckboxIconStateChange.current?.({
+      checked: isChecked,
+      disabled: isDisabled,
+      indeterminate: props.indeterminate,
+    });
+  }, [isChecked, isDisabled, props.indeterminate, onCheckboxIconStateChange]);
+
+  return (
+    <TouchableOpacity
+      ref={props.ref}
+      activeOpacity={0.8}
+      disabled={isDisabled}
+      hitSlop={props.hitSlop}
+      onLayout={props.onLayout}
+      onLongPress={props.onLongPress}
+      onPress={event => {
+        props.onPress?.(event);
+        setInnerChecked(prevState => !prevState);
+        if (isConfigureValue && context.onCheckedChange) {
+          context.onCheckedChange(prevState => {
+            return !prevState.includes(props.value!)
+              ? prevState.concat(props.value!)
+              : prevState.filter(currentValue => currentValue !== props.value);
+          });
+        }
+      }}
+      style={[
+        styles.container,
+        { alignItems: align },
+        isBlock && styles.fullContainer,
+        iconPlacement === 'right' && styles.reverseContainerDirection,
+        props.style,
+      ]}
+    >
+      {iconRender({
+        checked: isChecked,
+        disabled: isDisabled,
+        indeterminate: props.indeterminate,
+      })}
+      <Flex align="center" style={[styles.wrapper, props.contentContainerStyle]}>
+        <Flex
+          vertical
+          align="flex-start"
+          justify="flex-start"
+          gap={theme.spacing.xxs}
+          style={[styles.wrapper, props.contentContainerStyle]}
+        >
+          <Text
+            size={16}
+            style={props.titleStyle}
+            color={theme.palette.fontGray1}
+            numberOfLines={titleNumberOfLines}
+          >
+            {props.title}
+          </Text>
+          {!!props.description && (
+            <Text
+              size={14}
+              style={props.descriptionStyle}
+              color={theme.palette.fontGray2}
+              numberOfLines={descriptionNumberOfLines}
+            >
+              {props.description}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </TouchableOpacity>
+  );
+};

package/src/components/base/checkbox/index.ts

@@ -0,0 +1,12 @@
+import { Checkbox as _Checkbox } from './checkbox';
+import { CheckboxCard } from './checkbox-card';
+import { CheckboxGroup } from './checkbox-group';
+
+export * from './checkbox';
+export * from './checkbox-card';
+export * from './checkbox-group';
+
+export const Checkbox = Object.assign(_Checkbox, {
+  Card: CheckboxCard,
+  Group: CheckboxGroup,
+});