# MultiplePanel: Mobile Native Panel Control

The multiplePanel module provides a capability which can help you share images or files with others.

Developers can determine whether these interfaces work in the EdgerOS mobile App environment through the following code:

edger.env().then(data => {
  if (data.env === 'edgerapp') {
    // We work in EdgerOS mobile App environment.
  }
}).catch(error => {
  console.error(error)
})

# Functions

# edger.multiplePanel.open(payload)

Display a multi-selection file drawer. Each EAP can only create one drawer at a time, and consecutive openings will return a failure. The panel is destroyed after being closed.

• payload {Object} Payload of the multiple panel, it can contain the following members:
  • maxSelectedNum {Number} The maximum count selected.
  • positionFileId {String} The initial selected file ID. Optional.
  • files {Array<MultiplePanelFile>} The files to be shared.
    • id {String} The ID of file.
    • url {String} The url of file. Optional.
    • thumbnailUrl {String} The thumbnail of file. Optional.
    • fileName {String} The name of file. Optional.
    • fileType {String} The type of file.
    • fileDesc {String} The description of file. Optional.
    • width {Number} The width of image file. Optional.
    • height {Number} The height of image file. Optional.
    • selected {Boolean} Whether the file is selected. Optional.
    • header: {Object} The header for getting file. Optional.
  • groups {Array<MultiplePanelGroup>} The action group.
    • icon {String} The icon of group. Optional.
    • label {String} The label of group. Optional.
    • disabled {Boolean} Whether the group is disabled. Optional.
    • items: {Array<MultiplePanelGroupItem>} The header for getting file.
      • icon {String} The icon of item.
      • code {String} The code of item.
      • label {String} The label of item.
      • disabled {Boolean} Whether the item is disabled.
• Returns: {Promise}.

# Example

const params: MultiplePanelOpenParams = {
  files: [
    {
      id: 'file1',
      url: 'https://www.edgeros.com/_nuxt/1.aba3be2c.jpg',
      thumbnailUrl: 'https://www.edgeros.com/_nuxt/1.aba3be2c.jpg',
      fileName: 'Document 1',
      fileType: 'file',
      fileDesc: 'A sample document',
      width: 800,
      height: 600,
      selected: false,
      headers: {}
    },
    {
      id: 'file2',
      url: 'https://www.edgeros.com/_nuxt/1.a590f8b8.jpg',
      thumbnailUrl: '',
      fileName: 'Image 1',
      fileType: 'image',
      fileDesc: 'An example image',
      width: 1024,
      height: 768,
      selected: true,
      headers: {}
    }
  ],
  groups: [
    {
      items: [
        {
          icon: 'share',
          code: 'append',
          label: 'Append 1个',
          disabled: false
        },
        {
          icon: 'append',
          code: 'get',
          label: 'Group Get',
          disabled: false
        }
      ]
    }
  ]
}

edger.multiplePanel.open(params).then(() => {
  console.log('open multiplePanel successful.')
})

# async / await

async function open() {
  try {
    await edger.multiplePanel.open(params);
    console.log('open multiplePanel successful.')
  } catch (error) {
    console.error(error)
  }
}

# edger.multiplePanel.close()

Close the file sharing drawer. If the multiplePanelId does not exist or a panel with the same ID has already been closed, it will return a failure.

• Returns: {Promise}.

# Example

edger.multiplePanel.close().then(() => {
  console.log('close multiplePanel successful.')
})

# async / await

async function close() {
  try {
    await edger.multiplePanel.close()
    console.log('close multiplePanel successful.')
  } catch (error) {
    console.error(error)
  }
}

# edger.multiplePanel.append(payload)

Add files to the multiple panel list.

• payload {Object} Payload of the multiple panel, it can contain the following members:
  • direction {start | end} Direction of the file to be added. Optional.
  • files {Array<MultiplePanelFile>} The files to be shared.
    • id {String} The ID of file.
    • url {String} The url of file. Optional.
    • thumbnailUrl {String} The thumbnail of file. Optional.
    • fileName {String} The name of file. Optional.
    • fileType {String} The type of file.
    • fileDesc {String} The description of file. Optional.
    • width {Number} The width of image file. Optional.
    • height {Number} The height of image file. Optional.
    • selected {Boolean} Whether the file is selected. Optional.
    • header: {Object} The header for getting file. Optional.
• Returns: {Promise}.

# Example

const params: MultiplePanelAppendParams = {
  direction: 'end',
  files: [
    {
      id: 'file1',
      url: 'https://www.edgeros.com/_nuxt/1.aba3be2c.jpg',
      thumbnailUrl: 'https://www.edgeros.com/_nuxt/1.aba3be2c.jpg',
      fileName: 'Document 1',
      fileType: 'file',
      fileDesc: 'A sample document',
      width: 800,
      height: 600,
      selected: false,
      headers: {}
    },
    {
      id: 'file2',
      url: 'https://www.edgeros.com/_nuxt/1.a590f8b8.jpg',
      thumbnailUrl: '',
      fileName: 'Image 1',
      fileType: 'image',
      fileDesc: 'An example image',
      width: 1024,
      height: 768,
      selected: true,
      headers: {}
    }
  ]
}

edger.multiplePanel.append(params).then(() => {
  console.log('appended successfully.')
})

# async / await

async function append(params) {
  try {
    await edger.multiplePanel.append(params)
    console.log('appended successfully.')
  } catch (error) {
    console.error(error)
  }
}

# edger.multiplePanel.get()

Get the selected files.

• Returns: {Promise<{ ids: Array<String> }>}.

# Example

edger.multiplePanel.get().then(data => {
  console.log(data.ids)
}).catch(error => {
  console.error(error)
})

# async / await

async function get() {
  try {
    const data = await edger.multiplePanel.get()
    console.log(data.ids)
  } catch (error) {
    console.error(error)
  }
}

# edger.multiplePanel.updateGroups(payload)

Update the actions in multiple panel.

• payload {Object} Payload of the multiple panel, it can contain the following members:
  • groups {Array<MultiplePanelGroup>} The action group.
    • icon {String} The icon of group. Optional.
    • label {String} The label of group. Optional.
    • disabled {Boolean} Whether the group is disabled. Optional.
    • items: {Array<MultiplePanelGroupItem>} The header for getting file.
      • icon {String} The icon of item.
      • code {String} The code of item.
      • label {String} The label of item.
      • disabled {Boolean} Whether the item is disabled.
• Returns: {Promise}.

# Example

const params = {
  groups: [
    {
      items: [
        {
          icon: 'share',
          code: 'append',
          label: 'Append 1个',
          disabled: false
        },
        {
          icon: 'append',
          code: 'get',
          label: 'Group Get',
          disabled: false
        }
      ]
    }
  ]
}

edger.multiplePanel.updateGroups(params).then(() => {
  console.log('updateGroups successfully.')
})

# async / await

async function updateGroups(params) {
  try {
    await edger.multiplePanel.updateGroups(params)
    console.log('updateGroups successfully.')
  } catch (error) {
    console.error(error)
  }
}

# Events

The unified event listener provided by Web-SDK:

const listener = (payload) => {
  // Event handling...
}

// add listener
edger.multiplePanel.addEventListener('some-event', listener)

// or 
// onAction() is an alias of addEventListener().
edger.multiplePanel.onAction('some-event', listener)

// remove listener
edger.multiplePanel.removeEventListener('some-event', listener)

// remove all listeners
edger.multiplePanel.removeAllListeners()

# change

The change event is triggered when the files scrolled.

• Returns: {Object} The payload object.

The payload object has the following fields:

• id {String} The ID of file.
• previous {Number} The last file index.
• current {Number} The current file index.
• total {Number} The total number of files.

# Example

edger.multiplePanel.addEventListener('change', (payload) => {
  console.log(payload)
})

# selected

The selected event is triggered when the files selected.

• Returns: {Object} The payload object.

The payload object has the following fields:

• id {String} The ID of file.
• selected {Boolean} Whether the file is selected.
• current {Number} The current file index.
• selectedTotal {Number} The total number of selected files.
• total {Number} The total number of files.

# Example

edger.multiplePanel.addEventListener('selected', (payload) => {
  console.log(payload)
})

# status

The status event is triggered when the status changed.

• Returns: {Object} The payload object.

The payload object has the following field:

• status {'close' | 'open'} The status of multiple panel.

# Example

edger.multiplePanel.addEventListener('status', (payload) => {
  console.log(payload)
})

# action

The action event is triggered when the action clicked.

• Returns: {Object} The payload object.

The payload object has the following field:

• code {String} The code of action.

# Example

edger.multiplePanel.addEventListener('action', (payload) => {
  console.log(payload)
})