@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 Color from 'color';
import isNil from 'lodash/isNil';
import noop from 'lodash/noop';
import React, { memo, useState, useCallback, useMemo } from 'react';
import { TouchableWithoutFeedback, View } from 'react-native';
import { getDefaultValue, renderTextLikeJSX, pickTouchablePropsField, omitTouchablePropsField } from '../helpers';
import { usePersistFn } from '../hooks';
import ArrowRightOutline from '../icon/arrow-right';
import CrossOutline from '../icon/cross';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';

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

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


const NoticeBar = _ref => {
  let {
    message,
    messageTextStyle,
    status = 'warning',
    mode,
    bordered = false,
    color,
    backgroundColor,
    iconColor,
    wrapable = false,
    square = true,
    size = 'm',
    renderLeftIcon,
    renderRightIcon,
    onPressClose,
    // TouchableWithoutFeedback 相关属性
    style,
    ...restProps
  } = _ref;
  const onPressClosePersistFn = usePersistFn(onPressClose || noop);
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const STYLES = Theme.createStyle(CV, styleCreator);
  const [visible, setVisible] = useState(true);
  const textColor = CV[`notice_bar_${status}_text_color`] || CV.notice_bar_warning_text_color;
  const barBackgroundColor = useMemo(() => Color(textColor).lightness(CV.notice_bar_background_color_lightness).hex(), [CV.notice_bar_background_color_lightness, textColor]); // 修正数据

  color = getDefaultValue(color, textColor);
  backgroundColor = getDefaultValue(backgroundColor, barBackgroundColor);
  iconColor = getDefaultValue(iconColor, color);
  const noticeBarStyles = [STYLES.notice_bar, STYLES[`notice_bar_${size}`], {
    backgroundColor,
    borderRadius: square ? 0 : CV.notice_bar_border_radius,
    borderColor: color,
    borderWidth: bordered ? 1 : 0
  }, style];
  const ModeIcon = getModeIcon(mode);
  const leftIconJSX = renderLeftIcon === null || renderLeftIcon === void 0 ? void 0 : renderLeftIcon(iconColor, CV.notice_bar_icon_size);
  const rightIconJSX = renderRightIcon === null || renderRightIcon === void 0 ? void 0 : renderRightIcon(iconColor, CV.notice_bar_icon_size);
  const messageJSX = renderTextLikeJSX(message, [STYLES.text, {
    color,
    marginLeft: !isNil(leftIconJSX) ? CV.notice_bar_icon_margin_horizontal : 0,
    marginRight: !isNil(rightIconJSX) || mode ? CV.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: CV.notice_bar_icon_size,
      onPress: onPressModeIcon,
      pointerEvents: mode === 'closeable' ? 'auto' : 'none'
    }) : null));
  }

  return null;
};

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