assui 3.2.67 → 3.2.68

package/lib/rc-split-view/index.js

@@ -0,0 +1,251 @@
+"use strict";
+
+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 __read = this && this.__read || function (o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m) return o;
+  var i = m.call(o),
+    r,
+    ar = [],
+    e;
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+  } catch (error) {
+    e = {
+      error: error
+    };
+  } finally {
+    try {
+      if (r && !r.done && (m = i["return"])) m.call(i);
+    } finally {
+      if (e) throw e.error;
+    }
+  }
+  return ar;
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.View = void 0;
+var react_1 = __importDefault(require("react"));
+var useGetState_1 = __importDefault(require("ahooks/lib/useGetState"));
+var useMount_1 = __importDefault(require("ahooks/lib/useMount"));
+var useUnmount_1 = __importDefault(require("ahooks/lib/useUnmount"));
+var classnames_1 = __importDefault(require("classnames"));
+var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
+var View_1 = __importDefault(require("./View"));
+exports.View = View_1["default"];
+var DraggableHandle_1 = __importDefault(require("./DraggableHandle"));
+var utils_1 = require("./utils");
+var RcSplitView = function RcSplitView(props) {
+  var _a;
+  var _b = props.draggable,
+    draggable = _b === void 0 ? true : _b,
+    children = props.children,
+    className = props.className,
+    onResizerClick = props.onResizerClick,
+    onResizerDoubleClick = props.onResizerDoubleClick,
+    viewClassName = props.viewClassName,
+    firstViewClassName = props.firstViewClassName,
+    secondViewClassName = props.secondViewClassName,
+    handleClassName = props.handleClassName,
+    _c = props.split,
+    split = _c === void 0 ? 'vertical' : _c,
+    onDragStarted = props.onDragStarted,
+    onDragFinished = props.onDragFinished,
+    _d = props.primary,
+    primary = _d === void 0 ? 'first' : _d,
+    step = props.step,
+    maxSize = props.maxSize,
+    _e = props.minSize,
+    minSize = _e === void 0 ? 50 : _e,
+    onChange = props.onChange,
+    size = props.size,
+    defaultSize = props.defaultSize,
+    handleContent = props.handleContent,
+    handleContentClassName = props.handleContentClassName;
+  var initialSize = (0, isUndefined_1["default"])(size) ? (0, utils_1.getDefaultSize)(defaultSize, minSize, maxSize) : size;
+  var initialValue = {
+    active: false,
+    firstViewSize: primary === 'first' ? initialSize : undefined,
+    secondViewSize: primary === 'second' ? initialSize : undefined,
+    // these are props that are needed in static functions. ie: gDSFP
+    instanceProps: {
+      size: size
+    },
+    position: 0
+  };
+  var splitViewRef = react_1["default"].useRef(null);
+  var firstViewRef = react_1["default"].useRef(null);
+  var secondViewRef = react_1["default"].useRef(null);
+  var _f = __read((0, useGetState_1["default"])(initialValue), 3),
+    states = _f[0],
+    setStates = _f[1],
+    getStates = _f[2];
+  var onTouchStart = function onTouchStart(event) {
+    var currentValue = getStates();
+    if (draggable) {
+      (0, utils_1.unFocus)(document, window);
+      var _a = event.touches[0],
+        clientX = _a.clientX,
+        clientY = _a.clientY;
+      var position = split === 'vertical' ? clientX : clientY;
+      onDragStarted === null || onDragStarted === void 0 ? void 0 : onDragStarted();
+      setStates(__assign(__assign({}, currentValue), {
+        active: true,
+        position: position
+      }));
+    }
+  };
+  var onMouseDown = function onMouseDown(event) {
+    var eventWithTouches = __assign(__assign({}, event), {
+      touches: [{
+        clientX: event.clientX,
+        clientY: event.clientY
+      }]
+    });
+    onTouchStart(eventWithTouches);
+  };
+  var onMouseUp = function onMouseUp() {
+    var currentValue = getStates();
+    var active = currentValue.active,
+      draggedSize = currentValue.draggedSize;
+    if (draggable && active && draggedSize) {
+      onDragFinished === null || onDragFinished === void 0 ? void 0 : onDragFinished(draggedSize);
+      setStates(__assign(__assign({}, currentValue), {
+        active: false
+      }));
+    }
+  };
+  var onTouchMove = function onTouchMove(event) {
+    var _a;
+    var _b;
+    var currentValue = getStates();
+    var active = currentValue.active,
+      position = currentValue.position;
+    if (draggable && active) {
+      (0, utils_1.unFocus)(document, window);
+      var isFirstPrimary = primary === 'first';
+      var firstRef = isFirstPrimary ? firstViewRef.current : secondViewRef.current;
+      var secondRef = isFirstPrimary ? secondViewRef.current : firstViewRef.current;
+      if (firstRef && secondRef) {
+        var firstNode = firstRef;
+        var secondNode = secondRef;
+        if (firstNode.getBoundingClientRect) {
+          var _c = firstNode.getBoundingClientRect(),
+            width = _c.width,
+            height = _c.height;
+          var current = split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
+          var nodeSize = split === 'vertical' ? width : height;
+          var positionDelta = position - current;
+          if (step) {
+            if (Math.abs(positionDelta) < step) {
+              return;
+            }
+            positionDelta = Math.trunc(positionDelta / step) * step;
+          }
+          var sizeDelta = isFirstPrimary ? positionDelta : -positionDelta;
+          var firstViewOrder = parseInt(window.getComputedStyle(firstNode).order, 10);
+          var secondViewOrder = parseInt(window.getComputedStyle(secondNode).order, 10);
+          if (firstViewOrder > secondViewOrder) {
+            sizeDelta = -sizeDelta;
+          }
+          var newMaxSize = maxSize || 0;
+          if (!(0, isUndefined_1["default"])(maxSize) && maxSize <= 0) {
+            if (split === 'vertical') {
+              newMaxSize = ((_b = splitViewRef.current.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) + maxSize;
+            } else {
+              newMaxSize = splitViewRef.current.getBoundingClientRect().height + maxSize;
+            }
+          }
+          var newSize = +nodeSize - sizeDelta;
+          var newPosition = position - positionDelta;
+          var restValue = {};
+          if (newSize < minSize) {
+            newSize = minSize;
+          } else if (!(0, isUndefined_1["default"])(maxSize) && newSize > newMaxSize) {
+            newSize = newMaxSize;
+          } else {
+            restValue = {
+              position: newPosition
+            };
+          }
+          onChange === null || onChange === void 0 ? void 0 : onChange(newSize);
+          setStates(__assign(__assign(__assign({}, currentValue), (_a = {
+            draggedSize: newSize
+          }, _a[isFirstPrimary ? 'firstViewSize' : 'secondViewSize'] = newSize, _a)), restValue));
+        }
+      }
+    }
+  };
+  var onMouseMove = function onMouseMove(event) {
+    var eventWithTouches = __assign(__assign({}, event), {
+      touches: [{
+        clientX: event.clientX,
+        clientY: event.clientY
+      }]
+    });
+    onTouchMove(eventWithTouches);
+  };
+  (0, useMount_1["default"])(function () {
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('touchmove', onTouchMove);
+    setStates((0, utils_1.getSizeUpdate)({
+      size: size,
+      defaultSize: defaultSize,
+      maxSize: maxSize,
+      minSize: minSize,
+      primary: primary
+    }, states));
+  });
+  (0, useUnmount_1["default"])(function () {
+    document.removeEventListener('mouseup', onMouseUp);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('touchmove', onTouchMove);
+  });
+  var _g = __read((0, utils_1.removeNullChildren)(children), 2),
+    firstViewNode = _g[0],
+    secondViewNode = _g[1];
+  return react_1["default"].createElement("div", {
+    className: (0, classnames_1["default"])('split-view', "split-view-".concat(split), className),
+    ref: splitViewRef
+  }, react_1["default"].createElement(View_1["default"], {
+    className: (0, classnames_1["default"])(viewClassName, firstViewClassName),
+    key: "first-view",
+    ref: firstViewRef,
+    size: states.firstViewSize,
+    split: split
+  }, firstViewNode), react_1["default"].createElement(DraggableHandle_1["default"], {
+    className: (0, classnames_1["default"])('split-view-draggable-handle', (_a = {}, _a["split-view-draggable-handle-".concat(split, "-disabled")] = !draggable, _a), "split-view-draggable-handle-".concat(split), handleClassName),
+    onClick: onResizerClick,
+    onDoubleClick: onResizerDoubleClick,
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart,
+    onTouchEnd: onMouseUp,
+    key: "draggableHandle"
+  }, draggable && react_1["default"].createElement("div", {
+    className: (0, classnames_1["default"])("split-view-draggable-handle-".concat(split, "-content"), handleContentClassName)
+  }, handleContent)), react_1["default"].createElement(View_1["default"], {
+    className: (0, classnames_1["default"])(viewClassName, secondViewClassName),
+    key: "second-view",
+    ref: secondViewRef,
+    size: states.secondViewSize,
+    split: split
+  }, secondViewNode));
+};
+exports["default"] = RcSplitView;

package/lib/rc-split-view/style/index.css

@@ -0,0 +1,76 @@
+.split-view {
+  position: absolute;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  outline: none;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.split-view-horizontal {
+  top: 0;
+  bottom: 0;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+}
+.split-view-vertical {
+  right: 0;
+  left: 0;
+  flex-direction: row;
+}
+.split-view-draggable-handle {
+  position: relative;
+  z-index: 1;
+  background-color: #f5f5f5;
+}
+.split-view-draggable-handle-horizontal {
+  justify-content: center;
+  height: 2px;
+  border-top: 1px solid transparent;
+  transform: translateY(-50%);
+  cursor: row-resize;
+}
+.split-view-draggable-handle-horizontal-content {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  min-height: 10px;
+  transform: translateY(calc(-50% - 1px));
+}
+.split-view-draggable-handle-horizontal:hover {
+  border-top-color: #02a6e3;
+}
+.split-view-draggable-handle-horizontal-disabled {
+  cursor: default;
+}
+.split-view-draggable-handle-horizontal-disabled:hover {
+  border-top-color: transparent;
+}
+.split-view-draggable-handle-vertical {
+  align-items: center;
+  width: 2px;
+  border-left: 1px solid transparent;
+  transform: translateX(-50%);
+  cursor: col-resize;
+}
+.split-view-draggable-handle-vertical-content {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  min-width: 10px;
+  height: 100%;
+  transform: translateX(calc(-50% - 1px));
+}
+.split-view-draggable-handle-vertical:hover {
+  border-left-color: #02a6e3;
+}
+.split-view-draggable-handle-vertical-disabled {
+  cursor: default;
+}
+.split-view-draggable-handle-vertical-disabled:hover {
+  border-left-color: transparent;
+}

package/lib/rc-split-view/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/lib/rc-split-view/style/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+require("./index.less");

package/lib/rc-split-view/style/index.less

@@ -0,0 +1,92 @@
+@import '../../style/variables.less';
+
+.split-view {
+  position: absolute;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  outline: none;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+
+  &-horizontal {
+    top: 0;
+    bottom: 0;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100%;
+  }
+
+  &-vertical {
+    right: 0;
+    left: 0;
+    flex-direction: row;
+  }
+}
+
+.split-view-draggable-handle {
+  position: relative;
+  z-index: 1;
+  background-color: @color_f5f5f5;
+
+  &-horizontal {
+    justify-content: center;
+    height: 2px;
+    border-top: 1px solid transparent;
+    transform: translateY(-50%);
+    cursor: row-resize;
+
+    &-content {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      min-height: 10px;
+      transform: translateY(calc(-50% - 1px));
+    }
+
+    &:hover {
+      border-top-color: @color_02a6e3;
+    }
+
+    &-disabled {
+      cursor: default;
+
+      &:hover {
+        border-top-color: transparent;
+      }
+    }
+  }
+
+  &-vertical {
+    align-items: center;
+    width: 2px;
+    border-left: 1px solid transparent;
+    transform: translateX(-50%);
+    cursor: col-resize;
+
+    &-content {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      min-width: 10px;
+      height: 100%;
+      transform: translateX(calc(-50% - 1px));
+    }
+
+    &:hover {
+      border-left-color: @color_02a6e3;
+    }
+
+    &-disabled {
+      cursor: default;
+
+      &:hover {
+        border-left-color: transparent;
+      }
+    }
+  }
+}

package/lib/rc-split-view/utils.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { StatesTypes } from './index';
+/** 获取默认尺寸 */
+export declare const getDefaultSize: (defaultSize: number | string | undefined, minSize: number | undefined, maxSize: number | undefined, draggedSize?: number) => string | number | undefined;
+/** 获取更新尺寸 */
+export declare const getSizeUpdate: (props: {
+    size?: string | number;
+    defaultSize?: string | number;
+    minSize?: number;
+    maxSize?: number;
+    primary: "first" | "second";
+}, state: StatesTypes) => any;
+/** 排除空的子元素 */
+export declare const removeNullChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
+/** 失去焦点 */
+export declare const unFocus: (document: Document, window: Window) => void;

package/lib/rc-split-view/utils.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unFocus = exports.removeNullChildren = exports.getSizeUpdate = exports.getDefaultSize = void 0;
+var react_1 = __importDefault(require("react"));
+var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
+var isNumber_1 = __importDefault(require("lodash/isNumber"));
+/** 获取默认尺寸 */
+var getDefaultSize = function getDefaultSize(defaultSize, minSize, maxSize, draggedSize) {
+  if ((0, isNumber_1["default"])(draggedSize)) {
+    var min = (0, isNumber_1["default"])(minSize) ? minSize : 0;
+    var max = (0, isNumber_1["default"])(maxSize) && maxSize >= 0 ? maxSize : Infinity;
+    return Math.max(min, Math.min(max, draggedSize));
+  }
+  if (!(0, isUndefined_1["default"])(defaultSize)) {
+    return defaultSize;
+  }
+  return minSize;
+};
+exports.getDefaultSize = getDefaultSize;
+/** 获取更新尺寸 */
+var getSizeUpdate = function getSizeUpdate(props, state) {
+  var newState = {};
+  var instanceProps = state.instanceProps;
+  var hasSize = !(0, isUndefined_1["default"])(props.size);
+  if (instanceProps.size === props.size && hasSize) {
+    return {};
+  }
+  var newSize = hasSize ? props.size : (0, exports.getDefaultSize)(props.defaultSize, props.minSize, props.maxSize, state.draggedSize);
+  if (hasSize) {
+    newState.draggedSize = newSize;
+  }
+  var isFirstViewPrimary = props.primary === 'first';
+  newState[isFirstViewPrimary ? 'firstViewSize' : 'secondViewSize'] = newSize;
+  newState[isFirstViewPrimary ? 'secondViewSize' : 'firstViewSize'] = undefined;
+  newState.instanceProps = {
+    size: props.size
+  };
+  return newState;
+};
+exports.getSizeUpdate = getSizeUpdate;
+/** 排除空的子元素 */
+var removeNullChildren = function removeNullChildren(children) {
+  return react_1["default"].Children.toArray(children).filter(function (c) {
+    return c;
+  });
+};
+exports.removeNullChildren = removeNullChildren;
+/** 失去焦点 */
+var unFocus = function unFocus(document, window) {
+  var _a, _b;
+  (_a = document.getSelection()) === null || _a === void 0 ? void 0 : _a.empty();
+  (_b = window.getSelection()) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
+};
+exports.unFocus = unFocus;

package/lib/style/variables.less

@@ -23,6 +23,7 @@
 @color_bfbfbf: #bfbfbf;
 @color_d4d4d4: #d4d4d4;
 @color_9f9f9f: #9f9f9f;
+@color_02a6e3: #02a6e3;
 
 @font-size-sm: 12px;
 @font-size-base: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assui",
-  "version": "3.2.67",
+  "version": "3.2.68",
   "description": "react ui library",
   "author": "jason <usochen@gmail.com>",
   "main": "./lib/index.js",
@@ -35,7 +35,7 @@
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-color": "^3.0.6",
     "@types/react-resizable": "^3.0.0",
-    "a-icons": "^1.2.49",
+    "a-icons": "^1.2.50",
     "aa-utils": "^2.1.31",
     "ahooks": "^3.9.5",
     "bignumber.js": "^9.0.1",