@fruits-chain/react-native-xiaoshu/lib/module/loading/loading.js

🌈 React Native UI library

import isNil from 'lodash/isNil';
import React, { isValidElement, memo } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { getDefaultValue } from '../helpers';
import Theme from '../theme';
import Circular from './loading-circular';
import Spinner from './loading-spinner';
import { varCreator } from './style';
/**
 * Loading 加载
 * 加载图标，用于表示加载中的过渡状态。
 */

const Loading = _ref => {
  let {
    children,
    style,
    textStyle,
    size,
    color,
    textSize,
    vertical = false,
    type = 'circular'
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const ICON_COLOR = getDefaultValue(color, CV.loading_icon_color);
  const ICON_SIZE = getDefaultValue(size, CV.loading_icon_size);
  const textJSX = !isNil(children) ? /*#__PURE__*/isValidElement(children) ? children : /*#__PURE__*/React.createElement(Text, {
    style: StyleSheet.flatten([{
      fontSize: textSize || CV.loading_text_font_size,
      color: color || CV.loading_text_color,
      marginLeft: vertical ? 0 : CV.loading_gap,
      marginTop: vertical ? CV.loading_gap : 0
    }, textStyle])
  }, children) : null;
  return /*#__PURE__*/React.createElement(View, {
    style: StyleSheet.flatten([STYLES.loading, vertical ? STYLES.loading_vertical : null, style])
  }, type === 'circular' ? /*#__PURE__*/React.createElement(Circular, {
    size: ICON_SIZE,
    color: ICON_COLOR
  }) : /*#__PURE__*/React.createElement(Spinner, {
    size: ICON_SIZE,
    color: ICON_COLOR
  }), textJSX);
};

const STYLES = StyleSheet.create({
  loading: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  loading_vertical: {
    flexDirection: 'column'
  }
});
export default /*#__PURE__*/memo(Loading);
//# sourceMappingURL=loading.js.map