feat(input-autocomplete): revert arrow

core-ds · Nov 23, 2020 · 07f0ef4 · 07f0ef4
1 parent 99a87eb
commit 07f0ef4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/packages/input-autocomplete/src/Component.stories.mdx b/packages/input-autocomplete/src/Component.stories.mdx
@@ -7,7 +7,7 @@ import { ComponentHeader } from 'storybook/blocks/component-header';
 import { Tag } from '@alfalab/core-components-tag';
 import { Input } from '@alfalab/core-components-input';
 import { MaskedInput } from '@alfalab/core-components-masked-input';
-import { Option } from '@alfalab/core-components-select';
+import { Arrow, Option } from '@alfalab/core-components-select';
 
 import { InputAutocomplete } from './Component';
 
@@ -64,6 +64,7 @@ export const matchOption = (option, inputValue) =>
                 hint={text('hint', '')}
                 allowUnselect={boolean('allowUnselect', true)}
                 closeOnSelect={boolean('closeOnSelect', false)}
+                Arrow={boolean('Arrow', false) ? Arrow : undefined}
                 circularNavigation={boolean('circularNavigation', false)}
                 placeholder={text('placeholder', 'Введите элемент')}
                 label={text('label', 'Элемент')}
@@ -252,15 +253,15 @@ import { InputAutocomplete } from '@alfalab/core-components-input-autocomplete';
                 content: '4111 1111 1111 1111',
             },
         ];
-        const CardOption = React.forwardRef((props, ref) => (
-            <Option {...props} ref={ref}>
+        const CardOption = (props) => (
+            <Option {...props}>
                 <div>
                     {props.option.key}
                     <br />
                     <sub>{props.option.content}</sub>
                 </div>
             </Option>
-        ));
+        );
         const [value, setValue] = React.useState('');
         const handleInput = (event) => {
             setValue(event.target.value);
@@ -326,3 +327,11 @@ import { InputAutocomplete } from '@alfalab/core-components-input-autocomplete';
         );
     })}
 </Preview>
+
+
+### Автокомплит со стрелкой
+
+```tsx
+import { Arrow } from '@alfalab/core-components/select';
+<InputAutocomplete Arrow={Arrow} />
+```
diff --git a/packages/input-autocomplete/src/autocomplete-field/Component.tsx b/packages/input-autocomplete/src/autocomplete-field/Component.tsx
@@ -10,6 +10,7 @@ export const AutocompleteField = ({
     label,
     placeholder,
     size,
+    Arrow,
     Input = DefaultInput,
     value,
     error,
@@ -58,6 +59,14 @@ export const AutocompleteField = ({
             onClick={handleClick}
             autoComplete='off'
             value={value}
+            rightAddons={
+                (Arrow || inputProps.rightAddons) && (
+                    <React.Fragment>
+                        {inputProps.rightAddons}
+                        {Arrow}
+                    </React.Fragment>
+                )
+            }
         />
     );
 };