Merge pull request #60 from monkvision/feature/SightsWheel/wip

SightsWheel component

Author: natsukiai

.github/workflows/corejs-analyze.yml

@@ -1,4 +1,4 @@
-name: @monkvision/corejs
+name: corejs
 
 on:
   push:

.github/workflows/react-native-analyze.yml

@@ -1,4 +1,4 @@
-name: @monkvision/react-native
+name: react-native
 
 on:
   push:

packages/react-native-views/src/components/CameraView/index.jsx

@@ -2,19 +2,11 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash.noop';
 
+import { Camera, CameraSideBar, Mask, PicturesScrollPreview, utils } from '@monkvision/react-native/src/index';
 import { View, Platform, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
 import { FAB } from 'react-native-paper';
 
-import {
-  Camera,
-  CameraSideBar,
-  PicturesScrollPreview,
-  Mask,
-  utils,
-} from '@monkvision/react-native';
-
 import ActivityIndicatorView from '../ActivityIndicatorView';
-
 import useSights from './useSights';
 
 const styles = StyleSheet.create({
@@ -74,7 +66,7 @@ export default function CameraView({
   const [fakeActivity, setFakeActivity] = useState(null);
   const [camera, setCamera] = useState();
   const [pictures, setPictures] = useState({});
-  const { activeSight, activeSightIndex, nextSightProps } = useSights(sights);
+  const { activeSight, nextSightProps } = useSights(sights);
 
   // PICTURES
   const handleTakePicture = useCallback(async () => {
@@ -102,6 +94,7 @@ export default function CameraView({
   const handleCloseCamera = useCallback(() => {
     onCloseCamera(pictures);
   }, [onCloseCamera, pictures]);
+
   const handleCameraReady = useCallback(setCamera, [setCamera]);
 
   // UI
@@ -113,7 +106,7 @@ export default function CameraView({
   useEffect(() => {
     const fakeActivityId = setTimeout(() => {
       setFakeActivity(null);
-    }, 750);
+    }, 500);
 
     setFakeActivity(fakeActivityId);
 
@@ -125,8 +118,7 @@ export default function CameraView({
       <StatusBar hidden />
       <SafeAreaView style={styles.container}>
         <PicturesScrollPreview
-          activeSightLabel={activeSight.label}
-          activeSightIndex={activeSightIndex}
+          activeSight={activeSight}
           sights={sights}
           pictures={pictures}
           ref={scrollRef}
@@ -183,16 +175,16 @@ CameraView.defaultProps = {
   onTakePicture: noop,
   sights: [
     ['abstractFront', [null, 0, null], 'front'],
-    ['abstractFrontLeft', [null, 30, null], 'front left'],
-    ['abstractFrontLateralLeft', [null, 60, null], 'front side left'],
-    ['abstractMiddleLateralLeft', [null, 90, null], 'middle side left'],
-    ['abstractRearLateralLeft', [null, 120, null], 'read side left'],
-    ['abstractRearLeft', [null, 150, null], 'rear left'],
-    ['abstractRear', [null, 180, null], 'rear'],
-    ['abstractRearRight', [null, 210, null], 'rear right'],
+    ['abstractFrontRight', [null, 330, null], 'front right'],
+    ['abstractFrontLateralRight', [null, 300, null], 'front side right'],
     ['abstractRearLateralRight', [null, 240, null], 'rear side right'],
     ['abstractMiddleLateralRight', [null, 270, null], 'middle side right'],
-    ['abstractFrontLateralRight', [null, 300, null], 'front side right'],
-    ['abstractFrontRight', [null, 330, null], 'front right'],
+    ['abstractRearRight', [null, 210, null], 'rear right'],
+    ['abstractFrontLeft', [null, 30, null], 'front left'],
+    ['abstractRear', [null, 180, null], 'rear'],
+    ['abstractRearLeft', [null, 150, null], 'rear left'],
+    ['abstractRearLateralLeft', [null, 120, null], 'read side left'],
+    ['abstractMiddleLateralLeft', [null, 90, null], 'middle side left'],
+    ['abstractFrontLateralLeft', [null, 60, null], 'front side left'],
   ],
 };

packages/react-native/src/assets/sightMasks.js

@@ -10,3 +10,4 @@ export { default as abstractRearLateralLeft } from './sightMasks/abstract-rear-l
 export { default as abstractRearLateralRight } from './sightMasks/abstract-rear-lateral-right.png';
 export { default as abstractRearLeft } from './sightMasks/abstract-rear-left.png';
 export { default as abstractRearRight } from './sightMasks/abstract-rear-right.png';
+export { default as vin } from './sightMasks/vin.png';

packages/react-native/src/assets/sightMasks.native.js

@@ -11,3 +11,4 @@ export const abstractRearLateralLeft = require('./sightMasks/abstract-rear-later
 export const abstractRearLateralRight = require('./sightMasks/abstract-rear-lateral-right.png');
 export const abstractRearLeft = require('./sightMasks/abstract-rear-left.png');
 export const abstractRearRight = require('./sightMasks/abstract-rear-right.png');
+export const vin = require('./sightMasks/vin.png');

packages/react-native/src/assets/sightMasks/vin.png

@@ -3,32 +3,39 @@ import PropTypes from 'prop-types';
 import isEmpty from 'lodash.isempty';
 import isPlainObject from 'lodash.isplainobject';
 
-import { Image, Platform, SafeAreaView, ScrollView, StyleSheet } from 'react-native';
-import { Surface, Chip, useTheme } from 'react-native-paper';
+import { Image, Platform, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { Surface, Chip, useTheme, Badge } from 'react-native-paper';
+import { Sight } from '@monkvision/corejs';
 
+import SightsWheel from '../SightsWheel';
 import * as sightMasks from '../../assets/sightMasks';
 
 const styles = StyleSheet.create({
   root: {
     display: 'flex',
-    width: 125,
+    width: 116,
     ...Platform.select({
       native: { height: '100%' },
       default: { height: '100vh' },
     }),
   },
-  chip: {
+  topView: {
+    display: 'flex',
+    alignItems: 'center',
+    width: 125,
     position: 'absolute',
-    alignSelf: 'center',
     marginVertical: 8,
     marginHorizontal: 4,
   },
+  chip: {
+    alignSelf: 'center',
+  },
   chipText: {
     fontSize: 12,
     fontWeight: '400',
   },
   scrollContainer: {
-    paddingTop: 48,
+    paddingTop: 166,
     paddingBottom: 16,
   },
   surface: {
@@ -53,21 +60,32 @@ const styles = StyleSheet.create({
     marginHorizontal: 12.5,
     marginVertical: 4,
   },
+  badge: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+  },
 });
 
-const PicturesScrollPreview = forwardRef(({ activeSightLabel, pictures, sights }, ref) => {
+const PicturesScrollPreview = forwardRef(({
+  activeSight,
+  pictures,
+  showPicture,
+  sights,
+}, ref) => {
   const { colors } = useTheme();
 
   return (
     <SafeAreaView style={styles.root} ref={ref}>
       <ScrollView style={styles.scrollContainer}>
         {sights.map(([id]) => {
           const picture = pictures[id];
-          const source = isPlainObject(picture)
+          const isImage = isPlainObject(picture) && showPicture === true;
+          const source = isImage
             ? picture.source
             : sightMasks[id];
 
-          if (isPlainObject(picture)) {
+          if (isImage) {
             return (
               <Image
                 key={`picture-${id}`}
@@ -79,6 +97,12 @@ const PicturesScrollPreview = forwardRef(({ activeSightLabel, pictures, sights }
 
           return (
             <Surface key={id} style={[styles.surface, { backgroundColor: colors.primary }]}>
+              <Badge
+                visible={isPlainObject(picture)}
+                style={[styles.badge, { backgroundColor: colors.success }]}
+              >
+                ✔️
+              </Badge>
               <Image
                 key={`picture-${id}`}
                 source={source}
@@ -88,26 +112,38 @@ const PicturesScrollPreview = forwardRef(({ activeSightLabel, pictures, sights }
           );
         })}
       </ScrollView>
-      {!isEmpty(activeSightLabel) && (
-        <Chip
-          style={[styles.chip, { backgroundColor: colors.accent }]}
-          textStyle={styles.chipText}
-        >
-          {activeSightLabel}
-        </Chip>
+      {(activeSight !== null && !isEmpty(activeSight.label)) && (
+        <View style={styles.topView}>
+          <SightsWheel
+            sights={sights.map((s) => new Sight(...s))}
+            filledSightIds={Object.keys(pictures)}
+            activeSightId={activeSight.id}
+          />
+          <Chip
+            style={[styles.chip, { backgroundColor: colors.accent }]}
+            textStyle={styles.chipText}
+          >
+            {activeSight.label}
+          </Chip>
+        </View>
       )}
     </SafeAreaView>
   );
 });
 
 PicturesScrollPreview.propTypes = {
-  activeSightLabel: PropTypes.string,
+  activeSight: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+  }),
   pictures: PropTypes.objectOf(PropTypes.object).isRequired,
+  showPicture: PropTypes.bool,
   sights: PropTypes.arrayOf(PropTypes.array).isRequired,
 };
 
 PicturesScrollPreview.defaultProps = {
-  activeSightLabel: '',
+  activeSight: null,
+  showPicture: false,
 };
 
 export default PicturesScrollPreview;