How to use dom-align - 10 common examples

alignElements() {
    // Don't bother about aligning the elements if we're not showing the
    // dropdown.
    if(!this.state.showing) {
      return;
    }

    var points = this.props.align == "right" ? [ "tr", "br" ] : [ "tl", "bl" ];
    domAlign(ReactDOM.findDOMNode(this.dropdownNode), ReactDOM.findDOMNode(this.labelNode), { points: points });
  }

let transformOrigin = getTransfromOrigin(targetOrigin);

        // 设置缩放动画的起点
        content.style.transformOrigin = transformOrigin;
        content.style.mozTransformOrigin = transformOrigin;
        content.style.msTransformOrigin = transformOrigin;
        content.style.webkitTransformOrigin = transformOrigin;

        content.style.maxHeight = maxHeight == null ? 'auto' : `${maxHeight}px`;
        content.style.overflowY = maxHeight == null ? 'visible' : 'auto';
        content.style.maxWidth = maxWidth == null ? 'auto' : `${maxWidth}px`;
        content.style.overflowX = maxWidth == null ? 'auto' : `${maxWidth}px`;

        // 对齐元素
        align(
            this.el.firstElementChild,
            anchor,
            {
                points: [targetOrigin, anchorOrigin],
                offset: [offsetX, offsetY],
                overflow: {
                    adjustX: true,
                    adjustY: true
                },
                useCssTransform: false
            }
        );

        // 恢复之前的样式
        content.style.transform = cssTransformBackup;

disabled,
            target,
            align
        } = this.data.get();

        if (!disabled && target) {
            const source = this.el;

            let result;
            const element = getElement(target);
            const point = getPoint(target);

            const activeElement = document.activeElement;

            if (element) {
                result = alignElement(source, element, align);
            }
            else if (point) {
                result = alignPoint(source, point, align);
            }

            restoreFocus(activeElement, source);

            // this.fire('align', {source, result});
        }
    }
    /*template: `

} = this.data.get();

        if (!disabled && target) {
            const source = this.el;

            let result;
            const element = getElement(target);
            const point = getPoint(target);

            const activeElement = document.activeElement;

            if (element) {
                result = alignElement(source, element, align);
            }
            else if (point) {
                result = alignPoint(source, point, align);
            }

            restoreFocus(activeElement, source);

            // this.fire('align', {source, result});
        }
    }
    /*template: `

align() {
    const ret = domAlign(this.refs.source, this.refs.target, {
      points: ['bl', 'bl'],
      overflow: {
        adjustY: 1,
      },
    });
    console.log(ret);
  }

componentDidUpdate() {

        let {main, layer} = this;

        if (main && layer) {

            let {anchorAlignment, layerAlignment} = this.props;

            align(
                layer,
                main,
                {
                    points: [layerAlignment, anchorAlignment],
                    overflow: {
                        adjustX: true,
                        adjustY: true
                    }
                }
            );

        }

    }

alignLayerToAnchor(layer, anchor) {

        let {
            anchorAlignment,
            layerAlignment,
            anchorOffset,
            layerOffset
        } = this.props;

        let transform = layer.style.transform;

        layer.style.transform = '';

        align(
            layer,
            anchor,
            {
                points: [anchorAlignment, layerAlignment],
                overflow: {
                    adjustX: true,
                    adjustY: true
                },
                offset: layerOffset,
                anchorOffset: anchorOffset
            }
        );

        layer.style.transform = transform;

    }

forceAlign(source, target, align) {
        const element = getElement(target);
        const point = getPoint(target);
        let result;
        if (element) {
            if (source.style.visibility === '') {
                source.style.visibility = 'hidden';
            }
            result = alignElement(source, element, align);
        } else if (point) {
            result = alignPoint(source, point, align);
        }
    },
    updateDropdownMenu() {

forceAlign() {
        const {
            disabled,
            target,
            align
        } = this.data.get();

        if (!disabled && target) {
            if (target instanceof window.HTMLElement) {
                alignElement(this.el, target, align);
            }
            else if (target && typeof target === 'object') {
                alignPoint(this.el, target, align);
            }

            restoreFocus(document.activeElement, this.el);
        }
    },