├── .eslintrc ├── .gitignore ├── .npmignore ├── .storybook ├── main.js └── preview.js ├── .travis.yml ├── .vscode └── settings.json ├── LICENSE ├── PULL_REQUEST_FORMAT.md ├── README.md ├── demo-site ├── README.md ├── _config.yml ├── _includes │ ├── head.html │ └── required_static.html ├── demos.js ├── demos.sass ├── flat-simple.js ├── grouped-thumbnails.js ├── index.html ├── nested-editable.js ├── package.json ├── test.sass ├── webpack.config.js └── yarn.lock ├── index.js ├── package.json ├── src ├── actions │ ├── default.js │ └── index.js ├── base-file.js ├── base-folder.js ├── browser.js ├── browser.sass ├── confirmations │ ├── default.js │ ├── index.js │ └── multiple.js ├── constants.js ├── details │ ├── default.js │ └── index.js ├── files │ ├── index.js │ ├── list-thumbnail.js │ ├── simple-list-thumbnail.js │ ├── table.js │ └── utils.js ├── filters │ ├── default.js │ └── index.js ├── folders │ ├── index.js │ ├── list-thumbnail.js │ └── table.js ├── groupers │ ├── by-folder.js │ ├── by-modified.js │ ├── index.js │ └── utils.js ├── headers │ ├── index.js │ └── table.js ├── icons │ ├── FontAwesome.js │ └── index.js ├── index.js ├── list-style.sass ├── sorters │ ├── by-modified.js │ ├── by-name.js │ ├── index.js │ └── utils.js ├── table-style.sass └── utils.js ├── stories ├── index.js └── stories.sass ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "react", 4 | "@typescript-eslint" 5 | ], 6 | "parser": "@typescript-eslint/parser", 7 | "rules": { 8 | 9 | // stops the 'React' was used before it was defined no-use-before-define error for .js files. 10 | "no-use-before-define": "off", 11 | "@typescript-eslint/no-use-before-define": ["error"], 12 | 13 | "react/prop-types": 1, 14 | "react/jsx-handler-names": "off", 15 | "react/jsx-uses-react": "error", 16 | "react/jsx-uses-vars": "error", 17 | 18 | "comma-dangle": [2, { 19 | "arrays": "always-multiline", 20 | "exports": "always-multiline", 21 | "functions": "never", 22 | "imports": "always-multiline", 23 | "objects": "always-multiline" 24 | }], 25 | 26 | "space-before-function-paren": [2, { 27 | "anonymous": "never", 28 | "named": "never", 29 | "asyncArrow": "always" 30 | }], 31 | 32 | "jsx-quotes": [2, "prefer-double"], 33 | "no-var": 2, 34 | 35 | "semi": [2, "never"], 36 | "lines-between-class-members": "off" 37 | }, 38 | 39 | "extends": ["standard", "standard-react"], 40 | 41 | "env": { 42 | "browser": true, 43 | "jest": true, 44 | "jasmine": true 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # Built files 40 | dist/ 41 | 42 | # Jekyll 43 | demo-site/_site/ 44 | demo-site/dist/ 45 | 46 | .yalc 47 | *yalc.lock 48 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/**/*.jsx 2 | demo-site/ 3 | webpack.config.js 4 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | 3 | module.exports = { 4 | stories: ['../stories/index.js'], 5 | webpackFinal: (config) => { 6 | config.module.rules.push({ 7 | test: /\.(sass|scss)$/, 8 | use: ['style-loader', 'css-loader', 'sass-loader'], 9 | include: [ 10 | path.resolve(__dirname, '../stories') 11 | ] 12 | }) 13 | config.resolve.extensions.push('.sass') 14 | return config 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import "../dist/react-keyed-file-browser.css" 3 | 4 | export const decorators = [(Story) => ]; -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | dist: bionic 3 | node_js: node 4 | cache: yarn 5 | 6 | branches: 7 | only: 8 | - master 9 | 10 | script: 11 | - yarn lint 12 | 13 | notifications: 14 | email: false 15 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.implicitProjectConfig.checkJs": true 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Uptick Pty Ltd 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PULL_REQUEST_FORMAT.md: -------------------------------------------------------------------------------- 1 | # Pull Request Format 2 | 3 | ## Description 4 | 5 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 6 | 7 | 8 | ## Changelog 9 | 10 | Please delete options that are not relevant. 11 | 12 | - [ ] Bug fix (non-breaking change which fixes an issue) 13 | - [ ] New feature (non-breaking change which adds functionality) 14 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 15 | - [ ] This change requires a documentation update 16 | 17 | ## How Has This Been Tested? 18 | 19 | Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration 20 | 21 | - [ ] Test A 22 | - [ ] Test B 23 | 24 | 25 | ## Checklist: 26 | 27 | - [ ] My code follows the style guidelines of this project 28 | - [ ] I have performed a self-review of my own code 29 | - [ ] I have commented my code, particularly in hard-to-understand areas 30 | - [ ] I have made corresponding changes to the documentation 31 | - [ ] My changes generate no new warnings 32 | - [ ] I have added tests that prove my fix is effective or that my feature works 33 | - [ ] New and existing unit tests pass locally with my changes 34 | - [ ] Any dependent changes have been merged and published in downstream modules 35 | - [ ] I have checked my code and corrected any misspellings 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-keyed-file-browser 2 | 3 | [![Build Status](https://travis-ci.org/uptick/react-keyed-file-browser.svg?branch=master)](https://travis-ci.org/uptick/react-keyed-file-browser) 4 | [![npm version](https://badge.fury.io/js/react-keyed-file-browser.svg)](http://badge.fury.io/js/react-keyed-file-browser) 5 | ![Downloads](http://img.shields.io/npm/dm/react-keyed-file-browser.svg?style=flat) 6 | 7 | Folder based file browser given a flat keyed list of objects, powered by React. 8 | 9 | ## Live Demo 10 | 11 | Check out the live demo here: http://uptick.github.io/react-keyed-file-browser/ 12 | 13 | ## Installation 14 | 15 | Install the package with npm: 16 | 17 | ```bash 18 | # NPM 19 | npm install react-keyed-file-browser 20 | 21 | # Yarn 22 | yarn add react-keyed-file-browser 23 | ``` 24 | 25 | 26 | ```javascript 27 | import React from 'react' 28 | import ReactDOM from 'react-dom' 29 | 30 | import FileBrowser from 'react-keyed-file-browser' 31 | 32 | ReactDOM.render( 33 | , 36 | document.getElementById('root') 37 | ); 38 | ``` 39 | 40 | Include icons from FontAwesome 4: 41 | 42 | ```javascript 43 | import React from 'react' 44 | import ReactDOM from 'react-dom' 45 | 46 | import FileBrowser, { Icons } from 'react-keyed-file-browser' 47 | 48 | // this imports the FontAwesome Icon Styles 49 | import 'font-awesome/css/font-awesome.min.css' 50 | 51 | var mount = document.querySelectorAll('div.browser-mount'); 52 | ReactDOM.render( 53 | , 57 | mount[0] 58 | ); 59 | ``` 60 | 61 | or your own icons by specifying as so: 62 | ```javascript 63 |