@td-design/react-native/lib/module/notice-bar/index.js

react-native UI组件库

import React from 'react';
import Animated, { FadeOutRight } from 'react-native-reanimated';
import { useTheme } from '@shopify/restyle';
import { useSafeState } from '@td-design/rn-hooks';
import Box from '../box';
import Flex from '../flex';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import AnimatedNotice from './AnimatedNotice';
const DEFAULT_DURATION = 5000;
const NoticeBar = props => {
  const theme = useTheme();
  const {
    icon = /*#__PURE__*/React.createElement(SvgIcon, {
      name: "bells",
      color: theme.colors.func500
    }),
    mode = '',
    text = '',
    textColor = 'text',
    onPress,
    duration = DEFAULT_DURATION,
    animated = false,
    style,
    activeOpacity = 0.6
  } = props;
  const [visible, setVisible] = useSafeState(true);
  const [height, setHeight] = useSafeState(0);
  const handleContentLayout = e => {
    setHeight(e.nativeEvent.layout.height);
  };
  if (!visible) return null;
  const BaseContent = /*#__PURE__*/React.createElement(AnimatedNotice, {
    text,
    textColor,
    icon,
    duration,
    animated,
    height,
    onContentLayout: handleContentLayout
  });
  switch (mode) {
    case 'close':
      return /*#__PURE__*/React.createElement(WrapComp, {
        onPress,
        activeOpacity
      }, /*#__PURE__*/React.createElement(Animated.View, {
        exiting: FadeOutRight,
        style: [{
          position: 'relative',
          backgroundColor: theme.colors.func100,
          paddingVertical: theme.spacing.x2
        }, style]
      }, BaseContent, /*#__PURE__*/React.createElement(Pressable, {
        activeOpacity: 1,
        onPress: () => setVisible(false),
        style: {
          height,
          paddingHorizontal: theme.spacing.x1,
          position: 'absolute',
          zIndex: 99,
          right: 0,
          top: theme.spacing.x2,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: theme.colors.func100
        }
      }, /*#__PURE__*/React.createElement(SvgIcon, {
        name: "close",
        color: theme.colors.func500
      }))));
    case 'link':
      return /*#__PURE__*/React.createElement(WrapComp, {
        onPress,
        activeOpacity
      }, /*#__PURE__*/React.createElement(Flex, {
        backgroundColor: "func100",
        paddingVertical: 'x2',
        style: style,
        position: 'relative',
        overflow: "hidden"
      }, BaseContent, /*#__PURE__*/React.createElement(Box, {
        position: 'absolute',
        right: 0,
        top: theme.spacing.x2,
        height: height,
        zIndex: "99",
        paddingHorizontal: "x1",
        justifyContent: "center",
        alignItems: 'center',
        backgroundColor: "func100"
      }, /*#__PURE__*/React.createElement(SvgIcon, {
        name: "right",
        color: theme.colors.func500
      }))));
    default:
      return /*#__PURE__*/React.createElement(WrapComp, {
        onPress,
        activeOpacity
      }, /*#__PURE__*/React.createElement(Box, {
        backgroundColor: "func100",
        paddingVertical: 'x2',
        style: style,
        overflow: "hidden"
      }, BaseContent));
  }
};
NoticeBar.displayName = 'NoticeBar';
export default NoticeBar;
const WrapComp = _ref => {
  let {
    children,
    onPress,
    activeOpacity
  } = _ref;
  if (onPress) return /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: onPress
  }, children);
  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
};
//# sourceMappingURL=index.js.map