How to use the dom-helpers/style function in dom-helpers

To help you get started, we’ve selected a few dom-helpers 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 aruberto / react-foundation-components / src / collapse / index.js View on Github external
handleExit = (...args) => {
    const { dimension, onExit } = this.props;
    const [elem] = args;
    const baseValue = elem[`offset${capitalize(dimension)}`];
    const margins = MARGINS[dimension];
    const value =
      baseValue
      + Number.parseInt(css(elem, margins[0]), 10)
      + Number.parseInt(css(elem, margins[1]), 10);

    elem.style[dimension] = `${value}px`;

    if (onExit) {
      onExit(...args);
    }
  };
github aruberto / react-foundation-components / src / collapse / create.js View on Github external
handleExit = (...args) => {
      const { dimension, onExit } = this.props;
      const [elem] = args;
      const baseValue = elem[`offset${capitalize(dimension)}`];
      const margins = MARGINS[dimension];
      const value =
        baseValue
        + Number.parseInt(css(elem, margins[0]), 10)
        + Number.parseInt(css(elem, margins[1]), 10);

      elem.style[dimension] = `${value}px`;

      if (onExit) {
        onExit(...args);
      }
    };
github aruberto / react-foundation-components / src / util / overlay-trigger / index.js View on Github external
} else if (position === 'right') {
    css(elem, 'left', `${targetPosition.left + targetPosition.width}px`);
  }

  if (position === 'top' || position === 'bottom') {
    let leftOffset = 0;

    if (alignment !== 'left') {
      leftOffset = targetPosition.width - parseInt(css(elem, 'width'), 10);

      if (alignment !== 'right') {
        leftOffset /= 2;
      }
    }

    css(elem, 'left', `${targetPosition.left + leftOffset}px`);
  } else if (position === 'left' || position === 'right') {
    let topOffset = 0;

    if (alignment !== 'top') {
      topOffset = targetPosition.height - parseInt(css(elem, 'height'), 10);

      if (alignment !== 'bottom') {
        topOffset /= 2;
      }
    }

    css(elem, 'top', `${targetPosition.top + topOffset}px`);
  }
}
github massgov / mayflower / react / src / components / animations / Collapse / index.js View on Github external
function getDimensionValue(dimension, elem) {
  const MARGINS = {
    height: ['marginTop', 'marginBottom'],
    width: ['marginLeft', 'marginRight']
  };
  const value = elem[`offset${capitalize(dimension)}`];
  const margins = MARGINS[dimension];

  return(
    value +
    parseInt(css(elem, margins[0]), 10) +
    parseInt(css(elem, margins[1]), 10)
  );
}
github jquense / react-widgets / packages / react-widgets / src / SlideDownTransition.js View on Github external
getHeight() {
    let container = this.element
    let content = container.firstChild
    let margin = parseInt(css(content, 'margin-top'), 10)
               + parseInt(css(content, 'margin-bottom'), 10);

    let old = container.style.display
    let height;

    container.style.display = 'block'
    height = (
      (getHeight(content) || 0) +
      (isNaN(margin) ? 0 : margin)
    );
    container.style.display = old
    return height
  }
github aruberto / react-foundation-components / src / util / overlay-trigger / index.js View on Github external
if (position === 'top') {
    css(
      elem,
      'top',
      `${targetPosition.top - parseInt(css(elem, 'height'), 10)}px`
    );
  } else if (position === 'bottom') {
    css(elem, 'top', `${targetPosition.top + targetPosition.height}px`);
  } else if (position === 'left') {
    css(
      elem,
      'left',
      `${targetPosition.left - parseInt(css(elem, 'width'), 10)}px`
    );
  } else if (position === 'right') {
    css(elem, 'left', `${targetPosition.left + targetPosition.width}px`);
  }

  if (position === 'top' || position === 'bottom') {
    let leftOffset = 0;

    if (alignment !== 'left') {
      leftOffset = targetPosition.width - parseInt(css(elem, 'width'), 10);

      if (alignment !== 'right') {
        leftOffset /= 2;
      }
    }

    css(elem, 'left', `${targetPosition.left + leftOffset}px`);
  } else if (position === 'left' || position === 'right') {
    let topOffset = 0;
github forestturner / PokerHandRangeCalc / node_modules / react-bootstrap / es / Collapse.js View on Github external
function getDimensionValue(dimension, elem) {
  var value = elem['offset' + capitalize(dimension)];
  var margins = MARGINS[dimension];

  return value + parseInt(css(elem, margins[0]), 10) + parseInt(css(elem, margins[1]), 10);
}
github jquense / react-bootstrap-modal / src / Modal.js View on Github external
getZIndex = getZIndex || (() => {
      let modal = document.createElement('div')
        , backdrop = document.createElement('div')
        , zIndexFactor;

      modal.className = 'modal hide'
      backdrop.className = 'modal-backdrop hide'

      document.body.appendChild(modal)
      document.body.appendChild(backdrop)

      baseIndex.modal = +css(modal, 'z-index')
      baseIndex.backdrop = +css(backdrop, 'z-index')
      zIndexFactor = baseIndex.modal - baseIndex.backdrop

      document.body.removeChild(modal)
      document.body.removeChild(backdrop)

      return (type) => baseIndex[type] + (zIndexFactor * (this.props.manager.modals.length - 1));
    })();
  }
github jquense / react-widgets / packages / react-widgets / src / SlideTransitionGroup.js View on Github external
handleExited = () => {
    let node = findDOMNode(this)
    css(node, { overflow: '', height: '' });
  }
github jquense / react-widgets / src / SlideTransition.jsx View on Github external
componentWillLeave(done) {
    var node  = compat.findDOMNode(this)
      , width = getWidth(node)
      , direction = this.props.direction;

    width = direction === 'left' ? -width : width

    this.ORGINAL_POSITION = node.style.position

    css(node, { position: 'absolute', top: 0, left: 0})

    config.animate(node, { left: width + 'px' }, this.props.duration, () => {
        css(node, {
          position: this.ORGINAL_POSITION,
          overflow: 'hidden'
        });

        this.ORGINAL_POSITION = null
        done && done()
      })
  },