autoComplete.stories.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import React from 'react';
  2. import {withInfo} from '@storybook/addon-info';
  3. import AutoComplete from 'app/components/autoComplete';
  4. const items = [
  5. {
  6. name: 'Apple',
  7. },
  8. {
  9. name: 'Pineapple',
  10. },
  11. {
  12. name: 'Orange',
  13. },
  14. ];
  15. export default {
  16. title: 'UI/AutoComplete',
  17. };
  18. export const Input = withInfo('Autocomplete on an input')(() => (
  19. <AutoComplete itemToString={item => item.name}>
  20. {({
  21. getRootProps,
  22. getInputProps,
  23. getMenuProps,
  24. getItemProps,
  25. inputValue,
  26. highlightedIndex,
  27. isOpen,
  28. }) => {
  29. return (
  30. <div {...getRootProps({style: {position: 'relative'}})}>
  31. <input {...getInputProps({})} />
  32. {isOpen && (
  33. <div
  34. {...getMenuProps({
  35. style: {
  36. boxShadow:
  37. '0 1px 4px 1px rgba(47,40,55,0.08), 0 4px 16px 0 rgba(47,40,55,0.12)',
  38. position: 'absolute',
  39. backgroundColor: 'white',
  40. padding: '0',
  41. },
  42. })}
  43. >
  44. <div>
  45. {items
  46. .filter(
  47. item => item.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  48. )
  49. .map((item, index) => (
  50. <div
  51. key={item.name}
  52. {...getItemProps({
  53. item,
  54. index,
  55. style: {
  56. cursor: 'pointer',
  57. padding: '6px 12px',
  58. backgroundColor:
  59. index === highlightedIndex
  60. ? 'rgba(0, 0, 0, 0.02)'
  61. : undefined,
  62. },
  63. })}
  64. >
  65. {item.name}
  66. </div>
  67. ))}
  68. </div>
  69. </div>
  70. )}
  71. </div>
  72. );
  73. }}
  74. </AutoComplete>
  75. ));