@chaoswise/ui 3.0.23 → 3.1.0

package/lib/Antd5/button/button.js

@@ -1,4 +1,4 @@
-var _excluded = ["loading", "prefixCls", "type", "danger", "shape", "size", "styles", "disabled", "className", "rootClassName", "children", "icon", "iconPosition", "ghost", "block", "htmlType", "classNames", "style", "autoInsertSpace"];
+var _excluded = ["loading", "prefixCls", "color", "variant", "type", "danger", "shape", "size", "styles", "disabled", "className", "rootClassName", "children", "icon", "iconPosition", "ghost", "block", "htmlType", "classNames", "style", "autoInsertSpace", "autoFocus"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -13,12 +13,11 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 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); }
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/button-has-type */
-import React, { Children, createRef, useContext, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Children, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import { composeRef } from 'rc-util/lib/ref';
+import { useComposeRef } from 'rc-util/lib/ref';
 import { devUseWarning } from '../_util/warning';
 import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
@@ -26,11 +25,11 @@ import DisabledContext from '../config-provider/DisabledContext';
 import useSize from '../config-provider/hooks/useSize';
 import { useCompactItemContext } from '../space/Compact';
 import Group, { GroupSizeContext } from './button-group';
-import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers';
+import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonHelpers';
 import IconWrapper from './IconWrapper';
 import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
-import CompactCmp from './style/compactCmp';
+import Compact from './style/compact';
 function getLoadingConfig(loading) {
   if (_typeof(loading) === 'object' && loading) {
     var delay = loading === null || loading === void 0 ? void 0 : loading.delay;
@@ -45,13 +44,23 @@ function getLoadingConfig(loading) {
     delay: 0
   };
 }
+var ButtonTypeMap = {
+  "default": ['default', 'outlined'],
+  primary: ['primary', 'solid'],
+  dashed: ['default', 'dashed'],
+  link: ['primary', 'link'],
+  text: ['default', 'text']
+};
 var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _ref, _button$classNames, _button$styles;
+  var _ref, _sizeClassNameMap$siz, _classNames, _button$classNames, _button$styles;
   var _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     customizePrefixCls = props.prefixCls,
+    color = props.color,
+    variant = props.variant,
     type = props.type,
-    danger = props.danger,
+    _props$danger = props.danger,
+    danger = _props$danger === void 0 ? false : _props$danger,
     _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'default' : _props$shape,
     customizeSize = props.size,
@@ -73,10 +82,26 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
     _props$style = props.style,
     customStyle = _props$style === void 0 ? {} : _props$style,
     autoInsertSpace = props.autoInsertSpace,
+    autoFocus = props.autoFocus,
     rest = _objectWithoutProperties(props, _excluded);
   // https://github.com/ant-design/ant-design/issues/47605
   // Compatible with original `type` behavior
   var mergedType = type || 'default';
+  var _useMemo = useMemo(function () {
+      if (color && variant) {
+        return [color, variant];
+      }
+      var colorVariantPair = ButtonTypeMap[mergedType] || [];
+      if (danger) {
+        return ['danger', colorVariantPair[1]];
+      }
+      return colorVariantPair;
+    }, [type, color, variant, danger]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    mergedColor = _useMemo2[0],
+    mergedVariant = _useMemo2[1];
+  var isDanger = mergedColor === 'danger';
+  var mergedColorText = isDanger ? 'dangerous' : mergedColor;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     direction = _useContext.direction,
@@ -102,9 +127,11 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
     _useState4 = _slicedToArray(_useState3, 2),
     hasTwoCNChar = _useState4[0],
     setHasTwoCNChar = _useState4[1];
-  var internalRef = /*#__PURE__*/createRef();
-  var buttonRef = composeRef(ref, internalRef);
-  var needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonType(mergedType);
+  var buttonRef = useRef();
+  var mergedRef = useComposeRef(ref, buttonRef);
+  var needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonVariant(mergedVariant);
+  // ========================= Effect =========================
+  // Loading
   useEffect(function () {
     var delayTimer = null;
     if (loadingOrDelay.delay > 0) {
@@ -123,12 +150,13 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
     }
     return cleanupTimer;
   }, [loadingOrDelay]);
+  // Two chinese characters check
   useEffect(function () {
     // FIXME: for HOC usage like <FormatMessage />
-    if (!buttonRef || !buttonRef.current || !mergedInsertSpace) {
+    if (!buttonRef.current || !mergedInsertSpace) {
       return;
     }
-    var buttonText = buttonRef.current.textContent;
+    var buttonText = buttonRef.current.textContent || '';
     if (needInserted && isTwoCNChar(buttonText)) {
       if (!hasTwoCNChar) {
         setHasTwoCNChar(true);
@@ -136,21 +164,30 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
     } else if (hasTwoCNChar) {
       setHasTwoCNChar(false);
     }
-  }, [buttonRef]);
-  var handleClick = function handleClick(e) {
-    var onClick = props.onClick;
+  });
+  // Auto focus
+  useEffect(function () {
+    if (autoFocus && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, []);
+  // ========================= Events =========================
+  var handleClick = React.useCallback(function (e) {
+    var _props$onClick;
     // FIXME: https://github.com/ant-design/ant-design/issues/30207
     if (innerLoading || mergedDisabled) {
       e.preventDefault();
       return;
     }
-    onClick === null || onClick === void 0 || onClick(e);
-  };
+    (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, e);
+  }, [props.onClick, innerLoading, mergedDisabled]);
+  // ========================== Warn ==========================
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('Button');
     warning(!(typeof icon === 'string' && icon.length > 2), 'breaking', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon"));
-    warning(!(ghost && isUnBorderedButtonType(mergedType)), 'usage', "`link` or `text` button can't be a `ghost` button.");
+    warning(!(ghost && isUnBorderedButtonVariant(mergedVariant)), 'usage', "`link` or `text` button can't be a `ghost` button.");
   }
+  // ========================== Size ==========================
   var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
     compactSize = _useCompactItemContex.compactSize,
     compactItemClassnames = _useCompactItemContex.compactItemClassnames;
@@ -163,13 +200,13 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
     var _ref2, _ref3;
     return (_ref2 = (_ref3 = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref3 !== void 0 ? _ref3 : groupSize) !== null && _ref2 !== void 0 ? _ref2 : ctxSize;
   });
-  var sizeCls = sizeFullName ? sizeClassNameMap[sizeFullName] || '' : '';
+  var sizeCls = sizeFullName ? (_sizeClassNameMap$siz = sizeClassNameMap[sizeFullName]) !== null && _sizeClassNameMap$siz !== void 0 ? _sizeClassNameMap$siz : '' : '';
   var iconType = innerLoading ? 'loading' : icon;
   var linkButtonRestProps = omit(rest, ['navigate']);
-  var classes = classNames(prefixCls, hashId, cssVarCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(shape), shape !== 'default' && shape), "".concat(prefixCls, "-").concat(mergedType), mergedType), "".concat(prefixCls, "-").concat(sizeCls), sizeCls), "".concat(prefixCls, "-icon-only"), !children && children !== 0 && !!iconType), "".concat(prefixCls, "-background-ghost"), ghost && !isUnBorderedButtonType(mergedType)), "".concat(prefixCls, "-loading"), innerLoading), "".concat(prefixCls, "-two-chinese-chars"), hasTwoCNChar && mergedInsertSpace && !innerLoading), "".concat(prefixCls, "-block"), block), "".concat(prefixCls, "-dangerous"), !!danger), "".concat(prefixCls, "-rtl"), direction === 'rtl'), compactItemClassnames, className, rootClassName, button === null || button === void 0 ? void 0 : button.className);
+  // ========================= Render =========================
+  var classes = classNames(prefixCls, hashId, cssVarCls, (_classNames = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, "".concat(prefixCls, "-").concat(shape), shape !== 'default' && shape), "".concat(prefixCls, "-").concat(mergedType), mergedType), "".concat(prefixCls, "-dangerous"), danger), "".concat(prefixCls, "-color-").concat(mergedColorText), mergedColorText), "".concat(prefixCls, "-variant-").concat(mergedVariant), mergedVariant), "".concat(prefixCls, "-").concat(sizeCls), sizeCls), "".concat(prefixCls, "-icon-only"), !children && children !== 0 && !!iconType), "".concat(prefixCls, "-background-ghost"), ghost && !isUnBorderedButtonVariant(mergedVariant)), "".concat(prefixCls, "-loading"), innerLoading), "".concat(prefixCls, "-two-chinese-chars"), hasTwoCNChar && mergedInsertSpace && !innerLoading), _defineProperty(_defineProperty(_defineProperty(_classNames, "".concat(prefixCls, "-block"), block), "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-icon-end"), iconPosition === 'end')), compactItemClassnames, className, rootClassName, button === null || button === void 0 ? void 0 : button.className);
   var fullStyle = _objectSpread(_objectSpread({}, button === null || button === void 0 ? void 0 : button.style), customStyle);
-  var isIconPositionEnd = iconPosition === 'end' && children && children !== 0 && iconType;
-  var iconClasses = classNames(customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.icon, button === null || button === void 0 || (_button$classNames = button.classNames) === null || _button$classNames === void 0 ? void 0 : _button$classNames.icon, _defineProperty({}, "".concat(prefixCls, "-icon-end"), isIconPositionEnd));
+  var iconClasses = classNames(customClassNames === null || customClassNames === void 0 ? void 0 : customClassNames.icon, button === null || button === void 0 || (_button$classNames = button.classNames) === null || _button$classNames === void 0 ? void 0 : _button$classNames.icon);
   var iconStyle = _objectSpread(_objectSpread({}, (styles === null || styles === void 0 ? void 0 : styles.icon) || {}), (button === null || button === void 0 || (_button$styles = button.styles) === null || _button$styles === void 0 ? void 0 : _button$styles.icon) || {});
   var iconNode = icon && !innerLoading ? _jsx(IconWrapper, {
     prefixCls: prefixCls,
@@ -179,26 +216,18 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
   }) : _jsx(LoadingIcon, {
     existIcon: !!icon,
     prefixCls: prefixCls,
-    loading: !!innerLoading,
-    iconPosition: iconPosition
+    loading: innerLoading
   });
   var kids = children || children === 0 ? spaceChildren(children, needInserted && mergedInsertSpace) : null;
-  var genButtonContent = function genButtonContent(iconComponent, kidsComponent) {
-    return iconPosition === 'start' ? _jsxs(_Fragment, {
-      children: [iconComponent, kidsComponent]
-    }) : _jsxs(_Fragment, {
-      children: [kidsComponent, iconComponent]
-    });
-  };
   if (linkButtonRestProps.href !== undefined) {
-    return wrapCSSVar(_jsx("a", _objectSpread(_objectSpread({}, linkButtonRestProps), {}, {
+    return wrapCSSVar(_jsxs("a", _objectSpread(_objectSpread({}, linkButtonRestProps), {}, {
       className: classNames(classes, _defineProperty({}, "".concat(prefixCls, "-disabled"), mergedDisabled)),
       href: mergedDisabled ? undefined : linkButtonRestProps.href,
       style: fullStyle,
       onClick: handleClick,
-      ref: buttonRef,
+      ref: mergedRef,
       tabIndex: mergedDisabled ? -1 : 0,
-      children: genButtonContent(iconNode, kids)
+      children: [iconNode, kids]
     })));
   }
   var buttonNode = _jsxs("button", _objectSpread(_objectSpread({}, rest), {}, {
@@ -207,15 +236,15 @@ var InternalCompoundedButton = /*#__PURE__*/React.forwardRef(function (props, re
     style: fullStyle,
     onClick: handleClick,
     disabled: mergedDisabled,
-    ref: buttonRef,
-    children: [genButtonContent(iconNode, kids), !!compactItemClassnames && _jsx(CompactCmp, {
+    ref: mergedRef,
+    children: [iconNode, kids, compactItemClassnames && _jsx(Compact, {
       prefixCls: prefixCls
-    }, "compact")]
+    })]
   }));
-  if (!isUnBorderedButtonType(mergedType)) {
+  if (!isUnBorderedButtonVariant(mergedVariant)) {
     buttonNode = _jsx(Wave, {
       component: "Button",
-      disabled: !!innerLoading,
+      disabled: innerLoading,
       children: buttonNode
     });
   }

package/lib/Antd5/button/buttonHelpers.js

@@ -2,7 +2,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { cloneElement, isFragment } from '../_util/reactNode';
-var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
+var rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/;
 export var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 export function convertLegacyProps(type) {
   if (type === 'danger') {
@@ -17,7 +17,7 @@ export function convertLegacyProps(type) {
 export function isString(str) {
   return typeof str === 'string';
 }
-export function isUnBorderedButtonType(type) {
+export function isUnBorderedButtonVariant(type) {
   return type === 'text' || type === 'link';
 }
 function splitCNCharsBySpace(child, needInserted) {
@@ -63,6 +63,8 @@ export function spaceChildren(children, needInserted) {
     return splitCNCharsBySpace(child, needInserted);
   });
 }
-var ButtonTypes = ['default', 'primary', 'dashed', 'link', 'text'];
-var ButtonShapes = ['default', 'circle', 'round'];
-var ButtonHTMLTypes = ['submit', 'button', 'reset'];
+var _ButtonTypes = ['default', 'primary', 'dashed', 'link', 'text'];
+var _ButtonShapes = ['default', 'circle', 'round'];
+var _ButtonHTMLTypes = ['submit', 'button', 'reset'];
+export var _ButtonVariantTypes = ['outlined', 'dashed', 'solid', 'filled', 'text', 'link'];
+export var _ButtonColorTypes = ['default', 'primary', 'danger'];

package/lib/Antd5/button/style/{compactCmp.js → compact.js}

@@ -1,41 +1,34 @@
 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-// Style as inline component
-import { unit } from '@ant-design/cssinjs';
 import { genCompactItemStyle } from '../../style/compact-item';
 import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
 import { genSubStyleComponent } from '../../theme/internal';
 import { prepareComponentToken, prepareToken } from './token';
 var genButtonCompactStyle = function genButtonCompactStyle(token) {
   var componentCls = token.componentCls,
+    colorPrimaryHover = token.colorPrimaryHover,
+    lineWidth = token.lineWidth,
     calc = token.calc;
-  return _defineProperty({}, componentCls, _defineProperty(_defineProperty({}, "&-compact-item".concat(componentCls, "-primary"), _defineProperty({}, "&:not([disabled]) + ".concat(componentCls, "-compact-item").concat(componentCls, "-primary:not([disabled])"), {
-    position: 'relative',
-    '&:before': {
-      position: 'absolute',
-      top: calc(token.lineWidth).mul(-1).equal(),
-      insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
-      display: 'inline-block',
-      width: token.lineWidth,
-      height: "calc(100% + ".concat(unit(token.lineWidth), " * 2)"),
-      backgroundColor: token.colorPrimaryHover,
-      content: '""'
-    }
-  })), '&-compact-vertical-item', _defineProperty({}, "&".concat(componentCls, "-primary"), _defineProperty({}, "&:not([disabled]) + ".concat(componentCls, "-compact-vertical-item").concat(componentCls, "-primary:not([disabled])"), {
-    position: 'relative',
-    '&:before': {
-      position: 'absolute',
-      top: calc(token.lineWidth).mul(-1).equal(),
-      insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
-      display: 'inline-block',
-      width: "calc(100% + ".concat(unit(token.lineWidth), " * 2)"),
-      height: token.lineWidth,
-      backgroundColor: token.colorPrimaryHover,
-      content: '""'
-    }
-  }))));
+  var insetOffset = calc(lineWidth).mul(-1).equal();
+  var getCompactBorderStyle = function getCompactBorderStyle(vertical) {
+    return _defineProperty({}, "".concat(componentCls, "-compact").concat(vertical ? '-vertical' : '', "-item").concat(componentCls, "-primary:not([disabled])"), {
+      '& + &::before': {
+        position: 'absolute',
+        top: vertical ? insetOffset : 0,
+        insetInlineStart: vertical ? 0 : insetOffset,
+        backgroundColor: colorPrimaryHover,
+        content: '""',
+        width: vertical ? '100%' : lineWidth,
+        height: vertical ? lineWidth : '100%'
+      }
+    });
+  };
+  // Special styles for Primary Button
+  return _objectSpread(_objectSpread({}, getCompactBorderStyle()), getCompactBorderStyle(true));
 };
 // ============================== Export ==============================
 export default genSubStyleComponent(['Button', 'compact'], function (token) {

package/lib/Antd5/button/style/group.js

@@ -36,14 +36,16 @@ var genGroupStyle = function genGroupStyle(token) {
       borderStartStartRadius: 0,
       borderEndStartRadius: 0
     })
-  }), componentCls, _defineProperty(_defineProperty({
+  }), componentCls, {
     position: 'relative',
-    zIndex: 1
-  }, "&:hover,\n          &:focus,\n          &:active", {
-    zIndex: 2
-  }), '&[disabled]', {
-    zIndex: 0
-  })), "".concat(componentCls, "-icon-only"), {
+    zIndex: 1,
+    '&:hover, &:focus, &:active': {
+      zIndex: 2
+    },
+    '&[disabled]': {
+      zIndex: 0
+    }
+  }), "".concat(componentCls, "-icon-only"), {
     fontSize: fontSize
   }),
   // Border Color