添加 listGroup 组件

scss/components/_list.scss

@@ -82,6 +82,58 @@
   }
 }
 
+.#{$ns}ListGroup {
+  max-width: px2rem(400px);
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    position: relative;
+    display: block;
+    padding: $ListItem-paddingY $ListItem-paddingX;
+    margin-bottom: px2rem(-1px);
+    background-color: $white;
+    border: $ListItem-borderWidth solid $ListItem-borderColor;
+
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-top-right-radius: $borderRadius;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      // todo
+      z-index: 1;
+    }
+
+    &.is-active {
+      // todo
+      z-index: 2;
+    }
+
+    &.is-disabled {
+      color: $text--muted-color;
+    }
+  }
+
+  &--expanded {
+    .#{$ns}ListGroup-item {
+      border-radius: $borderRadius;
+
+      margin-bottom: $gap-sm;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
 .#{$ns}ListItem {
   @include clearfix();
 

src/components/ListGroup.tsx

@@ -0,0 +1,71 @@
+import {ThemeProps, themeable} from '../theme';
+import React from 'react';
+
+export interface ListGroupProps
+  extends ThemeProps,
+    Omit<React.InputHTMLAttributes<HTMLDivElement>, 'placeholder'> {
+  expand?: boolean;
+  items?: Array<any>;
+  itemClassName?: string;
+  itemRender: (item: any) => JSX.Element;
+  placeholder?: JSX.Element;
+  getItemProps?: (props: {item: any; index: number}) => any;
+}
+
+export class ListGroup extends React.Component<ListGroupProps> {
+  static defaultProps = {
+    itemRender: (item: any) => <>{`${item}`}</>
+  };
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      expand,
+      placeholder,
+      items,
+      children,
+      itemClassName,
+      itemRender,
+      getItemProps,
+      ...rest
+    } = this.props;
+
+    return (
+      <div
+        {...rest}
+        className={cx(
+          'ListGroup',
+          className,
+          expand ? 'ListGroup--expanded' : ''
+        )}
+      >
+        {Array.isArray(items) && items.length ? (
+          items.map((item: any, index) => {
+            const itemProps = getItemProps?.({item, index}) || {};
+
+            return (
+              <div
+                key={index}
+                {...itemProps}
+                className={cx(
+                  'ListGroup-item',
+                  itemClassName,
+                  itemProps.className
+                )}
+              >
+                {itemRender(item)}
+              </div>
+            );
+          })
+        ) : placeholder ? (
+          <div className={cx('Placeholder ListGroup-placeholder')}></div>
+        ) : null}
+
+        {children}
+      </div>
+    );
+  }
+}
+
+export default themeable(ListGroup);