@fruits-chain/react-native-xiaoshu/lib/module/cell/cell.js

🌈 React Native UI library

"use strict";

import noop from 'lodash/noop';
import React, { memo } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import Divider from "../divider/index.js";
import { renderTextLikeJSX, getDefaultValue, getArrowOutline } from "../helpers/index.js";
import { useDebounceFn } from "../hooks/index.js";
import Theme from "../theme/index.js";
import { varCreator, styleCreator } from "./style.js";

/**
 * Cell 单元格
 * @description 单元格为列表中的单个展示项。
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Cell = ({
  theme,
  innerStyle,
  title,
  titleStyle,
  titleTextStyle,
  titleExtra,
  value,
  valueStyle,
  valueTextStyle,
  valueExtra,
  extra,
  extraTextStyle,
  contentStyle,
  divider = true,
  dividerLeftGap,
  dividerRightGap,
  isLink = false,
  onPressLink,
  center = false,
  arrowDirection = 'right',
  required = false,
  vertical = false,
  valueTextNumberOfLines,
  titleTextNumberOfLines,
  textAlign = 'right',
  onPressDebounceWait = 0,
  // 原生组件属性
  underlayColor,
  style,
  ...restProps
}) => {
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  const {
    run: runOnPress
  } = useDebounceFn(restProps.onPress || noop, {
    wait: onPressDebounceWait,
    leading: true,
    trailing: false
  });

  // 一定要绑定 Press 事件才有这个效果
  underlayColor = getDefaultValue(underlayColor, CV.cell_active_color);
  dividerLeftGap = getDefaultValue(dividerLeftGap, CV.cell_group_title_padding_horizontal);
  dividerRightGap = getDefaultValue(dividerRightGap, CV.cell_group_title_padding_horizontal);
  if (vertical) {
    textAlign = 'left';
  }
  const centerStyle = center ? {
    alignSelf: 'center'
  } : {};
  const requiredJSX = required ? /*#__PURE__*/_jsx(View, {
    style: STYLES.title_required,
    testID: "CELL_REQUIRED",
    children: /*#__PURE__*/_jsx(Text, {
      style: STYLES.title_required_text,
      children: "*"
    })
  }) : null;
  const titleJSX = renderTextLikeJSX(title, [STYLES.title_text, titleTextStyle], {
    numberOfLines: titleTextNumberOfLines
  });
  const valueJSX = renderTextLikeJSX(value, [STYLES.value_text, {
    textAlign
  }, valueTextStyle], {
    numberOfLines: valueTextNumberOfLines
  });
  const extraJSX = renderTextLikeJSX(extra, [STYLES.extra_text, extraTextStyle]);
  const IconArrow = getArrowOutline(arrowDirection);
  const linkJSX = isLink ? /*#__PURE__*/_jsx(IconArrow, {
    testID: "CELL_LINK_ARROW",
    size: CV.cell_icon_size,
    color: CV.cell_icon_color,
    onPress: onPressLink,
    style: STYLES.icon_link
  }) : null;
  const ctxJSX = /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(View, {
      style: [STYLES.value, valueJSX ? STYLES.hasValue : undefined, centerStyle, valueStyle],
      children: valueJSX
    }), valueExtra, linkJSX]
  });
  return /*#__PURE__*/_jsx(TouchableHighlight, {
    ...restProps,
    underlayColor: underlayColor,
    style: [STYLES.cell, style],
    onPress: restProps.onPress ? onPressDebounceWait ? runOnPress : restProps.onPress : undefined,
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsxs(View, {
        style: [STYLES.cell_inner, vertical ? null : STYLES.cell_inner_row, extra ? STYLES.cell_inner_has_extra : null, innerStyle],
        children: [/*#__PURE__*/_jsxs(View, {
          style: [STYLES.title, centerStyle, titleStyle],
          children: [requiredJSX, titleExtra, titleJSX]
        }), vertical ? /*#__PURE__*/_jsx(View, {
          style: [STYLES.content, contentStyle],
          children: ctxJSX
        }) : ctxJSX]
      }), extraJSX, divider ? /*#__PURE__*/_jsx(Divider, {
        style: {
          marginLeft: dividerLeftGap,
          marginRight: dividerRightGap
        }
      }) : null]
    })
  });
};
export default /*#__PURE__*/memo(Cell);
//# sourceMappingURL=cell.js.map