Merge pull request #537 from joaojmendes/iconPickerNewViewOptions

New renderOption property on IconPicker

Author: AJIXuMuK

config/serve.json

@@ -2,7 +2,7 @@
   "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "initialPage": "https://localhost:5432/workbench",
-  "https": true,
+  "https": false,
   "api": {
     "port": 5432,
     "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"

docs/documentation/docs/assets/IconPicker_dialog.gif

@@ -12,6 +12,10 @@ Icon picker always opens a new panel where you can pick an icon. The panel displ
 ![Icon Picker panel](../assets/IconPickerPanel.gif)
 
 
+## Displayed in the dialog
+Icon picker always opens a new dialog where you can pick an icon. The dialog displays all the icons and maintains readability. Picker does not displays selected icon outside the dialog.
+![Icon Picker panel](../assets/IconPicker_dialog.gif)
+
 ## How to use this control
 
 - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
@@ -29,6 +33,13 @@ import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker';
             onSave={(iconName: string) => { this.setState({icon: iconName}); }} />
 ```
 
+```TypeScript
+<IconPicker buttonLabel={'Icon'}
+            renderOption={'Dialog'}
+            onChange={(iconName: string) => { this.setState({icon: iconName}); }}
+            onSave={(iconName: string) => { this.setState({icon: iconName}); }} />
+```
+
 ## Implementation
 
 The IconPicker component can be configured with the following properties:
@@ -42,5 +53,6 @@ The IconPicker component can be configured with the following properties:
 | buttonClassName | boolean | no | If provided, additional class name will be added to the picker button |
 | panelClassName | boolean | no | If provided, additional class name will be added to the picker panel |
 | currentIcon | boolean | no | Specifies default selected icon |
+| renderOption | string | no | Specifies how to render list of Icons, Values :  'Panel' or 'Dialog' defualt value 'Panel' |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IconPicker)

docs/documentation/docs/controls/IconPicker.md

@@ -27,4 +27,8 @@ export interface IIconPickerProps {
      * initially selected icon
      */
     currentIcon?: string;
-}
+     /**
+     * irender option:  Panel, Dialog, dropDown
+     */
+    renderOption?: string;
+}

src/controls/iconPicker/IIconPickerProps.ts

@@ -1,5 +1,17 @@
 @import '~office-ui-fabric-react/dist/sass/References.scss';
 
+.dialogSelectedIcons{
+  font-size: 30px;
+  min-width: 32px;
+  width: 100%;
+  color: "[theme: themePrimary, default: #0078d7]";
+  text-align: center;
+}
+.dialogIconsContainer{
+  padding:5px;
+   overflow: auto;
+   max-height: 600px;
+}
 .navArea {
 	display: flex;
 	width: 100%;
@@ -17,7 +29,7 @@
 .searchBox {
 	flex-grow: 5;
 	flex-shrink: 1;
-	margin: 5px 0;	
+	margin: 5px 0;
 }
 .closeBtnContainer {
 	flex: 0 0 54px;
@@ -85,7 +97,7 @@
 	color: "[theme: themePrimary, default: #0078d7]";
 }
 .iconRadio:focus + .iconLabel {
-	outline: 1px dashed;
+	outline: 1px;
 	outline-color: "[theme: themePrimary, default: #0078d7]";
 	outline-offset: -5px;
 }
@@ -135,4 +147,4 @@
 }
 .btnSave {
 	order: 3;
-}
+}

src/controls/iconPicker/IconPicker.module.scss

@@ -11,11 +11,15 @@ import { Panel, PanelType, IPanelProps } from 'office-ui-fabric-react/lib/Panel'
 import { debounce } from 'lodash';
 import { IIconPickerState } from './IIconPickerState';
 import * as telemetry from '../../common/telemetry';
+import  {Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 
+initializeIcons();
 
 export class IconPicker extends React.Component<IIconPickerProps, IIconPickerState> {
     private radioIdBase: string = getId("radio");
 
+
     constructor(props: IIconPickerProps) {
         super(props);
 
@@ -29,6 +33,8 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
     }
 
     public render(): React.ReactElement<IIconPickerProps> {
+        let { renderOption} = this.props;
+        renderOption = renderOption === undefined ? 'Panel' : renderOption.toLowerCase()  === 'dialog' ? 'Dialog' : 'Panel';
         return <div>
             <PrimaryButton
                 text={this.props.buttonLabel}
@@ -37,6 +43,9 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
                 disabled={this.props.disabled}
                 data-automation-id={`icon-picker-open`}
             />
+            {
+
+            renderOption == 'Panel'  ?
             <Panel
                 isOpen={this.state.isPanelOpen}
                 onDismiss={this.closePanel}
@@ -49,6 +58,38 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
             >
                 {this.renderPanelContent()}
             </Panel>
+            :
+            <Dialog
+            hidden={!this.state.isPanelOpen}
+            onDismiss={this.closePanel}
+            isBlocking={true}
+
+            dialogContentProps={{
+              type: DialogType.normal,
+              title: strings.SelectIcon,
+              showCloseButton: true,
+
+            }}
+            >
+               <SearchBox className={styles.searchBox}
+                onAbort={this.onAbort}
+                data-automation-id={`icon-picker-search`}
+
+                onChange={this.onChange} />
+              <div className={styles.dialogIconsContainer}>
+              {this.renderPanelContent()}
+              </div>
+
+              <DialogFooter>
+              <div style={{display:'flex', flexDirection: 'row' , justifyContent:'flex-end', }}>
+                <Icon iconName={this.state.currentIcon}  className={styles.dialogSelectedIcons}/>
+              <PrimaryButton style={{marginRight: 5}} text={strings.SaveButtonLabel} onClick={this.confirmSelection} disabled={!this.state.currentIcon}  data-automation-id={`icon-picker-save`} />
+              <DefaultButton text={strings.CancelButtonLabel} onClick={this.closePanel} className={styles.btnCancel} data-automation-id={`icon-picker-close`} />
+              </div>
+              </DialogFooter>
+            </Dialog>
+
+             }
         </div>;
     }
 
@@ -61,12 +102,14 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
 
     private iconPickerOnClick = (): void => {
         this.setState({
-            isPanelOpen: true
+            isPanelOpen: true,
+            items :IconNames.Icons
         });
     }
 
     private iconOnClick = (iconName: string): void => {
         if (this.props.onChange) this.props.onChange(iconName);
+        console.log(iconName);
         this.setState({
             currentIcon: iconName,
         });

src/controls/iconPicker/IconPicker.tsx

@@ -8,7 +8,7 @@ import {
 } from '@microsoft/sp-webpart-base';
 
 import * as strings from 'ControlsTestWebPartStrings';
-import ControlsTest from './components/ControlsTest';
+import ControlsTest from './components/ControlsTest_SingleComponent';
 import { IControlsTestProps } from './components/IControlsTestProps';
 import { IControlsTestWebPartProps } from './IControlsTestWebPartProps';
 

src/webparts/controlsTest/ControlsTestWebPart.ts

@@ -808,8 +808,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   onSelectedItem={this.listItemPickerDataSelected} />
 
               </div>
-              <div>Icon Picker</div>
-              <div><IconPicker onSave={(value) => { console.log(value); }} buttonLabel="Icon Picker"></IconPicker></div>
+            <div>Icon Picker</div>
+            <div><IconPicker renderOption="dialog" onSave={(value)=>{console.log(value);}} buttonLabel="Icon Picker"></IconPicker></div>
 
               <div className="ms-font-m">ComboBoxListItemPicker: