Update to 1.4.1 Framework + French translation (#470)

* Update to 1.4.1 Framework

* French translation

samples/react-list-form/.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.2.0",
+    "version": "1.4.1",
     "libraryName": "react-form-webpart",
     "libraryId": "373a20ef-dfc6-456a-95ec-171de3c94581",
     "environment": "spo"

samples/react-list-form/config/config.json

@@ -11,7 +11,9 @@
       ]
     }
   },
-  "externals": {},
+  "externals": {
+    "moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment-with-locales.min.js"
+  },
   "localizedResources": {
     "ListFormWebPartStrings": "lib/webparts/listForm/loc/{locale}.js",
     "ListFormStrings": "lib/webparts/listForm/components/loc/{locale}.js",

samples/react-list-form/config/package-solution.json

@@ -4,7 +4,13 @@
     "name": "react-form-webpart-client-side-solution",
     "id": "373a20ef-dfc6-456a-95ec-171de3c94581",
     "version": "1.0.0.0",
-    "skipFeatureDeployment": true
+    "title": "List form",
+    "supportedLocales": [
+      "en-US",
+      "fr-FR"
+    ],
+    "skipFeatureDeployment": true,
+    "includeClientSideAssets": true
   },
   "paths": {
     "zippedPackage": "solution/react-form-webpart.sppkg"

samples/react-list-form/package.json

@@ -11,27 +11,27 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "~1.3.4",
+    "@microsoft/sp-core-library": "~1.4.1",
-    "@microsoft/sp-office-ui-fabric-core": "^1.3.4",
+    "@microsoft/sp-office-ui-fabric-core": "~1.4.1",
-    "@microsoft/sp-webpart-base": "~1.3.4",
+    "@microsoft/sp-webpart-base": "~1.4.1",
     "@types/react": "15.0.38",
     "@types/react-addons-shallow-compare": "0.14.17",
     "@types/react-addons-test-utils": "0.14.15",
     "@types/react-addons-update": "0.14.14",
-    "@types/react-dnd": "^2.0.34",
+    "@types/react-dnd": "~2.0.34",
     "@types/react-dom": "0.14.18",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
-    "moment": "^2.19.1",
+    "moment": "~2.22.0",
     "react": "15.4.2",
-    "react-dnd": "^2.5.4",
+    "react-dnd": "~2.5.4",
-    "react-dnd-html5-backend": "^2.5.4",
+    "react-dnd-html5-backend": "~2.5.4",
     "react-dom": "15.4.2",
-    "spfx-uifabric-themes": "^0.1.3"
+    "spfx-uifabric-themes": "~0.1.3"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.3.4",
+    "@microsoft/sp-build-web": "~1.4.1",
-    "@microsoft/sp-module-interfaces": "~1.3.4",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "~1.3.4",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
     "gulp": "~3.9.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",

samples/react-list-form/src/common/_theming.module.scss

@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-core/dist/sass/References';
+@import '~office-ui-fabric-react/dist/sass/References';
 @import './node_modules/spfx-uifabric-themes/office.theme.vars';
 
 /* themed tokens */

samples/react-list-form/src/webparts/listForm/ListFormWebPart.manifest.json

@@ -15,9 +15,17 @@
 
   "preconfiguredEntries": [{
     "groupId": "48e2d130-7eb7-4ee9-aa23-5ddbdfd175b1",
-    "group": { "default": "Under Development" },
+    "group": {
-    "title": { "default": "List Form" },
+      "default": "Under Development"
-    "description": { "default": "Shows a form for the selected list" },
+    },
+    "title": {
+      "default": "List Form",
+      "fr-fr": "Formulaire de liste"
+    },
+    "description": {
+      "default": "Shows a form for the selected list",
+      "fr-fr": "Affiche un formulaire pour la liste sélectionnée"
+    },
     "officeFabricIconFontName": "PreviewLink",
     "properties": {
       "title": "List Form",

samples/react-list-form/src/webparts/listForm/components/DraggableComponent.module.scss

@@ -1,6 +1,6 @@
 
 // import
-@import '../../../common/theming';
+@import '../../../common/theming.module';
 
 .draggableComponent {
     /*border: '1px dashed gray',

samples/react-list-form/src/webparts/listForm/components/DraggableComponent.tsx

@@ -5,6 +5,7 @@ import { css } from 'office-ui-fabric-react/lib/Utilities';
 
 import styles from './DraggableComponent.module.scss';
 
+import * as strings from 'ListFormStrings';
 
 const dragSource = {
   beginDrag(props: IDraggableComponentProps) {
@@ -70,8 +71,8 @@ export default class DraggableComponent extends React.Component<IDraggableCompon
       <div className={css('ard-draggableComponent', styles.draggableComponent, isDragging ? styles.isDragging : null)}>
         {children}
         <div className={css(styles.toolbar)}>
-          <button type="button" className={css('ard-draggableComponent', styles.button)} title="Move field" ><i className="ms-Icon ms-Icon--Move"></i></button>
+          <button type="button" className={css('ard-draggableComponent', styles.button)} title={strings.MoveField} ><i className="ms-Icon ms-Icon--Move"></i></button>
-          <button type="button" className={css('ard-draggableComponent', styles.button)} title="Remove field" onClick={() => this.props.removeField(this.props.index)}><i className="ms-Icon ms-Icon--Delete"></i></button>
+          <button type="button" className={css('ard-draggableComponent', styles.button)} title={strings.RemoveField} onClick={() => this.props.removeField(this.props.index)}><i className="ms-Icon ms-Icon--Delete"></i></button>
         </div>
       </div>,
     ));

samples/react-list-form/src/webparts/listForm/components/ListForm.module.scss

@@ -1,4 +1,4 @@
-@import '../../../common/theming';
+@import '../../../common/theming.module';
 
 .listForm {
 

samples/react-list-form/src/webparts/listForm/components/formFields/FormField.module.scss

@@ -1,6 +1,6 @@
 /** form field styles */
 
-@import '../../../../common/theming';
+@import '../../../../common/theming.module';
 
 .formField {
 

samples/react-list-form/src/webparts/listForm/components/formFields/SPFormField.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../common/theming';
+@import '../../../../common/theming.module';
 
 .dropDownFormField{
 

samples/react-list-form/src/webparts/listForm/components/formFields/loc/en-us.js

@@ -1,15 +1,15 @@
 define([], function() {
     return {
-        UnsupportedFieldType: "Unsupported field type",
+        UnsupportedFieldType: 'Unsupported field type',
-        InvalidNumberValue: "The value should be a number, actual is",
+        InvalidNumberValue: 'The value should be a number, actual is',
-        ToggleOnAriaLabel: "This toggle is checked. Press to uncheck.",
+        ToggleOnAriaLabel: 'This toggle is checked. Press to uncheck.',
-        ToggleOffAriaLabel: "This toggle is unchecked. Press to check.",
+        ToggleOffAriaLabel: 'This toggle is unchecked. Press to check.',
-        ToggleOnText: "Yes",
+        ToggleOnText: 'Yes',
-        ToggleOffText: "No",
+        ToggleOffText: 'No',
-        TextFormFieldPlaceholder: "Enter text here",
+        TextFormFieldPlaceholder: 'Enter text here',
-        DateFormFieldPlaceholder: "Enter a date",
+        DateFormFieldPlaceholder: 'Enter a date',
-        NumberFormFieldPlaceholder: "Enter value here",        
+        NumberFormFieldPlaceholder: 'Enter value here',
-        LookupEmptyOptionText: "(None)",
+        LookupEmptyOptionText: '(None)',
 
         // IDatePickerStrings
         months: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],

samples/react-list-form/src/webparts/listForm/components/formFields/loc/fr-fr.js

@@ -0,0 +1,28 @@
+define([], function() {
+    return {
+        UnsupportedFieldType: 'Type de champ non pris en charge',
+        InvalidNumberValue: 'La valeur doit être un nombre, la valeur actuel est',
+        ToggleOnAriaLabel: 'Cette checkbox est cochée. Appuyez pour décocher.',
+        ToggleOffAriaLabel: 'Cette checkbox n\'est pas cochée. Appuyez pour vérifier.',
+        ToggleOnText: 'Oui',
+        ToggleOffText: 'Non',
+        TextFormFieldPlaceholder: 'Entrez le texte ici',
+        DateFormFieldPlaceholder: 'Entrez une date',
+        NumberFormFieldPlaceholder: 'Entrez la valeur ici',
+        LookupEmptyOptionText: '(Aucun)',
+
+        // IDatePickerStrings
+        months: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
+        shortMonths: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jui', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc' ],
+        days: [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ],
+        shortDays: [ 'D', 'L', 'M', 'M', 'J', 'V', 'S' ],
+        goToToday: 'Aller à aujourd\'hui',
+        prevMonthAriaLabel: 'Aller au mois précédent',
+        nextMonthAriaLabel: 'Aller au mois suivant',
+        prevYearAriaLabel: 'Aller à l\'année précédente',
+        nextYearAriaLabel: 'Aller à l\'année prochaine',
+        isRequiredErrorMessage: 'Cette date est requise.',
+        invalidInputErrorMessage: 'Format de date incorrect.'
+
+    }
+});

samples/react-list-form/src/webparts/listForm/components/loc/en-us.js

@@ -1,15 +1,17 @@
 define([], function() {
     return {
-        "SaveButtonText": "Save",
+        'SaveButtonText': 'Save',
-        "CancelButtonText": "Cancel",
+        'CancelButtonText': 'Cancel',
-        "AddNewFieldAction": "Add a new field to form",
+        'AddNewFieldAction': 'Add a new field to form',
-        "LoadingFormIndicator": "Loading the form...",
+        'LoadingFormIndicator': 'Loading the form...',
-        "ErrorLoadingSchema": "Error loading schema for list ",
+        'ErrorLoadingSchema': 'Error loading schema for list ',
-        "ConfigureListMessage": "Please configure a list in the web part's editor first.",
+        'ConfigureListMessage': 'Please configure a list in the web part\'s editor first.',
-        "RequiredValueMessage": "Please enter a value!",
+        'RequiredValueMessage': 'Please enter a value!',
-        "ErrorLoadingData": "Error loading data for item with ID ",
+        'ErrorLoadingData': 'Error loading data for item with ID ',
-        "ItemSavedSuccessfully": "Item saved successfully.",
+        'ItemSavedSuccessfully': 'Item saved successfully.',
-        "FieldsErrorOnSaving": 'The item could not be saved. Please check detailed error messages on the fields below.',
+        'FieldsErrorOnSaving': 'The item could not be saved. Please check detailed error messages on the fields below.',
-        "ErrorOnSavingListItem": "Error on loading lists: ",
+        'ErrorOnSavingListItem': 'Error on loading lists: ',
+        'MoveField' : "Move field",
+        'RemoveField' : "Remove field"
     }
 });

samples/react-list-form/src/webparts/listForm/components/loc/fr-fr.js

@@ -0,0 +1,17 @@
+define([], function() {
+    return {
+        'SaveButtonText': 'Sauvegarder',
+        'CancelButtonText': 'Annuler',
+        'AddNewFieldAction': 'Ajouter un nouveau champ au formulaire',
+        'LoadingFormIndicator': 'Chargement du formulaire ...',
+        'ErrorLoadingSchema': 'Erreur lors du chargement du schéma pour la liste ',
+        'ConfigureListMessage': 'Veuillez d\'abord configurer une liste dans l\'éditeur du WebPart.',
+        'RequiredValueMessage': 'Veuillez entrer une valeur !',
+        'ErrorLoadingData': 'Erreur lors du chargement des données pour l\'élément avec un ID ',
+        'ItemSavedSuccessfully': 'Item enregistré avec succès.',
+        'FieldsErrorOnSaving': 'L\'item n\'a pas pu être enregistré. Veuillez vérifier les messages d\'erreur détaillés dans les champs ci-dessous.',
+        'ErrorOnSavingListItem': 'Erreur de chargement des listes : ',
+        'MoveField' : "Déplacer le champ",
+        'RemoveField' : "Supprimer le champ"
+    }
+});

samples/react-list-form/src/webparts/listForm/components/loc/listformstrings.d.ts

@@ -5,15 +5,16 @@ declare interface IListFormStrings {
     LoadingFormIndicator: string;
     ErrorLoadingSchema: string;
     ConfigureListMessage: string;
-    RequiredValueMessage: string;s
+    RequiredValueMessage: string;
     ErrorLoadingData: string;
     ItemSavedSuccessfully: string;
     FieldsErrorOnSaving: string;
     ErrorOnSavingListItem: string;
+    MoveField :string;
+    RemoveField : string;
   }
 
   declare module 'ListFormStrings' {
     const strings: IListFormStrings;
     export = strings;
   }
-  

samples/react-list-form/src/webparts/listForm/loc/en-us.js

@@ -1,19 +1,19 @@
 define([], function() {
   return {
-    "PropertyPaneDescription": "Configure the list form here. Once the list is configured fields can be moved, inserted and removed in the webpart's content itself.",
+    'PropertyPaneDescription': 'Configure the list form here. Once the list is configured fields can be moved, inserted and removed in the webpart\'s content itself.',
-    "BasicGroupName": "Settings",
+    'BasicGroupName': 'Settings',
-    "TitleFieldLabel": "Title",
+    'TitleFieldLabel': 'Title',
-    "DescriptionFieldLabel": "Description",
+    'DescriptionFieldLabel': 'Description',
-    "ListFieldLabel": "List",
+    'ListFieldLabel': 'List',
-    "FormTypeFieldLabel": "Form Type",
+    'FormTypeFieldLabel': 'Form Type',
-    "ItemIdFieldLabel": "Item ID",
+    'ItemIdFieldLabel': 'Item ID',
-    "ItemIdFieldDescription" : "Enter either a number for the ID or the query string parameter name to use for the ID.",
+    'ItemIdFieldDescription' : 'Enter either a number for the ID or the query string parameter name to use for the ID.',
-    "ShowUnsupportedFieldsLabel": "Show unsupported fields",
+    'ShowUnsupportedFieldsLabel': 'Show unsupported fields',
-    "RedirectUrlFieldLabel": "URL to redirect after saving (optional)",
+    'RedirectUrlFieldLabel': 'URL to redirect after saving (optional)',
-    "RedirectUrlFieldDescription": "Can contain [ID] as a placeholder to be replaced by ID of updated or created item. Example: /list/Test/DispForm.aspx?ID=[ID]",
+    'RedirectUrlFieldDescription': 'Can contain [ID] as a placeholder to be replaced by ID of updated or created item. Example: /list/Test/DispForm.aspx?ID=[ID]',
-    "LocalWorkbenchUnsupported": "Running this web part in your local workbench is not supported. Please run it inside your SharePoint site.",
+    'LocalWorkbenchUnsupported': 'Running this web part in your local workbench is not supported. Please run it inside your SharePoint site.',
-    "MissingListConfiguration": "Please configure a SharePoint list in the web part's properties.",
+    'MissingListConfiguration': 'Please configure a SharePoint list in the web part\'s properties.',
-    "ConfigureWebpartButtonText": "Configure Web Part",
+    'ConfigureWebpartButtonText': 'Configure Web Part',
-    "ErrorOnLoadingLists": "Error on loading lists: ",
+    'ErrorOnLoadingLists': 'Error on loading lists: ',
     }
 });

samples/react-list-form/src/webparts/listForm/loc/fr-fr.js

@@ -0,0 +1,19 @@
+define([], function() {
+  return {
+    'PropertyPaneDescription': 'Configurez le formulaire de la liste ici. Une fois la liste configurée, les champs peuvent être déplacés, insérés et supprimés dans le contenu du webpart.',
+    'BasicGroupName': 'Paramètres',
+    'TitleFieldLabel': 'Titre',
+    'DescriptionFieldLabel': 'Description',
+    'ListFieldLabel': 'Liste',
+    'FormTypeFieldLabel': 'Type de formulaire',
+    'ItemIdFieldLabel': 'ID de l\'item',
+    'ItemIdFieldDescription' : 'Entrez un nombre pour l\'ID ou le nom du paramètre de chaîne de requête à utiliser pour l\'ID.',
+    'ShowUnsupportedFieldsLabel': 'Afficher les champs non pris en charge',
+    'RedirectUrlFieldLabel': 'URL de redirection après l\'enregistrement (facultatif)',
+    'RedirectUrlFieldDescription': 'Peut contenir [ID] comme placeholder remplacable par l\'ID de l\'élément mis à jour ou créé. Exemple: /list/Test/DispForm.aspx?ID=[ID]',
+    'LocalWorkbenchUnsupported': 'L\'exécution du WebPart dans votre Workbench local n\'est pas prise en charge. Veuillez l\'exécuter dans votre site SharePoint.',
+    'MissingListConfiguration': 'Veuillez configurer une liste SharePoint dans les propriétés du WebPart.',
+    'ConfigureWebpartButtonText': 'Configurer le WebPart',
+    'ErrorOnLoadingLists': 'Erreur de chargement des listes : ',
+    }
+});

samples/react-list-form/tsconfig.json

@@ -1,3 +1,4 @@
+
 {
   "compilerOptions": {
     "target": "es5",
@@ -7,10 +8,19 @@
     "declaration": true,
     "sourceMap": true,
     "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
     "types": [
       "es6-promise",
-      "es6-collections",
       "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
     ]
   }
 }