Goten List

Goten List is a React component that helps avoid boilerplate when creating tables.

• GotenList will control the items in its Table, so you can forget about managing certain lifecycle methods you would normally need.
• GotenList provides an array of buttons, which you can customize and define functions for
  • Currently, it shows inspect, edit, and delete buttons.

Index

• Install
• Usage
• Example of use
• Props
• Methods
• Contributions

Install

npm install -s goten-react-list

Usage

var GotenList = require('goten-react-list').GotenForm; // ES5
 
import { GotenList } from 'goten-react-list'; // ES6

...
    <GotenList 
        ref = {this.ref}
    />

    ...

    addItemInList() {
        this.ref.addList(<label>Component</label>)
    }

Example of use

import React, { Component } from 'react'

import { GotenList } from 'goten-react-list'


export class MyButtonComponent extends Component {
    render() {
        return (
            <React.Fragment>
                <button onClick={this.props.onClick}>{this.props.children}</button>
                ...other stuff like modals, images, etc.
            </React.Fragment>
        )
    }
}
const gotenListRef = 'gotenListRef'

export default class ExampleGotenList extends Component {

    render() {
        return (
            <div>
                <GotenList
                    title='All components'
                    actionsTitle='Actions actives'
                    //onEdit={component => console.log(component)}
                    onRemove={component => console.log(component)}
                    removeIconColor={'red'}
                    customRemoveButton={MyButtonComponent}
                    /* You can also do,
                    customRemoveButton={(gotenListProps) => <MyButtonComponent {...gotenListProps}/>}
                    */
                    ref={gotenListRef}
                />
                <div>
                    <input
                        type="submit"
                        value="add item"
                        onClick={_ => {
                            this.refs[gotenListRef].addItem(
                            <label>
                                    Component
                            </label>
                            )
                        }}
                    />
                </div>
            </div>
        )
    }
}

Props

| Prop Name | Type | Default | Required | Description | |----------------- |-------------- |--------------- |---------- |------------------------------------------------------------------------ | | onRemove | Function | | false | This function is executed when the remove icon of the item is pressed. | | removeIconColor | String | black | false | Color of the remove icon. | | customRemoveButton | Component | undefined | false | Component to use instead of the default remove button. See the example to learn how to use it. | | onEdit | Function | | false | This function is executed when the edit icon of the item is pressed. | | editIconColor | String | black | false | Color of the edit icon. | | customEditButton | Component | undefined | false | Component to use instead of the default edit button. See the example to learn how to use it. | | onSearch | Function | | false | This function is executed when the search icon of the item is pressed. | | searchIconColor | String | black | false | Color of the search icon. | | customSearchButton | Component | undefined | false | Component to use instead of the default search button. See the example to learn how to use it. | | title | Array/String | | false | Title of the columns. | | actionsTitle | String | | false | Title of the actions column (the last one). | | mergeColumns | boolean | false | false | Merge void columns. | | alignItems | String | left | false | Align prop for the table. | | width | String | 100% | false | Width prop for the table. | | uniqueKey | String | GotenListKey_ | false | UniqueKey will be used for create all keys of the items in the table. | | useComponentAsRow | Boolean | false | false | useComponentAsRow is used to pass a Component as a row. This component should render "td"s only (no need to use "tr"), with whatever it is you want to render inside each column. You can use React.Fragment to encapsulate these "td"s. |

Methods

• addItem(COMPONENT, OBJECT_OF_ACTIONS)

This method receives a component or an array of components. You can also pass an object as a second parameter to define the action methods of the specific item (it overrides the ones passed to GotenList). Once this method is executed, the component is added to the list.

• addItemIteratively(COMPONENT, NUMBER_OF_ITERATION, OBJECT_OF_ACTIONS)

Same as addItem, but you can specify the number of iterations to add the component a certain amount of times.

• removeItems

This method removes all items from the list. (removeItems()).

Contributions

To contribute to this package, we use the following workflow:

1. Add an issue with related tags to describe the contribution (is it a bug? a feature request?).
2. Branch your solution from develop, naming it like #<issue_number>-<descriptive_name>.
3. Send a pull request and wait for approval/corrections.