react-movable/lib/List.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var ReactDOM = __importStar(require("react-dom"));
var utils_1 = require("./utils");
var List = /** @class */ (function (_super) {
    __extends(List, _super);
    function List() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.listRef = React.createRef();
        _this.ghostRef = React.createRef();
        _this.topOffsets = [];
        _this.itemTranslateOffsets = [];
        _this.initialYOffset = 0;
        _this.lastScroll = 0;
        _this.needle = -1;
        _this.afterIndex = -2;
        _this.state = {
            itemDragged: -1,
            selectedItem: -1,
            initialX: 0,
            initialY: 0,
            targetX: 0,
            targetY: 0,
            targetHeight: 0,
            targetWidth: 0,
            liveText: ''
        };
        _this.getChildren = function () {
            if (_this.listRef && _this.listRef.current) {
                return Array.from(_this.listRef.current.children);
            }
            console.warn('No items found in the List container. Did you forget to pass & spread the `props` param in renderList?');
            return [];
        };
        _this.calculateOffsets = function () {
            _this.topOffsets = _this.getChildren().map(function (item) {
                return item.getBoundingClientRect().top;
            });
            _this.itemTranslateOffsets = _this.getChildren().map(function (item) {
                return utils_1.getTranslateOffset(item);
            });
        };
        _this.getTargetIndex = function (e) {
            return _this.getChildren().findIndex(function (child) { return child === e.target || child.contains(e.currentTarget); });
        };
        _this.onMouseDown = function (e) {
            if (e.button !== 0)
                return;
            document.addEventListener('mousemove', _this.onMouseMove, { passive: true });
            document.addEventListener('mouseup', _this.onEnd, { passive: true });
            var index = _this.getTargetIndex(e);
            if (index === -1)
                return;
            _this.onStart(_this.getChildren()[index], e.clientX, e.clientY, index);
        };
        _this.onTouchStart = function (e) {
            document.addEventListener('touchmove', _this.onTouchMove, { passive: true });
            document.addEventListener('touchend', _this.onEnd, { passive: true });
            document.addEventListener('touchcancel', _this.onEnd, { passive: true });
            var index = _this.getTargetIndex(e);
            if (index === -1)
                return;
            _this.onStart(_this.getChildren()[index], e.touches[0].clientX, e.touches[0].clientY, index);
        };
        _this.getYOffset = function () {
            var listScroll = _this.listRef.current
                ? _this.listRef.current.scrollTop
                : 0;
            return window.pageYOffset + listScroll;
        };
        _this.onStart = function (target, clientX, clientY, index) {
            if (_this.state.selectedItem > -1) {
                _this.setState({ selectedItem: -1 });
                _this.needle = -1;
            }
            var targetRect = target.getBoundingClientRect();
            var targetStyles = window.getComputedStyle(target);
            _this.calculateOffsets();
            _this.initialYOffset = _this.getYOffset();
            _this.setState({
                itemDragged: index,
                targetX: targetRect.x - parseInt(targetStyles['margin-left'], 10),
                targetY: targetRect.y - parseInt(targetStyles['margin-top'], 10),
                targetHeight: targetRect.height,
                targetWidth: targetRect.width,
                initialX: clientX,
                initialY: clientY
            });
        };
        _this.onMouseMove = function (e) { return _this.onMove(e.clientX, e.clientY); };
        _this.onTouchMove = function (e) {
            return _this.onMove(e.touches[0].clientX, e.touches[0].clientY);
        };
        _this.onWheel = function (e) {
            if (_this.state.itemDragged < 0)
                return;
            _this.lastScroll = _this.listRef.current.scrollTop += e.deltaY;
            _this.moveOtherItems();
        };
        _this.onMove = function (clientX, clientY) {
            if (_this.state.itemDragged === -1)
                return null;
            utils_1.transformItem(_this.ghostRef.current, clientY - _this.state.initialY, _this.props.lockVertically ? 0 : clientX - _this.state.initialX);
            _this.moveOtherItems();
        };
        _this.moveOtherItems = function () {
            var targetRect = _this.ghostRef.current.getBoundingClientRect();
            var itemVerticalCenter = targetRect.top + targetRect.height / 2;
            var offset = utils_1.getTranslateOffset(_this.getChildren()[_this.state.itemDragged]);
            var currentYOffset = _this.getYOffset();
            // adjust offsets if scrolling happens during the item movement
            if (_this.initialYOffset !== currentYOffset) {
                _this.topOffsets = _this.topOffsets.map(function (offset) { return offset - (currentYOffset - _this.initialYOffset); });
                _this.initialYOffset = currentYOffset;
            }
            _this.afterIndex = utils_1.binarySearch(_this.topOffsets, itemVerticalCenter);
            _this.animateItems(_this.afterIndex === -1 ? 0 : _this.afterIndex, _this.state.itemDragged, offset);
        };
        _this.animateItems = function (needle, movedItem, offset, animateMovedItem) {
            if (animateMovedItem === void 0) { animateMovedItem = false; }
            _this.getChildren().forEach(function (item, i) {
                utils_1.setItemTransition(item, _this.props.transitionDuration);
                if (movedItem === i && animateMovedItem) {
                    if (movedItem === needle) {
                        return utils_1.transformItem(item, null);
                    }
                    utils_1.transformItem(item, movedItem < needle
                        ? _this.itemTranslateOffsets
                            .slice(movedItem + 1, needle + 1)
                            .reduce(function (a, b) { return a + b; }, 0)
                        : _this.itemTranslateOffsets
                            .slice(needle, movedItem)
                            .reduce(function (a, b) { return a + b; }, 0) * -1);
                }
                else if (movedItem < needle && i > movedItem && i <= needle) {
                    utils_1.transformItem(item, -offset);
                }
                else if (i < movedItem && movedItem > needle && i >= needle) {
                    utils_1.transformItem(item, offset);
                }
                else {
                    utils_1.transformItem(item, null);
                }
            });
        };
        _this.onEnd = function () {
            document.removeEventListener('mousemove', _this.onMouseMove);
            document.removeEventListener('touchmove', _this.onTouchMove);
            document.removeEventListener('mouseup', _this.onEnd);
            document.removeEventListener('touchup', _this.onEnd);
            document.removeEventListener('touchcancel', _this.onEnd);
            if (_this.afterIndex > -1 && _this.state.itemDragged !== _this.afterIndex) {
                _this.props.onChange({
                    oldIndex: _this.state.itemDragged,
                    newIndex: _this.afterIndex
                });
            }
            _this.getChildren().forEach(function (item) {
                utils_1.setItemTransition(item, 0);
                utils_1.transformItem(item, null);
            });
            _this.setState({ itemDragged: -1 });
            _this.afterIndex = -2;
            // sometimes the scroll gets messed up after the drop, fix:
            if (_this.lastScroll > 0) {
                _this.listRef.current.scrollTop = _this.lastScroll;
                _this.lastScroll = 0;
            }
        };
        _this.onKeyDown = function (e) {
            var selectedItem = _this.state.selectedItem;
            var index = _this.getTargetIndex(e);
            if (index === -1)
                return;
            if (e.key === ' ') {
                e.preventDefault();
                if (selectedItem === index) {
                    if (selectedItem !== _this.needle) {
                        _this.getChildren().forEach(function (item) {
                            utils_1.setItemTransition(item, 0);
                            utils_1.transformItem(item, null);
                        });
                        _this.props.onChange({
                            oldIndex: selectedItem,
                            newIndex: _this.needle
                        });
                        _this.getChildren()[_this.needle].focus();
                    }
                    _this.setState({
                        selectedItem: -1,
                        liveText: _this.props.voiceover.dropped(selectedItem + 1, _this.needle + 1)
                    });
                    _this.needle = -1;
                }
                else {
                    _this.setState({
                        selectedItem: index,
                        liveText: _this.props.voiceover.lifted(index + 1)
                    });
                    _this.needle = index;
                }
            }
            if ((e.key === 'ArrowDown' || e.key === 'j') &&
                selectedItem > -1 &&
                _this.needle < _this.props.values.length - 1) {
                e.preventDefault();
                var offset = utils_1.getTranslateOffset(_this.getChildren()[selectedItem]);
                _this.needle++;
                _this.animateItems(_this.needle, selectedItem, offset, true);
                _this.setState({
                    liveText: _this.props.voiceover.moved(_this.needle + 1, false)
                });
            }
            if ((e.key === 'ArrowUp' || e.key === 'k') &&
                selectedItem > -1 &&
                _this.needle > 0) {
                e.preventDefault();
                var offset = utils_1.getTranslateOffset(_this.getChildren()[selectedItem]);
                _this.needle--;
                _this.animateItems(_this.needle, selectedItem, offset, true);
                _this.setState({
                    liveText: _this.props.voiceover.moved(_this.needle + 1, true)
                });
            }
            if (e.key === 'Escape' && selectedItem > -1) {
                _this.getChildren().forEach(function (item) {
                    utils_1.setItemTransition(item, 0);
                    utils_1.transformItem(item, null);
                });
                _this.setState({
                    selectedItem: -1,
                    liveText: _this.props.voiceover.canceled(selectedItem + 1)
                });
                _this.needle = -1;
            }
            if ((e.key === 'Tab' || e.key === 'Enter') && selectedItem > -1) {
                e.preventDefault();
            }
        };
        return _this;
    }
    List.prototype.componentDidMount = function () {
        this.calculateOffsets();
    };
    List.prototype.render = function () {
        var _this = this;
        var baseStyle = {
            userDrag: 'none',
            userSelect: 'none',
            boxSizing: 'border-box',
            position: 'relative'
        };
        var ghostStyle = __assign({}, baseStyle, { top: this.state.targetY, left: this.state.targetX, width: this.state.targetWidth, height: this.state.targetHeight, display: 'block', position: 'fixed', marginTop: 0 });
        return (React.createElement(React.Fragment, null,
            this.props.renderList({
                children: this.props.values.map(function (value, index) {
                    var isDragged = index === _this.state.itemDragged;
                    var isSelected = index === _this.state.selectedItem;
                    var props = {
                        key: index,
                        tabIndex: 0,
                        'aria-roledescription': _this.props.voiceover.item(index + 1),
                        onKeyDown: _this.onKeyDown,
                        onMouseDown: _this.onMouseDown,
                        onTouchStart: _this.onTouchStart,
                        style: __assign({}, baseStyle, { visibility: isDragged ? 'hidden' : undefined, zIndex: isSelected ? 5000 : 0 })
                    };
                    return _this.props.renderItem({
                        value: value,
                        props: props,
                        index: index,
                        isDragged: isDragged,
                        isSelected: isSelected
                    });
                }),
                isDragged: this.state.itemDragged > -1,
                props: {
                    ref: this.listRef
                }
            }),
            this.state.itemDragged > -1 &&
                ReactDOM.createPortal(this.props.renderItem({
                    value: this.props.values[this.state.itemDragged],
                    props: {
                        ref: this.ghostRef,
                        style: ghostStyle,
                        onWheel: this.onWheel
                    },
                    isDragged: true,
                    isSelected: false
                }), document.body),
            React.createElement("div", { "aria-live": "assertive", role: "log", "aria-atomic": "true", style: {
                    position: 'absolute',
                    width: '1px',
                    height: '1px',
                    margin: '-1px',
                    border: '0px',
                    padding: '0px',
                    overflow: 'hidden',
                    clip: 'react(0px, 0px, 0px, 0px)',
                    clipPath: 'inset(100%)'
                } }, this.state.liveText)));
    };
    List.defaultProps = {
        transitionDuration: 300,
        lockVertically: false,
        voiceover: {
            item: function (position) {
                return "You are currently at a draggable item at position " + position + ". Press space bar to lift.";
            },
            lifted: function (position) {
                return "You have lifted item at position " + position + ". Press j to move down, k to move up, space bar to drop and escape to cancel.";
            },
            moved: function (position, up) {
                return "You have moved the lifted item " + (up ? 'up' : 'down') + " to position " + position + ". Press j to move down, k to move up, space bar to drop and escape to cancel.";
            },
            dropped: function (from, to) {
                return "You have dropped the item. It has moved from position " + from + " to " + to + ".";
            },
            canceled: function (position) {
                return "You have cancelled the movement. The item has returned to its starting position of " + position + ".";
            }
        }
    };
    return List;
}(React.Component));
exports.default = List;