honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated readme and linting issues

This commit is contained in:
Hugo Bernier 2023-03-11 21:49:20 -05:00
parent d841474dac
commit 231b4747dd
4 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
samples/react-quick-links/src/webparts/pnPQuickLinks/PnPQuickLinksWebPart.ts
View File

@ -6,7 +6,6 @@ import {
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
IPropertyPaneGroup, IPropertyPaneGroup,
PropertyPaneButton, PropertyPaneButton,
PropertyPaneCheckbox,
PropertyPaneChoiceGroup, PropertyPaneChoiceGroup,
PropertyPaneLabel, PropertyPaneLabel,
PropertyPaneTextField, PropertyPaneTextField,
@ -18,7 +17,6 @@ import { ILink } from './models/ILink';
import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker'; import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';
import { IPnPQuickLinksProps } from './components/IPnPQuickLinksProps'; import { IPnPQuickLinksProps } from './components/IPnPQuickLinksProps';
import { LayoutType, TileSize } from './models/enums'; import { LayoutType, TileSize } from './models/enums';
import { PropertyPaneDescription } from 'PnPQuickLinksWebPartStrings';
@ -68,7 +66,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
break; break;
//Feel free to contribute here and add the other layouts so we can eventually have every layout supported! //Feel free to contribute here and add the other layouts so we can eventually have every layout supported!
}; }
ReactDom.render(element, this.domElement); ReactDom.render(element, this.domElement);
} }
@ -106,6 +104,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
PropertyFieldIconPicker(`links[${index}].IconName`, PropertyFieldIconPicker(`links[${index}].IconName`,
{ {
key: `links[${index}].IconName`, key: `links[${index}].IconName`,
// eslint-disable-next-line no-return-assign
onSave: name => this.properties.links[index].IconName = name, onSave: name => this.properties.links[index].IconName = name,
onPropertyChange: this.onPropertyPaneFieldChanged, onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties, properties: this.properties,
@ -124,7 +123,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
text: "Delete", text: "Delete",
icon: "Delete", icon: "Delete",
onClick: () => { onClick: () => {
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.onPropertyPaneFieldChanged("links", null, this.properties.links);
this.SelectedItemId = null; this.SelectedItemId = null;
this.context.propertyPane.refresh(); this.context.propertyPane.refresh();
@ -168,7 +167,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
}), }),
] ]
}, },
...(this.properties.type == LayoutType.Tiles ? this.TileLayoutFields() : []), ...(this.properties.type === LayoutType.Tiles ? this.TileLayoutFields() : []),
{ {
groupName: "Filter", groupName: "Filter",
groupFields: [ groupFields: [

12
samples/react-quick-links/src/webparts/pnPQuickLinks/Util/Util.ts
View File

@ -6,12 +6,12 @@ export class Util {
return uniqueId; return uniqueId;
} }
public static CalculateNewSortWeight(arr: ILink[], newIndex: number, oldIndex?: number) { public static CalculateNewSortWeight(arr: ILink[], newIndex: number, oldIndex?: number):number {
const links = [...arr].sort((a, b) => a.SortWeight - b.SortWeight); const links = [...arr].sort((a, b) => a.SortWeight - b.SortWeight);
if (newIndex == 0) if (newIndex === 0)
return this.GetAverage(null, links[0]?.SortWeight); return this.GetAverage(null, links[0]?.SortWeight);
if (newIndex == links.length) if (newIndex === links.length)
return this.GetAverage(links[links.length - 1].SortWeight, null); return this.GetAverage(links[links.length - 1].SortWeight, null);
if (newIndex < oldIndex) if (newIndex < oldIndex)
@ -19,9 +19,9 @@ export class Util {
return this.GetAverage(links[newIndex]?.SortWeight, links[newIndex + 1]?.SortWeight) return this.GetAverage(links[newIndex]?.SortWeight, links[newIndex + 1]?.SortWeight)
} }
private static GetAverage(prev: number, next: number) { private static GetAverage(prev: number, next: number):number {
if (prev == null) prev = 0; if (prev === null) prev = 0;
if (next == null) next = 1; if (next === null) next = 1;
return (prev + next) / 2 return (prev + next) / 2
} }

16
samples/react-quick-links/src/webparts/pnPQuickLinks/components/TilesQuickLinks.tsx
View File

@ -18,7 +18,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
const { displayMode, webPartTitle, setWebpartTitle, links, setLinks, SelectedItemId, setSelectedItemId, hideText, size } = props; const { displayMode, webPartTitle, setWebpartTitle, links, setLinks, SelectedItemId, setSelectedItemId, hideText, size } = props;
const theme = getTheme(); const theme = getTheme();
const AddLink = () => { const AddLink = ():void => {
setLinks([...links, { setLinks([...links, {
Id: Util.GenerateId(), Id: Util.GenerateId(),
SortWeight: Util.CalculateNewSortWeight(links, links.length), SortWeight: Util.CalculateNewSortWeight(links, links.length),
@ -37,7 +37,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
text={link.Title} text={link.Title}
styles={{ styles={{
root: { 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, width: size < TileSize.Large ? 85 + size : 130,
minHeight: size < TileSize.Large ? 80 + size : 124, minHeight: size < TileSize.Large ? 80 + size : 124,
borderRadius: 3 borderRadius: 3
@ -50,10 +50,10 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
textAlign: "center" textAlign: "center"
}, },
}} }}
href={displayMode == DisplayMode.Read && link.Link} href={displayMode === DisplayMode.Read && link.Link}
target={displayMode == DisplayMode.Read && link.Target} target={displayMode === DisplayMode.Read && link.Target}
onClick={displayMode == DisplayMode.Edit && (() => setSelectedItemId(link.Id))} onClick={displayMode === DisplayMode.Edit && (() => setSelectedItemId(link.Id))}
onRenderText={(props) => { onRenderText={(props) => {
return ( return (
<Stack styles={{ root: { gap: 10 } }}> <Stack styles={{ root: { gap: 10 } }}>
@ -71,13 +71,13 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
key={`${item.Id}`} key={`${item.Id}`}
index={index} index={index}
link={item} link={item}
disabled={displayMode == DisplayMode.Read} disabled={displayMode === DisplayMode.Read}
/> />
))} ))}
</div> </div>
)); ));
const UpdateSortIndex = (indexToMove: number, newIndex: number) => { const UpdateSortIndex = (indexToMove: number, newIndex: number):void => {
const arr = [...links].sort((a, b) => a.SortWeight - b.SortWeight); const arr = [...links].sort((a, b) => a.SortWeight - b.SortWeight);
const res = Util.CalculateNewSortWeight(links, newIndex, indexToMove); const res = Util.CalculateNewSortWeight(links, newIndex, indexToMove);
arr[indexToMove].SortWeight = res; arr[indexToMove].SortWeight = res;
@ -94,7 +94,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
updateProperty={setWebpartTitle} updateProperty={setWebpartTitle}
/> />
{displayMode == DisplayMode.Edit && <ActionButton iconProps={{ iconName: "Add" }} onClick={() => AddLink()} >Add link</ActionButton>} {displayMode === DisplayMode.Edit && <ActionButton iconProps={{ iconName: "Add" }} onClick={() => AddLink()} >Add link</ActionButton>}
<SortableList <SortableList
items={[...links].sort((a, b) => a.SortWeight - b.SortWeight)} items={[...links].sort((a, b) => a.SortWeight - b.SortWeight)}