helperClass and styled-components

While using react-sortable-hoc I have to import a .css file with only a class to be passed to the helperClass prop in an otherwise css-file-free project using styled-components. In the API I couldn’t find if a draggable element is dynamically assigned a prop (like isDragging or something similar) which I could use to dynamically update css.

Any suggestion on how I could avoid importing that .css file?

[justdanallen]

@JRMaitre Thank you for chiming in! I must have been trying to apply it to the container… when applied to the actual List Element in SortableElement, it works! Not sure what I was thinking.

Just for anyone else here is the full example based on the example in the Readme.

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import styled from 'styled-components'

const ListElement = styled.div`
  background-color: white;

  &.dragging-helper-class {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  }
`

const SortableItem = SortableElement(({value}) => <ListElement>{value}</ListElement>);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent />, document.getElementById('root'));

[justdanallen]

@cmateusmoraes

The suggestion by @JRMaitre no longer works. I couldn’t add more specificity in a styled-component, like he suggested because it is no longer rendered in the same parent container. I eventually just imported the css file, with a css class, which I was trying to avoid.

SortableComponent.js

import './SortableComponent.css'
...
              <SortableList
                renderItem={this.props.renderItem} 
                items={this.state.items} 
                onSortEnd={this.onSortEnd} 
                lockAxis="y"
                helperClass="dragging-helper-class"
                shouldCancelStart={ () => this.props.lock ? true : false}
                disableAutoscroll={false}
                useWindowAsScrollContainer={true}
                pressDelay={ size==='small' ? 100 : 0}
              />

SortableComponent.css

.dragging-helper-class div {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background-color: white;
}

.dragging-helper-class .shadow{
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
}

.dragging-helper-class {
  list-style: none; 
}

It’s a bummer, but was the fastest way to get around it for now.