feat: addressed review points 3

textkernel · Mar 26, 2020 · 7a3be36 · 7a3be36
1 parent 77c2a56
commit 7a3be36
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 40 deletions.
diff --git a/src/components/Select/AutosuggestMulti/AutosuggestMulti.tsx b/src/components/Select/AutosuggestMulti/AutosuggestMulti.tsx
@@ -14,8 +14,8 @@ import { BACKSPACE_KEY, ESCAPE_KEY, TAB_KEY } from '../../../constants';
 interface Props<S> extends CommonProps<S> {
     /** array of already selected suggestions */
     selectedSuggestions: S[];
-    /** number of shown tags in blur mode */
-    numberOfShownTags?: number;
+    /** number of visible tags in blur mode */
+    numberOfVisibleTags: number;
     /** to be shown in the input field when no value is typed */
     inputPlaceholder: string;
     /** Enable ListOptimizer component for decreasing render time */
@@ -33,7 +33,7 @@ export function AutosuggestMulti<S>(props: Props<S>) {
         inputPlaceholder,
         useOptimizeListRender,
         suggestions,
-        numberOfShownTags = 3,
+        numberOfVisibleTags,
         onBlur,
         ...rest
     } = props;
@@ -54,23 +54,28 @@ export function AutosuggestMulti<S>(props: Props<S>) {
     };
 
     const renderShortTagsList = () => {
-        const shownTags = selectedSuggestions.slice(0, numberOfShownTags);
-        const hiddenTags = selectedSuggestions.slice(numberOfShownTags);
+        const visibleTags = selectedSuggestions.slice(0, numberOfVisibleTags);
+        const hiddenTags = selectedSuggestions.slice(numberOfVisibleTags);
         const numberOfHiddenTags = hiddenTags.length;
-        const shownTagsList = shownTags.map((item) => (
-            <SuggestionTag isStretched={numberOfHiddenTags > 0} key={suggestionToString(item)}>
+        const visibleTagsList = visibleTags.map((item) => (
+            <SuggestionTag
+                key={suggestionToString(item)}
+                width={numberOfHiddenTags > 0 ? 'block' : 'auto'}
+            >
                 {suggestionToString(item)}
             </SuggestionTag>
         ));
 
         if (numberOfHiddenTags > 0) {
             const counter = (
-                <SuggestionTag key="counter" isBounded>{`+${numberOfHiddenTags}`}</SuggestionTag>
+                <SuggestionTag key="counter" width="small">
+                    {`+${numberOfHiddenTags}`}
+                </SuggestionTag>
             );
-            return [...shownTagsList, counter];
+            return [...visibleTagsList, counter];
         }
 
-        return shownTagsList;
+        return visibleTagsList;
     };
 
     const handleInputKeyDown = (blur: () => void) => (event: KeyboardEvent) => {
@@ -83,12 +88,7 @@ export function AutosuggestMulti<S>(props: Props<S>) {
             blur();
             inputRef.current?.parentElement?.focus();
             event.stopPropagation();
-        } else if (
-            event.key === BACKSPACE_KEY &&
-            !inputValue &&
-            selectedSuggestions &&
-            !!selectedSuggestions.length
-        ) {
+        } else if (event.key === BACKSPACE_KEY && !inputValue && !!selectedSuggestions.length) {
             const lastItem = selectedSuggestions[selectedSuggestions.length - 1];
             onSelectionChange(lastItem);
         }
@@ -148,3 +148,8 @@ export function AutosuggestMulti<S>(props: Props<S>) {
 }
 
 AutosuggestMulti.displayName = 'AutosuggestMulti';
+
+AutosuggestMulti.defaultProps = {
+    numberOfVisibleTags: 3,
+    selectedSuggestions: [],
+};
diff --git a/src/components/Select/AutosuggestMulti/SuggestionTag/SuggestionTag.scss b/src/components/Select/AutosuggestMulti/SuggestionTag/SuggestionTag.scss
@@ -14,11 +14,11 @@
     min-width: 15px;
     cursor: default;
 
-    &--isStretched {
+    &--block {
         flex: 1 1 auto;
     }
 
-    &--isBounded {
+    &--small {
         flex: 1 0 auto;
         max-width: 36px;
     }

diff --git a/src/components/Select/AutosuggestMulti/SuggestionTag/SuggestionTag.tsx b/src/components/Select/AutosuggestMulti/SuggestionTag/SuggestionTag.tsx
@@ -5,25 +5,23 @@ import styles from './SuggestionTag.scss';
 
 const { block, elem } = bem('SuggestionTag', styles);
 
-type Props = {
-    /** Tag Stretches on full width */
-    isStretched?: boolean;
-    /** Tag has restricted width */
-    isBounded?: boolean;
+interface Props {
+    /** Defines with behavior for tag */
+    width?: 'block' | 'small' | 'auto';
     /** Clicked on delete button */
     onClick?: (e: React.MouseEvent) => void;
     /** Tag content */
     children: NotEmptyReactNode;
-};
+}
 
 export const SuggestionTag: React.FC<Props> = (props) => {
-    const { children, isBounded, isStretched, onClick, ...rest } = props;
+    const { width, children, onClick, ...rest } = props;
 
     return (
-        <div {...rest} {...block({ isBounded, isStretched })}>
-            <span title={children} {...elem('label')}>
+        <div {...rest} {...block({ [width || 'auto']: true })}>
+            <div title={children} {...elem('label')}>
                 {children}
-            </span>
+            </div>
             {onClick ? (
                 <button onClick={onClick} type="button" {...elem('button')}>
                     <MdClose />
@@ -33,4 +31,8 @@ export const SuggestionTag: React.FC<Props> = (props) => {
     );
 };
 
+SuggestionTag.defaultProps = {
+    width: 'auto',
+};
+
 SuggestionTag.displayName = 'SuggestionTag';
diff --git a/src/components/Select/AutosuggestMulti/SuggestionTag/__tests__/SuggestionTag.js b/src/components/Select/AutosuggestMulti/SuggestionTag/__tests__/SuggestionTag.js
@@ -10,11 +10,7 @@ describe('SuggestionTag', () => {
         expect(wrapper.find('button')).toHaveLength(0);
     });
     it('should render correctly with styles modifier', () => {
-        const wrapper = mount(
-            <SuggestionTag isBounded isStretched>
-                tag
-            </SuggestionTag>
-        );
+        const wrapper = mount(<SuggestionTag width="block">tag</SuggestionTag>);
 
         expect(toJson(wrapper)).toMatchSnapshot();
     });

diff --git a/src/components/Select/AutosuggestMulti/__tests__/__snapshots__/AutosuggestMulti.spec.js.snap b/src/components/Select/AutosuggestMulti/__tests__/__snapshots__/AutosuggestMulti.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`AutosuggestMulti callbacks onSelectionChange should be called on clicking on a suggestion 1`] = `
 <AutosuggestMulti
   inputPlaceholder="type here..."
+  numberOfVisibleTags={3}
   onBlur={[MockFunction]}
   onInputValueChange={
     [MockFunction] {
@@ -633,6 +634,7 @@ exports[`AutosuggestMulti callbacks onSelectionChange should be called on clicki
 exports[`AutosuggestMulti rendering should initially render empty component correctly 1`] = `
 <AutosuggestMulti
   inputPlaceholder="type here..."
+  numberOfVisibleTags={3}
   onBlur={[MockFunction]}
   onInputValueChange={[MockFunction]}
   onSelectionChange={[MockFunction]}
@@ -763,6 +765,7 @@ exports[`AutosuggestMulti rendering should initially render empty component corr
 exports[`AutosuggestMulti rendering should render empty component correctly when focused 1`] = `
 <AutosuggestMulti
   inputPlaceholder="type here..."
+  numberOfVisibleTags={3}
   onBlur={[MockFunction]}
   onInputValueChange={[MockFunction]}
   onSelectionChange={[MockFunction]}

diff --git a/src/components/Select/SelectBase/SelectBase.tsx b/src/components/Select/SelectBase/SelectBase.tsx
@@ -90,7 +90,6 @@ export function SelectBase<S>(props: Props<S>) {
 
         if (clearInputAfterSelection) {
             setInputValue('');
-            setInputValueRecall('');
             onInputValueChange?.('');
         }
 

diff --git a/src/components/Select/SuggestionsList/SuggestionsList.tsx b/src/components/Select/SuggestionsList/SuggestionsList.tsx
@@ -35,12 +35,15 @@ export function SuggestionsList<S>(props: Props<S>) {
         inputValue,
     } = props;
 
-    if (noSuggestionsPlaceholder && (!suggestions || !suggestions.length)) {
-        return (
-            <ListItem disabled>
-                <Text context="muted">{noSuggestionsPlaceholder}</Text>
-            </ListItem>
-        );
+    if (!suggestions || !suggestions.length) {
+        if (noSuggestionsPlaceholder) {
+            return (
+                <ListItem disabled>
+                    <Text context="muted">{noSuggestionsPlaceholder}</Text>
+                </ListItem>
+            );
+        }
+        return null;
     }
 
     // eslint-disable-next-line react/display-name