@uiw/react-split
Advanced tools
@@ -8,19 +8,20 @@ import React from 'react'; | ||
/** | ||
* 拖拽宽度/高度变化回调函数,宽度或者高度根据 mode 参数来确定 | ||
* Drag width/height change callback function, | ||
* the width or height is determined according to the mode parameter | ||
*/ | ||
onDragging?: (preSize: number, nextSize: number, paneNumber: number) => void; | ||
/** 拖拽结束的回调函数 */ | ||
/** Callback function for dragging end */ | ||
onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) => void; | ||
/** 支持自定义拖拽工具栏 */ | ||
/** Support custom drag and drop toolbar */ | ||
renderBar?: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element; | ||
/** 设置拖拽的工具条,为线条样式。 */ | ||
/** Set the drag and drop toolbar as a line style. */ | ||
lineBar?: boolean; | ||
/** 设置拖拽的工具条,是否可见 */ | ||
/** Set the dragged toolbar, whether it is visible or not */ | ||
visiable?: boolean | number[]; | ||
/** | ||
* 设置拖拽的工具条,禁用 | ||
* Set the drag and drop toolbar, disable | ||
*/ | ||
disable?: boolean | number[]; | ||
/** | ||
* 类型,可选值为 `horizontal` 或 `vertical` | ||
* type, optional `horizontal` or `vertical` | ||
*/ | ||
@@ -27,0 +28,0 @@ mode?: 'horizontal' | 'vertical'; |
@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
root["@uiw/react-split"] = factory(root["React"]); | ||
})(self, function(__WEBPACK_EXTERNAL_MODULE__787__) { | ||
})(self, (__WEBPACK_EXTERNAL_MODULE__787__) => { | ||
return /******/ (() => { // webpackBootstrap | ||
@@ -16,99 +16,2 @@ /******/ "use strict"; | ||
/***/ 323: | ||
/***/ ((module) => { | ||
/* | ||
object-assign | ||
(c) Sindre Sorhus | ||
@license MIT | ||
*/ | ||
/* eslint-disable no-unused-vars */ | ||
var getOwnPropertySymbols = Object.getOwnPropertySymbols; | ||
var hasOwnProperty = Object.prototype.hasOwnProperty; | ||
var propIsEnumerable = Object.prototype.propertyIsEnumerable; | ||
function toObject(val) { | ||
if (val === null || val === undefined) { | ||
throw new TypeError('Object.assign cannot be called with null or undefined'); | ||
} | ||
return Object(val); | ||
} | ||
function shouldUseNative() { | ||
try { | ||
if (!Object.assign) { | ||
return false; | ||
} | ||
// Detect buggy property enumeration order in older V8 versions. | ||
// https://bugs.chromium.org/p/v8/issues/detail?id=4118 | ||
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers | ||
test1[5] = 'de'; | ||
if (Object.getOwnPropertyNames(test1)[0] === '5') { | ||
return false; | ||
} | ||
// https://bugs.chromium.org/p/v8/issues/detail?id=3056 | ||
var test2 = {}; | ||
for (var i = 0; i < 10; i++) { | ||
test2['_' + String.fromCharCode(i)] = i; | ||
} | ||
var order2 = Object.getOwnPropertyNames(test2).map(function (n) { | ||
return test2[n]; | ||
}); | ||
if (order2.join('') !== '0123456789') { | ||
return false; | ||
} | ||
// https://bugs.chromium.org/p/v8/issues/detail?id=3056 | ||
var test3 = {}; | ||
'abcdefghijklmnopqrst'.split('').forEach(function (letter) { | ||
test3[letter] = letter; | ||
}); | ||
if (Object.keys(Object.assign({}, test3)).join('') !== | ||
'abcdefghijklmnopqrst') { | ||
return false; | ||
} | ||
return true; | ||
} catch (err) { | ||
// We don't expect any of the above to throw, but better to be safe. | ||
return false; | ||
} | ||
} | ||
module.exports = shouldUseNative() ? Object.assign : function (target, source) { | ||
var from; | ||
var to = toObject(target); | ||
var symbols; | ||
for (var s = 1; s < arguments.length; s++) { | ||
from = Object(arguments[s]); | ||
for (var key in from) { | ||
if (hasOwnProperty.call(from, key)) { | ||
to[key] = from[key]; | ||
} | ||
} | ||
if (getOwnPropertySymbols) { | ||
symbols = getOwnPropertySymbols(from); | ||
for (var i = 0; i < symbols.length; i++) { | ||
if (propIsEnumerable.call(from, symbols[i])) { | ||
to[symbols[i]] = from[symbols[i]]; | ||
} | ||
} | ||
} | ||
} | ||
return to; | ||
}; | ||
/***/ }), | ||
/***/ 638: | ||
@@ -118,3 +21,4 @@ /***/ ((__unused_webpack_module, exports, __webpack_require__) => { | ||
var __webpack_unused_export__; | ||
/** @license React v17.0.2 | ||
/** | ||
* @license React | ||
* react-jsx-runtime.production.min.js | ||
@@ -127,4 +31,4 @@ * | ||
*/ | ||
__webpack_require__(323);var f=__webpack_require__(787),g=60103;__webpack_unused_export__=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");__webpack_unused_export__=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0}; | ||
function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.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:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q; | ||
var f=__webpack_require__(787),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; | ||
@@ -345,7 +249,6 @@ | ||
function _setPrototypeOf(o, p) { | ||
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { | ||
o.__proto__ = p; | ||
return o; | ||
}; | ||
return _setPrototypeOf(o, p); | ||
@@ -374,3 +277,3 @@ } | ||
function _getPrototypeOf(o) { | ||
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { | ||
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { | ||
return o.__proto__ || Object.getPrototypeOf(o); | ||
@@ -377,0 +280,0 @@ }; |
/*! For license information please see split.min.js.LICENSE.txt */ | ||
!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("react")):"function"===typeof define&&define.amd?define(["react"],t):"object"===typeof exports?exports["@uiw/react-split"]=t(require("react")):e["@uiw/react-split"]=t(e.React)}(self,(function(e){return(()=>{"use strict";var t={323:e=>{var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function i(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(i){return!1}}()?Object.assign:function(e,o){for(var s,a,c=i(e),l=1;l<arguments.length;l++){for(var u in s=Object(arguments[l]))r.call(s,u)&&(c[u]=s[u]);if(t){a=t(s);for(var p=0;p<a.length;p++)n.call(s,a[p])&&(c[a[p]]=s[a[p]])}}return c}},638:(e,t,r)=>{r(323);var n=r(787),i=60103;if(60107,"function"===typeof Symbol&&Symbol.for){var o=Symbol.for;i=o("react.element"),o("react.fragment")}var s=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a=Object.prototype.hasOwnProperty,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,r){var n,o={},l=null,u=null;for(n in void 0!==r&&(l=""+r),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)a.call(t,n)&&!c.hasOwnProperty(n)&&(o[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===o[n]&&(o[n]=t[n]);return{$$typeof:i,type:e,key:l,ref:u,props:o,_owner:s.current}}t.jsx=l,t.jsxs=l},724:(e,t,r)=>{e.exports=r(638)},787:t=>{t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{function e(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function r(r){for(var n=1;n<arguments.length;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?t(Object(i),!0).forEach((function(t){e(r,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(i,e))}))}return r}function o(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function s(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e,t){return c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},c(e,t)}function l(e){return l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},l(e)}function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function p(e,t){if(t&&("object"===u(t)||"function"===typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return a(e)}function h(e){var t=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=l(e);if(t){var i=l(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return p(this,r)}}n.r(i),n.d(i,{default:()=>y});var f=n(787),d=n.n(f),g=n(724),b=["prefixCls","className","children","mode","visiable","renderBar","lineBar","disable","onDragEnd","onDragging"],y=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&c(e,t)}(u,e);var t,n,i,l=h(u);function u(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),(t=l.call(this,e)).state={dragging:!1},t.warpper=void 0,t.paneNumber=void 0,t.startX=void 0,t.startY=void 0,t.move=void 0,t.target=void 0,t.boxWidth=void 0,t.boxHeight=void 0,t.preWidth=void 0,t.nextWidth=void 0,t.preHeight=void 0,t.nextHeight=void 0,t.preSize=void 0,t.nextSize=void 0,t.onDragEnd=t.onDragEnd.bind(a(t)),t.onDragging=t.onDragging.bind(a(t)),t}return t=u,(n=[{key:"componentWillUnmount",value:function(){this.removeEvent()}},{key:"removeEvent",value:function(){window.removeEventListener("mousemove",this.onDragging,!1),window.removeEventListener("mouseup",this.onDragEnd,!1)}},{key:"onMouseDown",value:function(e,t){if(t.target&&this.warpper){this.paneNumber=e,this.startX=t.clientX,this.startY=t.clientY,this.move=!0,this.target=t.target.parentNode;var r=this.target.previousElementSibling,n=this.target.nextElementSibling;this.boxWidth=this.warpper.clientWidth,this.boxHeight=this.warpper.clientHeight,r&&(this.preWidth=r.clientWidth,this.preHeight=r.clientHeight),n&&(this.nextWidth=n.clientWidth,this.nextHeight=n.clientHeight),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd,!1),this.setState({dragging:!0})}}},{key:"onDragging",value:function(e){if(this.move){this.state.dragging||this.setState({dragging:!0});var t=this.props,r=t.mode,n=t.onDragging,i=this.target.nextElementSibling,o=this.target.previousElementSibling,s=e.clientX-this.startX,a=e.clientY-this.startY;if(this.preSize=0,this.nextSize=0,"horizontal"===r){if(this.preSize=this.preWidth+s>-1?this.preWidth+s:0,this.nextSize=this.nextWidth-s>-1?this.nextWidth-s:0,0===this.preSize||0===this.nextSize)return;this.preSize=100*(this.preSize/this.boxWidth>=1?1:this.preSize/this.boxWidth),this.nextSize=100*(this.nextSize/this.boxWidth>=1?1:this.nextSize/this.boxWidth),o&&i&&(o.style.width="".concat(this.preSize,"%"),i.style.width="".concat(this.nextSize,"%"))}if("vertical"===r&&this.preHeight+a>-1&&this.nextHeight-a>-1){if(this.preSize=this.preHeight+a>-1?this.preHeight+a:0,this.nextSize=this.nextHeight-a>-1?this.nextHeight-a:0,this.preSize=100*(this.preSize/this.boxHeight>=1?1:this.preSize/this.boxHeight),this.nextSize=100*(this.nextSize/this.boxHeight>=1?1:this.nextSize/this.boxHeight),0===this.preSize||0===this.nextSize)return;o&&i&&(o.style.height="".concat(this.preSize,"%"),i.style.height="".concat(this.nextSize,"%"))}n&&n(this.preSize,this.nextSize,this.paneNumber)}}},{key:"onDragEnd",value:function(){var e=this.props.onDragEnd;this.move=!1,e&&e(this.preSize,this.nextSize,this.paneNumber),this.removeEvent(),this.setState({dragging:!1})}},{key:"render",value:function(){var e=this,t=this.props,n=t.prefixCls,i=t.className,s=t.children,a=t.mode,c=t.visiable,l=t.renderBar,u=t.lineBar,p=t.disable,h=(t.onDragEnd,t.onDragging,o(t,b)),f=this.state.dragging,y=[n,i,"".concat(n,"-").concat(a),f?"dragging":null].filter(Boolean).join(" ").trim(),v=d().Children.toArray(s);return(0,g.jsx)("div",r(r({className:y},h),{},{ref:function(t){return e.warpper=t},children:d().Children.map(v,(function(t,i){var o=Object.assign({},t.props,{className:["".concat(n,"-pane"),t.props.className].filter(Boolean).join(" ").trim(),style:r({},t.props.style)}),s=!0===c||c&&c.includes(i+1)||!1,a={className:["".concat(n,"-bar"),u?"".concat(n,"-line-bar"):null,u?null:"".concat(n,"-large-bar")].filter(Boolean).join(" ").trim()};(!0===p||p&&p.includes(i+1))&&(a.className=[a.className,p?"disable":null].filter(Boolean).join(" ").trim());var h=null;return 0!==i&&s&&l?h=l(r(r({},a),{},{onMouseDown:e.onMouseDown.bind(e,i+1)})):0!==i&&s&&(h=d().createElement("div",r({},a),(0,g.jsx)("div",{onMouseDown:e.onMouseDown.bind(e,i+1)}))),(0,g.jsxs)(d().Fragment,{children:[h,d().cloneElement(t,r({},o))]},i)}))}))}}])&&s(t.prototype,n),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),u}(d().Component);y.defaultProps={prefixCls:"w-split",visiable:!0,mode:"horizontal"}})(),i})()})); | ||
!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("react")):"function"===typeof define&&define.amd?define(["react"],t):"object"===typeof exports?exports["@uiw/react-split"]=t(require("react")):e["@uiw/react-split"]=t(e.React)}(self,(e=>(()=>{"use strict";var t={638:(e,t,r)=>{var i=r(787),n=Symbol.for("react.element"),o=Symbol.for("react.fragment"),s=Object.prototype.hasOwnProperty,a=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,r){var i,o={},l=null,u=null;for(i in void 0!==r&&(l=""+r),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)s.call(t,i)&&!c.hasOwnProperty(i)&&(o[i]=t[i]);if(e&&e.defaultProps)for(i in t=e.defaultProps)void 0===o[i]&&(o[i]=t[i]);return{$$typeof:n,type:e,key:l,ref:u,props:o,_owner:a.current}}t.jsx=l,t.jsxs=l},724:(e,t,r)=>{e.exports=r(638)},787:t=>{t.exports=e}},r={};function i(e){var n=r[e];if(void 0!==n)return n.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,i),o.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{function e(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function r(r){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?t(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):t(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}function o(e,t){if(null==e)return{};var r,i,n=function(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function s(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function l(e){return l=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},l(e)}function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function h(e,t){if(t&&("object"===u(t)||"function"===typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return a(e)}function p(e){var t=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,i=l(e);if(t){var n=l(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return h(this,r)}}i.r(n),i.d(n,{default:()=>y});var f=i(787),d=i.n(f),g=i(724),b=["prefixCls","className","children","mode","visiable","renderBar","lineBar","disable","onDragEnd","onDragging"],y=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&c(e,t)}(u,e);var t,i,n,l=p(u);function u(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),(t=l.call(this,e)).state={dragging:!1},t.warpper=void 0,t.paneNumber=void 0,t.startX=void 0,t.startY=void 0,t.move=void 0,t.target=void 0,t.boxWidth=void 0,t.boxHeight=void 0,t.preWidth=void 0,t.nextWidth=void 0,t.preHeight=void 0,t.nextHeight=void 0,t.preSize=void 0,t.nextSize=void 0,t.onDragEnd=t.onDragEnd.bind(a(t)),t.onDragging=t.onDragging.bind(a(t)),t}return t=u,(i=[{key:"componentWillUnmount",value:function(){this.removeEvent()}},{key:"removeEvent",value:function(){window.removeEventListener("mousemove",this.onDragging,!1),window.removeEventListener("mouseup",this.onDragEnd,!1)}},{key:"onMouseDown",value:function(e,t){if(t.target&&this.warpper){this.paneNumber=e,this.startX=t.clientX,this.startY=t.clientY,this.move=!0,this.target=t.target.parentNode;var r=this.target.previousElementSibling,i=this.target.nextElementSibling;this.boxWidth=this.warpper.clientWidth,this.boxHeight=this.warpper.clientHeight,r&&(this.preWidth=r.clientWidth,this.preHeight=r.clientHeight),i&&(this.nextWidth=i.clientWidth,this.nextHeight=i.clientHeight),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd,!1),this.setState({dragging:!0})}}},{key:"onDragging",value:function(e){if(this.move){this.state.dragging||this.setState({dragging:!0});var t=this.props,r=t.mode,i=t.onDragging,n=this.target.nextElementSibling,o=this.target.previousElementSibling,s=e.clientX-this.startX,a=e.clientY-this.startY;if(this.preSize=0,this.nextSize=0,"horizontal"===r){if(this.preSize=this.preWidth+s>-1?this.preWidth+s:0,this.nextSize=this.nextWidth-s>-1?this.nextWidth-s:0,0===this.preSize||0===this.nextSize)return;this.preSize=100*(this.preSize/this.boxWidth>=1?1:this.preSize/this.boxWidth),this.nextSize=100*(this.nextSize/this.boxWidth>=1?1:this.nextSize/this.boxWidth),o&&n&&(o.style.width="".concat(this.preSize,"%"),n.style.width="".concat(this.nextSize,"%"))}if("vertical"===r&&this.preHeight+a>-1&&this.nextHeight-a>-1){if(this.preSize=this.preHeight+a>-1?this.preHeight+a:0,this.nextSize=this.nextHeight-a>-1?this.nextHeight-a:0,this.preSize=100*(this.preSize/this.boxHeight>=1?1:this.preSize/this.boxHeight),this.nextSize=100*(this.nextSize/this.boxHeight>=1?1:this.nextSize/this.boxHeight),0===this.preSize||0===this.nextSize)return;o&&n&&(o.style.height="".concat(this.preSize,"%"),n.style.height="".concat(this.nextSize,"%"))}i&&i(this.preSize,this.nextSize,this.paneNumber)}}},{key:"onDragEnd",value:function(){var e=this.props.onDragEnd;this.move=!1,e&&e(this.preSize,this.nextSize,this.paneNumber),this.removeEvent(),this.setState({dragging:!1})}},{key:"render",value:function(){var e=this,t=this.props,i=t.prefixCls,n=t.className,s=t.children,a=t.mode,c=t.visiable,l=t.renderBar,u=t.lineBar,h=t.disable,p=(t.onDragEnd,t.onDragging,o(t,b)),f=this.state.dragging,y=[i,n,"".concat(i,"-").concat(a),f?"dragging":null].filter(Boolean).join(" ").trim(),v=d().Children.toArray(s);return(0,g.jsx)("div",r(r({className:y},p),{},{ref:function(t){return e.warpper=t},children:d().Children.map(v,(function(t,n){var o=Object.assign({},t.props,{className:["".concat(i,"-pane"),t.props.className].filter(Boolean).join(" ").trim(),style:r({},t.props.style)}),s=!0===c||c&&c.includes(n+1)||!1,a={className:["".concat(i,"-bar"),u?"".concat(i,"-line-bar"):null,u?null:"".concat(i,"-large-bar")].filter(Boolean).join(" ").trim()};(!0===h||h&&h.includes(n+1))&&(a.className=[a.className,h?"disable":null].filter(Boolean).join(" ").trim());var p=null;return 0!==n&&s&&l?p=l(r(r({},a),{},{onMouseDown:e.onMouseDown.bind(e,n+1)})):0!==n&&s&&(p=d().createElement("div",r({},a),(0,g.jsx)("div",{onMouseDown:e.onMouseDown.bind(e,n+1)}))),(0,g.jsxs)(d().Fragment,{children:[p,d().cloneElement(t,r({},o))]},n)}))}))}}])&&s(t.prototype,i),n&&s(t,n),Object.defineProperty(t,"prototype",{writable:!1}),u}(d().Component);y.defaultProps={prefixCls:"w-split",visiable:!0,mode:"horizontal"}})(),n})())); |
@@ -1,8 +0,3 @@ | ||
/* | ||
object-assign | ||
(c) Sindre Sorhus | ||
@license MIT | ||
*/ | ||
/** @license React v17.0.2 | ||
/** | ||
* @license React | ||
* react-jsx-runtime.production.min.js | ||
@@ -9,0 +4,0 @@ * |
@@ -8,19 +8,20 @@ import React from 'react'; | ||
/** | ||
* 拖拽宽度/高度变化回调函数,宽度或者高度根据 mode 参数来确定 | ||
* Drag width/height change callback function, | ||
* the width or height is determined according to the mode parameter | ||
*/ | ||
onDragging?: (preSize: number, nextSize: number, paneNumber: number) => void; | ||
/** 拖拽结束的回调函数 */ | ||
/** Callback function for dragging end */ | ||
onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) => void; | ||
/** 支持自定义拖拽工具栏 */ | ||
/** Support custom drag and drop toolbar */ | ||
renderBar?: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element; | ||
/** 设置拖拽的工具条,为线条样式。 */ | ||
/** Set the drag and drop toolbar as a line style. */ | ||
lineBar?: boolean; | ||
/** 设置拖拽的工具条,是否可见 */ | ||
/** Set the dragged toolbar, whether it is visible or not */ | ||
visiable?: boolean | number[]; | ||
/** | ||
* 设置拖拽的工具条,禁用 | ||
* Set the drag and drop toolbar, disable | ||
*/ | ||
disable?: boolean | number[]; | ||
/** | ||
* 类型,可选值为 `horizontal` 或 `vertical` | ||
* type, optional `horizontal` or `vertical` | ||
*/ | ||
@@ -27,0 +28,0 @@ mode?: 'horizontal' | 'vertical'; |
{ | ||
"name": "@uiw/react-split", | ||
"version": "5.8.7", | ||
"description": "A piece of view can be divided into areas where the width or height can be adjusted by dragging.", | ||
"version": "5.8.8", | ||
"description": "A piece of content can be divided into areas that can be dragged to adjust the width or height.", | ||
"main": "cjs/index.js", | ||
@@ -31,5 +31,5 @@ "module": "esm/index.js", | ||
"files": [ | ||
"src/**/*.{ts,tsx,less}", | ||
"dist.css", | ||
"dist", | ||
"src", | ||
"esm", | ||
@@ -43,18 +43,22 @@ "cjs" | ||
"devDependencies": { | ||
"@kkt/less-modules": "~7.1.1", | ||
"@wcj/dark-mode": "^1.0.14", | ||
"@uiw/react-codesandbox": "^1.1.5", | ||
"@uiw/react-codepen": "^1.0.2", | ||
"markdown-react-code-preview-loader": "^2.1.2", | ||
"react-code-preview-layout": "^2.0.6", | ||
"@kkt/less-modules": "~7.2.0", | ||
"@kkt/ncc": "~1.0.8", | ||
"@kkt/raw-modules": "~7.1.1", | ||
"@kkt/scope-plugin-options": "~7.1.1", | ||
"@types/react": "17.0.39", | ||
"@types/react-dom": "17.0.11", | ||
"@uiw/react-code-preview": "4.0.5", | ||
"@uiw/react-github-corners": "1.5.3", | ||
"@uiw/react-markdown-preview": "3.4.7", | ||
"@uiw/reset.css": "1.0.5", | ||
"compile-less-cli": "1.8.11", | ||
"kkt": "~7.1.5", | ||
"react": "17.0.2", | ||
"react-dom": "17.0.2", | ||
"tsbb": "~3.7.0", | ||
"uiw": "~4.12.1" | ||
"@kkt/raw-modules": "~7.2.0", | ||
"@kkt/scope-plugin-options": "~7.2.0", | ||
"@types/react": "~18.0.15", | ||
"@types/react-dom": "~18.0.6", | ||
"@uiw/react-github-corners": "~1.5.3", | ||
"@uiw/react-markdown-preview": "~4.0.22", | ||
"@uiw/reset.css": "~1.0.6", | ||
"compile-less-cli": "~1.8.11", | ||
"kkt": "~7.2.0", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"tsbb": "^3.7.6", | ||
"uiw": "^4.21.14" | ||
}, | ||
@@ -61,0 +65,0 @@ "eslintConfig": { |
140
README.md
@@ -9,4 +9,6 @@ Split 面板分割 | ||
[](https://uiwjs.github.io/react-split/coverage/lcov-report/) | ||
[](https://gitpod.io/#https://github.com/uiwjs/react-split) | ||
[](https://github.com/uiwjs/react-split/network/dependents) | ||
可将一块内容,分割为可以拖拽调整宽度或高度的区域。 | ||
A piece of content can be divided into areas that can be dragged to adjust the width or height. | ||
@@ -17,3 +19,3 @@ ```jsx | ||
从组件库 `uiw` 中抽离出来的 `@uiw/react-split`,可以单独使用。 | ||
`@uiw/react-split` extracted from the component library `uiw` can be used alone. | ||
@@ -24,13 +26,12 @@ ```jsx | ||
### 基础用法 | ||
### Basic usage | ||
> ~~通过设置子节点的 `minWidth` 样式,即可设置拖拽最小宽度值。通过设置子节点样式 `flexBasis` 样式即可设置默认分割内容的占比宽度。~~ | ||
> ~~By setting the `minWidth` style of the child node, you can set the minimum drag width value. By setting the child node style `flexBasis` style, you can set the proportion width of the default split content. ~~ | ||
- 固定初始宽度或者高度,可通过设置子节点,样式 `width: '80%'` 宽度百分百来计算。 | ||
- 拖拽至最小宽度,可通过设置子节点样式 `minWidth: 30`,来达到效果 | ||
- 默认情况下,不设置样式 `width`,需要将某个子节点样式设为 `flex: 1`,来自适应 | ||
- Fixed initial width or height, which can be calculated by setting the child node, style `width: '80%'` to 100% width. | ||
- Drag to the minimum width, you can achieve the effect by setting the child node style `minWidth: 30`. | ||
- By default, the style `width` is not set, and a child node style needs to be set to `flex: 1` to adapt | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -65,12 +66,11 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 可用于布局 | ||
### Available for layout | ||
设置 `visiable={false}` 禁用拖拽栏,可用于布局。 | ||
Setting `visiable={false}` disables the drag bar, which can be used for layout. | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -115,10 +115,10 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 多栏分割 | ||
### multi-column split | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -142,10 +142,10 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 线条拖拽 | ||
### line drag | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -182,10 +182,10 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
; | ||
``` | ||
### 垂直分割 | ||
### vertical split | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -203,10 +203,10 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 嵌套使用 | ||
### nested use | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -234,12 +234,12 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 拖拽工具不显示 | ||
### Drag tool not showing | ||
下面实例通过设置 `visiable` 的值来设置拖拽工具是否可见 | ||
The following example sets whether the drag tool is visible by setting the value of `visiable`. | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -276,12 +276,12 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 禁用拖拽 | ||
### Disable drag and drop | ||
通过设置 `disable` 的值,禁用拖拽工具拖拽。 | ||
Disable drag tool dragging by setting the value of `disable`. | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -326,13 +326,12 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 抽屉 | ||
### drawer | ||
可拖拽左边栏宽度。 | ||
Draggable left column width. | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import Split from '@uiw/react-split'; | ||
@@ -384,10 +383,10 @@ import { Menu, Button } from 'uiw'; | ||
} | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
### 支持自定义拖拽工具栏 | ||
### Support custom drag and drop toolbar | ||
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
```jsx | ||
import ReactDOM from 'react-dom'; | ||
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true | ||
import React from 'react'; | ||
import Split from '@uiw/react-split'; | ||
@@ -416,3 +415,3 @@ | ||
); | ||
ReactDOM.render(<Demo />, _mount_); | ||
export default Demo | ||
``` | ||
@@ -428,25 +427,20 @@ | ||
/** | ||
* 拖拽宽度/高度变化回调函数,宽度或者高度根据 mode 参数来确定 | ||
* Drag width/height change callback function, | ||
* the width or height is determined according to the mode parameter | ||
*/ | ||
onDragging?: (preSize: number, nextSize: number, paneNumber: number) => void; | ||
/** | ||
* 拖拽结束的回调函数 | ||
*/ | ||
/** Callback function for dragging end */ | ||
onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) => void; | ||
/** 支持自定义拖拽工具栏 */ | ||
/** Support custom drag and drop toolbar */ | ||
renderBar?: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element; | ||
/** | ||
* 设置拖拽的工具条,为线条样式。 | ||
*/ | ||
/** Set the drag and drop toolbar as a line style. */ | ||
lineBar?: boolean; | ||
/** | ||
* 设置拖拽的工具条,是否可见 | ||
*/ | ||
/** Set the dragged toolbar, whether it is visible or not */ | ||
visiable?: boolean | number[]; | ||
/** | ||
* 设置拖拽的工具条,禁用 | ||
* Set the drag and drop toolbar, disable | ||
*/ | ||
disable?: boolean | number[]; | ||
/** | ||
* 类型,可选值为 `horizontal` 或 `vertical` | ||
* type, optional `horizontal` or `vertical` | ||
*/ | ||
@@ -453,0 +447,0 @@ mode?: 'horizontal' | 'vertical'; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
127356
-2.47%20
25%19
-5%1568
-5.2%473
-1.25%