selectFields.stories.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import React from 'react';
  2. import {withInfo} from '@storybook/addon-info';
  3. import {action} from '@storybook/addon-actions';
  4. import {Form as LegacyForm} from 'app/components/forms';
  5. import SelectField from 'app/components/forms/selectField';
  6. import SelectCreatableField from 'app/components/forms/selectCreatableField';
  7. export default {
  8. title: 'Forms/Fields/Old',
  9. };
  10. export const _SelectField = withInfo({
  11. text: 'Select Field',
  12. propTablesExclude: [LegacyForm],
  13. })(() => (
  14. <LegacyForm onSubmit={action('onSubmit')}>
  15. <SelectField
  16. name="foos"
  17. choices={[
  18. ['foo', 'Foo'],
  19. ['bar', 'Bar'],
  20. ['baz', 'Baz'],
  21. ]}
  22. />
  23. <SelectField
  24. name="multi_foos"
  25. choices={[
  26. ['foo', 'Foo'],
  27. ['bar', 'Bar'],
  28. ['baz', 'Baz'],
  29. ]}
  30. multiple
  31. />
  32. </LegacyForm>
  33. ));
  34. _SelectField.story = {
  35. name: 'SelectField',
  36. };
  37. export const _SelectCreatableField = withInfo({
  38. text: 'Select Creatable Field',
  39. propTablesExclude: [LegacyForm],
  40. })(() => (
  41. <LegacyForm onSubmit={action('onSubmit')}>
  42. <SelectCreatableField
  43. label="Creatable"
  44. name="creatable_foos"
  45. choices={[
  46. ['foo', 'Foo'],
  47. ['bar', 'Bar'],
  48. ['baz', 'Baz'],
  49. ]}
  50. />
  51. <SelectCreatableField
  52. label="Creatable (and Multiple)"
  53. name="creatable_multi_foos"
  54. multiple
  55. choices={[
  56. ['foo', 'Foo'],
  57. ['bar', 'Bar'],
  58. ['baz', 'Baz'],
  59. ]}
  60. />
  61. </LegacyForm>
  62. ));
  63. _SelectCreatableField.story = {
  64. name: 'SelectCreatableField',
  65. };