icehrm/web/components/IceFormModal.js

import React from 'react';
import {
  Button, Col, Modal, Row, Space,
} from 'antd';
import IceForm from './IceForm';

class IceFormModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      viewOnly: false,
      loading: false,
    };
    this.iceFormReference = React.createRef();
    this.width = 800;
  }

  setViewOnly(value) {
    this.setState({ viewOnly: value });
  }

  show(data) {
    if (!data) {
      this.setState({ visible: true });
      if (this.iceFormReference.current) {
        this.iceFormReference.current.resetFields();
      }
    } else {
      this.setState({ visible: true });
      if (this.iceFormReference.current && this.iceFormReference.current.isReady()) {
        this.iceFormReference.current.updateFields(data);
      } else {
        this.waitForIt(
          () => this.iceFormReference.current && this.iceFormReference.current.isReady(),
          () => { this.iceFormReference.current.updateFields(data); },
          1000,
        );
      }
    }
  }

  waitForIt(condition, callback, time) {
    setTimeout(() => {
      if (condition()) {
        callback();
      } else {
        this.waitForIt(condition, callback, time);
      }
    }, time);
  }

  hide() {
    this.setState({ visible: false });
  }

  save(params) {
    this.iceFormReference.current.save(params, () => { this.closeModal(); });
  }

  closeModal() {
    this.hide();
    this.iceFormReference.current.showError(false);
  }

  render() {
    const {
      fields, adapter, saveCallback, cancelCallback,
    } = this.props;

    const additionalProps = {};
    additionalProps.footer = (
      <Row gutter={16}>
        <Col className="gutter-row" span={12} style={{}} />
        <Col className="gutter-row" span={12} style={{ textAlign: 'right' }}>
          <Space>
            <Button onClick={() => {
              if (cancelCallback) {
                cancelCallback();
              } else {
                this.closeModal();
              }
            }}
            >
              {this.props.adapter.gt('Cancel')}
            </Button>
            <Button
              loading={this.state.loading}
              type="primary"
              onClick={() => {
                this.setState({ loading: true });
                const iceFrom = this.iceFormReference.current;
                iceFrom
                  .validateFields()
                  .then((values) => {
                    if (!iceFrom.isValid()) {
                      this.setState({ loading: false });
                      return;
                    }
                    if (saveCallback) {
                      saveCallback(values, iceFrom.showError.bind(this), this.closeModal.bind(this));
                    } else {
                      this.save(values);
                    }
                    this.setState({ loading: false });
                  })
                  .catch((info) => {
                    this.setState({ loading: false });
                  });
              }}
            >
              {this.state.viewOnly ? this.props.adapter.gt('Done') : this.props.adapter.gt('Save')}
            </Button>
          </Space>
        </Col>
      </Row>
    );

    if (this.state.viewOnly) {
      additionalProps.footer = null;
    }

    return (
      <Modal
        visible={this.state.visible}
        title={this.props.adapter.gt(this.props.title || adapter.objectTypeName)}
        maskClosable={false}
        width={this.width}
        onCancel={() => {
          if (cancelCallback) {
            cancelCallback();
          } else {
            this.closeModal();
          }
        }}
        {...additionalProps}
      >
        <IceForm
          ref={this.iceFormReference}
          adapter={adapter}
          fields={fields}
          viewOnly={this.state.viewOnly}
        />
      </Modal>
    );
  }
}


export default IceFormModal;