x-star-design 0.0.9 → 0.0.10

package/dist/draggable-layout/index.d.ts

@@ -3,11 +3,13 @@ interface DraggableLayoutProps {
     className?: string;
     style?: React.CSSProperties;
     dividerClassName?: string;
-    minWidth: [number, number];
-    defaultWidth: number;
+    dividerWidth?: string;
+    dividerChildren?: React.ReactNode;
+    defaultWidth?: string;
+    minWidth?: [string, string];
+    collapsible?: [boolean, boolean];
     left: React.ReactNode;
     right: React.ReactNode;
-    barWidth: number;
 }
 /**
  * 可拖拽布局

package/dist/draggable-layout/index.js

@@ -4,105 +4,155 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useMemoizedFn, useMouse, useSize } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
-import { useDelayedMount } from 'x-star-utils';
+import React, { useRef, useState } from 'react';
 import { prefix } from "../utils/global";
 /**
  * 可拖拽布局
  */
 var DraggableLayout = function DraggableLayout(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
+  var className = _ref.className,
     style = _ref.style,
     dividerClassName = _ref.dividerClassName,
-    minWidth = _ref.minWidth,
-    defaultWidth = _ref.defaultWidth,
+    _ref$dividerWidth = _ref.dividerWidth,
+    dividerWidth = _ref$dividerWidth === void 0 ? '0%' : _ref$dividerWidth,
+    dividerChildren = _ref.dividerChildren,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? '50%' : _ref$defaultWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? ['25%', '25%'] : _ref$minWidth,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? [true, true] : _ref$collapsible,
     left = _ref.left,
-    right = _ref.right,
-    barWidth = _ref.barWidth;
-  var _useState = useState(300),
+    right = _ref.right;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dragging = _useState4[0],
-    setDragging = _useState4[1];
-  var wrapper = useRef(null);
-  var _useMouse = useMouse(wrapper),
-    elementX = _useMouse.elementX;
-  var size = useSize(wrapper);
-  useEffect(function () {
-    if (size) {
-      setWidth(defaultWidth / 100 * size.width);
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
+  var transition = useRef(false);
+  var wrapperRef = useRef(null);
+  var dividerRef = useRef(null);
+  var leftRef = useRef(null);
+  var rightRef = useRef(null);
+  var enableTransition = useMemoizedFn(function () {
+    if (dividerRef.current && leftRef.current && rightRef.current) {
+      dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s, left 0.3s';
+      leftRef.current.style.transition = 'left 0.3s, right 0.3s';
+      rightRef.current.style.transition = 'left 0.3s, right 0.3s';
     }
-  }, [defaultWidth, size]);
-  useEffect(function () {
-    if (dragging && size) {
-      if (elementX < minWidth[0] / 100 * size.width / 2) {
-        setWidth(0);
-      } else if (elementX < minWidth[0] / 100 * size.width) {
-        setWidth(minWidth[0] / 100 * size.width);
-      } else if (elementX < size.width - minWidth[1] / 100 * size.width) {
-        setWidth(elementX);
-      } else if (elementX < size.width - minWidth[1] / 100 * size.width / 2) {
-        setWidth(size.width - minWidth[1] / 100 * size.width);
+  });
+  var disableTransition = useMemoizedFn(function () {
+    if (dividerRef.current && leftRef.current && rightRef.current) {
+      dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s';
+      leftRef.current.style.transition = '';
+      rightRef.current.style.transition = '';
+    }
+  });
+  var dragHandler = useMemoizedFn(function (e) {
+    if (!transition.current && wrapperRef.current && dividerRef.current && leftRef.current && rightRef.current) {
+      if (collapsible[0] && e.offsetX < leftRef.current.offsetWidth / 2) {
+        if (leftRef.current.style.right !== '100%') {
+          // 左侧收起
+          enableTransition();
+          transition.current = true;
+          setTimeout(function () {
+            return transition.current = false;
+          }, 300);
+          dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
+          dividerRef.current.style.left = '0';
+          leftRef.current.style.left = "-".concat(minWidth[0]);
+          leftRef.current.style.right = '100%';
+          rightRef.current.style.left = dividerWidth;
+          rightRef.current.style.right = '0';
+        }
+      } else if (collapsible[1] && e.offsetX > wrapperRef.current.offsetWidth - rightRef.current.offsetWidth / 2) {
+        if (rightRef.current.style.left !== '100%') {
+          // 右侧收起
+          enableTransition();
+          transition.current = true;
+          setTimeout(function () {
+            return transition.current = false;
+          }, 300);
+          dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
+          dividerRef.current.style.left = "calc(100% - ".concat(dividerWidth, ")");
+          leftRef.current.style.left = '0';
+          leftRef.current.style.right = dividerWidth;
+          rightRef.current.style.left = '100%';
+          rightRef.current.style.right = "-".concat(minWidth[1]);
+        }
       } else {
-        setWidth(size.width);
+        // 同时展示
+        if (leftRef.current.style.right === '100%' || rightRef.current.style.left === '100%') {
+          transition.current = true;
+          setTimeout(function () {
+            transition.current = false;
+            disableTransition();
+          }, 300);
+        }
+        var width = "min(max(".concat(e.offsetX, "px, calc(").concat(minWidth[0], " + ").concat(dividerWidth, " / 2)), calc(100% - ").concat(minWidth[1], " - ").concat(dividerWidth, " / 2))");
+        dividerRef.current.classList.remove("".concat(prefix, "draggable-divider-active"));
+        dividerRef.current.style.left = "calc(".concat(width, " - ").concat(dividerWidth, " / 2)");
+        leftRef.current.style.left = '0';
+        leftRef.current.style.right = "calc(100% - ".concat(width, " + ").concat(dividerWidth, " / 2)");
+        rightRef.current.style.left = "calc(".concat(width, " + ").concat(dividerWidth, " / 2)");
+        rightRef.current.style.right = '0';
       }
     }
-  }, [dragging, size, elementX, minWidth]);
-  var dragEnd = useMemoizedFn(function () {
-    setDragging(false);
-    if (wrapper.current) {
-      wrapper.current.style.cursor = 'unset';
-      wrapper.current.removeEventListener('mouseup', dragEnd);
-    }
   });
   var dragStart = useMemoizedFn(function () {
     setDragging(true);
-    if (wrapper.current) {
-      wrapper.current.style.cursor = 'col-resize';
-      wrapper.current.addEventListener('mouseup', dragEnd);
+    if (wrapperRef.current) {
+      wrapperRef.current.style.cursor = 'col-resize';
+      wrapperRef.current.addEventListener('mousemove', dragHandler, {
+        capture: true,
+        passive: true
+      });
+      document.addEventListener('mouseup', function () {
+        setDragging(false);
+        if (wrapperRef.current) {
+          wrapperRef.current.style.cursor = 'unset';
+          wrapperRef.current.removeEventListener('mousemove', dragHandler, {
+            capture: true
+          });
+        }
+      }, {
+        capture: true,
+        passive: true,
+        once: true
+      });
     }
   });
-  var leftHide = width === 0;
-  var rightHide = width === (size === null || size === void 0 ? void 0 : size.width);
-  var _useDelayedMount = useDelayedMount(leftHide || rightHide, 300),
-    _useDelayedMount2 = _slicedToArray(_useDelayedMount, 1),
-    transition = _useDelayedMount2[0];
   return /*#__PURE__*/React.createElement("div", {
-    ref: wrapper,
-    className: classNames("".concat(prefix, "draggableLayout"), className),
+    ref: wrapperRef,
+    className: classNames("".concat(prefix, "draggable-layout"), className),
     style: style
-  }, size && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: dividerClassName || classNames("".concat(prefix, "draggableDivider"), "".concat(leftHide || rightHide ? "".concat(prefix, "draggableDividerActive") : '')),
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: dividerRef,
+    className: dividerClassName !== null && dividerClassName !== void 0 ? dividerClassName : classNames("".concat(prefix, "draggable-divider")),
     style: {
-      left: leftHide ? width : rightHide ? width - barWidth : width - barWidth / 2,
-      transition: transition ? 'all 0.3s' : 'color 0.3s, background-color 0.3s'
+      left: "calc(".concat(defaultWidth, " - ").concat(dividerWidth, " / 2)")
     },
     onDragStart: function onDragStart(e) {
       return e.preventDefault();
     },
     onMouseDown: dragStart
-  }, "\u22EE"), dragging && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefix, "draggableMask")
+  }, dividerChildren), dragging && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "draggable-mask")
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefix, "draggableChildren"),
+    ref: leftRef,
+    className: "".concat(prefix, "draggable-children"),
     style: {
-      right: rightHide ? barWidth : "calc(100% - ".concat(width - barWidth / 2, "px)"),
-      left: leftHide ? "calc(-".concat(minWidth[0], " / 100 * 100%)") : 0,
-      transition: transition ? 'all 0.3s' : ''
+      left: 0,
+      right: "calc(100% - ".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)")
     }
   }, left), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefix, "draggableChildren"),
+    ref: rightRef,
+    className: "".concat(prefix, "draggable-children"),
     style: {
-      left: leftHide ? barWidth : width + barWidth / 2,
-      right: rightHide ? "calc(-".concat(minWidth[1], " / 100 * 100%)") : 0,
-      transition: transition ? 'all 0.3s' : ''
+      left: "calc(".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)"),
+      right: 0
     }
-  }, right)));
+  }, right));
 };
 export default DraggableLayout;

package/dist/styles/index.css

@@ -44,58 +44,42 @@
   outline: unset;
 }
 
-.x-star-design-divider-test {
-  cursor: col-resize;
-  position: relative;
-  background-color: #fafafa;
-  width: 16px;
-  background-size: cover;
-  background-position: center;
-  font-size: 32px;
-  color: #9f9f9f;
-  user-select: none;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s;
-  z-index: 91;
-}
-
-.x-star-design-draggableLayout {
+.x-star-design-draggable-layout {
   position: relative;
-  height: 100%;
   width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
-.x-star-design-draggableDivider {
+.x-star-design-draggable-divider {
   position: absolute;
   top: 0;
   bottom: 0;
   border-left: 4px transparent solid;
-  z-index: 91;
+  transform: translate(-2px);
+  z-index: 90;
+  transition: color 0.3s, background 0.3s, border 0.3s;
+  cursor: col-resize;
 }
 
-.x-star-design-draggableDivider:hover,
-.x-star-design-draggableDivider:active,
-.x-star-design-draggableDividerActive {
+.x-star-design-draggable-divider:hover,
+.x-star-design-draggable-divider:active,
+.x-star-design-draggable-divider.x-star-design-draggable-divider-active {
   border-left: 4px #1890ff solid;
-  cursor: col-resize;
 }
 
-.x-star-design-draggableMask {
+.x-star-design-draggable-mask {
   position: absolute;
   inset: 0;
-  z-index: 90;
+  z-index: 91;
 }
 
-.x-star-design-draggableChildren {
+.x-star-design-draggable-children {
   position: absolute;
   top: 0;
   bottom: 0;
 }
-.x-star-design-draggableChildren > * {
+.x-star-design-draggable-children > * {
   height: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",