@uiw/react-split
Version:
A piece of content can be divided into areas that can be dragged to adjust the width or height.
172 lines (171 loc) • 8.66 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "visiable", "mode", "className", "children", "visible", "renderBar", "lineBar", "disable", "onDragEnd", "onDragging"];
var Split = function Split(props) {
var _props$visible2;
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-split' : _props$prefixCls,
_props$visiable = props.visiable,
visiable = _props$visiable === void 0 ? true : _props$visiable,
_props$mode = props.mode,
mode = _props$mode === void 0 ? 'horizontal' : _props$mode,
className = props.className,
children = props.children,
_props$visible = props.visible,
visible = _props$visible === void 0 ? (_props$visible2 = props.visible) !== null && _props$visible2 !== void 0 ? _props$visible2 : props.visiable : _props$visible,
renderBar = props.renderBar,
lineBar = props.lineBar,
disable = props.disable,
onDragEnd = props.onDragEnd,
onDragging = props.onDragging,
other = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
dragging = _useState2[0],
setDragging = _useState2[1];
var wrapperRef = (0, _react.useRef)(null);
var paneNumberRef = (0, _react.useRef)(0);
var startXRef = (0, _react.useRef)(0);
var startYRef = (0, _react.useRef)(0);
var moveRef = (0, _react.useRef)(false);
var targetRef = (0, _react.useRef)(null);
var boxWidthRef = (0, _react.useRef)(0);
var boxHeightRef = (0, _react.useRef)(0);
var preWidthRef = (0, _react.useRef)(0);
var nextWidthRef = (0, _react.useRef)(0);
var preHeightRef = (0, _react.useRef)(0);
var nextHeightRef = (0, _react.useRef)(0);
var preSizeRef = (0, _react.useRef)(0);
var nextSizeRef = (0, _react.useRef)(0);
var removeEvent = (0, _react.useCallback)(function () {
window.removeEventListener('mousemove', onDraggingHandler, false);
window.removeEventListener('mouseup', onDragEndHandler, false);
}, []);
var onDraggingHandler = (0, _react.useCallback)(function (env) {
var _targetRef$current, _targetRef$current2;
if (!moveRef.current) {
return;
}
if (!dragging) {
setDragging(true);
}
var nextTarget = (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.nextElementSibling;
var prevTarget = (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.previousElementSibling;
var x = env.clientX - startXRef.current;
var y = env.clientY - startYRef.current;
preSizeRef.current = 0;
nextSizeRef.current = 0;
if (mode === 'horizontal') {
preSizeRef.current = preWidthRef.current + x > -1 ? preWidthRef.current + x : 0;
nextSizeRef.current = nextWidthRef.current - x > -1 ? nextWidthRef.current - x : 0;
if (preSizeRef.current === 0 || nextSizeRef.current === 0) {
return;
}
preSizeRef.current = (preSizeRef.current / boxWidthRef.current >= 1 ? 1 : preSizeRef.current / boxWidthRef.current) * 100;
nextSizeRef.current = (nextSizeRef.current / boxWidthRef.current >= 1 ? 1 : nextSizeRef.current / boxWidthRef.current) * 100;
if (prevTarget && nextTarget) {
prevTarget.style.width = "".concat(preSizeRef.current, "%");
nextTarget.style.width = "".concat(nextSizeRef.current, "%");
}
}
if (mode === 'vertical' && preHeightRef.current + y > -1 && nextHeightRef.current - y > -1) {
preSizeRef.current = preHeightRef.current + y > -1 ? preHeightRef.current + y : 0;
nextSizeRef.current = nextHeightRef.current - y > -1 ? nextHeightRef.current - y : 0;
preSizeRef.current = (preSizeRef.current / boxHeightRef.current >= 1 ? 1 : preSizeRef.current / boxHeightRef.current) * 100;
nextSizeRef.current = (nextSizeRef.current / boxHeightRef.current >= 1 ? 1 : nextSizeRef.current / boxHeightRef.current) * 100;
if (preSizeRef.current === 0 || nextSizeRef.current === 0) {
return;
}
if (prevTarget && nextTarget) {
prevTarget.style.height = "".concat(preSizeRef.current, "%");
nextTarget.style.height = "".concat(nextSizeRef.current, "%");
}
}
onDragging && onDragging(preSizeRef.current, nextSizeRef.current, paneNumberRef.current);
}, [mode, onDragging, dragging]);
var onDragEndHandler = (0, _react.useCallback)(function () {
moveRef.current = false;
onDragEnd && onDragEnd(preSizeRef.current, nextSizeRef.current, paneNumberRef.current);
removeEvent();
setDragging(false);
}, [onDragEnd, removeEvent]);
var _onMouseDown = (0, _react.useCallback)(function (paneNumber, env) {
if (!env.target || !wrapperRef.current) {
return;
}
paneNumberRef.current = paneNumber;
startXRef.current = env.clientX;
startYRef.current = env.clientY;
moveRef.current = true;
targetRef.current = env.target.parentNode;
var prevTarget = targetRef.current.previousElementSibling;
var nextTarget = targetRef.current.nextElementSibling;
boxWidthRef.current = wrapperRef.current.clientWidth;
boxHeightRef.current = wrapperRef.current.clientHeight;
if (prevTarget) {
preWidthRef.current = prevTarget.clientWidth;
preHeightRef.current = prevTarget.clientHeight;
}
if (nextTarget) {
nextWidthRef.current = nextTarget.clientWidth;
nextHeightRef.current = nextTarget.clientHeight;
}
window.addEventListener('mousemove', onDraggingHandler);
window.addEventListener('mouseup', onDragEndHandler, false);
setDragging(true);
}, [onDraggingHandler, onDragEndHandler]);
(0, _react.useEffect)(function () {
return function () {
removeEvent();
};
}, [removeEvent]);
var cls = [prefixCls, className, "".concat(prefixCls, "-").concat(mode), dragging ? 'dragging' : null].filter(Boolean).join(' ').trim();
var child = _react["default"].Children.toArray(children);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
className: cls
}, other), {}, {
ref: wrapperRef,
children: _react["default"].Children.map(child, function (element, idx) {
var props = Object.assign({}, element.props, {
className: ["".concat(prefixCls, "-pane"), element.props.className].filter(Boolean).join(' ').trim(),
style: (0, _objectSpread2["default"])({}, element.props.style)
});
var visibleBar = visible === true || visible && visible.includes(idx + 1) || false;
var barProps = {
className: ["".concat(prefixCls, "-bar"), lineBar ? "".concat(prefixCls, "-line-bar") : null, !lineBar ? "".concat(prefixCls, "-large-bar") : null].filter(Boolean).join(' ').trim()
};
if (disable === true || disable && disable.includes(idx + 1)) {
barProps.className = [barProps.className, disable ? 'disable' : null].filter(Boolean).join(' ').trim();
}
var BarCom = null;
if (idx !== 0 && visibleBar && renderBar) {
BarCom = renderBar((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, barProps), {}, {
onMouseDown: function onMouseDown(e) {
return _onMouseDown(idx + 1, e);
}
}));
} else if (idx !== 0 && visibleBar) {
BarCom = /*#__PURE__*/_react["default"].createElement('div', (0, _objectSpread2["default"])({}, barProps), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
onMouseDown: function onMouseDown(e) {
return _onMouseDown(idx + 1, e);
}
}));
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
children: [BarCom, /*#__PURE__*/_react["default"].cloneElement(element, (0, _objectSpread2["default"])({}, props))]
}, idx);
})
}));
};
var _default = exports["default"] = Split;
module.exports = exports.default;