lukasbach/react-complex-tree

can make overrideOldSelection is customizable when calling selectUpTo?

Closed this issue · 1 comments

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):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

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>
  );
}