render()

in src/dnd-list/list.tsx [63:152]
89 lines of code
6 McCabe index (conditional complexity)

  render() {
    const { overrides = {}, items, onChange, removable } = this.props;
    const {
      Root: RootOverride,
      List: ListOverride,
      Item: ItemOverride,
      DragHandle: DragHandleOverride,
      CloseHandle: CloseHandleOverride,
      Label: LabelOverride,
    } = overrides;
    const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
    const [List, listProps] = getOverrides(ListOverride, StyledList);
    const [Item, itemProps] = getOverrides(ItemOverride, StyledItem);
    const [DragHandle, dragHandleProps] = getOverrides(DragHandleOverride, StyledDragHandle);
    const [CloseHandle, closeHandleProps] = getOverrides(CloseHandleOverride, StyledCloseHandle);
    const [Label, labelProps] = getOverrides(LabelOverride, StyledLabel);
    const isRemovable = this.props.removable || false;
    const isRemovableByMove = this.props.removableByMove || false;
    return (
      <Root
        $isRemovable={isRemovable}
        data-baseweb="dnd-list"
        {...rootProps}
        onFocus={forkFocus(rootProps, this.handleFocus)}
        onBlur={forkBlur(rootProps, this.handleBlur)}
      >
        <MovableList
          removableByMove={isRemovableByMove}
          values={items}
          onChange={onChange}
          renderList={({ children, props, isDragged }) => (
            <List $isRemovable={isRemovable} $isDragged={isDragged} ref={props.ref} {...listProps}>
              {children}
            </List>
          )}
          renderItem={({ value, props, isDragged, isSelected, isOutOfBounds, index }) => {
            const sharedProps: SharedStylePropsArg = {
              $isRemovable: isRemovable,
              $isRemovableByMove: isRemovableByMove,
              $isDragged: isDragged,
              $isSelected: isSelected,
              $isFocusVisible: this.state.isFocusVisible,
              $isOutOfBounds: isOutOfBounds,
              $value: value,
              // @ts-ignore
              $index: index,
            };
            return (
              <ItemLayer dragged={isDragged} key={props.key}>
                <Item
                  {...sharedProps}
                  ref={props.ref}
                  tabIndex={props.tabIndex}
                  aria-roledescription={props['aria-roledescription']}
                  onKeyDown={props.onKeyDown}
                  onWheel={props.onWheel}
                  {...itemProps}
                  style={{ ...props.style, display: 'flex' }}
                >
                  <DragHandle {...sharedProps} {...dragHandleProps}>
                    <Grab size={24} />
                  </DragHandle>
                  <Label {...sharedProps} {...labelProps}>
                    {value}
                  </Label>
                  {removable && (
                    <CloseHandle
                      {...sharedProps}
                      // @ts-ignore
                      onClick={(evt) => {
                        evt.preventDefault();
                        onChange &&
                          onChange({
                            oldIndex: typeof index !== 'undefined' ? index : 0,
                            newIndex: -1,
                          });
                      }}
                      {...closeHandleProps}
                    >
                      <Delete size={24} color="#CCC" />
                    </CloseHandle>
                  )}
                </Item>
              </ItemLayer>
            );
          }}
        />
      </Root>
    );
  }