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

fully functioning

This commit is contained in:
flowerbot 2022-06-30 10:16:32 +10:00
parent 980180189e
commit cf17587f77
9 changed files with 112 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,14 +20,14 @@
"group": { "default": "Other" },
"title": { "default": "Palette Picker" },
"description": { "default": "Palette Picker description" },
"officeFabricIconFontName": "Page",
"officeFabricIconFontName": "Color",
"properties": {
"description": "Palette Picker",
"fontColor": "white",
"fieldSetHue": [90,280],
"fieldSetSat": [45, 75],
"fieldSetLight": [50, 75],
"fieldSetShades": [5]
"fieldSetShades": [8]
}
}]
}

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

@ -16,8 +16,9 @@ import { PropertyPaneHost } from 'property-pane-portal';
import { update } from '@microsoft/sp-lodash-subset';
export interface IPalettePickerWebPartProps {
//cssObjectText: string;
//colorObject: any;
cssObjectText: string;
fontColor: string;
cssObject: any;
}
@ -25,6 +26,8 @@ export interface IPalettePickerWebPartProps {
export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalettePickerWebPartProps> {
public render(): void {
const mainElement: React.ReactElement<IPalettePickerProps> = React.createElement(
PalettePicker,
@ -34,7 +37,9 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
const ppProps = {
cssObjectText: this.properties["cssObjectText"],
context: this.context
context: this.context,
cssObject: JSON.parse(this.properties["cssObjectText"]),
fontColor: this.properties.fontColor
}
const customPropertyPaneProperties = {
@ -56,12 +61,13 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
public updateWebPartProperty(property, value) {
// if(isObj != true) {
update(this.properties, property, () => value);
// } else {
// update(this.properties, property, () => JSON.stringify(value));
// }
if(property == "cssObject" && value != {}) {
// update(this.properties, "cssObjectText", () => ":root {" + Object.entries(value).map(([k, v]) => `${k}:${v}`).join('; ') + "}");
update(this.properties, "cssObjectText", () => JSON.stringify(value));
}
this.render();
}
@ -99,15 +105,7 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
}),
PropertyPaneHost('fieldSetDisplay', hostProperties),
//TODO: get the text of the object here, or otherwise somehow send the object up the line for use in the web part
PropertyPaneTextField('cssObjectText', {
label: "CSS Object",
disabled: false,
multiline: true,
resizable: true
}),
PropertyPaneHost('cssObjectText', hostProperties),
]
}
]

4
src/webparts/palettePicker/components/CustomPropertyPane.module.scss
View File

@ -3,7 +3,8 @@
.CustomPropertyPane {
/* PrismJS 1.23.0
/* PrismJS 1.23.0
/* original inspiration used prism for formatting the css, these styles are mostly about that but unused in this solution
https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
@ -384,4 +385,5 @@ label {
height: 35px;
}
}

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

@ -3,44 +3,23 @@ import { PropertyPanePortal } from 'property-pane-portal';
import { ICustomPropertyPaneProps } from './ICustomPropertyPaneProps';
import styles from './CustomPropertyPane.module.scss';
import { Range } from 'react-range';
import { composeComponentAs } from 'office-ui-fabric-react';
import { composeComponentAs, TextField } from 'office-ui-fabric-react';
import { Colors } from './Colors';
import { escape } from '@microsoft/sp-lodash-subset';
//import { escape } from '@microsoft/sp-lodash-subset';
/*
//ORIGINAL CODE
const getCode = (hue, saturation, lightness, shades) => {
let RESULT= "";
try {
const HUE_STEP = (hue[1] - hue[0]) / shades
const LIGHT_STEP = (lightness[1] - lightness[0]) / shades
const SAT_STEP = (saturation[1] - saturation[0]) / shades
RESULT = `:root {\n`
for (let s = 0; s < shades + 1; s++) {
const HUE = Math.floor(hue[1] - s * HUE_STEP)
const LIGHTNESS = Math.floor(lightness[1] - s * LIGHT_STEP)
const SATURATION = Math.floor(saturation[1] - s * SAT_STEP)
RESULT += ` --color-${s +
1}: hsl(${HUE}, ${SATURATION}%, ${LIGHTNESS}%);\n`
}
console.log("RESULT:", RESULT);
}
catch (ex) {}
return (RESULT += '}')
}
*/
//MADE AN OBJECT for 'getcode'
export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProps> = (props) => {
//copied and modified to suit from this CodePen by Jhey https://codepen.io/jh3y/pen/rNjbmBQ?editors=0010
const cssObject = (hue, saturation, lightness, shades) => {
let obj = {};
try {
const HUE_STEP = (hue[1] - hue[0]) / shades
const LIGHT_STEP = (lightness[1] - lightness[0]) / shades
const SAT_STEP = (saturation[1] - saturation[0]) / shades
//let RESULT = `:root {\n`
for (let s = 0; s < shades + 1; s++) {
const HUE = Math.floor(hue[1] - s * HUE_STEP)
const LIGHTNESS = Math.floor(lightness[1] - s * LIGHT_STEP)
@ -48,34 +27,20 @@ const getCode = (hue, saturation, lightness, shades) => {
obj[`--color-${s + 1}`] = `hsl(${HUE}, ${SATURATION}%, ${LIGHTNESS}%)`;
}
} catch(ex) {console.log("obj problems"); }
// console.log("RESULT:", RESULT);
//console.log("color obj:", obj);
return obj; //, JSON.stringify(obj)];// .replace(/['"]+/g, '')];
return obj;
}
export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProps> = (props) => {
//const[colorObj, setColorObj] = React.useState({});
const[colorObj, setColorObj] = React.useState({});
React.useEffect(() => {
try {
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", JSON.stringify(colorObj));
props.updateWebPartProperty("cssObjectText", "some text");
}
catch(ex) {
console.log("color issues");
}
//.replace(/['"]+/g, ''));
// console.log(JSON.stringify(colorObj));//.replace(/['"]+/g, ''));
}, []); // empty array means useEffect only runs once (I think);
@ -94,10 +59,7 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
onChange={(values) => {
props.updateWebPartProperty("fieldSetHue", values);
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
//props.updateWebPartProperty("cssObjectText", cssStyles(colorObj));
console.log(escape(JSON.stringify(colorObj)));
props.updateWebPartProperty("cssObjectText", escape(JSON.stringify(colorObj))); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
props.updateWebPartProperty("cssObject", colorObj);
}}
renderTrack={({ props, children }) => (
<div
@ -136,8 +98,7 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
onChange={(values) => {
props.updateWebPartProperty("fieldSetSat", values);
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, ''));
props.updateWebPartProperty("cssObject", colorObj);
}
}
@ -182,8 +143,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
onChange={(values) => {
props.updateWebPartProperty("fieldSetLight", values);
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, ''));
props.updateWebPartProperty("cssObject", colorObj);
}}
renderTrack={({ props, children }) => (
@ -225,8 +186,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
onChange={(values) => {
props.updateWebPartProperty("fieldSetShades", values);
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, ''));
props.updateWebPartProperty("cssObject", colorObj);
}}
renderTrack={({ props, children }) => (
<div
@ -255,6 +216,16 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
/>
</fieldset>
<fieldset data-property="cssObjectText">
<TextField
name="objText"
multiline={true}
disabled={true}
value={props.properties.cssObjectText}
//value= {JSON.stringify(colorObj).replace(/['"]+/g, '')}
></TextField>
</fieldset>
<fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} >
<Colors
colorObject = {colorObj}
@ -270,6 +241,7 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
</div>
</fieldset>
</PropertyPanePortal>
);
};

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

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

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

@ -1,4 +1,6 @@
export interface IPalettePickerProps {
cssObjectText;
context;
cssObject;
fontColor;
}

2
src/webparts/palettePicker/components/PalettePicker.module.scss
View File

@ -10,7 +10,7 @@
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
/* background-color: $ms-color-themeDark; */
padding: 20px;
}

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

@ -1,17 +1,9 @@
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' },
@ -22,31 +14,81 @@ const options: IDropdownOption[] = [
{ key: 'lettuce', text: 'Lettuce' }
];
const returnCss = (obj) => {
let newObj = {};
Object.keys(obj).map((key, i) => {
newObj[`.ms-Dropdown-item:nth-of-type(${i+1})`] = { "backgroundColor": obj[key] };
});
return newObj;
}
export default class PalettePicker extends React.Component<IPalettePickerProps, {}> {
public componentDidMount() {
// console.log("css:", JSON.parse(this.props.colorObj));
constructor(props: IPalettePickerProps) {
super(props);
}
private dropdownStyles: Partial<IDropdownStyles> = {
root: this.props.cssObject,
label: {color: this.props.fontColor},
/* dropdownItem: {
backgroundColor: 'pink'
}, */
/* dropdownItemsWrapper: {
style: this.props.cssObject ? this.props.cssObject : {},
}, */
dropdownItems: {
selectors: returnCss(this.props.cssObject),
dropdown: { width: 300
}
}
}
//console.log(props)
public render(): React.ReactElement<IPalettePickerProps> {
console.log("styles:", this.dropdownStyles);
console.log("obj", returnCss(this.props.cssObject));
return (
<div className={ styles.palettePicker }>
<div className={ styles.container }>
<div className={ styles.row }>
<div style={this.props.cssObject} className={ styles.palettePicker }>
<div>
<div className={ styles.row } style={{backgroundColor: this.props.cssObject["--color-1"], color: this.props.fontColor}}>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</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>
<span className={ styles.title } style={{color: this.props.fontColor}}>Here's a Palette Picker for you!</span>
<p className={ styles.subTitle } style={{color: this.props.fontColor}}>Allow users to select a color palette for your web part.</p>
<div style={{height: 'auto', minHeight: '20px', backgroundColor: this.props.fontColor}}>
{Object.keys(this.props.cssObject).map((key,i) =>{
return <div style={{backgroundColor: this.props.cssObject[key], height:'10px', width: '10px', display: 'inline-block', borderRadius: '50%', left: 0, top: 0 }}></div>
})}
</div>
<Dropdown placeholder="Select an option" label="Color your dropdown options .." options={options} styles={this.dropdownStyles} />
<div>
</div>
<a href="https://aka.ms/spfx" className={ styles.button } style={{backgroundColor: this.props.cssObject["--color-3"], color: this.props.fontColor}}>
<span className={ styles.label } style={{color: this.props.fontColor}}>Learn more</span>
</a>
<pre style={{font: 'courier', backgroundColor: this.props.cssObject["--color-5"], color: this.props.fontColor}}> {JSON.stringify(this.props.cssObject, null, 4)}</pre>
</div>
</div>
</div>

3
tsconfig.json
View File

@ -25,7 +25,8 @@
"es5",
"dom",
"es2015.collection",
"es2015.promise"
"es2015.promise",
"es2017.object"
]
},
"include": [