Dialog

Dialog

<div class="long-page">

  <div id="dialog"></div>
</div>

:global(.long-page) {
  height: 2000px;
}

import {render} from 'react-dom';
import React from 'react';

import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
import Button from '@jetbrains/ring-ui/components/button/button';
import Input from '@jetbrains/ring-ui/components/input/input';
import Group from '@jetbrains/ring-ui/components/group/group';
import Toggle from '@jetbrains/ring-ui/components/toggle/toggle';
import Panel from '@jetbrains/ring-ui/components/panel/panel';

class DialogDemo extends React.Component {
  state = {
    show: true,
    text: "",
    autoFocusEnabled: true
  };

  doAction = () => {
    alert(`${this.state.text} performed`);
    this.setState({show: false});
  }

  cancelDialog = () => {
    this.setState({show: false});
  }

  render() {
    const {show, text, autoFocusEnabled} = this.state;
    return (
      <div>
        <Group>
          <Button onClick={() => this.setState({show: true})}>Show dialog</Button>
          <Toggle
            checked={this.state.autoFocusEnabled}
            onChange={() => this.setState({autoFocusEnabled: !autoFocusEnabled})}
          >Autofocus</Toggle>
        </Group>

        <Dialog
          show={show}
          onCloseAttempt={this.cancelDialog}
          trapFocus
          autoFocusFirst={autoFocusEnabled}
          showCloseButton
        >
          <Header>Dialog title</Header>
          <Content>
            <Input
              label="Enter action name"
              value={text}
              onChange={e => this.setState({text: e.target.value})}
            />
          </Content>
          <Panel>
            <Button primary onClick={this.doAction}>OK</Button>
            <Button onClick={this.cancelDialog}>Cancel</Button>
          </Panel>
        </Dialog>

      </div>
    );
  }
}

render(<DialogDemo />, document.getElementById('dialog'));

Dialog with scroll

<div>
  <div id="dialog"></div>
</div>

import {render} from 'react-dom';
import React from 'react';

import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
import {Header, Content} from '@jetbrains/ring-ui/components/island/island';
import Button from '@jetbrains/ring-ui/components/button/button';
import Panel from '@jetbrains/ring-ui/components/panel/panel';

class DialogDemo extends React.Component {
  state = {
    show: true
  };

  doAction = () => {
    alert('action performed');
    this.setState({show: false});
  }

  cancelDialog = () => {
    this.setState({show: false});
  }

  render() {
    return (
      <div>
        <div>
          <Button onClick={() => this.setState({show: true})}>Show dialog</Button>
        </div>

        <Dialog show={this.state.show} onCloseAttempt={this.cancelDialog} trapFocus
                showCloseButton>
          <Header>Dialog title</Header>
          <Content>
            <div>
              <p>Dialog content (scrollable)</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining
                essentially unchanged.</p>
            </div>
          </Content>
          <Panel>
            <Button primary onClick={this.doAction}>OK</Button>
            <Button onClick={this.cancelDialog}>Cancel</Button>
          </Panel>
        </Dialog>

      </div>
    );
  }
}

render(<DialogDemo />, document.getElementById('dialog'));