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

added Layout property

This commit is contained in:
Peter Paul Kirschner 2022-10-03 15:00:37 +02:00
parent 429384321c
commit 2469f94e22
3 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
samples/react-directory/src/webparts/directory/DirectoryWebPart.ts
View File

@ -6,12 +6,10 @@ import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneToggle,
IPropertyPaneToggleProps,
PropertyPaneSlider
} from "@microsoft/sp-property-pane";
import * as strings from "DirectoryWebPartStrings";
import Directory from "./components/Directory";
import DirectoryHook from "./components/DirectoryHook";
import { IDirectoryProps } from "./components/IDirectoryProps";
@ -21,6 +19,7 @@ export interface IDirectoryWebPartProps {
searchProps: string;
clearTextSearchProps: string;
pageSize: number;
justifycontent:boolean
}
export default class DirectoryWebPart extends BaseClientSideWebPart<
@ -28,16 +27,6 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<
> {
public render(): void {
const element: React.ReactElement<IDirectoryProps> = React.createElement(
// Directory,
// {
// title: this.properties.title,
// context: this.context,
// searchFirstName: this.properties.searchFirstName,
// displayMode: this.displayMode,
// updateProperty: (value: string) => {
// this.properties.title = value;
// }
// },
DirectoryHook,
{
title: this.properties.title,
@ -49,7 +38,8 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<
},
searchProps: this.properties.searchProps,
clearTextSearchProps: this.properties.clearTextSearchProps,
pageSize: this.properties.pageSize
pageSize: this.properties.pageSize,
useSpaceBetween:this.properties.justifycontent
}
);
@ -86,6 +76,12 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<
checked: false,
label: "Search on First Name ?"
}),
PropertyPaneToggle("justifycontent", {
checked: false,
label: "Result Layout",
onText:"SpaceBetween",
offText:"Center"
}),
PropertyPaneTextField('searchProps', {
label: strings.SearchPropsLabel,
description: strings.SearchPropsDesc,

10
samples/react-directory/src/webparts/directory/components/DirectoryHook.tsx
View File

@ -9,7 +9,7 @@ import {
Spinner, SpinnerSize, MessageBar, MessageBarType, SearchBox, Icon, Label,
Pivot, PivotItem, PivotLinkFormat, PivotLinkSize, Dropdown, IDropdownOption
} from "office-ui-fabric-react";
import { Stack, IStackStyles, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
import { debounce } from "throttle-debounce";
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { ISPServices } from "../../../SPServices/ISPServices";
@ -144,7 +144,7 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
} else {
if(index == searchProps.length - 1) {
qryText += `${srchprop}:${finalSearchText}*`;
} else qryText += `${srchprop}:${finalSearchText}* OR `;
} else qryText += `${srchprop}:${finalSearchText}* OR `;
}
});
} else {
@ -356,8 +356,8 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
/>
</Stack>
</div>
<Stack horizontal horizontalAlign="center" wrap tokens={wrapStackTokens}>
<div>{diretoryGrid}</div>
<Stack horizontal horizontalAlign={props.useSpaceBetween?"space-between":"center"} wrap tokens={wrapStackTokens}>
{diretoryGrid}
</Stack>
<div style={{ width: '100%', display: 'inline-block' }}>
<Paging
@ -376,4 +376,4 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
);
};
export default DirectoryHook;
export default DirectoryHook;

1
samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts
View File

@ -9,4 +9,5 @@ export interface IDirectoryProps {
searchProps?: string;
clearTextSearchProps?: string;
pageSize?: number;
useSpaceBetween?:boolean
}