chore: Update Locale context (#22762)

* Upgrade locale context

* fix logic

* fix lint

* add context ignore in test case

components/locale-provider/LocaleReceiver.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import defaultLocaleData from './default';
+import LocaleContext from './context';
 
 export interface LocaleReceiverProps {
   componentName?: string;
@@ -21,17 +21,13 @@ export default class LocaleReceiver extends React.Component<LocaleReceiverProps>
     componentName: 'global',
   };
 
-  static contextTypes = {
-    antLocale: PropTypes.object,
-  };
-
-  context: LocaleReceiverContext;
+  static contextType = LocaleContext;
 
   getLocale() {
     const { componentName, defaultLocale } = this.props;
     const locale: object | Function =
       defaultLocale || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
-    const { antLocale } = this.context;
+    const antLocale = this.context;
     const localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
     return {
       ...(typeof locale === 'function' ? locale() : locale),
@@ -40,7 +36,7 @@ export default class LocaleReceiver extends React.Component<LocaleReceiverProps>
   }
 
   getLocaleCode() {
-    const { antLocale } = this.context;
+    const antLocale = this.context;
     const localeCode = antLocale && antLocale.locale;
     // Had use LocaleProvide but didn't set locale
     if (antLocale && antLocale.exist && !localeCode) {
@@ -50,6 +46,6 @@ export default class LocaleReceiver extends React.Component<LocaleReceiverProps>
   }
 
   render() {
-    return this.props.children(this.getLocale(), this.getLocaleCode(), this.context.antLocale);
+    return this.props.children(this.getLocale(), this.getLocaleCode(), this.context);
   }
 }

components/locale-provider/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { Locale } from '.';
+
+const LocaleContext = createContext<(Partial<Locale> & { exist?: boolean }) | undefined>(undefined);
+
+export default LocaleContext;

components/locale-provider/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import warning from '../_util/warning';
 
 import { ModalLocale, changeConfirmLocale } from '../modal/locale';
@@ -10,6 +9,7 @@ import { PopconfirmLocale } from '../popconfirm';
 import { UploadLocale } from '../upload/interface';
 import { TransferLocale } from '../transfer';
 import { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker';
+import LocaleContext from './context';
 
 export const ANT_MARK = 'internalMark';
 
@@ -43,10 +43,6 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     locale: {},
   };
 
-  static childContextTypes = {
-    antLocale: PropTypes.object,
-  };
-
   constructor(props: LocaleProviderProps) {
     super(props);
     changeConfirmLocale(props.locale && props.locale.Modal);
@@ -58,15 +54,6 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     );
   }
 
-  getChildContext() {
-    return {
-      antLocale: {
-        ...this.props.locale,
-        exist: true,
-      },
-    };
-  }
-
   componentDidUpdate(prevProps: LocaleProviderProps) {
     const { locale } = this.props;
     if (prevProps.locale !== locale) {
@@ -79,6 +66,10 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
   }
 
   render() {
-    return this.props.children;
+    const { locale, children } = this.props;
+
+    return (
+      <LocaleContext.Provider value={{ ...locale, exist: true }}>{children}</LocaleContext.Provider>
+    );
   }
 }

tests/dekko/lib.test.js

@@ -6,10 +6,7 @@ function getFileName(filePath) {
   return filePath.slice(filePath.lastIndexOf(path.sep) + 1);
 }
 
-$('lib')
-  .isDirectory()
-  .hasFile('index.js')
-  .hasFile('index.d.ts');
+$('lib').isDirectory().hasFile('index.js').hasFile('index.d.ts');
 
 $('lib/*')
   .filter(
@@ -27,9 +24,7 @@ $('lib/*')
   .hasFile('index.d.ts')
   .hasDirectory('style');
 
-$('lib/*/style')
-  .hasFile('css.js')
-  .hasFile('index.js');
+$('lib/*/style').hasFile('css.js').hasFile('index.js');
 
 // locale
 const filterLocaleFile = filePath => {
@@ -40,7 +35,8 @@ const filterLocaleFile = filePath => {
     !fileName.endsWith('.map') &&
     !fileName.endsWith('style') &&
     !fileName.includes('-') &&
-    !fileName.endsWith('LocaleReceiver.js')
+    !fileName.endsWith('LocaleReceiver.js') &&
+    !fileName.endsWith('context.js')
   );
 };
 const localeFiles = $('lib/locale/*').filter(filterLocaleFile);