mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Merge pull request #46050 from ant-design/master-merge-feature
chore: merge master into feature
This commit is contained in:
MadCcc
GitHub
commit
afbea251c3
@ -8,8 +8,6 @@ jobs:
|
||||
test-argos-ci:
|
||||
docker:
|
||||
- image: cimg/node:21.2-browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --openssl-legacy-provider
|
||||
steps:
|
||||
- checkout
|
||||
- run:
|
||||
|
||||
@ -111,6 +111,8 @@
|
||||
"app.footer.seeconf": "Experience Tech Conference",
|
||||
"app.footer.xtech": "Ant Financial Experience Tech",
|
||||
"app.footer.xtech.slogan": "Experience The Beauty",
|
||||
"app.footer.galacean": "Galacean",
|
||||
"app.footer.galacean.slogan": "Interactive Graphics Solution",
|
||||
"app.docs.color.pick-primary": "Pick your primary color",
|
||||
"app.docs.color.pick-background": "Pick your background color",
|
||||
"app.docs.components.icon.search.placeholder": "Search icons here, click icon to copy code",
|
||||
|
||||
@ -110,6 +110,8 @@
|
||||
"app.footer.seeconf": "蚂蚁体验科技大会",
|
||||
"app.footer.xtech": "蚂蚁体验科技",
|
||||
"app.footer.xtech.slogan": "让用户体验美好",
|
||||
"app.footer.galacean": "Galacean",
|
||||
"app.footer.galacean.slogan": "互动图形解决方案",
|
||||
"app.docs.color.pick-primary": "选择你的主色",
|
||||
"app.docs.color.pick-background": "选择你的背景色",
|
||||
"app.docs.components.icon.search.placeholder": "在此搜索图标，点击图标可复制代码",
|
||||
|
||||
@ -363,6 +363,20 @@ const Footer: React.FC = () => {
|
||||
url: 'https://kitchen.alipay.com',
|
||||
openExternal: true,
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<img
|
||||
src="https://mdn.alipayobjects.com/huamei_j9rjmc/afts/img/A*3ittT5OEo2gAAAAAAAAAAAAADvGmAQ/original"
|
||||
width={16}
|
||||
height={16}
|
||||
alt="Galacean"
|
||||
/>
|
||||
),
|
||||
title: <FormattedMessage id="app.footer.galacean" />,
|
||||
description: <FormattedMessage id="app.footer.galacean.slogan" />,
|
||||
url: 'https://galacean.antgroup.com/',
|
||||
openExternal: true,
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<img
|
||||
|
||||
@ -25,10 +25,10 @@ const RESPONSIVE_SM = 1200;
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
message: '第十八届 D2 终端技术大会火热来袭，以技术会友，一起分享技术的乐趣。',
|
||||
shortMessage: '第十八届 D2 终端技术大会火热来袭！',
|
||||
more: '点击报名',
|
||||
link: 'https://d2.alibabatech.com/',
|
||||
message: 'Galacean Effects · 所见即所得的动效新方案。',
|
||||
shortMessage: 'Galacean Effects · 所见即所得的动效新方案。',
|
||||
more: '前往了解',
|
||||
link: 'https://galacean.antgroup.com/effects/',
|
||||
},
|
||||
en: {
|
||||
message: '',
|
||||
|
||||
2
.github/workflows/preview-build.yml
vendored
2
.github/workflows/preview-build.yml
vendored
@ -74,7 +74,7 @@ jobs:
|
||||
run: npm run site
|
||||
env:
|
||||
SITE_ENV: development
|
||||
NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
|
||||
- name: upload site artifact
|
||||
uses: actions/upload-artifact@v3
|
||||
|
||||
4
.github/workflows/release-tweet.yml
vendored
4
.github/workflows/release-tweet.yml
vendored
@ -8,14 +8,14 @@ permissions:
|
||||
|
||||
jobs:
|
||||
tweet:
|
||||
if: github.event.ref_type == 'tag'
|
||||
if: ${{ github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha') }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Tweet
|
||||
uses: nearform-actions/github-action-notify-twitter@v1
|
||||
with:
|
||||
message: |
|
||||
Ant Design (antd@${{ github.event.release.tag_name }}) has been released ~ 🎊🎊🎊 Check out the release notes: ${{ github.event.release.html_url }}
|
||||
🤖 Ant Design just released antd@${{ github.event.ref }} ✨🎊✨ Check out the full release note: https://github.com/ant-design/ant-design/releases/tag/${{ github.event.ref }}
|
||||
twitter-app-key: ${{ secrets.TWITTER_API_KEY }}
|
||||
twitter-app-secret: ${{ secrets.TWITTER_API_SECRET_KEY }}
|
||||
twitter-access-token: ${{ secrets.TWITTER_ACCESS_TOKEN }}
|
||||
|
||||
4
.github/workflows/site-deploy.yml
vendored
4
.github/workflows/site-deploy.yml
vendored
@ -70,13 +70,13 @@ jobs:
|
||||
- name: build site
|
||||
run: npm run predeploy
|
||||
env:
|
||||
NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
|
||||
- name: build dist and bundle analyzer report
|
||||
run: npm run dist
|
||||
env:
|
||||
ANALYZER: 1
|
||||
NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
|
||||
- name: Get version
|
||||
id: publish-version
|
||||
|
||||
2
.github/workflows/size-limit.yml
vendored
2
.github/workflows/size-limit.yml
vendored
@ -63,5 +63,5 @@ jobs:
|
||||
build_script: dist
|
||||
skip_step: install
|
||||
env:
|
||||
NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
PRODUCTION_ONLY: 1
|
||||
|
||||
2
.github/workflows/test.yml
vendored
2
.github/workflows/test.yml
vendored
@ -131,7 +131,7 @@ jobs:
|
||||
- name: dist
|
||||
run: npm run dist
|
||||
env:
|
||||
NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
CI: 1
|
||||
needs: setup
|
||||
|
||||
|
||||
@ -48,20 +48,24 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
|
||||
tabProps?: TabsProps;
|
||||
}
|
||||
|
||||
function getAction(actions: React.ReactNode[]): React.ReactNode[] {
|
||||
return actions.map<React.ReactNode>((action, index) => {
|
||||
// Move this out since eslint not allow index key
|
||||
// And eslint-disable makes conflict with rollup
|
||||
// ref https://github.com/ant-design/ant-design/issues/46022
|
||||
const key = `action-${index}`;
|
||||
|
||||
return (
|
||||
<li style={{ width: `${100 / actions.length}%` }} key={key}>
|
||||
<span>{action}</span>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
}
|
||||
const ActionNode: React.FC<{ prefixCls: string; actions: React.ReactNode[] }> = (props) => {
|
||||
const { prefixCls, actions = [] } = props;
|
||||
return (
|
||||
<ul className={`${prefixCls}-actions`}>
|
||||
{actions.map<React.ReactNode>((action, index) => {
|
||||
// Move this out since eslint not allow index key
|
||||
// And eslint-disable makes conflict with rollup
|
||||
// ref https://github.com/ant-design/ant-design/issues/46022
|
||||
const key = `action-${index}`;
|
||||
return (
|
||||
<li style={{ width: `${100 / actions.length}%` }} key={key}>
|
||||
<span>{action}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
|
||||
const {
|
||||
@ -153,10 +157,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
|
||||
{loading ? loadingBlock : children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const actionDom =
|
||||
actions && actions.length ? (
|
||||
<ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
|
||||
) : null;
|
||||
actions && actions.length ? <ActionNode prefixCls={prefixCls} actions={actions} /> : null;
|
||||
|
||||
const divProps = omit(others, ['onTabChange']);
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@ export interface AbstractCheckboxProps<T> {
|
||||
autoFocus?: boolean;
|
||||
type?: string;
|
||||
skipGroup?: boolean;
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
export interface CheckboxChangeEventTarget extends CheckboxProps {
|
||||
|
||||
@ -20,6 +20,7 @@ export interface CheckboxOptionType {
|
||||
title?: string;
|
||||
id?: string;
|
||||
onChange?: (e: CheckboxChangeEvent) => void;
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
export interface AbstractCheckboxGroupProps {
|
||||
@ -130,6 +131,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
|
||||
style={option.style}
|
||||
title={option.title}
|
||||
id={option.id}
|
||||
required={option.required}
|
||||
>
|
||||
{option.label}
|
||||
</Checkbox>
|
||||
|
||||
@ -1925,288 +1925,6 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
|
||||
|
||||
exports[`renders components/form/demo/control-hooks.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/control-ref.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="control-ref"
|
||||
style="max-width: 600px;"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-8 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="control-ref_note"
|
||||
title="Note"
|
||||
>
|
||||
Note
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="control-ref_note"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-8 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="control-ref_gender"
|
||||
title="Gender"
|
||||
>
|
||||
Gender
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
aria-required="true"
|
||||
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="control-ref_gender_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="control-ref_gender_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="control-ref_gender"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Select a option and change input text above
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="control-ref_gender_list"
|
||||
role="listbox"
|
||||
style="height: 0px; width: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
aria-label="male"
|
||||
aria-selected="false"
|
||||
id="control-ref_gender_list_0"
|
||||
role="option"
|
||||
>
|
||||
male
|
||||
</div>
|
||||
<div
|
||||
aria-label="female"
|
||||
aria-selected="false"
|
||||
id="control-ref_gender_list_1"
|
||||
role="option"
|
||||
>
|
||||
female
|
||||
</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="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active"
|
||||
title="male"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
male
|
||||
</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="female"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
female
|
||||
</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="other"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
other
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-link"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Fill form
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/control-ref.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/custom-feedback-icons.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
@ -1450,189 +1450,6 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/control-ref.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="control-ref"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-8 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="control-ref_note"
|
||||
title="Note"
|
||||
>
|
||||
Note
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="control-ref_note"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-8 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="control-ref_gender"
|
||||
title="Gender"
|
||||
>
|
||||
Gender
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
aria-required="true"
|
||||
class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="control-ref_gender_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="control-ref_gender_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="control-ref_gender"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Select a option and change input text above
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-link"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Fill form
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
@ -2,16 +2,10 @@
|
||||
|
||||
通过 `Form.useForm` 对表单数据域进行交互。
|
||||
|
||||
> 注意 `useForm` 是 [React Hooks](https://reactjs.org/docs/hooks-intro.html) 的实现，只能用于函数组件，class 组件请查看下面的例子。
|
||||
> 注意 `useForm` 是 [React Hooks](https://reactjs.org/docs/hooks-intro.html) 的实现，只能用于函数组件。如果是在 Class Component 下，你也可以通过 `ref` 获取数据域：https://codesandbox.io/p/sandbox/ngtjtm
|
||||
|
||||
## en-US
|
||||
|
||||
Call form method with `Form.useForm`.
|
||||
|
||||
> Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component.
|
||||
|
||||
```css
|
||||
#components-form-demo-control-hooks .ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
```
|
||||
> Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component. You can also use `ref` to get the form instance in class component: https://codesandbox.io/p/sandbox-ngtjtm
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
我们推荐使用 `Form.useForm` 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 `ref` 获取数据域。
|
||||
|
||||
## en-US
|
||||
|
||||
We recommend use `Form.useForm` to create data control. If you are using class component, you can get it by `ref`.
|
||||
|
||||
```css
|
||||
#components-form-demo-control-ref .ant-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
```
|
||||
@ -1,96 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Form, Input, Select } from 'antd';
|
||||
import type { FormInstance } from 'antd/es/form';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
};
|
||||
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 8, span: 16 },
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const formRef = React.useRef<FormInstance>(null);
|
||||
|
||||
const onGenderChange = (value: string) => {
|
||||
switch (value) {
|
||||
case 'male':
|
||||
formRef.current?.setFieldsValue({ note: 'Hi, man!' });
|
||||
break;
|
||||
case 'female':
|
||||
formRef.current?.setFieldsValue({ note: 'Hi, lady!' });
|
||||
break;
|
||||
case 'other':
|
||||
formRef.current?.setFieldsValue({ note: 'Hi there!' });
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
formRef.current?.resetFields();
|
||||
};
|
||||
|
||||
const onFill = () => {
|
||||
formRef.current?.setFieldsValue({ note: 'Hello world!', gender: 'male' });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
{...layout}
|
||||
ref={formRef}
|
||||
name="control-ref"
|
||||
onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}
|
||||
>
|
||||
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
|
||||
<Select
|
||||
placeholder="Select a option and change input text above"
|
||||
onChange={onGenderChange}
|
||||
allowClear
|
||||
>
|
||||
<Option value="male">male</Option>
|
||||
<Option value="female">female</Option>
|
||||
<Option value="other">other</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('gender') === 'other' ? (
|
||||
<Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
) : null
|
||||
}
|
||||
</Form.Item>
|
||||
<Form.Item {...tailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
<Button htmlType="button" onClick={onReset}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="link" htmlType="button" onClick={onFill}>
|
||||
Fill form
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -18,7 +18,6 @@ High performance Form component with data scope management. Including data colle
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">Basic Usage</code>
|
||||
<code src="./demo/control-hooks.tsx">Form methods</code>
|
||||
<code src="./demo/control-ref.tsx">Form methods (Class component)</code>
|
||||
<code src="./demo/layout.tsx">Form Layout</code>
|
||||
<code src="./demo/disabled.tsx">Form disabled</code>
|
||||
<code src="./demo/required-mark.tsx">Required style</code>
|
||||
|
||||
@ -19,7 +19,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/basic.tsx">基本使用</code>
|
||||
<code src="./demo/control-hooks.tsx">表单方法调用</code>
|
||||
<code src="./demo/control-ref.tsx">表单方法调用（Class component）</code>
|
||||
<code src="./demo/layout.tsx">表单布局</code>
|
||||
<code src="./demo/disabled.tsx">表单禁用</code>
|
||||
<code src="./demo/required-mark.tsx">必选样式</code>
|
||||
|
||||
@ -84,6 +84,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
|
||||
title={option.title}
|
||||
style={option.style}
|
||||
id={option.id}
|
||||
required={option.required}
|
||||
>
|
||||
{option.label}
|
||||
</Radio>
|
||||
|
||||
61
package.json
61
package.json
@ -164,7 +164,7 @@
|
||||
"devDependencies": {
|
||||
"@ant-design/compatible": "^5.1.2",
|
||||
"@ant-design/happy-work-theme": "^1.0.0",
|
||||
"@ant-design/tools": "^17.3.2",
|
||||
"@ant-design/tools": "^18.0.0",
|
||||
"@antv/g6": "^4.8.23",
|
||||
"@argos-ci/core": "^1.2.1",
|
||||
"@babel/eslint-plugin": "^7.22.10",
|
||||
@ -177,6 +177,7 @@
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/server": "^11.11.0",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.1.1",
|
||||
"@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
|
||||
"@qixian.cs/github-contributors-list": "^1.1.0",
|
||||
"@size-limit/file": "^11.0.0",
|
||||
"@stackblitz/sdk": "^1.9.0",
|
||||
@ -191,18 +192,18 @@
|
||||
"@types/isomorphic-fetch": "^0.0.39",
|
||||
"@types/jest": "^29.5.10",
|
||||
"@types/jest-axe": "^3.5.8",
|
||||
"@types/jest-environment-puppeteer": "^5.0.0",
|
||||
"@types/jest-image-snapshot": "^6.1.0",
|
||||
"@types/jquery": "^3.5.14",
|
||||
"@types/jsdom": "^21.1.2",
|
||||
"@types/lodash": "^4.14.139",
|
||||
"@types/node": "^20.0.0",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"@types/progress": "^2.0.5",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@types/react": "^18.2.33",
|
||||
"@types/react-copy-to-clipboard": "^5.0.0",
|
||||
"@types/jest-environment-puppeteer": "^5.0.6",
|
||||
"@types/jest-image-snapshot": "^6.2.3",
|
||||
"@types/jquery": "^3.5.29",
|
||||
"@types/jsdom": "^21.1.6",
|
||||
"@types/lodash": "^4.14.202",
|
||||
"@types/node": "^20.9.4",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/prismjs": "^1.26.3",
|
||||
"@types/progress": "^2.0.7",
|
||||
"@types/qs": "^6.9.10",
|
||||
"@types/react": "^18.2.38",
|
||||
"@types/react-copy-to-clipboard": "^5.0.7",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@types/react-highlight-words": "^0.16.4",
|
||||
"@types/react-resizable": "^3.0.0",
|
||||
@ -216,13 +217,12 @@
|
||||
"chalk": "^4.0.0",
|
||||
"cheerio": "1.0.0-rc.12",
|
||||
"circular-dependency-plugin": "^5.2.2",
|
||||
"cross-env": "^7.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cross-fetch": "^4.0.0",
|
||||
"crypto": "^1.0.1",
|
||||
"dekko": "^0.2.1",
|
||||
"dumi": "^2.3.0-alpha.9",
|
||||
"dumi-plugin-color-chunk": "^1.0.2",
|
||||
"duplicate-package-checker-webpack-plugin": "^3.0.0",
|
||||
"esbuild-loader": "^4.0.0",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-config-airbnb": "^19.0.0",
|
||||
@ -237,10 +237,10 @@
|
||||
"eslint-plugin-react": "^7.31.8",
|
||||
"eslint-plugin-react-hooks": "^4.1.2",
|
||||
"eslint-plugin-unicorn": "^49.0.0",
|
||||
"fast-glob": "^3.2.11",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"fs-extra": "^11.0.0",
|
||||
"gh-pages": "^6.0.0",
|
||||
"fast-glob": "^3.3.2",
|
||||
"fetch-jsonp": "^1.3.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"gh-pages": "^6.1.0",
|
||||
"glob": "^10.3.7",
|
||||
"html2sketch": "^1.0.0",
|
||||
"http-server": "^14.0.0",
|
||||
@ -257,18 +257,18 @@
|
||||
"jest-environment-node": "^29.0.0",
|
||||
"jest-image-snapshot": "^6.0.0",
|
||||
"jest-puppeteer": "^9.0.0",
|
||||
"jquery": "^3.4.1",
|
||||
"jsdom": "^22.0.0",
|
||||
"jquery": "^3.7.1",
|
||||
"jsdom": "^22.1.0",
|
||||
"jsonml-to-react-element": "^1.1.11",
|
||||
"jsonml.js": "^0.1.0",
|
||||
"lint-staged": "^15.0.0",
|
||||
"lint-staged": "^15.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lunar-typescript": "^1.6.9",
|
||||
"lz-string": "^1.4.4",
|
||||
"mockdate": "^3.0.0",
|
||||
"lz-string": "^1.5.0",
|
||||
"mockdate": "^3.0.5",
|
||||
"node-notifier": "^10.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"open": "^9.0.0",
|
||||
"open": "^9.1.0",
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-plugin-jsdoc": "^1.1.1",
|
||||
"pretty-format": "^29.7.0",
|
||||
@ -295,22 +295,23 @@
|
||||
"remark-cli": "^12.0.0",
|
||||
"remark-lint": "^9.0.0",
|
||||
"remark-lint-no-undefined-references": "^4.2.1",
|
||||
"remark-preset-lint-recommended": "^6.0.0",
|
||||
"remark-preset-lint-recommended": "^6.1.3",
|
||||
"runes2": "^1.1.2",
|
||||
"semver": "^7.5.4",
|
||||
"simple-git": "^3.21.0",
|
||||
"size-limit": "^11.0.0",
|
||||
"stylelint": "^15.1.0",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-prettier": "^4.0.2",
|
||||
"sylvanas": "^0.6.1",
|
||||
"terser": "^5.24.0",
|
||||
"tsx": "^4.3.0",
|
||||
"tsx": "^4.4.0",
|
||||
"typedoc": "^0.25.3",
|
||||
"typescript": "~5.2.2",
|
||||
"vanilla-jsoneditor": "^0.18.0",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"webpack": "^5.89.0",
|
||||
"webpack-bundle-analyzer": "^4.10.1",
|
||||
"xhr-mock": "^2.5.1"
|
||||
},
|
||||
@ -330,11 +331,11 @@
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"limit": "410 KiB"
|
||||
"limit": "332 KiB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd-with-locales.min.js",
|
||||
"limit": "470 KiB"
|
||||
"limit": "378 KiB"
|
||||
}
|
||||
],
|
||||
"title": "Ant Design",
|
||||
|
||||
@ -4,7 +4,7 @@ const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
|
||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
||||
const { EsbuildPlugin } = require('esbuild-loader');
|
||||
const CircularDependencyPlugin = require('circular-dependency-plugin');
|
||||
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
|
||||
const DuplicatePackageCheckerPlugin = require('@madccc/duplicate-package-checker-webpack-plugin');
|
||||
const path = require('path');
|
||||
|
||||
function addLocales(webpackConfig) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user