new blende mode panel

src/components/EmitterConfig/expansionPanelBlendMode.tsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import {
+  ExpansionPanel,
+  ExpansionPanelSummary,
+  Typography,
+  ExpansionPanelDetails,
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { inject, observer } from 'mobx-react';
+import { EMITTER_STORE, EmitterStoreProp } from 'src/stores';
+import Select from '../Select';
+import { blendModes } from 'src/constants';
+
+@inject(EMITTER_STORE)
+@observer
+class ExpansionPanelBlendMode extends Component<EmitterStoreProp> {
+  render() {
+    return (
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>Blend Mode</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Select configName="blendMode" options={blendModes} />
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    );
+  }
+}
+
+export default ExpansionPanelBlendMode;

src/components/EmitterConfig/index.tsx

@@ -9,6 +9,7 @@ import ExpansionPanelFrame from './expansionPanelFrame';
 import ExpansionPanelColorPicker from './expansionPanelColorPicker';
 import ExpansionPanelTransform from './expansionPanelTransform';
 import ExpansionPanelBounds from './expansionPanelBounds';
+import ExpansionPanelBlendMode from './expansionPanelBlendMode';
 
 const styles = {
   root: {
@@ -32,6 +33,8 @@ class EmitterConfig extends Component<WithStyles<typeof styles>> {
 
         <ExpansionPanelFrame />
 
+        <ExpansionPanelBlendMode />
+
         <ExpansionPanelColorPicker />
 
         <ExpansionPanelXY