antd-mobile-taro-ui/es/components/dot-loading/dot-loading.js

以antd-mobile为设计标准，基于taro框架的微信小程序组件库

import React, { memo, useMemo } from 'react';
import classNames from 'classnames';
import { View, Text } from '@tarojs/components';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
const classPrefix = `adm-dot-loading`;
const colorRecord = {
  default: 'var(--adm-color-weak)',
  primary: 'var(--adm-color-primary)',
  white: 'var(--adm-color-white)'
};
const defaultProps = {
  color: 'default'
};
export const DotLoading = memo(p => {
  const props = mergeProps(defaultProps, p);
  const backgroundColor = useMemo(() => {
    var _a;

    return (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color;
  }, [props]);
  return withNativeProps(props, React.createElement(View, {
    className: classNames('adm-loading', classPrefix)
  }, React.createElement(View, {
    className: 'wrapper'
  }, ['a', 'b', 'c'].map(item => React.createElement(Text, {
    key: item,
    className: classNames('dot', item),
    style: {
      backgroundColor
    }
  })))));
});