Merge pull request #1044 from pineaulo/dev

Add onCancel callback for IconPicker

Author: AJIXuMuK

docs/documentation/docs/controls/IconPicker.md

@@ -48,6 +48,7 @@ The IconPicker component can be configured with the following properties:
 | ---- | ---- | ---- | ---- |
 | buttonLabel | string | no | Specifies the label of the icon picker button. |
 | onSave | (iconName: string) => void | yes | Handler when the icon has been selected and picker has been closed. |
+| onCancel | () => void | no | Handler when the panel is closed. |
 | onChange | (iconName: string) => void | no | Handler when the icon selection has been changed. |
 | disabled | boolean | no | Specifies if the picker button is disabled |
 | buttonClassName | boolean | no | If provided, additional class name will be added to the picker button |

src/controls/iconPicker/IIconPickerProps.ts

@@ -3,6 +3,10 @@ export interface IIconPickerProps {
      * call-back function when icon selection has been confirmed
      */
     onSave(iconName: string): void;
+    /**
+     * call-back function when cancel is clicked
+     */
+    onCancel?(): void;
     /**
      * call-back function when icon has changed
      */

src/controls/iconPicker/IconPicker.tsx

@@ -107,6 +107,9 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
   }
 
   private closePanel = (): void => {
+    if (this.props.onCancel) {
+      this.props.onCancel();
+    }
     this.setState({
       currentIcon: this.props.currentIcon,
       isPanelOpen: false

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1683,6 +1683,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
         <IconPicker buttonLabel={'Icon'}
           onChange={(iconName: string) => { console.log(iconName); }}
+          onCancel={() => { console.log("Panel closed"); }}
           onSave={(iconName: string) => { console.log(iconName); }} />
 
         <div>