feat(reply): Address comments

box · May 15, 2020 · 904e751 · 904e751
1 parent 11bf610
commit 904e751
Show file tree

Hide file tree

Showing 16 changed files with 157 additions and 136 deletions.
diff --git a/docs/styles.css b/docs/styles.css
@@ -27,4 +27,4 @@
 #preview-container {
     width: 100vw;
     height: 75vh;
-}
+}
diff --git a/...omponents/Popups/ReplyField/ItemList.scss → src/components/ItemList/ItemList.scss b/...omponents/Popups/ReplyField/ItemList.scss → src/components/ItemList/ItemList.scss
diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
@@ -0,0 +1,44 @@
+import React, { SyntheticEvent } from 'react';
+import noop from 'lodash/noop';
+import ItemRow from './ItemRow';
+import './ItemList.scss';
+
+export type Props<T extends { id: string }> = {
+    activeItemIndex?: number;
+    itemRowAs?: JSX.Element;
+    items: T[];
+    onActivate?: (index: number) => void;
+    onSelect: (index: number, event: React.SyntheticEvent) => void;
+};
+
+const ItemList = <T extends { id: string }>({
+    activeItemIndex = 0,
+    itemRowAs = <ItemRow />,
+    items,
+    onActivate = noop,
+    onSelect,
+    ...rest
+}: Props<T>): JSX.Element => (
+    <ul data-testid="ba-ItemList" role="listbox" {...rest}>
+        {items.map((item, index) =>
+            React.cloneElement(itemRowAs, {
+                ...item,
+                key: item.id,
+                className: 'ba-ItemList-row',
+                isActive: index === activeItemIndex,
+                onClick: (event: SyntheticEvent) => {
+                    onSelect(index, event);
+                },
+                /* preventDefault on mousedown so blur doesn't happen before click */
+                onMouseDown: (event: SyntheticEvent) => {
+                    event.preventDefault();
+                },
+                onMouseEnter: () => {
+                    onActivate(index);
+                },
+            }),
+        )}
+    </ul>
+);
+
+export default ItemList;
diff --git a/src/components/ItemList/ItemRow.scss b/src/components/ItemList/ItemRow.scss
@@ -0,0 +1,15 @@
+@import '~box-ui-elements/es/styles/variables';
+
+.ba-ItemRow-name {
+    color: $bdl-gray;
+    font-size: 13px;
+    line-height: 15px;
+    letter-spacing: .3px;
+}
+
+.ba-ItemRow-email {
+    color: $bdl-gray-62;
+    font-size: 11px;
+    line-height: 15px;
+    letter-spacing: .25px;
+}
diff --git a/src/components/Popups/ReplyField/ItemRow.tsx → src/components/ItemList/ItemRow.tsx b/src/components/Popups/ReplyField/ItemRow.tsx → src/components/ItemList/ItemRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import DatalistItem from 'box-ui-elements/es/components/datalist-item';
-import { UserMini, GroupMini } from '../../../@types';
+import { UserMini, GroupMini } from '../../@types';
 import './ItemRow.scss';
 
 export type Props = {

diff --git a/...ps/ReplyField/__tests__/ItemList-test.tsx → ...ents/ItemList/__tests__/ItemList-test.tsx b/...ps/ReplyField/__tests__/ItemList-test.tsx → ...ents/ItemList/__tests__/ItemList-test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import ItemList, { Props } from '../ItemList';
-import { Collaborator } from '../../../../@types';
+import { Collaborator } from '../../../@types';
 
-describe('components/Popups/ReplyField/ItemList', () => {
+describe('components/ItemList', () => {
     const defaults: Props<Collaborator> = {
         items: [
             { id: 'testid1', name: 'test1' },
@@ -37,7 +37,7 @@ describe('components/Popups/ReplyField/ItemList', () => {
                 preventDefault: jest.fn(),
             };
 
-            const wrapper = getWrapper({ setActiveItemIndex: mockSetIndex });
+            const wrapper = getWrapper({ onActivate: mockSetIndex });
             const firstChild = wrapper.find('[data-testid="ba-ItemList"]').childAt(0);
 
             firstChild.simulate('click', mockEvent);

diff --git a/...ups/ReplyField/__tests__/ItemRow-test.tsx → ...nents/ItemList/__tests__/ItemRow-test.tsx b/...ups/ReplyField/__tests__/ItemRow-test.tsx → ...nents/ItemList/__tests__/ItemRow-test.tsx
diff --git a/src/components/ItemList/index.ts b/src/components/ItemList/index.ts
@@ -0,0 +1 @@
+export { default } from './ItemList';
diff --git a/src/components/Popups/ReplyField/ItemList.tsx b/src/components/Popups/ReplyField/ItemList.tsx
diff --git a/src/components/Popups/ReplyField/ItemRow.scss b/src/components/Popups/ReplyField/ItemRow.scss
diff --git a/src/components/Popups/ReplyField/MentionItem.scss b/src/components/Popups/ReplyField/MentionItem.scss
@@ -2,4 +2,5 @@
 
 .ba-MentionItem-link {
     color: $bdl-box-blue;
+    font-weight: bold;
 }
diff --git a/src/components/Popups/ReplyField/PopupList.scss b/src/components/Popups/ReplyField/PopupList.scss
@@ -8,13 +8,13 @@
     }
 
     .ba-Popup-content {
-        padding-top: 10px;
+        padding: 10px 0;
         border: solid 1px $bdl-gray-30;
         border-radius: $bdl-border-radius-size;
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
     }
 
     .ba-PopupList-prompt {
-        padding: 0 10px 10px;
+        padding: 0 10px;
     }
 }
diff --git a/src/components/Popups/ReplyField/PopupList.tsx b/src/components/Popups/ReplyField/PopupList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { FormattedMessage } from 'react-intl';
-import ItemList from './ItemList';
+import ItemList from '../../ItemList/ItemList';
 import messages from '../messages';
 import PopupBase from '../PopupBase';
 import { Options, PopupReference } from '../Popper';
@@ -11,13 +11,13 @@ export type Props<T extends { id: string }> = {
     activeItemIndex?: number;
     itemRowAs?: JSX.Element;
     items: T[];
+    onActivate?: (index: number) => void;
     onSelect: (index: number, event: React.SyntheticEvent) => void;
     options?: Partial<Options>;
     reference: PopupReference;
-    setActiveItemIndex?: (index: number) => void;
 };
 
-const defaultOptions: Partial<Options> = {
+const options: Partial<Options> = {
     modifiers: [
         {
             name: 'offset',
@@ -35,21 +35,16 @@ const defaultOptions: Partial<Options> = {
     placement: 'bottom-start',
 };
 
-export default function PopupList<T extends { id: string }>({
-    items,
-    reference,
-    options,
-    ...rest
-}: Props<T>): JSX.Element {
-    return (
-        <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>
-            {isEmpty(items) ? (
-                <div className="ba-PopupList-prompt">
-                    <FormattedMessage {...messages.popupListPrompt} />
-                </div>
-            ) : (
-                <ItemList items={items} {...rest} />
-            )}
-        </PopupBase>
-    );
-}
+const PopupList = <T extends { id: string }>({ items, reference, ...rest }: Props<T>): JSX.Element => (
+    <PopupBase className="ba-PopupList" options={options} reference={reference}>
+        {isEmpty(items) ? (
+            <div className="ba-PopupList-prompt">
+                <FormattedMessage {...messages.popupListPrompt} />
+            </div>
+        ) : (
+            <ItemList items={items} {...rest} />
+        )}
+    </PopupBase>
+);
+
+export default PopupList;
diff --git a/src/components/Popups/ReplyField/ReplyField.scss b/src/components/Popups/ReplyField/ReplyField.scss
@@ -2,6 +2,10 @@
 @import '~draft-js/dist/Draft.css';
 
 .ba-ReplyField {
+    * {
+        font-family: Lato, sans-serif;
+    }
+
     .public-DraftEditorPlaceholder-hasFocus,
     .public-DraftEditorPlaceholder-root {
         margin: 0;

diff --git a/src/components/Popups/ReplyField/ReplyField.tsx b/src/components/Popups/ReplyField/ReplyField.tsx
@@ -76,9 +76,11 @@ export default class ReplyField extends React.Component<Props, State> {
         this.saveCursorPosition();
     }
 
-    getCollaborators = (activeMention: Mention | null): Collaborator[] => {
+    getCollaborators = (): Collaborator[] => {
         const { collaborators } = this.props;
+        const { editorState } = this.state;
 
+        const activeMention = getActiveMentionForEditorState(editorState);
         if (!activeMention) {
             return [];
         }
@@ -152,7 +154,7 @@ export default class ReplyField extends React.Component<Props, State> {
         const { editorState } = this.state;
 
         const activeMention = getActiveMentionForEditorState(editorState);
-        const collaborators = this.getCollaborators(activeMention);
+        const collaborators = this.getCollaborators();
         const editorStateWithLink = addMention(editorState, activeMention, collaborators[index]);
 
         this.handleChange(editorStateWithLink);
@@ -193,25 +195,39 @@ export default class ReplyField extends React.Component<Props, State> {
         return 'handled';
     };
 
-    handleArrow = (event: React.KeyboardEvent): void => {
-        const { activeItemIndex, editorState, popupReference } = this.state;
-        const collaborators = this.getCollaborators(getActiveMentionForEditorState(editorState));
+    handleArrow = (event: React.KeyboardEvent): number => {
+        const { popupReference } = this.state;
+        const { length } = this.getCollaborators();
 
-        if (!popupReference || !collaborators.length) {
-            return;
+        if (!popupReference || !length) {
+            return 0;
         }
 
         this.stopDefaultEvent(event);
 
-        let nextIndex = 0;
+        return length;
+    };
+
+    handleUpArrow = (event: React.KeyboardEvent): void => {
+        const { activeItemIndex } = this.state;
+        const length = this.handleArrow(event);
 
-        if (event.key === 'ArrowDown') {
-            nextIndex = activeItemIndex === collaborators.length - 1 ? 0 : activeItemIndex + 1;
-        } else if (event.key === 'ArrowUp') {
-            nextIndex = activeItemIndex === 0 ? collaborators.length - 1 : activeItemIndex - 1;
+        if (!length) {
+            return;
+        }
+
+        this.setPopupListActiveItem(activeItemIndex === 0 ? length - 1 : activeItemIndex - 1);
+    };
+
+    handleDownArrow = (event: React.KeyboardEvent): void => {
+        const { activeItemIndex } = this.state;
+        const length = this.handleArrow(event);
+
+        if (!length) {
+            return;
         }
 
-        this.setPopupListActiveItem(nextIndex);
+        this.setPopupListActiveItem(activeItemIndex === length - 1 ? 0 : activeItemIndex + 1);
     };
 
     render(): JSX.Element {
@@ -226,22 +242,22 @@ export default class ReplyField extends React.Component<Props, State> {
                     editorState={editorState}
                     handleReturn={this.handleReturn}
                     onChange={this.handleChange}
-                    onDownArrow={this.handleArrow}
-                    onUpArrow={this.handleArrow}
+                    onDownArrow={this.handleDownArrow}
+                    onUpArrow={this.handleUpArrow}
                     placeholder={placeholder}
                     readOnly={isDisabled}
                     stripPastedStyles
                     webDriverTestID="ba-ReplyField-editor"
                 />
 
                 {popupReference && (
-                    <PopupList<Collaborator>
+                    <PopupList
                         activeItemIndex={activeItemIndex}
                         itemRowAs={itemRowAs}
-                        items={this.getCollaborators(getActiveMentionForEditorState(editorState))}
+                        items={this.getCollaborators()}
+                        onActivate={this.setPopupListActiveItem}
                         onSelect={this.handleSelect}
                         reference={popupReference}
-                        setActiveItemIndex={this.setPopupListActiveItem}
                     />
                 )}
             </div>