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

React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { memo } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import { useTheme, widthStyle } from '../theme';
import { getArrowOutline } from '../icon/helper/arrow';
import { renderTextLikeJSX } from '../helpers';
import { createStyles } from './style';

/**
 * Cell 单元格
 * @description 单元格为列表中的单个展示项。
 */
const Cell = _ref => {
  let {
    innerStyle,
    title,
    titleStyle,
    titleTextStyle,
    titleExtra,
    value,
    valueStyle,
    valueTextStyle,
    valueExtra,
    contentStyle,
    bordered = true,
    isLink = false,
    onPressLink,
    center = false,
    arrowDirection = 'right',
    required = false,
    vertical = false,
    valueTextNumberOfLines,
    textAlign = 'right',
    // 原生组件属性
    underlayColor,
    style,
    ...restProps
  } = _ref;
  const THEME_VAR = useTheme();
  const STYLES = widthStyle(THEME_VAR, createStyles); // 一定要绑定 Press 事件才有这个效果

  underlayColor = underlayColor || THEME_VAR.cell_active_color;

  if (vertical) {
    textAlign = 'left';
  }

  const centerStyle = center ? {
    alignSelf: 'center'
  } : null;
  const requiredJSX = required ? /*#__PURE__*/React.createElement(View, {
    style: STYLES.title_required
  }, /*#__PURE__*/React.createElement(Text, {
    style: STYLES.title_required_text
  }, "*")) : null;
  const titleJSX = renderTextLikeJSX(title, [STYLES.title_text, titleTextStyle]);
  const valueJSX = renderTextLikeJSX(value, [STYLES.value_text, {
    textAlign
  }, valueTextStyle], {
    numberOfLines: valueTextNumberOfLines
  });
  const IconArrow = getArrowOutline(arrowDirection);
  const linkJSX = isLink ? /*#__PURE__*/React.createElement(IconArrow, {
    size: THEME_VAR.cell_icon_size,
    color: THEME_VAR.cell_icon_color,
    onPress: onPressLink || restProps.onPress,
    style: STYLES.icon_link
  }) : null;
  const ctxJSX = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: [STYLES.value, centerStyle, valueStyle]
  }, valueJSX), valueExtra, linkJSX);
  return /*#__PURE__*/React.createElement(TouchableHighlight, _extends({}, restProps, {
    underlayColor: underlayColor,
    style: [STYLES.cell, style]
  }), /*#__PURE__*/React.createElement(View, {
    style: [STYLES.cell_inner, bordered ? STYLES.cell_inner_border : null, vertical ? null : STYLES.cell_inner_row, innerStyle]
  }, /*#__PURE__*/React.createElement(View, {
    style: [STYLES.title, centerStyle, titleStyle]
  }, requiredJSX, titleExtra, titleJSX), vertical ? /*#__PURE__*/React.createElement(View, {
    style: [STYLES.content, contentStyle]
  }, ctxJSX) : ctxJSX));
};

export default /*#__PURE__*/memo(Cell);
//# sourceMappingURL=index.js.map