export default function DemoDefault()

in packages-rc/console-base-rc-button/stories/demo-default/index.tsx [52:130]


export default function DemoDefault(): JSX.Element {
  const [stateDom, setStateDom] = useState<HTMLElement | null>(null);
  const [stateDisabled, setStateDisabled] = useState(false);
  
  return <>
    <ThemeSwitcher />
    <PkgInfo />
    <Button theme={ButtonTheme.BRAND_PRIMARY}>FUCK</Button>
    <ComponentTesting<ButtonProps> {...{
      componentName: 'Button',
      componentPackageName: '@alicloud/console-base-rc-button',
      defaultProps: DEFAULT_PROPS,
      renderer
    }} />
    <H2>Ref Works Right</H2>
    <Button {...{
      ref: setStateDom,
      label: 'ref shall work right',
      theme: ButtonTheme.PRIMARY,
      onClick() {
        // eslint-disable-next-line no-console
        console.info(stateDom);
      }
    }} />
    <H2>All Themes</H2>
    <div>
      <InputSwitch {...{
        label: 'props.disabled',
        value: stateDisabled,
        onChange: setStateDisabled
      }} />
    </div>
    {Object.entries(ButtonTheme).map(([k, v]) => <ScButtonThemes {...{
      key: k,
      theme: v,
      label: v,
      disabled: stateDisabled
    }} />)}
    <H2>垂直对齐 IconLeft</H2>
    <Button {...{
      iconLeft: ' ',
      textAlign: 'left',
      label: 'icon left NONE'
    }} />
    <br />
    <Button {...{
      iconLeft: 'x',
      textAlign: 'left',
      label: 'icon left x'
    }} />
    <br />
    <Button {...{
      iconLeft: 'check',
      textAlign: 'left',
      label: 'icon left check'
    }} />
    <br />
    <Button {...{
      iconLeft: 'config',
      textAlign: 'left',
      label: 'icon left config'
    }} />
    <H2>垂直对齐 IconRight</H2>
    <Button {...{
      iconRight: 'x',
      label: 'icon left x'
    }} />
    <br />
    <Button {...{
      iconRight: 'check',
      label: 'icon left check'
    }} />
    <br />
    <Button {...{
      iconRight: 'config',
      label: 'icon left config'
    }} />
  </>;
}