@td-design/react-native/lib/module/carousel/Bullets.js

react-native UI组件库

import React, { memo } from 'react';
import { StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import { mix, mixColor } from '../utils/redash';
const justifyContentMap = {
  left: 'flex-start',
  right: 'flex-end',
  center: 'center'
};
const Bullets = _ref => {
  let {
    indicatorEnabled,
    indicatorSize,
    activeColor,
    inactiveColor,
    currentIndex,
    count,
    width,
    align
  } = _ref;
  if (!indicatorEnabled) return null;
  const styles = StyleSheet.create({
    dot: {
      bottom: indicatorSize,
      justifyContent: justifyContentMap[align]
    }
  });
  return /*#__PURE__*/React.createElement(Box, {
    position: 'absolute',
    alignItems: 'center',
    width: width,
    left: 0,
    right: 0,
    flexDirection: 'row',
    style: styles.dot
  }, Array(count).fill('').map((_, index) => /*#__PURE__*/React.createElement(Dot, {
    key: index,
    isCurrent: currentIndex === index,
    activeColor,
    inactiveColor,
    indicatorSize
  })));
};
Bullets.displayName = 'Bullets';
export default /*#__PURE__*/memo(Bullets);
const Dot = /*#__PURE__*/memo(props => {
  const theme = useTheme();
  const {
    isCurrent,
    activeColor = theme.colors.gray50,
    inactiveColor = theme.colors.gray200,
    indicatorSize
  } = props;
  const backgroundColor = mixColor(+isCurrent, inactiveColor, activeColor);
  const scale = mix(+isCurrent, 1, 1.2);
  const styles = StyleSheet.create({
    dot: {
      width: indicatorSize,
      height: indicatorSize,
      borderRadius: indicatorSize / 2,
      backgroundColor,
      transform: [{
        scale
      }],
      marginHorizontal: indicatorSize / 2
    }
  });
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: styles.dot
  });
});
//# sourceMappingURL=Bullets.js.map