Skip to content

Commit

Permalink
Bring your own config
Browse files Browse the repository at this point in the history
  • Loading branch information
exced committed Jul 6, 2018
1 parent d34e5ec commit 2f32848
Show file tree
Hide file tree
Showing 8 changed files with 432 additions and 436 deletions.
32 changes: 17 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ yarn add react-file-manager
```

## Build

```bash
yarn lib
```
Expand All @@ -28,22 +29,23 @@ You can also check out a [Real world app](https://github.com/exced/graphql-start

## API

| Name | Type | Default | Required | Description |
| :----------:| :-------------: | :-----------------: | :----------:| :------------:|
| map | Files object. See [Example](https://github.com/exced/react-file-manager/blob/master/src/App.js) Mandatory fields : "id", "children", "parent" | None | true | normalized data map (You can use easily setup a normalizr schema. |
| rootId | Number | None | true | Id of root folder |
| onChange | Object => void | None | true | Triggered when file structure changes |
| onChangeRow | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of row |
| onChangeColumn | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of column |
| onOutsideDrop | (itemId, files) => void | (a,b) => {} | false | Triggered when files from outside are dropped into a column |
| dropzoneConfig| object | {} | false | [react-dropzone](https://react-dropzone.js.org) config |
| renderItem | Object => React.Element | React.Element | false | Selected item rendering |
| renderPreview | Object => React.Element | React.Element | false | Selected item preview rendering |
| itemSelectedColor | String | '#1a53ff' | false | Item Selected color |
| dropBackgroundColor | String | '#cccdce' | false | Drop column background color |
| Name | Type | Default | Required | Description |
| :-----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------: | :---------------------------------------------------------------: |
| map | Files object. See [Example](https://github.com/exced/react-file-manager/blob/master/src/App.js) Mandatory fields : "id", "children", "parent" | None | true | normalized data map (You can use easily setup a normalizr schema. |
| rootId | Number | None | true | Id of root folder |
| onChange | Object => void | None | true | Triggered when file structure changes |
| onChangeRow | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of row |
| onChangeColumn | (itemId, source, destination) => void | (a,b,c) => {} | false | Triggered when item change of column |
| onOutsideDrop | (itemId, files) => void | (a,b) => {} | false | Triggered when files from outside are dropped into a column |
| dropzoneConfig | object | {} | false | [react-dropzone](https://react-dropzone.js.org) config |
| renderItem | Object => React.Element | React.Element | false | Selected item rendering |
| renderPreview | Object => React.Element | React.Element | false | Selected item preview rendering |
| itemSelectedColor | String | '#1a53ff' | false | Item Selected color |
| dropBackgroundColor | String | '#cccdce' | false | Drop column background color |

## TODO
- [ ] Add tests
- [x] Extended version as default

- [ ] Add tests
- [x] Extended version example

All contributions are welcome.
176 changes: 89 additions & 87 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,94 +1,96 @@
import React, { Component } from 'react'
import FileManager, { Types } from './lib'
import axios from 'axios'
import React, { Component } from 'react';
import { Types } from './lib';
import FileManagerWrapper from './FileManagerWrapper';
import axios from 'axios';

const initial = {
'0': {
id: '0',
title: 'Root',
type: Types.folder,
children: ['1'],
parent: null,
},
'1': {
id: '1',
title: 'title1',
type: Types.folder,
children: ['2', '3'],
parent: '0',
},
'2': {
id: '2',
title: 'title2',
type: Types.file,
children: [],
parent: '1',
},
'3': {
id: '3',
title: 'title3',
type: Types.folder,
children: ['4', '5'],
parent: '1',
},
'4': {
id: '4',
title: 'title4',
type: Types.file,
children: [],
parent: '3',
},
'5': {
id: '5',
title: 'title5',
type: Types.file,
children: [],
parent: '3',
},
}
'0': {
id: '0',
title: 'Root',
type: Types.folder,
children: ['1'],
parent: null,
},
'1': {
id: '1',
title: 'title1',
type: Types.folder,
children: ['2', '3'],
parent: '0',
},
'2': {
id: '2',
title: 'title2',
type: Types.file,
children: [],
parent: '1',
},
'3': {
id: '3',
title: 'title3',
type: Types.folder,
children: ['4', '5'],
parent: '1',
},
'4': {
id: '4',
title: 'title4',
type: Types.file,
children: [],
parent: '3',
},
'5': {
id: '5',
title: 'title5',
type: Types.file,
children: [],
parent: '3',
},
};

export default class App extends Component {
constructor(props) {
super(props)
this.state = {
map: initial,
}
}
constructor(props) {
super(props);
this.state = {
map: initial,
};
}

onOutsideDrop = (parentId, files) => {
if (files.length <= 3) {
let data = new FormData()
for (let i = 0; i < files.length; i++) {
data.append('files', files[i])
}
axios.post('http://localhost:8000/upload', data)
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
onOutsideDrop = (parentId, files) => {
if (files.length <= 3) {
let data = new FormData();
for (let i = 0; i < files.length; i++) {
data.append('files', files[i]);
}
axios
.post('http://localhost:8000/upload', data)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
};

render() {
const { map } = this.state
return (
<FileManager
map={map}
rootId='0'
onChange={map => this.setState({ map })}
onOutsideDrop={this.onOutsideDrop}
dropzoneConfig={{
name: 'files',
inputProps: {
type: 'file',
enctype: 'multipart/form-data',
action: '/files',
method: 'post'
}
}}
/>
)
}
render() {
const { map } = this.state;
return (
<FileManagerWrapper
map={map}
rootId="0"
onChange={map => this.setState({ map })}
onOutsideDrop={this.onOutsideDrop}
dropzoneConfig={{
name: 'files',
inputProps: {
type: 'file',
enctype: 'multipart/form-data',
action: '/files',
method: 'post',
},
}}
/>
);
}
}
File renamed without changes.
Loading

0 comments on commit 2f32848

Please sign in to comment.