@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
68 lines (65 loc) • 2.95 kB
JavaScript
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 isNil from 'lodash/isNil';
import React, { memo } from 'react';
import { View, TouchableWithoutFeedback } from 'react-native';
import Divider from '../divider';
import { renderTextLikeJSX } from '../helpers';
import Skeleton from '../skeleton';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';
const Card = _ref => {
let {
children,
title,
titleLeftExtra,
extra,
footer,
headerStyle,
titleStyle,
titleTextStyle,
bodyStyle,
footerStyle,
footerTextStyle,
size = 'm',
square = false,
loading = false,
headerDivider = true,
footerDivider = true,
bodyPadding = true,
onPressHeader,
onLayoutHeader,
onLayoutBody,
style,
...restProps
} = _ref;
const isS = size === 's';
const TOKENS = Theme.useThemeTokens();
const CV = Theme.createVar(TOKENS, varCreator);
const STYLES = Theme.createStyle(CV, styleCreator);
const hasTitleLeftExtra = !isNil(titleLeftExtra);
const titleJSX = renderTextLikeJSX(title, [STYLES.title_text, isS ? STYLES.title_text_s : null, titleTextStyle, hasTitleLeftExtra ? STYLES.title_text_margin_left : null], {
numberOfLines: 1
});
const footerJSX = renderTextLikeJSX(footer, [STYLES.footer_text, footerTextStyle]);
const showHeader = !isNil(titleJSX) || hasTitleLeftExtra || !isNil(extra);
const headerJSX = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
style: [STYLES.header, isS ? STYLES.header_s : null, headerStyle],
onLayout: onLayoutHeader
}, /*#__PURE__*/React.createElement(View, {
style: [STYLES.title, titleStyle]
}, titleLeftExtra, titleJSX), extra), headerDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
return /*#__PURE__*/React.createElement(View, _extends({}, restProps, {
style: [STYLES.card, square ? null : STYLES[`card_radius_${size}`], style]
}), showHeader ? onPressHeader ? /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
onPress: onPressHeader
}, headerJSX) : headerJSX : null, /*#__PURE__*/React.createElement(View, {
style: [bodyPadding ? STYLES.body : null, bodyStyle],
onLayout: onLayoutBody
}, loading ? /*#__PURE__*/React.createElement(Skeleton, {
loading: true
}) : children), !isNil(footerJSX) ? /*#__PURE__*/React.createElement(React.Fragment, null, footerDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(View, {
style: [STYLES.footer, footerStyle]
}, footerJSX)) : null);
};
export default /*#__PURE__*/memo(Card);
//# sourceMappingURL=index.js.map