@fruits-chain/react-native-xiaoshu/lib/module/cell/cell.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 Divider from '../divider';
import { renderTextLikeJSX, getDefaultValue } from '../helpers';
import { useDebounceFn } from '../hooks';
import { getArrowOutline } from '../icon/helper/arrow';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';
/**
 * Cell 单元格
 * @description 单元格为列表中的单个展示项。
 */

const Cell = _ref => {
  let {
    innerStyle,
    title,
    titleStyle,
    titleTextStyle,
    titleExtra,
    value,
    valueStyle,
    valueTextStyle,
    valueExtra,
    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
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const STYLES = Theme.createStyle(CV, styleCreator);
  const {
    run: runOnPress
  } = useDebounceFn(restProps.onPress, {
    wait: onPressDebounceWait
  }); // 一定要绑定 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'
  } : 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], {
    numberOfLines: titleTextNumberOfLines
  });
  const valueJSX = renderTextLikeJSX(value, [STYLES.value_text, {
    textAlign
  }, valueTextStyle], {
    numberOfLines: valueTextNumberOfLines
  });
  const IconArrow = getArrowOutline(arrowDirection);
  const linkJSX = isLink ? /*#__PURE__*/React.createElement(IconArrow, {
    size: CV.cell_icon_size,
    color: CV.cell_icon_color,
    onPress: onPressLink,
    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],
    onPress: restProps.onPress ? onPressDebounceWait ? runOnPress : restProps.onPress : undefined
  }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: [STYLES.cell_inner, 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), divider ? /*#__PURE__*/React.createElement(Divider, {
    style: {
      marginLeft: dividerLeftGap,
      marginRight: dividerRightGap
    }
  }) : null));
};

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