feat(DatePicker): i18n

NSFI · Dec 30, 2020 · 45b57e8 · 45b57e8
1 parent 8b7197a
commit 45b57e8
Show file tree

Hide file tree

Showing 16 changed files with 736 additions and 553 deletions.
diff --git a/source/components/Config/Consumer.tsx b/source/components/Config/Consumer.tsx
@@ -4,9 +4,7 @@ import LocaleConsumer from './Locale/Consumer';
 export default function ConfigConsumer(props) {
   return <LocaleConsumer componentName={props.componentName}>
     {
-      (value) => {
-        return props.children(value);
-      }
+      (value, lang) => props.children(value, lang)
     }
   </LocaleConsumer>
-}
+}
diff --git a/source/components/Config/Locale/Consumer.tsx b/source/components/Config/Locale/Consumer.tsx
@@ -4,16 +4,15 @@ import LocaleList from '../../Locale/index';
 
 export default function LocaleConsumer({ componentName, children }: {
   componentName: string,
-  children: (params: object) => React.ReactNode 
+  children: (params: object, locale: string) => React.ReactNode
 }) {
   return <Consumer>
     {
       (value) => {
         const { Locale } = value;
         const ComponentLocal = LocaleList[Locale] && LocaleList[Locale][componentName]
-        // console.log(Locale, ComponentLocal);
-        return children(ComponentLocal || {});
+        return children(ComponentLocal || {}, Locale);
       }
     }
   </Consumer>
-}
+}
diff --git a/source/components/Config/Locale/Context.tsx b/source/components/Config/Locale/Context.tsx
@@ -1,7 +1,7 @@
 // context.js
 import React from 'react';
 export const LocaleContext = React.createContext({
-  Locale: 'zh_CN',
+  Locale: 'zh_CN'
 });
 export const Provider = LocaleContext.Provider;
 export const Consumer = LocaleContext.Consumer;

diff --git a/source/components/Config/demo.tsx b/source/components/Config/demo.tsx
@@ -41,4 +41,4 @@ class ConsumerDemo extends React.Component<{}> {
 export {
   WithLocaleDemo,
   ConsumerDemo
-};
+};
diff --git a/source/components/DatePicker/DateRangeBasePicker.tsx b/source/components/DatePicker/DateRangeBasePicker.tsx
@@ -12,6 +12,7 @@ import placements from './placements';
 import isEqual from 'lodash/isEqual';
 import { Placement } from './BasePicker';
 import { TimeSelectProps } from './TimeSelect';
+import ConfigConsumer from '../Config/Consumer';
 
 const haveTriggerType = type => {
   return HAVE_TRIGGER_TYPES.indexOf(type) !== -1;
@@ -442,7 +443,7 @@ class DateRangeBasePicker extends React.Component<
     };
 
     // 选择框
-    const getInputPanel = () => {
+    const getInputPanel = (locales) => {
       return (
         <span
           className={classNames(`${prefixCls}-date-editor`, className, {
@@ -489,7 +490,7 @@ class DateRangeBasePicker extends React.Component<
               prefix={prefixIcon()}
             />
             <span className={classNames('range-separator', { disabled: disabled })}>
-              {separator}
+              {locales.separator}
             </span>
             <Input
               className={`${prefixCls}-date-range-picker-second-input`}
@@ -525,20 +526,26 @@ class DateRangeBasePicker extends React.Component<
     };
 
     return (
-      <Trigger
-        action={disabled ? [] : ['click']}
-        builtinPlacements={placements}
-        ref={node => (this.trigger = node)}
-        getPopupContainer={getPopupContainer}
-        onPopupVisibleChange={this.onVisibleChange}
-        popup={getPickerPanel()}
-        popupPlacement={placement}
-        popupVisible={pickerVisible}
-        prefixCls={`${prefixCls}-date-time-picker-popup`}
-        destroyPopupOnHide={true}
-      >
-        {getInputPanel()}
-      </Trigger>
+      <ConfigConsumer componentName="DatePicker">
+        {
+          (Locales) => (
+            <Trigger
+              action={disabled ? [] : ['click']}
+              builtinPlacements={placements}
+              ref={node => (this.trigger = node)}
+              getPopupContainer={getPopupContainer}
+              onPopupVisibleChange={this.onVisibleChange}
+              popup={getPickerPanel()}
+              popupPlacement={placement}
+              popupVisible={pickerVisible}
+              prefixCls={`${prefixCls}-date-time-picker-popup`}
+              destroyPopupOnHide={true}
+            >
+              {getInputPanel(Locales)}
+            </Trigger>
+          )
+        }
+      </ConfigConsumer>
     );
   }
 }

diff --git a/.../components/DatePicker/DateRangePicker.js → ...components/DatePicker/DateRangePicker.tsx b/.../components/DatePicker/DateRangePicker.js → ...components/DatePicker/DateRangePicker.tsx
@@ -5,6 +5,8 @@ import DateRangePanel from './panel/DateRangePanel';
 import TimeSelectPanel from './panel/TimeSelectPanel';
 import TimePanel from './panel/TimePanel';
 import { converSelectRange } from './TimePicker';
+import { LocaleProperties } from '../Locale';
+import ConfigConsumer from '../Config/Consumer';
 
 export default class DateRangePicker extends DateRangeBasePicker {
   static get propTypes() {
@@ -106,14 +108,20 @@ export default class DateRangePicker extends DateRangeBasePicker {
       state.value && this.isDateValid(state.value) ? state.value : null;
 
     return (
-      // @ts-ignore to much unmatched props
-      <DateRangePanel
-        {...this.props}
-        value={value}
-        onPick={this.onPicked}
-        onCancelPicked={this.onCancelPicked}
-        dateToStr={this.dateToStr}
-      />
+      <ConfigConsumer componentName="DatePicker">
+      {
+        (Locales: LocaleProperties["DatePicker"]) => (
+          // @ts-ignore to much unmatched props
+          <DateRangePanel
+            {...this.props}
+            value={value}
+            onPick={this.onPicked}
+            onCancelPicked={this.onCancelPicked}
+            dateToStr={this.dateToStr}
+          />
+            )
+      }
+    </ConfigConsumer>
     );
   }
 }
diff --git a/source/components/DatePicker/TimePicker.tsx b/source/components/DatePicker/TimePicker.tsx
@@ -6,6 +6,8 @@ import { TYPE_VALUE_RESOLVER_MAP, DEFAULT_FORMATS } from './constants';
 import debounce from 'lodash/debounce';
 import TimeSelect from './TimeSelect';
 import pick from 'lodash/pick';
+import ConfigConsumer from '../Config/Consumer';
+import { LocaleProperties } from '../Locale';
 
 export const converSelectRange = props => {
   let selectableRange = [];
@@ -64,31 +66,21 @@ export default class TimePicker extends BasePicker {
 
   pickerPanel(state) {
     const value = state.value && this.isDateValid(state.value) ? state.value : null;
-
-    /**
-        prefixCls?: string
-        format?: string                  //basePicker
-        value?: Date         //basePicker
-        onPicked?: (date: Date, isKeepPannelOpen: boolean, isConfirmValue: boolean) => void       //basePicker
-        onCancelPicked?: () => void //basePicker
-        selectableRange?: Array<{ start: Date, end: Date }>[]
-        onSelectRangeChange?: (range) => void
-        isShowCurrent?: boolean
-        footer?: () => React.ReactNode
-        onValueChange?
-     */
-    console.log('TimePicker props::: ', this.props)
-    console.log('picked TimePicker props::: ', pick(this.props, ['format', 'isShowCurrent', 'footer', 'onValueChange']))
-
     return (
-      <TimePanel
-        {...this.props}
-        selectableRange={converSelectRange(this.props)}
-        onSelectRangeChange={this._onSelectionChange}
-        value={value}
-        onPicked={this.onPicked}
-        onCancelPicked={this.onCancelPicked}
-      />
+      <ConfigConsumer componentName="DatePicker">
+        {
+          (Locales: LocaleProperties["DatePicker"]) => (
+            <TimePanel
+              {...this.props, Locales}
+              selectableRange={converSelectRange(this.props)}
+              ONSELECTRANGECHANGE={this._onSelectionChange}
+              value={value}
+              onPicked={this.onPicked}
+              onCancelPicked={this.onCancelPicked}
+            />
+          )
+        }
+      </ConfigConsumer>
     );
   }
 }
diff --git a/source/components/DatePicker/TimeSelect.tsx b/source/components/DatePicker/TimeSelect.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import BasePicker, { BasePickerProps } from './BasePicker';
 import TimeSelectPanel from './panel/TimeSelectPanel';
+import ConfigConsumer from '../Config/Consumer';
+import { LocaleProperties } from '../Locale';
 
 export type TimeSelectProps = {
   start?: string;
@@ -48,14 +50,20 @@ export default class TimeSelect extends BasePicker {
   pickerPanel(state) {
     const value = state.value && this.isDateValid(state.value) ? this.dateToStr(state.value) : null;
     return (
-      <TimeSelectPanel
-        {...this.props}
-        value={value}
-        onPicked={this.onPicked}
-        dateParser={str => {
-          return str ? this.parseDate(str) : null;
-        }}
-      />
+      <ConfigConsumer componentName="DatePicker">
+        {
+          (Locales: LocaleProperties["DatePicker"]) => (
+            <TimeSelectPanel
+              {...this.props}
+              value={value}
+              onPicked={this.onPicked}
+              dateParser={str => {
+                return str ? this.parseDate(str) : null;
+              }}
+            />
+        )
+      }
+      </ConfigConsumer>
     );
   }
 }
diff --git a/source/components/DatePicker/basic/DateTable.js b/source/components/DatePicker/basic/DateTable.js
@@ -14,6 +14,7 @@ import {
   getOffsetToWeekOrigin
 } from '../../../utils/date';
 import Locale from '../../../utils/date/locale';
+import ConfigConsumer from '../../Config/Consumer';
 
 function isFunction(func) {
   return typeof func === 'function';
@@ -365,41 +366,47 @@ export default class DateTable extends React.Component {
     const {mode, showWeekNumber, prefixCls} = this.props;
 
     return (
-      <table
-        cellSpacing="0"
-        cellPadding="0"
-        onClick={this.handleClick}
-        onMouseMove={this.handleMouseMove}
-        className={classNames(`${prefixCls}-date-table`, { 'is-week-mode': mode === 'week' })}
-      >
-        <tbody>
-
-        <tr>
-          {showWeekNumber && <th>周</th>}
-          {
-            this.WEEKS().map((e, idx)=> <th key={idx}>{$t(`datepicker.weeks.${e}`)}</th> )
-          }
-        </tr>
-
+      <ConfigConsumer componentName="DatePicker">
         {
-          this.getMarkedRangeRows().map((row, idx) => {
-            return (
-              <tr
-                key={idx}
-                className={classNames(`${prefixCls}-date-table__row`, { 'current': row.isWeekActive })}>
+          (Locale) => (
+            <table
+              cellSpacing="0"
+              cellPadding="0"
+              onClick={this.handleClick}
+              onMouseMove={this.handleMouseMove}
+              className={classNames(`${prefixCls}-date-table`, { 'is-week-mode': mode === 'week' })}
+            >
+              <tbody>
+
+              <tr>
+                {showWeekNumber && <th>{Locale.week}</th>}
                 {
-                  row.map((cell, idx) => (
-                    <td className={this.getCellClasses(cell)} key={idx}>
-                      <div><span>{cell.text}</span></div>
-                    </td>
-                  ))
+                  this.WEEKS().map((e, idx)=> <th key={idx}>{Locale['weeks'][e]}</th> )
                 }
               </tr>
-            );
-          })
+
+              {
+                this.getMarkedRangeRows().map((row, idx) => {
+                  return (
+                    <tr
+                      key={idx}
+                      className={classNames(`${prefixCls}-date-table__row`, { 'current': row.isWeekActive })}>
+                      {
+                        row.map((cell, idx) => (
+                          <td className={this.getCellClasses(cell)} key={idx}>
+                            <div><span>{cell.text}</span></div>
+                          </td>
+                        ))
+                      }
+                    </tr>
+                  );
+                })
+              }
+              </tbody>
+            </table>
+          )
         }
-        </tbody>
-      </table>
+      </ConfigConsumer>
     );
   }
 }