chore: merge master into feature

2024-11-30 11:08:45 +08:00 · 2024-06-02 21:48:48 +08:00 · 2024-06-02 21:48:48 +08:00 · e642d5ea4a
commit e642d5ea4a
parent 8875ca7043 c7dc0acfb7
15 changed files with 184 additions and 310 deletions
--- a/.dumi/theme/builtins/IconSearch/Category.tsx
+++ b/.dumi/theme/builtins/IconSearch/Category.tsx
@ -1,9 +1,52 @@
 import * as React from 'react';
-import { useIntl } from 'dumi';
 import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import { useIntl } from 'dumi';
+
 import CopyableIcon from './CopyableIcon';
-import type { ThemeType } from './index';
 import type { CategoriesKeys } from './fields';
+import type { ThemeType } from './IconSearch';
+
+const useStyle = createStyles(({ token, css }) => ({
+  anticonsList: css`
+    margin: ${token.marginSM}px 0;
+    overflow: hidden;
+    direction: ltr;
+    list-style: none;
+    li {
+      position: relative;
+      float: left;
+      width: 16.66%;
+      height: 100px;
+      margin: ${token.marginXXS}px 0;
+      padding: ${token.paddingSM}px 0 0;
+      overflow: hidden;
+      color: #555;
+      text-align: center;
+      list-style: none;
+      background-color: inherit;
+      border-radius: ${token.borderRadiusSM}px;
+      cursor: pointer;
+      transition: all ${token.motionDurationSlow} ease-in-out;
+      .rtl & {
+        margin: ${token.marginXXS}px 0;
+        padding: ${token.paddingSM}px 0 0;
+      }
+      ${token.iconCls} {
+        margin: ${token.marginSM}px 0 ${token.marginXS}px;
+        font-size: 36px;
+        transition: transform ${token.motionDurationSlow} ease-in-out;
+        will-change: transform;
+      }
+    }
+  `,
+  copiedCode: css`
+    padding: 2px 4px;
+    font-size: ${token.fontSizeSM}px;
+    background-color: ${token.colorBgLayout};
+    border-radius: ${token.borderRadiusXS}px;
+  `,
+}));

 interface CategoryProps {
  title: CategoriesKeys;
@ -15,13 +58,14 @@ interface CategoryProps {
 const Category: React.FC<CategoryProps> = (props) => {
  const { message } = App.useApp();
  const { icons, title, newIcons, theme } = props;
+  const { styles } = useStyle();
  const intl = useIntl();
  const [justCopied, setJustCopied] = React.useState<string | null>(null);
  const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const onCopied = React.useCallback((type: string, text: string) => {
    message.success(
      <span>
-        <code className="copied-code">{text}</code> copied 🎉
+        <code className={styles.copiedCode}>{text}</code> copied 🎉
      </span>,
    );
    setJustCopied(type);
@ -40,7 +84,7 @@ const Category: React.FC<CategoryProps> = (props) => {
  return (
    <div>
      <h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
-      <ul className="anticons-list">
+      <ul className={styles.anticonsList}>
        {icons.map((name) => (
          <CopyableIcon
            key={name}
--- a/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
+++ b/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
@ -1,33 +1,76 @@
-import * as React from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import classNames from 'classnames';
+import React from 'react';
 import * as AntdIcons from '@ant-design/icons';
 import { Badge, message } from 'antd';
-import type { ThemeType } from './index';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import CopyToClipboard from 'react-copy-to-clipboard';

-const allIcons: {
-  [key: string]: any;
-} = AntdIcons;
+import type { ThemeType } from './IconSearch';
+
+const allIcons: { [key: PropertyKey]: any } = AntdIcons;
+
+const useStyle = createStyles(({ token, css }) => {
+  const { antCls, iconCls } = token;
+  return {
+    item: css`
+      &:hover {
+        color: #fff;
+        background-color: ${token.colorPrimary};
+        ${iconCls} {
+          transform: scale(1.3);
+        }
+        ${antCls}-badge {
+          color: #fff;
+        }
+      }
+      &.TwoTone:hover {
+        background-color: #8ecafe;
+      }
+      &.copied:hover {
+        color: rgba(255, 255, 255, 0.2);
+      }
+      &::after {
+        content: 'Copied!';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        color: #fff;
+        line-height: 110px;
+        text-align: center;
+        background-color: #1677ff;
+        opacity: 0;
+        transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
+      }
+      &.copied::after {
+        opacity: 1;
+      }
+    `,
+    anticonCls: css`
+      display: block;
+      font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      white-space: nowrap;
+      text-align: center;
+      transform: scale(0.8);
+      ${antCls}-badge {
+        transition: color ${token.motionDurationSlow} ease-in-out;
+      }
+    `,
+  };
+});

 export interface CopyableIconProps {
  name: string;
  isNew: boolean;
  theme: ThemeType;
  justCopied: string | null;
-  onCopied: (type: string, text: string) => any;
+  onCopied: (type: string, text: string) => void;
 }

-const CopyableIcon: React.FC<CopyableIconProps> = ({
-  name,
-  isNew,
-  justCopied,
-  onCopied,
-  theme,
-}) => {
-  const className = classNames({
-    copied: justCopied === name,
-    [theme]: !!theme,
-  });
+const CopyableIcon: React.FC<CopyableIconProps> = (props) => {
+  const { name, isNew, justCopied, theme, onCopied } = props;
+  const { styles } = useStyle();
  const onCopy = (text: string, result: boolean) => {
    if (result) {
      onCopied(name, text);
@ -37,9 +80,9 @@ const CopyableIcon: React.FC<CopyableIconProps> = ({
  };
  return (
    <CopyToClipboard text={`<${name} />`} onCopy={onCopy}>
-      <li className={className}>
+      <li className={classNames(theme, styles.item, { copied: justCopied === name })}>
        {React.createElement(allIcons[name])}
-        <span className="anticon-class">
+        <span className={styles.anticonCls}>
          <Badge dot={isNew}>{name}</Badge>
        </span>
      </li>
--- a/.dumi/theme/common/BrowserFrame.tsx
+++ b/.dumi/theme/common/BrowserFrame.tsx
@ -1,7 +1,47 @@
 import React from 'react';
+import { createStyles } from 'antd-style';

-const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="browser-mockup with-url">{children}</div>
-);
+const useStyle = createStyles(({ token, css }) => ({
+  browserMockup: css`
+    position: relative;
+    border-top: 2em solid rgba(230, 230, 230, 0.7);
+    border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
+    box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
+    &::before {
+      position: absolute;
+      top: -1.25em;
+      left: 1em;
+      display: block;
+      width: 0.5em;
+      height: 0.5em;
+      background-color: #f44;
+      border-radius: 50%;
+      box-shadow:
+        0 0 0 2px #f44,
+        1.5em 0 0 2px #9b3,
+        3em 0 0 2px #fb5;
+      content: '';
+    }
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -1.6em;
+      left: 5.5em;
+      width: calc(100% - 6em);
+      height: 1.2em;
+      background-color: #fff;
+      border-radius: ${token.borderRadiusSM}px;
+    }
+    & > * {
+      display: block;
+    }
+  `,
+}));
+
+const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { styles } = useStyle();
+  return <div className={styles.browserMockup}>{children}</div>;
+};

 export default BrowserFrame;
--- a/.dumi/theme/common/Color/ColorStyle.tsx
+++ b/.dumi/theme/common/Color/ColorStyle.tsx
@ -130,17 +130,17 @@ ${makeGrayPalette(index + 1)}
        .main-color {
          ${makePalette('blue')}
          ${makePalette('purple')}
-  ${makePalette('cyan')}
-  ${makePalette('green')}
-  ${makePalette('magenta')}
-  ${makePalette('red')}
-  ${makePalette('volcano')}
-  ${makePalette('orange')}
-  ${makePalette('gold')}
-  ${makePalette('yellow')}
-  ${makePalette('lime')}
-  ${makePalette('geekblue')}
-  ${makeGrayPalette()}
+          ${makePalette('cyan')}
+          ${makePalette('green')}
+          ${makePalette('magenta')}
+          ${makePalette('red')}
+          ${makePalette('volcano')}
+          ${makePalette('orange')}
+          ${makePalette('gold')}
+          ${makePalette('yellow')}
+          ${makePalette('lime')}
+          ${makePalette('geekblue')}
+          ${makeGrayPalette()}

  text-align: left;

--- a/.dumi/theme/common/GlobalStyles.tsx
+++ b/.dumi/theme/common/GlobalStyles.tsx
@ -2,13 +2,10 @@ import React from 'react';

 import ColorStyle from './Color/ColorStyle';
 import {
-  BrowserMockup,
  Common,
  Demo,
  HeadingAnchor,
  Highlight,
-  Icon,
-  IconPickSearcher,
  Markdown,
  NProgress,
  PreviewImage,
@ -25,9 +22,6 @@ const GlobalStyles: React.FC = () => (
    <Markdown />
    <Highlight />
    <Demo />
-    <Icon />
-    <IconPickSearcher />
-    <BrowserMockup />
    <Responsive />
    <NProgress />
    <PreviewImage />
--- a/.dumi/theme/common/styles/BrowserMockup.tsx
+++ b/.dumi/theme/common/styles/BrowserMockup.tsx
@ -1,68 +0,0 @@
-import React from 'react';
-import { css, Global } from '@emotion/react';
-import { useTheme } from 'antd-style';
-
-export default () => {
-  const token = useTheme();
-  return (
-    <Global
-      styles={css`
-        /* Browser mockup code
- * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
- * Live example: https://updown.io
- */
-
-        .browser-mockup {
-          position: relative;
-          border-top: 2em solid rgba(230, 230, 230, 0.7);
-          border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
-          box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
-        }
-
-        .browser-mockup::before {
-          position: absolute;
-          top: -1.25em;
-          left: 1em;
-          display: block;
-          width: 0.5em;
-          height: 0.5em;
-          background-color: #f44;
-          border-radius: 50%;
-          box-shadow:
-            0 0 0 2px #f44,
-            1.5em 0 0 2px #9b3,
-            3em 0 0 2px #fb5;
-          content: '';
-        }
-
-        .browser-mockup.with-tab::after {
-          position: absolute;
-          top: -2em;
-          left: 5.5em;
-          display: block;
-          width: 20%;
-          height: 0;
-          border-right: 0.8em solid transparent;
-          border-bottom: 2em solid white;
-          border-left: 0.8em solid transparent;
-          content: '';
-        }
-
-        .browser-mockup.with-url::after {
-          position: absolute;
-          top: -1.6em;
-          left: 5.5em;
-          display: block;
-          width: calc(100% - 6em);
-          height: 1.2em;
-          background-color: #fff;
-          border-radius: ${token.borderRadiusXS}px;
-          content: '';
-        }
-        .browser-mockup > * {
-          display: block;
-        }
-      `}
-    />
-  );
-};
--- a/.dumi/theme/common/styles/Icon.tsx
+++ b/.dumi/theme/common/styles/Icon.tsx
@ -1,113 +0,0 @@
-import React from 'react';
-import { css, Global } from '@emotion/react';
-import { useTheme } from 'antd-style';
-
-export default () => {
-  const token = useTheme();
-
-  const { antCls, iconCls } = token;
-
-  return (
-    <Global
-      styles={css`
-        ul.anticons-list {
-          margin: 10px 0;
-          overflow: hidden;
-          direction: ltr;
-          list-style: none;
-
-          li {
-            position: relative;
-            float: left;
-            width: 16.66%;
-            height: 100px;
-            margin: 3px 0;
-            padding: 10px 0 0;
-            overflow: hidden;
-            color: #555;
-            text-align: center;
-            list-style: none;
-            background-color: inherit;
-            border-radius: ${token.borderRadiusSM}px;
-            cursor: pointer;
-            transition:
-              color ${token.motionDurationSlow} ease-in-out,
-              background-color ${token.motionDurationSlow} ease-in-out;
-
-            .rtl & {
-              margin: 3px 0;
-              padding: 10px 0 0;
-            }
-
-            ${iconCls} {
-              margin: ${token.marginSM}px 0 ${token.marginXS}px;
-              font-size: 36px;
-              transition: transform ${token.motionDurationSlow} ease-in-out;
-              will-change: transform;
-            }
-
-            .anticon-class {
-              display: block;
-              font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
-                monospace;
-              white-space: nowrap;
-              text-align: center;
-              transform: scale(0.83);
-
-              ${antCls}-badge {
-                transition: color ${token.motionDurationSlow} ease-in-out;
-              }
-            }
-
-            &:hover {
-              color: #fff;
-              background-color: ${token.colorPrimary};
-
-              ${iconCls} {
-                transform: scale(1.4);
-              }
-
-              ${antCls}-badge {
-                color: #fff;
-              }
-            }
-
-            &.TwoTone:hover {
-              background-color: #8ecafe;
-            }
-
-            &.copied:hover {
-              color: rgba(255, 255, 255, 0.2);
-            }
-
-            &::after {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              color: #fff;
-              line-height: 110px;
-              text-align: center;
-              background: #1677ff;
-              opacity: 0;
-              transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
-              content: 'Copied!';
-            }
-
-            &.copied::after {
-              opacity: 1;
-            }
-          }
-        }
-
-        .copied-code {
-          padding: 2px 4px;
-          font-size: ${token.fontSizeSM}px;
-          background: ${token.colorBgLayout};
-          border-radius: ${token.borderRadiusXS}px;
-        }
-      `}
-    />
-  );
-};
--- a/.dumi/theme/common/styles/IconPickSearcher.tsx
+++ b/.dumi/theme/common/styles/IconPickSearcher.tsx
@ -1,71 +0,0 @@
-import React from 'react';
-import { css, Global } from '@emotion/react';
-import { useTheme } from 'antd-style';
-
-export default () => {
-  const token = useTheme();
-
-  const { iconCls } = token;
-
-  return (
-    <Global
-      styles={css`
-        .icon-pic-searcher {
-          display: inline-block;
-          margin: 0 ${token.marginXS}px;
-
-          .icon-pic-btn {
-            color: ${token.colorIcon};
-            cursor: pointer;
-            transition: all ${token.motionDurationSlow};
-
-            &:hover {
-              color: ${token.colorIconHover};
-            }
-          }
-        }
-
-        .icon-pic-preview {
-          width: 66px;
-          height: 66px;
-          margin-top: 10px;
-          padding: ${token.paddingXS}px;
-          text-align: center;
-          border: 1px solid ${token.colorBorder};
-          border-radius: ${token.borderRadiusSM}px;
-
-          > img {
-            max-width: 50px;
-            max-height: 50px;
-          }
-        }
-
-        .icon-pic-search-result {
-          min-height: 50px;
-          padding: 0 10px;
-
-          > .result-tip {
-            padding: 10px 0;
-            color: ${token.colorTextSecondary};
-          }
-
-          > table {
-            width: 100%;
-
-            .col-icon {
-              width: 80px;
-              padding: 10px 0;
-
-              > ${iconCls} {
-                font-size: ${token.fontSizeHeading2}px;
-                :hover {
-                  color: ${token.colorLinkHover};
-                }
-              }
-            }
-          }
-        }
-      `}
-    />
-  );
-};
--- a/.dumi/theme/common/styles/NProgress.tsx
+++ b/.dumi/theme/common/styles/NProgress.tsx
@ -1,5 +1,5 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';

 export default () => {
@ -13,7 +13,9 @@ export default () => {
          }

          .peg {
-            box-shadow: 0 0 10px ${token.colorPrimary}, 0 0 5px ${token.colorPrimary};
+            box-shadow:
+              0 0 10px ${token.colorPrimary},
+              0 0 5px ${token.colorPrimary};
          }

          .spinner-icon {
--- a/.dumi/theme/common/styles/index.ts
+++ b/.dumi/theme/common/styles/index.ts
@ -4,9 +4,6 @@ export { default as Common } from './Common';
 export { default as Markdown } from './Markdown';
 export { default as Highlight } from './Highlight';
 export { default as Demo } from './Demo';
-export { default as Icon } from './Icon';
-export { default as IconPickSearcher } from './IconPickSearcher';
-export { default as BrowserMockup } from './BrowserMockup';
 export { default as Responsive } from './Responsive';
 export { default as NProgress } from './NProgress';
 export { default as PreviewImage } from './PreviewImage';
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -83,7 +83,7 @@ const InternalCompoundedButton = React.forwardRef<
    loading = false,
    prefixCls: customizePrefixCls,
    type,
-    danger,
+    danger = false,
    shape = 'default',
    size: customizeSize,
    styles,
@ -220,7 +220,7 @@ const InternalCompoundedButton = React.forwardRef<
      [`${prefixCls}-loading`]: innerLoading,
      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && mergedInsertSpace && !innerLoading,
      [`${prefixCls}-block`]: block,
-      [`${prefixCls}-dangerous`]: !!danger,
+      [`${prefixCls}-dangerous`]: danger,
      [`${prefixCls}-rtl`]: direction === 'rtl',
      [`${prefixCls}-icon-end`]: iconPosition === 'end',
    },
@ -244,7 +244,7 @@ const InternalCompoundedButton = React.forwardRef<
        {icon}
      </IconWrapper>
    ) : (
-      <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={!!innerLoading} />
+      <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={innerLoading} />
    );

  const kids =
@ -288,7 +288,7 @@ const InternalCompoundedButton = React.forwardRef<

  if (!isUnBorderedButtonType(mergedType)) {
    buttonNode = (
-      <Wave component="Button" disabled={!!innerLoading}>
+      <Wave component="Button" disabled={innerLoading}>
        {buttonNode}
      </Wave>
    );
--- a/components/date-picker/locale/ja_JP.ts
+++ b/components/date-picker/locale/ja_JP.ts
@ -7,7 +7,15 @@ import type { PickerLocale } from '../generatePicker';
 const locale: PickerLocale = {
  lang: {
    placeholder: '日付を選択',
+    yearPlaceholder: '年を選択',
+    quarterPlaceholder: '四半期を選択',
+    monthPlaceholder: '月を選択',
+    weekPlaceholder: '週を選択',
    rangePlaceholder: ['開始日付', '終了日付'],
+    rangeYearPlaceholder: ['開始年', '終了年'],
+    rangeMonthPlaceholder: ['開始月', '終了月'],
+    rangeQuarterPlaceholder: ['開始四半期', '終了四半期'],
+    rangeWeekPlaceholder: ['開始週', '終了週'],
    ...CalendarLocale,
  },
  timePickerLocale: {
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@ -38,7 +38,6 @@ const Divider: React.FC<DividerProps> = (props) => {

  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);

-  const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
  const hasChildren = !!children;
  const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
  const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
@ -50,7 +49,7 @@ const Divider: React.FC<DividerProps> = (props) => {
    `${prefixCls}-${type}`,
    {
      [`${prefixCls}-with-text`]: hasChildren,
-      [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
+      [`${prefixCls}-with-text-${orientation}`]: hasChildren,
      [`${prefixCls}-dashed`]: !!dashed,
      [`${prefixCls}-plain`]: !!plain,
      [`${prefixCls}-rtl`]: direction === 'rtl',
--- a/components/float-button/FloatButtonGroup.tsx
+++ b/components/float-button/FloatButtonGroup.tsx
@ -123,7 +123,6 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
            <FloatButton
              ref={floatButtonRef}
              type={type}
-              shape={shape}
              icon={open ? mergedCloseIcon : icon}
              description={description}
              aria-label={props['aria-label']}
--- a/package.json
+++ b/package.json
@ -195,7 +195,7 @@
    "@types/ali-oss": "^6.16.11",
    "@types/cli-progress": "^3.11.5",
    "@types/fs-extra": "^11.0.4",
-    "@types/gtag.js": "^0.0.19",
+    "@types/gtag.js": "^0.0.20",
    "@types/http-server": "^0.12.4",
    "@types/inquirer": "^9.0.7",
    "@types/isomorphic-fetch": "^0.0.39",