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

This commit is contained in:
flowerbot 2022-06-24 15:59:19 +10:00
parent 638b3992ae
commit 94492463a3
8 changed files with 128 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -21,14 +21,14 @@
"react-range": "^1.8.13"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"@microsoft/sp-build-web": "1.13.1",
"@microsoft/sp-module-interfaces": "1.13.1",
"@microsoft/sp-tslint-rules": "1.13.1",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@microsoft/sp-build-web": "1.13.1",
"@microsoft/sp-tslint-rules": "1.13.1",
"@microsoft/sp-module-interfaces": "1.13.1",
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"gulp": "~4.0.2",
"@types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"@types/webpack-env": "1.13.1"
"gulp": "~4.0.2"
}
}

7
src/webparts/palettePicker/PalettePickerWebPart.manifest.json
View File

@ -22,7 +22,12 @@
"description": { "default": "Palette Picker description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "Palette Picker"
"description": "Palette Picker",
"fontColor": "white",
"fieldSetHue": [90,280],
"fieldSetSat": [45, 75],
"fieldSetLight": [50, 75],
"fieldSetShades": [5]
}
}]
}

33
src/webparts/palettePicker/PalettePickerWebPart.tsx
View File

@ -16,23 +16,24 @@ import { PropertyPaneHost } from 'property-pane-portal';
import { update } from '@microsoft/sp-lodash-subset';
export interface IPalettePickerWebPartProps {
description: string;
hueSlider: any;
cssObjectText;
}
export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalettePickerWebPartProps> {
public render(): void {
const mainElement: React.ReactElement<IPalettePickerProps> = React.createElement(
PalettePicker,
{
description: this.properties.description
}
);
const ppProps = {
description: "blah"
cssObjectText: this.properties["cssObjectText"],
context: this.context
}
const customPropertyPaneProperties = {
@ -51,9 +52,15 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
, this.domElement);
}
public updateWebPartProperty(property, value) {
public updateWebPartProperty(property, value, isObj) {
if(isObj != true) {
update(this.properties, property, () => value);
} else {
update(this.properties, property, () => JSON.stringify(value));
}
this.render();
}
@ -86,7 +93,19 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
PropertyPaneHost('fieldSetSat', hostProperties),
PropertyPaneHost('fieldSetLight', hostProperties),
PropertyPaneHost('fieldSetShades', hostProperties),
PropertyPaneTextField('fontColor', {
label: "Font Color"
}),
PropertyPaneHost('fieldSetDisplay', hostProperties),
PropertyPaneTextField('cssObjectText', {
label: "CSS Object",
disabled: false,
multiline: true,
resizable: true
}),
]
}
]

8
src/webparts/palettePicker/components/Colors.tsx
View File

@ -5,12 +5,18 @@ import { IColorsProps } from './IColorsProps';
export const Colors: React.FC<IColorsProps> = (props) => {
React.useEffect(() => {
console.log("obj in colors", props.colorObject);
},[]);
return (
<div>
{
Object.keys(props.colorObject).map((key) => {
return (
<div style={{backgroundColor: props.colorObject[key]}} ><code>{`${key}: ${props.colorObject[key]}`};</code></div>
<div style={{backgroundColor: props.colorObject[key]}} ><code style={{color:props.fontColor}}>{`${key}: ${props.colorObject[key]}`};</code></div>
)
})

65
src/webparts/palettePicker/components/CustomPropertyPane.tsx
View File

@ -7,12 +7,10 @@ import { composeComponentAs } from 'office-ui-fabric-react';
import { Colors } from './Colors';
/*
//ORIGINAL CODE
const getCode = (hue, saturation, lightness, shades) => {
/*document.documentElement.style.setProperty(
'--hue',
hue[1] - hue[0] + (hue[1] - hue[0]) / 2
) */
let RESULT= "";
try {
@ -32,10 +30,10 @@ const getCode = (hue, saturation, lightness, shades) => {
catch (ex) {}
return (RESULT += '}')
}
*/
//MADE AN OBJECT INSTEAD
const cssObj = (hue, saturation, lightness, shades) => {
//MADE AN OBJECT for 'getcode'
const cssObject = (hue, saturation, lightness, shades) => {
let obj = {};
try {
const HUE_STEP = (hue[1] - hue[0]) / shades
@ -50,25 +48,48 @@ const getCode = (hue, saturation, lightness, shades) => {
}
} catch(ex) {console.log("obj problems"); }
// console.log("RESULT:", RESULT);
console.log("color obj:", obj);
return obj;
//console.log("color obj:", obj);
return [obj, JSON.stringify(obj).replace(/['"]+/g, '')];
}
const cssStyles = (obj) => {
//console.log("OBJ:", obj);
// let cssText:string = ":root {";
let cssText:string = "";
Object.keys(obj).map((key) => {
console.log(key + ":" + obj[key]);
let txt = key + ":" + obj[key];
cssText += txt + "; " ;
});
// cssText += "}";
return cssText;
}
export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProps> = (props) => {
//const[colorObj, setColorObj] = React.useState({});
const[colorObj, setColorObj] = React.useState({});
React.useEffect(() => {
try {
setColorObj(cssObj(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
console.log("COBJ:",colorObj);
// props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj[0]));
props.updateWebPartProperty("cssObjectText", colorObj[0], true);
}
catch(ex) {
console.log("color issues");
}
//.replace(/['"]+/g, ''));
// console.log(JSON.stringify(colorObj));//.replace(/['"]+/g, ''));
}, []); // empty array means useEffect only runs once (I think);
@ -86,7 +107,10 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
values={ props.properties["fieldSetHue"] ? props.properties["fieldSetHue"] : [0, Math.floor(Math.random() * 360)] }
onChange={(values) => {
props.updateWebPartProperty("fieldSetHue", values);
setColorObj(cssObj(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
//props.updateWebPartProperty("cssObjectText", cssStyles(colorObj));
console.log(colorObj);
props.updateWebPartProperty("cssObjectText", colorObj[0], true); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
}}
renderTrack={({ props, children }) => (
@ -125,8 +149,9 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
values={props.properties["fieldSetSat"] ? props.properties["fieldSetSat"] : [0, 100]}
onChange={(values) => {
props.updateWebPartProperty("fieldSetSat", values);
setColorObj(cssObj(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
// props.updateWebPartProperty("cssObjectText", cssStyles(colorObj));
// props.updateWebPartProperty("cssObjectText", (JSON.stringify(colorObj)).replace(/['"]+/g, ''));
}
}
@ -170,8 +195,9 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
values={props.properties["fieldSetLight"] ? props.properties["fieldSetLight"] : [0, 100]}
onChange={(values) => {
props.updateWebPartProperty("fieldSetLight", values);
setColorObj(cssObj(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
// props.updateWebPartProperty("cssObjectText", cssStyles(colorObj));
// props.updateWebPartProperty("cssObjectText", (JSON.stringify(colorObj)).replace(/['"]+/g, ''));
}}
renderTrack={({ props, children }) => (
@ -212,8 +238,9 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
values={props.properties["fieldSetShades"] ? props.properties["fieldSetShades"] : [7]}
onChange={(values) => {
props.updateWebPartProperty("fieldSetShades", values);
setColorObj(cssObj(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
// props.updateWebPartProperty("cssObjectText", cssStyles(colorObj));
// props.updateWebPartProperty("cssObjectText", (JSON.stringify(colorObj)).replace(/['"]+/g, ''));
}}
renderTrack={({ props, children }) => (
<div
@ -244,7 +271,9 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
</fieldset>
<fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} >
<Colors
colorObject = {colorObj}
colorObject = {colorObj[0]}
fontColor = {props.properties["fontColor"]}
context = {props.context}
></Colors>
<div>

2
src/webparts/palettePicker/components/IColorsProps.ts
View File

@ -1,4 +1,6 @@
export interface IColorsProps {
colorObject: any;
fontColor: string;
context: any;
// colorObjectString: string;
}

3
src/webparts/palettePicker/components/IPalettePickerProps.ts
View File

@ -1,3 +1,4 @@
export interface IPalettePickerProps {
description: string;
cssObjectText;
context;
}

33
src/webparts/palettePicker/components/PalettePicker.tsx
View File

@ -2,8 +2,38 @@ import * as React from 'react';
import styles from './PalettePicker.module.scss';
import { IPalettePickerProps } from './IPalettePickerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: 300
}
};
const options: IDropdownOption[] = [
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'orange', text: 'Orange'},
{ key: 'grape', text: 'Grape' },
{ key: 'broccoli', text: 'Broccoli' },
{ key: 'carrot', text: 'Carrot' },
{ key: 'lettuce', text: 'Lettuce' }
];
export default class PalettePicker extends React.Component<IPalettePickerProps, {}> {
public componentDidMount() {
// console.log("css:", JSON.parse(this.props.colorObj));
}
//console.log(props)
public render(): React.ReactElement<IPalettePickerProps> {
return (
<div className={ styles.palettePicker }>
@ -12,7 +42,8 @@ export default class PalettePicker extends React.Component<IPalettePickerProps,
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<Dropdown placeholder="Select an option" label="Basic uncontrolled example" options={options} styles={dropdownStyles} />
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>