more typing support, cosmetic changes

Author: AJIXuMuK

docs/documentation/docs/controls/LocationPicker.md

@@ -71,4 +71,4 @@ The `LocationPicker` can be configured with the following properties:
 | className | string  | no | Applies custom styling |
 | label | string  | no | Label to use for the control. |
 | placeholder | string  | no | Placeholder label to show in the dropdown. |
-| onSelectionChanged | (locItem: ILocationPickerItem) => void | no | The method that returns location data JSON object. |
+| onChange | (locItem: ILocationPickerItem) => void | no | The method that returns location data JSON object. |

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -195,7 +195,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             context={context}
             disabled={disabled}
             placeholder={placeholder}
-            onSelectionChanged={(newValue) => { this.onChange(newValue); }}
+            onChange={(newValue) => { this.onChange(newValue); }}
             defaultValue={defaultValue}
             errorMessage={errorText}
           />
@@ -503,7 +503,13 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
   }
 
   private onURLChange = (value: string, isUrl: boolean) => {
-    let currValue = this.state.changedValue || this.props.fieldDefaultValue || {
+    const {
+      fieldDefaultValue,
+      onChanged,
+      columnInternalName
+    } = this.props;
+
+    let currValue = this.state.changedValue || fieldDefaultValue || {
       Url: '',
       Description: ''
     };
@@ -521,7 +527,10 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
     this.setState({
       changedValue: currValue
     });
-    this.props.onChanged(this.props.columnInternalName, currValue);
+
+    if (onChanged) {
+      onChanged(columnInternalName, currValue);
+    }
   }
 
   private onChange = (value: any) => {

src/controls/locationPicker/ILocationPicker.ts

@@ -16,12 +16,11 @@ export interface ILocationPickerItem {
   Coordinates?: any;
 }
 
-interface IAddress
-{
-  City?:string;
-  CountryOrRegion?:string;
-  State?:string;
-  Street?:string;
+interface IAddress {
+  City?: string;
+  CountryOrRegion?: string;
+  State?: string;
+  Street?: string;
 }
 
 export interface ILocationPickerProps {
@@ -52,19 +51,19 @@ export interface ILocationPickerProps {
   /**
   * Callback issued when the selected option changes
   */
-  onSelectionChanged?: (newValue: ILocationPickerItem) => void;
+  onChange?: (newValue: ILocationPickerItem) => void;
 
   /**
   * This can be use to show error message for combobox
   */
-  errorMessage?:string;
+  errorMessage?: string;
 }
 
 export interface ILocationPickerState {
   currentMode: Mode;
   searchText: string;
   isCalloutVisible: boolean;
-  seletedItem: any;
+  seletedItem: ILocationPickerItem;
   /**
   * The options available to the listPicker
   */

src/controls/locationPicker/LocationPicker.module.scss

@@ -5,13 +5,14 @@
   max-height: 300px;
 }
 
-.pickerItemcontainer {
+.pickerItemContainer {
   display: -webkit-box;
   display: -ms-flexbox;
   border-style: solid;
   border-color: "[theme: themePrimary, default: #0078d7]";
   border-radius: 22px;
   min-width: 16px;
+  border-width: 2px;
   width: fit-content;
 }
 
@@ -29,16 +30,14 @@
   white-space: nowrap;
 }
 
-.locationAddressContainer:hover {
-  background-color: "[theme:listItemBackgroundHover, default:#f4f4f4]";
-}
-
-.locationAddressContainer:active {
-  border-color: "[theme: themePrimary, default: #0078d7]";
-}
-
 .locationAddressContainer {
   border: 2px solid transparent;
+  &:hover {
+    background-color: "[theme:listItemBackgroundHover, default:#f4f4f4]";
+  }
+  &:active {
+    border-color: "[theme: themePrimary, default: #0078d7]";
+  }
 }
 
 .locationContainer {