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

Add files via upload 

Added 'hatColor' & 'facialHairColor' cases to switch
Fixed 'clotheColor' pieceType value
Added "filter: invert(1)" css to 'graphicType' case so icons are visible on while background
This commit is contained in:
thejason40 2022-11-18 10:44:56 +00:00 committed by Hugo Bernier
parent 50d63f48eb
commit 0d3c8e5b6f
1 changed files with 58 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
samples/react-avatar/src/webparts/avatarGenerator/components/AvatarGenerator.tsx
View File

@ -1,3 +1,5 @@
/* global _topvar, var2 */
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import * as React from 'react'; import * as React from 'react';
import styles from './AvatarGenerator.module.scss'; import styles from './AvatarGenerator.module.scss';
@ -18,6 +20,8 @@ import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText'; import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@material-ui/core/DialogTitle';
const options: IChoiceGroupOption[] = [ const options: IChoiceGroupOption[] = [
{ key: AvatarStyle.Circle, text: 'Circle' }, { key: AvatarStyle.Circle, text: 'Circle' },
{ key: AvatarStyle.Transparent, text: 'Transparent' } { key: AvatarStyle.Transparent, text: 'Transparent' }
@ -201,16 +205,20 @@ export default class AvatarGenerator extends React.Component<IAvatarGeneratorPro
.map(type => { .map(type => {
return (<div className={styles.piece} return (<div className={styles.piece}
onClick={(ev) => { onClick={(ev) => {
var selectedData = this.optionContext["_data"]; var selectedData = this.optionContext["_data"];
selectedData[`${option.key}`] = type; selectedData[`${option.key}`] = type;
this.optionContext.setData(selectedData as any); this.optionContext.setData(selectedData as any);
}} let _topvar = "LongHairFro";
}}
><Piece avatarStyle="Circle" ><Piece avatarStyle="Circle"
pieceType="top" pieceType="top"
pieceSize="100" pieceSize="100"
topType={type} /></div>); topType={type} /></div>);
})} }) }
</TabPanel>; </TabPanel>;
break;
case "accessoriesType": case "accessoriesType":
return <TabPanel value={this.state.value} index={internalcount}> return <TabPanel value={this.state.value} index={internalcount}>
{optionState.options {optionState.options
@ -227,7 +235,28 @@ export default class AvatarGenerator extends React.Component<IAvatarGeneratorPro
accessoriesType={type} /></div>); accessoriesType={type} /></div>);
})} })}
</TabPanel>; </TabPanel>;
case "hairColor": break;
case "hairColor":
return <TabPanel value={this.state.value} index={internalcount}>
{optionState.options
.map(type => {
return (<div className={styles.piece}
onClick={(ev) => {
var selectedData = this.optionContext["_data"];
selectedData[`${option.key}`] = type;
this.optionContext.setData(selectedData as any);
}}
> <Piece
avatarStyle=""
pieceType="top"
pieceSize="100"
hairColor={type} />
</div>);
})}
</TabPanel>;
break;
case "hatColor":
return <TabPanel value={this.state.value} index={internalcount}> return <TabPanel value={this.state.value} index={internalcount}>
{optionState.options {optionState.options
.map(type => { .map(type => {
@ -241,9 +270,8 @@ export default class AvatarGenerator extends React.Component<IAvatarGeneratorPro
avatarStyle="" avatarStyle=""
pieceType="top" pieceType="top"
pieceSize="100" pieceSize="100"
topType="LongHairFro" topType="WinterHat1"
hairColor={type} /> hatColor={type} /></div>);
</div>);
})} })}
</TabPanel>; </TabPanel>;
break; break;
@ -263,6 +291,24 @@ export default class AvatarGenerator extends React.Component<IAvatarGeneratorPro
facialHairType={type} /></div>); facialHairType={type} /></div>);
})} })}
</TabPanel>; </TabPanel>;
break;
case "facialHairColor":
return <TabPanel value={this.state.value} index={internalcount}>
{optionState.options
.map(type => {
return (<div className={styles.piece}
onClick={(ev) => {
var selectedData = this.optionContext["_data"];
selectedData[`${option.key}`] = type;
this.optionContext.setData(selectedData as any);
}}
><Piece avatarStyle=""
pieceType="facialHair"
pieceSize="100"
facialHairType="BeardMajestic"
facialHairColor={type} /></div>);
})}
</TabPanel>;
break; break;
case "clotheType": case "clotheType":
return <TabPanel value={this.state.value} index={internalcount}> return <TabPanel value={this.state.value} index={internalcount}>
@ -292,8 +338,9 @@ export default class AvatarGenerator extends React.Component<IAvatarGeneratorPro
this.optionContext.setData(selectedData as any); this.optionContext.setData(selectedData as any);
}} }}
><Piece avatarStyle="" ><Piece avatarStyle=""
pieceType="clotheColor" pieceType="clothe"
pieceSize="100" pieceSize="100"
clotheType="ShirtCrewNeck"
clotheColor={type} /></div>); clotheColor={type} /></div>);
})} })}
</TabPanel>; </TabPanel>;
@ -310,7 +357,8 @@ export default class AvatarGenerator extends React.Component<IAvatarGeneratorPro
}} }}
><Piece avatarStyle="" ><Piece avatarStyle=""
pieceType="graphics" pieceType="graphics"
pieceSize="100" pieceSize="200"
style={{filter: 'invert(1)'}}
graphicType={type} /></div>); graphicType={type} /></div>);
})} })}
</TabPanel>; </TabPanel>;