@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/dist/esm/Tabs/hooks/useNavListMove.js

@@ -10,6 +10,8 @@ export function useNavListMove(_ref) {
   var direction = _ref.direction,
     activeKey = _ref.activeKey,
     enabled = _ref.enabled,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'auto' : _ref$align,
     activetab = _ref.activetab,
     navList = _ref.navList,
     navContainer = _ref.navContainer,
@@ -21,47 +23,82 @@ export function useNavListMove(_ref) {
     if (!enabled || !tab || !list || !container) {
       return;
     }
-    var _isInContainer = isInContainer(direction, tab, list, container),
-      _isInContainer2 = _slicedToArray(_isInContainer, 1),
-      isVisible = _isInContainer2[0];
-    if (isVisible) return;
+
+    // 'auto': keep as-is when the active tab is already fully visible.
+    // 'center': always re-center, even for tabs already visible on the header.
+    if (align !== 'center') {
+      var _isInContainer = isInContainer(direction, tab, list, container),
+        _isInContainer2 = _slicedToArray(_isInContainer, 1),
+        isVisible = _isInContainer2[0];
+      if (isVisible) return;
+    }
+    var moved = false;
     if (direction === 'horizontal') {
-      var _getEleTranslate = getEleTranslate(list),
-        _getEleTranslate2 = _slicedToArray(_getEleTranslate, 1),
-        x = _getEleTranslate2[0];
-      var tabLeft = tab.offsetLeft;
-      var tabWidth = tab.offsetWidth;
-      var containerWidth = container.clientWidth;
-      var newX = x;
+      if (align === 'center') {
+        var containerWidth = container.clientWidth;
+        var maxOffset = list.scrollWidth - containerWidth;
+        var tabCenter = tab.offsetLeft + tab.offsetWidth / 2;
+        var newX = Math.round(containerWidth / 2 - tabCenter);
+        newX = Math.max(-maxOffset, Math.min(0, newX));
+        var _getEleTranslate = getEleTranslate(list),
+          _getEleTranslate2 = _slicedToArray(_getEleTranslate, 1),
+          x = _getEleTranslate2[0];
+        if (Math.abs(newX - x) > 0.5) {
+          setEleTranslate(list, newX);
+          moved = true;
+        }
+      } else {
+        var _getEleTranslate3 = getEleTranslate(list),
+          _getEleTranslate4 = _slicedToArray(_getEleTranslate3, 1),
+          _x = _getEleTranslate4[0];
+        var tabLeft = tab.offsetLeft;
+        var tabWidth = tab.offsetWidth;
+        var _containerWidth = container.clientWidth;
+        var _newX = _x;
 
-      // Tab overflows on the right side
-      if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
-        var overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
-        newX = x - overflow;
+        // Tab overflows on the right side
+        if (tabLeft + tabWidth - Math.abs(_x) > _containerWidth) {
+          var overflow = tabLeft + tabWidth - Math.abs(_x) - _containerWidth;
+          _newX = _x - overflow;
+        }
+        // Tab overflows on the left side
+        else if (tabLeft < Math.abs(_x)) {
+          var _overflow = Math.abs(_x) - tabLeft;
+          _newX = _x + _overflow;
+        }
+        setEleTranslate(list, _newX);
+        moved = true;
       }
-      // Tab overflows on the left side
-      else if (tabLeft < Math.abs(x)) {
-        var _overflow = Math.abs(x) - tabLeft;
-        newX = x + _overflow;
+    } else if (align === 'center') {
+      var containerHeight = container.clientHeight;
+      var _maxOffset = container.scrollHeight - containerHeight;
+      var _tabCenter = tab.offsetTop + tab.offsetHeight / 2;
+      var newScrollTop = Math.max(0, Math.min(_maxOffset, Math.round(_tabCenter - containerHeight / 2)));
+      if (Math.abs(newScrollTop - container.scrollTop) > 0.5) {
+        container.scrollTop = newScrollTop;
+        moved = true;
       }
-      setEleTranslate(list, newX);
     } else {
       var tabTop = tab.offsetTop;
       var tabHeight = tab.offsetHeight;
-      var containerHeight = container.clientHeight;
+      var _containerHeight = container.clientHeight;
       var scrollTop = container.scrollTop;
 
       // Tab overflows below
-      if (tabTop + tabHeight - scrollTop >= containerHeight) {
-        var _overflow2 = tabTop + tabHeight - scrollTop - containerHeight;
+      if (tabTop + tabHeight - scrollTop >= _containerHeight) {
+        var _overflow2 = tabTop + tabHeight - scrollTop - _containerHeight;
         container.scrollTop = scrollTop + _overflow2;
+        moved = true;
       }
       // Tab overflows above
       else if (tabTop < scrollTop) {
         var _overflow3 = scrollTop - tabTop;
         container.scrollTop = scrollTop - _overflow3;
+        moved = true;
       }
     }
-    onMoved === null || onMoved === void 0 || onMoved();
-  }, [activeKey, enabled, direction, activetab, navList, navContainer, onMoved]);
+    if (moved) {
+      onMoved === null || onMoved === void 0 || onMoved();
+    }
+  }, [activeKey, enabled, direction, align, activetab, navList, navContainer, onMoved]);
 }

package/dist/esm/Tabs/hooks/useTabScroll.d.ts

@@ -7,6 +7,7 @@ interface UseTabScrollOptions {
 }
 export declare function useTabScroll({ direction, navContainer, navList, enabled, }: UseTabScrollOptions): {
     refreshKey: number;
+    refresh: () => void;
     updateShadow: import("../../utils/debounce").Debounced<() => void>;
 };
 export {};

package/dist/esm/Tabs/hooks/useTabScroll.js

@@ -35,6 +35,14 @@ export function useTabScroll(_ref) {
     container.classList.toggle('with-suffix-shadow', currentOffset < maxOffset);
   }, [direction, navContainer, navList]);
   var debouncedUpdateShadow = useDebounceFunction(updateShadow, 200);
+
+  // Refresh dropdown range and shadows after the nav list is moved programmatically
+  var refresh = useCallback(function () {
+    setRefreshKey(function (prev) {
+      return prev + 1;
+    });
+    debouncedUpdateShadow();
+  }, [debouncedUpdateShadow]);
   useEffect(function () {
     var container = navContainer.current;
     var list = navList.current;
@@ -84,6 +92,7 @@ export function useTabScroll(_ref) {
   }, [direction, enabled, navContainer, navList, debouncedUpdateShadow, updateShadow]);
   return {
     refreshKey: refreshKey,
+    refresh: refresh,
     updateShadow: debouncedUpdateShadow
   };
 }

package/dist/esm/Tabs/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
-type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar' | 'more';
 export type TabItemType = {
     /**
      * Unique key corresponding to activeKey
@@ -121,5 +121,14 @@ export interface TabsProps extends DataAttributeProps {
      * @default false
      */
     fixedHeader?: boolean;
+    /**
+     * How the active tab is aligned when the tab list overflows
+     * - 'auto': scroll minimally so the active tab is visible at the edge;
+     *   no scrolling when it is already fully visible
+     * - 'center': always scroll so the active tab is centered in the header,
+     *   including tabs clicked directly on the header
+     * @default 'auto'
+     */
+    activeAlign?: 'auto' | 'center';
 }
 export {};

package/dist/esm/Tabs/style/index.less

@@ -439,6 +439,10 @@
   height: var(--yee-tabs-nav-operations-height);
 }
 
+@{pls}-nav-more {
+  margin-left: 4px;
+}
+
 // 下拉框
 @{pls}-operation-container {
   max-height: var(--yee-tabs-operation-container-max-height);
@@ -452,6 +456,7 @@
 
   @{pls}-tab {
     height: var(--yee-tabs-operation-tab-height);
+    margin: 0;
     padding: var(--yee-tabs-operation-tab-padding);
     cursor: pointer;
 

package/dist/esm/Tabs/tab-header/index.d.ts

@@ -12,6 +12,7 @@ export interface TabHeaderProps {
     prefixCls: string;
     type?: 'card' | 'editable-card';
     position?: 'top' | 'bottom' | 'left' | 'right';
+    activeAlign?: 'auto' | 'center';
     headerExtra?: {
         prefix?: React.ReactNode | (() => React.ReactNode);
         suffix?: React.ReactNode | (() => React.ReactNode);

package/dist/esm/Tabs/tab-header/index.js

@@ -23,6 +23,8 @@ var TabHeader = function TabHeader(props) {
     type = props.type,
     _props$position = props.position,
     position = _props$position === void 0 ? 'top' : _props$position,
+    _props$activeAlign = props.activeAlign,
+    activeAlign = _props$activeAlign === void 0 ? 'auto' : _props$activeAlign,
     headerExtra = props.headerExtra,
     classNames = props.classNames,
     styles = props.styles,
@@ -58,7 +60,8 @@ var TabHeader = function TabHeader(props) {
       navList: navList,
       enabled: moreOpen
     }),
-    refreshKey = _useTabScroll.refreshKey;
+    refreshKey = _useTabScroll.refreshKey,
+    refreshNav = _useTabScroll.refresh;
 
   // ActiveBar movement
   useActiveBar({
@@ -70,15 +73,22 @@ var TabHeader = function TabHeader(props) {
     enabled: !type // Only show active bar for non-card types
   });
 
+  // Recompute dropdown visibility, dropdown range and shadows after the list is moved
+  var handleNavMoved = useCallback(function () {
+    checkVisibility();
+    refreshNav();
+  }, [checkVisibility, refreshNav]);
+
   // Navigation list movement
   useNavListMove({
     direction: direction,
     activeKey: activeKey,
     enabled: moreOpen,
+    align: activeAlign,
     activetab: activetab,
     navList: navList,
     navContainer: navContainer,
-    onMoved: checkVisibility
+    onMoved: handleNavMoved
   });
 
   // Listen for container size changes
@@ -158,7 +168,9 @@ var TabHeader = function TabHeader(props) {
     items: items || [],
     range: range
   }, /*#__PURE__*/React.createElement(Button, {
-    className: "".concat(prefixCls, "-nav-more"),
+    className: clsx("".concat(prefixCls, "-nav-more"), classNames === null || classNames === void 0 ? void 0 : classNames.more),
+    style: styles === null || styles === void 0 ? void 0 : styles.more,
+    size: "small",
     icon: /*#__PURE__*/React.createElement(Ellipsis, {
       size: 14,
       strokeWidth: 1.5

package/dist/esm/Tabs/tabs.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["prefixCls", "position", "type", "className", "style", "classNames", "styles", "items", "lazy", "activeKey", "defaultActiveKey", "fixedHeader", "onChange", "onEdit", "onTabClick"];
+var _excluded = ["prefixCls", "position", "type", "className", "style", "classNames", "styles", "items", "lazy", "activeKey", "defaultActiveKey", "fixedHeader", "activeAlign", "onChange", "onEdit", "onTabClick"];
 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); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -42,6 +42,7 @@ var Tabs = function Tabs(baseprops) {
     activeKey = props.activeKey,
     defaultActiveKey = props.defaultActiveKey,
     fixedHeader = props.fixedHeader,
+    activeAlign = props.activeAlign,
     onChange = props.onChange,
     onEdit = props.onEdit,
     onTabClick = props.onTabClick,
@@ -110,7 +111,8 @@ var Tabs = function Tabs(baseprops) {
   }), /*#__PURE__*/React.createElement(TabsCtx.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(TabHeader, _extends({}, omit(props, ['children', 'className', 'style']), {
-    prefixCls: prefixCls
+    prefixCls: prefixCls,
+    activeAlign: activeAlign
   })), /*#__PURE__*/React.createElement(TabContent, {
     prefixCls: prefixCls,
     className: classNames === null || classNames === void 0 ? void 0 : classNames.content,

package/dist/esm/Upload/demo/auto-upload.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Upload/demo/auto-upload.js

@@ -0,0 +1,42 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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(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; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Upload } from "../..";
+import React, { useRef, useState } from 'react';
+export default (function () {
+  var uploadRef = useRef(null);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileList = _useState2[0],
+    setFileList = _useState2[1];
+  var readyCount = fileList.filter(function (file) {
+    return file.status === 'ready';
+  }).length;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 12
+    }
+  }, /*#__PURE__*/React.createElement(Upload, {
+    ref: uploadRef,
+    autoUpload: false,
+    multiple: true,
+    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
+    fileList: fileList,
+    onChange: function onChange(_ref) {
+      var nextFileList = _ref.fileList;
+      return setFileList(nextFileList);
+    }
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    disabled: readyCount === 0,
+    onClick: function onClick() {
+      var _uploadRef$current;
+      return (_uploadRef$current = uploadRef.current) === null || _uploadRef$current === void 0 ? void 0 : _uploadRef$current.upload();
+    }
+  }, "Start upload (", readyCount, ")")));
+});

package/dist/esm/Upload/demo/basic.js

@@ -13,24 +13,18 @@ export default (function () {
     defaultFileList: [{
       uid: '1',
       name: 'xxx.png',
-      status: 'done',
-      raw: {},
+      status: 'success',
       size: 123,
-      percent: 0,
+      percent: 100,
       type: 'image/png'
     }, {
       uid: '2',
       name: 'yyy.png',
-      status: 'done',
-      raw: {},
+      status: 'success',
       size: 123,
-      percent: 0,
+      percent: 100,
       type: 'image/png'
     }]
   };
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(Upload, props, /*#__PURE__*/React.createElement(Button, null, "Upload"))
-  );
+  return /*#__PURE__*/React.createElement(Upload, props, /*#__PURE__*/React.createElement(Button, null, "Upload"));
 });

package/dist/esm/Upload/demo/controlled.js

@@ -16,16 +16,18 @@ export default (function () {
     fileList: fileList,
     onChange: function onChange(_ref) {
       var file = _ref.file,
-        fileList = _ref.fileList;
-      setFileList(fileList);
+        nextFileList = _ref.fileList;
+      setFileList(nextFileList);
       if (file.status !== 'uploading') {
-        console.log(file, fileList);
+        console.log(file, nextFileList);
       }
     },
     onRemove: function onRemove(file) {
-      setFileList(fileList.filter(function (item) {
-        return item.uid !== file.uid;
-      }));
+      setFileList(function (current) {
+        return current.filter(function (item) {
+          return item.uid !== file.uid;
+        });
+      });
       return true;
     }
   };

package/dist/esm/Upload/demo/pictureWall.js

@@ -6,35 +6,38 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Upload } from "../..";
 import React, { useState } from 'react';
+var imageUrl = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
 export default (function () {
   var _useState = useState([{
       uid: '-1',
-      name: 'image.png',
-      status: 'done',
-      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      name: 'image-1.png',
+      status: 'success',
+      type: 'image/png',
+      url: imageUrl
     }, {
       uid: '-2',
-      name: 'image.png',
-      status: 'done',
-      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      name: 'image-2.png',
+      status: 'success',
+      type: 'image/png',
+      url: imageUrl
     }, {
       uid: '-3',
-      name: 'image.png',
-      status: 'done',
-      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      name: 'image-3.png',
+      status: 'success',
+      type: 'image/png',
+      url: imageUrl
     }]),
     _useState2 = _slicedToArray(_useState, 2),
     fileList = _useState2[0],
     setFileList = _useState2[1];
-  var handleChange = function handleChange(_ref) {
-    var fileList = _ref.fileList;
-    setFileList(fileList);
-  };
   var props = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
     listType: 'picture-wall',
     fileList: fileList,
-    onChange: handleChange
+    onChange: function onChange(_ref) {
+      var nextFileList = _ref.fileList;
+      return setFileList(nextFileList);
+    }
   };
   return /*#__PURE__*/React.createElement(Upload, props);
 });

package/dist/esm/Upload/dragger.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const Dragger: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+import type { UploadDraggerProps, UploadInstance } from './interface';
+declare const Dragger: React.ForwardRefExoticComponent<UploadDraggerProps & React.RefAttributes<UploadInstance>>;
 export default Dragger;

package/dist/esm/Upload/dragger.js

@@ -18,7 +18,8 @@ var Dragger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     t = _useLocale.t;
   var renderChildren = function renderChildren() {
     return children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-icon")
+      className: "".concat(prefixCls, "-icon"),
+      "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement(UploadIcon, {
       size: 22
     })), /*#__PURE__*/React.createElement("span", {
@@ -29,11 +30,15 @@ var Dragger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type: "drag",
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(prefixCls), _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled)),
+    className: clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-disabled"), disabled)),
+    role: "button",
+    "aria-disabled": disabled,
     tabIndex: disabled ? -1 : 0,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        e.target.click();
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        var _event$currentTarget$;
+        event.preventDefault();
+        (_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 || (_event$currentTarget$ = _event$currentTarget$.querySelector('input[type="file"]')) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.click();
       }
     }
   }, renderChildren()));

package/dist/esm/Upload/index.d.ts

@@ -4,5 +4,5 @@ type UploadType = typeof InternalUpload & {
     Dragger: typeof Dragger;
 };
 declare const Upload: UploadType;
-export type { UploadProps } from './interface';
+export type { UploadDraggerProps, UploadFile, UploadInstance, UploadProps, UploadRequestAbort, UploadRequestOptions, } from './interface';
 export default Upload;