@siteone/media-library

Media library search

Example

import MediaLibrarySearchContainer from '@siteone/media-library'

const mediaFormatExample = [
  {
    // Component to show in list
    component: Thumbnail,
    // Are passed in list to list component specfied under 'compoenent' property
    props: {
      src: `https://picsum.photos/240/180?random=${i}`,
      alt: `picsum`,
      width: 120,
      height: 90,
    },
    // Name value pairs listed in preview
    details: {
      filename: `picsum`,
      alt: `picsum`,
      size: '1200px /  900px',
    },
    // Object passed to onConfirm method
    returnValue: {
      url: `https://picsum.photos/240/180?random=${i}`,
      alt: `picsum`,
      width: '240',
      height: '180',
    },
    // Unique key for list
    key: `key-1`,
  },
  ....
]

const getPage = (page: number, limit: number, searchParameters: Object) => {
  // Get your data here...
  // const data = ...
  return {
    media: data.currentPagedata
    count: data.count,
    hasNext: data.hasNext,
  }
}

const config = {
  search: [ //default empty
    {
      type: 'text',
      name: 'searchTerm',
      placeholder: 'Hledat obrázky..',
    },
  ],
  multiselect: false, //default false
  limit: 10 // Multiselect limit
}

const onConfirm = (media) => {
  console.log(media)
}

const MyCompoenent = props => <MediaLibrarySearchContainer getPage={getPage} config={config} onConfirm={onConfirm} />

// ...