How to use the react-dom-factories.i function in react-dom-factories

this.setState({urlValue: value});
            },
            onKeyDown: (e: KeyboardEvent) => {
              if (e.which === 13 && this.state.urlValue !== '') { // enter
                onConfirmUrl();
              } else if (e.which === 27) { // esc
                this.hideLinkEditor();
              }
            },
          }),
          D.span({className: 'input-group-btn'},
            Button({
              disabled: this.state.urlValue === '',
              bsSize: 'small',
              onClick: () => onConfirmUrl(),
            }, D.i({className: 'fa fa-check'})),
            Button({
              bsSize: 'small',
              onClick: () => this.hideLinkEditor(),
            }, D.i({className: 'fa fa-close'}))
          )
        )
      )
    );
  }

disabled: this.state.saving,
              style: {backgroundColor: 'lightGrey'},
              onClick: this.onCancel,
            }, 'Cancel'),
            Button({
              bsStyle: 'danger',
              disabled: this.isDeleteBtnDisabled(),
              onClick: this.onClickDeleteBtn,
              style: {marginLeft: '11px'}
            }, 'Delete Page'),
            Button({
              bsStyle: 'primary',
              onClick: () => this.onSave(),
              disabled: this.state.saving,
            }, this.state.saving ? D.span({},
              'Saving', D.i({className: 'fa fa-cog fa-spin', style: {marginLeft: '5px'}})
            ) : 'Save & View'),
            Button({
              bsStyle: 'default',
              onClick: () => this.onSave({action: ResourceLinkAction[ResourceLinkAction.edit]}),
              disabled: this.state.saving,
              style: {marginLeft: '11px'}
            }, 'Save')
          )
        )
      )
    );
  }

ButtonGroup(
        {},
        Button({
          ref: 'add-link-btn',
          bsSize: 'small',
          title: shouldShowLinkButton ? 'Add link' : 'Add link (select text or place cursor into link)',
          disabled: !shouldShowLinkButton,
          onClick: () => this.showLinkEditor(currentUrl),
        }, D.i({className: 'fa fa-link'})),
        this.renderLinkEditor(this.state.showURLInput, 'add-link-btn', () => this.confirmUrl()),
        Button({
          bsSize: 'small',
          title: 'Remove link',
          disabled: !isCursorOnLink,
          onClick: () => this.removeLink(),
        }, D.i({className: 'fa fa-unlink'}))
      )
    );
  }

private renderRelation = () =>
    D.div(
      {className: 'facet__relation'},
      D.div(
        {
          className:  'facet__relation__header',
          onClick: this.onRelationClick().bind(this),
      },
        D.i({
          className: classnames({
            'facet__relation__header__icon--selected': this.isSelectedRelation(),
            'facet__relation__header__icon': !this.isSelectedRelation(),
          }),
        }),
        createElement(TemplateItem, {
          template: {
            source: this.props.data.viewState.relationTemplate,
            options: this.props.relation.tuple,
          },
        }),
        this.isSelectedRelation() && this.props.data.viewState.values.loading ? createElement(Spinner) : D.span({})
      ),
      this.isSelectedRelation() && !this.props.data.viewState.values.loading ? (
        D.div(
          {className: 'facet__relation__body'},

animation: false,
        backdrop: false,
        className: b.toString(),
        dialogClassName: b('dialog').toString(),
      }
    ) as any,
    ModalHeader(
      { closeButton: false, className: b('header').toString() },
      ModalTitle(
        {},
        D.button(
          {
            className: classNames('btn', 'btn-default', b('back-button').toString()),
            onClick: () => getOverlaySystem().hide(ACTION_DIALOG_REF),
          },
          D.i({}),
          'Back to Lightbox'
        ),
        props.title
      )
    ),
    ModalBody(
      {
        className: b('body').toString(),
      },
      D.div(
        {
          style: { height: 800 },
        },
        props.children
      )
    )

editorState: editorState,
        onToggle: this.toggleBlockType,
      }),
      InlineStyleControls({
        editorState: editorState,
        onToggle: this.toggleInlineStyle,
      }),
      ButtonGroup(
        {},
        Button({
          ref: 'add-link-btn',
          bsSize: 'small',
          title: shouldShowLinkButton ? 'Add link' : 'Add link (select text or place cursor into link)',
          disabled: !shouldShowLinkButton,
          onClick: () => this.showLinkEditor(currentUrl),
        }, D.i({className: 'fa fa-link'})),
        this.renderLinkEditor(this.state.showURLInput, 'add-link-btn', () => this.confirmUrl()),
        Button({
          bsSize: 'small',
          title: 'Remove link',
          disabled: !isCursorOnLink,
          onClick: () => this.removeLink(),
        }, D.i({className: 'fa fa-unlink'}))
      )
    );
  }