@td-design/react-native/lib/module/list-item/index.js

react-native UI组件库

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, useMemo } from 'react';
import { Keyboard } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
const {
  ONE_PIXEL
} = helpers;
const iconMap = {
  horizontal: 'right',
  down: 'down',
  up: 'up'
};
const Brief = props => {
  const {
    children,
    wrap
  } = props;
  const numberOfLines = wrap ? {} : {
    numberOfLines: 1
  };
  return /*#__PURE__*/React.createElement(Box, {
    marginTop: "x1"
  }, typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({}, numberOfLines, {
    variant: "p2",
    color: "text"
  }), children) : children);
};
const ListItem = _ref => {
  let {
    title,
    brief,
    thumb,
    onPress,
    backgroundColor,
    borderColor = 'border',
    bordered = true,
    style,
    extra,
    arrow,
    wrap = false,
    required = false,
    activeOpacity = 0.6
  } = _ref;
  if (!onPress) return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Content, {
    backgroundColor,
    style,
    required,
    title,
    brief,
    thumb,
    extra,
    arrow,
    wrap
  }), bordered && /*#__PURE__*/React.createElement(Box, {
    width: '100%',
    height: ONE_PIXEL,
    backgroundColor: borderColor
  }));
  return /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: () => {
      Keyboard.dismiss();
      onPress();
    }
  }, /*#__PURE__*/React.createElement(Content, {
    backgroundColor,
    style,
    required,
    title,
    brief,
    thumb,
    extra,
    arrow,
    wrap
  }), bordered && /*#__PURE__*/React.createElement(Box, {
    width: '100%',
    height: ONE_PIXEL,
    backgroundColor: borderColor
  }));
};
ListItem.displayName = 'ListItem';
export default /*#__PURE__*/memo(ListItem);
const Content = _ref2 => {
  let {
    backgroundColor,
    style,
    required,
    thumb,
    title,
    brief,
    wrap,
    extra,
    arrow
  } = _ref2;
  const theme = useTheme();
  const Title = useMemo(() => /*#__PURE__*/React.createElement(Box, {
    paddingLeft: thumb ? 'x1' : 'x0'
  }, typeof title === 'string' ? /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "text",
    numberOfLines: 1
  }, title) : title), [thumb, title]);
  const Extra = useMemo(() => {
    if (!extra) return null;
    if (typeof extra === 'string') {
      const numberOfLines = wrap ? {} : {
        numberOfLines: 1
      };
      return /*#__PURE__*/React.createElement(Text, _extends({
        variant: "p1",
        color: "text",
        style: {
          textAlign: 'right',
          textAlignVertical: 'center'
        }
      }, numberOfLines), extra);
    }
    return extra;
  }, [extra, wrap]);
  const Arrow = useMemo(() => {
    if (!arrow) return null;
    if (typeof arrow === 'string') return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SvgIcon, {
      name: iconMap[arrow],
      color: theme.colors.icon
    }));
    return arrow;
  }, [arrow, theme.colors.icon]);
  return /*#__PURE__*/React.createElement(Box, {
    paddingVertical: "x2",
    paddingHorizontal: 'x2',
    justifyContent: "center",
    style: [{
      backgroundColor
    }, style]
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex, {
    flex: 1
  }, /*#__PURE__*/React.createElement(Flex, {
    marginRight: 'x5',
    justifyContent: "center",
    alignItems: "center"
  }, required && /*#__PURE__*/React.createElement(Text, {
    variant: "p1",
    color: "func600"
  }, "*"), thumb, Title), /*#__PURE__*/React.createElement(Box, {
    flex: 1,
    alignItems: "flex-end"
  }, Extra)), Arrow), !!brief && /*#__PURE__*/React.createElement(Brief, {
    wrap: wrap
  }, brief));
};
//# sourceMappingURL=index.js.map