sortable

2022.05.01
sort rows and columns
#react#hoc
use client /components/post/reExport react-sortable-hoc array-move react-icons/md icon-container 
      .icon-container {
        display: inline-flex;
        align-items: center;
        cursor: move;
      }
     >
    <DragHandle />{value}

    <style jsx>{ }</style>
  </div>
))

const SortableContainer = sortableContainer(({ children }) => <div>{children}</div>)

function SortContainer({ styles, axis }) {
  const arrInit = [ ]
  const [state, setState] = useState(arrInit)
  const onSortEnd = ({ oldIndex, newIndex }) => setState(arrayMoveImmutable(state, oldIndex, newIndex))

  return (
    <SortableContainer
      onSortEnd={onSortEnd}
      axis={axis}
      useDragHandle
    >
      {state.map((value, index) => (
        <SortableBlock key={ } index={index} value={value} styles={styles} />
      ))}
    </SortableContainer>
  )
}

const postObj = {
  title:  ,
  date:  ,
  tags: [ ],
  desc:  ,
  body: (
    <>
      <ul>
        <li><Lnk path= >react-sortable-hoc</Lnk></li>
        <li><Code bash>npm i react-sortable-hoc</Code></li>
        <li><Code bash>npm i array-move</Code> nice helper to move item in array from one place to another - <Lnk path= >array-move</Lnk></li>
      </ul>

      <H>Sort lines</H>

      <SortContainer styles=  />

      <H>Sort columns</H>

      <SortContainer styles=  />

      <Code block jsx>{ react-sortable-hoc array-move react-icons/md icon-container 
            .icon-container {
              display: inline-flex;
              align-items: center;
              cursor: move;
            }
          \ >
          <DragHandle />{value}

          <style jsx>{\ }</style>
        </div>
      ))

      const SortableContainer = sortableContainer(({children}) => <div>{children}</div>)

      function SortContainer({ css, axis }) {
        const arrInit = [ ]
        const [state, setState] = useState(arrInit)
        const onSortEnd = ({oldIndex, newIndex}) => setState(arrayMoveImmutable(state, oldIndex, newIndex))

        return (
          <SortableContainer onSortEnd={onSortEnd} axis={axis} useDragHandle>
            {state.map((value, index) => (
              <SortableBlock key={\ } index={index} value={value} styles={css} />
            ))}
          </SortableContainer>
        )
      }
      