@nebula-rn/components 0.0.1

package/src/Swiper/carousel.tsx

@@ -0,0 +1,119 @@
+import React, {
+  Children,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  StyleProp,
+  ViewStyle,
+  LayoutChangeEvent,
+} from 'react-native';
+import CarouselView, {
+  ICarouselInstance,
+} from 'react-native-reanimated-carousel';
+import { DefaultPagination, PaginationProps } from './pagination';
+
+export interface CarouselProps {
+  infinite?: boolean;
+  dots?: boolean;
+  autoplay?: boolean;
+  autoplayInterval?: number;
+  selectedIndex?: number;
+  vertical?: boolean;
+  pagination?: (props: PaginationProps) => ReactNode;
+  dotStyle?: StyleProp<ViewStyle>;
+  dotActiveStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  afterChange?: (index: number) => void;
+}
+
+export const Carousel: FC<PropsWithChildren<CarouselProps>> = props => {
+  const {
+    infinite = false,
+    dots = true,
+    autoplay = false,
+    autoplayInterval = 3000,
+    selectedIndex = 0,
+    vertical = false,
+    pagination: Pagination = DefaultPagination,
+    dotStyle = {},
+    dotActiveStyle = {},
+    children,
+    style,
+    afterChange,
+  } = props;
+
+  const carouselRef = useRef<ICarouselInstance>(null);
+  const [layout, setLayout] = useState({ width: 0, height: 0 });
+
+  const data = useMemo(() => Children.toArray(children), [children]);
+  const count = data.length;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width: w, height: h } = event.nativeEvent.layout;
+    if (w > 0 && h > 0) {
+      setLayout({ width: w, height: h });
+    }
+  };
+
+  const onSnapToItem = (index: number) => {
+    if (afterChange) {
+      afterChange(index);
+    }
+  };
+
+  const width = layout.width;
+  const height = layout.height || 200;
+
+  if (!children || count === 0) {
+    return (
+      <Text style={{ backgroundColor: 'white' }}>
+        You are supposed to add children inside Carousel
+      </Text>
+    );
+  }
+
+  return (
+    <View onLayout={onLayout} style={[styles.wrapperStyle, style]}>
+      {width && (
+        <CarouselView
+          ref={carouselRef}
+          loop={infinite}
+          width={width}
+          height={height}
+          vertical={vertical}
+          autoPlay={autoplay}
+          autoPlayInterval={autoplayInterval}
+          data={data}
+          defaultIndex={selectedIndex}
+          onSnapToItem={onSnapToItem}
+          renderItem={({ item }) => <View style={{ flex: 1 }}>{item}</View>}
+        />
+      )}
+
+      {dots && (
+        <Pagination
+          styles={styles}
+          vertical={vertical}
+          current={selectedIndex}
+          count={count}
+          dotStyle={dotStyle}
+          dotActiveStyle={dotActiveStyle}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapperStyle: {
+    overflow: 'hidden',
+  },
+});

package/src/Swiper/index.tsx

@@ -0,0 +1,64 @@
+import { FC, PropsWithChildren } from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import { Carousel } from './carousel';
+
+export interface SwiperEvent {
+  current: number;
+}
+
+export interface SwiperProps {
+  style?: StyleProp<ViewStyle>;
+  indicatorDots?: boolean;
+  indicatorColor?: string;
+  indicatorActiveColor?: string;
+  autoplay?: boolean;
+  current?: number;
+  interval?: number;
+  circular?: boolean;
+  vertical?: boolean;
+  onChange?: (event: SwiperEvent) => void;
+  onAnimationFinish?: (event: SwiperEvent) => void;
+}
+
+export const Swiper: FC<PropsWithChildren<SwiperProps>> = props => {
+  const {
+    children,
+    style,
+    indicatorDots,
+    indicatorColor = 'rgba(0,0,0,0.3)',
+    indicatorActiveColor = '#000',
+    autoplay,
+    current = 0,
+    interval = 5000,
+    circular,
+    vertical,
+    onChange,
+    onAnimationFinish,
+  } = props;
+
+  const onAfterChangeHandler = (index: number) => {
+    if (onChange) {
+      onChange({ current: index });
+    }
+    if (onAnimationFinish) {
+      onAnimationFinish({ current: index });
+    }
+  };
+
+  return (
+    <Carousel
+      style={style}
+      dots={indicatorDots}
+      dotStyle={{ backgroundColor: indicatorColor }}
+      dotActiveStyle={{ backgroundColor: indicatorActiveColor }}
+      autoplay={autoplay}
+      selectedIndex={current}
+      autoplayInterval={interval}
+      infinite={circular}
+      vertical={vertical}
+      afterChange={onAfterChangeHandler}
+    >
+      {children}
+    </Carousel>
+  );
+};

package/src/Swiper/pagination.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+export interface PaginationProps {
+  vertical?: boolean;
+  current: number;
+  count: number;
+  styles: any;
+  dotStyle?: StyleProp<ViewStyle>;
+  dotActiveStyle?: StyleProp<ViewStyle>;
+}
+
+export const DefaultPagination: React.FC<PaginationProps> = (
+  props: PaginationProps,
+) => {
+  const { current, vertical, count, dotStyle, dotActiveStyle } = props;
+  const positionStyle = vertical ? 'paginationY' : 'paginationX';
+  const flexDirection = vertical ? 'column' : 'row';
+  const arr: any = [];
+  for (let i = 0; i < count; i++) {
+    arr.push(
+      <View
+        key={`dot-${i}`}
+        style={[
+          styles.pointStyle,
+          styles.spaceStyle,
+          dotStyle,
+          i === current && styles.pointActiveStyle,
+          i === current && dotActiveStyle,
+        ]}
+      />,
+    );
+  }
+  return (
+    <View style={[styles.pagination, styles[positionStyle]]}>
+      <View style={{ flexDirection }}>{arr}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  pagination: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  paginationX: {
+    bottom: 10,
+    left: 0,
+    right: 0,
+  },
+  paginationY: {
+    right: 10,
+    top: 0,
+    bottom: 0,
+  },
+  pointStyle: {
+    width: 8,
+    height: 8,
+    borderRadius: 8,
+    backgroundColor: '#999',
+  },
+  pointActiveStyle: {
+    backgroundColor: '#333',
+  },
+  spaceStyle: {
+    marginHorizontal: 2.5,
+    marginVertical: 3,
+  },
+});

package/src/Video/index.tsx

@@ -0,0 +1,303 @@
+import { useCallback, useMemo, useRef, useState, FC, ReactNode } from 'react';
+import {
+  Image,
+  ImageStyle,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import RNCamera, {
+  OnLoadData,
+  OnProgressData,
+  ResizeMode,
+  VideoRef,
+} from 'react-native-video';
+import { formatTime } from './utils';
+
+export interface VideoTimeUpdateEvent {
+  currentTime: number;
+  duration: number;
+}
+
+export interface VideoFullscreenChangeEvent {
+  direction: 'vertical' | 'horizontal';
+  fullScreen: boolean;
+}
+
+export interface VideoMetaDataEvent {
+  width: number;
+  height: number;
+  duration: number;
+  durationMillis?: number;
+}
+
+export interface VideoErrorEvent {
+  errMsg: string;
+}
+
+export interface VideoProps {
+  src: string;
+  duration?: number;
+  controls?: boolean;
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  initialTime?: number;
+  objectFit?: 'contain' | 'fill' | 'cover';
+  poster?: string;
+  showCenterPlayBtn?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+  onLoad?: () => void;
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  onError?: (event: VideoErrorEvent) => void;
+  onTimeUpdate?: (event: VideoTimeUpdateEvent) => void;
+  onFullscreenChange?: (event: VideoFullscreenChangeEvent) => void;
+  onLoadedMetaData?: (event: VideoMetaDataEvent) => void;
+}
+
+export const Video: FC<VideoProps> = props => {
+  const {
+    src = '',
+    autoplay = false,
+    style,
+    initialTime = 0,
+    loop = false,
+    muted = false,
+    objectFit = 'contain',
+    poster,
+    controls = true,
+    showCenterPlayBtn = true,
+    duration: durationProp,
+    onLoad,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+    onLoadedMetaData,
+    onFullscreenChange,
+    onTimeUpdate,
+    children,
+  } = props;
+
+  const videoRef = useRef<VideoRef>(null);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(autoplay);
+  const [isFirst, setIsFirst] = useState(true);
+  const [durationMs, setDurationMs] = useState<number | null>(null);
+
+  const onLoadHandler = useCallback(
+    (data: OnLoadData) => {
+      const loadedDurationMs = data.duration * 1000;
+      setDurationMs(loadedDurationMs);
+
+      if (initialTime > 0) {
+        videoRef.current?.seek(initialTime / 1000);
+      }
+
+      if (onLoad) {
+        onLoad();
+      }
+
+      if (onLoadedMetaData) {
+        onLoadedMetaData({
+          width: data.naturalSize.width,
+          height: data.naturalSize.height,
+          duration: loadedDurationMs,
+          durationMillis: loadedDurationMs,
+        });
+      }
+    },
+    [initialTime, onLoad, onLoadedMetaData],
+  );
+
+  const onProgressHandler = useCallback(
+    (data: OnProgressData) => {
+      if (onTimeUpdate) {
+        onTimeUpdate({
+          currentTime: data.currentTime * 1000,
+          duration: durationMs || data.seekableDuration * 1000,
+        });
+      }
+    },
+    [durationMs, onTimeUpdate],
+  );
+
+  const onErrorHandler = useCallback(
+    (error: any) => {
+      if (onError) {
+        onError({
+          errMsg: error.error?.localizedDescription || 'Video Error',
+        });
+      }
+    },
+    [onError],
+  );
+
+  const onEndedHandler = useCallback(() => {
+    if (onEnded) {
+      onEnded();
+    }
+  }, [onEnded]);
+
+  const onPlaybackStateHandler = useCallback(
+    ({ isPlaying: playing }: { isPlaying: boolean }) => {
+      setIsPlaying(playing);
+      if (playing) {
+        setIsFirst(false);
+        if (onPlay) onPlay();
+      } else if (!isFirst) {
+        if (onPause) onPause();
+      }
+    },
+    [isFirst, onPlay, onPause],
+  );
+
+  const onFullscreenWillPresentHandler = useCallback(() => {
+    setIsFullScreen(true);
+    if (onFullscreenChange) {
+      onFullscreenChange({
+        fullScreen: true,
+        direction: 'vertical',
+      });
+    }
+  }, [onFullscreenChange]);
+
+  const onFullscreenWillDismissHandler = useCallback(() => {
+    setIsFullScreen(false);
+    if (onFullscreenChange) {
+      onFullscreenChange({
+        fullScreen: false,
+        direction: 'vertical',
+      });
+    }
+  }, [onFullscreenChange]);
+
+  const onPlayVideoHandler = useCallback(() => {
+    setIsPlaying(true);
+    setIsFirst(false);
+  }, []);
+
+  const resizeMode = useMemo(() => {
+    const map: Record<string, ResizeMode> = {
+      contain: ResizeMode.CONTAIN,
+      cover: ResizeMode.COVER,
+      fill: ResizeMode.STRETCH,
+    };
+    return map[objectFit] || ResizeMode.CONTAIN;
+  }, [objectFit]);
+
+  const computedDuration = formatTime(durationProp || durationMs || 0);
+  const showPlayBtn = (isFirst || showCenterPlayBtn) && !isPlaying;
+
+  return (
+    <View style={[styles.video, style]}>
+      <View
+        style={[
+          styles.videoContainer,
+          isFullScreen && styles.videoTypeFullscreen,
+        ]}
+      >
+        <RNCamera
+          ref={videoRef}
+          source={{ uri: src }}
+          style={styles.fullSize}
+          paused={!isPlaying}
+          repeat={loop}
+          muted={muted}
+          controls={controls}
+          resizeMode={resizeMode}
+          onLoad={onLoadHandler}
+          onProgress={onProgressHandler}
+          onEnd={onEndedHandler}
+          onError={onErrorHandler}
+          onPlaybackStateChanged={onPlaybackStateHandler}
+          onFullscreenPlayerWillPresent={onFullscreenWillPresentHandler}
+          onFullscreenPlayerWillDismiss={onFullscreenWillDismissHandler}
+          progressUpdateInterval={250}
+        />
+
+        {showPlayBtn && (
+          <View style={styles.videoCover}>
+            {poster && isFirst && (
+              <Image source={{ uri: poster }} style={styles.videoPoster} />
+            )}
+            <Pressable onPress={onPlayVideoHandler}>
+              <Image
+                source={require('../assets/video/play.png')}
+                style={styles.videoCoverPlayButton as ImageStyle}
+              />
+            </Pressable>
+            {computedDuration && (
+              <Text style={styles.videoCoverDuration}>{computedDuration}</Text>
+            )}
+          </View>
+        )}
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullSize: {
+    width: '100%',
+    height: '100%',
+  },
+  video: {
+    width: '100%',
+    height: 225,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  videoContainer: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+  },
+  videoTypeFullscreen: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    zIndex: 999,
+  },
+  videoCover: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(1, 1, 1, 0.5)',
+    zIndex: 1,
+  },
+  videoPoster: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  videoCoverPlayButton: {
+    width: 30,
+    height: 30,
+  },
+  videoCoverDuration: {
+    color: '#fff',
+    fontSize: 16,
+    marginTop: 10,
+  },
+});

package/src/Video/utils.ts

@@ -0,0 +1,14 @@
+export const formatTime = (time: number): string => {
+  if (time === null) return '';
+  const sec = Math.round((time / 1000) % 60);
+  const min = Math.floor((time - sec) / 1000 / 60);
+  return `${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`;
+};
+
+export const calcDist = (x: number, y: number): number => {
+  return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+};
+
+export const normalizeNumber = (number: number): number => {
+  return Math.max(-1, Math.min(number, 1));
+};

package/src/WebView/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import {
+  WebView as RNWebView,
+  WebViewProps as RNWebViewProps,
+} from 'react-native-webview';
+
+export interface WebViewProps extends Partial<RNWebViewProps> {
+  style?: StyleProp<ViewStyle>;
+  src?: string;
+  html?: string;
+}
+
+export const WebView: FC<WebViewProps> = ({ style, src, html, ...rest }) => {
+  const source = html ? { html } : { uri: src || '' };
+
+  return (
+    <RNWebView
+      {...rest}
+      source={source}
+      style={style}
+      originWhitelist={['*']}
+    />
+  );
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+// Thanks to the Taro project for the inspiration that helped shape this component library.
+// https://github.com/NervJS/taro.git
+export * from './Camera';
+export * from './Map';
+export * from './Progress';
+export * from './RichText';
+export * from './Slider';
+export * from './Swiper';
+export * from './Video';
+export * from './WebView';

package/src/utils/index.ts

@@ -0,0 +1,12 @@
+export const omit = (
+  obj: any = {},
+  fields: string[] = [],
+): { [key: string]: any } => {
+  const shallowCopy = { ...obj };
+  fields.forEach(key => {
+    delete shallowCopy[key];
+  });
+  return shallowCopy;
+};
+
+export const noop = (..._args: any[]): void => {};