OpusCapita / filemanager

React based FileManager for browser ( + FS REST API for Node.js and Express)
https://demo.core.dev.opuscapita.com/filemanager/master/?currentComponentName=FileManager&maxContainerWidth=100%25&showSidebar=false
Apache License 2.0
566 stars 122 forks source link

Adding button to the tool bars #244

Closed toddgeist closed 5 years ago

toddgeist commented 5 years ago

Is there a way to add custom buttons to the toolbar?

Meta-Info Value
ExtProjectId JCCMMN-01
Original Estimation ???h
Remaining Estimation ???h
kvolkovich-sc commented 5 years ago

You can add it as new capability in toolbar context.

Example (sorry for formatting):

let newCapabilityHandler = () => console.log('click');

let newCapability = {
    id: 'my-custom-button',
    icon: { svg: 'hello' },
    label: 'My Custom Button',
    shouldBeAvailable: () => true,
    availableInContexts: ['toolbar'],
    handler: newCapabilityHandler
  };

<FileNavigator
...
  capabilities={{
  ...connectorNodeV1.capabilities,
  newCapability
}}
/>

I think it should be enough. If not, you can provide some use case and we'll try to solve this issue together.

toddgeist commented 5 years ago

wow this looks nice. :-)

I'll give it try

kvolkovich-sc commented 5 years ago

Tried code above) Sorry, its not working. Please wait for solution ~30m

kvolkovich-sc commented 5 years ago

I added an example (black bold circle).

screen shot 2018-12-14 at 12 48 39 pm

capabilities={(apiOptions, actions) => ([
        ...(window.connectors.nodeV1.capabilities(apiOptions, actions)),
        ({
          id: 'custom-button',
          icon: {
            svg: '<svg viewBox="0 0 120 120" version="1.1"><circle cx="60" cy="60" r="50"></circle></svg>'
          },
          label: 'Custom Button',
          shouldBeAvailable: () => true,
          availableInContexts: ['toolbar'],
          handler: () => alert('Custom button click')
        })
      ])}

https://demo.core.dev.opuscapita.com/filemanager/master/?currentComponentName=FileNavigator&maxContainerWidth=100%25&showSidebar=true

toddgeist commented 5 years ago

that worked ! Thank you!