lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
915 stars 72 forks source link

can make overrideOldSelection is customizable when calling selectUpTo? #317

Closed enk0de closed 6 months ago

enk0de commented 6 months ago

Describe the bug A clear and concise description of what the bug is.

I want to customize overrideOldSelection argument calling selectUpTo.

To Reproduce Steps to reproduce the behavior:

Expected behavior A clear and concise description of what you expected to happen. In ClickArrowToExpandInteraction, i find below code.

if (e.shiftKey) {
  actions.selectUpTo(!e.ctrlKey);
} 

could you open a prop to customize !e.ctrlKey part?

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

lukasbach commented 6 months ago

You can swap out the entire interactionmode logic with a custom interaction mode, you could copy the implementation of the arrow interaction manager and customize what you want to change. There are some details here: https://rct.lukasbach.com/docs/guides/interaction-modes#custom-interaction-modes

Something like this:

function App() {
  return (
    <UncontrolledTreeEnvironment
      dataProvider={new StaticTreeDataProvider(longTree.items, (item, data) => ({ ...item, data }))}
      getItemTitle={item => item.data}
      defaultInteractionMode={{
        mode: 'custom',
        createInteractiveElementProps: (item, treeId, actions, renderFlags) => ({
          onClick: e => {
            actions.focusItem();
            if (e.shiftKey) {
              actions.selectUpTo(!e.ctrlKey); // Customize here
            } else if (isControlKey(e)) {
              if (renderFlags.isSelected) {
                actions.unselectItem();
              } else {
                actions.addToSelectedItems();
              }
            } else {
              actions.selectItem();
              if (
                !item.isFolder ||
                this.environment.canInvokePrimaryActionOnItemContainer
              ) {
                actions.primaryAction();
              }
            }
          },
        }),
      }}
      viewState={{
        ['tree-4']: {
          expandedItems: ['Fruit', 'Meals'],
        },
      }}
    >
      <Tree treeId="tree-4" rootItem="root" treeLabel="Tree Example" />
    </UncontrolledTreeEnvironment>
  );
}