pos-screen-select

DragBox is a drag-and-drop selector component that supports image mode and text mode.

Basic usage

<DragBox
  xSize={1}
  ySize={10}
  size={80}
  type={1}
  sourceDivList={sourceDivList}
  resDivList={resDivList}
  showValue="Selected"
  showButton="Available"
  onChange={(data) => {
    console.log(data);
  }}
/>

Size compatibility

The old size prop is still supported.

• If only size is passed, width and height both use size
• If itemWidth or itemHeight is passed, the new prop takes priority
• If one side is omitted, it falls back to size

<DragBox
  xSize={1}
  ySize={15}
  size={72}
  itemWidth={96}
  itemHeight={48}
  type={1}
  sourceDivList={sourceDivList}
  resDivList={resDivList}
/>

HTML header content

If you need rich content for the top labels, use showValueHtml and showButtonHtml. If these are not provided, the component will still use showValue and showButton as plain text.

<DragBox
  xSize={1}
  ySize={10}
  type={1}
  sourceDivList={sourceDivList}
  resDivList={resDivList}
  showValueHtml="<div><strong>Selected</strong><span style='margin-left:8px'>10 slots</span></div>"
  showButtonHtml="<div style='color:#F26D45'>Available modules</div>"
/>

Custom styles

You can customize the container, header area and cells through style props.

<DragBox
  xSize={1}
  ySize={15}
  itemWidth={120}
  itemHeight={54}
  type={1}
  sourceDivList={sourceDivList}
  resDivList={resDivList}
  wrapperStyle={{ alignItems: 'flex-start' }}
  leftPanelStyle={{ padding: '12px', backgroundColor: '#21242e' }}
  rightPanelStyle={{ padding: '12px', backgroundColor: '#21242e' }}
  showValueStyle={{ backgroundColor: '#393F4F', borderRadius: '6px' }}
  showButtonStyle={{ backgroundColor: '#393F4F', borderRadius: '6px' }}
  cellStyle={{ color: '#fff', borderColor: '#272A2F' }}
  resultCellStyle={{ backgroundColor: '#393F4F' }}
  sourceCellStyle={{ backgroundColor: '#2d3240' }}
  getCellStyle={(item, meta) => {
    if (meta.isRes && meta.occupied) {
      return {
        backgroundColor: '#F26D45',
        color: '#fff'
      };
    }
    if (!meta.isRes && meta.disabled) {
      return {
        cursor: 'not-allowed'
      };
    }
    return {};
  }}
/>

Props

| Prop | Description | | --- | --- | | xSize | Number of columns | | ySize | Number of rows | | size | Legacy square cell size, still supported | | itemWidth | Cell width, higher priority than size | | itemHeight | Cell height, higher priority than size | | type | 0 for image mode, 1 for text mode | | sourceDivList | Data source list on the right side | | resDivList | Result list on the left side | | showValue | Plain text label for the left header | | showButton | Plain text label for the right header | | showValueHtml | HTML content for the left header | | showButtonHtml | HTML content for the right header | | onChange | Callback when result data changes | | onClick | Double click callback | | wrapperStyle | Style object for the root wrapper | | leftPanelStyle | Style object for the left panel | | rightPanelStyle | Style object for the right panel | | resultAreaStyle | Style object for the left grid area | | sourceAreaStyle | Style object for the right grid area | | showValueStyle | Style object for the left header | | showButtonStyle | Style object for the right header | | cellStyle | Base style shared by all cells | | resultCellStyle | Additional style for left result cells | | sourceCellStyle | Additional style for right source cells | | getCellStyle(item, meta) | Dynamic cell style callback | | gridBorderWidth | Grid width calculation helper, default 2 | | rightPanelGap | Gap between left and right panels, default 30 |

getCellStyle callback

The callback receives:

{
  isRes: true,
  x: 0,
  y: 0,
  index: 0,
  disabled: false,
  occupied: true
}

The item argument is the full current cell data when available, so you can use fields like id, name, url, or your custom extension fields.