diff --git a/samples/react-quick-links/README.md b/samples/react-quick-links/README.md index ebd2960c7..f34cf4ed0 100644 --- a/samples/react-quick-links/README.md +++ b/samples/react-quick-links/README.md @@ -62,7 +62,7 @@ This web part demonstrates a couple of nice skillsets for an SPFx developer, the This demonstrates: -* Dynamic propertypane that changes based on user input in the web part +* Dynamic property pane that changes based on user input in the web part * Fluent Drag 'n drop using 'react-sortable-hoc' * Using PnP Reusable Controls (Icon picker and WebPartTitle) * Styling Fluent UI components (please don't look at the actual CSS, but the principals of how to do it) diff --git a/samples/react-quick-links/src/webparts/pnPQuickLinks/PnPQuickLinksWebPart.ts b/samples/react-quick-links/src/webparts/pnPQuickLinks/PnPQuickLinksWebPart.ts index e871bfb99..a48128815 100644 --- a/samples/react-quick-links/src/webparts/pnPQuickLinks/PnPQuickLinksWebPart.ts +++ b/samples/react-quick-links/src/webparts/pnPQuickLinks/PnPQuickLinksWebPart.ts @@ -6,7 +6,6 @@ import { IPropertyPaneConfiguration, IPropertyPaneGroup, PropertyPaneButton, - PropertyPaneCheckbox, PropertyPaneChoiceGroup, PropertyPaneLabel, PropertyPaneTextField, @@ -18,7 +17,6 @@ import { ILink } from './models/ILink'; import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker'; import { IPnPQuickLinksProps } from './components/IPnPQuickLinksProps'; import { LayoutType, TileSize } from './models/enums'; -import { PropertyPaneDescription } from 'PnPQuickLinksWebPartStrings'; @@ -68,7 +66,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart this.properties.links[index].IconName = name, onPropertyChange: this.onPropertyPaneFieldChanged, properties: this.properties, @@ -124,7 +123,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart { - this.properties.links = this.properties.links.filter(x => x.Id != this.SelectedItemId); + this.properties.links = this.properties.links.filter(x => x.Id !== this.SelectedItemId); this.onPropertyPaneFieldChanged("links", null, this.properties.links); this.SelectedItemId = null; this.context.propertyPane.refresh(); @@ -168,7 +167,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart a.SortWeight - b.SortWeight); - if (newIndex == 0) + if (newIndex === 0) return this.GetAverage(null, links[0]?.SortWeight); - if (newIndex == links.length) + if (newIndex === links.length) return this.GetAverage(links[links.length - 1].SortWeight, null); if (newIndex < oldIndex) @@ -19,9 +19,9 @@ export class Util { return this.GetAverage(links[newIndex]?.SortWeight, links[newIndex + 1]?.SortWeight) } - private static GetAverage(prev: number, next: number) { - if (prev == null) prev = 0; - if (next == null) next = 1; + private static GetAverage(prev: number, next: number):number { + if (prev === null) prev = 0; + if (next === null) next = 1; return (prev + next) / 2 } diff --git a/samples/react-quick-links/src/webparts/pnPQuickLinks/components/TilesQuickLinks.tsx b/samples/react-quick-links/src/webparts/pnPQuickLinks/components/TilesQuickLinks.tsx index d0e9fcb4e..1265a8a52 100644 --- a/samples/react-quick-links/src/webparts/pnPQuickLinks/components/TilesQuickLinks.tsx +++ b/samples/react-quick-links/src/webparts/pnPQuickLinks/components/TilesQuickLinks.tsx @@ -18,7 +18,7 @@ export const TilesQuickLinks: React.FunctionComponent = ( const { displayMode, webPartTitle, setWebpartTitle, links, setLinks, SelectedItemId, setSelectedItemId, hideText, size } = props; const theme = getTheme(); - const AddLink = () => { + const AddLink = ():void => { setLinks([...links, { Id: Util.GenerateId(), SortWeight: Util.CalculateNewSortWeight(links, links.length), @@ -37,7 +37,7 @@ export const TilesQuickLinks: React.FunctionComponent = ( text={link.Title} styles={{ root: { - border: SelectedItemId == link.Id ? `3px solid ${theme.palette.themeSecondary}` : undefined, + border: SelectedItemId === link.Id ? `3px solid ${theme.palette.themeSecondary}` : undefined, width: size < TileSize.Large ? 85 + size : 130, minHeight: size < TileSize.Large ? 80 + size : 124, borderRadius: 3 @@ -50,10 +50,10 @@ export const TilesQuickLinks: React.FunctionComponent = ( textAlign: "center" }, }} - href={displayMode == DisplayMode.Read && link.Link} - target={displayMode == DisplayMode.Read && link.Target} + href={displayMode === DisplayMode.Read && link.Link} + target={displayMode === DisplayMode.Read && link.Target} - onClick={displayMode == DisplayMode.Edit && (() => setSelectedItemId(link.Id))} + onClick={displayMode === DisplayMode.Edit && (() => setSelectedItemId(link.Id))} onRenderText={(props) => { return ( @@ -71,13 +71,13 @@ export const TilesQuickLinks: React.FunctionComponent = ( key={`${item.Id}`} index={index} link={item} - disabled={displayMode == DisplayMode.Read} + disabled={displayMode === DisplayMode.Read} /> ))} )); - const UpdateSortIndex = (indexToMove: number, newIndex: number) => { + const UpdateSortIndex = (indexToMove: number, newIndex: number):void => { const arr = [...links].sort((a, b) => a.SortWeight - b.SortWeight); const res = Util.CalculateNewSortWeight(links, newIndex, indexToMove); arr[indexToMove].SortWeight = res; @@ -94,7 +94,7 @@ export const TilesQuickLinks: React.FunctionComponent = ( updateProperty={setWebpartTitle} /> - {displayMode == DisplayMode.Edit && AddLink()} >Add link} + {displayMode === DisplayMode.Edit && AddLink()} >Add link} a.SortWeight - b.SortWeight)}