Skip to content

Commit

Permalink
Feature:
Browse files Browse the repository at this point in the history 
- Custom delete element can be added
- No force uppercase of text
- Children key if not available, provide empty array
- onDeleteCb(), default returns true
- SCSS file provided as part of the project

CSS
- SCSS variables added
- Font size, and weight normalized
- Cleanup: CSS
  • Loading branch information
@azizali
azizali committed Nov 15, 2017
1 parent 30e1376 commit 078ecde
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 39 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -47,6 +47,7 @@
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.2.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1",
Expand Down
27 changes: 19 additions & 8 deletions readme.md
View file
Expand Up @@ -12,6 +12,7 @@ React Component that is highly customizable, which creates unlimited deep nested
- Delete animation
- Unlimited nesting
- Granular control over when to show expand, checkbox or delete options
- Multi-(un)select checkbox (shift + Check) like Gmail

### How to install
`npm install expandable-tree`
Expand Down Expand Up @@ -73,20 +74,29 @@ constructor() {

#### Step 2: Import styles to project

The styles of the component are in the file `node_modules/expandable-tree/dist/style.css`
Import Expandable Tree styles with `css` or `scss` file.

The styles of the component are in the file `node_modules/expandable-tree/dist/style.css or style.scss`

Note: When you use the `scss` file, you can modify the style variables for quick styling.

##### Using webpack

If you are using webpack, put this in your project's styles.
the tilda `~` tells webpack to pick-up the file from `node_modules` folder

```
~expandable-tree/dist/style.css
~expandable-tree/dist/style.css
```
or `scss` if your project has the ability to process it
```
~expandable-tree/dist/style.scss
```

the tilda `~` tells webpack to pick-up the file from `node_modules` folder

##### Manually importing styles

You can also manually copy the css file from `node_modules/expandable-tree/dist/style.css` and put it in your project files
You can also manually copy the `css/scss` file from `node_modules/expandable-tree/dist/style.(s)css` and put it in your project files

### Examples

Expand All @@ -112,24 +122,25 @@ keywordLabel | string | `'name'` | k
loadingElement | element | `null` | Element that shows when data is loading
noChildrenAvailableMessage | string | `'No data found'` | Message that shows when the expanded node has no children
onCheckToggleCb | function | `(arrayOfNodes, depth) => {}` | Function callback when checkbox gets toggled
onDeleteCb | function | `(node, updatedData, depth) => {}` | Function callback when node delete button gets clicked
onDeleteCb | function | `(node, updatedData, depth) => { return true; }` | Function callback when node delete button gets clicked
onExpandToggleCb | function | `(node, depth) => {}` | Function callback when node Expand/Collapse gets toggled
onUpdateCb | function | `(updatedData, depth) => {}` | Function callback when data gets updated
transitionEnterTimeout | number | `1200` | Time in milliseconds for node appear animation
transitionExitTimeout | number | `1200` | Time in milliseconds for node remove animation


### Shoutout
Shoutout to [@oandrew](https://github.com/oandrew) for suggesting a clean API exposing strategy.
Shoutout to [Andrew Onyshchuk](https://github.com/oandrew) for suggesting a clean API exposing strategy.

Thank you [@tjhubert](https://github.com/tjhubert) and [@prashanth0926](https://github.com/prashanth0926) for your contribution to the animation feature and the bug fixes.
Thank you [TJ Hubert](https://github.com/tjhubert) and [Prashanth Naika](https://github.com/prashanth0926) for your contribution to the animation feature and the bug fixes.


### TODO:

- [ ] Feature: Add click event for text
- [ ] Feature: Add css class on nodes based on its state i.e `<div class="expanded">Text</div>`
- [ ] Feature: Stretch goal: Add ability to add custom decorator/element per node
- [ ] Feature: Provide .scss file with configurable variables
- [X] Feature: Provide .scss file with configurable variables
- [ ] Workflow: Provide auto-launch browser feature when examples are run with `npm run examples`
- [ ] Performance: Remove the need for lodash

Expand Down
25 changes: 13 additions & 12 deletions src/index.js
View file
Expand Up @@ -114,16 +114,17 @@ class ExpandableTree extends Component {
}

printDeleteButton(node) {
const { isDeletable, depth } = this.props;
const { isDeletable, depth, deleteElement } = this.props;

if (isDeletable(node, depth)) {
return (
<span
className="pull-right glyphicon glyphicon-trash delete-icon"
<div className="delete-btn"
onClick={() => {
this.handleDelete(node);
}}
/>
>
{deleteElement}
</div>
);
}
}
Expand Down Expand Up @@ -206,11 +207,7 @@ class ExpandableTree extends Component {
{isEmpty(nodeArray)
? this.printNoChildrenMessage()
: nodeArray.map((node, index) => {
const nodeText = get(
node,
keywordLabel,
''
).toUpperCase();
const nodeText = get(node, keywordLabel, '');

return (
<CSSTransition
Expand Down Expand Up @@ -259,7 +256,7 @@ class ExpandableTree extends Component {
childrenElement = (
<ExpandableTree
{...this.props}
data={node[keywordChildren]}
data={node[keywordChildren] || []}
depth={depth + 1}
onUpdateCb={onChildrenUpdateCb.bind(this)}
/>
Expand Down Expand Up @@ -294,6 +291,8 @@ ExpandableTree.propTypes = {
data: PropTypes.array.isRequired,
depth: PropTypes.number,

deleteElement: PropTypes.element,

getStyleClassCb: PropTypes.func,

isCheckable: PropTypes.func,
Expand All @@ -320,6 +319,8 @@ ExpandableTree.propTypes = {
ExpandableTree.defaultProps = {
depth: 0,

deleteElement: <div>(X)</div>,

getStyleClassCb: (/* node, depth */) => {
return '';
},
Expand All @@ -338,12 +339,12 @@ ExpandableTree.defaultProps = {
keywordLabel: 'name',
keywordKey: 'id',

loadingElement: null,
loadingElement: <div>loading...</div>,

noChildrenAvailableMessage: 'No data found',

onCheckToggleCb: (/* Array of nodes, depth */) => {},
onDeleteCb: (/* node, updatedData, depth */) => {},
onDeleteCb: (/* node, updatedData, depth */) => { return true },
onExpandToggleCb: (/* node, depth */) => {},
onUpdateCb: (/* updatedData, depth */) => {},

Expand Down
39 changes: 21 additions & 18 deletions src/style.scss
View file
@@ -1,6 +1,10 @@
// VARIABLES
$expandable-tree-text-color: #000;
$expandable-tree-arrow-color: #000;
$expandable-tree-tree-stem-color: #000;

.expandable-tree {
font-size: 13px;
font-weight: 300;
font-size: 100%;

> div {
> .expandable-tree-no-children-transition {
Expand All @@ -19,50 +23,48 @@

> .expandable-tree-no-children {
> .expandable-tree-no-children-content {
margin-bottom: 6px;
margin: 3px 0;
}
}

> .expandable-tree-node {
padding: 0 3px;
border-radius: 3px;

> .expandable-tree-children-container {
margin-left: 5px;
padding-left: 20px;
border-left: 1px solid #ccc;
border-left: 1px solid $expandable-tree-tree-stem-color;

> .expandable-tree-loading {
padding: 0 3px;
margin-bottom: 6px;
margin: 3px 0;
}
}

> .expandable-tree-node-content {
margin-bottom: 6px;
padding: 0 3px;
margin: 3px 0;

> label {
vertical-align: top;
text-overflow: ellipsis;
width: calc(100% - 35px);
width: calc(100% - 55px);
overflow: hidden;
white-space: nowrap;
display: inline-block;
margin: 0;
font-weight: 300;
font-size: 13px;
font-weight: normal;
font-size: 100%;
}

> input[type=checkbox] {
float: left;
margin-right: 5px;
margin: 4px 5px 0 0;
line-height: normal;
}

> .expandable-tree-triangle-btn {
float: left;
margin-right: 5px;
cursor: pointer;
display: inline-block;
float: left;
}

> .expandable-tree-triangle-btn-right {
Expand All @@ -71,7 +73,7 @@
margin-top: 2px;
margin-left: 2px;
border-top: 5px solid transparent;
border-left: 6px solid #fff;
border-left: 6px solid $expandable-tree-arrow-color;
border-bottom: 5px solid transparent;
}

Expand All @@ -81,10 +83,11 @@
margin-top: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fff;
border-top: 6px solid $expandable-tree-arrow-color;
}

> .delete-icon {
> .delete-btn {
float: right;
cursor: pointer;
}
}
Expand Down
7 changes: 6 additions & 1 deletion webpack.config.js
View file
Expand Up @@ -4,6 +4,7 @@ const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const config = {
entry : {
Expand Down Expand Up @@ -33,7 +34,11 @@ const config = {
]
},
plugins: [
new ExtractTextPlugin('style.css')
new ExtractTextPlugin('style.css'),
new CopyWebpackPlugin([{
from: 'src/style.scss',
dest: 'dist/[name].[ext]'
}])
],

externals: [
Expand Down

0 comments on commit 078ecde

Please sign in to comment.