DraggableRows

Draggable rows component

Draggable Rows of Settings

These draggable rows are to be used for groups of settings, with similar controls being used, like the switch.

() => {
  const [options, setOptions] = React.useState([
    { id: '1', label: 'Label', text: 'optional text 1', isToggleSelected: true, isDisabled: false },
    { id: '2', label: 'Label', text: 'optional text 2', isToggleSelected: false, isDisabled: false },
    { id: '3', label: 'Label', text: 'optional text 3', isToggleSelected: true, isDisabled: true },
    { id: '4', label: 'Label', text: 'optional text 4', isToggleSelected: false, isDisabled: false },
    { id: '5', label: 'Label', text: 'optional text 5', isToggleSelected: false, isDisabled: false },
  ]);

  const setSelectedLists = () => {
    return options.filter(item => item.isToggleSelected).map(item => item.id);
  };

  const handleChangeValue = (selected, orderedList) => {
    return [selected, orderedList];
  };

  const handleInitialLoad = (selected, orderedList) => {
    return [selected, orderedList];
  };

  return (
    <DraggableRows
      variant="settings"
      onChangeValue={handleChangeValue}
      onInitialLoad={handleInitialLoad}
      options={options}
      setOptions={setOptions}
      primaryTextKey="label"
      secondaryTextKey="text"
      rowId="id"
      setSelectedLists={setSelectedLists}
    >
    <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
        <Button variant="text" onClick={() => alert('Button clicked!')}>Click Me</Buton>
      </div>
      </DraggableRows>
  );
};

Flexible Draggable Rows

These draggable rows can be filled with text or other components.

() => {
  const [options, setOptions] = React.useState([
    {
      id: '1',
      label: 'Label',
      text: 'optional text 1',
      isToggleSelected: true,
      isDisabled: false,
    },
    {
      id: '2',
      label: 'Label',
      text: 'optional text 2',
      isToggleSelected: false,
      isDisabled: true,
    },
    {
      id: '3',
      label: 'Label',
      text: 'optional text 3',
      isToggleSelected: false,
      isDisabled: false,
    },
    {
      id: '4',
      label: 'Label',
      text: 'optional text 4',
      isToggleSelected: false,
      isDisabled: false,
    },
    {
      id: '5',
      label: 'Label',
      text: 'optional text 5',
      isToggleSelected: false,
      isDisabled: false,
    },
  ]);

  const setSelectedLists = () => {
    return options
      .filter((item) => item.isToggleSelected)
      .map((item) => item.id);
  };

  const handleChangeValue = (selected, orderedList) => {
    return [selected, orderedList];
  };

  const handleInitialLoad = (selected, orderedList) => {
    return [selected, orderedList];
  };

  return (
    <DraggableRows
      variant="flexible"
      onChangeValue={handleChangeValue}
      onInitialLoad={handleInitialLoad}
      options={options}
      setOptions={setOptions}
      primaryTextKey="label"
      secondaryTextKey="text"
      rowId="id"
      setSelectedLists={setSelectedLists}
    >
      <div
        style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center' }}
      >
        <Typography style={{ paddingRight: '285px' }}>Label</Typography>
        <Button variant="text" onClick={() => alert('Button clicked!')}>
          Click Me
        </Button>
      </div>
    </DraggableRows>
  );
};

Props

Prop	Type	Description
variant	string	Can be either settings with toggle and primary secondary text or flexible can have user provided props.
rowId	string	Key in each option object representing the unique identifier.
secondaryTextKey	string	Key in each option object representing the text content.
primaryTextKey	string	Key in each option object representing the label content.
onChangeValue	function(selected: string[], orderedList: Character[])	Callback function triggered when selected items change.
onInitialLoad	function(selected: string[], orderedList: Character[])	Callback function triggered on initial load with selected items.
options	array	List of options to be displayed and managed in the drag and drop.
setOptions	function	Setter function to update the options list.
setSelectedLists	function	function for getting the id of the toggle selected items