Skip to content

Rearrange README files #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 20, 2021
Merged

Rearrange README files #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6d751b
Rearrange README files
liatgo Jan 12, 2021
65559b6
changes after review
liatgo Jan 12, 2021
f15f030
Merge branch 'master' into rearange-readme-files
liorheber Jan 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 11 additions & 194 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,56 +8,23 @@ React Tree is a straight forward component that allows a user to display and man
## Optional Themes

Two optional themes are supported when using React Tree:
- Basic tree: using @emotion/core.
- 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
#### Basic tree
Includes all the logic, based on @emotion/core - [README](https://github.com/kenshoo/react-tree/blob/master/packages/core/README.md)

Both options support component customization.

Examples - https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js

## Basic tree

<p align="center">
<img src="core-tree-demo.gif?raw=true" width="400" />
<img src="core-tree-demo.gif?raw=true" width="288" />
</p>

### Installation

**Installation using npm:**
```
npm install @kenshooui/react-tree --save
```
**Installation using Yarn:**

```
yarn add @kenshooui/react-tree
```

### How to use
<!-- example -->
#### Material tree
Based on the basic tree logic, using Material-UI components - [README](https://github.com/kenshoo/react-tree/blob/master/packages/material_tree/README.md)

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

const structure = [
["Profiles", "Performance", "Clicks"],
["Profiles", "Performance", "Imp"],
["Profiles", "Attribute", "Agency"],
["Profiles", "Attribute", "Progress"],
["Profiles", "Attribute", "Create Date"],
["Campaigns", "Performance", "Clicks"],
["Campaigns", "Performance", "Cost"],
["Campaigns", "Performance", "CTR"],
["Campaigns", "Attribute", "campaign name"],
["Ad Groups", "Attribute", "Ad Group Name"]
];
Both options support component customization. - [examples](https://github.com/kenshoo/react-tree/blob/master/packages/docs/stories/core.stories.js)

<ReactTree
structure={structure}
title={"Add filter criteria"}
onSelect={() => {}}
/>;
```
<br/>

### Props

Expand Down Expand Up @@ -85,156 +52,6 @@ const structure = [

<br/>

### Customization

#### Styling

The basic tree gets "styles" object property.
<br/>
If the "styles" object is empty, the basic tree will use the default styles.
<br/>
The "styles" object can override any of the following:
- container - tree container
- header - tree header. Displays tree title or item's parents
- headerBackIcon - back icon
- item - a single item from the hierarchical tree.
- highlight - the style of the searched (highlighted) letters of an item
- searchItemInitial: the style of the basic ("not searched") letters of an item
- parents - the style of parents sub-title on search
- items - items list container
- noResults - displayed when there are no found items
- noResultsIcon - the icon displayed when there are no found items
- noResultsText - the massage displayed when there are no found items
- input - search input
- searchInput - the icon of the search input
- clearInput - the icon of the search input "clear" button
- forwardIcon - the icon that is part of the item component. Displayed when the item has children.
- selectedItem - the style of the selectedItem item
- inputWrapper - the style of input wrapper

<br/>

#### Renderers

You can replace the renderers of the following components:

<br/>

**Container**

Use the `treeContainerRenderer` to replace the default component.

Each treeContainer receives the following props:

`containerRef` - Holds a reference to the tree container component

`children` - Holds all sub components (like header, input, items, etc..)

`getStyles` - Gets relevant styles

`styles` - Enables using customized styles

<br/>

**Header**

Use the `headerRenderer` to replace the default component.

Each header receives the following props:

`headerRef` - Holds a reference to the header component

`parents` - Holds the parents of the current level.
<br/>
For example for the following structure: ["Profiles", "Performance", "Clicks"]
- In the first level the parents are: [""]
- In the second level the parents are: ["Profile"]
- In the third level the parents are: ["Profile, "Performance"]


`onClick` - Triggers the back event on click

`title` - The title of the header. Displayed on the first level.

`getStyles` - Gets relevant styles

`styles` - Enables using customized styles

`backIconRenderer` - Use the `backIconRenderer` to replace the default back button component.

<br/>

**Input**

Use the `inputRenderer` to replace the default component.

Each header receives the following props:

`inputRef` - Holds a reference to the input component

`searchTerm` - Holds the searched value

`onInputChange` - Triggers set searchTerm event on change

`getStyles` - Gets relevant styles

`styles` - Enables using customized styles

`inputIconRenderer` - Use the `inputIconRenderer` to replace the default input icon component.

`clearIconRenderer` - Use the `clearIconRenderer` to replace the default clear input icon component.

<br/>

**Items**

Use the `itemsRenderer` to replace the default component.

Each header receives the following props:

`getStyles` - Gets relevant styles

`styles` - Enables using customized styles

`children` - All items

<br/>

**Item**

Use the `itemRenderer` to replace the default component

Each header receives the following props:

`getStyles` - Gets relevant styles

`styles` - Enables using customized styles

`searchTerm` - Holds the searched value

`item` - Represents an item from the given structure

`onClick` - Is called when clicking on an item

`forwardIconRenderer` - Use the `forwardIconRenderer` to replace the default forward icon component

`selectedItem` - Represents the current selected item. Is relevant when markSelectedItem = true

<br/>

**No Results**

Use the `noResultsRenderer` to replace the default component.

`getStyles` - Gets relevant styles

`styles` - Enables using customized styles

`text` - Displayed when there are no results

`noResultsIconRenderer` - Use the `noResultsIconRenderer` to replace the default no results warning icon component.


## How to Contribute

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

## Credit

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