@td-design/react-native/lib/module/accordion/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, { useMemo } from 'react';
import { FlatList } from 'react-native';
import Animated from 'react-native-reanimated';
import { useTheme } from '@shopify/restyle';
import { useSafeState } from '@td-design/rn-hooks';
import Box from '../box';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
import useAccordion from './useAccordion';
const Accordion = _ref => {
  let {
    sections = [],
    multiple = true,
    activeOpacity = 0.6,
    customIcon,
    accordionStyle,
    headerStyle,
    contentStyle
  } = _ref;
  const [currentIndex, setCurrentIndex] = useSafeState();
  return /*#__PURE__*/React.createElement(FlatList, {
    data: sections,
    keyExtractor: (_, index) => `${index}`,
    renderItem: _ref2 => {
      let {
        item,
        index
      } = _ref2;
      return /*#__PURE__*/React.createElement(AccordionItem, _extends({}, item, {
        multiple: multiple,
        customIcon: customIcon,
        currentIndex: currentIndex,
        index: index,
        activeOpacity: activeOpacity,
        onPress: setCurrentIndex,
        headerStyle: headerStyle,
        contentStyle: contentStyle
      }));
    },
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false,
    bounces: false,
    decelerationRate: 'fast',
    contentContainerStyle: accordionStyle,
    style: {
      flexGrow: 0
    }
  });
};
const AccordionItem = _ref3 => {
  let {
    title,
    content,
    customIcon,
    multiple,
    currentIndex,
    index,
    activeOpacity,
    onPress,
    contentStyle,
    headerStyle
  } = _ref3;
  const theme = useTheme();
  const {
    iconStyle,
    heightStyle,
    progress,
    contentRef,
    handlePress
  } = useAccordion({
    multiple,
    currentIndex,
    index,
    onPress
  });
  const Title = useMemo(() => {
    if (typeof title === 'string') {
      return /*#__PURE__*/React.createElement(Text, {
        variant: "p0",
        color: "text"
      }, title);
    }
    return title;
  }, [title]);
  const Content = useMemo(() => {
    if (typeof content === 'string') {
      return /*#__PURE__*/React.createElement(Text, {
        variant: "p1",
        selectable: true,
        color: "text"
      }, content);
    }
    return content;
  }, [content]);
  return /*#__PURE__*/React.createElement(Box, {
    backgroundColor: 'white',
    overflow: 'hidden'
  }, /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: handlePress,
    style: [{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: theme.spacing.x2,
      paddingVertical: theme.spacing.x2,
      borderBottomWidth: helpers.ONE_PIXEL,
      borderBottomColor: theme.colors.border,
      backgroundColor: theme.colors.white
    }, headerStyle]
  }, Title, customIcon ? customIcon({
    progress
  }) : /*#__PURE__*/React.createElement(Animated.View, {
    style: iconStyle
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "down",
    color: theme.colors.icon,
    size: helpers.px(20)
  }))), /*#__PURE__*/React.createElement(Animated.View, {
    style: heightStyle
  }, /*#__PURE__*/React.createElement(Animated.View, {
    ref: contentRef,
    collapsable: false,
    style: [contentStyle, {
      position: 'absolute',
      width: '100%',
      top: 0
    }]
  }, Content)));
};
Accordion.displayName = 'Accordion';
export default Accordion;
//# sourceMappingURL=index.js.map