ant-design/components/form/context.tsx
Gunay 46341b115c
feat: custom feedback icons (#43894)
* custom feedback icons initial

(cherry picked from commit 22e43ad0357ea5294baf6eda659c900b1ab170f1)

* tests added and snaps updated

* Revert "tests added and snaps updated"

This reverts commit 13b57be30c.

* unittest and documentation changes

* feedback items could be turn off

* documentation fix

* move feedback icons object into the hasFeedback prop

* feedbackIcons added to the form element

* test: commit trigger

* fix: failed form test

* snaps updated

* Update components/form/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: Gunay <gladio@gmail.com>

* Update components/form/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: Gunay <gladio@gmail.com>

* Update components/form/index.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: Gunay <gladio@gmail.com>

* Update components/form/demo/custom-feedback-icons.md

Signed-off-by: afc163 <afc163@gmail.com>

* Update components/form/demo/custom-feedback-icons.md

Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: Gunay <gladio@gmail.com>
Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
2023-09-04 20:36:45 +08:00

96 lines
3.0 KiB
TypeScript

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 omit from 'rc-util/lib/omit';
import type { PropsWithChildren, ReactNode } from 'react';
import * as React from 'react';
import { useContext, useMemo } from 'react';
import type { ColProps } from '../grid/col';
import type { FormInstance, RequiredMark } from './Form';
import type { ValidateStatus, FeedbackIcons } from './FormItem';
import type { FormLabelAlign } from './interface';
/** Form Context. Set top form style and pass to Form Item usage. */
export interface FormContextProps {
vertical: boolean;
name?: string;
colon?: boolean;
labelAlign?: FormLabelAlign;
labelWrap?: boolean;
labelCol?: ColProps;
wrapperCol?: ColProps;
requiredMark?: RequiredMark;
itemRef: (name: (string | number)[]) => (node: React.ReactElement) => void;
form?: FormInstance;
feedbackIcons?: FeedbackIcons;
}
export const FormContext = React.createContext<FormContextProps>({
labelAlign: 'right',
vertical: false,
itemRef: (() => {}) as any,
});
/** `noStyle` Form Item Context. Used for error collection */
export type ReportMetaChange = (meta: Meta, uniqueKeys: React.Key[]) => void;
export const NoStyleItemContext = React.createContext<ReportMetaChange | null>(null);
/** Form Provider */
export interface FormProviderProps extends Omit<RcFormProviderProps, 'validateMessages'> {
prefixCls?: string;
}
export const FormProvider: React.FC<FormProviderProps> = (props) => {
const providerProps = omit(props, ['prefixCls']);
return <RcFormProvider {...providerProps} />;
};
/** Used for ErrorList only */
export interface FormItemPrefixContextProps {
prefixCls: string;
status?: ValidateStatus;
}
export const FormItemPrefixContext = React.createContext<FormItemPrefixContextProps>({
prefixCls: '',
});
export interface FormItemStatusContextProps {
isFormItemInput?: boolean;
status?: ValidateStatus;
errors?: React.ReactNode[];
warnings?: React.ReactNode[];
hasFeedback?: boolean;
feedbackIcon?: ReactNode;
}
export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});
export type NoFormStyleProps = PropsWithChildren<{
status?: boolean;
override?: boolean;
}>;
export const NoFormStyle: React.FC<NoFormStyleProps> = ({ children, status, override }) => {
const formItemInputContext = useContext(FormItemInputContext);
const newFormItemInputContext = useMemo(() => {
const newContext = { ...formItemInputContext };
if (override) {
delete newContext.isFormItemInput;
}
if (status) {
delete newContext.status;
delete newContext.hasFeedback;
delete newContext.feedbackIcon;
}
return newContext;
}, [status, override, formItemInputContext]);
return (
<FormItemInputContext.Provider value={newFormItemInputContext}>
{children}
</FormItemInputContext.Provider>
);
};