diff --git a/.dumi/theme/builtins/Palette/index.tsx b/.dumi/theme/builtins/Palette/index.tsx index b94369dd0b..4dacea1bc6 100644 --- a/.dumi/theme/builtins/Palette/index.tsx +++ b/.dumi/theme/builtins/Palette/index.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import Palette from '../../common/Color/Palette'; export default Palette; diff --git a/.dumi/theme/common/BrowserFrame.jsx b/.dumi/theme/common/BrowserFrame.jsx deleted file mode 100644 index 642e372890..0000000000 --- a/.dumi/theme/common/BrowserFrame.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -const BrowserFrame = ({ children }) =>
{children}
; - -export default BrowserFrame; diff --git a/.dumi/theme/common/BrowserFrame.tsx b/.dumi/theme/common/BrowserFrame.tsx new file mode 100644 index 0000000000..385a23cf41 --- /dev/null +++ b/.dumi/theme/common/BrowserFrame.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const BrowserFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => ( +
{children}
+); + +export default BrowserFrame; diff --git a/.dumi/theme/common/CodePenIcon.jsx b/.dumi/theme/common/CodePenIcon.tsx similarity index 91% rename from .dumi/theme/common/CodePenIcon.jsx rename to .dumi/theme/common/CodePenIcon.tsx index cda997597e..63ecd3d366 100644 --- a/.dumi/theme/common/CodePenIcon.jsx +++ b/.dumi/theme/common/CodePenIcon.tsx @@ -1,12 +1,14 @@ import React from 'react'; import Icon from '@ant-design/icons'; -const SVGIcon = () => ( +const SVGIcon: React.FC = () => ( ); -const CodePenIcon = (props) => ; +const CodePenIcon: React.FC<{ className?: string }> = (props) => ( + +); export default CodePenIcon; diff --git a/.dumi/theme/common/CodePreview.jsx b/.dumi/theme/common/CodePreview.tsx similarity index 52% rename from .dumi/theme/common/CodePreview.jsx rename to .dumi/theme/common/CodePreview.tsx index 3624ec0fbb..1f399a1221 100644 --- a/.dumi/theme/common/CodePreview.jsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -8,31 +8,25 @@ const LANGS = { jsx: 'JavaScript', }; -const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => { +interface CodePreviewProps { + codes?: Record; + toReactComponent?: (node: any) => React.ReactNode; + onCodeTypeChange?: (activeKey: string) => void; +} + +const CodePreview: React.FC = ({ toReactComponent, codes, onCodeTypeChange }) => { const langList = Object.keys(codes).sort().reverse(); - let content; + let content: React.ReactNode; if (langList.length === 1) { - content = toReactComponent([ - 'pre', - { - lang: langList[0], - highlighted: codes[langList[0]], - }, - ]); + content = toReactComponent(['pre', { lang: langList[0], highlighted: codes[langList[0]] }]); } else { content = ( {langList.map((lang) => ( - {toReactComponent([ - 'pre', - { - lang, - highlighted: codes[lang], - }, - ])} + {toReactComponent(['pre', { lang, highlighted: codes[lang] }])} ))} diff --git a/.dumi/theme/common/CodeSandboxIcon.jsx b/.dumi/theme/common/CodeSandboxIcon.tsx similarity index 76% rename from .dumi/theme/common/CodeSandboxIcon.jsx rename to .dumi/theme/common/CodeSandboxIcon.tsx index 96ac3f5380..24162f03be 100644 --- a/.dumi/theme/common/CodeSandboxIcon.jsx +++ b/.dumi/theme/common/CodeSandboxIcon.tsx @@ -1,12 +1,14 @@ import React from 'react'; import Icon from '@ant-design/icons'; -const SVGIcon = () => ( +const SVGIcon: React.FC = () => ( ); -const CodeSandboxIcon = (props) => ; +const CodeSandboxIcon: React.FC<{ className?: string }> = (props) => ( + +); export default CodeSandboxIcon; diff --git a/.dumi/theme/common/Color/ColorBlock.jsx b/.dumi/theme/common/Color/ColorBlock.tsx similarity index 80% rename from .dumi/theme/common/Color/ColorBlock.jsx rename to .dumi/theme/common/Color/ColorBlock.tsx index 282c6a6ca0..aa981b763b 100644 --- a/.dumi/theme/common/Color/ColorBlock.jsx +++ b/.dumi/theme/common/Color/ColorBlock.tsx @@ -2,7 +2,13 @@ import React, { Component } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { message } from 'antd'; -export default class ColorBlock extends Component { +interface ColorBlockProps { + color: string; + index: number; + dark?: boolean; +} + +class ColorBlock extends Component { getTextStyle() { const { color, index, dark } = this.props; const colorMap = { @@ -25,7 +31,7 @@ export default class ColorBlock extends Component { render() { const { color, index } = this.props; return ( - +
color-{index} {color.toLowerCase()} @@ -34,3 +40,5 @@ export default class ColorBlock extends Component { ); } } + +export default ColorBlock; diff --git a/.dumi/theme/common/Color/ColorPaletteTool.jsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx similarity index 73% rename from .dumi/theme/common/Color/ColorPaletteTool.jsx rename to .dumi/theme/common/Color/ColorPaletteTool.tsx index 8a1936e1cd..78cbe310a0 100644 --- a/.dumi/theme/common/Color/ColorPaletteTool.jsx +++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx @@ -1,3 +1,4 @@ +import type { ChangeEvent } from 'react'; import React, { Component } from 'react'; import { FormattedMessage } from 'dumi'; import ColorPicker from './ColorPicker'; @@ -6,18 +7,17 @@ import ColorPatterns from './ColorPatterns'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 -export default class ColorPaletteTool extends Component { +class ColorPaletteTool extends Component { state = { primaryColor: '#1890ff', primaryColorInstance: null, }; - handleChangeColor = (e, color) => { - const value = e.target ? e.target.value : e; - this.setState({ - primaryColor: value, - primaryColorInstance: color, - }); + handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => { + const value = (e as ChangeEvent).target + ? (e as ChangeEvent).target.value + : e; + this.setState({ primaryColor: value, primaryColorInstance: color }); }; renderColorValidation() { @@ -45,12 +45,10 @@ export default class ColorPaletteTool extends Component {
-
- -
+
{ColorPatterns({ color: primaryColor })}
- + {primaryColor} {this.renderColorValidation()} @@ -59,3 +57,5 @@ export default class ColorPaletteTool extends Component { ); } } + +export default ColorPaletteTool; diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.jsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx similarity index 77% rename from .dumi/theme/common/Color/ColorPaletteToolDark.jsx rename to .dumi/theme/common/Color/ColorPaletteToolDark.tsx index 2559b1afee..fdcf68e6fd 100644 --- a/.dumi/theme/common/Color/ColorPaletteToolDark.jsx +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx @@ -1,3 +1,4 @@ +import type { ChangeEvent } from 'react'; import React, { Component } from 'react'; import { FormattedMessage } from 'dumi'; import { Row, Col } from 'antd'; @@ -7,26 +8,25 @@ import ColorPatterns from './ColorPatterns'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 -export default class ColorPaletteTool extends Component { +class ColorPaletteTool extends Component { state = { primaryColor: '#1890ff', backgroundColor: '#141414', primaryColorInstance: null, }; - handleChangeColor = (e, color) => { - const value = e.target ? e.target.value : e; - this.setState({ - primaryColor: value, - primaryColorInstance: color, - }); + handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => { + const value = (e as ChangeEvent).target + ? (e as ChangeEvent).target.value + : e; + this.setState({ primaryColor: value, primaryColorInstance: color }); }; - handleChangeBackgroundColor = (e) => { - const value = e.target ? e.target.value : e; - this.setState({ - backgroundColor: value, - }); + handleChangeBackgroundColor = (e: string | ChangeEvent) => { + const value = (e as ChangeEvent).target + ? (e as ChangeEvent).target.value + : e; + this.setState({ backgroundColor: value }); }; renderColorValidation() { @@ -56,7 +56,7 @@ export default class ColorPaletteTool extends Component { return (
- + {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
@@ -67,11 +67,7 @@ export default class ColorPaletteTool extends Component { - + {primaryColor} @@ -87,7 +83,6 @@ export default class ColorPaletteTool extends Component { @@ -105,3 +100,5 @@ export default class ColorPaletteTool extends Component { ); } } + +export default ColorPaletteTool; diff --git a/.dumi/theme/common/Color/ColorPalettes.jsx b/.dumi/theme/common/Color/ColorPalettes.jsx deleted file mode 100644 index f7411668d6..0000000000 --- a/.dumi/theme/common/Color/ColorPalettes.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import cls from 'classnames'; -import Palette from './Palette'; - -const ColorPalettes = (props) => { - const { dark } = props; - - const colors = [ - { - name: 'red', - english: 'Dust Red', - chinese: '薄暮', - description: '斗志、奔放', - }, - { - name: 'volcano', - english: 'Volcano', - chinese: '火山', - description: '醒目、澎湃', - }, - { - name: 'orange', - english: 'Sunset Orange', - chinese: '日暮', - description: '温暖、欢快', - }, - { - name: 'gold', - english: 'Calendula Gold', - chinese: '金盏花', - description: '活力、积极', - }, - { - name: 'yellow', - english: 'Sunrise Yellow', - chinese: '日出', - description: '出生、阳光', - }, - { - name: 'lime', - english: 'Lime', - chinese: '青柠', - description: '自然、生机', - }, - { - name: 'green', - english: 'Polar Green', - chinese: '极光绿', - description: '健康、创新', - }, - { - name: 'cyan', - english: 'Cyan', - chinese: '明青', - description: '希望、坚强', - }, - { - name: 'blue', - english: 'Daybreak Blue', - chinese: '拂晓蓝', - description: '包容、科技、普惠', - }, - { - name: 'geekblue', - english: 'Geek Blue', - chinese: '极客蓝', - description: '探索、钻研', - }, - { - name: 'purple', - english: 'Golden Purple', - chinese: '酱紫', - description: '优雅、浪漫', - }, - { - name: 'magenta', - english: 'Magenta', - chinese: '法式洋红', - description: '明快、感性', - }, - ]; - const colorCls = cls('color-palettes', { - 'color-palettes-dark': !!dark, - }); - return ( -
- {colors.map((color) => ( - - ))} -
- ); -}; - -export default ColorPalettes; diff --git a/.dumi/theme/common/Color/ColorPalettes.tsx b/.dumi/theme/common/Color/ColorPalettes.tsx new file mode 100644 index 0000000000..b380e3f60d --- /dev/null +++ b/.dumi/theme/common/Color/ColorPalettes.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import cls from 'classnames'; +import Palette from './Palette'; + +const colors = [ + { + name: 'red', + english: 'Dust Red', + chinese: '薄暮', + description: '斗志、奔放', + }, + { + name: 'volcano', + english: 'Volcano', + chinese: '火山', + description: '醒目、澎湃', + }, + { + name: 'orange', + english: 'Sunset Orange', + chinese: '日暮', + description: '温暖、欢快', + }, + { + name: 'gold', + english: 'Calendula Gold', + chinese: '金盏花', + description: '活力、积极', + }, + { + name: 'yellow', + english: 'Sunrise Yellow', + chinese: '日出', + description: '出生、阳光', + }, + { + name: 'lime', + english: 'Lime', + chinese: '青柠', + description: '自然、生机', + }, + { + name: 'green', + english: 'Polar Green', + chinese: '极光绿', + description: '健康、创新', + }, + { + name: 'cyan', + english: 'Cyan', + chinese: '明青', + description: '希望、坚强', + }, + { + name: 'blue', + english: 'Daybreak Blue', + chinese: '拂晓蓝', + description: '包容、科技、普惠', + }, + { + name: 'geekblue', + english: 'Geek Blue', + chinese: '极客蓝', + description: '探索、钻研', + }, + { + name: 'purple', + english: 'Golden Purple', + chinese: '酱紫', + description: '优雅、浪漫', + }, + { + name: 'magenta', + english: 'Magenta', + chinese: '法式洋红', + description: '明快、感性', + }, +]; + +const ColorPalettes: React.FC<{ dark?: boolean }> = (props) => { + const { dark } = props; + const colorCls = cls('color-palettes', { + 'color-palettes-dark': !!dark, + }); + return ( +
+ {colors.map((color) => ( + + ))} +
+ ); +}; + +export default ColorPalettes; diff --git a/.dumi/theme/common/Color/ColorPatterns.jsx b/.dumi/theme/common/Color/ColorPatterns.tsx similarity index 63% rename from .dumi/theme/common/Color/ColorPatterns.jsx rename to .dumi/theme/common/Color/ColorPatterns.tsx index 6989b20215..d40d88a0c9 100644 --- a/.dumi/theme/common/Color/ColorPatterns.jsx +++ b/.dumi/theme/common/Color/ColorPatterns.tsx @@ -3,9 +3,17 @@ import { generate } from '@ant-design/colors'; import uniq from 'lodash/uniq'; import ColorBlock from './ColorBlock'; -export default function ColorPatterns({ color, dark, backgroundColor }) { +interface ColorPatternsProps { + color?: string; + dark?: boolean; + backgroundColor?: string; +} + +const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => { const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); return uniq(colors).map((colorString, i) => ( )); -} +}; + +export default ColorPatterns; diff --git a/.dumi/theme/common/Color/ColorPicker.tsx b/.dumi/theme/common/Color/ColorPicker.tsx index 5e7fe77f5b..e6b5d92871 100644 --- a/.dumi/theme/common/Color/ColorPicker.tsx +++ b/.dumi/theme/common/Color/ColorPicker.tsx @@ -5,11 +5,11 @@ const noop = () => {}; interface ColorPickerProps { color?: string; - small: boolean; - position: string; + small?: boolean; + position?: string; presetColors?: string[]; - onChange: (hex: string, color: { hex: string }) => void; - onChangeComplete: (hex: string) => void; + onChange?: (hex: string, color: { hex: string }) => void; + onChangeComplete?: (hex: string) => void; } export default class ColorPicker extends Component { diff --git a/.dumi/theme/common/Color/ColorStyle.tsx b/.dumi/theme/common/Color/ColorStyle.tsx index 58ebe6d3ab..9de6c08de0 100644 --- a/.dumi/theme/common/Color/ColorStyle.tsx +++ b/.dumi/theme/common/Color/ColorStyle.tsx @@ -48,89 +48,89 @@ ${makeGrayPalette(index + 1)} return ( ); }; diff --git a/.dumi/theme/common/Color/Palette.jsx b/.dumi/theme/common/Color/Palette.tsx similarity index 83% rename from .dumi/theme/common/Color/Palette.jsx rename to .dumi/theme/common/Color/Palette.tsx index 5b35b6a365..3f5f624653 100644 --- a/.dumi/theme/common/Color/Palette.jsx +++ b/.dumi/theme/common/Color/Palette.tsx @@ -3,7 +3,7 @@ import { message } from 'antd'; import CopyToClipboard from 'react-copy-to-clipboard'; import { presetDarkPalettes } from '@ant-design/colors'; -const rgbToHex = (rgbString) => { +const rgbToHex = (rgbString: string): string => { const rgb = rgbString.match(/\d+/g); let r = parseInt(rgb[0], 10).toString(16); let g = parseInt(rgb[1], 10).toString(16); @@ -14,10 +14,21 @@ const rgbToHex = (rgbString) => { return `#${r}${g}${b}`; }; -export default class Palette extends React.Component { +interface PaletteProps { + showTitle?: boolean; + direction?: 'horizontal' | 'vertical'; + dark?: boolean; + color?: any; +} + +class Palette extends React.Component { + hexColors: Record; + + colorNodes: Record; + componentDidMount() { this.hexColors = {}; - Object.keys(this.colorNodes).forEach((key) => { + Object.keys(this.colorNodes || {}).forEach((key) => { const computedColor = getComputedStyle(this.colorNodes[key])['background-color']; if (computedColor.includes('rgba')) { this.hexColors[key] = computedColor; @@ -34,10 +45,10 @@ export default class Palette extends React.Component { showTitle, direction, dark, - color: { name, description, english, chinese, count = 10 }, + color: { name, description, english, chinese, count } = { name: 'gray', count: 13 }, } = this.props; const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette'; - const colors = []; + const colors: React.ReactNode[] = []; const colorName = `${english} / ${chinese}`; const colorPaletteMap = { dark: ['#fff', 'unset'], @@ -88,6 +99,4 @@ export default class Palette extends React.Component { } } -Palette.defaultProps = { - color: { name: 'gray', count: 13 }, -}; +export default Palette; diff --git a/.dumi/theme/common/ExternalLinkIcon.jsx b/.dumi/theme/common/ExternalLinkIcon.tsx similarity index 79% rename from .dumi/theme/common/ExternalLinkIcon.jsx rename to .dumi/theme/common/ExternalLinkIcon.tsx index a0429db503..f193d6a695 100644 --- a/.dumi/theme/common/ExternalLinkIcon.jsx +++ b/.dumi/theme/common/ExternalLinkIcon.tsx @@ -1,13 +1,15 @@ import React from 'react'; import Icon from '@ant-design/icons'; -const SVGIcon = ({ color = 'currentColor' }) => ( +const SVGIcon: React.FC<{ color?: string }> = ({ color = 'currentColor' }) => ( ); -const ExternalLinkIcon = (props) => ; +const ExternalLinkIcon: React.FC<{ className?: string }> = (props) => ( + +); export default ExternalLinkIcon; diff --git a/.dumi/theme/common/PrevAndNext.tsx b/.dumi/theme/common/PrevAndNext.tsx index 1a36a40a0d..4752705ee6 100644 --- a/.dumi/theme/common/PrevAndNext.tsx +++ b/.dumi/theme/common/PrevAndNext.tsx @@ -96,7 +96,7 @@ const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null = return null; }; -const PrevAndNext = () => { +const PrevAndNext: React.FC = () => { const styles = useStyle(); const [menuItems, selectedKey] = useMenu({ diff --git a/.dumi/theme/common/RiddleIcon.jsx b/.dumi/theme/common/RiddleIcon.tsx similarity index 94% rename from .dumi/theme/common/RiddleIcon.jsx rename to .dumi/theme/common/RiddleIcon.tsx index e8efd77dc5..2c46a24152 100644 --- a/.dumi/theme/common/RiddleIcon.jsx +++ b/.dumi/theme/common/RiddleIcon.tsx @@ -1,12 +1,14 @@ import React from 'react'; import Icon from '@ant-design/icons'; -const SVGIcon = () => ( +const SVGIcon: React.FC = () => ( ); -const RiddleIcon = (props) => ; +const RiddleIcon: React.FC<{ className?: string }> = (props) => ( + +); export default RiddleIcon; diff --git a/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx b/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx index cbf413a5d3..724f5a8c84 100644 --- a/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx +++ b/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Icon from '@ant-design/icons'; -const ThemeIcon = (props: any) => { +const ThemeIcon: React.FC<{ className?: string }> = (props) => { const SVGIcon = React.useCallback( () => ( diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx index fe461cbbc5..c39092cb50 100644 --- a/.dumi/theme/common/ThemeSwitch/index.tsx +++ b/.dumi/theme/common/ThemeSwitch/index.tsx @@ -1,4 +1,3 @@ -import type { FC } from 'react'; import React from 'react'; import { FloatButton, theme } from 'antd'; import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons'; @@ -11,7 +10,7 @@ export type ThemeSwitchProps = { onChange: (value: typeof defaultAlgorithm[]) => void; }; -const ThemeSwitch: FC = ({ value, onChange }) => { +const ThemeSwitch: React.FC = ({ value, onChange }) => { const handleLightSwitch = () => { let newValue = [...value]; if (value.includes(darkAlgorithm)) { diff --git a/.eslintrc.js b/.eslintrc.js index 2b8af60c88..12628ed2b1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -25,7 +25,7 @@ module.exports = { }, }, parser: '@typescript-eslint/parser', - plugins: ['react', 'babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'], + plugins: ['react', '@babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'], // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034 overrides: [ { @@ -67,6 +67,11 @@ module.exports = { }, rules: { indent: 0, + '@babel/new-cap': 0, + '@babel/no-invalid-this': 0, + '@babel/no-unused-expressions': 2, + '@babel/object-curly-spacing': 0, + '@babel/semi': 2, 'default-case': 0, 'eol-last': 0, 'no-console': 0, diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index 4a33aad712..03a807c30f 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -50,7 +50,7 @@ const genSharedButtonStyle: GenerateStyle = (token): CSS ...genFocusStyle(token), }, - ...genCompactItemStyle(token, componentCls), + ...genCompactItemStyle(token, componentCls, { focus: false }), ...genCompactItemVerticalStyle(token, componentCls), // make `btn-icon-only` not too narrow @@ -69,7 +69,7 @@ const genSharedButtonStyle: GenerateStyle = (token): CSS display: 'inline-block', width: token.lineWidth, height: `calc(100% + ${token.lineWidth * 2}px)`, - backgroundColor: token.colorPrimaryBorder, + backgroundColor: token.colorPrimaryHover, content: '""', }, }, @@ -87,7 +87,7 @@ const genSharedButtonStyle: GenerateStyle = (token): CSS display: 'inline-block', width: `calc(100% + ${token.lineWidth * 2}px)`, height: token.lineWidth, - backgroundColor: token.colorPrimaryBorder, + backgroundColor: token.colorPrimaryHover, content: '""', }, }, diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index ab950ec025..56d90c1206 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -974,7 +974,9 @@ const genPickerStyle: GenerateStyle = (token) => { transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`, // Space.Compact - ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`), + ...genCompactItemStyle(token, componentCls, { + focusElCls: `${componentCls}-focused`, + }), '&:hover, &-focused': { ...genHoverStyle(token), diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap index aa54fa2d5f..563b0ba869 100644 --- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -33,6 +33,21 @@ Array [ role="separator" style="height:60px;border-color:#7cb305" />, +
+ +
, ] `; diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap index 8af60aeef2..72e62c4271 100644 --- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap @@ -33,6 +33,21 @@ Array [ role="separator" style="height:60px;border-color:#7cb305" />, +
+ +
, ] `; diff --git a/components/divider/demo/customize-style.tsx b/components/divider/demo/customize-style.tsx index d537eb0b54..29621bb498 100644 --- a/components/divider/demo/customize-style.tsx +++ b/components/divider/demo/customize-style.tsx @@ -10,6 +10,12 @@ const App: React.FC = () => ( + +
+ + Text + +
); diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx index 118cfaabfd..ae8beabca2 100644 --- a/components/divider/style/index.tsx +++ b/components/divider/style/index.tsx @@ -45,6 +45,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => '&-horizontal&-with-text': { display: 'flex', + alignItems: 'center', margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, color: token.colorTextHeading, fontWeight: 500, @@ -55,7 +56,6 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => '&::before, &::after': { position: 'relative', - top: '50%', width: '50%', borderBlockStart: `${lineWidth}px solid transparent`, // Chrome not accept `inherit` in `border-top` @@ -68,24 +68,20 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => '&-horizontal&-with-text-left': { '&::before': { - top: '50%', width: '5%', }, '&::after': { - top: '50%', width: '95%', }, }, '&-horizontal&-with-text-right': { '&::before': { - top: '50%', width: '95%', }, '&::after': { - top: '50%', width: '5%', }, }, diff --git a/components/form/hooks/useForm.ts b/components/form/hooks/useForm.ts index 60d87383fc..a553a58902 100644 --- a/components/form/hooks/useForm.ts +++ b/components/form/hooks/useForm.ts @@ -50,7 +50,7 @@ export default function useForm(form?: FormInstance): [For scrollMode: 'if-needed', block: 'nearest', ...options, - }); + } as any); } }, getFieldInstance: (name: NamePath) => { diff --git a/components/form/interface.ts b/components/form/interface.ts index 53a4a0a86e..d153f37222 100644 --- a/components/form/interface.ts +++ b/components/form/interface.ts @@ -1,3 +1,3 @@ -export { InternalNamePath, NamePath, Store, StoreValue } from 'rc-field-form/lib/interface'; -export { Options as ScrollOptions } from 'scroll-into-view-if-needed'; +export type { InternalNamePath, NamePath, Store, StoreValue } from 'rc-field-form/lib/interface'; +export type { Options as ScrollOptions } from 'scroll-into-view-if-needed'; export type FormLabelAlign = 'left' | 'right'; diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index adc262db5b..511db27c18 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -263,12 +263,10 @@ const genSelectStyle: GenerateStyle = (token) => { width: '100%', }, // Space.Compact - ...genCompactItemStyle( - token, - componentCls, - `${componentCls}-selector`, - `${componentCls}-focused`, - ), + ...genCompactItemStyle(token, componentCls, { + borderElCls: `${componentCls}-selector`, + focusElCls: `${componentCls}-focused`, + }), }, }, diff --git a/components/style/compact-item.tsx b/components/style/compact-item.tsx index 8165934c8c..236c793913 100644 --- a/components/style/compact-item.tsx +++ b/components/style/compact-item.tsx @@ -2,26 +2,40 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { DerivativeToken } from '../theme/internal'; +interface CompactItemOptions { + focus?: boolean; + /** + * Some component borders are implemented on child elements + * like `Select` + */ + borderElCls?: string; + /** + * Some components have special `focus` className especially with popovers + * like `Select` and `DatePicker` + */ + focusElCls?: string; +} + // handle border collapse -function compactItemBorder( - token: DerivativeToken, - borderedItemCls?: string, - popoverFocusedCls?: string, -): CSSObject { - const childCombinator = borderedItemCls ? '> *' : ''; +function compactItemBorder(token: DerivativeToken, options: CompactItemOptions): CSSObject { + const childCombinator = options.borderElCls ? '> *' : ''; + const hoverEffects = ['hover', options.focus ? 'focus' : null, 'active'] + .filter(Boolean) + .map((n) => `&:${n} ${childCombinator}`) + .join(','); return { '&-item:not(&-last-item)': { marginInlineEnd: -token.lineWidth, }, '&-item': { - [`&:hover ${childCombinator}, &:focus ${childCombinator}, &:active ${childCombinator}`]: { + [hoverEffects]: { zIndex: 2, }, - ...(popoverFocusedCls + ...(options.focusElCls ? { - [`&${popoverFocusedCls}`]: { + [`&${options.focusElCls}`]: { zIndex: 2, }, } @@ -35,8 +49,8 @@ function compactItemBorder( } // handle border-radius -function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string): CSSObject { - const childCombinator = borderedElementCls ? `> ${borderedElementCls}` : ''; +function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions): CSSObject { + const childCombinator = options.borderElCls ? `> ${options.borderElCls}` : ''; return { [`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: { @@ -64,18 +78,12 @@ function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string) export function genCompactItemStyle( token: DerivativeToken, prefixCls: string, - /** Some component borders are implemented on child elements like `Select` */ - borderedElementCls?: string, - /** - * Some components have special `focus` className especially with popovers like `Select` and - * `DatePicker` - */ - popoverFocusedCls?: string, + options: CompactItemOptions = { focus: true }, ): CSSObject { return { '&-compact': { - ...compactItemBorder(token, borderedElementCls, popoverFocusedCls), - ...compactItemBorderRadius(prefixCls, borderedElementCls), + ...compactItemBorder(token, options), + ...compactItemBorderRadius(prefixCls, options), }, }; } diff --git a/package.json b/package.json index 50719d06b6..467dcc38ec 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,7 @@ "rc-steps": "~6.0.0-alpha.2", "rc-switch": "~4.0.0", "rc-table": "~7.26.0", - "rc-tabs": "~12.4.1", + "rc-tabs": "~12.4.2", "rc-textarea": "~0.4.5", "rc-tooltip": "~5.2.0", "rc-tree": "~5.7.0", @@ -154,13 +154,14 @@ "rc-trigger": "^5.2.10", "rc-upload": "~4.3.0", "rc-util": "^5.25.2", - "scroll-into-view-if-needed": "^2.2.25", + "scroll-into-view-if-needed": "^3.0.3", "shallowequal": "^1.1.0" }, "devDependencies": { "@ant-design/bisheng-plugin": "^3.3.0-alpha.4", "@ant-design/hitu": "^0.0.0-alpha.13", "@ant-design/tools": "^16.1.0-alpha.2", + "@babel/eslint-plugin": "^7.19.1", "@docsearch/css": "^3.0.0", "@emotion/babel-preset-css-prop": "^11.10.0", "@emotion/css": "^11.10.5", @@ -216,7 +217,6 @@ "eslint-config-airbnb": "^19.0.0", "eslint-config-prettier": "^8.0.0", "eslint-import-resolver-typescript": "^3.5.2", - "eslint-plugin-babel": "^5.3.0", "eslint-plugin-compat": "^4.0.0", "eslint-plugin-import": "^2.21.1", "eslint-plugin-jest": "^27.0.1",