color props

exced · Jan 7, 2018 · 5bd0fd0 · 5bd0fd0
1 parent 747e9b0
commit 5bd0fd0
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,8 @@ See [Example App](https://github.com/exced/react-file-manager/blob/master/src/Ap
 | onChangeColumn | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of column |
 | renderItem | Object => React.Element | None  | true | Selected item rendering |
 | renderPreview | Object => React.Element | None  | true | Selected item preview rendering |
+| itemSelectedColor | String | '#1a53ff'  | false | Item Selected color |
+| dropBackgroundColor | String | '#cccdce'  | false | Drop column background color |
 
 ## TODO
 - [ ] Add tests

diff --git a/lib/App.js b/lib/App.js
@@ -238,7 +238,9 @@ var App = function (_Component) {
       var _props = this.props,
           map = _props.map,
           renderItem = _props.renderItem,
-          renderPreview = _props.renderPreview;
+          renderPreview = _props.renderPreview,
+          itemSelectedColor = _props.itemSelectedColor,
+          dropBackgroundColor = _props.dropBackgroundColor;
 
 
       var preview = itemSelectedId ? renderPreview(map[itemSelectedId], itemSelectedIndex) : null;
@@ -269,6 +271,8 @@ var App = function (_Component) {
                       autoFocusId: autoFocusId,
                       selectedId: itemSelectedId,
                       onClickItem: _this2.onClickItem,
+                      itemSelectedColor: itemSelectedColor,
+                      dropBackgroundColor: dropBackgroundColor,
                       renderItem: renderItem
                     })
                   );
@@ -321,10 +325,14 @@ App.propTypes = {
   onChangeRow: _propTypes2.default.func,
   onChangeColumn: _propTypes2.default.func,
   renderItem: _propTypes2.default.func.isRequired,
-  renderPreview: _propTypes2.default.func.isRequired
+  renderPreview: _propTypes2.default.func.isRequired,
+  itemSelectedColor: _propTypes2.default.string,
+  dropBackgroundColor: _propTypes2.default.string
 };
 
 App.defaultProps = {
   onChangeRow: function onChangeRow(a, b, c) {},
-  onChangeColumn: function onChangeColumn(a, b, c) {}
+  onChangeColumn: function onChangeColumn(a, b, c) {},
+  itemSelectedColor: '#1a53ff',
+  dropBackgroundColor: '#cccdce'
 };
diff --git a/lib/Column.js b/lib/Column.js
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\n  margin-top: 20px;\n  background-color: ', ';\n  opacity: ', ';\n  padding: 8px;\n  padding-bottom: 0;\n  transition: background-color 0.1s ease, opacity 0.1s ease;\n  user-select: none;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 100%;\n'], ['\n  margin-top: 20px;\n  background-color: ', ';\n  opacity: ', ';\n  padding: 8px;\n  padding-bottom: 0;\n  transition: background-color 0.1s ease, opacity 0.1s ease;\n  user-select: none;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 100%;\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  background-color: ', ';\n  opacity: ', ';\n  padding: 8px;\n  padding-bottom: 0;\n  transition: background-color 0.1s ease, opacity 0.1s ease;\n  user-select: none;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 100%;\n'], ['\n  background-color: ', ';\n  opacity: ', ';\n  padding: 8px;\n  padding-bottom: 0;\n  transition: background-color 0.1s ease, opacity 0.1s ease;\n  user-select: none;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 100%;\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  width: 250px;\n  height: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin-bottom: 8px;\n'], ['\n  width: 250px;\n  height: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin-bottom: 8px;\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  max-height: 100%;\n'], ['\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  max-height: 100%;\n']);
 
@@ -41,8 +41,9 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 
 var Wrapper = _styledComponents2.default.div(_templateObject, function (_ref) {
-  var isDraggingOver = _ref.isDraggingOver;
-  return isDraggingOver ? '#cccdce' : 'white';
+  var isDraggingOver = _ref.isDraggingOver,
+      dropBackgroundColor = _ref.dropBackgroundColor;
+  return isDraggingOver ? dropBackgroundColor : 'white';
 }, function (_ref2) {
   var isDropDisabled = _ref2.isDropDisabled;
   return isDropDisabled ? 0.5 : 'inherit';
@@ -72,6 +73,7 @@ var Column = function (_Component) {
           data = _this$props.data,
           selectedId = _this$props.selectedId,
           onClickItem = _this$props.onClickItem,
+          itemSelectedColor = _this$props.itemSelectedColor,
           renderItem = _this$props.renderItem;
 
 
@@ -97,6 +99,7 @@ var Column = function (_Component) {
                   onClick: function onClick() {
                     return onClickItem(item, index);
                   },
+                  itemSelectedColor: itemSelectedColor,
                   renderItem: renderItem
                 }),
                 dragProvided.placeholder
@@ -120,6 +123,7 @@ var Column = function (_Component) {
           isDropDisabled = _props.isDropDisabled,
           listId = _props.listId,
           listType = _props.listType,
+          dropBackgroundColor = _props.dropBackgroundColor,
           style = _props.style;
 
 
@@ -137,7 +141,8 @@ var Column = function (_Component) {
             {
               style: style,
               isDraggingOver: dropSnapshot.isDraggingOver,
-              isDropDisabled: isDropDisabled
+              isDropDisabled: isDropDisabled,
+              dropBackgroundColor: dropBackgroundColor
             },
             internalScroll ? _react2.default.createElement(
               ScrollContainer,
@@ -159,5 +164,7 @@ exports.default = Column;
 Column.propTypes = {
   selectedId: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   onClickItem: _propTypes2.default.func.isRequired,
-  renderItem: _propTypes2.default.func.isRequired
+  renderItem: _propTypes2.default.func.isRequired,
+  itemSelectedColor: _propTypes2.default.string.isRequired,
+  dropBackgroundColor: _propTypes2.default.string.isRequired
 };
diff --git a/lib/Item.js b/lib/Item.js
@@ -14,6 +14,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactDom = require('react-dom');
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
@@ -34,8 +38,9 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var Container = _styledComponents2.default.div(_templateObject, function (_ref) {
   var selected = _ref.selected,
-      isDragging = _ref.isDragging;
-  return isDragging || selected ? '#1a53ff' : 'white';
+      isDragging = _ref.isDragging,
+      itemSelectedColor = _ref.itemSelectedColor;
+  return isDragging || selected ? itemSelectedColor : 'white';
 }, function (_ref2) {
   var isDragging = _ref2.isDragging;
   return isDragging ? '2px 2px 1px grey' : 'none';
@@ -70,7 +75,8 @@ var Item = function (_Component) {
           isDragging = _props.isDragging,
           provided = _props.provided,
           selected = _props.selected,
-          onClick = _props.onClick;
+          onClick = _props.onClick,
+          itemSelectedColor = _props.itemSelectedColor;
 
 
       return _react2.default.createElement(
@@ -82,7 +88,8 @@ var Item = function (_Component) {
             isDragging: isDragging,
             innerRef: provided.innerRef,
             style: provided.draggableStyle,
-            selected: selected
+            selected: selected,
+            itemSelectedColor: itemSelectedColor
           }, provided.dragHandleProps),
           renderItem(item, index)
         )
@@ -93,4 +100,9 @@ var Item = function (_Component) {
   return Item;
 }(_react.Component);
 
-exports.default = Item;
+exports.default = Item;
+
+
+Item.propTypes = {
+  itemSelectedColor: _propTypes2.default.string.isRequired
+};
diff --git a/src/lib/App.js b/src/lib/App.js
@@ -183,7 +183,7 @@ export default class App extends Component {
   render() {
     const { nav, autoFocusId, itemSelectedId, itemSelectedIndex } = this.state;
 
-    const { map, renderItem, renderPreview } = this.props;
+    const { map, renderItem, renderPreview, itemSelectedColor, dropBackgroundColor } = this.props;
 
     const preview = (itemSelectedId) ? renderPreview(map[itemSelectedId], itemSelectedIndex) : null
 
@@ -202,6 +202,8 @@ export default class App extends Component {
                       autoFocusId={autoFocusId}
                       selectedId={itemSelectedId}
                       onClickItem={this.onClickItem}
+                      itemSelectedColor={itemSelectedColor}
+                      dropBackgroundColor={dropBackgroundColor}
                       renderItem={renderItem}
                     />
                   </ColumnContainer>
@@ -233,9 +235,13 @@ App.propTypes = {
   onChangeColumn: PropTypes.func,
   renderItem: PropTypes.func.isRequired,
   renderPreview: PropTypes.func.isRequired,
+  itemSelectedColor: PropTypes.string,
+  dropBackgroundColor: PropTypes.string,
 }
 
 App.defaultProps = {
   onChangeRow: (a, b, c) => { },
   onChangeColumn: (a, b, c) => { },
+  itemSelectedColor: '#1a53ff',
+  dropBackgroundColor: '#cccdce',
 }
diff --git a/src/lib/Column.js b/src/lib/Column.js
@@ -7,8 +7,7 @@ import { Droppable, Draggable } from 'react-beautiful-dnd';
 import Item from './Item';
 
 const Wrapper = styled.div`
-  margin-top: 20px;
-  background-color: ${({ isDraggingOver }) => (isDraggingOver ? '#cccdce' : 'white')};
+  background-color: ${({ isDraggingOver, dropBackgroundColor }) => (isDraggingOver ? dropBackgroundColor : 'white')};
   opacity: ${({ isDropDisabled }) => (isDropDisabled ? 0.5 : 'inherit')};
   padding: 8px;
   padding-bottom: 0;
@@ -44,6 +43,7 @@ export default class Column extends Component {
       data,
       selectedId,
       onClickItem,
+      itemSelectedColor,
       renderItem,
      } = this.props;
 
@@ -62,6 +62,7 @@ export default class Column extends Component {
                   autoFocus={this.props.autoFocusId === item.id}
                   selected={selectedId && selectedId === item.id}
                   onClick={() => onClickItem(item, index)}
+                  itemSelectedColor={itemSelectedColor}
                   renderItem={renderItem}
                 />
                 {dragProvided.placeholder}
@@ -81,6 +82,7 @@ export default class Column extends Component {
       isDropDisabled,
       listId,
       listType,
+      dropBackgroundColor,
       style,
     } = this.props;
 
@@ -96,6 +98,7 @@ export default class Column extends Component {
             style={style}
             isDraggingOver={dropSnapshot.isDraggingOver}
             isDropDisabled={isDropDisabled}
+            dropBackgroundColor={dropBackgroundColor}
           >
             {internalScroll ? (
               <ScrollContainer>
@@ -115,4 +118,6 @@ Column.propTypes = {
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onClickItem: PropTypes.func.isRequired,
   renderItem: PropTypes.func.isRequired,
+  itemSelectedColor: PropTypes.string.isRequired,
+  dropBackgroundColor: PropTypes.string.isRequired,
 }
diff --git a/src/lib/Item.js b/src/lib/Item.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 
 const Container = styled.div`
 border-radius: 3px;
 border: 1px solid grey;
-background-color: ${({ selected, isDragging }) => ((isDragging || selected) ? '#1a53ff' : 'white')};
+background-color: ${({ selected, isDragging, itemSelectedColor }) => ((isDragging || selected) ? itemSelectedColor : 'white')};
 /* cursor: grabbing is handled by app */
 cursor: grab;
 box-shadow: ${({ isDragging }) => (isDragging ? `2px 2px 1px grey` : 'none')};
@@ -37,7 +38,7 @@ export default class Item extends Component {
   }
 
   render() {
-    const { item, index, renderItem, isDragging, provided, selected, onClick } = this.props;
+    const { item, index, renderItem, isDragging, provided, selected, onClick, itemSelectedColor } = this.props;
 
     return (
       <div onClick={onClick}>
@@ -46,11 +47,16 @@ export default class Item extends Component {
           innerRef={provided.innerRef}
           style={provided.draggableStyle}
           selected={selected}
+          itemSelectedColor={itemSelectedColor}
           {...provided.dragHandleProps}
         >
           {renderItem(item, index)}
         </Container>
       </div>
     );
   }
+}
+
+Item.propTypes = {
+  itemSelectedColor: PropTypes.string.isRequired,
 }
diff --git a/stories/index.js b/stories/index.js
@@ -2,7 +2,9 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import Default from './src/Default'
 import Stress from './src/Stress'
+import Color from './src/Color'
 
 storiesOf('File Manager', module)
   .add('Default', () => <Default />)
-  .add('Stress', () => <Stress />)
+  .add('Stress', () => <Stress />)
+  .add('Color', () => <Color itemSelectedColor='#66ff99' dropBackgroundColor='#99ddff'/>)