Bug fix and enhancement

Fix : #13
Enhancement : #10

Author: drivardxrm

Solution/Other/Solution.xml

@@ -8,7 +8,7 @@
       <LocalizedName description="TimePicker PCF" languagecode="1033" />
     </LocalizedNames>
     <Descriptions />
-    <Version>1.0</Version>
+    <Version>1.0.0.7</Version>
     <!-- Solution Package Type: Unmanaged(0)/Managed(1)/Both(2)-->
     <Managed>2</Managed>
     <Publisher>

TimePicker/ControlManifest.Input.xml

@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="DR" constructor="TimePicker" version="1.0.9" display-name-key="TimePicker" description-key="TimePicker control based on React time Picker (rc-time-picker)" control-type="standard" preview-image="img/timepicker-preview.png"> 
+  <control namespace="DR" constructor="TimePicker" version="1.0.10" display-name-key="TimePicker" description-key="TimePicker control based on React time Picker (rc-time-picker)" control-type="standard" preview-image="img/timepicker-preview.png"> 
     <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
     <property name="hourvalue" display-name-key="Hour Value Field" description-key="Bind this property to the field where you want to store the hour value" of-type="Whole.None" usage="bound" required="true" />
     <property name="minutevalue" display-name-key="Minute Value Field" description-key="Bind this property to the field where you want to store the minute value" of-type="Whole.None" usage="bound" required="true" />
 
-
+    <property name="displaytype" display-name-key="Display Type" description-key="Display Type" of-type="Enum" usage="input" required="true">
+      <value name="12hrs" display-name-key="12hrs" description-key="12hrs">12 hrs</value>
+      <value name="24hrs" display-name-key="24hrs" description-key="24hrs">24 hrs</value>
+    </property>
 
     <resources>
       <code path="index.ts" order="1"/>

TimePicker/TimePickerTextBox.tsx

@@ -6,14 +6,16 @@ import { FontIcon,Stack,TextField,mergeStyles} from "@fluentui/react";
 
 
 
-//todo : parametrize this
-const format = 'h:mm a';
+
 
 export interface IProps {
     hourvalue: number|undefined;
     minutevalue: number|undefined;
     readonly:boolean;
     masked:boolean;
+    format:"h:mm a"|"k:mm";
+    use12Hours:boolean;
+
 
     onChange: (hourvalue:number|undefined,minutevalue:number|undefined) => void;
 }
@@ -97,8 +99,8 @@ const TimePickerTextBox = (props : IProps): JSX.Element => {
                     value={timevalue}
                     className="time"
                     onChange={handleChange}
-                    format={format}
-                    use12Hours
+                    format={props.format}
+                    use12Hours={props.use12Hours}
                     inputReadOnly
                     disabled={props.readonly}
                 />

TimePicker/css/TimePicker.css

@@ -42,7 +42,7 @@
   width: 100%;
   position: relative;
   display: inline-block;
-  padding: 4px 7px;
+  padding: 4px 0px;
   height: 35px;
   cursor: text;
   font-size: 14px;

TimePicker/index.ts

@@ -5,7 +5,7 @@ import TimePickerTextBox , {IProps} from "./TimePickerTextBox";
 
 export class TimePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
 
-	private _firstrender:boolean = true; //will be put to false after first render
+	
 	private _hourvalue:number|undefined;
 	private _minutevalue:number|undefined;
 	private _notifyOutputChanged:() => void;
@@ -14,6 +14,8 @@ export class TimePicker implements ComponentFramework.StandardControl<IInputs, I
 								minutevalue : undefined,
 								readonly:false,
 								masked:false, 
+								format:"h:mm a",
+								use12Hours:true,
 								onChange : this.notifyChange.bind(this) };
 
 	/**
@@ -64,24 +66,23 @@ export class TimePicker implements ComponentFramework.StandardControl<IInputs, I
 		//Prepare props for component rendering
 		this._hourvalue = context.parameters.hourvalue.raw !== null ? context.parameters.hourvalue.raw : undefined;
 		this._minutevalue = context.parameters.minutevalue.raw !== null ? context.parameters.minutevalue.raw : undefined;
+		let display = context.parameters.displaytype.raw;
+		
 
-		//RENDER ONLY IF DIFFERENT
-		if(this.shouldRender())
-		{
 			//update the props
 			this._props.hourvalue = this._hourvalue;
 			this._props.minutevalue = this._minutevalue;
 			this._props.readonly = isReadOnly;
 			this._props.masked = isMasked;
+			this._props.use12Hours = display === "12 hrs";
+			this._props.format = display === "12 hrs" ? "h:mm a" : "k:mm";
 
 			ReactDOM.render(
 				React.createElement(TimePickerTextBox, this._props)
 				, this._container
 			);
-			if(this._firstrender){
-				this._firstrender = false;
-			}
-		}
+			
+		
 
 	}
 
@@ -116,14 +117,5 @@ export class TimePicker implements ComponentFramework.StandardControl<IInputs, I
 		this._notifyOutputChanged();  //=> will trigger getOutputs
 	}
 
-	private shouldRender = ():boolean => 
-	{
-		return this._firstrender ||                            //Always render on first pass
-			((this._props.hourvalue !== this._hourvalue        //Values received must have changed
-				|| 
-			this._props.minutevalue !== this._minutevalue) &&
-			(this._hourvalue === undefined && this._minutevalue === undefined //the 2 Values received must have values or be undefined at the same time
-				|| 
-			this._hourvalue !== undefined && this._minutevalue !== undefined))
-	}
+	
 }