@txdfe/at-follow-dialog v1.0.3

示例

import AtFollowDialog from '@txdfe/at-follow-dialog';
import { Button } from '@txdfe/at';

class Demo extends React.Component {
  state = {
    visible: false,
    currentStep: 'home',
  }

  toggleVisible = () => {
    this.setState({ visible: !this.state.visible });
  }

  render() {
    const { currentStep, visible } = this.state;
    return (
      <div className='example'>
        <Button
          onClick={this.toggleVisible}
          type="primary"
          id="targetDom"
        >
          Toggle visible
        </Button>
        <AtFollowDialog
          title="AtFollowDialog"
          visible={visible}
          target="targetDom"
          hasBackIcon={currentStep !== 'home'}
          onBackClick={() => this.setState({ currentStep: 'home' })}
          onRequestClose={this.toggleVisible}
          okText="提交"
          onOk={this.toggleVisible}
          align="tc bc"
          offset={[0, 8]}
        >
          {
            currentStep === 'home' &&
            <Button onClick={() => this.setState({ currentStep: '1' })}>next step</Button>
          }
          {
            currentStep === '1' &&
            <div>step 1</div>
          }
        </AtFollowDialog>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API