Skip to content

Commit cd0f9ae

Browse files
liatgoliorheber
liatgo
and
liorheber
authored
Rearrange README files (#151)
* Rearrange README files * changes after review Co-authored-by: Lior Heber <[email protected]>
1 parent 58f6643 commit cd0f9ae

File tree

6 files changed

+223
-242
lines changed

6 files changed

+223
-242
lines changed

‎README.md

Lines changed: 11 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,23 @@ React Tree is a straight forward component that allows a user to display and man
88
## Optional Themes
99

1010
Two optional themes are supported when using React Tree:
11-
- Basic tree: using @emotion/core.
12-
- Material tree: based on the basic tree logic, using Material-UI components - https://github.com/kenshoo/react-tree/blob/master/packages/material_tree/README.md
11+
#### Basic tree
12+
Includes all the logic, based on @emotion/core - [README](https://github.com/kenshoo/react-tree/blob/master/packages/core/README.md)
1313

14-
Both options support component customization.
15-
16-
Examples - https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js
17-
18-
## Basic tree
19-
2014
<p align="center">
21-
<img src="core-tree-demo.gif?raw=true" width="400" />
15+
<img src="core-tree-demo.gif?raw=true" width="288" />
2216
</p>
2317

24-
### Installation
25-
26-
**Installation using npm:**
27-
```
28-
npm install @kenshooui/react-tree --save
29-
```
30-
**Installation using Yarn:**
31-
32-
```
33-
yarn add @kenshooui/react-tree
34-
```
35-
36-
### How to use
37-
<!-- example -->
18+
#### Material tree
19+
Based on the basic tree logic, using Material-UI components - [README](https://github.com/kenshoo/react-tree/blob/master/packages/material_tree/README.md)
3820

39-
```jsx
40-
import ReactTree from "@kenshooui/react-tree";
21+
<p align="center">
22+
<img src="react-tree-demo.gif?raw=true" width="288" />
23+
</p>
4124

42-
const structure = [
43-
["Profiles", "Performance", "Clicks"],
44-
["Profiles", "Performance", "Imp"],
45-
["Profiles", "Attribute", "Agency"],
46-
["Profiles", "Attribute", "Progress"],
47-
["Profiles", "Attribute", "Create Date"],
48-
["Campaigns", "Performance", "Clicks"],
49-
["Campaigns", "Performance", "Cost"],
50-
["Campaigns", "Performance", "CTR"],
51-
["Campaigns", "Attribute", "campaign name"],
52-
["Ad Groups", "Attribute", "Ad Group Name"]
53-
];
25+
Both options support component customization. - [examples](https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js)
5426

55-
<ReactTree
56-
structure={structure}
57-
title={"Add filter criteria"}
58-
onSelect={() => {}}
59-
/>;
60-
```
27+
<br/>
6128

6229
### Props
6330

@@ -85,156 +52,6 @@ const structure = [
8552

8653
<br/>
8754

88-
### Customization
89-
90-
#### Styling
91-
92-
The basic tree gets "styles" object property.
93-
<br/>
94-
If the "styles" object is empty, the basic tree will use the default styles.
95-
<br/>
96-
The "styles" object can override any of the following:
97-
- container - tree container
98-
- header - tree header. Displays tree title or item's parents
99-
- headerBackIcon - back icon
100-
- item - a single item from the hierarchical tree.
101-
- highlight - the style of the searched (highlighted) letters of an item
102-
- searchItemInitial: the style of the basic ("not searched") letters of an item
103-
- parents - the style of parents sub-title on search
104-
- items - items list container
105-
- noResults - displayed when there are no found items
106-
- noResultsIcon - the icon displayed when there are no found items
107-
- noResultsText - the massage displayed when there are no found items
108-
- input - search input
109-
- searchInput - the icon of the search input
110-
- clearInput - the icon of the search input "clear" button
111-
- forwardIcon - the icon that is part of the item component. Displayed when the item has children.
112-
- selectedItem - the style of the selectedItem item
113-
- inputWrapper - the style of input wrapper
114-
115-
<br/>
116-
117-
#### Renderers
118-
119-
You can replace the renderers of the following components:
120-
121-
<br/>
122-
123-
**Container**
124-
125-
Use the `treeContainerRenderer` to replace the default component.
126-
127-
Each treeContainer receives the following props:
128-
129-
`containerRef` - Holds a reference to the tree container component
130-
131-
`children` - Holds all sub components (like header, input, items, etc..)
132-
133-
`getStyles` - Gets relevant styles
134-
135-
`styles` - Enables using customized styles
136-
137-
<br/>
138-
139-
**Header**
140-
141-
Use the `headerRenderer` to replace the default component.
142-
143-
Each header receives the following props:
144-
145-
`headerRef` - Holds a reference to the header component
146-
147-
`parents` - Holds the parents of the current level.
148-
<br/>
149-
For example for the following structure: ["Profiles", "Performance", "Clicks"]
150-
- In the first level the parents are: [""]
151-
- In the second level the parents are: ["Profile"]
152-
- In the third level the parents are: ["Profile, "Performance"]
153-
154-
155-
`onClick` - Triggers the back event on click
156-
157-
`title` - The title of the header. Displayed on the first level.
158-
159-
`getStyles` - Gets relevant styles
160-
161-
`styles` - Enables using customized styles
162-
163-
`backIconRenderer` - Use the `backIconRenderer` to replace the default back button component.
164-
165-
<br/>
166-
167-
**Input**
168-
169-
Use the `inputRenderer` to replace the default component.
170-
171-
Each header receives the following props:
172-
173-
`inputRef` - Holds a reference to the input component
174-
175-
`searchTerm` - Holds the searched value
176-
177-
`onInputChange` - Triggers set searchTerm event on change
178-
179-
`getStyles` - Gets relevant styles
180-
181-
`styles` - Enables using customized styles
182-
183-
`inputIconRenderer` - Use the `inputIconRenderer` to replace the default input icon component.
184-
185-
`clearIconRenderer` - Use the `clearIconRenderer` to replace the default clear input icon component.
186-
187-
<br/>
188-
189-
**Items**
190-
191-
Use the `itemsRenderer` to replace the default component.
192-
193-
Each header receives the following props:
194-
195-
`getStyles` - Gets relevant styles
196-
197-
`styles` - Enables using customized styles
198-
199-
`children` - All items
200-
201-
<br/>
202-
203-
**Item**
204-
205-
Use the `itemRenderer` to replace the default component
206-
207-
Each header receives the following props:
208-
209-
`getStyles` - Gets relevant styles
210-
211-
`styles` - Enables using customized styles
212-
213-
`searchTerm` - Holds the searched value
214-
215-
`item` - Represents an item from the given structure
216-
217-
`onClick` - Is called when clicking on an item
218-
219-
`forwardIconRenderer` - Use the `forwardIconRenderer` to replace the default forward icon component
220-
221-
`selectedItem` - Represents the current selected item. Is relevant when markSelectedItem = true
222-
223-
<br/>
224-
225-
**No Results**
226-
227-
Use the `noResultsRenderer` to replace the default component.
228-
229-
`getStyles` - Gets relevant styles
230-
231-
`styles` - Enables using customized styles
232-
233-
`text` - Displayed when there are no results
234-
235-
`noResultsIconRenderer` - Use the `noResultsIconRenderer` to replace the default no results warning icon component.
236-
237-
23855
## How to Contribute
23956

24057
#### Setting up development environment
@@ -246,4 +63,4 @@ Use the `noResultsRenderer` to replace the default component.
24663

24764
## Credit
24865

249-
Styling patterns were taken from react-select - https://github.com/JedWatson/react-select/blob/master/README.md
66+
Styling patterns were taken from react-select - [README](https://github.com/JedWatson/react-select/blob/master/README.md)

0 commit comments

Comments
 (0)