allow to hide the remove button for stickers

nikgraf · nikgraf · commit 9440bb91a948 · 2016-03-03T18:02:32.000-08:00
diff --git a/site/components/SuperheroEditor/index.js b/site/components/SuperheroEditor/index.js
@@ -9,11 +9,12 @@ import stickers from './stickers';
 import StatePreview from '../StatePreview';
 import Hashtag from './Hashtag';
 import Link from './Link';
-import Sticker from './Sticker';
 
+// import Sticker from './Sticker';
+// const stickerPluginInstance = stickerPlugin({ stickers, Sticker });
+const stickerPluginInstance = stickerPlugin({ stickers, hasRemove: false });
 const hashtagPluginInstance = hashtagPlugin({ Hashtag });
 const linkifyPluginInstance = linkifyPlugin({ Link });
-const stickerPluginInstance = stickerPlugin({ stickers, Sticker });
 const { StickerSelect } = stickerPluginInstance;
 
 const plugins = [
diff --git a/src/stickerPlugin/Sticker/index.js b/src/stickerPlugin/Sticker/index.js
@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import styles from './styles';
 import { Entity } from 'draft-js';
 
-export default (stickers) => {
+export default (stickers, hasRemove = true) => {
   class Sticker extends Component {
 
     remove = (event) => {
@@ -18,18 +18,22 @@ export default (stickers) => {
     };
 
     render() {
+      const removeButton = (
+        <span
+          style={ styles.removeButton }
+          onClick={ this.remove }
+          type="button"
+        >
+          ✕
+        </span>
+      );
+
       const { block } = this.props;
       const data = Entity.get(block.getEntityAt(0)).getData();
       return (
         <figure style={ styles.root } contentEditable={ false } data-offset-key={ `${block.get('key')}-0-0` }>
           <img style={ styles.image } src={ stickers.getIn(['data', data.id, 'url']) } />
-          <span
-            style={ styles.removeButton }
-            onClick={ this.remove }
-            type="button"
-          >
-            ✕
-          </span>
+          { hasRemove ? removeButton : null }
         </figure>
       );
     }
diff --git a/src/stickerPlugin/blockRendererFn.js b/src/stickerPlugin/blockRendererFn.js
@@ -5,7 +5,7 @@ export default (config) => (contentBlock, editor) => {
   const type = contentBlock.getType();
   if (type === 'sticker') {
     return {
-      component: (config.Sticker !== undefined ? config.Sticker : sticker(config.stickers)),
+      component: (config.Sticker !== undefined ? config.Sticker : sticker(config.stickers, config.hasRemove)),
       props: {
         onRemove: (blockKey) => {
           editor.onChange(removeSticker(editor.props.editorState, blockKey));
diff --git a/src/stickerPlugin/index.js b/src/stickerPlugin/index.js
@@ -10,7 +10,7 @@ const stickerPlugin = (config) => ({
   blockRendererFn: blockRendererFn(config), // standard plugin callback
   onChange: cleanupEmptyStickers, // standard plugin callback
   remove: removeSticker,
-  Sticker: sticker(config.stickers),
+  Sticker: sticker(config.stickers, config.hasRemove),
   StickerSelect: stickerSelect(config.stickers),
 });
 
