mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
commit
a8bc13e77b
@ -1,9 +1,10 @@
|
||||
/* eslint import/no-unresolved: 0 */
|
||||
import { RightOutlined } from '@ant-design/icons';
|
||||
import { css } from '@emotion/react';
|
||||
import { ConfigProvider, Table } from 'antd';
|
||||
import { getDesignToken } from 'antd-token-previewer';
|
||||
import tokenMeta from 'antd/es/version/token-meta.json';
|
||||
import tokenData from 'antd/es/version/token.json';
|
||||
import React from 'react';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
import { useColumns } from '../TokenTable';
|
||||
@ -25,17 +26,39 @@ const locales = {
|
||||
},
|
||||
};
|
||||
|
||||
const useStyle = () => ({
|
||||
tableTitle: css`
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
line-height: 40px;
|
||||
`,
|
||||
arrowIcon: css`
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
& svg {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
`,
|
||||
});
|
||||
|
||||
interface SubTokenTableProps {
|
||||
defaultOpen?: boolean;
|
||||
title: string;
|
||||
tokens: string[];
|
||||
}
|
||||
|
||||
function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
|
||||
const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title }) => {
|
||||
const [, lang] = useLocale(locales);
|
||||
const { token } = useSiteToken();
|
||||
const columns = useColumns();
|
||||
|
||||
const [open, setOpen] = useState<boolean>(defaultOpen || process.env.NODE_ENV !== 'production');
|
||||
|
||||
const { tableTitle, arrowIcon } = useStyle();
|
||||
|
||||
if (!tokens.length) {
|
||||
return null;
|
||||
}
|
||||
@ -66,44 +89,40 @@ function SubTokenTable({ defaultOpen, tokens, title }: SubTokenTableProps) {
|
||||
name,
|
||||
desc: lang === 'cn' ? meta.desc : meta.descEn,
|
||||
type: meta.type,
|
||||
value: (defaultToken as any)[name],
|
||||
value: defaultToken[name],
|
||||
};
|
||||
})
|
||||
.filter((info) => info);
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
// Reuse `.markdown` style
|
||||
<details className="markdown" open={defaultOpen || process.env.NODE_ENV !== 'production'}>
|
||||
<summary>
|
||||
<h3 style={{ display: 'inline' }}>{title}</h3>
|
||||
</summary>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
size="middle"
|
||||
columns={columns}
|
||||
bordered
|
||||
dataSource={data}
|
||||
style={{ marginBottom: token.margin }}
|
||||
pagination={false}
|
||||
rowKey={(record) => record.name}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</details>
|
||||
<div>
|
||||
<div css={tableTitle} onClick={() => setOpen(!open)}>
|
||||
<RightOutlined css={arrowIcon} rotate={open ? 90 : 0} />
|
||||
<h3>{title}</h3>
|
||||
</div>
|
||||
{open && (
|
||||
<ConfigProvider theme={{ token: { borderRadius: 0 } }}>
|
||||
<Table
|
||||
size="middle"
|
||||
columns={columns}
|
||||
bordered
|
||||
dataSource={data}
|
||||
style={{ marginBottom: token.margin }}
|
||||
pagination={false}
|
||||
rowKey={(record) => record.name}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export interface ComponentTokenTableProps {
|
||||
component: string;
|
||||
}
|
||||
|
||||
function ComponentTokenTable({ component }: ComponentTokenTableProps) {
|
||||
const [mergedGlobalTokens] = React.useMemo(() => {
|
||||
const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component }) => {
|
||||
const [mergedGlobalTokens] = useMemo(() => {
|
||||
const globalTokenSet = new Set<string>();
|
||||
let componentTokens: Record<string, string> = {};
|
||||
|
||||
@ -121,16 +140,10 @@ function ComponentTokenTable({ component }: ComponentTokenTableProps) {
|
||||
};
|
||||
});
|
||||
|
||||
return [Array.from(globalTokenSet), componentTokens];
|
||||
return [Array.from(globalTokenSet), componentTokens] as const;
|
||||
}, [component]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Component Token 先不展示 */}
|
||||
{/* <SubTokenTable title="Component Token" tokens={mergedComponentTokens} defaultOpen /> */}
|
||||
<SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />;
|
||||
};
|
||||
|
||||
export default React.memo(ComponentTokenTable);
|
||||
|
13
.github/workflows/pr-stat.yml
vendored
Normal file
13
.github/workflows/pr-stat.yml
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
name: Pull Request Stats
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened]
|
||||
|
||||
jobs:
|
||||
stats:
|
||||
if: github.repository == 'ant-design/ant-design'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Run pull request stats
|
||||
uses: flowwer-dev/pull-request-stats@master
|
@ -224,6 +224,7 @@ const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
// ============================== Basic ==============================
|
||||
const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const {
|
||||
antCls,
|
||||
componentCls,
|
||||
cardShadow,
|
||||
cardHeadPadding,
|
||||
@ -268,7 +269,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
img: {
|
||||
[`img, img + ${antCls}-image-mask`]: {
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
},
|
||||
},
|
||||
|
@ -406,24 +406,50 @@ exports[`renders components/checkbox/demo/debug-line.tsx extend context correctl
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
<div>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Aligned
|
||||
</span>
|
||||
</label>
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Aligned
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
style="font-size: 32px;"
|
||||
>
|
||||
Aligned
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
@ -383,24 +383,50 @@ exports[`renders components/checkbox/demo/debug-line.tsx correctly 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
<div>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Aligned
|
||||
</span>
|
||||
</label>
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Aligned
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
style="font-size:32px"
|
||||
>
|
||||
Aligned
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
@ -44,15 +44,23 @@ const App: React.FC = () => (
|
||||
<Radio value="little">Little</Radio>
|
||||
</div>
|
||||
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
controlHeight: 48,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Checkbox>Aligned</Checkbox>
|
||||
</ConfigProvider>
|
||||
<div>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
controlHeight: 48,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Checkbox>Aligned</Checkbox>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Checkbox>
|
||||
<span style={{ fontSize: 32 }}>Aligned</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
@ -83,13 +83,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
|
||||
lineHeight: 1,
|
||||
cursor: 'pointer',
|
||||
|
||||
alignSelf: 'start',
|
||||
// https://github.com/ant-design/ant-design/issues/41564
|
||||
// Since `checkboxSize` is dynamic which should align with the text box,
|
||||
// We need do calculation here for offset.
|
||||
transform: `translate(0, ${
|
||||
(token.lineHeight * token.fontSize) / 2 - token.checkboxSize / 2
|
||||
}px)`,
|
||||
// To make alignment right when `controlHeight` is changed
|
||||
// Ref: https://github.com/ant-design/ant-design/issues/41564
|
||||
alignSelf: 'center',
|
||||
|
||||
// Wrapper > Checkbox > input
|
||||
[`${checkboxCls}-input`]: {
|
||||
|
@ -4737,3 +4737,385 @@ Array [
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/trigger-event.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-popover-content"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-inner-content"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-inner-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-select"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-saturation"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider-container"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider-group"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-hue"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-slider ant-color-picker-slider-alpha"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-palette"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; z-index: 1;"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-handler ant-color-picker-handler-sm"
|
||||
style="background-color: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-gradient"
|
||||
style="position: absolute; inset: 0;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background: rgb(22, 119, 255);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input-container"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="HEX"
|
||||
aria-selected="true"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
hex
|
||||
</div>
|
||||
<div
|
||||
aria-label="HSB"
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
hsb
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height: 256px; overflow-y: auto;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
|
||||
title="HEX"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HEX
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="HSB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
HSB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="RGB"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
RGB
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-color-picker-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
#
|
||||
</span>
|
||||
<input
|
||||
class="ant-input ant-input-sm"
|
||||
type="text"
|
||||
value="1677FF"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="100"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
@ -265,3 +265,18 @@ exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/color-picker/demo/trigger-event.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-color-picker-trigger"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block"
|
||||
>
|
||||
<div
|
||||
class="ant-color-picker-color-block-inner"
|
||||
style="background:rgb(22, 119, 255)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
7
components/color-picker/demo/trigger-event.md
Normal file
7
components/color-picker/demo/trigger-event.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
自定义颜色面板的触发事件,提供 `click` 和 `hover` 两个选项。
|
||||
|
||||
## en-US
|
||||
|
||||
Triggers event for customizing color panels.
|
6
components/color-picker/demo/trigger-event.tsx
Normal file
6
components/color-picker/demo/trigger-event.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import { ColorPicker } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const Demo = () => <ColorPicker trigger="hover" />;
|
||||
|
||||
export default Demo;
|
@ -24,6 +24,7 @@ Used when the user needs to customize the color selection.
|
||||
<code src="./demo/disabled.tsx" debug>Disable</code>
|
||||
<code src="./demo/allowClear.tsx">Clear Color</code>
|
||||
<code src="./demo/trigger.tsx">Custom Trigger</code>
|
||||
<code src="./demo/trigger-event.tsx">Custom Trigger Event</code>
|
||||
<code src="./demo/format.tsx">Color Format</code>
|
||||
<code src="./demo/presets.tsx">Preset Colors</code>
|
||||
<code src="./demo/pure-panel.tsx" debug>Pure Render</code>
|
||||
|
@ -25,6 +25,7 @@ group:
|
||||
<code src="./demo/disabled.tsx" debug>禁用</code>
|
||||
<code src="./demo/allowClear.tsx">清除颜色</code>
|
||||
<code src="./demo/trigger.tsx">自定义触发器</code>
|
||||
<code src="./demo/trigger-event.tsx">自定义触发事件</code>
|
||||
<code src="./demo/format.tsx">颜色编码</code>
|
||||
<code src="./demo/presets.tsx">预设颜色</code>
|
||||
<code src="./demo/pure-panel.tsx" debug>Pure Render</code>
|
||||
|
@ -1,13 +1,13 @@
|
||||
import { createTheme } from '@ant-design/cssinjs';
|
||||
import IconContext from '@ant-design/icons/lib/components/Context';
|
||||
import { FormProvider as RcFormProvider } from 'rc-field-form';
|
||||
import type { ValidateMessages } from 'rc-field-form/lib/interface';
|
||||
import { setValues } from 'rc-field-form/lib/utils/valueUtil';
|
||||
import useMemo from 'rc-util/lib/hooks/useMemo';
|
||||
import { merge } from 'rc-util/lib/utils/set';
|
||||
import type { ReactElement } from 'react';
|
||||
import * as React from 'react';
|
||||
import type { Options } from 'scroll-into-view-if-needed';
|
||||
import warning from '../_util/warning';
|
||||
import { ValidateMessagesContext } from '../form/context';
|
||||
import type { RequiredMark } from '../form/Form';
|
||||
import type { Locale } from '../locale';
|
||||
import LocaleProvider, { ANT_MARK } from '../locale';
|
||||
@ -311,8 +311,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
|
||||
|
||||
const validateMessages = React.useMemo(
|
||||
() =>
|
||||
setValues(
|
||||
{},
|
||||
merge(
|
||||
defaultLocale.Form?.defaultValidateMessages || {},
|
||||
memoedConfig.locale?.Form?.defaultValidateMessages || {},
|
||||
form?.validateMessages || {},
|
||||
@ -321,7 +320,11 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
|
||||
);
|
||||
|
||||
if (Object.keys(validateMessages).length > 0) {
|
||||
childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
|
||||
childNode = (
|
||||
<ValidateMessagesContext.Provider value={validateMessages}>
|
||||
{children}
|
||||
</ValidateMessagesContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
if (locale) {
|
||||
|
@ -12,6 +12,7 @@ const locale: PickerLocale = {
|
||||
weekPlaceholder: 'Pasirinkite savaitę',
|
||||
rangePlaceholder: ['Pradžios data', 'Pabaigos data'],
|
||||
rangeYearPlaceholder: ['Pradžios metai', 'Pabaigos metai'],
|
||||
rangeQuarterPlaceholder: ['Pradžios ketvirtis', 'Pabaigos ketvirtis'],
|
||||
rangeMonthPlaceholder: ['Pradžios mėnesis', 'Pabaigos mėnesis'],
|
||||
rangeWeekPlaceholder: ['Pradžios savaitė', 'Pabaigos savaitė'],
|
||||
...CalendarLocale,
|
||||
|
@ -12,7 +12,7 @@ import { SizeContextProvider } from '../config-provider/SizeContext';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import type { ColProps } from '../grid/col';
|
||||
import type { FormContextProps } from './context';
|
||||
import { FormContext } from './context';
|
||||
import { FormContext, FormProvider, ValidateMessagesContext } from './context';
|
||||
import useForm, { type FormInstance } from './hooks/useForm';
|
||||
import useFormWarning from './hooks/useFormWarning';
|
||||
import type { FormLabelAlign } from './interface';
|
||||
@ -67,6 +67,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
|
||||
|
||||
const mergedSize = useSize(size);
|
||||
|
||||
const contextValidateMessages = React.useContext(ValidateMessagesContext);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
useFormWarning(props);
|
||||
@ -158,16 +160,23 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
|
||||
return wrapSSR(
|
||||
<DisabledContextProvider disabled={disabled}>
|
||||
<SizeContextProvider size={mergedSize}>
|
||||
<FormContext.Provider value={formContextValue}>
|
||||
<FieldForm
|
||||
id={name}
|
||||
{...restFormProps}
|
||||
name={name}
|
||||
onFinishFailed={onInternalFinishFailed}
|
||||
form={wrapForm}
|
||||
className={formClassName}
|
||||
/>
|
||||
</FormContext.Provider>
|
||||
<FormProvider
|
||||
{...{
|
||||
// This is not list in API, we pass with spread
|
||||
validateMessages: contextValidateMessages,
|
||||
}}
|
||||
>
|
||||
<FormContext.Provider value={formContextValue}>
|
||||
<FieldForm
|
||||
id={name}
|
||||
{...restFormProps}
|
||||
name={name}
|
||||
onFinishFailed={onInternalFinishFailed}
|
||||
form={wrapForm}
|
||||
className={formClassName}
|
||||
/>
|
||||
</FormContext.Provider>
|
||||
</FormProvider>
|
||||
</SizeContextProvider>
|
||||
</DisabledContextProvider>,
|
||||
);
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { FormProvider as RcFormProvider } from 'rc-field-form';
|
||||
import type { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext';
|
||||
import type { Meta } from 'rc-field-form/lib/interface';
|
||||
import type { Meta, ValidateMessages } from 'rc-field-form/lib/interface';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import type { FC, PropsWithChildren, ReactNode } from 'react';
|
||||
import * as React from 'react';
|
||||
@ -92,3 +92,5 @@ export const NoFormStyle: FC<NoFormStyleProps> = ({ children, status, override }
|
||||
</FormItemInputContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const ValidateMessagesContext = React.createContext<ValidateMessages | undefined>(undefined);
|
||||
|
@ -1,9 +1,8 @@
|
||||
/* eslint-disable no-template-curly-in-string */
|
||||
|
||||
import Pagination from 'rc-pagination/lib/locale/lt_LT';
|
||||
import type { Locale } from '.';
|
||||
import Calendar from '../calendar/locale/lt_LT';
|
||||
import DatePicker from '../date-picker/locale/lt_LT';
|
||||
import type { Locale } from '.';
|
||||
import TimePicker from '../time-picker/locale/lt_LT';
|
||||
|
||||
const typeTemplate: string = '${label} neatitinka tipo ${type}';
|
||||
@ -14,14 +13,20 @@ const localeValues: Locale = {
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
global: {
|
||||
placeholder: 'Pasirinkite',
|
||||
},
|
||||
Table: {
|
||||
filterTitle: 'Filtras',
|
||||
filterConfirm: 'Gerai',
|
||||
filterReset: 'Atstatyti',
|
||||
filterEmptyText: 'Be filtrų',
|
||||
filterCheckall: 'Pasirinkti visus',
|
||||
filterSearchPlaceholder: 'Ieškoti filtruose',
|
||||
emptyText: 'Nėra duomenų',
|
||||
selectAll: 'Pasirinkti viską',
|
||||
selectInvert: 'Apversti pasirinkimą',
|
||||
selectNone: 'Išvalyti visus',
|
||||
selectionAll: 'Rinktis visus',
|
||||
sortTitle: 'Rikiavimas',
|
||||
expand: 'Išskleisti',
|
||||
@ -30,6 +35,11 @@ const localeValues: Locale = {
|
||||
triggerAsc: 'Spustelėkite norėdami rūšiuoti didėjančia tvarka',
|
||||
cancelSort: 'Spustelėkite, kad atšauktumėte rūšiavimą',
|
||||
},
|
||||
Tour: {
|
||||
Next: 'Kitas',
|
||||
Previous: 'Ankstesnis',
|
||||
Finish: 'Baigti',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'Taip',
|
||||
cancelText: 'Atšaukti',
|
||||
@ -45,18 +55,18 @@ const localeValues: Locale = {
|
||||
itemUnit: 'vnt.',
|
||||
itemsUnit: 'vnt.',
|
||||
remove: 'Pašalinti',
|
||||
selectAll: 'Pasirinkti visus',
|
||||
selectCurrent: 'Pasirinkite dabartinį puslapį',
|
||||
selectInvert: 'Atkeist pasirinkimą',
|
||||
removeAll: 'Ištrinti visus duomenis',
|
||||
selectCurrent: 'Pasirinkti dabartinį puslapį',
|
||||
removeCurrent: 'Ištrinti dabartinį puslapį',
|
||||
selectAll: 'Pasirinkti viską',
|
||||
removeAll: 'Ištrinti viską',
|
||||
selectInvert: 'Apversti pasirinkimą',
|
||||
},
|
||||
Upload: {
|
||||
uploading: 'Gaunami duomenys...',
|
||||
uploading: 'Įkeliami duomenys...',
|
||||
removeFile: 'Ištrinti failą',
|
||||
uploadError: 'Įkeliant įvyko klaida',
|
||||
previewFile: 'Failo peržiūra',
|
||||
downloadFile: 'Įkelti failą',
|
||||
downloadFile: 'Atsisiųsti failą',
|
||||
},
|
||||
Empty: {
|
||||
description: 'Nėra duomenų',
|
||||
@ -74,11 +84,12 @@ const localeValues: Locale = {
|
||||
back: 'Atgal',
|
||||
},
|
||||
Form: {
|
||||
optional: '(neprivaloma)',
|
||||
defaultValidateMessages: {
|
||||
default: 'Laukelio klaida ${label}',
|
||||
default: 'Klaida laukelyje ${label}',
|
||||
required: 'Prašome įvesti ${label}',
|
||||
enum: '${label} turėtu būti vienas iš [${enum}]',
|
||||
whitespace: '${label} negali likti tuščiu',
|
||||
enum: '${label} turi būti vienas iš [${enum}]',
|
||||
whitespace: '${label} negali likti tuščias',
|
||||
date: {
|
||||
format: '${label} neteisingas datos formatas',
|
||||
parse: '${label} negali būti konvertuotas į datą',
|
||||
@ -101,26 +112,37 @@ const localeValues: Locale = {
|
||||
},
|
||||
string: {
|
||||
len: '${label} turi būti ${len} simbolių',
|
||||
min: '${label} turi būti ilgesnis nei ${min} simbolių',
|
||||
max: '${label} turi būti ne trumpesnis ${max} simbolių',
|
||||
range: 'Lauko ${label} reikšmės ribos ${min}-${max} simbolių',
|
||||
min: '${label} turi būti bent ${min} simbolių',
|
||||
max: '${label} turi būti ne ilgesnis nei ${max} simbolių',
|
||||
range: 'Laukelio ${label} reikšmės ribos ${min}-${max} simbolių',
|
||||
},
|
||||
number: {
|
||||
len: '${label} turi būti lygi ${len}',
|
||||
min: '${label} turi būti lygus arba didesnis ${min}',
|
||||
max: '${label} turi būti lygus arba mažesnis ${max}',
|
||||
min: '${label} turi būti lygus arba didesnis už ${min}',
|
||||
max: '${label} turi būti lygus arba mažesnis už ${max}',
|
||||
range: '${label} turi būti tarp ${min}-${max}',
|
||||
},
|
||||
array: {
|
||||
len: 'Pasirinktas kiekis ${label} turi būti lygus ${len}',
|
||||
min: 'Pasirinktas kiekis ${label} turi būti lygus arba didesnis ${min}',
|
||||
max: 'Pasirinktas kiekis ${label} turi būti lygus arba mažesnis ${max}',
|
||||
range: 'Pasirinktas kiekis ${label} turi būti tarp ${min} и ${max}',
|
||||
min: 'Pasirinktas kiekis ${label} turi būti bent ${min}',
|
||||
max: 'Pasirinktas kiekis ${label} turi būti ne ilgesnis nei ${max}',
|
||||
range: 'Pasirinktas ${label} kiekis turi būti tarp ${min}-${max}',
|
||||
},
|
||||
pattern: {
|
||||
mismatch: '${label} neatitinka modelio ${pattern}',
|
||||
},
|
||||
},
|
||||
},
|
||||
Image: {
|
||||
preview: 'Peržiūrėti',
|
||||
},
|
||||
QRCode: {
|
||||
expired: 'QR kodo galiojimas baigėsi',
|
||||
refresh: 'Atnaujinti',
|
||||
},
|
||||
ColorPicker: {
|
||||
presetEmpty: 'Tuščia',
|
||||
},
|
||||
};
|
||||
|
||||
export default localeValues;
|
||||
|
@ -829,4 +829,20 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
expect(document.querySelector(`.ant-modal-content`)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it('warning getContainer be false', async () => {
|
||||
resetWarned();
|
||||
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
Modal.confirm({
|
||||
getContainer: false,
|
||||
});
|
||||
|
||||
await waitFakeTimer();
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Modal] Static method not support `getContainer` to be `false` since it do not have context env.',
|
||||
);
|
||||
|
||||
warnSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
@ -50,7 +50,13 @@ export default function confirm(config: ModalFuncProps) {
|
||||
reactUnmount(container);
|
||||
}
|
||||
|
||||
function render({ okText, cancelText, prefixCls: customizePrefixCls, ...props }: any) {
|
||||
function render({
|
||||
okText,
|
||||
cancelText,
|
||||
prefixCls: customizePrefixCls,
|
||||
getContainer,
|
||||
...props
|
||||
}: any) {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
/**
|
||||
@ -67,9 +73,23 @@ export default function confirm(config: ModalFuncProps) {
|
||||
const iconPrefixCls = getIconPrefixCls();
|
||||
const theme = getTheme();
|
||||
|
||||
let mergedGetContainer = getContainer;
|
||||
if (mergedGetContainer === false) {
|
||||
mergedGetContainer = undefined;
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
false,
|
||||
'Modal',
|
||||
'Static method not support `getContainer` to be `false` since it do not have context env.',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
reactRender(
|
||||
<ConfirmDialog
|
||||
{...props}
|
||||
getContainer={mergedGetContainer}
|
||||
prefixCls={prefixCls}
|
||||
rootPrefixCls={rootPrefixCls}
|
||||
iconPrefixCls={iconPrefixCls}
|
||||
|
@ -72,6 +72,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
width: 0,
|
||||
margin: `${FIXED_ITEM_MARGIN}px 0`,
|
||||
lineHeight: `${selectItemHeight}px`,
|
||||
visibility: 'hidden',
|
||||
content: '"\\a0"',
|
||||
},
|
||||
},
|
||||
|
@ -316,6 +316,46 @@ Array [
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap: wrap; margin-bottom: -8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-processing ant-tag-borderless"
|
||||
>
|
||||
processing
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-success ant-tag-borderless"
|
||||
>
|
||||
success
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-error ant-tag-borderless"
|
||||
>
|
||||
error
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-warning ant-tag-borderless"
|
||||
>
|
||||
warning
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
|
@ -316,6 +316,46 @@ Array [
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-processing ant-tag-borderless"
|
||||
>
|
||||
processing
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-success ant-tag-borderless"
|
||||
>
|
||||
success
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-error ant-tag-borderless"
|
||||
>
|
||||
error
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-warning ant-tag-borderless"
|
||||
>
|
||||
warning
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
|
@ -15,6 +15,18 @@ const App: React.FC = () => (
|
||||
</Space>
|
||||
<Divider />
|
||||
<Space size={[0, 'small']} wrap>
|
||||
<Tag bordered={false} color="processing">
|
||||
processing
|
||||
</Tag>
|
||||
<Tag bordered={false} color="success">
|
||||
success
|
||||
</Tag>
|
||||
<Tag bordered={false} color="error">
|
||||
error
|
||||
</Tag>
|
||||
<Tag bordered={false} color="warning">
|
||||
warning
|
||||
</Tag>
|
||||
<Tag bordered={false} color="magenta">
|
||||
magenta
|
||||
</Tag>
|
||||
|
@ -33,6 +33,9 @@ const genTagStatusStyle = (
|
||||
color: token[`color${cssVariableType}`],
|
||||
background: token[`color${capitalizedCssVariableType}Bg`],
|
||||
borderColor: token[`color${capitalizedCssVariableType}Border`],
|
||||
[`&${token.componentCls}-borderless`]: {
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
@ -1,10 +1,10 @@
|
||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { genCollapseMotion } from '../../style/motion';
|
||||
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
|
||||
import { genFocusOutline, resetComponent } from '../../style';
|
||||
import { genCollapseMotion } from '../../style/motion';
|
||||
import type { DerivativeToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { genFocusOutline, resetComponent } from '../../style';
|
||||
|
||||
// ============================ Keyframes =============================
|
||||
const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
|
||||
@ -63,16 +63,7 @@ type TreeToken = DerivativeToken & {
|
||||
};
|
||||
|
||||
export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
|
||||
const {
|
||||
treeCls,
|
||||
treeNodeCls,
|
||||
controlInteractiveSize: checkboxSize,
|
||||
treeNodePadding,
|
||||
treeTitleHeight,
|
||||
} = token;
|
||||
// Ref: https://github.com/ant-design/ant-design/issues/41564
|
||||
const checkBoxOffset = (token.lineHeight * token.fontSize) / 2 - checkboxSize / 2;
|
||||
const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2 - checkBoxOffset;
|
||||
const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token;
|
||||
const treeCheckBoxMarginHorizontal = token.paddingXS;
|
||||
|
||||
return {
|
||||
@ -269,7 +260,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
|
||||
[`${treeCls}-checkbox`]: {
|
||||
top: 'initial',
|
||||
marginInlineEnd: treeCheckBoxMarginHorizontal,
|
||||
marginBlockStart: treeCheckBoxMarginVertical,
|
||||
},
|
||||
|
||||
// >>> Title
|
||||
|
@ -62,6 +62,12 @@ Since antd's components are based on react-component, sometimes you may need to
|
||||
|
||||
## Development Workflow
|
||||
|
||||
Before you can start you must run the following command to enable [corepack](https://nodejs.org/api/corepack.html)。
|
||||
|
||||
```bash
|
||||
corepack enable
|
||||
```
|
||||
|
||||
After cloning antd, run `npm install` to fetch its dependencies. Then, you can run several commands:
|
||||
|
||||
1. `npm start` runs Ant Design website locally.
|
||||
|
@ -62,6 +62,12 @@ Ant Design 团队会关注所有的 pull request,我们会 review 以及合并
|
||||
|
||||
## 开发流程
|
||||
|
||||
在开始之前,请先执行下面的命令启用 [corepack](https://nodejs.org/api/corepack.html)。
|
||||
|
||||
```bash
|
||||
corepack enable
|
||||
```
|
||||
|
||||
在你 clone 了 antd 的代码并且使用 `npm install` 安装完依赖后,你还可以运行下面几个常用的命令:
|
||||
|
||||
1. `npm start` 在本地运行 Ant Design 的网站。
|
||||
|
@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.5.1",
|
||||
"packageManager": "^npm@9.0.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
@ -127,7 +128,7 @@
|
||||
"rc-dialog": "~9.1.0",
|
||||
"rc-drawer": "~6.1.1",
|
||||
"rc-dropdown": "~4.1.0",
|
||||
"rc-field-form": "~1.31.0",
|
||||
"rc-field-form": "~1.32.0",
|
||||
"rc-image": "~5.16.0",
|
||||
"rc-input": "~1.0.4",
|
||||
"rc-input-number": "~7.4.0",
|
||||
@ -152,7 +153,7 @@
|
||||
"rc-tree": "~5.7.4",
|
||||
"rc-tree-select": "~5.9.0",
|
||||
"rc-upload": "~4.3.0",
|
||||
"rc-util": "^5.27.0",
|
||||
"rc-util": "^5.32.0",
|
||||
"scroll-into-view-if-needed": "^3.0.3",
|
||||
"throttle-debounce": "^5.0.0"
|
||||
},
|
||||
@ -244,7 +245,7 @@
|
||||
"jest-environment-jsdom": "^29.0.1",
|
||||
"jest-environment-node": "^29.0.0",
|
||||
"jest-image-snapshot": "^6.0.0",
|
||||
"jest-puppeteer": "^8.0.4",
|
||||
"jest-puppeteer": "^9.0.0",
|
||||
"jquery": "^3.4.1",
|
||||
"jsdom": "^22.0.0",
|
||||
"jsonml-to-react-element": "^1.1.11",
|
||||
|
Loading…
Reference in New Issue
Block a user