@td-design/react-native/lib/module/collapse-text/index.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import { useBoolean } from '@td-design/rn-hooks';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import Text from '../text';
const {
  px
} = helpers;
const CollapseText = _ref => {
  let {
    text,
    defaultNumberOfLines = 2,
    lineHeight = px(18),
    textStyle,
    textContainerStyle,
    expandText = '展开',
    unExpandText = '收起',
    expandStyle,
    activeOpacity = 0.6
  } = _ref;
  const [isOverflow, {
    set: setOverflow
  }] = useBoolean(false);
  const [hidden, {
    toggle: toggleHidden
  }] = useBoolean(true);
  const handleLayout = e => {
    const {
      height
    } = e.nativeEvent.layout;
    if (height - 1 < lineHeight * defaultNumberOfLines) {
      setOverflow(false);
    } else {
      setOverflow(true);
    }
  };
  const styles = StyleSheet.create({
    container: {
      position: 'relative'
    },
    text: {
      position: 'absolute',
      zIndex: -99999,
      opacity: 0
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
    style: [textContainerStyle, styles.container]
  }, /*#__PURE__*/React.createElement(Text, {
    numberOfLines: hidden ? defaultNumberOfLines : undefined,
    ellipsizeMode: "tail",
    fontSize: px(14),
    lineHeight: lineHeight,
    color: "text",
    style: textStyle,
    selectable: true
    // @ts-ignore
    ,
    userSelect: "all"
  }, text), isOverflow && /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "flex-end",
    paddingRight: "x1"
  }, /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: toggleHidden
  }, /*#__PURE__*/React.createElement(Text, {
    fontSize: px(12),
    color: "text",
    style: expandStyle
  }, hidden ? expandText : unExpandText))), /*#__PURE__*/React.createElement(Text, {
    fontSize: px(14),
    lineHeight: lineHeight,
    onLayout: handleLayout,
    style: [styles.text, textStyle]
  }, text)));
};
CollapseText.displayName = 'CollapseText';
export default CollapseText;
//# sourceMappingURL=index.js.map