Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
May 11, 2020
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dde6080
feat(region): Hide annotations if visibility is false
May 11, 2020
b96f7f7
feat(annotator): Remove visibility state
May 11, 2020
79a327b
Merge branch 'master' into fix-visibility
mergify[bot] May 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/common/BaseAnnotator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
9 changes: 8 additions & 1 deletion src/common/BaseAnnotator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,14 @@ export default class BaseAnnotator {
};

setVisibility = (visibility: boolean): void => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isVisible

this.store.dispatch(store.setVisibilityAction(visibility));
if (!this.rootEl) {
return;
}
if (visibility) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be handled by the parent at this point?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like we're using redux to store the state, but not relying on it to hide and show the annotations, but rather rely on the value passed into setVisibility. What are your thoughts on having RegionContainer connect to this state and have RegionAnnotations use that as a basis to render RegionList?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like we're using redux to store the state, but not relying on it to hide and show the annotations, but rather rely on the value passed into setVisibility. What are your thoughts on having RegionContainer connect to this state and have RegionAnnotations use that as a basis to render RegionList?

Jared thinks this logic should live in the higher level. Otherwise we'll have to replicate this logic for all future annotation types.

this.rootEl.classList.remove('is-hidden');
} else {
this.rootEl.classList.add('is-hidden');
}
};

toggleAnnotationMode(mode: store.Mode): void {
Expand Down
6 changes: 3 additions & 3 deletions src/common/__tests__/BaseAnnotator-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably just call annotator.init(1) to set up the annotator properly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably just call annotator.init(1) to set up the annotator properly.

If call init but not set rootEl explicitly, eslint will throw error annotator.rootEl is possibly null

annotator.setVisibility(visibility);
expect(annotator.store.dispatch).toBeCalled();
expect(store.setVisibilityAction).toBeCalledWith(visibility);
expect(annotator.rootEl.classList.contains('is-hidden')).toEqual(!visibility);
});
});

Expand Down
1 change: 0 additions & 1 deletion src/store/common/__mocks__/commonState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,4 @@ import { Mode } from '../types';

export default {
mode: Mode.NONE,
visibility: true,
};
12 changes: 1 addition & 11 deletions src/store/common/__tests__/reducer-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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);
});
});
});
8 changes: 1 addition & 7 deletions src/store/common/__tests__/selectors-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
1 change: 0 additions & 1 deletion src/store/common/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
6 changes: 1 addition & 5 deletions src/store/common/reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -13,5 +10,4 @@ const modeReducer = createReducer<CommonState['mode']>(Mode.NONE, builder =>

export default combineReducers({
mode: modeReducer,
visibility: visibilityReducer,
});
1 change: 0 additions & 1 deletion src/store/common/selectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
1 change: 0 additions & 1 deletion src/store/common/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ export enum Mode {

export interface CommonState {
mode: Mode;
visibility: boolean;
}
export interface ModeState {
current: Mode;
Expand Down