@nebula-rn/components 0.0.1

package/src/Map/index.tsx

@@ -0,0 +1,275 @@
+import React, { useCallback, FC } from 'react';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
+import MapView, {
+  Callout,
+  Circle,
+  Marker,
+  Polygon,
+  Polyline,
+  Region,
+  MapPressEvent,
+  Details,
+} from 'react-native-maps';
+
+const { width, height } = Dimensions.get('window');
+const ASPECT_RATIO = width / height;
+const LATITUDE_DELTA = 0.0922;
+const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
+
+export interface CalloutItem {
+  content?: string;
+  color?: string;
+  fontSize?: number;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  bgColor?: string;
+  padding?: number;
+  display?: 'BYCLICK' | 'ALWAYS';
+  textAlign?: 'left' | 'right' | 'center';
+}
+
+export interface MarkerItem {
+  id: number;
+  latitude: number;
+  longitude: number;
+  title?: string;
+  iconPath: string;
+  rotate?: number;
+  alpha?: number;
+  callout?: CalloutItem;
+  anchor?: { x: number; y: number };
+}
+
+export interface PolylineItem {
+  points: Array<{ latitude: number; longitude: number }>;
+  color?: string;
+  width?: number;
+}
+
+export interface PolygonItem {
+  points: Array<{ latitude: number; longitude: number }>;
+  strokeWidth?: number;
+  strokeColor?: string;
+  fillColor?: string;
+}
+
+export interface CircleItem {
+  latitude: number;
+  longitude: number;
+  color?: string;
+  fillColor?: string;
+  radius: number;
+  strokeWidth?: number;
+}
+
+export interface Coordinate {
+  latitude: number;
+  longitude: number;
+}
+
+export interface MapProps {
+  longitude: number;
+  latitude: number;
+  scale?: number;
+  markers?: Array<MarkerItem>;
+  polyline?: Array<PolylineItem>;
+  polygons?: Array<PolygonItem>;
+  circles?: Array<CircleItem>;
+  includePoints?: Array<Coordinate>;
+  showLocation?: boolean;
+  subkey?: string;
+  enable3D?: boolean;
+  showCompass?: boolean;
+  enableOverlooking?: boolean;
+  enableZoom?: boolean;
+  enableScroll?: boolean;
+  enableRotate?: boolean;
+
+  onMarkerClick?: (markerId: number) => void;
+  onCalloutClick?: (markerId: number) => void;
+  onControlClick?: (controlId?: number) => void;
+  onRegionChange?: (event: {
+    type: 'begin' | 'end';
+    timeStamp: number;
+    causedBy?: 'scale' | 'drag' | 'update';
+  }) => void;
+  onClick?: (coordinate: Coordinate) => void;
+  onUpdated?: () => void;
+  onPoiClick?: (event: any) => void;
+}
+
+export const Map: FC<MapProps> = props => {
+  const {
+    latitude = 0,
+    longitude = 0,
+    markers = [],
+    polyline = [],
+    polygons = [],
+    circles = [],
+    showLocation = false,
+    showCompass = true,
+    enableZoom = true,
+    enableScroll = true,
+    enableRotate = true,
+    onMarkerClick,
+    onCalloutClick,
+    onRegionChange,
+    onClick,
+    onUpdated = () => {},
+    onPoiClick = () => {},
+  } = props;
+
+  const onRenderCallout = useCallback(
+    (marker: MarkerItem) => {
+      const { id, callout } = marker;
+      if (!callout) return null;
+
+      return (
+        <Callout onPress={() => onCalloutClick?.(id)}>
+          <View
+            style={[
+              styles.calloutContainer,
+              {
+                borderRadius: callout.borderRadius,
+                borderWidth: callout.borderWidth,
+                borderColor: callout.borderColor,
+                backgroundColor: callout.bgColor,
+                padding: callout.padding,
+              },
+            ]}
+          >
+            <Text
+              style={{
+                fontSize: callout.fontSize,
+                color: callout.color,
+                textAlign: callout.textAlign,
+              }}
+            >
+              {callout.content}
+            </Text>
+          </View>
+        </Callout>
+      );
+    },
+    [onCalloutClick],
+  );
+
+  const onHandleRegionChange = useCallback(
+    (region: Region, details: Details) => {
+      onRegionChange?.({
+        type: 'begin',
+        timeStamp: Date.now(),
+        causedBy: details.isGesture ? 'drag' : 'update',
+      });
+    },
+    [onRegionChange],
+  );
+
+  const onHandleRegionChangeComplete = useCallback(
+    (region: Region, details: Details) => {
+      onRegionChange?.({
+        type: 'end',
+        timeStamp: Date.now(),
+        causedBy: details.isGesture ? 'drag' : 'update',
+      });
+    },
+    [onRegionChange],
+  );
+
+  const onHandleMapPress = useCallback(
+    (e: MapPressEvent) => {
+      onClick?.(e.nativeEvent.coordinate);
+    },
+    [onClick],
+  );
+
+  const onHandleMarkerPress = useCallback(
+    (id: number) => {
+      onMarkerClick?.(id);
+    },
+    [onMarkerClick],
+  );
+
+  return (
+    <MapView
+      style={styles.map}
+      region={{
+        latitude,
+        longitude,
+        latitudeDelta: LATITUDE_DELTA,
+        longitudeDelta: LONGITUDE_DELTA,
+      }}
+      minZoomLevel={5}
+      maxZoomLevel={18}
+      showsUserLocation={showLocation}
+      showsCompass={showCompass}
+      zoomEnabled={enableZoom}
+      scrollEnabled={enableScroll}
+      rotateEnabled={enableRotate}
+      onRegionChange={onHandleRegionChange}
+      onRegionChangeComplete={onHandleRegionChangeComplete}
+      onPress={onHandleMapPress}
+      onMapReady={onUpdated}
+      onPoiClick={onPoiClick}
+    >
+      {markers.map(marker => (
+        <Marker
+          id={`marker-${marker.id}`}
+          coordinate={{
+            latitude: marker.latitude,
+            longitude: marker.longitude,
+          }}
+          title={marker.title}
+          image={marker.iconPath ? { uri: marker.iconPath } : undefined}
+          rotation={marker.rotate}
+          opacity={marker.alpha}
+          anchor={marker.anchor}
+          onPress={() => onHandleMarkerPress(marker.id)}
+        >
+          {onRenderCallout(marker)}
+        </Marker>
+      ))}
+
+      {polyline.map((p, index) => (
+        <Polyline
+          id={`polyline-${index}`}
+          coordinates={p.points}
+          strokeColor={p.color}
+          strokeWidth={p.width}
+        />
+      ))}
+
+      {polygons.map((p, index) => (
+        <Polygon
+          id={`polygon-${index}`}
+          coordinates={p.points}
+          strokeColor={p.strokeColor}
+          strokeWidth={p.strokeWidth}
+          fillColor={p.fillColor}
+        />
+      ))}
+
+      {circles.map((c, index) => (
+        <Circle
+          id={`circle-${index}`}
+          center={{ latitude: c.latitude, longitude: c.longitude }}
+          strokeColor={c.color}
+          fillColor={c.fillColor}
+          radius={c.radius}
+          strokeWidth={c.strokeWidth}
+        />
+      ))}
+    </MapView>
+  );
+};
+
+const styles = StyleSheet.create({
+  map: {
+    flex: 1,
+  },
+  calloutContainer: {
+    backgroundColor: 'white',
+    minWidth: 100,
+  },
+});

package/src/Progress/index.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, FC } from 'react';
+import {
+  Animated,
+  DimensionValue,
+  Easing,
+  Text,
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export interface ProgressActiveEvent {
+  percent: number;
+}
+
+export interface ProgressProps {
+  style?: StyleProp<ViewStyle>;
+  percent: number;
+  showInfo?: boolean;
+  borderRadius?: number | string;
+  fontSize?: number | string;
+  strokeWidth?: number | string;
+  activeColor?: string;
+  backgroundColor?: string;
+  active?: boolean;
+  activeMode?: 'backwards' | 'forwards';
+  onActiveEnd?: (event: ProgressActiveEvent) => void;
+}
+
+export const Progress: FC<ProgressProps> = ({
+  style,
+  percent = 0,
+  showInfo,
+  borderRadius = 0,
+  strokeWidth = 6,
+  activeColor = '#09BB07',
+  backgroundColor = '#EBEBEB',
+  active,
+  activeMode = 'backwards',
+  onActiveEnd,
+}) => {
+  const valve = useRef(new Animated.Value(0)).current;
+  const prevPercentRef = useRef(0);
+
+  useEffect(() => {
+    const toValue = percent / 100;
+
+    if (!active || (activeMode !== 'backwards' && activeMode !== 'forwards')) {
+      Animated.timing(valve, {
+        toValue,
+        duration: 0,
+        useNativeDriver: false,
+      }).start();
+      prevPercentRef.current = percent;
+      return;
+    }
+
+    const sequence: Animated.CompositeAnimation[] = [];
+    const duration =
+      ((activeMode === 'forwards'
+        ? Math.abs(percent - prevPercentRef.current)
+        : percent) /
+        100) *
+      1000;
+
+    if (activeMode === 'backwards') {
+      sequence.push(
+        Animated.timing(valve, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: false,
+        }),
+      );
+    }
+
+    sequence.push(
+      Animated.timing(valve, {
+        toValue,
+        easing: Easing.linear,
+        duration,
+        useNativeDriver: false,
+      }),
+    );
+
+    const onCompleteAnimation = () => {
+      if (onActiveEnd) {
+        onActiveEnd({ percent });
+      }
+    };
+
+    Animated.sequence(sequence).start(onCompleteAnimation);
+    prevPercentRef.current = percent;
+  }, [active, activeMode, percent, valve, onActiveEnd]);
+
+  const width = valve.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <View
+        style={[
+          styles.bar,
+          {
+            height: strokeWidth as DimensionValue,
+            backgroundColor,
+          },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.barThumb,
+            {
+              width,
+              height: '100%',
+              backgroundColor: activeColor,
+              borderBottomRightRadius: Number(borderRadius),
+              borderTopRightRadius: Number(borderRadius),
+            },
+          ]}
+        />
+      </View>
+      {showInfo && <Text style={styles.info}>{percent}%</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  bar: {
+    flexGrow: 1,
+  },
+  barThumb: {},
+  info: {
+    marginLeft: 15,
+  },
+});

package/src/RichText/index.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useRef, useCallback, FC } from 'react';
+import { View, StyleProp, ViewStyle, StyleSheet } from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+
+export interface RichTextProps {
+  style?: StyleProp<ViewStyle>;
+  html?: string;
+}
+
+export const RichText: FC<RichTextProps> = props => {
+  const { style, html = '' } = props;
+  const [webViewHeight, setWebViewHeight] = useState<number>(0);
+  const webviewRef = useRef<WebView>(null);
+
+  const onMessage = useCallback((event: WebViewMessageEvent): void => {
+    const height = Number(event.nativeEvent.data);
+    if (height > 0) {
+      setWebViewHeight(height);
+    }
+  }, []);
+
+  const onLoadEnd = useCallback(() => {
+    webviewRef.current?.injectJavaScript(
+      'window.ReactNativeWebView.postMessage(document.body.scrollHeight);',
+    );
+  }, []);
+
+  const injectedJavaScript = `
+    (function() {
+      document.documentElement.style.padding = '0';
+      document.documentElement.style.margin = '0';
+      document.body.style.padding = '0';
+      document.body.style.margin = '0';
+      window.ReactNativeWebView.postMessage(document.body.scrollHeight);
+    })();
+    true;
+  `;
+
+  return (
+    <View
+      style={[
+        {
+          height: webViewHeight,
+          width: '100%',
+        },
+        style,
+      ]}
+    >
+      <WebView
+        ref={webviewRef}
+        source={{
+          html: `
+            <!DOCTYPE html>
+            <html>
+              <head>
+                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+                <style>
+                  body { font-family: -apple-system, system-ui; overflow: hidden; }
+                </style>
+              </head>
+              <body>
+                ${html}
+              </body>
+            </html>
+          `,
+        }}
+        scrollEnabled={false}
+        scalesPageToFit={false}
+        onMessage={onMessage}
+        injectedJavaScript={injectedJavaScript}
+        onLoadEnd={onLoadEnd}
+        style={styles.webview}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  webview: {
+    backgroundColor: 'transparent',
+  },
+});

package/src/Slider/index.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef, FC } from 'react';
+import { Text, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import RNSlider from '@react-native-community/slider';
+
+export interface SliderChangeEvent {
+  value: number;
+}
+
+export interface SliderProps {
+  name?: string;
+  style?: StyleProp<ViewStyle>;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  value?: number;
+  defaultValue?: number;
+  activeColor?: string;
+  backgroundColor?: string;
+  blockColor?: string;
+  showValue?: boolean;
+  onChange?: (event: SliderChangeEvent) => void;
+  onChanging?: (event: SliderChangeEvent) => void;
+}
+
+export const Slider: FC<SliderProps> = props => {
+  const {
+    style,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled,
+    activeColor = '#1aad19',
+    backgroundColor = '#e9e9e9',
+    blockColor = '#fff',
+    showValue,
+    onChange,
+    onChanging,
+    value,
+    defaultValue,
+  } = props;
+
+  const isControlled = value !== undefined;
+  const [currentValue, setCurrentValue] = useState<number>(
+    defaultValue ?? (value || 0),
+  );
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setCurrentValue(value || 0);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (!isControlled) return;
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      if (value !== currentValue) {
+        setCurrentValue(value || 0);
+      }
+    }, 50);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [currentValue, isControlled, value]);
+
+  const onSlidingCompleteHandler = (nextValue: number) => {
+    if (onChange) {
+      onChange({ value: nextValue });
+    }
+  };
+
+  const onValueChangeHandler = (nextValue: number) => {
+    setCurrentValue(nextValue);
+    if (onChanging) {
+      onChanging({ value: nextValue });
+    }
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <RNSlider
+        minimumValue={min}
+        maximumValue={max}
+        step={step}
+        disabled={!!disabled}
+        value={currentValue}
+        minimumTrackTintColor={activeColor}
+        maximumTrackTintColor={backgroundColor}
+        thumbTintColor={blockColor}
+        onSlidingComplete={onSlidingCompleteHandler}
+        onValueChange={onValueChangeHandler}
+        style={[styles.bar, style as any]}
+      />
+      {showValue && <Text style={styles.info}>{currentValue}</Text>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  bar: {
+    flexGrow: 1,
+  },
+  info: {
+    marginLeft: 15,
+  },
+});