@100mslive/react-native-room-kit/lib/module/components/PaginationDots.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useHMSRoomStyleSheet } from '../hooks-util';
const _PaginationDots = ({
  list,
  activeIndex,
  style
}) => {
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    dot: {
      backgroundColor: theme.palette.on_surface_low
    },
    activeDot: {
      backgroundColor: theme.palette.on_surface_high
    }
  }), []);
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, style]
  }, list.map((listItem, idx) => {
    const isActive = activeIndex === idx;
    const isFirst = idx === 0;
    return /*#__PURE__*/React.createElement(View, {
      key: (listItem === null || listItem === void 0 ? void 0 : listItem.id) || idx.toString(),
      style: [styles.dot, hmsRoomStyles.dot, isFirst ? styles.firstDot : null, isActive ? hmsRoomStyles.activeDot : null]
    });
  }));
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 16
  },
  dot: {
    width: 8,
    aspectRatio: 1,
    borderRadius: 4,
    marginLeft: 12
  },
  firstDot: {
    marginLeft: 0
  }
});
export const PaginationDots = /*#__PURE__*/React.memo(_PaginationDots);
//# sourceMappingURL=PaginationDots.js.map