Fixed #1749 - Locale API

primefaces · Jan 10, 2021 · 25ca61d · 25ca61d
1 parent 7ed55cf
commit 25ca61d
Show file tree

Hide file tree

Showing 16 changed files with 195 additions and 76 deletions.
diff --git a/exports/api.d.ts b/exports/api.d.ts
@@ -1,3 +1,7 @@
+import PrimeReact from './components/api/PrimeReact';
+
+export default PrimeReact;
+export * from './components/api/Locale';
 export * from './components/menuitem/MenuItem';
 export * from './components/selectitem/SelectItem';
-export * from './components/treenode/TreeNode';
+export * from './components/treenode/TreeNode';
diff --git a/exports/api.js b/exports/api.js
@@ -0,0 +1,4 @@
+'use strict';
+
+module.exports = require('./components/api/PrimeReact');
+module.exports = require('./components/api/Locale');
diff --git a/exports/utils.d.ts b/exports/utils.d.ts
diff --git a/exports/utils.js b/exports/utils.js
diff --git a/src/App.js b/src/App.js
@@ -21,7 +21,7 @@ import AppConfig from './AppConfig';
 
 import AppContentContext from './AppContentContext';
 import { Toast } from './components/toast/Toast';
-import PrimeReact from './components/utils/PrimeReact';
+import PrimeReact from './components/api/PrimeReact';
 import { AppChangelogDialog } from './AppChangelogDialog';
 
 export class App extends Component {

diff --git a/src/components/api/Locale.js b/src/components/api/Locale.js
@@ -0,0 +1,65 @@
+import PrimeReact from './PrimeReact';
+
+let locales = {
+    'en': {
+        accept: 'Yes',
+        reject: 'No',
+        choose: 'Choose',
+        upload: 'Upload',
+        cancel: 'Cancel',
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
+        monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        today: 'Today',
+        clear: 'Clear',
+        weekHeader: 'Wk',
+        firstDayOfWeek: 0,
+        dateFormat: 'mm/dd/yy',
+        weak: 'Weak',
+        medium: 'Medium',
+        strong: 'Strong',
+        passwordPrompt: 'Enter a password'
+    }
+};
+
+function locale(locale) {
+    if (locale) {
+        PrimeReact.locale = locale;
+    }
+
+    return {
+        locale: PrimeReact.locale,
+        options: locales[PrimeReact.locale]
+    }
+}
+
+function addLocale(locale, options) {
+    locales[locale] = { ...locales['en'], ...options };
+}
+
+function updateLocaleOption(key, value, locale) {
+    localeOptions(locale)[key] = value;
+}
+
+function updateLocaleOptions(options, locale) {
+    const _locale = locale || PrimeReact.locale;
+    locales[_locale] = { ...locales[_locale], ...options };
+}
+
+function localeOption(key, locale) {
+    try {
+        return localeOptions(locale)[key];
+    }
+    catch(error) {
+        throw new Error(`The ${key} option is not found in the current locale('${locale || PrimeReact.locale}').`);
+    }
+}
+
+function localeOptions(locale) {
+    const _locale = locale || PrimeReact.locale;
+    return locales[_locale];
+}
+
+export { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions };
diff --git a/src/components/utils/PrimeReact.js → src/components/api/PrimeReact.js b/src/components/utils/PrimeReact.js → src/components/api/PrimeReact.js
@@ -1,4 +1,6 @@
 export default class PrimeReact {
 
     static ripple = false;
+
+    static locale = 'en';
 }
diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
@@ -11,6 +11,7 @@ import { CSSTransition } from 'react-transition-group';
 import { Ripple } from '../ripple/Ripple';
 import UniqueComponentId from '../utils/UniqueComponentId';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
+import { localeOption, localeOptions } from '../api/Locale';
 
 export class Calendar extends Component {
 
@@ -50,17 +51,7 @@ export class Calendar extends Component {
         shortYearCutoff: '+10',
         hideOnDateTimeSelect: false,
         showWeek: false,
-        locale: {
-            firstDayOfWeek: 0,
-            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
-            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
-            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
-            today: 'Today',
-            clear: 'Clear',
-            weekHeader: 'Wk'
-        },
+        locale: null,
         dateFormat: 'mm/dd/yy',
         panelStyle: null,
         panelClassName: null,
@@ -131,7 +122,7 @@ export class Calendar extends Component {
         shortYearCutoff: PropTypes.string,
         hideOnDateTimeSelect: PropTypes.bool,
         showWeek: PropTypes.bool,
-        locale: PropTypes.object,
+        locale: PropTypes.string,
         dateFormat: PropTypes.string,
         panelStyle: PropTypes.object,
         panelClassName: PropTypes.string,
@@ -1668,14 +1659,15 @@ export class Calendar extends Component {
     }
 
     getSundayIndex() {
-        return this.props.locale.firstDayOfWeek > 0 ? 7 - this.props.locale.firstDayOfWeek : 0;
+        const firstDayOfWeek = localeOption('firstDayOfWeek', this.props.locale);
+        return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
     }
 
     createWeekDays() {
         let weekDays = [];
-        let dayIndex = this.props.locale.firstDayOfWeek;
+        let { firstDayOfWeek: dayIndex, dayNamesMin } = localeOptions(this.props.locale);
         for(let i = 0; i < 7; i++) {
-            weekDays.push(this.props.locale.dayNamesMin[dayIndex]);
+            weekDays.push(dayNamesMin[dayIndex]);
             dayIndex = (dayIndex === 6) ? 0 : ++dayIndex;
         }
 
@@ -2052,6 +2044,7 @@ export class Calendar extends Component {
             };
         let output = '';
         let literal = false;
+        const { dayNamesShort, dayNames, monthNamesShort, monthNames } = localeOptions(this.props.locale);
 
         if (date) {
             for (iFormat = 0; iFormat < format.length; iFormat++) {
@@ -2067,7 +2060,7 @@ export class Calendar extends Component {
                             output += formatNumber('d', date.getDate(), 2);
                             break;
                         case 'D':
-                            output += formatName('D', date.getDay(), this.props.locale.dayNamesShort, this.props.locale.dayNames);
+                            output += formatName('D', date.getDay(), dayNamesShort, dayNames);
                             break;
                         case 'o':
                             output += formatNumber('o',
@@ -2079,7 +2072,7 @@ export class Calendar extends Component {
                             output += formatNumber('m', date.getMonth() + 1, 2);
                             break;
                         case 'M':
-                            output += formatName('M',date.getMonth(), this.props.locale.monthNamesShort, this.props.locale.monthNames);
+                            output += formatName('M',date.getMonth(), monthNamesShort, monthNames);
                             break;
                         case 'y':
                             output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
@@ -2317,6 +2310,8 @@ export class Calendar extends Component {
             day = 1;
         }
 
+        const { dayNamesShort, dayNames, monthNamesShort, monthNames } = localeOptions(this.props.locale);
+
         for (iFormat = 0; iFormat < format.length; iFormat++) {
             if(literal) {
                 if(format.charAt(iFormat) === "'" && !lookAhead("'")) {
@@ -2330,7 +2325,7 @@ export class Calendar extends Component {
                         day = getNumber("d");
                         break;
                     case "D":
-                        getName("D", this.props.locale.dayNamesShort, this.props.locale.dayNames);
+                        getName("D", dayNamesShort, dayNames);
                         break;
                     case "o":
                         doy = getNumber("o");
@@ -2339,7 +2334,7 @@ export class Calendar extends Component {
                         month = getNumber("m");
                         break;
                     case "M":
-                        month = getName("M", this.props.locale.monthNamesShort, this.props.locale.monthNames);
+                        month = getName("M", monthNamesShort, monthNames);
                         break;
                     case "y":
                         year = getNumber("y");
@@ -2433,14 +2428,16 @@ export class Calendar extends Component {
     }
 
     renderTitleMonthElement(month) {
+        const monthNames = localeOption('monthNames', this.props.locale);
+
         if (this.props.monthNavigator && this.props.view !== 'month') {
-            let viewDate = this.getViewDate();
-            let viewMonth = viewDate.getMonth();
+            const viewDate = this.getViewDate();
+            const viewMonth = viewDate.getMonth();
 
             return (
                 <select className="p-datepicker-month" onChange={this.onMonthDropdownChange} value={viewMonth}>
                     {
-                        this.props.locale.monthNames.map((month, index) => {
+                        monthNames.map((month, index) => {
                             if ((!this.isInMinYear(viewDate) || index >= this.props.minDate.getMonth()) && (!this.isInMaxYear(viewDate) || index <= this.props.maxDate.getMonth())) {
                                 return <option key={month} value={index}>{month}</option>
                             }
@@ -2452,7 +2449,7 @@ export class Calendar extends Component {
         }
         else {
             return (
-                <span className="p-datepicker-month">{this.props.locale.monthNames[month]}</span>
+                <span className="p-datepicker-month">{monthNames[month]}</span>
             );
         }
     }
@@ -2515,7 +2512,7 @@ export class Calendar extends Component {
         if (this.props.showWeek) {
             const weekHeader = (
                 <th scope="col" key={'wn'} className="p-datepicker-weekheader p-disabled">
-                    <span>{this.props.locale['weekHeader']}</span>
+                    <span>{localeOption('weekHeader', this.props.locale)}</span>
                 </th>
             );
 
@@ -2644,7 +2641,8 @@ export class Calendar extends Component {
 
     renderMonthViewMonth(index) {
         const className = classNames('p-monthpicker-month', {'p-highlight': this.isMonthSelected(index)});
-        const monthName = this.props.locale.monthNamesShort[index];
+        const monthNamesShort = localeOption('monthNamesShort', this.props.locale);
+        const monthName = monthNamesShort[index];
 
         return (
             <span key={monthName} className={className} onClick={event => this.onMonthSelect(event, index)} onKeyDown={event => this.onMonthCellKeydown(event, index)}>
@@ -2882,11 +2880,12 @@ export class Calendar extends Component {
         if (this.props.showButtonBar) {
             const todayClassName = classNames('p-button-text', this.props.todayButtonClassName);
             const clearClassName = classNames('p-button-text', this.props.clearButtonClassName);
+            const { today, clear } = localeOptions(this.props.locale);
 
             return (
                 <div className="p-datepicker-buttonbar">
-                    <Button type="button" label={this.props.locale.today} onClick={this.onTodayButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={todayClassName} />
-                    <Button type="button" label={this.props.locale.clear} onClick={this.onClearButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={clearClassName} />
+                    <Button type="button" label={today} onClick={this.onTodayButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={todayClassName} />
+                    <Button type="button" label={clear} onClick={this.onClearButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={clearClassName} />
                 </div>
             );
         }

diff --git a/src/components/confirmdialog/ConfirmDialog.js b/src/components/confirmdialog/ConfirmDialog.js
@@ -6,6 +6,7 @@ import { Dialog } from '../dialog/Dialog';
 import { Button } from '../button/Button';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
+import { localeOption } from '../api/Locale';
 
 export function confirmDialog(props) {
     let appendTo = props.appendTo || document.body;
@@ -46,8 +47,8 @@ export class ConfirmDialog extends Component {
     static defaultProps = {
         visible: false,
         message: null,
-        rejectLabel: 'No',
-        acceptLabel: 'Yes',
+        rejectLabel: null,
+        acceptLabel: null,
         icon: null,
         rejectIcon: null,
         acceptIcon: null,
@@ -89,6 +90,14 @@ export class ConfirmDialog extends Component {
         this.hide = this.hide.bind(this);
     }
 
+    acceptLabel() {
+        return this.props.acceptLabel || localeOption('accept');
+    }
+
+    rejectLabel() {
+        return this.props.rejectLabel || localeOption('reject');
+    }
+
     accept() {
         if (this.props.accept) {
             this.props.accept();
@@ -131,8 +140,8 @@ export class ConfirmDialog extends Component {
 
         return this.props.footer ? ObjectUtils.getJSXElement(this.props.footer, this.props) : (
             <>
-                <Button label={this.props.rejectLabel} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
-                <Button label={this.props.acceptLabel} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
+                <Button label={this.rejectLabel()} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
+                <Button label={this.acceptLabel()} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
             </>
         )
     }

diff --git a/src/components/confirmpopup/ConfirmPopup.js b/src/components/confirmpopup/ConfirmPopup.js
@@ -8,6 +8,7 @@ import UniqueComponentId from '../utils/UniqueComponentId';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
+import { localeOption } from '../api/Locale';
 
 export function confirmPopup(props) {
     let appendTo = props.appendTo || document.body;
@@ -49,8 +50,8 @@ export class ConfirmPopup extends Component {
         target: null,
         visible: false,
         message: null,
-        rejectLabel: 'No',
-        acceptLabel: 'Yes',
+        rejectLabel: null,
+        acceptLabel: null,
         icon: null,
         rejectIcon: null,
         acceptIcon: null,
@@ -104,6 +105,14 @@ export class ConfirmPopup extends Component {
         this.id = this.props.id || UniqueComponentId();
     }
 
+    acceptLabel() {
+        return this.props.acceptLabel || localeOption('accept');
+    }
+
+    rejectLabel() {
+        return this.props.rejectLabel || localeOption('reject');
+    }
+
     bindDocumentClickListener() {
         if(!this.documentClickListener && this.props.dismissable) {
             this.documentClickListener = (event) => {
@@ -284,8 +293,8 @@ export class ConfirmPopup extends Component {
 
         const content = this.props.footer ? ObjectUtils.getJSXElement(this.props.footer, this.props) : (
             <>
-                <Button label={this.props.rejectLabel} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
-                <Button label={this.props.acceptLabel} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
+                <Button label={this.rejectLabel()} icon={this.props.rejectIcon} className={rejectClassName} onClick={this.reject} />
+                <Button label={this.acceptLabel()} icon={this.props.acceptIcon} className={acceptClassName} onClick={this.accept} autoFocus />
             </>
         )