list-builder

v0.0.3arrow_drop_down
v0.0.3
v0.0.2
v0.0.1
STATUS
Passing
DOWNLOADS
16
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
subject
Renders a responsive table into a parent container;
1 contributor
Like
Use list-builder in your project ?
Copied
npm i @bit/lekanmedia.shared-ui.list-builder
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
components/ListBuilder/index.js
102 Lines(77 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { Fragment, useRef } from 'react';
import { FlatList } from '../../utils/Utils';
import './list.css';
import ShouldRender from '../../utils/ShouldRender';

function HeaderRow(props) {
    const collectRowData = () => {
        props.onClick && props.onClick(props.lists);
    }

    return (
        <div className="list-row-header" onClick={collectRowData}>
            <FlatList
                list={props.lists}
                listView={(item, i) => (
                    <span key={`header-${i}`}>{item}</span>
                )}
            />
        </div>
    )
}

function Row(props) {
    const div = useRef(null);

    const collectRowData = e => {
        const divs = document.querySelectorAll('.list-row');
        divs.forEach(div => div.classList.remove('selected'));
        div.current.classList.toggle('selected');
        props.onClick && props.onClick(props.lists);
    }

    const className = props.selected ? 'list-row selected' : 'list-row';

    return (
        <div className={className} ref={div} onClick={collectRowData} style={props.rowStyle}>
            <FlatList
                list={props.lists}
                listView={(item, i) => (
                    <Fragment key={`row-${i}`}>
                        <ShouldRender if={typeof item !== 'object'}>
                            <span style={props.textStyle}>{item}</span>
                        </ShouldRender>

                        <ShouldRender if={typeof item === 'object' && item.text}>
                            <figure>
                                <div>
                                    <img style={props.imgStyle} src={item.src} alt="profile avatar" />
                                </div>
                                <figcaption style={props.textStyle}>{item.text}</figcaption>
                            </figure>
                        </ShouldRender>
                    </Fragment>
                )}
            />
        </div>
    )
}

/**
 * @name ListBuilder
 * @description Renders a responsive table into a parent container;
 * @param {string} props.addClass Add extra class styles to overwrite default class.
 * @param {[string]} props.headers An array of strings as table headers.
 * @param {[string]} props.rows An array of an array of strings as table data
 * @param {number} props.defaultSelectedRow An index for the row that should be highlighted by default.
 * @param {object} props.containerStyle Style Inline CSS styles for container element.
 * @param {object} props.rowStyle Style Inline CSS styles for row element.
 * @param {object} props.headerStyle Style Inline CSS styles for header element.
 * @param {object} props.imgStyle Style Inline CSS styles for the img element.
 * @param {object} props.textStyle Style Inline CSS styles for text element in the table.
 * @param {function} props.onClick onclick event function for the row and header. It receives the table data as an argument.
 * @returns {JSX.Element} A table component.
 */
export default function ListBuilder(props) {
    const className = `list ${props.addClass || ''}`;

    return (
        <section className={className} style={props.containerStyle}>
            <HeaderRow 
                lists={props.headers} 
                onClick={props.onClick} 
                style={props.headerStyle} 
            />

            <FlatList
                list={props.rows}
                listView={(items, i) => (
                    <Row 
                        key={`row-${i}`} 
                        lists={items} 
                        imgStyle={props.imgStyle}
                        rowStyle={props.rowStyle}
                        textStyle={props.textStyle}
                        onClick={props.onClick}
                        selected={props.defaultSelectedRow === i}
                    />
                )}
            />
        </section>
    )
}