feat(region): Hide annotations if visibility is false (#483)

* feat(region): Hide annotations if visibility is false

* feat(annotator): Remove visibility state

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: Mingze

src/common/BaseAnnotator.scss

@@ -19,4 +19,10 @@
     @import '~box-ui-elements/es/styles/common/links';
     @import '~box-ui-elements/es/styles/common/forms';
     @import '~box-ui-elements/es/styles/common/buttons';
+
+    &.is-hidden {
+        .ba-Layer {
+            display: none;
+        }
+    }
 }

src/common/BaseAnnotator.ts

@@ -120,7 +120,14 @@ export default class BaseAnnotator {
     };
 
     setVisibility = (visibility: boolean): void => {
-        this.store.dispatch(store.setVisibilityAction(visibility));
+        if (!this.rootEl) {
+            return;
+        }
+        if (visibility) {
+            this.rootEl.classList.remove('is-hidden');
+        } else {
+            this.rootEl.classList.add('is-hidden');
+        }
     };
 
     toggleAnnotationMode(mode: store.Mode): void {

src/common/__tests__/BaseAnnotator-test.ts

@@ -130,10 +130,10 @@ describe('BaseAnnotator', () => {
     });
 
     describe('setVisibility()', () => {
-        test.each([true, false])('should dispatch setVisibilityAction with visibility %p', visibility => {
+        test.each([true, false])('should hide/show annotations if visibility is %p', visibility => {
+            annotator.rootEl = defaults.container;
             annotator.setVisibility(visibility);
-            expect(annotator.store.dispatch).toBeCalled();
-            expect(store.setVisibilityAction).toBeCalledWith(visibility);
+            expect(annotator.rootEl.classList.contains('is-hidden')).toEqual(!visibility);
         });
     });
 

src/store/common/__mocks__/commonState.ts

@@ -2,5 +2,4 @@ import { Mode } from '../types';
 
 export default {
     mode: Mode.NONE,
-    visibility: true,
 };

src/store/common/__tests__/reducer-test.ts

@@ -1,7 +1,7 @@
 import reducer from '../reducer';
 import state from '../__mocks__/commonState';
 import { Mode } from '../types';
-import { toggleAnnotationModeAction, setVisibilityAction } from '../actions';
+import { toggleAnnotationModeAction } from '../actions';
 
 describe('store/common/reducer', () => {
     describe('toggleAnnotationModeAction', () => {
@@ -15,14 +15,4 @@ describe('store/common/reducer', () => {
             expect(newState.mode).toEqual(expectedMode);
         });
     });
-
-    describe('setVisibilityAction', () => {
-        test('should set visibility state', () => {
-            let newState = reducer(state, setVisibilityAction(false));
-            expect(newState.visibility).toEqual(false);
-
-            newState = reducer({ ...state, visibility: false }, setVisibilityAction(true));
-            expect(newState.visibility).toEqual(true);
-        });
-    });
 });

src/store/common/__tests__/selectors-test.ts

@@ -1,16 +1,10 @@
 import commonState from '../__mocks__/commonState';
-import { getAnnotationMode, getVisibility } from '../selectors';
+import { getAnnotationMode } from '../selectors';
 
 describe('store/common/selectors', () => {
     describe('getAnnotationMode', () => {
         test('should return annotation mode', () => {
             expect(getAnnotationMode({ common: commonState })).toBe('none');
         });
     });
-
-    describe('getVisibility', () => {
-        test('should return annotation visibility', () => {
-            expect(getVisibility({ common: commonState })).toBe(true);
-        });
-    });
 });

src/store/common/actions.ts

@@ -1,5 +1,4 @@
 import { createAction } from '@reduxjs/toolkit';
 import { Mode } from './types';
 
-export const setVisibilityAction = createAction<boolean>('SET_VISIBILITY');
 export const toggleAnnotationModeAction = createAction<Mode>('TOGGLE_ANNOTATION_MODE');

src/store/common/reducer.ts

@@ -1,10 +1,7 @@
 import { createReducer, combineReducers } from '@reduxjs/toolkit';
 import { CommonState, Mode } from './types';
-import { toggleAnnotationModeAction, setVisibilityAction } from './actions';
+import { toggleAnnotationModeAction } from './actions';
 
-const visibilityReducer = createReducer<CommonState['visibility']>(true, builder =>
-    builder.addCase(setVisibilityAction, (state, { payload: visibility }) => visibility),
-);
 const modeReducer = createReducer<CommonState['mode']>(Mode.NONE, builder =>
     builder.addCase(toggleAnnotationModeAction, (state, { payload: mode }: { payload: Mode }) =>
         state === mode ? Mode.NONE : mode,
@@ -13,5 +10,4 @@ const modeReducer = createReducer<CommonState['mode']>(Mode.NONE, builder =>
 
 export default combineReducers({
     mode: modeReducer,
-    visibility: visibilityReducer,
 });

src/store/common/selectors.ts

@@ -4,4 +4,3 @@ import { Mode } from './types';
 type State = Pick<AppState, 'common'>;
 
 export const getAnnotationMode = ({ common }: State): Mode => common.mode;
-export const getVisibility = ({ common }: State): boolean => common.visibility;

src/store/common/types.ts

@@ -5,7 +5,6 @@ export enum Mode {
 
 export interface CommonState {
     mode: Mode;
-    visibility: boolean;
 }
 export interface ModeState {
     current: Mode;