Outsource some styling to css

Benjamin Kniffler · Benjamin Kniffler · commit d7bb3eef18ad · 2016-03-31T03:54:35.000+02:00
diff --git a/draft-js-dnd-plugin/src/Image/index.js b/draft-js-dnd-plugin/src/Image/index.js
@@ -55,8 +55,8 @@ class Image extends Component {
           data-offset-key={ `${block.get('key')}-0-0` }
           onDragStart={onDragStart} draggable={draggable}
         >
-          <img src={blockProps.src || (`/images ${blockProps.url}`)} width="100%" height="auto" className={ theme.get('image') } />
-          {blockProps.progress >= 0 ? <div style={{ position: 'absolute', width: `${100 - blockProps.progress}%`, right: 0, top: 0, height: '100%', backgroundColor: 'white' }} /> : null}
+          <img src={blockProps.src || blockProps.url} width="100%" height="auto" className={ theme.get('image') } />
+          {blockProps.progress >= 0 ? <div className={theme.get('imageLoader')} style={{ width: `${100 - blockProps.progress}%` }} /> : null}
           { attachButtons ? buttons : null }
         </figure>
     );
diff --git a/draft-js-dnd-plugin/src/imageStyles.css b/draft-js-dnd-plugin/src/imageStyles.css
@@ -46,3 +46,11 @@
 
 .image {
 }
+
+.imageLoader{
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  background-color: white;
+}
diff --git a/draft-js-dnd-plugin/src/index.js b/draft-js-dnd-plugin/src/index.js
@@ -13,6 +13,7 @@ const defaultTheme = Map({
   imageWrapper: imageStyles.imageWrapper,
   image: imageStyles.image,
   imageButton: imageStyles.imageButton,
+  imageLoader: imageStyles.imageLoader,
 
   // This is for block-alignment-wrapper, only temporarily living here
   left: imageStyles.left,
