feat(list-group): implement ListGroup and StatefulListGroup

Author: assisrafael

demo/ListGroupExamples.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { ListGroup, StatefulListGroup } from '../dist/main';
+
+const items = [
+  {
+    title: 'Cras justo odio',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi doloremque itaque in tenetur quidem ab provident repellat vero commodi iste? Itaque sed mollitia dolores voluptatibus at tenetur totam aperiam incidunt.',
+    archived: true,
+  },
+  {
+    title: 'Morbi leo risus',
+    description:
+      'Magnam, amet assumenda fuga architecto cumque quod exercitationem temporibus facere aperiam officiis eaque odio sequi maxime dolores ullam earum, quidem voluptatibus quisquam qui dolor culpa illo. Saepe minus optio labore.',
+  },
+  {
+    title: 'Porta ac consectetur ac',
+    description:
+      'Doloribus exercitationem vero, tenetur, ratione eius ipsum illo ipsa amet consequuntur adipisci perspiciatis labore aperiam mollitia molestias recusandae rerum dolorum alias dolores optio. Ea dignissimos nemo nostrum impedit quo sequi.',
+  },
+];
+
+export function ListGroupExamples() {
+  return (
+    <div className="row">
+      <div className="col-6 mb-3">
+        <h1 className="h4">Simple list group</h1>
+        <ListGroup
+          items={items}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+        />
+      </div>
+      <div className="col-6 mb-3">
+        <h1 className="h4">Linked list group</h1>
+        <ListGroup
+          items={items}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+          active={2}
+          linked={true}
+          isDisabled={(item) => item.archived}
+        />
+      </div>
+      <div className="col-6 mb-3">
+        <h1 className="h4">No border list group</h1>
+        <ListGroup
+          items={items}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+          active={2}
+          bordered={false}
+        />
+      </div>
+      <div className="col-6 mb-3">
+        <h1 className="h4">Horizontal list group</h1>
+        <ListGroup
+          items={items}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+          active={1}
+          horizontal={true}
+        />
+      </div>
+      <div className="col-6 mb-3">
+        <h1 className="h4">Stateful list group</h1>
+        <StatefulListGroup
+          items={items}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+          linked={true}
+        />
+      </div>
+    </div>
+  );
+}

demo/demo.jsx

@@ -6,13 +6,14 @@ import { FormExamples } from './FormExamples';
 import { TableExamples } from './TableExamples';
 import { TabsExamples } from './TabsExamples';
 import { DialogExamples } from './DialogExamples';
+import { ListGroupExamples } from './ListGroupExamples';
 
 ReactDOM.render(
   <div className="mt-3">
     <React.StrictMode>
       <StatefulTabs
         vertical={true}
-        initialTab={0}
+        initialTab={2}
         tabs={[
           {
             title: 'Dialog',
@@ -22,6 +23,10 @@ ReactDOM.render(
             title: 'Forms',
             content: <FormExamples />,
           },
+          {
+            title: 'List groups',
+            content: <ListGroupExamples />,
+          },
           {
             title: 'Pagination',
             content: <PaginationExamples />,

src/index.js

@@ -1,5 +1,6 @@
 export * from './dialog';
 export * from './forms';
+export * from './list-group';
 export * from './mixed';
 export * from './table';
 export * from './tabs';

src/list-group/ListGroup.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListGroupItem } from './ListGroupItem';
+
+export function ListGroup({ items, active, linked, bordered, horizontal, template, isDisabled, onSelect }) {
+  const content = items.map((item, index) => (
+    <ListGroupItem
+      key={index}
+      index={index}
+      isActive={active === index}
+      isDisabled={isDisabled(item)}
+      item={item}
+      linked={linked}
+      onSelect={onSelect}
+    >
+      {template(item)}
+    </ListGroupItem>
+  ));
+
+  const classes = ['list-group', !bordered && 'list-group-flush', horizontal && 'list-group-horizontal']
+    .filter((v) => v)
+    .join(' ');
+
+  if (linked) {
+    return <div className={classes}>{content}</div>;
+  }
+
+  return <ul className={classes}>{content}</ul>;
+}
+
+ListGroup.defaultProps = {
+  bordered: true,
+  horizontal: false,
+  isDisabled: () => {},
+  linked: false,
+  onSelect: () => {},
+};
+
+ListGroup.propTypes = {
+  active: PropTypes.number,
+  bordered: PropTypes.bool,
+  horizontal: PropTypes.bool,
+  isDisabled: PropTypes.func,
+  items: PropTypes.array.isRequired,
+  linked: PropTypes.bool,
+  onSelect: PropTypes.func,
+  template: PropTypes.func.isRequired,
+};

src/list-group/ListGroupItem.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { safeClick } from '../utils/event-handlers';
+
+export function ListGroupItem({ index, isActive, children, linked, isDisabled, onSelect }) {
+  const classes = [
+    'list-group-item',
+    isActive && 'active',
+    isDisabled && 'disabled',
+    linked && 'list-group-item-action',
+  ]
+    .filter((v) => v)
+    .join(' ');
+
+  if (linked) {
+    return (
+      <a href="#" className={classes} onClick={safeClick(onSelect, index)}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <li className={classes} onClick={safeClick(onSelect, index)}>
+      {children}
+    </li>
+  );
+}
+
+ListGroupItem.defaultProps = {
+  isActive: false,
+};
+
+ListGroupItem.propTypes = {
+  children: PropTypes.element,
+  index: PropTypes.number.isRequired,
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  linked: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func,
+  template: PropTypes.func.isRequired,
+};

src/list-group/StatefulListGroup.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListGroup } from './ListGroup';
+import { useSelectedItem } from '../utils/useSelectedItem';
+
+export function StatefulListGroup({ initialItem, items, active: _, ...props }) {
+  const { getSelected, select } = useSelectedItem(initialItem, items.length);
+  useSelectedItem;
+
+  return <ListGroup items={items} active={getSelected()} onSelect={select} {...props} />;
+}
+
+StatefulListGroup.propTypes = {
+  active: PropTypes.any,
+  items: PropTypes.arrayOf(PropTypes.object),
+  initialItem: PropTypes.number,
+};

src/list-group/index.js

@@ -0,0 +1,2 @@
+export * from './ListGroup';
+export * from './StatefulListGroup';