@fruits-chain/react-native-xiaoshu/lib/module/notice-bar/index.js

React Native UI library

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 React, { memo, useState, useCallback } from 'react';
import { TouchableWithoutFeedback, View } from 'react-native';
import { CrossOutline, ArrowRightOutline } from '../icon';
import { useTheme, widthStyle } from '../theme';
import { usePersistFn } from '../hooks';
import { getDefaultValue, isDef, renderTextLikeJSX, pickTouchablePropsField, omitTouchablePropsField, noop } from '../helpers';
import { createStyles } from './style';

const getModeIcon = mode => {
  switch (mode) {
    case 'closeable':
      return CrossOutline;

    default:
      return ArrowRightOutline;
  }
};
/**
 * 通知栏
 */


const NoticeBar = _ref => {
  let {
    message,
    messageTextStyle,
    type = 'warning',
    mode,
    color,
    backgroundColor,
    iconColor,
    wrapable = false,
    renderLeftIcon,
    renderRightIcon,
    onPressClose,
    // TouchableWithoutFeedback 相关属性
    style,
    ...restProps
  } = _ref;
  const onPressClosePersistFn = usePersistFn(onPressClose || noop);
  const THEME_VAR = useTheme();
  const STYLES = widthStyle(THEME_VAR, createStyles);
  const [visible, setVisible] = useState(true);
  const textColor = THEME_VAR[`notice_bar_${type}_text_color`] || THEME_VAR.notice_bar_warning_text_color;
  const barBackgroundColor = THEME_VAR[`notice_bar_${type}_background_color`] || THEME_VAR.notice_bar_warning_background_color; // 修正数据

  color = getDefaultValue(color, textColor);
  backgroundColor = getDefaultValue(backgroundColor, barBackgroundColor);
  iconColor = getDefaultValue(iconColor, color);
  const noticeBarStyles = [STYLES.noticeBar, {
    backgroundColor
  }, style];
  const ModeIcon = getModeIcon(mode);
  const leftIconJSX = renderLeftIcon === null || renderLeftIcon === void 0 ? void 0 : renderLeftIcon(iconColor, THEME_VAR.notice_bar_icon_size);
  const rightIconJSX = renderRightIcon === null || renderRightIcon === void 0 ? void 0 : renderRightIcon(iconColor, THEME_VAR.notice_bar_icon_size);
  const messageJSX = renderTextLikeJSX(message, [STYLES.text, {
    color,
    marginLeft: isDef(leftIconJSX) ? THEME_VAR.notice_bar_icon_margin_horizontal : 0,
    marginRight: isDef(rightIconJSX) || mode ? THEME_VAR.notice_bar_icon_margin_horizontal : 0
  }, messageTextStyle], {
    numberOfLines: wrapable ? undefined : 1
  });
  const onPressModeIcon = useCallback(() => {
    if (mode === 'closeable') {
      setVisible(false);
      onPressClosePersistFn();
    }
  }, [mode, onPressClosePersistFn]);
  const touchableProps = pickTouchablePropsField(restProps);
  const viewProps = omitTouchablePropsField(restProps);

  if (visible) {
    return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, touchableProps, /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
      style: noticeBarStyles
    }), leftIconJSX, messageJSX, rightIconJSX, mode ? /*#__PURE__*/React.createElement(ModeIcon, {
      color: iconColor,
      size: THEME_VAR.notice_bar_icon_size,
      onPress: onPressModeIcon,
      pointerEvents: mode === 'closeable' ? 'auto' : 'none'
    }) : null));
  }

  return null;
};

export default /*#__PURE__*/memo(NoticeBar);
//# sourceMappingURL=index.js.map