Skip to content

Commit cd1ca38

Browse files
committed
Update README.md
1 parent 368df78 commit cd1ca38

File tree

1 file changed

+8
-38
lines changed

1 file changed

+8
-38
lines changed

README.md

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22

3-
# Note: Check Issues for more info
3+
# Note: v5 Soon....
44

55
<div align="center">
66
<img src="https://cloud.githubusercontent.com/assets/4413963/18860410/26f64de8-84b8-11e6-9284-350308eed30a.png"/>
@@ -43,7 +43,8 @@ npm install @nosferatu500/react-sortable-tree --save
4343
yarn add @nosferatu500/react-sortable-tree
4444
```
4545

46-
ES6 and CommonJS builds are available with each distribution.
46+
ES6 build only.
47+
4748
For example:
4849

4950
```js
@@ -55,13 +56,6 @@ import SortableTree from '@nosferatu500/react-sortable-tree';
5556

5657
// Or you can import the tree without the dnd context as a named export. eg
5758
import { SortableTreeWithoutDndContext as SortableTree } from '@nosferatu500/react-sortable-tree';
58-
59-
// Importing from cjs (default)
60-
import SortableTree from '@nosferatu500/react-sortable-tree/dist/index.cjs.js';
61-
import SortableTree from '@nosferatu500/react-sortable-tree';
62-
63-
// Importing from esm
64-
import SortableTree from '@nosferatu500/react-sortable-tree/dist/index.esm.js';
6559
```
6660

6761
## Usage
@@ -127,8 +121,6 @@ export default class Tree extends Component {
127121
| scaffoldBlockPxWidth | number | The width of the blocks containing the lines representing the structure of the tree. Defaults to `44`. |
128122
| nodeContentRenderer | any | Override the default component ([`NodeRendererDefault`](./src/node-renderer-default.tsx)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.tsx` to use as a base, and customize as needed. |
129123
| placeholderRenderer | any | Override the default placeholder component ([`PlaceholderRendererDefault`](./src/placeholder-renderer-default.tsx)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead. |
130-
| virtuosoProps | object | Properties to set directly on the underlying [Virtuoso](https://virtuoso.dev/virtuoso-api-reference/) component.
131-
| virtuosoRef | ref | A [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) via which to access the underlying [Virtuoso](https://virtuoso.dev/virtuoso-api-reference/) component's methods.
132124

133125
## Data Helper Functions
134126

@@ -154,19 +146,6 @@ Check out the helper functions exported from [`tree-data-utils.ts`](./src/utils/
154146
- **`isDescendant`**: Check if a node is a descendant of another node.
155147
- **`getDepth`**: Get the longest path in the tree.
156148

157-
## Themes
158-
159-
Using the `theme` prop along with an imported theme module, you can easily override the default appearance with another standard one.
160-
161-
### Featured themes
162-
163-
| ![File Explorer Theme](https://user-images.githubusercontent.com/4413963/32144502-1df1ae08-bcfd-11e7-8f63-8b836dace1a4.png) | <img alt="Full Node Drag Theme" src="https://user-images.githubusercontent.com/4413963/33521792-61dc2c50-d81f-11e7-8ab1-359661a11ca4.png" width="300"> | <img alt="MINIMAL THEME" src="https://github.com/lifejuggler/react-sortable-tree-theme-minimal/blob/master/example-resource/main.png" width="300"> |
164-
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: |
165-
| **File Explorer** | **Full Node Drag** | **Minimalistic theme inspired from MATERIAL UI** |
166-
| @nosferatu500/theme-file-explorer | react-sortable-tree-theme-full-node-drag | react-sortable-tree-theme-minimal |
167-
| [Github](https://github.com/nosferatu500/theme-file-explorer) \| [NPM](https://www.npmjs.com/package/@nosferatu500/theme-file-explorer) | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-full-node-drag) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-full-node-drag) | [Github](https://github.com/lifejuggler/react-sortable-tree-theme-minimal) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-minimal) |
168-
169-
**Help Wanted** - As the themes feature has just been enabled, there are very few (only _two_ at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my [file explorer theme repo](https://github.com/nosferatu500/theme-file-explorer) as a template to plug in your own stuff.
170149

171150
## Browser Compatibility
172151

@@ -175,16 +154,10 @@ Using the `theme` prop along with an imported theme module, you can easily overr
175154
| Chrome | Yes |
176155
| Firefox | Yes |
177156
| Safari | Yes |
178-
| IE 11 | Yes |
157+
| Edge | Yes |
179158

180159
## Troubleshooting
181160

182-
### If it throws "TypeError: fn is not a function" errors in production
183-
184-
This issue may be related to an ongoing incompatibility between UglifyJS and Webpack's behavior. See an explanation at [create-react-app#2376](https://github.com/facebookincubator/create-react-app/issues/2376).
185-
186-
The simplest way to mitigate this issue is by adding `comparisons: false` to your Uglify config as seen here: https://github.com/facebookincubator/create-react-app/pull/2379/files
187-
188161
### If it doesn't work with other components that use react-dnd
189162

190163
react-dnd only allows for one DragDropContext at a time (see: https://github.com/gaearon/react-dnd/issues/186). To get around this, you can import the context-less tree component via `SortableTreeWithoutDndContext`.
@@ -206,22 +179,19 @@ After cloning the repository and running `yarn install` inside, you can use the
206179
```sh
207180
# Starts a webpack dev server that hosts a demo page with the component.
208181
# It uses react-hot-loader so changes are reflected on save.
209-
yarn start
182+
npm start
210183

211184
# Start the storybook, which has several different examples to play with.
212185
# Also hot-reloaded.
213-
yarn run storybook
214-
215-
# Runs the library tests
216-
yarn test
186+
npm run storybook
217187

218188
# Lints the code with eslint
219-
yarn run lint
189+
npm run lint
220190

221191
# Lints and builds the code, placing the result in the dist directory.
222192
# This build is necessary to reflect changes if you're
223193
# `npm link`-ed to this repository from another local project.
224-
yarn run build
194+
npm run build
225195
```
226196

227197
Pull requests are welcome!

0 commit comments

Comments
 (0)