Merge branch 'GuidoZam-patch-fieldcollectiondata' into dev

Author: joelfmrodrigues

src/controls/fieldCollectionData/ICustomCollectionField.ts

@@ -97,5 +97,6 @@ export enum CustomCollectionFieldType {
   peoplepicker,
   fabricIcon,
   url,
+  date,
   custom
 }

src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx

@@ -14,9 +14,9 @@ import { PeoplePicker, PrincipalType } from "../../peoplepicker";
 import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
 import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
-import { CollectionNumberField } from '../collectionNumberField';
 import { Guid } from '@microsoft/sp-core-library';
 import { FieldValidator } from '../FieldValidator';
+import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 
 export class CollectionDataItem extends React.Component<ICollectionDataItemProps, ICollectionDataItemState> {
@@ -487,9 +487,16 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           onRenderOption={field.onRenderOption}
           className="PropertyFieldCollectionData__panel__dropdown-field" />;
       case CustomCollectionFieldType.number:
-        return (
-          <CollectionNumberField field={field} item={item} disableEdit={disableFieldOnEdit} fOnValueChange={this.onValueChanged} fValidation={this.fieldValidation} />
-        );
+        return <TextField placeholder={field.placeholder || field.title}
+          className={styles.collectionDataField}
+          value={item[field.id] ? item[field.id] : ""}
+          required={field.required}
+          disabled={disableFieldOnEdit}
+          type='number'
+          onChange={(e, value) => this.onValueChanged(field.id, value)}
+          deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
+          onGetErrorMessage={async (value: string) => await this.fieldValidation(field, value)}
+          inputClassName="PropertyFieldCollectionData__panel__number-field" />;
       case CustomCollectionFieldType.fabricIcon:
         return (
           <CollectionIconField field={field} item={item} disableEdit={disableFieldOnEdit} fOnValueChange={this.onValueChanged} fValidation={this.fieldValidation} />
@@ -504,6 +511,16 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
           onGetErrorMessage={async (value: string) => this.urlFieldValidation(field, value, item)}
           inputClassName="PropertyFieldCollectionData__panel__url-field" />;
+      case CustomCollectionFieldType.date:
+        return <DatePicker
+          className={styles.collectionDataField}
+          placeholder={field.placeholder || field.title}
+          isRequired={field.required}
+          disabled={disableFieldOnEdit}
+          value={item[field.id] ? new Date(item[field.id]) : undefined}
+          onSelectDate={(date) => { this.onValueChanged(field.id, date) }}
+          formatDate={(date) => { return date ? date?.toLocaleDateString() : ""; }}
+          />;
       case CustomCollectionFieldType.custom:
         if (field.onCustomRender) {
           return field.onCustomRender(field, item[field.id], this.onValueChanged, item, item.uniqueId, this.onCustomFieldValidation);

src/controls/fieldCollectionData/collectionNumberField/CollectionNumberField.tsx

@@ -2043,7 +2043,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             key={"FieldCollectionData"}
             label={"Fields Collection"}
             itemsPerPage={3}
-            manageBtnLabel={"Manage"} onChanged={(value) => { console.log(value); }}
+            manageBtnLabel={"Manage"}
+            onChanged={(value) => { console.log(value); }}
             panelHeader={"Manage values"}
             enableSorting={true}
             panelProps={{ type: PanelType.custom, customWidth: "98vw" }}
@@ -2052,9 +2053,9 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               { id: "Field2", title: "Number field", type: CustomCollectionFieldType.number },
               { id: "Field3", title: "URL field", type: CustomCollectionFieldType.url },
               { id: "Field4", title: "Boolean field", type: CustomCollectionFieldType.boolean },
-              { 
+              {
                 id: "Field5", title: "People picker", type: CustomCollectionFieldType.peoplepicker, required: true,
-                minimumUsers: 2, minimumUsersMessage: "2 Users is the minimum", maximumUsers: 3, 
+                minimumUsers: 2, minimumUsersMessage: "2 Users is the minimum", maximumUsers: 3,
               },
               {
                 id: "Field6", title: "Combo Single", type: CustomCollectionFieldType.combobox, required: true,
@@ -2063,8 +2064,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               {
                 id: "Field7", title: "Combo Multi", type: CustomCollectionFieldType.combobox,
                 allowFreeform: true, multiSelect: true, options: [{key: "choice 1", text: "choice 1"}, {key: "choice 2", text: "choice 2"}, {key: "choice 3", text: "choice 3"}]
-              },              
-              
+              },
+              { id: "Field8", title: "Date field", type: CustomCollectionFieldType.date, placeholder: "Select a date" }
             ]}
             value={this.getRandomCollectionFieldData()}
 
@@ -2665,14 +2666,19 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
   private getRandomCollectionFieldData = () => {
     let result = [];
     for (let i = 1; i < 16; i++) {
-      result.push({ 
-          "Field1": `String${i}`, 
-          "Field2": i, 
-          "Field3": "https://pnp.github.io/", 
-          "Field4": true,  
+
+      const sampleDate = new Date();
+      sampleDate.setDate(sampleDate.getDate() + i);
+
+      result.push({
+          "Field1": `String${i}`,
+          "Field2": i,
+          "Field3": "https://pnp.github.io/",
+          "Field4": true,
           "Field5": null,
           "Field6": {key: "choice 1", text: "choice 1"},
-          "Field7": [{key: "choice 1", text: "choice 1"}, {key: "choice 2", text: "choice 2"}]
+          "Field7": [{key: "choice 1", text: "choice 1"}, {key: "choice 2", text: "choice 2"}],
+          "Field8": sampleDate
         });
     }
     return result;