@storybook/addon-actions#action TypeScript Examples

ReactSelect = () => {
  return (
    <Form
      handleSubmit={action('submit')}
      schema={{
        select: {
          type: 'custom',
          component: ReactSelectField,
          props: {
            label: 'React-Select Field',
            placeholder: 'Select an option',
            options: [
              { label: 'Option 1', value: 'Option 1'},
              { label: 'Option 2', value: 'Option 2'},
              { label: 'Option 3', value: 'Option 3'}
            ]
          }
        }
      }}
    />
  );
}

createProps = (): InputProps => ({
  size: optionsKnob(
    'size',
    {
      default: INPUT_SIZE.default,
      large: INPUT_SIZE.large,
      compact: INPUT_SIZE.compact,
      mini: INPUT_SIZE.mini,
    },
    INPUT_SIZE.default,
    {
      display: 'inline-radio',
    }
  ),
  positive: boolean('positive', false),
  error: boolean('error', false),
  disabled: boolean('disabled', false),
  clearable: boolean('clearable', false),

  // actions
  onChangeText: action('on change text'),
  onFocus: action('on focus'),
  onBlur: action('on blur'),
})

CustomizeTriggerTemplate: Story<DatePickerProps> = (args) => {
  const [value, setValue] = useState(new Date());
  const onSelect = (date: Date) => {
    setValue(date)
    action('onSelect:')
  };

  return (
    <DatePicker
      trigger={
        <Button type="secondary">
          {format(value, '您的所选时间为 yyyy-MM-dd HH:mm:ss')}
        </Button>
      }
      onSelect={onSelect}
      {...args}
    />
  );
}

Default: React.FC = () => {
  const [open, toggleOpen] = useToggle(false)

  return (
    <>
      <Button onClick={toggleOpen}>Open Dialog</Button>
      <SelectComponentDialog
        type="Processor"
        open={open}
        components={exampleComponentMap}
        onClose={toggleOpen}
        onSelect={action('Save')}
      />
    </>
  )
}

Template: Story<DrawerProps> = (args) => {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <Button onClick={() => setVisible(true)}>Open Drawer</Button>
      <Drawer
        {...args}
        data-testid="drawer"
        visible={visible}
        onClose={(e) => {
          setVisible(false);
          action('onClose');
          console.log(e, 'onClose');
        }}
      />
    </div>
  );
}

Default: React.FC = () => {
  const errorConfiguration: ErrorConfiguration = {
    onSourceError: 'REMOVE_SOURCE',
    onProcessorError: 'REMOVE_PROCESSOR',
    onItemError: 'DISCARD_ITEM',
  }

  return (
    <PipelineEditErrorConfiguration
      errorConfiguration={errorConfiguration}
      setErrorConfiguration={action('setErrorConfiguration')}
    />
  )
}

Footer.args = {
  title: '带有footer的drawer',
  footer: (
    <>
      <Button style={{ width: '100%' }}>Footer</Button>
    </>
  ),
  afterClose: () => action('afterClose'),
};

Default: React.FC = () => {
  const [open, toggleOpen] = useToggle(false)

  return (
    <>
      <Button onClick={toggleOpen}>Open Dialog</Button>
      <DescriptionDialog
        open={open}
        onClose={toggleOpen}
        onSave={action('Save')}
      />
    </>
  )
}

it('renders without crashing', () => {
  const div = document.createElement('div')

  ReactDOM.render(
    <FormContainer
      onSuccess={() => {
        action('success')
      }}
      defaultValues={''}
    >
      <CheckboxButtonGroup
        label={'the label'}
        options={[
          { id: '1', label: 'Label 1' },
          { id: '2', label: 'label 2' },
        ]}
        name={'basic-checkbox-button-group'}
      />
    </FormContainer>,
    div
  )
  ReactDOM.unmountComponentAtNode(div)
})

Default.args = {
  placeholder: 'Enter or search content',
  onChange: action('InputChange'),
  onBlur: action('InputBlur'),
  onFocus: action('InputFocus'),
  onPressEnter: action('InputPressEnter'),
  'aria-label': 'Default Input',
  size: 'normal',
  autoFocus: false,
  autoComplete: 'off',
  disabled: false,
};

WithHandleSubmit = () => {
  const formContext = useForm<{ name: string }>({
    defaultValues: {
      name: 'Hans'
    }
  })
  const { handleSubmit } = formContext
  const actionFunc = action('submit')
  const onSubmit = handleSubmit((formData) => {
    actionFunc(formData)
  })
  return (
    <FormContainer
      formContext={formContext}
      handleSubmit={onSubmit}>
      <TextFieldElement name={'name'} label={'Name'} /><br />
      <Button type={'submit'} color={'primary'}>Submit</Button>
    </FormContainer>
  )
}

Icons = () => (
  <Input.InputNumber
    defaultValue="1"
    prefix={<PlusOutlined />}
    suffix="$"
    onChange={(event) => {
      // eslint-disable-next-line no-console
      console.log(event.target.value);
      action('onChange')(event);
    }}
  />
)

demo = () => (
  <StoryContainer>
    <Avatar
      size={select("Size", ["default", "small"], "default")}
      disabled={boolean("Disabled", false)}
      intent={select(
        "Intent",
        ["default", "active", "pending", "invalid"],
        "active",
      )}
      onClick={action("button-click")}
      selectable={boolean("Selectable", true)}
      transformCase={select(
        "transformCase",
        ["none", "uppercase"],
        "uppercase",
      )}
    >
      {text("Text", "RL")}
    </Avatar>
  </StoryContainer>
)

Disable = (args: ListPickerProps) => {
  const [multipleValue, setMultipleValue] = useState<undefined | string[]>(undefined);
  return (
    <ListPicker
      {...args}
      style={style}
      disabled
      value={multipleValue}
      onChange={(val) => {
        console.log('multiple onChange 并不会触发', val);
      }}
      overlayStyle={{ width: '240px' }}
      model="multiple"
      onClear={() => {
        setMultipleValue(undefined);
      }}
      onConfirm={(val) => setMultipleValue(val as any)}
      placeholder="请选择"
    >
      <SearchBar size="small" style={{ width: '100%' }} placeholder="请搜索名称" onSearch={() => action('onSearch')} />
      <List.Selection options={largeOptions} />
    </ListPicker>
  );
}

WithClosable = () => {
  return (
    <div style={{ padding: 30 }}>
      <Spacer type="vertical">
        <Alert type="warning" description="Validation failed." showIcon closable onClose={action('close')} />
      </Spacer>
    </div>
  );
}

streamActionProps: {
  [Key in keyof Required<Events>]: HandlerFunction;
} = {
  onPlay: action("play"),
  onAbort: action("abort"),
  onCanPlay: action("canplay"),
  onCanPlayThrough: action("canplaythrough"),
  onDurationChange: action("durationchange"),
  onEnded: action("ended"),
  onError: action("error"),
  onLoadStart: action("loadstart"),
  onLoadedData: action("loadeddata"),
  onLoadedMetaData: action("loadedmetadata"),
  onPause: action("pause"),
  onPlaying: action("playing"),
  onProgress: action("progress"),
  onRateChange: action("ratechange"),
  onSeeked: action("seeked"),
  onSeeking: action("seeking"),
  onStalled: action("stalled"),
  onStreamAdEnd: action("stream-adend"),
  onStreamAdStart: action("stream-adstart"),
  onStreamAdTimeout: action("stream-adtimeout"),
  onSuspend: action("suspend"),
  onTimeUpdate: action("timeupdate"),
  onVolumeChange: action("volumechange"),
  onWaiting: action("waiting"),
}

Selection = (args: ListPickerProps) => {
  const multipleOptions = [
    { label: '子一', value: 'ziyi' },
    { label: '子二', value: 'zier' },
  ];
  return (
    <ListPicker
      {...args}
      overlayStyle={{ width: '240px' }}
      placeholder="请选择"
      onChange={() => action('v')}
      style={style}
    >
      <SearchBar size="small" style={{ width: '100%' }} placeholder="请搜索名称" onSearch={() => action('onSearch')} />
      <List.Selection>
        <List options={multipleOptions} id="id" title="有item" />
        <List options={[]} id="id2" title="无item" />
        <List id="id3" title="有JSX item">
          <List.Item value="id3-1">JSX-1</List.Item>
          <List.Item value="id3-2">JSX-2</List.Item>
        </List>
      </List.Selection>
    </ListPicker>
  );
}

withMenuHeader = (): StoryFnReactReturnType => {
    const avatar = <Avatar>EM</Avatar>;
    const menuTitle = text('menuTitle', 'Menu Title');
    const menuSubtitle = text('menuSubtitle', 'Menu Subtitle');
    return (
        <UserMenu
            avatar={avatar}
            menuGroups={[
                {
                    items: [
                        {
                            title: 'Settings',
                            icon: <Settings />,
                            onClick: action("click 'Settings'"),
                        },
                        {
                            title: 'Contact Us',
                            icon: <Email />,
                            onClick: action("click 'Contact Us'"),
                        },
                        {
                            title: 'Log Out',
                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
                            onClick: action("click 'Log Out'"),
                        },
                    ],
                },
            ]}
            menuTitle={menuTitle}
            menuSubtitle={menuSubtitle}
            onOpen={action('open')}
            onClose={action('close')}
        />
    );
}

EventTargetPicker = (args: ListPickerProps) => {
  const [value, setValue] = useState<string>('');
  return (
    <ListPicker
      {...args}
      onChange={(e: string) => {
        action('onChange');
        setValue(e);
      }}
      placeholder="请选择事件"
      style={style}
      overlayStyle={{ width: '320px' }}
      value={value}
    >
      <SearchBar style={{ width: '100%' }} onChange={null} placeholder="搜索事件名称" />
      <Tabs defaultValue="all">
        <Tabs.Tab value="all" label="全部">
          <List.Selection options={searchData}>
            <Recent />
          </List.Selection>
        </Tabs.Tab>
        <Tabs.Tab value="event" label="事件">
          <List.Selection options={searchData3(2)} />
        </Tabs.Tab>
        <Tabs.Tab value="metrics" label="计算指标">
          <List.Selection options={searchData} />
        </Tabs.Tab>
      </Tabs>
    </ListPicker>
  );
}

withBasicUsage = (): StoryFnReactReturnType => {
    const value = text('Avatar.value', 'AB');
    const avatar = <Avatar>{value}</Avatar>;
    return (
        <UserMenu
            avatar={avatar}
            menuGroups={[
                {
                    items: [
                        {
                            title: 'Settings',
                            icon: <Settings />,
                            onClick: action("click 'Settings'"),
                        },
                        {
                            title: 'Contact Us',
                            icon: <Email />,
                            onClick: action("click 'Contact Us'"),
                        },
                        {
                            title: 'Log Out',
                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
                            onClick: action("click 'Log Out'"),
                        },
                    ],
                },
            ]}
            onOpen={action('open')}
            onClose={action('close')}
        />
    );
}

TargetUserPicker = (args: ListPickerProps) => {
  const [value, setValue] = useState('');

  return (
    <ListPicker
      {...args}
      style={style}
      size="small"
      placeholder="请选择目标用户"
      onChange={(e: string) => {
        action('onChange');
        setValue(e);
      }}
      onClear={() => {
        action('onClear');
      }}
      allowClear
      value={value}
    >
      <SearchBar style={{ width: '100%' }} placeholder="搜索名称" onSearch={() => action('onSearch')} />
      <div style={{ margin: '8px 0px' }}>
        <List.Selection>
          <Recent title="最近使用" />
          <List id="prepared" title="预定义">
            <List.Item value="uv" label="全部用户" />
            <List.Item value="nuv" label="新用户" />
          </List>
          <List id="normal" title="其他">
            {measurements.map(
              (s: { id: string; name: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal }) => (
                <List.Item value={s.id} label={s.name} />
              )
            )}
          </List>
        </List.Selection>
      </div>
    </ListPicker>
  );
}

InlineHelp = () => (
	<div style={{ margin: '0 auto', width: '35rem' }}>
		<Form>
			<Form.Fieldset legend="Change your password">
				<InlineMessage.Information
					description="You can reset the password for your account by  completing this form"
					withBackground
				/>
				<Form.Password label="New password" required value="password" />
				<Form.Password label="Re-enter new password" required />
			</Form.Fieldset>
			<Form.Buttons>
				<Button.Secondary onClick={action('clicked')}>Cancel</Button.Secondary>
				<Button.Primary onClick={action('clicked')}>Save</Button.Primary>
			</Form.Buttons>
		</Form>
	</div>
)

Selection = () => {
  const columns: ColumnsType<DataSourceType> = [
    {
      dataIndex: 'id',
      title: 'Id',
    },
    {
      dataIndex: 'name',
      title: 'Name',
    },
    {
      dataIndex: 'age',
      title: 'Age',
    },
    {
      dataIndex: 'address',
      title: 'Address',
    },
  ];
  const rowSelection: TableProps<DataSourceType>['rowSelection'] = {
    onChange: (selectedKeys) => {
      // eslint-disable-next-line no-console
      console.log(`? selectedKeys: `, selectedKeys);
      action(`rowSelection onChange`)(selectedKeys);
    },
    columnWidth: 60,
    fixed: false,
    // selectedRowKeys: [], // Controlled
    getCheckboxProps: (record) => ({ disabled: record.age % 2 === 0 }),
  };
  return (
    <Table<DataSourceType> columns={columns} rowKey="id" rowSelection={rowSelection} dataSource={genDataSource(100)} />
  );
}

LayoutModule = () => {
  // const drawer = <AdminLayoutDrawerModule />;

  const data = {
    me: {
      id: 1,
      email: text('Email', '[email protected]'),
      isAdmin: false,
      createdDate: new Date(),
      updatedDate: new Date(),
    },
  };

  return (
    <AdminLayoutModule
      // drawer={drawer}
      data={data}
      handleLogout={action('handleLogout')}
    />
  );
}

navItems: DrawerNavItem[] = [
    {
        title: 'Identity Management',
        icon: 'person',
        onSelect: action('Selected: Identity Management'),
    },
    {
        title: 'Calendar',
        icon: 'today',
        onSelect: action('Selected: Calendar'),
    },
    {
        title: 'Accessibility',
        icon: 'accessibility',
        onSelect: action('Selected: Accessibility'),
    },
    {
        title: 'Notifications',
        icon: 'notifications_active',
        onSelect: action('Selected: Notifications'),
    },
]

OnChange: Story<StepsProps> = () => (
  <Steps
    onChange={(e) => {
      console.log(e, 'onChange');
      action('onchange');
    }}
    current={6}
  >
    {new Array(6).fill(0).map((item, index) => (
      <Steps.Step label={`Step ${index + 1}`} value={index} prefix={item} />
    ))}
  </Steps>
)

ReadOnly = () => (
	<Form readOnly>
		<Form.Fieldset legend="Complete your registration">
			<Form.Row>
				<Form.Text label="First Name" required />
				<Form.Text label="Last Name" required />
			</Form.Row>
			<Form.Text label="Company" value="Talend" required />
			<Form.FieldGroup
				label="Phone"
				prefix={
					<Form.Select label="Phone prefix" value="France (+33)">
						{getCountryCodes().map((countryCode, key) => (
							<option key={key}>{countryCode}</option>
						))}
					</Form.Select>
				}
				hasError
				description="Phone number is invalid"
				required
			>
				<Form.Tel label="Phone number" value="6121314k" />
			</Form.FieldGroup>
			<Form.Select label="Industry">
				<option selected>IT</option>
			</Form.Select>
			<Form.Password label="Password" />
			<Form.Password label="Repeat password" />
			<Form.Checkbox checked required>
				I have read and accept the <Link href="#">terms of use</Link>
			</Form.Checkbox>
			<Form.Buttons>
				<Button.Primary onClick={action('submit')}>Complete Registration</Button.Primary>
			</Form.Buttons>
		</Form.Fieldset>
	</Form>
)

navItems2 = [
    {
        title: 'Settings',
        itemID: 'group2_item1',
        icon: 'settings',
        onSelect: action('Settings'),
    },
    {
        title: 'Legal',
        itemID: 'group2_item2',
        icon: 'gavel',
        onSelect: action('Selected: Legal'),
    },
]

Disabled = () => (
	<Form disabled>
		<Form.Fieldset legend="Complete your registration">
			<Form.Row>
				<Form.Text label="First Name" required />
				<Form.Text label="Last Name" required />
			</Form.Row>
			<Form.Text label="Company" value="Talend" required />
			<Form.FieldGroup
				label="Phone"
				prefix={
					<Form.Select label="Phone prefix" value="France (+33)">
						{getCountryCodes().map((countryCode, key) => (
							<option key={key}>{countryCode}</option>
						))}
					</Form.Select>
				}
				hasError
				description="Phone number is invalid"
				required
			>
				<Form.Tel label="Phone number" value="6121314k" />
			</Form.FieldGroup>
			<Form.Select label="Industry">
				<option selected>IT</option>
			</Form.Select>
			<Form.Password label="Password" />
			<Form.Password label="Repeat password" />
			<Form.Checkbox checked required>
				I have read and accept the <Link href="#">terms of use</Link>
			</Form.Checkbox>
			<Form.Buttons>
				<Button.Primary onClick={action('submit')}>Complete Registration</Button.Primary>
			</Form.Buttons>
		</Form.Fieldset>
	</Form>
)