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';
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);
} else {
update(this.properties, property, () => JSON.stringify(value));
}
// } else {
// update(this.properties, property, () => JSON.stringify(value));
// }
this.render();
}
@ -98,6 +99,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,

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

@ -13,6 +13,7 @@ export const Colors: React.FC<IColorsProps> = (props) => {
return (
<div>
<div>:root &#123;</div>
{
Object.keys(props.colorObject).map((key) => {
return (
@ -22,6 +23,8 @@ export const Colors: React.FC<IColorsProps> = (props) => {
})
}
<div>&#125;</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 { composeComponentAs } from 'office-ui-fabric-react';
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"); }
// console.log("RESULT:", RESULT);
//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) => {
@ -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]));
console.log("COBJ:",colorObj);
// 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) {
console.log("color issues");
@ -109,8 +95,8 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
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(colorObj);
props.updateWebPartProperty("cssObjectText", colorObj[0], true); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
console.log(escape(JSON.stringify(colorObj)));
props.updateWebPartProperty("cssObjectText", escape(JSON.stringify(colorObj))); //JSON.stringify(colorObj).replace(/['"]+/g, ''));
}}
renderTrack={({ props, children }) => (
@ -271,7 +257,7 @@ export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProp
</fieldset>
<fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} >
<Colors
colorObject = {colorObj[0]}
colorObject = {colorObj}
fontColor = {props.properties["fontColor"]}
context = {props.context}
></Colors>