diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 9bbd9b08d2dc..66033bec7dde 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -8,10 +8,7 @@ import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; -import toReactElement from 'jsonml-to-react-element'; -import JsonML from 'jsonml.js/lib/utils'; import LZString from 'lz-string'; -import Prism from 'prismjs'; import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Alert, Badge, Space, Tooltip } from 'antd'; @@ -31,28 +28,6 @@ import { ping } from '../../utils'; const { ErrorBoundary } = Alert; -function toReactComponent(jsonML: any) { - return toReactElement(jsonML, [ - [ - (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 - const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), - ); - }, - ], - ]); -} - function compress(string: string): string { return LZString.compressToBase64(string) .replace(/\+/g, '-') // Convert '+' to '-' @@ -130,13 +105,6 @@ const CodePreviewer: React.FC = (props) => { const [showOnlineUrl, setShowOnlineUrl] = useState(false); - const highlightedCodes = { - jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'), - tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'), - }; - - const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : ''; - useEffect(() => { const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses setShowOnlineUrl( @@ -538,17 +506,11 @@ createRoot(document.getElementById('container')).render(); {codeExpand && (
setCodeType(type)} /> - {highlightedStyle ? ( -
-
-                
-              
-
- ) : null}
)} @@ -560,7 +522,9 @@ createRoot(document.getElementById('container')).render(); // resulting in some response delays like following issue: // https://github.com/ant-design/ant-design/issues/39995 // So we insert style tag into head tag. - if (!style) return; + if (!style) { + return; + } const styleTag = document.createElement('style'); styleTag.type = 'text/css'; styleTag.innerHTML = style; diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx index a37144956fd6..fb23c55e0f71 100644 --- a/.dumi/theme/builtins/Previewer/Previewer.tsx +++ b/.dumi/theme/builtins/Previewer/Previewer.tsx @@ -1,6 +1,7 @@ +import React from 'react'; import type { IPreviewerProps } from 'dumi'; import { useTabMeta } from 'dumi'; -import React from 'react'; + import CodePreviewer from './CodePreviewer'; import DesignPreviewer from './DesignPreviewer'; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index ff79fd82a952..e36c556112f8 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,10 +1,40 @@ import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; +import { Skeleton, Alert } from 'antd'; +import { createStyles } from 'antd-style'; + +const { ErrorBoundary } = Alert; const Previewer = React.lazy(() => import('./Previewer')); -export default (props: IPreviewerProps) => ( - - - -); +const useStyle = createStyles(({ css }) => ({ + skeletonWrapper: css` + width: 100% !important; + height: 500px; + margin-bottom: 16px; + `, +})); + +export default (props: IPreviewerProps) => { + const { styles } = useStyle(); + return ( + + + {' '} + + } + > + + + + ); +}; diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index 93c9c4580710..b69303dae1fe 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,37 +1,101 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; +import Prism from 'prismjs'; +import toReactElement from 'jsonml-to-react-element'; +import JsonML from 'jsonml.js/lib/utils'; import { Tabs } from 'antd'; const LANGS = { tsx: 'TypeScript', jsx: 'JavaScript', + style: 'CSS', }; interface CodePreviewProps { - codes?: Record; - toReactComponent?: (node: any) => React.ReactNode; + sourceCode?: string; + jsxCode?: string; + styleCode?: string; onCodeTypeChange?: (activeKey: string) => void; } -const CodePreview: React.FC = ({ toReactComponent, codes, onCodeTypeChange }) => { - const langList = Object.keys(codes).sort().reverse(); +function toReactComponent(jsonML: any) { + return toReactElement(jsonML, [ + [ + (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', + (node: any, index: any) => { + // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 + const attr = JsonML.getAttributes(node); + return React.createElement( + 'pre', + { + key: index, + className: `language-${attr.lang}`, + }, + React.createElement('code', { + dangerouslySetInnerHTML: { __html: attr.highlighted }, + }), + ); + }, + ], + ]); +} + +const CodePreview: React.FC = ({ + sourceCode = '', + jsxCode = '', + styleCode = '', + onCodeTypeChange, +}) => { + // 避免 Tabs 数量不稳定的闪动问题 + const initialCodes = {}; + if (sourceCode) { + initialCodes.tsx = ''; + } + if (jsxCode) { + initialCodes.jsx = ''; + } + if (styleCode) { + initialCodes.style = ''; + } + const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes); + + useEffect(() => { + const codes = { + tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'), + jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'), + style: Prism.highlight(styleCode, Prism.languages.css, 'css'), + }; + // 去掉空的代码类型 + Object.keys(codes).forEach((key) => { + if (!codes[key]) { + delete codes[key]; + } + }); + setHighlightedCodes(codes); + }, [jsxCode, sourceCode, styleCode]); + + const langList = Object.keys(highlightedCodes); + const items = useMemo( + () => + langList.map((lang) => ({ + label: LANGS[lang], + key: lang, + children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]), + })), + [JSON.stringify(highlightedCodes)], + ); + + if (!langList.length) { + return null; + } + if (langList.length === 1) { return toReactComponent([ 'pre', - { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' }, + { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' }, ]); } - return ( - ({ - label: LANGS[lang], - key: lang, - children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]), - }))} - /> - ); + + return ; }; export default CodePreview; diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx index a805422a238c..6cf0de24b2a7 100644 --- a/.dumi/theme/common/styles/Common.tsx +++ b/.dumi/theme/common/styles/Common.tsx @@ -1,9 +1,13 @@ import { css, Global } from '@emotion/react'; import React from 'react'; +import { useTheme } from 'antd-style'; -export default () => ( - { + const { headerHeight, margin } = useTheme(); + + return ( + ( vertical-align: middle; border-style: none; } + + html { + scroll-padding-top: ${headerHeight + margin}px; + } `} - /> -); + /> + ); +}; diff --git a/.dumirc.ts b/.dumirc.ts index a374f7a8f795..b6aa833febbd 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -87,14 +87,14 @@ export default defineConfig({ crossorigin: true, }, { - rel: 'prefetch', + rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'prefetch', + rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff', type: 'font/woff2', diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml index 302e9c71535b..b8610144b645 100644 --- a/.github/workflows/pr-contributor-welcome.yml +++ b/.github/workflows/pr-contributor-welcome.yml @@ -9,6 +9,32 @@ on: - 'components/**' jobs: + read-file: + runs-on: ubuntu-latest + outputs: + require-result: ${{ steps.contributors.outputs.content }} + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Read contributors.json + id: contributors + uses: juliangruber/read-file-action@v1 + with: + path: ./contributors.json + + output-log: + runs-on: ubuntu-latest + needs: read-file + steps: + - name: contributors.json + run: echo "${{ needs.read-file.outputs.require-result }}" + - name: creator + run: echo "${{ github.event.pull_request.user.login }}" + - name: contains + run: echo "${{ contains(fromJSON(needs.read-file.outputs.require-result), github.event.pull_request.user.login) }}" + - name: merged + run: echo "${{ github.event.pull_request.merged }}" + check-merged: runs-on: ubuntu-latest needs: read-file @@ -25,4 +51,4 @@ jobs: - body-include: '' \ No newline at end of file + body-include: '' diff --git a/.prettierrc b/.prettierrc index d1c91d8d042d..73e7db810cd9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,10 +4,8 @@ "trailingComma": "all", "printWidth": 100, "proseWrap": "never", - "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"], - "importOrderSeparation": true, - "importOrderSortSpecifiers": true, - "plugins": ["@trivago/prettier-plugin-sort-imports"], + "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"], + "plugins": ["@ianvs/prettier-plugin-sort-imports"], "overrides": [ { "files": ".prettierrc", diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx index 54c91b3bbfb5..53c2cf1af264 100644 --- a/components/date-picker/__tests__/DatePicker.test.tsx +++ b/components/date-picker/__tests__/DatePicker.test.tsx @@ -186,6 +186,20 @@ describe('DatePicker', () => { expect(mouseDownEvent).not.toThrow(); }); + it('showTime should work correctly when format is Array', () => { + const { container } = render( + , + ); + const fuousEvent = () => { + fireEvent.focus(container.querySelector('input')!); + }; + const mouseDownEvent = () => { + fireEvent.mouseDown(container.querySelector('input')!); + }; + expect(fuousEvent).not.toThrow(); + expect(mouseDownEvent).not.toThrow(); + }); + it('12 hours', () => { const { container } = render( , diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index f624b5aebba0..c308fad42260 100644 --- a/components/date-picker/util.ts +++ b/components/date-picker/util.ts @@ -126,6 +126,11 @@ export function getTimeProps( const firstFormat = toArray(format)[0]; const showTimeObj = { ...props }; + // https://github.com/ant-design/ant-design/issues/44275 + if (format && Array.isArray(format)) { + showTimeObj.format = firstFormat; + } + if (firstFormat && typeof firstFormat === 'string') { if (!firstFormat.includes('s') && showSecond === undefined) { showTimeObj.showSecond = false; diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index f8937451af5b..711557826ac0 100644 --- a/components/mentions/style/index.ts +++ b/components/mentions/style/index.ts @@ -1,6 +1,5 @@ import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { - genActiveStyle, genBasicInputStyle, genDisabledStyle, genPlaceholderStyle, @@ -78,10 +77,6 @@ const genMentionsStyle: GenerateStyle = (token) => { }, }, - '&-focused': { - ...genActiveStyle(token), - }, - [`&-affix-wrapper ${componentCls}-suffix`]: { position: 'absolute', top: 0, diff --git a/package.json b/package.json index 90307895d3f9..fbc77a3395c1 100644 --- a/package.json +++ b/package.json @@ -172,6 +172,7 @@ "@dnd-kit/utilities": "^3.2.1", "@emotion/react": "^11.10.4", "@emotion/server": "^11.4.0", + "@ianvs/prettier-plugin-sort-imports": "^4.1.0", "@qixian.cs/github-contributors-list": "^1.1.0", "@size-limit/file": "^8.1.0", "@stackblitz/sdk": "^1.3.0", @@ -181,7 +182,6 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", - "@trivago/prettier-plugin-sort-imports": "^4.2.0", "@types/fs-extra": "^11.0.1", "@types/gtag.js": "^0.0.13", "@types/http-server": "^0.12.1", @@ -304,7 +304,7 @@ "ts-node": "^10.8.2", "typedoc": "^0.24.8", "typescript": "~5.1.3", - "vanilla-jsoneditor": "^0.17.1", + "vanilla-jsoneditor": "^0.18.0", "webpack-bundle-analyzer": "^4.1.0", "xhr-mock": "^2.4.1" },