123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325 |
- import React from 'react';
- import {action} from '@storybook/addon-actions';
- import {number, boolean} from '@storybook/addon-knobs';
- import {withInfo} from '@storybook/addon-info';
- import {Panel} from 'app/components/panels';
- import DatePickerField from 'app/views/settings/components/forms/datePickerField';
- import Form from 'app/views/settings/components/forms/form';
- import FormField from 'app/views/settings/components/forms/formField';
- import NewBooleanField from 'app/views/settings/components/forms/booleanField';
- import RadioField from 'app/views/settings/components/forms/radioField';
- import RadioGroup from 'app/views/settings/components/forms/controls/radioGroup';
- import RangeSlider from 'app/views/settings/components/forms/controls/rangeSlider';
- import SelectField from 'app/views/settings/components/forms/selectField';
- import Switch from 'app/components/switch';
- import TextCopyInput from 'app/views/settings/components/forms/textCopyInput';
- import TextField from 'app/views/settings/components/forms/textField';
- import TextareaField from 'app/views/settings/components/forms/textareaField';
- export default {
- title: 'Forms/Fields',
- };
- export const _TextField = withInfo({
- text: 'Simple text input',
- propTablesExclude: [Form],
- })(() => (
- <Panel>
- <Form initialData={{context: {location: 'cat'}}}>
- <TextField
- name="simpletextfieldvalue"
- label="Simple Text Field with Value"
- placeholder="Simple Text Field"
- defaultValue="With a value present"
- />
- <TextField
- name="simpletextfieldplaceholder"
- label="Simple Text Field with Placeholder"
- placeholder="This is placeholder text"
- />
- <TextField
- name="simpletextfieldvaluedisabled"
- label="Disabled - Simple Text Field with Value"
- placeholder="Simple Text Field"
- defaultValue="With a value present"
- disabled
- />
- <TextField
- name="simpletextfieldplaceholderdisabled"
- label="Disabled - Simple Text Field with Placeholder"
- placeholder="This is placeholder text in a disabled field"
- disabled
- />
- <TextField
- name="textfieldwithreturnsubmit"
- label="Text Field With Return Submit"
- placeholder="Type here to show the return button"
- showReturnButton
- />
- <TextField
- name="textfieldflexiblecontrol"
- label="Text Field With Flexible Control State Size"
- placeholder="Type text and then delete it"
- required
- flexibleControlStateSize
- />
- <TextField
- name="textfielddisabled"
- label="Text field with disabled reason"
- placeholder="I am disabled"
- disabled
- disabledReason="This is the reason this field is disabled"
- />
- </Form>
- </Panel>
- ));
- _TextField.story = {
- name: 'TextField',
- };
- export const _TextareaField = withInfo({
- text: 'Textarea input',
- propTablesExclude: [Form],
- })(() => (
- <Panel>
- <Form initialData={{context: {location: 'cat'}}}>
- <TextareaField
- name="simpletextfieldvalue"
- label="Simple Textarea Field with Value"
- help="Additional help text"
- placeholder="Simple Textarea Field"
- defaultValue="With a value present"
- />
- <TextareaField
- name="simpletextfieldautosize"
- autosize={boolean('autosize', true)}
- label="Textarea field with autosize"
- rows={number('Number of rows', 2)}
- placeholder="Use knobs to control rows and autosize setting"
- />
- <TextareaField
- name="simpletextfieldvaluedisabled"
- label="Disabled - Simple Textarea Field with Value"
- placeholder="Simple Textarea Field"
- defaultValue="With a value present"
- disabled
- />
- <TextareaField
- name="simpletextfieldplaceholderdisabled"
- label="Disabled - Simple Textarea Field with Placeholder"
- placeholder="This is placeholder text in a disabled field"
- disabled
- />
- <TextareaField
- name="textfieldwithreturnsubmit"
- label="Textarea Field With Return Submit"
- placeholder="Type here to show the return button"
- showReturnButton
- />
- <TextareaField
- name="textfieldflexiblecontrol"
- label="Textarea Field With Flexible Control State Size"
- placeholder="Type text and then delete it"
- required
- flexibleControlStateSize
- />
- <TextareaField
- name="textfielddisabled"
- label="Textarea Field with disabled reason"
- placeholder="I am disabled"
- disabled
- disabledReason="This is the reason this field is disabled"
- />
- <TextareaField
- name="textareafielderror"
- label="Textarea Field with error"
- placeholder="I have an error"
- error="An error has occurred"
- />
- </Form>
- </Panel>
- ));
- _TextareaField.story = {
- name: 'TextareaField',
- };
- export const __BooleanField = withInfo({
- text: 'Boolean field (i.e. checkbox)',
- propTablesExclude: [Form],
- })(() => (
- <Form>
- <NewBooleanField name="field" label="New Boolean Field" />
- </Form>
- ));
- __BooleanField.story = {
- name: 'BooleanField',
- };
- export const _DatePickerField = withInfo({
- text: 'Date picker field with a popup calendar picker (for a single date)',
- propTablesExclude: [Form],
- })(() => (
- <Form>
- <DatePickerField name="field" label="Date Picker Field" />
- </Form>
- ));
- _DatePickerField.story = {
- name: 'DatePickerField',
- };
- export const _RadioField = withInfo({
- text: 'Radio field',
- propTablesExclude: [Form],
- })(() => (
- <Form>
- <RadioField
- name="radio"
- label="Radio Field"
- choices={[
- ['choice_one', 'Choice One'],
- ['choice_two', 'Choice Two'],
- ['choice_three', 'Choice Three'],
- ]}
- />
- </Form>
- ));
- _RadioField.story = {
- name: 'RadioField',
- };
- export const _SelectField = withInfo({
- text: 'Select Field',
- propTablesExclude: [Form],
- })(() => (
- <Form>
- <SelectField
- name="select"
- label="Select Field"
- choices={[
- ['choice_one', 'Choice One'],
- ['choice_two', 'Choice Two'],
- ['choice_three', 'Choice Three'],
- ]}
- />
- </Form>
- ));
- _SelectField.story = {
- name: 'SelectField',
- };
- export const SelectFieldMultiple = withInfo({
- text: 'Select Control w/ multiple',
- propTablesExclude: [Form],
- })(() => (
- <Form>
- <SelectField
- name="select"
- label="Multi Select"
- multiple
- choices={[
- ['choice_one', 'Choice One'],
- ['choice_two', 'Choice Two'],
- ['choice_three', 'Choice Three'],
- ]}
- />
- </Form>
- ));
- SelectFieldMultiple.story = {
- name: 'SelectField multiple',
- };
- export const NonInlineField = withInfo({
- text: 'Radio Group used w/ FormField',
- propTablesExclude: [Form],
- })(() => (
- <Form>
- <FormField name="radio" label="Radio Field" inline={false}>
- {({value, label, onChange}) => (
- <RadioGroup
- onChange={onChange}
- label={label}
- value={value}
- choices={[
- ['choice_one', 'Choice One', 'Description for Choice One'],
- ['choice_two', 'Choice Two', 'Description for Choice Two'],
- ['choice_three', 'Choice Three'],
- ]}
- />
- )}
- </FormField>
- </Form>
- ));
- NonInlineField.story = {
- name: 'Non-inline field',
- };
- export const _RangeSlider = withInfo('Range slider')(() => (
- <div style={{backgroundColor: '#fff', padding: 20}}>
- <RangeSlider
- name="rangeField"
- min={1}
- max={10}
- step={1}
- value={1}
- formatLabel={value => {
- return `${value} Toaster Strudle${value > 1 ? 's' : ''}`;
- }}
- />
- </div>
- ));
- _RangeSlider.story = {
- name: 'RangeSlider',
- };
- export const WithoutAParentForm = withInfo(
- 'New form fields used without having a parent Form'
- )(() => {
- return (
- <div>
- <TextField
- name="simpletextfield"
- label="Simple Text Field"
- placeholder="Simple Text Field"
- onChange={action('TextField onChange')}
- />
- <NewBooleanField
- name="field"
- label="New Boolean Field"
- onChange={action('BooleanField onChange')}
- />
- <RadioField
- name="radio"
- label="Radio Field"
- onChange={action('RadioField onChange')}
- choices={[
- ['choice_one', 'Choice One'],
- ['choice_two', 'Choice Two'],
- ['choice_three', 'Choice Three'],
- ]}
- />
- <Switch id="test" />
- </div>
- );
- });
- WithoutAParentForm.story = {
- name: 'Without a parent Form',
- };
- export const __TextCopyInput = withInfo('Description')(() => (
- <TextCopyInput onCopy={action('Copied!')}>Value to be copied </TextCopyInput>
- ));
- __TextCopyInput.story = {
- name: 'TextCopyInput',
- };
|