form.stories.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import React from 'react';
  2. import NewBooleanField from 'app/views/settings/components/forms/booleanField';
  3. import Form from 'app/views/settings/components/forms/form';
  4. import RadioField from 'app/views/settings/components/forms/radioField';
  5. import RangeField from 'app/views/settings/components/forms/rangeField';
  6. import SelectField from 'app/views/settings/components/forms/selectField';
  7. import TextField from 'app/views/settings/components/forms/textField';
  8. export default {
  9. title: 'Forms/Form',
  10. args: {
  11. alignRight: false,
  12. required: false,
  13. visible: true,
  14. disabled: false,
  15. flexibleControlStateSize: true,
  16. inline: true,
  17. stacked: true,
  18. },
  19. };
  20. export const Default = ({...fieldProps}) => {
  21. return (
  22. <Form>
  23. <TextField
  24. name="textfieldflexiblecontrol"
  25. label="Text Field With Flexible Control State Size"
  26. placeholder="Type text and then delete it"
  27. {...fieldProps}
  28. />
  29. <NewBooleanField name="field" label="New Boolean Field" {...fieldProps} />
  30. <RadioField
  31. name="radio"
  32. label="Radio Field"
  33. choices={[
  34. ['choice_one', 'Choice One'],
  35. ['choice_two', 'Choice Two'],
  36. ['choice_three', 'Choice Three'],
  37. ]}
  38. {...fieldProps}
  39. />
  40. <SelectField
  41. name="select"
  42. label="Select Field"
  43. choices={[
  44. ['choice_one', 'Choice One'],
  45. ['choice_two', 'Choice Two'],
  46. ['choice_three', 'Choice Three'],
  47. ]}
  48. {...fieldProps}
  49. />
  50. <RangeField
  51. name="rangeField"
  52. label="Range Field"
  53. min={1}
  54. max={10}
  55. step={1}
  56. value={1}
  57. formatLabel={value => {
  58. return `${value} Toaster Strudle${value > 1 ? 's' : ''}`;
  59. }}
  60. {...fieldProps}
  61. />
  62. </Form>
  63. );
  64. };
  65. Default.storyName = 'default';
  66. Default.parameters = {
  67. docs: {
  68. description: {
  69. story:
  70. 'Use the knobs to see how the different field props that can be used affect the form layout.',
  71. },
  72. },
  73. };