render()

in src/data-list/data-list.tsx [99:150]

• 45 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const {data, className, loading, selection, disabledHover, itemFormatter, focused, innerRef} = this.props;

    const shortcutsMap = {...this.shortcutsMap, ...this.props.shortcutsMap};

    const classes = classNames(className, {
      [styles.dataList]: true,
      [styles.disabledHover]: disabledHover,
      [styles.multiSelection]: selection.getSelected().size > 0,
    });

    return (
      <div className={styles.dataListWrapper} data-test='ring-data-list' ref={innerRef}>
        {focused && <Shortcuts map={shortcutsMap} scope={this.shortcutsScope} />}

        <ul className={classes}>
          {data.map(model => {
            const item = itemFormatter(model);
            const {id, key, title, items} = item;

            const showMoreLessButton = this.props.itemMoreLessState?.(item);

            return (
              <Item
                key={key || id}
                item={model}
                title={title}
                items={items}
                itemFormatter={itemFormatter}
                collapsible={item.collapsible}
                collapsed={item.collapsed}
                onCollapse={item.onCollapse}
                onExpand={item.onExpand}
                showFocus={selection.isFocused(model)}
                onFocus={this.onItemFocus}
                selection={selection as Selection<T>}
                selectable={item.selectable}
                selected={selection.isSelected(model)}
                partialSelected={(selection as Selection<T>).isPartialSelected(model)}
                onSelect={this.onItemSelect}
                showMoreLessButton={showMoreLessButton}
                onItemMoreLess={this.props.onItemMoreLess}
              />
            );
          })}
        </ul>

        {loading && (
          <div className={data.length > 0 ? styles.loadingOverlay : undefined}>
            <Loader />
          </div>
        )}