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