How to use the react-dom.findDOMNode function in react-dom

To help you get started, weโ€™ve selected a few react-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github apache / incubator-spot / spot-oa / ui / flow / js / components / ImpactAnalysisPanel.react.js View on Github external
draw() {
        const container = $(ReactDOM.findDOMNode(this));

        const m = [50, 50, 0, 100]; // top right bottom left
        const w = container.width() - m[1] - m[3]; // width
        const h = container.height() - m[0] - m[2]; // height

        this.xScale.range([0, w]);
        this.y = Math.round(h * 0.1); // bar height

        this.canvas.attr('transform', `translate(${m[3]},${m[0]})`);

        this.drawBars(this.state.data);
    },
    drawBars(root) {
github VisualComposer / builder / public / editor / modules / ui / layoutBarBackend / lib / content-start.js View on Github external
componentDidMount () {
    this.props.api.addAction('setStartContent', (Component, props = {}) => {
      this.setState({
        contentComponent: Component,
        contentProps: props
      })
    })
    this.props.api
      .reply('bar-content-start:show', () => {
        this.setState({ showContent: true })
      })
      .reply('bar-content-start:hide', () => {
        this.setState({ showContent: false })
      })
    this.addResizeListener(ReactDOM.findDOMNode(this), this.handleElementResize)
  }
github gabrielbull / react-desktop / src / form / form.common / form.js View on Github external
applyWithToRows() {
    let maxWidth = 0;
    let rows = [];

    for (var prop in this.refs) {
      if (this.refs.hasOwnProperty(prop)) {
        let row = findDOMNode(this.refs[prop]);
        rows = [...rows, row];
        maxWidth =
          row.offsetWidth > maxWidth ? row.offsetWidth : maxWidth;
      }
    }

    for (let row of rows) {
      row.style.width = `${maxWidth}px`;
    }
  }
github silverstripe / silverstripe-admin / client / src / components / Search / SearchBox.js View on Github external
focusOnLastTag() {
    const node = ReactDOM.findDOMNode(this);
    if (!node) {
      return;
    }
    const lastTag = node.querySelector('.compact-tag-list__visible .tag:last-child');
    if (lastTag) {
      lastTag.focus();
    }
  }
github baifendian / Sirius / package / Aries / src / functions / CalcManage / ClusterInfo / index.jsx View on Github external
calcDesiredHeight(){
    let rootDivHeight = this.calcRootDivHeight()
    ReactDOM.findDOMNode(this.refs.RootDiv).style.height = (rootDivHeight+'px')

    let splitPanelHeight = rootDivHeight - ReactDOM.findDOMNode(this.refs.NavigationInPage).clientHeight

    let splitPanel = ReactDOM.findDOMNode( this.refs.SplitPanel )
    let topHeight = parseInt(splitPanelHeight/3) * 2
    let bottomHeight = splitPanelHeight - topHeight
    splitPanel.style.height = splitPanelHeight + 'px'
    splitPanel.childNodes[0].style.height = topHeight + 'px'
    splitPanel.childNodes[1].style.top = topHeight + 'px'
    splitPanel.childNodes[2].style.height = bottomHeight + 'px'

    this.onSplitPanelHeightChange( 0,0,topHeight,bottomHeight )
  },
github jslauthor / react-audio-component / src / containers / App.js View on Github external
handlePlay = () => {
    this.props.play(ReactDOM.findDOMNode(this.refs.audio));
  }
github mui-org / material-ui / src / internal / FocusRipple.js View on Github external
pulsate = () => {
    const innerCircle = ReactDOM.findDOMNode(this.refs.innerCircle);
    if (!innerCircle) return;

    const startScale = 'scale(1)';
    const endScale = 'scale(0.85)';
    const currentScale = innerCircle.style.transform || startScale;
    const nextScale = currentScale === startScale ? endScale : startScale;

    autoPrefix.set(innerCircle.style, 'transform', nextScale);
    this.timeout = setTimeout(this.pulsate, pulsateDuration);
  };
github softindex / uikernel / src / grid / mixins / ui.js View on Github external
_updateField: function (rowId, column) {
    const cell = findDOMNode(this.body).querySelector(`tr[key="${rowId}"] td[key=${column}]`);
    cell.innerHTML = this._getCellHTML(column, this._getRecord(rowId));
    cell.classList.remove('dgrid-changed', 'dgrid-error', 'dgrid-warning');
    const cellClassList = [];
    if (this._isChanged(rowId, this._getBindParam(column))) {
      cellClassList.push('dgrid-changed');
    }
    if (this._hasError(rowId, this._getBindParam(column))) {
      cellClassList.push('dgrid-error');
    }
    if (this._hasWarning(rowId, this._getBindParam(column))) {
      cellClassList.push('dgrid-warning');
    }
    cell.classList.add(...cellClassList);
  },
github Foundry376 / Mailspring / app / src / components / editable-list.tsx View on Github external
_focusSelf = () => {
    (ReactDOM.findDOMNode(this) as HTMLElement).focus();
  };