@uiw/react-split
Version:
A piece of content can be divided into areas that can be dragged to adjust the width or height.
301 lines (260 loc) • 17.9 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["@uiw/react-split"] = factory(require("react"));
else
root["@uiw/react-split"] = factory(root["React"]);
})(self, (__WEBPACK_EXTERNAL_MODULE__442__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 192
(__unused_webpack_module, exports, __webpack_require__) {
var __webpack_unused_export__;
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f=__webpack_require__(442),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}__webpack_unused_export__=l;exports.jsx=q;exports.jsxs=q;
/***/ },
/***/ 540
(module, __unused_webpack_exports, __webpack_require__) {
if (true) {
module.exports = __webpack_require__(192);
} else // removed by dead control flow
{}
/***/ },
/***/ 442
(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__442__;
/***/ }
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": () => (/* binding */ src)
});
;// ../node_modules/@babel/runtime/helpers/esm/typeof.js
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
;// ../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
;// ../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
;// ../node_modules/@babel/runtime/helpers/esm/defineProperty.js
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
;// ../node_modules/@babel/runtime/helpers/esm/objectSpread2.js
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
;// ../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
;// ../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
;// ../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
;// ../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
;// ../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
;// ../node_modules/@babel/runtime/helpers/esm/slicedToArray.js
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
;// ../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
;// ../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(442);
var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
;// ./src/style/index.less
// extracted by mini-css-extract-plugin
/* harmony default export */ const style = ({});
// EXTERNAL MODULE: ../node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(540);
;// ./src/index.tsx
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=_objectWithoutProperties(props,_excluded);var _useState=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),_useState2=_slicedToArray(_useState,2),dragging=_useState2[0],setDragging=_useState2[1];var wrapperRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);var paneNumberRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var startXRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var startYRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var moveRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);var targetRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);var boxWidthRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var boxHeightRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var preWidthRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var nextWidthRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var preHeightRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var nextHeightRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var preSizeRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var nextSizeRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);var removeEvent=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function(){window.removeEventListener('mousemove',onDraggingHandler,false);window.removeEventListener('mouseup',onDragEndHandler,false);},[]);var onDraggingHandler=(0,external_root_React_commonjs2_react_commonjs_react_amd_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,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function(){moveRef.current=false;onDragEnd&&onDragEnd(preSizeRef.current,nextSizeRef.current,paneNumberRef.current);removeEvent();setDragging(false);},[onDragEnd,removeEvent]);var _onMouseDown=(0,external_root_React_commonjs2_react_commonjs_react_amd_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,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){return function(){removeEvent();};},[removeEvent]);var cls=[prefixCls,className,"".concat(prefixCls,"-").concat(mode),dragging?'dragging':null].filter(Boolean).join(' ').trim();var child=external_root_React_commonjs2_react_commonjs_react_amd_react_default().Children.toArray(children);return/*#__PURE__*/(0,jsx_runtime.jsx)("div",_objectSpread2(_objectSpread2({className:cls},other),{},{ref:wrapperRef,children:external_root_React_commonjs2_react_commonjs_react_amd_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:_objectSpread2({},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(_objectSpread2(_objectSpread2({},barProps),{},{onMouseDown:function onMouseDown(e){return _onMouseDown(idx+1,e);}}));}else if(idx!==0&&visibleBar){BarCom=/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement('div',_objectSpread2({},barProps),/*#__PURE__*/(0,jsx_runtime.jsx)("div",{onMouseDown:function onMouseDown(e){return _onMouseDown(idx+1,e);}}));}return/*#__PURE__*/(0,jsx_runtime.jsxs)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment,{children:[BarCom,/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(element,_objectSpread2({},props))]},idx);})}));};/* harmony default export */ const src = (Split);
/******/ return __webpack_exports__;
/******/ })()
;
});