css

exced · Jan 7, 2018 · 747e9b0 · 747e9b0
1 parent 86f10c1
commit 747e9b0
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -36,4 +36,7 @@ See [Example App](https://github.com/exced/react-file-manager/blob/master/src/Ap
 | renderItem | Object => React.Element | None  | true | Selected item rendering |
 | renderPreview | Object => React.Element | None  | true | Selected item preview rendering |
 
+## TODO
+- [ ] Add tests
+
 All contributions are welcome.
diff --git a/lib/App.js b/lib/App.js
@@ -18,12 +18,11 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\n  box-sizing: border-box;\n  min-height: 100%;\n  height: 100%;\n'], ['\n  box-sizing: border-box;\n  min-height: 100%;\n  height: 100%;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-height: 100%;\n  height: 100%;\n  padding: 8px;\n  max-width: 100%;\n  overflow: auto;\n'], ['\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  min-height: 100%;\n  height: 100%;\n  padding: 8px;\n  max-width: 100%;\n  overflow: auto;\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  border-right: 1px solid #ccc;\n  max-height: 100%;\n  overflow: auto;\n'], ['\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  border-right: 1px solid #ccc;\n  max-height: 100%;\n  overflow: auto;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  background-color: white;\n'], ['\n  background-color: white;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  background-color: white;\n  border-left: 1px solid #ccc;\n'], ['\n  background-color: white;\n  border-left: 1px solid #ccc;\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  border-top: 1px solid #ccc;\n  background-color: white;\n'], ['\n  border-top: 1px solid #ccc;\n  background-color: white;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  height: 100vh;\n  overflow-y: hidden;\n'], ['\n  height: 100vh;\n  overflow-y: hidden;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  display: flex;\n  background-color: white;\n  width: 100%;\n  min-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow-y: hidden;\n  overflow-x: auto;\n  box-sizing: border-box;\n'], ['\n  display: flex;\n  background-color: white;\n  width: 100%;\n  min-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow-y: hidden;\n  overflow-x: auto;\n  box-sizing: border-box;\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  border-right: 1px solid #ccc;\n  height: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-width: 250px;\n'], ['\n  border-right: 1px solid #ccc;\n  height: 100%;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-width: 250px;\n']),
+    _templateObject4 = _taggedTemplateLiteral(['\n  background-color: white;\n  border-left: 1px solid #ccc;\n'], ['\n  background-color: white;\n  border-left: 1px solid #ccc;\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  border-top: 1px solid #ccc;\n  background-color: white;\n'], ['\n  border-top: 1px solid #ccc;\n  background-color: white;\n']);
 
 require('antd/es/breadcrumb/style');
 
@@ -70,17 +69,15 @@ var Footer = _layout2.default.Footer,
     Sider = _layout2.default.Sider;
 
 
-var Root = _styledComponents2.default.div(_templateObject);
+var LayoutContainer = (0, _styledComponents2.default)(_layout2.default)(_templateObject);
 
-var HorizontalScrollContainer = _styledComponents2.default.div(_templateObject2);
+var ContentContainer = _styledComponents2.default.section(_templateObject2);
 
-var VerticalScrollContainer = _styledComponents2.default.div(_templateObject3);
+var ColumnContainer = _styledComponents2.default.div(_templateObject3);
 
-var StyledContent = (0, _styledComponents2.default)(Content)(_templateObject4);
+var StyledSider = (0, _styledComponents2.default)(Sider)(_templateObject4);
 
-var StyledSider = (0, _styledComponents2.default)(Sider)(_templateObject5);
-
-var StyledFooter = (0, _styledComponents2.default)(Footer)(_templateObject6);
+var StyledFooter = (0, _styledComponents2.default)(Footer)(_templateObject5);
 
 var assemble = function assemble(map, ids) {
   return ids.map(function (id) {
@@ -161,11 +158,18 @@ var App = function (_Component) {
     };
 
     _this.onDragStart = function (initial) {
-      console.log('onDragStart');
+      var _this$state = _this.state,
+          itemSelectedId = _this$state.itemSelectedId,
+          nav = _this$state.nav;
+      var map = _this.props.map;
+      // cannot move folder to right if selected
+
+      if (itemSelectedId === initial.draggableId && map[itemSelectedId].children.length > 0) {
+        _this.setState({ nav: nav.slice(0, -1) });
+      }
     };
 
     _this.onDragEnd = function (result) {
-      console.log('onDragEnd', result);
       // dropped nowhere  
       if (!result.destination) {
         return;
@@ -240,72 +244,64 @@ var App = function (_Component) {
       var preview = itemSelectedId ? renderPreview(map[itemSelectedId], itemSelectedIndex) : null;
 
       return _react2.default.createElement(
-        'div',
+        LayoutContainer,
         null,
         _react2.default.createElement(
           _layout2.default,
-          { style: { minHeight: '100vh' } },
+          null,
           _react2.default.createElement(
-            _layout2.default,
+            Content,
             null,
             _react2.default.createElement(
-              StyledContent,
+              ContentContainer,
               null,
               _react2.default.createElement(
                 _reactBeautifulDnd.DragDropContext,
                 { onDragStart: this.onDragStart, onDragEnd: this.onDragEnd },
-                _react2.default.createElement(
-                  Root,
-                  null,
-                  _react2.default.createElement(
-                    HorizontalScrollContainer,
-                    null,
-                    nav.map(function (id) {
-                      return map[id].children && _react2.default.createElement(
-                        VerticalScrollContainer,
-                        { key: 'column-' + id },
-                        _react2.default.createElement(_Column2.default, {
-                          listId: id,
-                          listType: 'card',
-                          data: assemble(map, map[id].children),
-                          autoFocusId: autoFocusId,
-                          selectedId: itemSelectedId,
-                          onClickItem: _this2.onClickItem,
-                          renderItem: renderItem
-                        })
-                      );
+                nav.map(function (id) {
+                  return map[id].children && _react2.default.createElement(
+                    ColumnContainer,
+                    { key: 'column-' + id },
+                    _react2.default.createElement(_Column2.default, {
+                      listId: id,
+                      listType: 'card',
+                      data: assemble(map, map[id].children),
+                      autoFocusId: autoFocusId,
+                      selectedId: itemSelectedId,
+                      onClickItem: _this2.onClickItem,
+                      renderItem: renderItem
                     })
-                  )
-                )
+                  );
+                })
               )
-            ),
-            _react2.default.createElement(
-              StyledSider,
-              { width: 300 },
-              preview
             )
           ),
           _react2.default.createElement(
-            StyledFooter,
-            null,
-            _react2.default.createElement(
-              _breadcrumb2.default,
-              { separator: '>' },
-              nav.map(function (id) {
-                return _react2.default.createElement(
-                  _breadcrumb2.default.Item,
-                  { key: 'breadcrumb-' + id },
-                  ' ',
-                  _react2.default.createElement(
-                    'a',
-                    { onClick: function onClick() {
-                        return _this2.onClickBreadcrumb(id);
-                      } },
-                    map[id].title
-                  )
-                );
-              })
-            )
+            StyledSider,
+            { width: 300 },
+            preview
+          )
+        ),
+        _react2.default.createElement(
+          StyledFooter,
+          null,
+          _react2.default.createElement(
+            _breadcrumb2.default,
+            { separator: '>' },
+            nav.map(function (id) {
+              return _react2.default.createElement(
+                _breadcrumb2.default.Item,
+                { key: 'breadcrumb-' + id },
+                ' ',
+                _react2.default.createElement(
+                  'a',
+                  { onClick: function onClick() {
+                      return _this2.onClickBreadcrumb(id);
+                    } },
+                  map[id].title
+                )
+              );
+            })
           )
         )
       );

diff --git a/lib/Column.js b/lib/Column.js
@@ -6,9 +6,9 @@ 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  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  width: 250px;\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  width: 250px;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  min-height: 100%;\n  margin-bottom: 8px;\n'], ['\n  min-height: 100%;\n  margin-bottom: 8px;\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 100%;\n'], ['\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 100%;\n']);
+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']),
+    _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']);
 
 var _react = require('react');
 

diff --git a/src/lib/App.js b/src/lib/App.js
@@ -10,7 +10,7 @@ import Column from './Column';
 
 const { Footer, Content, Sider } = Layout;
 
-const LayoutContainer = styled(Layout)`
+const LayoutContainer = styled(Layout) `
   height: 100vh;
   overflow-y: hidden;
 `
@@ -130,11 +130,15 @@ export default class App extends Component {
   };
 
   onDragStart = (initial) => {
-    console.log('onDragStart');
+    const { itemSelectedId, nav } = this.state
+    const { map } = this.props
+    // cannot move folder to right if selected
+    if (itemSelectedId === initial.draggableId && map[itemSelectedId].children.length > 0) {
+      this.setState({ nav: nav.slice(0, - 1) })
+    }
   }
 
   onDragEnd = (result) => {
-    console.log('onDragEnd', result);
     // dropped nowhere  
     if (!result.destination) {
       return;

diff --git a/src/lib/Column.js b/src/lib/Column.js
@@ -7,6 +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')};
   opacity: ${({ isDropDisabled }) => (isDropDisabled ? 0.5 : 'inherit')};
   padding: 8px;

diff --git a/stories/index.js b/stories/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import Default from './src/Default'
+import Stress from './src/Stress'
 
 storiesOf('File Manager', module)
-  .add('Default', () => <Default />)
+  .add('Default', () => <Default />)
+  .add('Stress', () => <Stress />)