feat(region): Connect region components to store (#416)

Author: jstoffan

package.json

@@ -126,6 +126,7 @@
         "raw-loader": "^4.0.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-process-string": "^1.2.0",
+        "regenerator-runtime": "^0.13.5",
         "sass-loader": "^8.0.1",
         "style-loader": "^1.1.2",
         "stylelint": "^12.0.0",

scripts/jest/enzyme-adapter.js

@@ -1,6 +1,7 @@
 import 'core-js/es/map';
 import 'core-js/es/set';
 import 'raf/polyfill';
+import 'regenerator-runtime/runtime';
 import Enzyme, { mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 

src/@types/index.ts

@@ -3,3 +3,4 @@ import './global';
 export * from './api';
 export * from './i18n';
 export * from './model';
+export * from './new';

src/@types/new.ts

@@ -0,0 +1,11 @@
+import { Target } from './model';
+
+export interface NewAnnotation {
+    description?: NewReply;
+    target: Target;
+}
+
+export interface NewReply {
+    message: string;
+    type: 'reply';
+}

src/common/BaseManager.ts

@@ -2,13 +2,12 @@ import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
 
 export type Options = {
-    page: string;
+    page: number;
     pageEl: HTMLElement;
     referenceEl: HTMLElement;
 };
 
 export type Props = {
-    annotations: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
     intl: IntlShape;
     scale: number;
     store: Store;

src/components/AnnotationTarget/AnnotationTarget.tsx

@@ -37,9 +37,11 @@ const AnnotationTarget = (props: Props, ref: React.Ref<HTMLAnchorElement>): JSX.
 
     // We use an anchor to allow the target to be used inside of SVG shapes where buttons aren't supported
     return (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
         <a
             ref={ref}
             className={classNames('ba-AnnotationTarget', className)}
+            href="#" // Needed for IE11 to handle click events properly
             onClick={handleClick}
             onFocus={handleFocus}
             onKeyPress={handleKeyPress}

src/components/Popups/PopupBase.tsx

@@ -59,7 +59,6 @@ export default class PopupBase extends React.PureComponent<Props> {
     };
 
     handleEvent = (event: React.SyntheticEvent): void => {
-        event.preventDefault();
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
     };

src/components/Popups/PopupReply.tsx

@@ -9,19 +9,19 @@ import './PopupReply.scss';
 
 export type Props = {
     className?: string;
+    defaultValue?: string;
     onCancel: (text?: string) => void;
     onChange: (text?: string) => void;
     onSubmit: (text: string) => void;
     reference: HTMLElement;
 };
 
-export default function PopupReply({ onCancel, onChange, onSubmit, ...rest }: Props): JSX.Element {
+export default function PopupReply({ defaultValue, onCancel, onChange, onSubmit, ...rest }: Props): JSX.Element {
     const [text, setText] = React.useState('');
     const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     // Event Handlers
     const handleEvent = (event: React.SyntheticEvent): void => {
-        event.preventDefault();
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
     };
@@ -46,8 +46,14 @@ export default function PopupReply({ onCancel, onChange, onSubmit, ...rest }: Pr
         onCancel(text);
     };
     const handleFirstUpdate = (): void => {
-        if (textareaRef.current) {
-            textareaRef.current.focus();
+        const { current: textarea } = textareaRef;
+
+        if (textarea) {
+            const { value } = textarea;
+
+            textarea.focus();
+            textarea.selectionStart = value.length; // Force cursor to the end after focus
+            textarea.selectionEnd = value.length; // Force cursor to the end after focus
         }
     };
 
@@ -58,6 +64,7 @@ export default function PopupReply({ onCancel, onChange, onSubmit, ...rest }: Pr
                     ref={textareaRef}
                     className="ba-Popup-text"
                     data-testid="ba-Popup-text"
+                    defaultValue={defaultValue}
                     onChange={handleChange}
                     onClick={handleEvent}
                 />

src/components/Popups/__tests__/PopupBase-test.tsx

@@ -31,7 +31,6 @@ describe('PopupBase', () => {
                 wrapper.simulate(event, mockEvent);
 
                 expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalled();
-                expect(mockEvent.preventDefault).toHaveBeenCalled();
                 expect(mockEvent.stopPropagation).toHaveBeenCalled();
             },
         );

src/components/Popups/__tests__/PopupReply-test.tsx

@@ -47,7 +47,6 @@ describe('PopupReply', () => {
             button.simulate('click', mockEvent);
 
             expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalled();
-            expect(mockEvent.preventDefault).toHaveBeenCalled();
             expect(mockEvent.stopPropagation).toHaveBeenCalled();
             expect(defaults[callback]).toHaveBeenCalled();
         });
@@ -63,7 +62,6 @@ describe('PopupReply', () => {
             wrapper.simulate('keyDown', { ...mockEvent, key });
 
             expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalledTimes(callCount);
-            expect(mockEvent.preventDefault).toHaveBeenCalledTimes(callCount);
             expect(mockEvent.stopPropagation).toHaveBeenCalledTimes(callCount);
             expect(defaults.onCancel).toHaveBeenCalledTimes(callCount);
         });