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

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

@ -9,7 +9,7 @@ import {
Spinner, SpinnerSize, MessageBar, MessageBarType, SearchBox, Icon, Label, Spinner, SpinnerSize, MessageBar, MessageBarType, SearchBox, Icon, Label,
Pivot, PivotItem, PivotLinkFormat, PivotLinkSize, Dropdown, IDropdownOption Pivot, PivotItem, PivotLinkFormat, PivotLinkSize, Dropdown, IDropdownOption
} from "office-ui-fabric-react"; } 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 { debounce } from "throttle-debounce";
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle"; import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { ISPServices } from "../../../SPServices/ISPServices"; import { ISPServices } from "../../../SPServices/ISPServices";
@ -356,8 +356,8 @@ const DirectoryHook: React.FC<IDirectoryProps> = (props) => {
/> />
</Stack> </Stack>
</div> </div>
<Stack horizontal horizontalAlign="center" wrap tokens={wrapStackTokens}> <Stack horizontal horizontalAlign={props.useSpaceBetween?"space-between":"center"} wrap tokens={wrapStackTokens}>
<div>{diretoryGrid}</div> {diretoryGrid}
</Stack> </Stack>
<div style={{ width: '100%', display: 'inline-block' }}> <div style={{ width: '100%', display: 'inline-block' }}>
<Paging <Paging

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

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