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,
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<IPnPQuic
break;
//Feel free to contribute here and add the other layouts so we can eventually have every layout supported!
};
}
ReactDom.render(element, this.domElement);
}
@ -106,6 +104,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
PropertyFieldIconPicker(`links[${index}].IconName`,
{
key: `links[${index}].IconName`,
// eslint-disable-next-line no-return-assign
onSave: name => this.properties.links[index].IconName = name,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
@ -124,7 +123,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
text: "Delete",
icon: "Delete",
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.SelectedItemId = null;
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",
groupFields: [

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

@ -6,12 +6,12 @@ export class Util {
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);
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
}

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 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<ITilesQuickLinksProps> = (
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<ITilesQuickLinksProps> = (
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 (
<Stack styles={{ root: { gap: 10 } }}>
@ -71,13 +71,13 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
key={`${item.Id}`}
index={index}
link={item}
disabled={displayMode == DisplayMode.Read}
disabled={displayMode === DisplayMode.Read}
/>
))}
</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 res = Util.CalculateNewSortWeight(links, newIndex, indexToMove);
arr[indexToMove].SortWeight = res;
@ -94,7 +94,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
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
items={[...links].sort((a, b) => a.SortWeight - b.SortWeight)}