@dtjoy/dt-design 1.0.6 → 1.0.7

package/lib/_util/getScroll.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.isWindow = isWindow;
+var _isNonNullable = _interopRequireDefault(require("./isNonNullable"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function isWindow(obj) {
+  return (0, _isNonNullable.default)(obj) && obj === obj.window;
+}
+const getScroll = target => {
+  if (typeof window === 'undefined') {
+    /* istanbul ignore next */
+    return 0;
+  }
+  let result = 0;
+  if (isWindow(target)) {
+    result = target.pageYOffset;
+  } else if (target instanceof Document) {
+    result = target.documentElement.scrollTop;
+  } else if (target instanceof HTMLElement) {
+    result = target.scrollTop;
+  } else if (target) {
+    // According to the type inference, the `target` is `never` type.
+    // Since we configured the loose mode type checking, and supports mocking the target with such shape below::
+    //    `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
+    //    the program may falls into this branch.
+    // Check the corresponding tests for details. Don't sure what is the real scenario this happens.
+    /* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
+    result = target['scrollTop'];
+  }
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = (target.ownerDocument ?? target).documentElement?.scrollTop;
+  }
+  return result;
+};
+var _default = exports.default = getScroll;

package/lib/_util/hooks/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _useForceUpdate = require("./useForceUpdate");
+Object.keys(_useForceUpdate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useForceUpdate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useForceUpdate[key];
+    }
+  });
+});
 var _useOrientation = require("./useOrientation");
 Object.keys(_useOrientation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -13,4 +24,26 @@ Object.keys(_useOrientation).forEach(function (key) {
       return _useOrientation[key];
     }
   });
+});
+var _useProxyImperativeHandle = require("./useProxyImperativeHandle");
+Object.keys(_useProxyImperativeHandle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useProxyImperativeHandle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useProxyImperativeHandle[key];
+    }
+  });
+});
+var _useSyncState = require("./useSyncState");
+Object.keys(_useSyncState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSyncState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSyncState[key];
+    }
+  });
 });

package/lib/_util/hooks/useForceUpdate.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForceUpdate = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const useForceUpdate = () => {
+  return _react.default.useReducer(ori => ori + 1, 0);
+};
+exports.useForceUpdate = useForceUpdate;

package/lib/_util/hooks/useProxyImperativeHandle.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProxyImperativeHandle = void 0;
+var _react = require("react");
+const fillProxy = (element, handler) => {
+  element._dtProxy = element._dtProxy || {};
+  Object.keys(handler).forEach(key => {
+    if (!(key in element._dtProxy)) {
+      const ori = element[key];
+      element._dtProxy[key] = ori;
+      element[key] = handler[key];
+    }
+  });
+  return element;
+};
+const useProxyImperativeHandle = (ref, init) => {
+  return (0, _react.useImperativeHandle)(ref, () => {
+    const refObj = init();
+    const {
+      nativeElement
+    } = refObj;
+    if (typeof Proxy !== 'undefined') {
+      return new Proxy(nativeElement, {
+        get(obj, prop) {
+          if (refObj[prop]) {
+            return refObj[prop];
+          }
+          return Reflect.get(obj, prop);
+        }
+      });
+    }
+
+    // Fallback of IE
+    return fillProxy(nativeElement, refObj);
+  });
+};
+exports.useProxyImperativeHandle = useProxyImperativeHandle;

package/lib/_util/hooks/useSyncState.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSyncState = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useForceUpdate = require("./useForceUpdate");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useSyncState = initialValue => {
+  const ref = React.useRef(initialValue);
+  const [, forceUpdate] = (0, _useForceUpdate.useForceUpdate)();
+  return [() => ref.current, newValue => {
+    ref.current = newValue;
+    forceUpdate();
+  }];
+};
+exports.useSyncState = useSyncState;

package/lib/_util/scrollTo.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = scrollTo;
+var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
+var _easings = require("./easings");
+var _getScroll = _interopRequireWildcard(require("./getScroll"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function scrollTo(y, options = {}) {
+  const {
+    getContainer = () => window,
+    callback,
+    duration = 450
+  } = options;
+  const container = getContainer();
+  const scrollTop = (0, _getScroll.default)(container);
+  const startTime = Date.now();
+  let rafId;
+  const frameFunc = () => {
+    const timestamp = Date.now();
+    const time = timestamp - startTime;
+    const nextScrollTop = (0, _easings.easeInOutCubic)(time > duration ? duration : time, scrollTop, y, duration);
+    if ((0, _getScroll.isWindow)(container)) {
+      container.scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof Document || container.constructor.name === 'HTMLDocument') {
+      container.documentElement.scrollTop = nextScrollTop;
+    } else {
+      container.scrollTop = nextScrollTop;
+    }
+    if (time < duration) {
+      rafId = (0, _raf.default)(frameFunc);
+    } else if (typeof callback === 'function') {
+      callback();
+    }
+  };
+  rafId = (0, _raf.default)(frameFunc);
+  return () => {
+    _raf.default.cancel(rafId);
+  };
+}

package/lib/_util/warning.js

@@ -7,14 +7,13 @@ exports.devUseWarning = exports.default = exports.WarningContext = void 0;
 exports.noop = noop;
 exports.resetWarned = resetWarned;
 var React = _interopRequireWildcard(require("react"));
-var _warning2 = _interopRequireDefault(require("rc-util/lib/warning"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _util = require("@rc-component/util");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function noop() {}
 const {
   resetWarned: rcResetWarned
-} = _warning2.default;
+} = _util.warning;
 let deprecatedWarnList = null;
 function resetWarned() {
   deprecatedWarnList = null;
@@ -23,7 +22,7 @@ function resetWarned() {
 let _warning = noop;
 if (process.env.NODE_ENV !== 'production') {
   _warning = (valid, component, message) => {
-    (0, _warning2.default)(valid, `[antd: ${component}] ${message}`);
+    (0, _util.warning)(valid, `[antd: ${component}] ${message}`);
 
     // StrictMode will inject console which will not throw warning in React 17.
     if (process.env.NODE_ENV === 'test') {
@@ -34,10 +33,10 @@ if (process.env.NODE_ENV !== 'production') {
 const warning = _warning;
 const WarningContext = exports.WarningContext = /*#__PURE__*/React.createContext({});
 
-/**
- * This is a hook but we not named as `useWarning`
- * since this is only used in development.
- * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
+/**
+ * This is a hook but we not named as `useWarning`
+ * since this is only used in development.
+ * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
  */
 const devUseWarning = exports.devUseWarning = process.env.NODE_ENV !== 'production' ? component => {
   const {

package/lib/blockHeader/index.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _configProvider = require("antd/es/config-provider");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 require("./style");
 var _util = require("../_util");
 var _collapsible = _interopRequireDefault(require("../collapsible"));
@@ -21,8 +21,9 @@ function isControlled(props) {
 }
 const prefixCls = (0, _configProvider.globalConfig)().getPrefixCls('block-header');
 const preTitleRowCls = `${prefixCls}__title`;
-const BlockHeader = function (props) {
+const BlockHeader = props => {
   const {
+    id,
     title,
     description = '',
     tooltip,
@@ -41,8 +42,7 @@ const BlockHeader = function (props) {
       className: "addon-before--default"
     }),
     onExpand,
-    titleStyle,
-    ...rest
+    titleStyle
   } = props;
   const [internalExpand, setInternalExpand] = (0, _react.useState)(defaultExpand);
   const currentExpand = isControlled(props) ? expand : internalExpand;
@@ -50,7 +50,7 @@ const BlockHeader = function (props) {
   // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
   const showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
   const tooltipProps = (0, _util.toTooltipProps)(tooltip);
-  let bottomStyle;
+  let bottomStyle = {};
   if (spaceBottom) bottomStyle = showCollapse && !currentExpand ? {
     marginBottom: 0
   } : {
@@ -62,13 +62,14 @@ const BlockHeader = function (props) {
     onExpand?.(expand);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${prefixCls}`, className),
+    id: id,
+    className: (0, _clsx.default)(`${prefixCls}`, className),
     style: {
       ...bottomStyle,
       ...style
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(preTitleRowCls, `${preTitleRowCls}--${size}`, {
+    className: (0, _clsx.default)(preTitleRowCls, `${preTitleRowCls}--${size}`, {
       [`${preTitleRowCls}--background`]: background,
       [`${preTitleRowCls}--pointer`]: showCollapse
     }),
@@ -83,7 +84,7 @@ const BlockHeader = function (props) {
   }, title), tooltipProps?.title ? /*#__PURE__*/_react.default.createElement("div", {
     className: `title__tooltip`
   }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, _extends({}, tooltipProps, {
-    className: (0, _classnames.default)(tooltipProps?.className)
+    className: (0, _clsx.default)(tooltipProps?.className)
   }), /*#__PURE__*/_react.default.createElement(_icons.QuestionCircleOutlined, null))) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
     className: `title__description`
   }, description) : null), addonAfter && /*#__PURE__*/_react.default.createElement("div", {
@@ -93,14 +94,14 @@ const BlockHeader = function (props) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "collapse__text"
   }, currentExpand ? '收起' : '展开'), /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, {
-    className: (0, _classnames.default)('collapse__icon', {
+    className: (0, _clsx.default)('collapse__icon', {
       'collapse__icon--up': currentExpand,
       'collapse__icon--down': !currentExpand
     })
-  }))), /*#__PURE__*/_react.default.createElement(_collapsible.default, _extends({
+  }))), /*#__PURE__*/_react.default.createElement(_collapsible.default, {
     isOpen: !currentExpand
-  }, rest), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${prefixCls}__content`, contentClassName, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}__content`, contentClassName, {
       [`${prefixCls}__content--active`]: currentExpand || !showCollapse
     }),
     style: contentStyle

package/lib/blockHeader/style/index.less

@@ -1,143 +1,143 @@
-@import '../../style/themes/index.less';
-
-@card_prefix: ~'@{ant-prefix}-block-header';
-
-.@{card_prefix} {
-    &__title {
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        &--large {
-            .title__box {
-                line-height: 24px;
-                .title__text {
-                    font-size: 16px;
-                }
-            }
-        }
-        &--middle {
-            .title__box {
-                line-height: 22px;
-                .title__text {
-                    font-size: 14px;
-                }
-            }
-        }
-        &--small {
-            .title__box {
-                line-height: 20px;
-                .title__text {
-                    font-size: 12px;
-                }
-            }
-        }
-        &--background {
-            padding: 0 12px;
-            background-color: #f9f9fa;
-            &.@{card_prefix}__title {
-                &--middle,
-                &--large {
-                    height: 40px;
-                }
-                &--small {
-                    height: 32px;
-                }
-            }
-        }
-        &--pointer {
-            cursor: pointer;
-        }
-        .title {
-            &__box {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
-            &__addon-before {
-                margin-right: 8px;
-                color: @primary-color;
-                &--middle {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 20px;
-                }
-                &--small {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 16px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 16px;
-                }
-                &--large {
-                    .addon-before--default {
-                        width: 4px;
-                        height: 20px;
-                        background-color: @primary-color;
-                    }
-                    font-size: 24px;
-                }
-            }
-            &__tooltip {
-                display: flex;
-                margin-right: 4px;
-                font-size: 14px;
-                color: #b1b4c5;
-                cursor: pointer;
-            }
-            &__text {
-                color: @text-color;
-                font-weight: 500;
-                margin-right: 4px;
-            }
-            &__description {
-                display: flex;
-                align-items: center;
-                color: @label-color;
-                font-size: 12px;
-            }
-            &__addon-after {
-                color: @label-color;
-            }
-            &__collapse {
-                color: @label-color;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
-                user-select: none;
-                .collapse {
-                    &__text {
-                        font-size: 12px;
-                        margin: 0 4px;
-                    }
-                    &__icon {
-                        font-size: 16px;
-                        transition: transform 0.4s;
-                        &--down {
-                            transform: rotate(-180deg);
-                        }
-                        &--up {
-                            transform: rotate(0deg);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__content {
-        padding: 16px 24px;
-
-        // opacity: 0;
-        // height: 0;
-        // overflow: hidden;
-        // transition: opacity 0.5s ease, height 0.5s ease;
-        &--active {
-            // opacity: 1;
-            // height: auto;
-        }
-    }
-}
+@import '../../style/themes/index.less';
+
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &--large {
+            .title__box {
+                line-height: 24px;
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
+            .title__box {
+                line-height: 22px;
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+        &--small {
+            .title__box {
+                line-height: 20px;
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+        &--pointer {
+            cursor: pointer;
+        }
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 14px;
+                color: #b1b4c5;
+                cursor: pointer;
+            }
+            &__text {
+                color: @text-color;
+                font-weight: 500;
+                margin-right: 4px;
+            }
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+            &__addon-after {
+                color: @label-color;
+            }
+            &__collapse {
+                color: @label-color;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
+                    }
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        padding: 16px 24px;
+
+        // opacity: 0;
+        // height: 0;
+        // overflow: hidden;
+        // transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            // opacity: 1;
+            // height: auto;
+        }
+    }
+}

package/lib/button/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 require("./style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -17,7 +17,7 @@ function Button({
   ...rest
 }) {
   return /*#__PURE__*/_react.default.createElement(_antd.Button, _extends({
-    className: (0, _classnames.default)(className),
+    className: (0, _clsx.default)(className),
     size: size,
     type: type
   }, rest));