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 16:30:36 +10:00
parent 94492463a3
commit 980180189e
3 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,8 @@ import { PropertyPaneHost } from 'property-pane-portal';
import { update } from '@microsoft/sp-lodash-subset'; import { update } from '@microsoft/sp-lodash-subset';
export interface IPalettePickerWebPartProps { export interface IPalettePickerWebPartProps {
cssObjectText; //cssObjectText: string;
//colorObject: any;
} }
@ -54,13 +55,13 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
public updateWebPartProperty(property, value, isObj) { public updateWebPartProperty(property, value) {
if(isObj != true) { // if(isObj != true) {
update(this.properties, property, () => value); update(this.properties, property, () => value);
} else { // } else {
update(this.properties, property, () => JSON.stringify(value)); // update(this.properties, property, () => JSON.stringify(value));
} // }
this.render(); this.render();
} }
@ -98,6 +99,7 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalette
}), }),
PropertyPaneHost('fieldSetDisplay', hostProperties), 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', { PropertyPaneTextField('cssObjectText', {
label: "CSS Object", label: "CSS Object",
disabled: false, disabled: false,

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

@ -13,6 +13,7 @@ export const Colors: React.FC<IColorsProps> = (props) => {
return ( return (
<div> <div>
<div>:root &#123;</div>
{ {
Object.keys(props.colorObject).map((key) => { Object.keys(props.colorObject).map((key) => {
return ( return (
@ -22,6 +23,8 @@ export const Colors: React.FC<IColorsProps> = (props) => {
}) })
} }
<div>&#125;</div>
</div> </div>
); );
}; };

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

@ -5,6 +5,7 @@ import styles from './CustomPropertyPane.module.scss';
import { Range } from 'react-range'; import { Range } from 'react-range';
import { composeComponentAs } from 'office-ui-fabric-react'; import { composeComponentAs } from 'office-ui-fabric-react';
import { Colors } from './Colors'; import { Colors } from './Colors';
import { escape } from '@microsoft/sp-lodash-subset';
/* /*
@ -49,26 +50,10 @@ const getCode = (hue, saturation, lightness, shades) => {
} catch(ex) {console.log("obj problems"); } } catch(ex) {console.log("obj problems"); }
// console.log("RESULT:", RESULT); // console.log("RESULT:", RESULT);
//console.log("color obj:", obj); //console.log("color obj:", obj);
return [obj, JSON.stringify(obj).replace(/['"]+/g, '')]; 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) => { export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProps> = (props) => {
@ -82,7 +67,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
setColorObj(cssObject(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); console.log("COBJ:",colorObj);
// props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj[0])); // props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj[0]));
props.updateWebPartProperty("cssObjectText", colorObj[0], true); // props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj));
props.updateWebPartProperty("cssObjectText", "some text");
} }
catch(ex) { catch(ex) {
console.log("color issues"); console.log("color issues");
@ -109,8 +95,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
props.updateWebPartProperty("fieldSetHue", values); props.updateWebPartProperty("fieldSetHue", values);
setColorObj(cssObject(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", cssStyles(colorObj));
console.log(colorObj); console.log(escape(JSON.stringify(colorObj)));
props.updateWebPartProperty("cssObjectText", colorObj[0], true); //JSON.stringify(colorObj).replace(/['"]+/g, '')); props.updateWebPartProperty("cssObjectText", escape(JSON.stringify(colorObj))); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
}} }}
renderTrack={({ props, children }) => ( renderTrack={({ props, children }) => (
@ -271,7 +257,7 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
</fieldset> </fieldset>
<fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} > <fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} >
<Colors <Colors
colorObject = {colorObj[0]} colorObject = {colorObj}
fontColor = {props.properties["fontColor"]} fontColor = {props.properties["fontColor"]}
context = {props.context} context = {props.context}
></Colors> ></Colors>