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

propertly support null entries in the values array

This commit is contained in:
Mike Homol 2021-03-31 18:25:37 -04:00
parent 7d3feff3e5
commit fa67ac4be1
1 changed files with 56 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
samples/react-advanced-page-properties/src/webparts/advancedPageProperties/components/AdvancedPageProperties.tsx
View File

@ -122,60 +122,64 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
* @param prop * @param prop
* @returns * @returns
*/ */
const RenderPagePropValue = (prop: PageProperty) => { const RenderPagePropValue = (prop: PageProperty) => {
console.log(prop); console.log(prop);
var retVal = _.map(prop.values, (val) => { var retVal = _.map(prop.values, (val) => {
switch (prop.info.TypeAsString) { if (val !== null) {
case "URL": switch (prop.info.TypeAsString) {
return ( case "URL":
<span className={styles.urlValue}><a href={val.Url} target="_blank" style={{color: semanticColors.link}}>{val.Description}</a></span> return (
); <span className={styles.urlValue}><a href={val.Url} target="_blank" style={{color: semanticColors.link}}>{val.Description}</a></span>
case "Thumbnail": );
return ( case "Thumbnail":
<span><img className={styles.imgValue} src={val.serverRelativeUrl} /></span> return (
); <span><img className={styles.imgValue} src={val.serverRelativeUrl} /></span>
case "Number": );
return ( case "Number":
<span>{(prop.info["ShowAsPercentage"] === true ? Number(val).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:0}) : (prop.info["CommaSeparator"] === true ? val.toLocaleString('en') : val.toString()))}</span> return (
); <span>{(prop.info["ShowAsPercentage"] === true ? Number(val).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:0}) : (prop.info["CommaSeparator"] === true ? val.toLocaleString('en') : val.toString()))}</span>
case "Currency": );
return ( case "Currency":
<span>{(prop.info["CommaSeparator"] === true ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val) : Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', useGrouping: false }).format(val))}</span> return (
); <span>{(prop.info["CommaSeparator"] === true ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val) : Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', useGrouping: false }).format(val))}</span>
case "DateTime": );
//,"",, case "DateTime":
switch (prop.info["DateFormat"]) { //,"",,
case "StandardUS": switch (prop.info["DateFormat"]) {
return ( case "StandardUS":
<span>{new Date(val).toLocaleDateString()}</span> return (
); <span>{new Date(val).toLocaleDateString()}</span>
case "ISO8601": );
const d = new Date(val); case "ISO8601":
return ( const d = new Date(val);
<span>{`${d.getFullYear().toString()}-${d.getMonth()}-${d.getDate()}`}</span> return (
); <span>{`${d.getFullYear().toString()}-${d.getMonth()}-${d.getDate()}`}</span>
case "DayOfWeek": );
return ( case "DayOfWeek":
<span>{new Date(val).toLocaleDateString("en-US", { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</span> return (
); <span>{new Date(val).toLocaleDateString("en-US", { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</span>
case "MonthSpelled": );
return ( case "MonthSpelled":
<span>{new Date(val).toLocaleDateString("en-US", { month: 'long', day: 'numeric', year: 'numeric' })}</span> return (
); <span>{new Date(val).toLocaleDateString("en-US", { month: 'long', day: 'numeric', year: 'numeric' })}</span>
default: );
return ( default:
<span>{new Date(val).toLocaleDateString()}</span> return (
); <span>{new Date(val).toLocaleDateString()}</span>
} );
case "TaxonomyFieldTypeMulti": }
case "TaxonomyFieldType": case "TaxonomyFieldTypeMulti":
return ( case "TaxonomyFieldType":
<span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val.Label}</span> return (
); <span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val.Label}</span>
default: );
return ( default:
<span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span> return (
); <span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span>
);
}
} else {
return (<></>);
} }
}); });
return retVal; return retVal;