@douyinfe/semi-ui 2.14.0-beta.2 → 2.15.0

package/locale/source/de.ts

@@ -0,0 +1,156 @@
+import { de } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+const local: Locale = {
+    code: 'de',
+    dateFnsLocale: de,
+    Pagination: {
+        item: 'Artikel',
+        pageSize: ' Artikel / Seite',
+        page: ' Seiten',
+        total: '',
+        jumpTo: 'Springen zu'
+    },
+    Modal: {
+        confirm: 'Bestätigen',
+        cancel: 'Abbrechen',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Zeit auswählen',
+            timeRange: 'Einen Zeitintervall auswählen',
+        },
+        begin: 'Startzeit',
+        end: 'Endzeit',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: 'AM',
+        PM: 'PM',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Datum auswählen',
+            dateTime: 'Datum und Uhrzeit auswählen',
+            dateRange: ['Startdatum', 'Enddatum'],
+            dateTimeRange: ['Startdatum', 'Enddatum'],
+        },
+        footer: {
+            confirm: 'Bestätigen',
+            cancel: 'Abbrechen',
+        },
+        selectDate: 'Datum auswählen',
+        selectTime: 'Uhrzeit auswählen',
+        year: 'Jahr',
+        month: 'Monat',
+        day: 'Tag',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'Jan',
+            2: 'Feb',
+            3: 'Mär',
+            4: 'Apr',
+            5: 'Mai',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Aug',
+            9: 'Sep',
+            10: 'Okt',
+            11: 'Nov',
+            12: 'Dez',
+        },
+        fullMonths: {
+            1: 'Januar',
+            2: 'Februar',
+            3: 'März',
+            4: 'April',
+            5: 'Mai',
+            6: 'Juni',
+            7: 'Juli',
+            8: 'August',
+            9: 'September',
+            10: 'Oktober',
+            11: 'November',
+            12: 'Dezember',
+        },
+        weeks: {
+            Mon: 'Mo.',
+            Tue: 'Di.',
+            Wed: 'Mi.',
+            Thu: 'Do.',
+            Fri: 'Fr.',
+            Sat: 'Sa.',
+            Sun: 'So.',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Popconfirm: {
+        confirm: 'Bestätigen',
+        cancel: 'Abbrechen',
+    },
+    Navigation: {
+        collapseText: 'Seitenleiste verstecken',
+        expandText: 'Seitenleiste anzeigen',
+    },
+    Table: {
+        emptyText: 'Kein Ergebnis',
+        pageText: 'Anzeigen ${currentStart} bis ${currentEnd} von ${total}',
+    },
+    Select: {
+        emptyText: 'Kein Ergebnis',
+        createText: 'Kreieren',
+    },
+    Tree: {
+        emptyText: 'Kein Ergebnis',
+        searchPlaceholder: 'Suchen',
+    },
+    Cascader: {
+        emptyText: 'Kein Ergebnis',
+    },
+    List: {
+        emptyText: 'Kein Ergebnis',
+    },
+    Calendar: {
+        allDay: 'Den ganzen Tag',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: '${remained} mehr',
+    },
+    Upload: {
+        mainText: 'Klicken Sie auf Datei hochladen oder ziehen Sie die Datei hierher',
+        illegalTips: 'Dieser Dateityp wird nicht unterstützt',
+        legalTips: 'Freigeben und Hochladen starten',
+        retry: 'Wiederholen',
+        replace: 'Datei ersetzen',
+        clear: 'Löschen',
+        selectedFiles: 'Ausgewählte Dateien',
+        illegalSize: 'Illegale Dateigröße',
+        fail: 'Hochladen fehlgeschlagen',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Suchen',
+    },
+    Typography: {
+        copy: 'Kopieren',
+        copied: 'Kopiert',
+        expand: 'Erweitern',
+        collapse: 'Verstecken',
+    },
+    Transfer: {
+        emptyLeft: 'Keine Daten',
+        emptySearch: 'Keine Suchergebnisse',
+        emptyRight: 'Keine Inhalte, links kontrollieren',
+        placeholder: 'Suchen',
+        clear: 'Löschen',
+        selectAll: 'Alles auswählen',
+        clearSelectAll: 'Alles abwählen',
+        total: 'Gesamt ${total} Artikel',
+        selected: '${total} ausgewählte Artikel',
+    },
+};
+
+// [i18n-German]
+export default local;

package/locale/source/fr.ts

@@ -0,0 +1,156 @@
+import { fr } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+const local: Locale = {
+    code: 'fr',
+    dateFnsLocale: fr,
+    Pagination: {
+        item: 'article',
+        pageSize: ' articles/page',
+        page: ' pages',
+        total: '',
+        jumpTo: 'Sauter à'
+    },
+    Modal: {
+        confirm: 'Confirmer',
+        cancel: 'Annuler',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Sélectionner temps',
+            timeRange: 'Sélectionner une période de temps',
+        },
+        begin: 'Heure de début',
+        end: 'Heure de fin',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: 'AM',
+        PM: 'PM',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Sélectionner date',
+            dateTime: 'Sélectionner date et temps',
+            dateRange: ['Date de début', 'Date de fin'],
+            dateTimeRange: ['Date de début', 'Date de fin'],
+        },
+        footer: {
+            confirm: 'Confirmer',
+            cancel: 'Annuler',
+        },
+        selectDate: 'Sélectionner date',
+        selectTime: 'Sélectionner temps',
+        year: 'année',
+        month: 'mois',
+        day: 'jour',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'janv.',
+            2: 'févr.',
+            3: 'mars',
+            4: 'avr.',
+            5: 'mai',
+            6: 'juin',
+            7: 'juill.',
+            8: 'août',
+            9: 'sept.',
+            10: 'oct.',
+            11: 'nov.',
+            12: 'déc.',
+        },
+        fullMonths: {
+            1: 'janvier',
+            2: 'février',
+            3: 'mars',
+            4: 'avril',
+            5: 'mai',
+            6: 'juin',
+            7: 'juillet',
+            8: 'août',
+            9: 'septembre',
+            10: 'octobre',
+            11: 'novembre',
+            12: 'décembre',
+        },
+        weeks: {
+            Mon: 'lun.',
+            Tue: 'mar.',
+            Wed: 'mer.',
+            Thu: 'jeu.',
+            Fri: 'ven.',
+            Sat: 'sam.',
+            Sun: 'dim.',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Popconfirm: {
+        confirm: 'Confirmer',
+        cancel: 'Annuler',
+    },
+    Navigation: {
+        collapseText: 'Comprimer la barre latérale',
+        expandText: 'Étendre la barre latérale',
+    },
+    Table: {
+        emptyText: 'Aucun Résultat',
+        pageText: 'Montrant ${currentStart} to ${currentEnd} of ${total}',
+    },
+    Select: {
+        emptyText: 'Aucun Résultat',
+        createText: 'Créer',
+    },
+    Tree: {
+        emptyText: 'Aucun Résultat',
+        searchPlaceholder: 'Recherche',
+    },
+    Cascader: {
+        emptyText: 'Aucun Résultat',
+    },
+    List: {
+        emptyText: 'Aucun Résultat',
+    },
+    Calendar: {
+        allDay: ' Toute la journée',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: '${remained} plus',
+    },
+    Upload: {
+        mainText: 'Cliquez pour télécharger le fichier ou faites glisser le fichier vers ici',
+        illegalTips: 'Ce type de fichier n\'est pas pris en charge',
+        legalTips: 'Libérer et commencer le téléchargement',
+        retry: 'Réessayer',
+        replace: 'Remplacer le fichier',
+        clear: 'Supprimer',
+        selectedFiles: 'Fichiers sélectionnés',
+        illegalSize: 'Taille de fichier erronée',
+        fail: 'Échec du chargement',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Recherche',
+    },
+    Typography: {
+        copy: 'Copier',
+        copied: 'Copié',
+        expand: 'Étendre',
+        collapse: 'Comprimer',
+    },
+    Transfer: {
+        emptyLeft: 'Aucune Donnée',
+        emptySearch: 'Aucun résultat n\'a été trouvé',
+        emptyRight: 'Pas de contenu, vérification à gauche',
+        placeholder: 'Recherche',
+        clear: 'Supprimer',
+        selectAll: 'Sélectionner tout',
+        clearSelectAll: 'Désélectionner tout',
+        total: 'Totale ${total} articles',
+        selected: '${total} articles sélectionnés',
+    },
+};
+
+// [i18n-French]
+export default local;

package/locale/source/it.ts

@@ -0,0 +1,156 @@
+import { it } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+const local: Locale = {
+    code: 'it',
+    dateFnsLocale: it,
+    Pagination: {
+        item: 'elemento',
+        pageSize: ' elementi / pagine',
+        page: ' pagine',
+        total: '',
+        jumpTo: 'Vai a'
+    },
+    Modal: {
+        confirm: 'Conferma',
+        cancel: 'Cancella',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Seleziona ora',
+            timeRange: 'Seleziona un intervallo di tempo',
+        },
+        begin: 'Ora inizio',
+        end: 'Ora fine',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: 'AM',
+        PM: 'PM',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Seleziona data',
+            dateTime: 'Seleziona data e ora',
+            dateRange: ['Data inizio', 'Data fine'],
+            dateTimeRange: ['Data inizio', 'Data fine'],
+        },
+        footer: {
+            confirm: 'Conferma',
+            cancel: 'Cancella',
+        },
+        selectDate: 'Seleziona data',
+        selectTime: 'Seleziona ora',
+        year: 'anno',
+        month: 'mese',
+        day: 'giorno',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'Gen',
+            2: 'Feb',
+            3: 'Mar',
+            4: 'Apr',
+            5: 'Mag',
+            6: 'Giu',
+            7: 'Lug',
+            8: 'Ago',
+            9: 'Set',
+            10: 'Ott',
+            11: 'Nov',
+            12: 'Dic',
+        },
+        fullMonths: {
+            1: 'Gennaio',
+            2: 'Febbraio',
+            3: 'Marzo',
+            4: 'Aprile',
+            5: 'Maggio',
+            6: 'Giugno',
+            7: 'Luglio',
+            8: 'Agosto',
+            9: 'Settembre',
+            10: 'Ottobre',
+            11: 'Novembre',
+            12: 'Dicembre',
+        },
+        weeks: {
+            Mon: 'Lun',
+            Tue: 'Mar',
+            Wed: 'Mer',
+            Thu: 'Gio',
+            Fri: 'Ven',
+            Sat: 'Sab',
+            Sun: 'Dom',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Popconfirm: {
+        confirm: 'Conferma',
+        cancel: 'Cancella',
+    },
+    Navigation: {
+        collapseText: 'Comprimi la barra laterale',
+        expandText: 'Espandi la barra laterale',
+    },
+    Table: {
+        emptyText: 'Nessun risultato',
+        pageText: 'Mostra ${currentStart} a ${currentEnd} di ${total}',
+    },
+    Select: {
+        emptyText: 'Nessun risultato',
+        createText: 'Crea',
+    },
+    Tree: {
+        emptyText: 'Nessun risultato',
+        searchPlaceholder: 'Cerca',
+    },
+    Cascader: {
+        emptyText: 'Nessun risultato',
+    },
+    List: {
+        emptyText: 'Nessun risultato',
+    },
+    Calendar: {
+        allDay: 'Tutto il giorno',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: '${remained} più',
+    },
+    Upload: {
+        mainText: 'Clicca per caricare il file o trascina il file qui',
+        illegalTips: 'Questo tipo di file non è supportato',
+        legalTips: 'Rilascia e inizia a caricare',
+        retry: 'Riprova',
+        replace: 'Sostituisci file',
+        clear: 'Cancella',
+        selectedFiles: 'File selezionati',
+        illegalSize: 'Dimensione file errata',
+        fail: 'Caricamento fallito',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Cerca',
+    },
+    Typography: {
+        copy: 'Copia',
+        copied: 'Copiato',
+        expand: 'Espandi',
+        collapse: 'Comprimi',
+    },
+    Transfer: {
+        emptyLeft: 'Nessun dato',
+        emptySearch: 'Nessun risultato trovato',
+        emptyRight: 'Nessun contenuto, controlla da sinistra',
+        placeholder: 'Cerca',
+        clear: 'Cancella',
+        selectAll: 'Seleziona tutto',
+        clearSelectAll: 'Deseleziona tutto',
+        total: 'Totale ${total} elementi',
+        selected: '${total} elementi selezionati',
+    },
+};
+
+// [i18n-Italian]
+export default local;

package/modal/ModalContent.tsx

@@ -31,7 +31,8 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
         getContainerContext: PropTypes.func,
         contentClassName: PropTypes.string,
         maskClassName: PropTypes.string,
-        onAnimationEnd: PropTypes.func
+        onAnimationEnd: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -88,15 +89,16 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             },
             getMouseState: () => this.state.dialogMouseDown,
             modalDialogFocus: () => {
+                const { preventScroll } = this.props;
                 let activeElementInDialog;
                 if (this.modalDialogRef) {
                     const activeElement = FocusTrapHandle.getActiveElement();
                     activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
                     this.focusTrapHandle?.destroy();
-                    this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current);
+                    this.focusTrapHandle = new FocusTrapHandle(this.modalDialogRef.current, { preventScroll });
                 }
                 if (!activeElementInDialog) {
-                    this.modalDialogRef?.current?.focus();
+                    this.modalDialogRef?.current?.focus({ preventScroll });
                 }
             },
             modalDialogBlur: () => {
@@ -105,8 +107,9 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             },
             prevFocusElementReFocus: () => {
                 const { prevFocusElement } = this.state;
+                const { preventScroll } = this.props;
                 const focus = get(prevFocusElement, 'focus');
-                isFunction(focus) && prevFocusElement.focus();
+                isFunction(focus) && prevFocusElement.focus({ preventScroll });
             }
         };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.14.0-beta.2",
+    "version": "2.15.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.14.0-beta.2",
-        "@douyinfe/semi-foundation": "2.14.0-beta.2",
-        "@douyinfe/semi-icons": "2.14.0-beta.2",
-        "@douyinfe/semi-illustrations": "2.14.0-beta.2",
-        "@douyinfe/semi-theme-default": "2.14.0-beta.2",
+        "@douyinfe/semi-animation-react": "2.15.0",
+        "@douyinfe/semi-foundation": "2.15.0",
+        "@douyinfe/semi-icons": "2.15.0",
+        "@douyinfe/semi-illustrations": "2.15.0",
+        "@douyinfe/semi-theme-default": "2.15.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b95b9eb9d6ded3aac3dc53afc48534d4e748a2e6",
+    "gitHead": "236be8e52864297171e3b08da20475139dadd633",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.14.0-beta.2",
+        "@douyinfe/semi-scss-compile": "2.15.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/radio.tsx

@@ -44,6 +44,7 @@ export type RadioProps = {
     addonId?: string;
     extraId?: string;
     name?: string;
+    preventScroll?: boolean;
 };
 
 export interface RadioState {
@@ -77,6 +78,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         addonClassName: PropTypes.string,
         type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]), // Button style type
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps: Partial<RadioProps> = {

package/radio/radioInner.tsx

@@ -26,6 +26,7 @@ export interface RadioInnerProps extends BaseProps {
     focusInner?: boolean;
     onInputFocus?: (e: any) => void;
     onInputBlur?: (e: any) => void;
+    preventScroll?: boolean;
 }
 
 interface RadioInnerState {
@@ -45,6 +46,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
         focusInner: PropTypes.bool,
         onInputFocus: PropTypes.func,
         onInputBlur: PropTypes.func,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -95,7 +97,8 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
     }
 
     focus() {
-        this.inputEntity.focus();
+        const { preventScroll } = this.props;
+        this.inputEntity.focus({ preventScroll });
     }
 
     onChange(e: React.ChangeEvent<HTMLInputElement>) {

package/rating/__test__/rating.test.js

@@ -23,7 +23,7 @@ describe('Rating', () => {
 
     it('custom count', () => {
         const R1 = mount(<Rating count={10} />);
-        expect(R1.find(`.${BASE_CLASS_PREFIX}-rating`).children().length).toEqual(10);
+        expect(R1.find(`.${BASE_CLASS_PREFIX}-rating`).children().length).toEqual(11);
     });
 
     it('different sizes', () => {
@@ -61,7 +61,7 @@ describe('Rating', () => {
         };
         const R = getRating(props);
         expect(
-            R.find(`.${BASE_CLASS_PREFIX}-rating-star-first`)
+            R.find(`.${BASE_CLASS_PREFIX}-rating-star-second`)
                 .at(0)
                 .getDOMNode().textContent
         ).toEqual('赞');
@@ -119,7 +119,7 @@ describe('Rating', () => {
             allowHalf: true
         };
         const R = getRating(props);
-        let stars = R.find('div[role="radio"]');
+        let stars = R.find(`.${BASE_CLASS_PREFIX}-rating-star-wrapper`);
         const event = {};
         stars.at(1).simulate('mouseMove', event);
         expect(spyHoverChange.calledWithMatch(2)).toBe(true);
@@ -173,20 +173,6 @@ describe('Rating', () => {
         expect(spyOnBlur.calledOnce).toBe(true);
     });
 
-    it('autoFocus &  ref.focus() & ref.blur()', () => {
-        let onFocus = () => {};
-        let spyOnFocus = sinon.spy(onFocus);
-        let props = {
-            autoFocus: true,
-        };
-        const R = getRating(props);
-        expect(document.activeElement.tagName).toEqual('UL');
-        R.instance().blur();
-        expect(document.activeElement.tagName).toEqual('BODY');
-        R.instance().focus();
-        expect(document.activeElement.tagName).toEqual('UL');
-    });
-
     it('onKeyDown', () => {
         let onKeyDown = () => {};
         let spyOnKeydown = sinon.spy(onKeyDown);
@@ -196,11 +182,9 @@ describe('Rating', () => {
         };
         const R = getRating(props);
         let ul = R.find('ul');
-        let keyCodeLeft = 37;
-        let keyCodeRight = 39;
-        ul.simulate('keyDown', { keyCode: keyCodeLeft });
+        ul.simulate('keyDown', { key: 'ArrowLeft' });
         expect(R.state().value).toEqual(1);
-        ul.simulate('keyDown', { keyCode: keyCodeRight });
+        ul.simulate('keyDown', { key: 'ArrowRight' });
         expect(R.state().value).toEqual(2);
         expect(spyOnKeydown.callCount).toEqual(2);
         let allowHalfProps = {
@@ -209,10 +193,10 @@ describe('Rating', () => {
         };
         const HalfR = getRating(allowHalfProps);
         let halfUl = HalfR.find('ul');
-        halfUl.simulate('keyDown', { keyCode: keyCodeLeft });
+        halfUl.simulate('keyDown', { key: 'ArrowLeft' });
         expect(HalfR.state().value).toEqual(2);
-        halfUl.simulate('keyDown', { keyCode: keyCodeRight });
-        halfUl.simulate('keyDown', { keyCode: keyCodeRight });
+        halfUl.simulate('keyDown', { key: 'ArrowRight' });
+        halfUl.simulate('keyDown', { key: 'ArrowRight' });
         expect(HalfR.state().value).toEqual(3);
     });
 
@@ -227,12 +211,10 @@ describe('Rating', () => {
         };
         const RWithWrapper = mount(<ConfigProvider direction='rtl'><Rating {...props}/></ConfigProvider>);
         let ul = RWithWrapper.find('ul');
-        let keyCodeLeft = 37;
-        let keyCodeRight = 39;
-        ul.simulate('keyDown', { keyCode: keyCodeLeft });
+        ul.simulate('keyDown', { key: 'ArrowLeft' });
         let R = RWithWrapper.find(Rating);
         expect(R.state().value).toEqual(3);
-        ul.simulate('keyDown', { keyCode: keyCodeRight });
+        ul.simulate('keyDown', { key: 'ArrowRight' });
         expect(R.state().value).toEqual(2);
         // allowHalf
         let allowHalfProps = {
@@ -244,10 +226,10 @@ describe('Rating', () => {
         let HalfR = HalfRWithWrapper.find(Rating);
         let stars = HalfR.find('div[role="radio"]');
 
-        halfUl.simulate('keyDown', { keyCode: keyCodeLeft });
+        halfUl.simulate('keyDown', { key: 'ArrowLeft' });
         expect(HalfR.state().value).toEqual(3);
-        halfUl.simulate('keyDown', { keyCode: keyCodeRight });
-        halfUl.simulate('keyDown', { keyCode: keyCodeRight });
+        halfUl.simulate('keyDown', { key: 'ArrowRight' });
+        halfUl.simulate('keyDown', { key: 'ArrowRight' });
         expect(HalfR.state().value).toEqual(2);
     })