@blaze-cms/plugin-media-ui 0.146.0-alpha.2 → 0.146.0-alpha.22

package/lib-es/components/FileUploadModal/FileUploadModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadModal.js","names":["React","useState","ModalAdapter","Modal","getMutation","getQuery","FileUpload","PropTypes","useToasts","useApolloClient","useQuery","useFileList","FileUploadModal","onClose","files","setFiles","addToast","client","addNewFile","fileStoresType","data","getFileStores","storeType","variables","visibleInAdmin","handleFiles","filesToUpload","uploadFiles","response","Promise","all","map","file","name","fileData","storeKey","mutate","mutation","input","filename","catch","error","message","appearance","autoDismiss","parsedResponse","result","fileNames","join","handleOnSave","length","storeOptions","type","key","createElement","Fragment","title","actions","textButton","callback","modifiers","upload","onChange","selectOptions","propTypes","func","defaultProps"],"sources":["../../../src/components/FileUploadModal/FileUploadModal.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';\nimport FileUpload from '@blaze-react/file-upload';\nimport PropTypes from 'prop-types';\nimport { useToasts } from '@blaze-react/toaster';\nimport { useApolloClient, useQuery } from '@apollo/client';\nimport useFileList from '../FileList/useFileList';\n\nconst FileUploadModal = ({ onClose }) => {\n  const [files, setFiles] = useState([]);\n  const { addToast } = useToasts();\n  const client = useApolloClient();\n  const { addNewFile } = useFileList();\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n\n  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n\n  const handleFiles = filesToUpload => {\n    setFiles(filesToUpload);\n  };\n\n  const uploadFiles = async () => {\n    const response = await Promise.all(\n      files.map(({ file, name, data: fileData, storeKey }) =>\n        client.mutate({\n          mutation: getMutation('UPLOAD_FILE'),\n          variables: {\n            input: {\n              file,\n              name: name || file.filename,\n              storeKey,\n              data: fileData\n            }\n          }\n        })\n      )\n    ).catch(error => {\n      addToast(error.message, {\n        appearance: 'error',\n        autoDismiss: true\n      });\n    });\n\n    const parsedResponse = response.map(({ data: { file } }) => file.result);\n\n    const fileNames = files.map(({ file }) => file.name);\n    addNewFile(parsedResponse);\n    addToast(`Uploaded: ${fileNames.join(', ')}`, {\n      appearance: 'success',\n      autoDismiss: true\n    });\n  };\n\n  const handleOnSave = async () => {\n    onClose();\n    if (files.length) await uploadFiles();\n  };\n\n  const storeOptions = storeType.map(type => [type.key, type.name]);\n\n  return (\n    <>\n      <Modal\n        onClose={onClose}\n        title=\"Add media\"\n        actions={[\n          {\n            textButton: 'Cancel',\n            callback: onClose,\n            modifiers: ['cancel']\n          },\n          {\n            textButton: 'Save',\n            callback: handleOnSave,\n            modifiers: []\n          }\n        ]}\n        upload>\n        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />\n      </Modal>\n    </>\n  );\n};\n\nFileUploadModal.propTypes = {\n  onClose: PropTypes.func\n};\n\nFileUploadModal.defaultProps = {\n  onClose: () => {}\n};\n\nexport default FileUploadModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileUploadModal.js","names":["React","useState","ModalAdapter","Modal","getMutation","getQuery","FileUpload","PropTypes","useToasts","useApolloClient","useQuery","useFileList","FileUploadModal","onClose","getSelectedFiles","closeModalAndSetValue","simpleLayout","files","setFiles","addToast","client","addNewFile","fileStoresType","data","getFileStores","storeType","variables","visibleInAdmin","handleFiles","filesToUpload","uploadFiles","response","Promise","all","map","file","name","fileData","storeKey","mutate","mutation","input","filename","catch","error","message","appearance","autoDismiss","parsedResponse","result","fileNames","toastMessage","join","filesToSelect","id","handleOnSave","length","storeOptions","type","key","createElement","Fragment","title","actions","textButton","callback","modifiers","upload","onChange","selectOptions","propTypes","func","isRequired","bool","defaultProps"],"sources":["../../../src/components/FileUploadModal/FileUploadModal.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';\nimport FileUpload from '@blaze-react/file-upload';\nimport PropTypes from 'prop-types';\nimport { useToasts } from '@blaze-react/toaster';\nimport { useApolloClient, useQuery } from '@apollo/client';\nimport useFileList from '../FileList/useFileList';\n\nconst FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, simpleLayout }) => {\n  const [files, setFiles] = useState([]);\n  const { addToast } = useToasts();\n  const client = useApolloClient();\n  const { addNewFile } = useFileList();\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n\n  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n\n  const handleFiles = filesToUpload => {\n    setFiles(filesToUpload);\n  };\n\n  const uploadFiles = async () => {\n    const response = await Promise.all(\n      files.map(({ file, name, data: fileData, storeKey }) =>\n        client.mutate({\n          mutation: getMutation('UPLOAD_FILE'),\n          variables: {\n            input: {\n              file,\n              name: name || file.filename,\n              storeKey,\n              data: fileData\n            }\n          }\n        })\n      )\n    ).catch(error => {\n      addToast(error.message, {\n        appearance: 'error',\n        autoDismiss: true\n      });\n    });\n\n    const parsedResponse = response.map(({ data: { file } }) => file.result);\n\n    const fileNames = files.map(({ file }) => file.name);\n    addNewFile(parsedResponse);\n    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;\n\n    if (simpleLayout) {\n      const filesToSelect = parsedResponse.map(file => file.id);\n      getSelectedFiles(null, filesToSelect);\n      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);\n      return;\n    }\n\n    addToast(toastMessage, {\n      appearance: 'success',\n      autoDismiss: true\n    });\n  };\n\n  const handleOnSave = async () => {\n    if (files.length) await uploadFiles();\n    onClose();\n  };\n\n  const storeOptions = storeType.map(type => [type.key, type.name]);\n\n  return (\n    <>\n      <Modal\n        onClose={onClose}\n        title=\"Add media\"\n        actions={[\n          {\n            textButton: 'Cancel',\n            callback: onClose,\n            modifiers: ['cancel']\n          },\n          {\n            textButton: 'Save',\n            callback: handleOnSave,\n            modifiers: []\n          }\n        ]}\n        upload>\n        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />\n      </Modal>\n    </>\n  );\n};\n\nFileUploadModal.propTypes = {\n  getSelectedFiles: PropTypes.func.isRequired,\n  onClose: PropTypes.func,\n  simpleLayout: PropTypes.bool,\n  closeModalAndSetValue: PropTypes.func\n};\n\nFileUploadModal.defaultProps = {\n  onClose: () => {},\n  closeModalAndSetValue: () => {},\n  simpleLayout: false\n};\n\nexport default FileUploadModal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY,IAAIC,KAAK,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,2BAA2B;AACxF,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,SAAS,QAAQ,sBAAsB;AAChD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,gBAAgB;AAC1D,OAAOC,WAAW,MAAM,yBAAyB;AAEjD,MAAMC,eAAe,GAAGA,CAAC;EAAEC,OAAO;EAAEC,gBAAgB;EAAEC,qBAAqB;EAAEC;AAAa,CAAC,KAAK;EAC9F,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGjB,QAAQ,CAAC,EAAE,CAAC;EACtC,MAAM;IAAEkB;EAAS,CAAC,GAAGX,SAAS,CAAC,CAAC;EAChC,MAAMY,MAAM,GAAGX,eAAe,CAAC,CAAC;EAChC,MAAM;IAAEY;EAAW,CAAC,GAAGV,WAAW,CAAC,CAAC;EAEpC,MAAMW,cAAc,GAAGjB,QAAQ,CAAC,iBAAiB,CAAC;EAElD,MAAM;IAAEkB,IAAI,EAAE;MAAEC,aAAa,EAAEC,SAAS,GAAG;IAAG,CAAC,GAAG,CAAC;EAAE,CAAC,GAAGf,QAAQ,CAACY,cAAc,EAAE;IAChFI,SAAS,EAAE;MAAEC,cAAc,EAAE;IAAK;EACpC,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGC,aAAa,IAAI;IACnCX,QAAQ,CAACW,aAAa,CAAC;EACzB,CAAC;EAED,MAAMC,WAAW,GAAG,MAAAA,CAAA,KAAY;IAC9B,MAAMC,QAAQ,GAAG,MAAMC,OAAO,CAACC,GAAG,CAChChB,KAAK,CAACiB,GAAG,CAAC,CAAC;MAAEC,IAAI;MAAEC,IAAI;MAAEb,IAAI,EAAEc,QAAQ;MAAEC;IAAS,CAAC,KACjDlB,MAAM,CAACmB,MAAM,CAAC;MACZC,QAAQ,EAAEpC,WAAW,CAAC,aAAa,CAAC;MACpCsB,SAAS,EAAE;QACTe,KAAK,EAAE;UACLN,IAAI;UACJC,IAAI,EAAEA,IAAI,IAAID,IAAI,CAACO,QAAQ;UAC3BJ,QAAQ;UACRf,IAAI,EAAEc;QACR;MACF;IACF,CAAC,CACH,CACF,CAAC,CAACM,KAAK,CAACC,KAAK,IAAI;MACfzB,QAAQ,CAACyB,KAAK,CAACC,OAAO,EAAE;QACtBC,UAAU,EAAE,OAAO;QACnBC,WAAW,EAAE;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAMC,cAAc,GAAGjB,QAAQ,CAACG,GAAG,CAAC,CAAC;MAAEX,IAAI,EAAE;QAAEY;MAAK;IAAE,CAAC,KAAKA,IAAI,CAACc,MAAM,CAAC;IAExE,MAAMC,SAAS,GAAGjC,KAAK,CAACiB,GAAG,CAAC,CAAC;MAAEC;IAAK,CAAC,KAAKA,IAAI,CAACC,IAAI,CAAC;IACpDf,UAAU,CAAC2B,cAAc,CAAC;IAC1B,MAAMG,YAAY,GAAI,aAAYD,SAAS,CAACE,IAAI,CAAC,IAAI,CAAE,EAAC;IAExD,IAAIpC,YAAY,EAAE;MAChB,MAAMqC,aAAa,GAAGL,cAAc,CAACd,GAAG,CAACC,IAAI,IAAIA,IAAI,CAACmB,EAAE,CAAC;MACzDxC,gBAAgB,CAAC,IAAI,EAAEuC,aAAa,CAAC;MACrCtC,qBAAqB,CAACC,YAAY,EAAEqC,aAAa,EAAEF,YAAY,CAAC;MAChE;IACF;IAEAhC,QAAQ,CAACgC,YAAY,EAAE;MACrBL,UAAU,EAAE,SAAS;MACrBC,WAAW,EAAE;IACf,CAAC,CAAC;EACJ,CAAC;EAED,MAAMQ,YAAY,GAAG,MAAAA,CAAA,KAAY;IAC/B,IAAItC,KAAK,CAACuC,MAAM,EAAE,MAAM1B,WAAW,CAAC,CAAC;IACrCjB,OAAO,CAAC,CAAC;EACX,CAAC;EAED,MAAM4C,YAAY,GAAGhC,SAAS,CAACS,GAAG,CAACwB,IAAI,IAAI,CAACA,IAAI,CAACC,GAAG,EAAED,IAAI,CAACtB,IAAI,CAAC,CAAC;EAEjE,oBACEpC,KAAA,CAAA4D,aAAA,CAAA5D,KAAA,CAAA6D,QAAA,qBACE7D,KAAA,CAAA4D,aAAA,CAACzD,KAAK;IACJU,OAAO,EAAEA,OAAQ;IACjBiD,KAAK,EAAC,WAAW;IACjBC,OAAO,EAAE,CACP;MACEC,UAAU,EAAE,QAAQ;MACpBC,QAAQ,EAAEpD,OAAO;MACjBqD,SAAS,EAAE,CAAC,QAAQ;IACtB,CAAC,EACD;MACEF,UAAU,EAAE,MAAM;MAClBC,QAAQ,EAAEV,YAAY;MACtBW,SAAS,EAAE;IACb,CAAC,CACD;IACFC,MAAM;EAAA,gBACNnE,KAAA,CAAA4D,aAAA,CAACtD,UAAU;IAAC8D,QAAQ,EAAExC,WAAY;IAACyC,aAAa,EAAEZ;EAAa,CAAE,CAC5D,CACP,CAAC;AAEP,CAAC;AAED7C,eAAe,CAAC0D,SAAS,GAAG;EAC1BxD,gBAAgB,EAAEP,SAAS,CAACgE,IAAI,CAACC,UAAU;EAC3C3D,OAAO,EAAEN,SAAS,CAACgE,IAAI;EACvBvD,YAAY,EAAET,SAAS,CAACkE,IAAI;EAC5B1D,qBAAqB,EAAER,SAAS,CAACgE;AACnC,CAAC;AAED3D,eAAe,CAAC8D,YAAY,GAAG;EAC7B7D,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBE,qBAAqB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC/BC,YAAY,EAAE;AAChB,CAAC;AAED,eAAeJ,eAAe","ignoreList":[]}

package/lib-es/components/ListingContainer/Listing/Listing.js

@@ -8,12 +8,22 @@ import MediaListing from './MediaListing';
 import FilterPanel from '../../FilterPanel';
 const Listing = ({
   displayFileUploadModal,
-  handleDisplayFileUploadModal
+  handleDisplayFileUploadModal,
+  getSelectedFiles,
+  setDisplayFileUploadModal,
+  closeModalAndSetValue,
+  simpleLayout
 }) => /*#__PURE__*/React.createElement("div", {
   className: "page"
 }, displayFileUploadModal && /*#__PURE__*/React.createElement(FileUploadModal, {
-  onClose: () => handleDisplayFileUploadModal(false)
-}), /*#__PURE__*/React.createElement(PageHeader, {
+  onClose: () => {
+    handleDisplayFileUploadModal(false);
+    setDisplayFileUploadModal(false);
+  },
+  closeModalAndSetValue: closeModalAndSetValue,
+  simpleLayout: simpleLayout,
+  getSelectedFiles: getSelectedFiles
+}), !simpleLayout && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageHeader, {
   title: "Media library"
 }, /*#__PURE__*/React.createElement(PageHeader.Actions, null, /*#__PURE__*/React.createElement(Button, {
   modifiers: ['small'],
@@ -30,14 +40,19 @@ const Listing = ({
   isMoreMenu: true
 })))), /*#__PURE__*/React.createElement("div", {
   className: "page__content page__content--with-side-panel"
-}, /*#__PURE__*/React.createElement(FilterPanel, null), /*#__PURE__*/React.createElement(MediaListing, null)));
+}, /*#__PURE__*/React.createElement(FilterPanel, null), /*#__PURE__*/React.createElement(MediaListing, null))));
 Listing.propTypes = {
-  displayFileUploadModal: PropTypes.bool,
-  handleDisplayFileUploadModal: PropTypes.func
+  getSelectedFiles: PropTypes.func.isRequired,
+  handleDisplayFileUploadModal: PropTypes.func,
+  simpleLayout: PropTypes.bool,
+  setDisplayFileUploadModal: PropTypes.func.isRequired,
+  displayFileUploadModal: PropTypes.bool.isRequired,
+  closeModalAndSetValue: PropTypes.func
 };
 Listing.defaultProps = {
-  displayFileUploadModal: false,
-  handleDisplayFileUploadModal: () => {}
+  closeModalAndSetValue: () => {},
+  handleDisplayFileUploadModal: () => {},
+  simpleLayout: false
 };
 export default Listing;
 //# sourceMappingURL=Listing.js.map

package/lib-es/components/ListingContainer/Listing/Listing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listing.js","names":["React","PageHeader","Button","More","PropTypes","FileUploadModal","MediaListing","FilterPanel","Listing","displayFileUploadModal","handleDisplayFileUploadModal","createElement","className","onClose","title","Actions","modifiers","onClick","displayBg","Avatar","isMoreMenu","Content","propTypes","bool","func","defaultProps"],"sources":["../../../../src/components/ListingContainer/Listing/Listing.js"],"sourcesContent":["import React from 'react';\nimport { PageHeader } from '@blaze-cms/admin';\nimport Button from '@blaze-react/button';\nimport More from '@blaze-react/more';\nimport PropTypes from 'prop-types';\nimport FileUploadModal from '../../FileUploadModal';\nimport MediaListing from './MediaListing';\nimport FilterPanel from '../../FilterPanel';\n\nconst Listing = ({ displayFileUploadModal, handleDisplayFileUploadModal }) => (\n  <div className=\"page\">\n    {displayFileUploadModal && (\n      <FileUploadModal onClose={() => handleDisplayFileUploadModal(false)} />\n    )}\n    <PageHeader title=\"Media library\">\n      <PageHeader.Actions>\n        <Button\n          modifiers={['small']}\n          onClick={() => {\n            handleDisplayFileUploadModal(true);\n          }}>\n          Add\n        </Button>\n        <More displayBg>\n          <More.Avatar isMoreMenu>\n            <span className=\"material-icons\">more_vert</span>\n          </More.Avatar>\n          <More.Content isMoreMenu />\n        </More>\n      </PageHeader.Actions>\n    </PageHeader>\n    <div className=\"page__content page__content--with-side-panel\">\n      <FilterPanel />\n      <MediaListing />\n    </div>\n  </div>\n);\n\nListing.propTypes = {\n  displayFileUploadModal: PropTypes.bool,\n  handleDisplayFileUploadModal: PropTypes.func\n};\n\nListing.defaultProps = {\n  displayFileUploadModal: false,\n  handleDisplayFileUploadModal: () => {}\n};\n\nexport default Listing;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,qBAAqB;AACxC,OAAOC,IAAI,MAAM,mBAAmB;AACpC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,eAAe,MAAM,uBAAuB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,WAAW,MAAM,mBAAmB;AAE3C,MAAMC,OAAO,GAAGA,CAAC;EAAEC,sBAAsB;EAAEC;AAA6B,CAAC,kBACvEV,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAC;AAAM,GAClBH,sBAAsB,iBACrBT,KAAA,CAAAW,aAAA,CAACN,eAAe;EAACQ,OAAO,EAAEA,CAAA,KAAMH,4BAA4B,CAAC,KAAK;AAAE,CAAE,CACvE,eACDV,KAAA,CAAAW,aAAA,CAACV,UAAU;EAACa,KAAK,EAAC;AAAe,gBAC/Bd,KAAA,CAAAW,aAAA,CAACV,UAAU,CAACc,OAAO,qBACjBf,KAAA,CAAAW,aAAA,CAACT,MAAM;EACLc,SAAS,EAAE,CAAC,OAAO,CAAE;EACrBC,OAAO,EAAEA,CAAA,KAAM;IACbP,4BAA4B,CAAC,IAAI,CAAC;EACpC;AAAE,GAAC,KAEG,CAAC,eACTV,KAAA,CAAAW,aAAA,CAACR,IAAI;EAACe,SAAS;AAAA,gBACblB,KAAA,CAAAW,aAAA,CAACR,IAAI,CAACgB,MAAM;EAACC,UAAU;AAAA,gBACrBpB,KAAA,CAAAW,aAAA;EAAMC,SAAS,EAAC;AAAgB,GAAC,WAAe,CACrC,CAAC,eACdZ,KAAA,CAAAW,aAAA,CAACR,IAAI,CAACkB,OAAO;EAACD,UAAU;AAAA,CAAE,CACtB,CACY,CACV,CAAC,eACbpB,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAC;AAA8C,gBAC3DZ,KAAA,CAAAW,aAAA,CAACJ,WAAW,MAAE,CAAC,eACfP,KAAA,CAAAW,aAAA,CAACL,YAAY,MAAE,CACZ,CACF,CACN;AAEDE,OAAO,CAACc,SAAS,GAAG;EAClBb,sBAAsB,EAAEL,SAAS,CAACmB,IAAI;EACtCb,4BAA4B,EAAEN,SAAS,CAACoB;AAC1C,CAAC;AAEDhB,OAAO,CAACiB,YAAY,GAAG;EACrBhB,sBAAsB,EAAE,KAAK;EAC7BC,4BAA4B,EAAEA,CAAA,KAAM,CAAC;AACvC,CAAC;AAED,eAAeF,OAAO","ignoreList":[]}
+{"version":3,"file":"Listing.js","names":["React","PageHeader","Button","More","PropTypes","FileUploadModal","MediaListing","FilterPanel","Listing","displayFileUploadModal","handleDisplayFileUploadModal","getSelectedFiles","setDisplayFileUploadModal","closeModalAndSetValue","simpleLayout","createElement","className","onClose","Fragment","title","Actions","modifiers","onClick","displayBg","Avatar","isMoreMenu","Content","propTypes","func","isRequired","bool","defaultProps"],"sources":["../../../../src/components/ListingContainer/Listing/Listing.js"],"sourcesContent":["import React from 'react';\nimport { PageHeader } from '@blaze-cms/admin';\nimport Button from '@blaze-react/button';\nimport More from '@blaze-react/more';\nimport PropTypes from 'prop-types';\nimport FileUploadModal from '../../FileUploadModal';\nimport MediaListing from './MediaListing';\nimport FilterPanel from '../../FilterPanel';\n\nconst Listing = ({\n  displayFileUploadModal,\n  handleDisplayFileUploadModal,\n  getSelectedFiles,\n  setDisplayFileUploadModal,\n  closeModalAndSetValue,\n  simpleLayout\n}) => (\n  <div className=\"page\">\n    {displayFileUploadModal && (\n      <FileUploadModal\n        onClose={() => {\n          handleDisplayFileUploadModal(false);\n          setDisplayFileUploadModal(false);\n        }}\n        closeModalAndSetValue={closeModalAndSetValue}\n        simpleLayout={simpleLayout}\n        getSelectedFiles={getSelectedFiles}\n      />\n    )}\n    {!simpleLayout && (\n      <>\n        <PageHeader title=\"Media library\">\n          <PageHeader.Actions>\n            <Button\n              modifiers={['small']}\n              onClick={() => {\n                handleDisplayFileUploadModal(true);\n              }}>\n              Add\n            </Button>\n            <More displayBg>\n              <More.Avatar isMoreMenu>\n                <span className=\"material-icons\">more_vert</span>\n              </More.Avatar>\n              <More.Content isMoreMenu />\n            </More>\n          </PageHeader.Actions>\n        </PageHeader>\n        <div className=\"page__content page__content--with-side-panel\">\n          <FilterPanel />\n          <MediaListing />\n        </div>\n      </>\n    )}\n  </div>\n);\n\nListing.propTypes = {\n  getSelectedFiles: PropTypes.func.isRequired,\n  handleDisplayFileUploadModal: PropTypes.func,\n  simpleLayout: PropTypes.bool,\n  setDisplayFileUploadModal: PropTypes.func.isRequired,\n  displayFileUploadModal: PropTypes.bool.isRequired,\n  closeModalAndSetValue: PropTypes.func\n};\n\nListing.defaultProps = {\n  closeModalAndSetValue: () => {},\n  handleDisplayFileUploadModal: () => {},\n  simpleLayout: false\n};\n\nexport default Listing;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,qBAAqB;AACxC,OAAOC,IAAI,MAAM,mBAAmB;AACpC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,eAAe,MAAM,uBAAuB;AACnD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,WAAW,MAAM,mBAAmB;AAE3C,MAAMC,OAAO,GAAGA,CAAC;EACfC,sBAAsB;EACtBC,4BAA4B;EAC5BC,gBAAgB;EAChBC,yBAAyB;EACzBC,qBAAqB;EACrBC;AACF,CAAC,kBACCd,KAAA,CAAAe,aAAA;EAAKC,SAAS,EAAC;AAAM,GAClBP,sBAAsB,iBACrBT,KAAA,CAAAe,aAAA,CAACV,eAAe;EACdY,OAAO,EAAEA,CAAA,KAAM;IACbP,4BAA4B,CAAC,KAAK,CAAC;IACnCE,yBAAyB,CAAC,KAAK,CAAC;EAClC,CAAE;EACFC,qBAAqB,EAAEA,qBAAsB;EAC7CC,YAAY,EAAEA,YAAa;EAC3BH,gBAAgB,EAAEA;AAAiB,CACpC,CACF,EACA,CAACG,YAAY,iBACZd,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAkB,QAAA,qBACElB,KAAA,CAAAe,aAAA,CAACd,UAAU;EAACkB,KAAK,EAAC;AAAe,gBAC/BnB,KAAA,CAAAe,aAAA,CAACd,UAAU,CAACmB,OAAO,qBACjBpB,KAAA,CAAAe,aAAA,CAACb,MAAM;EACLmB,SAAS,EAAE,CAAC,OAAO,CAAE;EACrBC,OAAO,EAAEA,CAAA,KAAM;IACbZ,4BAA4B,CAAC,IAAI,CAAC;EACpC;AAAE,GAAC,KAEG,CAAC,eACTV,KAAA,CAAAe,aAAA,CAACZ,IAAI;EAACoB,SAAS;AAAA,gBACbvB,KAAA,CAAAe,aAAA,CAACZ,IAAI,CAACqB,MAAM;EAACC,UAAU;AAAA,gBACrBzB,KAAA,CAAAe,aAAA;EAAMC,SAAS,EAAC;AAAgB,GAAC,WAAe,CACrC,CAAC,eACdhB,KAAA,CAAAe,aAAA,CAACZ,IAAI,CAACuB,OAAO;EAACD,UAAU;AAAA,CAAE,CACtB,CACY,CACV,CAAC,eACbzB,KAAA,CAAAe,aAAA;EAAKC,SAAS,EAAC;AAA8C,gBAC3DhB,KAAA,CAAAe,aAAA,CAACR,WAAW,MAAE,CAAC,eACfP,KAAA,CAAAe,aAAA,CAACT,YAAY,MAAE,CACZ,CACL,CAED,CACN;AAEDE,OAAO,CAACmB,SAAS,GAAG;EAClBhB,gBAAgB,EAAEP,SAAS,CAACwB,IAAI,CAACC,UAAU;EAC3CnB,4BAA4B,EAAEN,SAAS,CAACwB,IAAI;EAC5Cd,YAAY,EAAEV,SAAS,CAAC0B,IAAI;EAC5BlB,yBAAyB,EAAER,SAAS,CAACwB,IAAI,CAACC,UAAU;EACpDpB,sBAAsB,EAAEL,SAAS,CAAC0B,IAAI,CAACD,UAAU;EACjDhB,qBAAqB,EAAET,SAAS,CAACwB;AACnC,CAAC;AAEDpB,OAAO,CAACuB,YAAY,GAAG;EACrBlB,qBAAqB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC/BH,4BAA4B,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtCI,YAAY,EAAE;AAChB,CAAC;AAED,eAAeN,OAAO","ignoreList":[]}

package/lib-es/components/ListingContainer/ListingContainer.js

@@ -14,9 +14,12 @@ import { existPrevious } from './mappers';
 const ListingContainer = ({
   handleSelectedFiles,
   maxItems,
-  filesSelected
+  filesSelected,
+  displayFileUploadModal,
+  setDisplayFileUploadModal,
+  closeModalAndSetValue,
+  simpleLayout
 }) => {
-  const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);
   const [selectedFilter, setSelectedFilter] = useState({
     filter: 'all',
@@ -36,9 +39,15 @@ const ListingContainer = ({
     }
   });
   if (loading) return null;
-  const getSelectedFiles = ({
-    id
-  }) => {
+  const getSelectedFiles = (file, files) => {
+    if (simpleLayout) {
+      handleSelectedFiles(files, false);
+      setSelectedFiles(files);
+      return;
+    }
+    const {
+      id
+    } = file;
     const existPreviousFile = existPrevious(selectedFiles, id);
     if (maxItems === selectedFiles.length && !existPreviousFile) {
       handleSelectedFiles([id], false);
@@ -67,19 +76,31 @@ const ListingContainer = ({
       onClickPrompt: () => handleDisplayFileUploadModal(true)
     }
   }, /*#__PURE__*/React.createElement(FilesListProvider, null, /*#__PURE__*/React.createElement(Listing, {
+    closeModalAndSetValue: closeModalAndSetValue,
+    simpleLayout: simpleLayout,
+    getSelectedFiles: getSelectedFiles,
+    setDisplayFileUploadModal: setDisplayFileUploadModal,
     displayFileUploadModal: displayFileUploadModal,
-    handleDisplayFileUploadModal: handleDisplayFileUploadModal
+    handleDisplayFileUploadModal: handleDisplayFileUploadModal,
+    setSelectedFiles: setSelectedFiles,
+    handleSelectedFiles: handleSelectedFiles
   }))));
 };
 ListingContainer.propTypes = {
   handleSelectedFiles: PropTypes.func,
   maxItems: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-  filesSelected: PropTypes.arrayOf(PropTypes.string)
+  filesSelected: PropTypes.arrayOf(PropTypes.string),
+  simpleLayout: PropTypes.bool,
+  setDisplayFileUploadModal: PropTypes.func.isRequired,
+  displayFileUploadModal: PropTypes.bool.isRequired,
+  closeModalAndSetValue: PropTypes.func
 };
 ListingContainer.defaultProps = {
+  closeModalAndSetValue: () => {},
   handleSelectedFiles: () => {},
   maxItems: false,
-  filesSelected: []
+  filesSelected: [],
+  simpleLayout: false
 };
 export default ListingContainer;
 //# sourceMappingURL=ListingContainer.js.map

package/lib-es/components/ListingContainer/ListingContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingContainer.js","names":["React","useState","PropTypes","useQuery","getQuery","ToastProvider","Listing","availableFilters","MediaContextProvider","FilesListProvider","existPrevious","ListingContainer","handleSelectedFiles","maxItems","filesSelected","displayFileUploadModal","setDisplayFileUploadModal","selectedFiles","setSelectedFiles","selectedFilter","setSelectedFilter","filter","isSearch","searchTerm","storeKey","fileStoresType","loading","data","getFileStores","fileStores","variables","visibleInAdmin","getSelectedFiles","id","existPreviousFile","length","allSelectedFiles","fileId","handleDisplayFileUploadModal","param","defaultFileStore","find","isDefault","key","createElement","value","changeSelectedFilter","_objectSpread","filters","onClickPrompt","propTypes","func","oneOfType","number","bool","arrayOf","string","defaultProps"],"sources":["../../../src/components/ListingContainer/ListingContainer.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useQuery } from '@apollo/client';\nimport { getQuery } from '@blaze-cms/admin-ui-utils';\nimport { ToastProvider } from '@blaze-react/toaster';\nimport Listing from './Listing';\nimport { availableFilters } from '../../utils/available-filters/available-filters';\nimport { MediaContextProvider } from '../../utils/media-context';\nimport FilesListProvider from '../FileList/FilesListProvider';\nimport { existPrevious } from './mappers';\n\nconst ListingContainer = ({ handleSelectedFiles, maxItems, filesSelected }) => {\n  const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);\n  const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);\n  const [selectedFilter, setSelectedFilter] = useState({\n    filter: 'all',\n    isSearch: false,\n    searchTerm: null,\n    storeKey: null\n  });\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n  const { loading, data: { getFileStores: fileStores = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n  if (loading) return null;\n\n  const getSelectedFiles = ({ id }) => {\n    const existPreviousFile = existPrevious(selectedFiles, id);\n\n    if (maxItems === selectedFiles.length && !existPreviousFile) {\n      handleSelectedFiles([id], false);\n      setSelectedFiles([id]);\n    } else {\n      const allSelectedFiles = existPreviousFile\n        ? selectedFiles.filter(fileId => fileId !== existPreviousFile)\n        : [...selectedFiles, id];\n\n      handleSelectedFiles(allSelectedFiles, false);\n      setSelectedFiles(allSelectedFiles);\n    }\n  };\n\n  const handleDisplayFileUploadModal = param => setDisplayFileUploadModal(param);\n\n  const defaultFileStore = (fileStores.find(({ isDefault }) => isDefault) || {}).key;\n\n  return (\n    <ToastProvider>\n      <MediaContextProvider\n        value={{\n          fileStores,\n          defaultFileStore,\n          changeSelectedFilter: value => setSelectedFilter(value),\n          selectedFilter: {\n            ...selectedFilter,\n            storeKey: selectedFilter.storeKey || defaultFileStore\n          },\n          selectedFiles,\n          getSelectedFiles,\n          filters: availableFilters,\n          onClickPrompt: () => handleDisplayFileUploadModal(true)\n        }}>\n        <FilesListProvider>\n          <Listing\n            displayFileUploadModal={displayFileUploadModal}\n            handleDisplayFileUploadModal={handleDisplayFileUploadModal}\n          />\n        </FilesListProvider>\n      </MediaContextProvider>\n    </ToastProvider>\n  );\n};\n\nListingContainer.propTypes = {\n  handleSelectedFiles: PropTypes.func,\n  maxItems: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n  filesSelected: PropTypes.arrayOf(PropTypes.string)\n};\n\nListingContainer.defaultProps = {\n  handleSelectedFiles: () => {},\n  maxItems: false,\n  filesSelected: []\n};\n\nexport default ListingContainer;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,OAAOC,OAAO,MAAM,WAAW;AAC/B,SAASC,gBAAgB,QAAQ,iDAAiD;AAClF,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,OAAOC,iBAAiB,MAAM,+BAA+B;AAC7D,SAASC,aAAa,QAAQ,WAAW;AAEzC,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,mBAAmB;EAAEC,QAAQ;EAAEC;AAAc,CAAC,KAAK;EAC7E,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAC3E,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGjB,QAAQ,CAACa,aAAa,IAAI,EAAE,CAAC;EACvE,MAAM,CAACK,cAAc,EAAEC,iBAAiB,CAAC,GAAGnB,QAAQ,CAAC;IACnDoB,MAAM,EAAE,KAAK;IACbC,QAAQ,EAAE,KAAK;IACfC,UAAU,EAAE,IAAI;IAChBC,QAAQ,EAAE;EACZ,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAGrB,QAAQ,CAAC,iBAAiB,CAAC;EAClD,MAAM;IAAEsB,OAAO;IAAEC,IAAI,EAAE;MAAEC,aAAa,EAAEC,UAAU,GAAG;IAAG,CAAC,GAAG,CAAC;EAAE,CAAC,GAAG1B,QAAQ,CAACsB,cAAc,EAAE;IAC1FK,SAAS,EAAE;MAAEC,cAAc,EAAE;IAAK;EACpC,CAAC,CAAC;EACF,IAAIL,OAAO,EAAE,OAAO,IAAI;EAExB,MAAMM,gBAAgB,GAAGA,CAAC;IAAEC;EAAG,CAAC,KAAK;IACnC,MAAMC,iBAAiB,GAAGxB,aAAa,CAACO,aAAa,EAAEgB,EAAE,CAAC;IAE1D,IAAIpB,QAAQ,KAAKI,aAAa,CAACkB,MAAM,IAAI,CAACD,iBAAiB,EAAE;MAC3DtB,mBAAmB,CAAC,CAACqB,EAAE,CAAC,EAAE,KAAK,CAAC;MAChCf,gBAAgB,CAAC,CAACe,EAAE,CAAC,CAAC;IACxB,CAAC,MAAM;MACL,MAAMG,gBAAgB,GAAGF,iBAAiB,GACtCjB,aAAa,CAACI,MAAM,CAACgB,MAAM,IAAIA,MAAM,KAAKH,iBAAiB,CAAC,GAC5D,CAAC,GAAGjB,aAAa,EAAEgB,EAAE,CAAC;MAE1BrB,mBAAmB,CAACwB,gBAAgB,EAAE,KAAK,CAAC;MAC5ClB,gBAAgB,CAACkB,gBAAgB,CAAC;IACpC;EACF,CAAC;EAED,MAAME,4BAA4B,GAAGC,KAAK,IAAIvB,yBAAyB,CAACuB,KAAK,CAAC;EAE9E,MAAMC,gBAAgB,GAAG,CAACX,UAAU,CAACY,IAAI,CAAC,CAAC;IAAEC;EAAU,CAAC,KAAKA,SAAS,CAAC,IAAI,CAAC,CAAC,EAAEC,GAAG;EAElF,oBACE3C,KAAA,CAAA4C,aAAA,CAACvC,aAAa,qBACZL,KAAA,CAAA4C,aAAA,CAACpC,oBAAoB;IACnBqC,KAAK,EAAE;MACLhB,UAAU;MACVW,gBAAgB;MAChBM,oBAAoB,EAAED,KAAK,IAAIzB,iBAAiB,CAACyB,KAAK,CAAC;MACvD1B,cAAc,EAAA4B,aAAA,CAAAA,aAAA,KACT5B,cAAc;QACjBK,QAAQ,EAAEL,cAAc,CAACK,QAAQ,IAAIgB;MAAgB,EACtD;MACDvB,aAAa;MACbe,gBAAgB;MAChBgB,OAAO,EAAEzC,gBAAgB;MACzB0C,aAAa,EAAEA,CAAA,KAAMX,4BAA4B,CAAC,IAAI;IACxD;EAAE,gBACFtC,KAAA,CAAA4C,aAAA,CAACnC,iBAAiB,qBAChBT,KAAA,CAAA4C,aAAA,CAACtC,OAAO;IACNS,sBAAsB,EAAEA,sBAAuB;IAC/CuB,4BAA4B,EAAEA;EAA6B,CAC5D,CACgB,CACC,CACT,CAAC;AAEpB,CAAC;AAED3B,gBAAgB,CAACuC,SAAS,GAAG;EAC3BtC,mBAAmB,EAAEV,SAAS,CAACiD,IAAI;EACnCtC,QAAQ,EAAEX,SAAS,CAACkD,SAAS,CAAC,CAAClD,SAAS,CAACmD,MAAM,EAAEnD,SAAS,CAACoD,IAAI,CAAC,CAAC;EACjExC,aAAa,EAAEZ,SAAS,CAACqD,OAAO,CAACrD,SAAS,CAACsD,MAAM;AACnD,CAAC;AAED7C,gBAAgB,CAAC8C,YAAY,GAAG;EAC9B7C,mBAAmB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE;AACjB,CAAC;AAED,eAAeH,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ListingContainer.js","names":["React","useState","PropTypes","useQuery","getQuery","ToastProvider","Listing","availableFilters","MediaContextProvider","FilesListProvider","existPrevious","ListingContainer","handleSelectedFiles","maxItems","filesSelected","displayFileUploadModal","setDisplayFileUploadModal","closeModalAndSetValue","simpleLayout","selectedFiles","setSelectedFiles","selectedFilter","setSelectedFilter","filter","isSearch","searchTerm","storeKey","fileStoresType","loading","data","getFileStores","fileStores","variables","visibleInAdmin","getSelectedFiles","file","files","id","existPreviousFile","length","allSelectedFiles","fileId","handleDisplayFileUploadModal","param","defaultFileStore","find","isDefault","key","createElement","value","changeSelectedFilter","_objectSpread","filters","onClickPrompt","propTypes","func","oneOfType","number","bool","arrayOf","string","isRequired","defaultProps"],"sources":["../../../src/components/ListingContainer/ListingContainer.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useQuery } from '@apollo/client';\nimport { getQuery } from '@blaze-cms/admin-ui-utils';\nimport { ToastProvider } from '@blaze-react/toaster';\nimport Listing from './Listing';\nimport { availableFilters } from '../../utils/available-filters/available-filters';\nimport { MediaContextProvider } from '../../utils/media-context';\nimport FilesListProvider from '../FileList/FilesListProvider';\nimport { existPrevious } from './mappers';\n\nconst ListingContainer = ({\n  handleSelectedFiles,\n  maxItems,\n  filesSelected,\n  displayFileUploadModal,\n  setDisplayFileUploadModal,\n  closeModalAndSetValue,\n  simpleLayout\n}) => {\n  const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);\n  const [selectedFilter, setSelectedFilter] = useState({\n    filter: 'all',\n    isSearch: false,\n    searchTerm: null,\n    storeKey: null\n  });\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n  const { loading, data: { getFileStores: fileStores = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n  if (loading) return null;\n\n  const getSelectedFiles = (file, files) => {\n    if (simpleLayout) {\n      handleSelectedFiles(files, false);\n      setSelectedFiles(files);\n      return;\n    }\n    const { id } = file;\n    const existPreviousFile = existPrevious(selectedFiles, id);\n    if (maxItems === selectedFiles.length && !existPreviousFile) {\n      handleSelectedFiles([id], false);\n      setSelectedFiles([id]);\n    } else {\n      const allSelectedFiles = existPreviousFile\n        ? selectedFiles.filter(fileId => fileId !== existPreviousFile)\n        : [...selectedFiles, id];\n\n      handleSelectedFiles(allSelectedFiles, false);\n      setSelectedFiles(allSelectedFiles);\n    }\n  };\n\n  const handleDisplayFileUploadModal = param => setDisplayFileUploadModal(param);\n  const defaultFileStore = (fileStores.find(({ isDefault }) => isDefault) || {}).key;\n\n  return (\n    <ToastProvider>\n      <MediaContextProvider\n        value={{\n          fileStores,\n          defaultFileStore,\n          changeSelectedFilter: value => setSelectedFilter(value),\n          selectedFilter: {\n            ...selectedFilter,\n            storeKey: selectedFilter.storeKey || defaultFileStore\n          },\n          selectedFiles,\n          getSelectedFiles,\n          filters: availableFilters,\n          onClickPrompt: () => handleDisplayFileUploadModal(true)\n        }}>\n        <FilesListProvider>\n          <Listing\n            closeModalAndSetValue={closeModalAndSetValue}\n            simpleLayout={simpleLayout}\n            getSelectedFiles={getSelectedFiles}\n            setDisplayFileUploadModal={setDisplayFileUploadModal}\n            displayFileUploadModal={displayFileUploadModal}\n            handleDisplayFileUploadModal={handleDisplayFileUploadModal}\n            setSelectedFiles={setSelectedFiles}\n            handleSelectedFiles={handleSelectedFiles}\n          />\n        </FilesListProvider>\n      </MediaContextProvider>\n    </ToastProvider>\n  );\n};\n\nListingContainer.propTypes = {\n  handleSelectedFiles: PropTypes.func,\n  maxItems: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n  filesSelected: PropTypes.arrayOf(PropTypes.string),\n  simpleLayout: PropTypes.bool,\n  setDisplayFileUploadModal: PropTypes.func.isRequired,\n  displayFileUploadModal: PropTypes.bool.isRequired,\n  closeModalAndSetValue: PropTypes.func\n};\n\nListingContainer.defaultProps = {\n  closeModalAndSetValue: () => {},\n  handleSelectedFiles: () => {},\n  maxItems: false,\n  filesSelected: [],\n  simpleLayout: false\n};\n\nexport default ListingContainer;\n"],"mappings":"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","ignoreList":[]}

package/lib-es/components/MediaListing.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import ListingContainer from './ListingContainer';
+const MediaListing = ({
+  handleSelectedFiles,
+  maxItems,
+  filesSelected
+}) => {
+  const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
+  return /*#__PURE__*/React.createElement(ListingContainer, {
+    setDisplayFileUploadModal: setDisplayFileUploadModal,
+    displayFileUploadModal: displayFileUploadModal,
+    handleSelectedFiles: handleSelectedFiles,
+    filesSelected: filesSelected,
+    maxItems: maxItems
+  });
+};
+MediaListing.propTypes = {
+  handleSelectedFiles: PropTypes.func,
+  maxItems: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  filesSelected: PropTypes.arrayOf(PropTypes.string)
+};
+MediaListing.defaultProps = {
+  handleSelectedFiles: () => {},
+  maxItems: false,
+  filesSelected: []
+};
+export default MediaListing;
+//# sourceMappingURL=MediaListing.js.map

package/lib-es/components/MediaListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaListing.js","names":["React","useState","PropTypes","ListingContainer","MediaListing","handleSelectedFiles","maxItems","filesSelected","displayFileUploadModal","setDisplayFileUploadModal","createElement","propTypes","func","oneOfType","number","bool","arrayOf","string","defaultProps"],"sources":["../../src/components/MediaListing.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ListingContainer from './ListingContainer';\n\nconst MediaListing = ({ handleSelectedFiles, maxItems, filesSelected }) => {\n  const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);\n\n  return (\n    <ListingContainer\n      setDisplayFileUploadModal={setDisplayFileUploadModal}\n      displayFileUploadModal={displayFileUploadModal}\n      handleSelectedFiles={handleSelectedFiles}\n      filesSelected={filesSelected}\n      maxItems={maxItems}\n    />\n  );\n};\n\nMediaListing.propTypes = {\n  handleSelectedFiles: PropTypes.func,\n  maxItems: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n  filesSelected: PropTypes.arrayOf(PropTypes.string)\n};\n\nMediaListing.defaultProps = {\n  handleSelectedFiles: () => {},\n  maxItems: false,\n  filesSelected: []\n};\n\nexport default MediaListing;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,MAAMC,YAAY,GAAGA,CAAC;EAAEC,mBAAmB;EAAEC,QAAQ;EAAEC;AAAc,CAAC,KAAK;EACzE,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGR,QAAQ,CAAC,KAAK,CAAC;EAE3E,oBACED,KAAA,CAAAU,aAAA,CAACP,gBAAgB;IACfM,yBAAyB,EAAEA,yBAA0B;IACrDD,sBAAsB,EAAEA,sBAAuB;IAC/CH,mBAAmB,EAAEA,mBAAoB;IACzCE,aAAa,EAAEA,aAAc;IAC7BD,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAEN,CAAC;AAEDF,YAAY,CAACO,SAAS,GAAG;EACvBN,mBAAmB,EAAEH,SAAS,CAACU,IAAI;EACnCN,QAAQ,EAAEJ,SAAS,CAACW,SAAS,CAAC,CAACX,SAAS,CAACY,MAAM,EAAEZ,SAAS,CAACa,IAAI,CAAC,CAAC;EACjER,aAAa,EAAEL,SAAS,CAACc,OAAO,CAACd,SAAS,CAACe,MAAM;AACnD,CAAC;AAEDb,YAAY,CAACc,YAAY,GAAG;EAC1Bb,mBAAmB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC7BC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE;AACjB,CAAC;AAED,eAAeH,YAAY","ignoreList":[]}

package/lib-es/index.js

@@ -4,7 +4,8 @@ import EditorAdapter from './components/EditorAdapter';
 import { MediaLibraryIcon } from './icons';
 import pkg from '../package.json';
 import { PLUGIN_NAME } from './constants';
-const ListingContainer = React.lazy(() => import( /* webpackChunkName: 'MediaListingContainer' */'./components/ListingContainer'));
+export const FilePreviewReadOnly = React.lazy(() => import( /* webpackChunkName: 'MediaFilePreviewReadOnly' */'./components/FilePreviewReadOnly'));
+const MediaListing = React.lazy(() => import( /* webpackChunkName: 'MediaListingContainer' */'./components/MediaListing'));
 const EditMediaFilePage = React.lazy(() => import( /* webpackChunkName: 'EditMediaFilePage' */'./components/EditMediaFile/EditMediaFilePage'));
 export default async function load(app) {
   app.events.once('admin:menu:config:load', ({
@@ -28,6 +29,10 @@ export default async function load(app) {
       type: 'fileUpload',
       component: FileUploadAdapter
     });
+    addFieldType({
+      type: 'filePreview',
+      component: FilePreviewReadOnly
+    });
     addFieldType({
       type: 'editor',
       component: EditorAdapter
@@ -36,7 +41,7 @@ export default async function load(app) {
   const mediaRoute = {
     path: '/media',
     key: 'media',
-    component: ListingContainer,
+    component: MediaListing,
     exact: true
   };
   const editMediaFileRoute = {

package/lib-es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","FileUploadAdapter","EditorAdapter","MediaLibraryIcon","pkg","PLUGIN_NAME","ListingContainer","lazy","EditMediaFilePage","load","app","events","once","addConfig","main","items","media","label","uri","icon","order","addFieldType","type","component","mediaRoute","path","key","exact","editMediaFileRoute","addRoute","name","version","pluginName"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport FileUploadAdapter from './components/FileUploadAdapter';\nimport EditorAdapter from './components/EditorAdapter';\nimport { MediaLibraryIcon } from './icons';\nimport pkg from '../package.json';\nimport { PLUGIN_NAME } from './constants';\n\nconst ListingContainer = React.lazy(() =>\n  import(/* webpackChunkName: 'MediaListingContainer' */ './components/ListingContainer')\n);\n\nconst EditMediaFilePage = React.lazy(() =>\n  import(/* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage')\n);\nexport default async function load(app) {\n  app.events.once('admin:menu:config:load', ({ addConfig }) => {\n    addConfig({\n      main: {\n        items: {\n          media: {\n            label: 'Media',\n            uri: '/media',\n            icon: MediaLibraryIcon,\n            order: 30\n          }\n        }\n      }\n    });\n  });\n\n  app.events.once('load:custom:field:type', addFieldType => {\n    addFieldType({ type: 'fileUpload', component: FileUploadAdapter });\n    addFieldType({ type: 'editor', component: EditorAdapter });\n  });\n\n  const mediaRoute = {\n    path: '/media',\n    key: 'media',\n    component: ListingContainer,\n    exact: true\n  };\n\n  const editMediaFileRoute = {\n    path: '/media/edit/:fileId',\n    key: 'editMedia',\n    component: EditMediaFilePage,\n    exact: true\n  };\n\n  app.addRoute(mediaRoute);\n  app.addRoute(editMediaFileRoute);\n\n  return {\n    name: PLUGIN_NAME,\n    version: pkg.version\n  };\n}\n\nload.pluginName = PLUGIN_NAME;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAASC,gBAAgB,QAAQ,SAAS;AAC1C,OAAOC,GAAG,MAAM,iBAAiB;AACjC,SAASC,WAAW,QAAQ,aAAa;AAEzC,MAAMC,gBAAgB,GAAGN,KAAK,CAACO,IAAI,CAAC,MAClC,MAAM,EAAC,+CAAgD,+BAA+B,CACxF,CAAC;AAED,MAAMC,iBAAiB,GAAGR,KAAK,CAACO,IAAI,CAAC,MACnC,MAAM,EAAC,2CAA4C,8CAA8C,CACnG,CAAC;AACD,eAAe,eAAeE,IAAIA,CAACC,GAAG,EAAE;EACtCA,GAAG,CAACC,MAAM,CAACC,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAAEC;EAAU,CAAC,KAAK;IAC3DA,SAAS,CAAC;MACRC,IAAI,EAAE;QACJC,KAAK,EAAE;UACLC,KAAK,EAAE;YACLC,KAAK,EAAE,OAAO;YACdC,GAAG,EAAE,QAAQ;YACbC,IAAI,EAAEhB,gBAAgB;YACtBiB,KAAK,EAAE;UACT;QACF;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEFV,GAAG,CAACC,MAAM,CAACC,IAAI,CAAC,wBAAwB,EAAES,YAAY,IAAI;IACxDA,YAAY,CAAC;MAAEC,IAAI,EAAE,YAAY;MAAEC,SAAS,EAAEtB;IAAkB,CAAC,CAAC;IAClEoB,YAAY,CAAC;MAAEC,IAAI,EAAE,QAAQ;MAAEC,SAAS,EAAErB;IAAc,CAAC,CAAC;EAC5D,CAAC,CAAC;EAEF,MAAMsB,UAAU,GAAG;IACjBC,IAAI,EAAE,QAAQ;IACdC,GAAG,EAAE,OAAO;IACZH,SAAS,EAAEjB,gBAAgB;IAC3BqB,KAAK,EAAE;EACT,CAAC;EAED,MAAMC,kBAAkB,GAAG;IACzBH,IAAI,EAAE,qBAAqB;IAC3BC,GAAG,EAAE,WAAW;IAChBH,SAAS,EAAEf,iBAAiB;IAC5BmB,KAAK,EAAE;EACT,CAAC;EAEDjB,GAAG,CAACmB,QAAQ,CAACL,UAAU,CAAC;EACxBd,GAAG,CAACmB,QAAQ,CAACD,kBAAkB,CAAC;EAEhC,OAAO;IACLE,IAAI,EAAEzB,WAAW;IACjB0B,OAAO,EAAE3B,GAAG,CAAC2B;EACf,CAAC;AACH;AAEAtB,IAAI,CAACuB,UAAU,GAAG3B,WAAW","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","FileUploadAdapter","EditorAdapter","MediaLibraryIcon","pkg","PLUGIN_NAME","FilePreviewReadOnly","lazy","MediaListing","EditMediaFilePage","load","app","events","once","addConfig","main","items","media","label","uri","icon","order","addFieldType","type","component","mediaRoute","path","key","exact","editMediaFileRoute","addRoute","name","version","pluginName"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport FileUploadAdapter from './components/FileUploadAdapter';\nimport EditorAdapter from './components/EditorAdapter';\nimport { MediaLibraryIcon } from './icons';\nimport pkg from '../package.json';\nimport { PLUGIN_NAME } from './constants';\n\nexport const FilePreviewReadOnly = React.lazy(() =>\n  import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')\n);\n\nconst MediaListing = React.lazy(() =>\n  import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')\n);\n\nconst EditMediaFilePage = React.lazy(() =>\n  import(/* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage')\n);\nexport default async function load(app) {\n  app.events.once('admin:menu:config:load', ({ addConfig }) => {\n    addConfig({\n      main: {\n        items: {\n          media: {\n            label: 'Media',\n            uri: '/media',\n            icon: MediaLibraryIcon,\n            order: 30\n          }\n        }\n      }\n    });\n  });\n\n  app.events.once('load:custom:field:type', addFieldType => {\n    addFieldType({ type: 'fileUpload', component: FileUploadAdapter });\n    addFieldType({ type: 'filePreview', component: FilePreviewReadOnly });\n    addFieldType({ type: 'editor', component: EditorAdapter });\n  });\n\n  const mediaRoute = {\n    path: '/media',\n    key: 'media',\n    component: MediaListing,\n    exact: true\n  };\n\n  const editMediaFileRoute = {\n    path: '/media/edit/:fileId',\n    key: 'editMedia',\n    component: EditMediaFilePage,\n    exact: true\n  };\n\n  app.addRoute(mediaRoute);\n  app.addRoute(editMediaFileRoute);\n\n  return {\n    name: PLUGIN_NAME,\n    version: pkg.version\n  };\n}\n\nload.pluginName = PLUGIN_NAME;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAASC,gBAAgB,QAAQ,SAAS;AAC1C,OAAOC,GAAG,MAAM,iBAAiB;AACjC,SAASC,WAAW,QAAQ,aAAa;AAEzC,OAAO,MAAMC,mBAAmB,GAAGN,KAAK,CAACO,IAAI,CAAC,MAC5C,MAAM,EAAC,kDAAmD,kCAAkC,CAC9F,CAAC;AAED,MAAMC,YAAY,GAAGR,KAAK,CAACO,IAAI,CAAC,MAC9B,MAAM,EAAC,+CAAgD,2BAA2B,CACpF,CAAC;AAED,MAAME,iBAAiB,GAAGT,KAAK,CAACO,IAAI,CAAC,MACnC,MAAM,EAAC,2CAA4C,8CAA8C,CACnG,CAAC;AACD,eAAe,eAAeG,IAAIA,CAACC,GAAG,EAAE;EACtCA,GAAG,CAACC,MAAM,CAACC,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAAEC;EAAU,CAAC,KAAK;IAC3DA,SAAS,CAAC;MACRC,IAAI,EAAE;QACJC,KAAK,EAAE;UACLC,KAAK,EAAE;YACLC,KAAK,EAAE,OAAO;YACdC,GAAG,EAAE,QAAQ;YACbC,IAAI,EAAEjB,gBAAgB;YACtBkB,KAAK,EAAE;UACT;QACF;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEFV,GAAG,CAACC,MAAM,CAACC,IAAI,CAAC,wBAAwB,EAAES,YAAY,IAAI;IACxDA,YAAY,CAAC;MAAEC,IAAI,EAAE,YAAY;MAAEC,SAAS,EAAEvB;IAAkB,CAAC,CAAC;IAClEqB,YAAY,CAAC;MAAEC,IAAI,EAAE,aAAa;MAAEC,SAAS,EAAElB;IAAoB,CAAC,CAAC;IACrEgB,YAAY,CAAC;MAAEC,IAAI,EAAE,QAAQ;MAAEC,SAAS,EAAEtB;IAAc,CAAC,CAAC;EAC5D,CAAC,CAAC;EAEF,MAAMuB,UAAU,GAAG;IACjBC,IAAI,EAAE,QAAQ;IACdC,GAAG,EAAE,OAAO;IACZH,SAAS,EAAEhB,YAAY;IACvBoB,KAAK,EAAE;EACT,CAAC;EAED,MAAMC,kBAAkB,GAAG;IACzBH,IAAI,EAAE,qBAAqB;IAC3BC,GAAG,EAAE,WAAW;IAChBH,SAAS,EAAEf,iBAAiB;IAC5BmB,KAAK,EAAE;EACT,CAAC;EAEDjB,GAAG,CAACmB,QAAQ,CAACL,UAAU,CAAC;EACxBd,GAAG,CAACmB,QAAQ,CAACD,kBAAkB,CAAC;EAEhC,OAAO;IACLE,IAAI,EAAE1B,WAAW;IACjB2B,OAAO,EAAE5B,GAAG,CAAC4B;EACf,CAAC;AACH;AAEAtB,IAAI,CAACuB,UAAU,GAAG5B,WAAW","ignoreList":[]}

package/lib-es/utils/media-context/media-context.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const MediaContext = React.createContext();
+const MediaContext = React.createContext({});
 const MediaContextProvider = MediaContext.Provider;
 const MediaContextConsumer = MediaContext.Consumer;
 export { MediaContext, MediaContextProvider, MediaContextConsumer };

package/lib-es/utils/media-context/media-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-context.js","names":["React","MediaContext","createContext","MediaContextProvider","Provider","MediaContextConsumer","Consumer"],"sources":["../../../src/utils/media-context/media-context.js"],"sourcesContent":["import React from 'react';\n\nconst MediaContext = React.createContext();\nconst MediaContextProvider = MediaContext.Provider;\nconst MediaContextConsumer = MediaContext.Consumer;\n\nexport { MediaContext, MediaContextProvider, MediaContextConsumer };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,CAAC;AAC1C,MAAMC,oBAAoB,GAAGF,YAAY,CAACG,QAAQ;AAClD,MAAMC,oBAAoB,GAAGJ,YAAY,CAACK,QAAQ;AAElD,SAASL,YAAY,EAAEE,oBAAoB,EAAEE,oBAAoB","ignoreList":[]}
+{"version":3,"file":"media-context.js","names":["React","MediaContext","createContext","MediaContextProvider","Provider","MediaContextConsumer","Consumer"],"sources":["../../../src/utils/media-context/media-context.js"],"sourcesContent":["import React from 'react';\n\nconst MediaContext = React.createContext({});\nconst MediaContextProvider = MediaContext.Provider;\nconst MediaContextConsumer = MediaContext.Consumer;\n\nexport { MediaContext, MediaContextProvider, MediaContextConsumer };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAMC,oBAAoB,GAAGF,YAAY,CAACG,QAAQ;AAClD,MAAMC,oBAAoB,GAAGJ,YAAY,CAACK,QAAQ;AAElD,SAASL,YAAY,EAAEE,oBAAoB,EAAEE,oBAAoB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-media-ui",
-  "version": "0.146.0-alpha.2",
+  "version": "0.146.0-alpha.22",
   "description": "Blaze plugin media ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,10 +27,10 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "^0.141.0",
+    "@blaze-cms/admin-ui-utils": "0.146.0-alpha.17",
     "@blaze-cms/core-errors": "^0.140.3",
-    "@blaze-cms/plugin-search-ui": "^0.144.0",
-    "@blaze-cms/react-form-builder": "0.146.0-alpha.2",
+    "@blaze-cms/plugin-search-ui": "0.146.0-alpha.17",
+    "@blaze-cms/react-form-builder": "0.146.0-alpha.17",
     "@blaze-cms/setup-ui": "^0.140.3",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/drafteditor": "0.7.0",
@@ -44,7 +44,7 @@
     "react-tiny-virtual-list": "2.2.0"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "^0.144.0"
+    "@blaze-cms/core-ui": "0.146.0-alpha.17"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
@@ -57,5 +57,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "842784a53445ec45f5f49c9417b980d352e3a2b7"
+  "gitHead": "862fa49df29cc762e340adcf0dabbacc77625606"
 }

package/src/components/FilePreview/Actions/index.js

@@ -14,20 +14,24 @@ const Actions = ({ file }) => {
           <span>{extension}</span>
         </div>
         <div>
-          <div
-            data-testid={`open-media-library-${file.id}`}
-            className="FilePreviewItem__info__actionsIcon material-icons edit"
-            aria-hidden="true"
-            onClick={() => handleEditModal(file)}>
-            <i className="fas fa-pen fa-xs" />
-          </div>
-          <div
-            data-testid={`unselect-${file.id}`}
-            className="FilePreviewItem__info__actionsIcon material-icons delete"
-            aria-hidden="true"
-            onClick={() => onUnselectFile([file.id])}>
-            <i className="fas fa-trash fa-xs" />
-          </div>
+          {handleEditModal && (
+            <div
+              data-testid={`open-media-library-${file.id}`}
+              className="FilePreviewItem__info__actionsIcon material-icons edit"
+              aria-hidden="true"
+              onClick={() => handleEditModal(file)}>
+              <i className="fas fa-pen fa-xs" />
+            </div>
+          )}
+          {onUnselectFile && (
+            <div
+              data-testid={`unselect-${file.id}`}
+              className="FilePreviewItem__info__actionsIcon material-icons delete"
+              aria-hidden="true"
+              onClick={() => onUnselectFile([file.id])}>
+              <i className="fas fa-trash fa-xs" />
+            </div>
+          )}
         </div>
       </div>
     </>

package/src/components/FilePreviewReadOnly/FileList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FilePreviewList from './FilePreviewList';
+
+const FileList = ({ selectedFiles, children }) => (
+  <>
+    <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
+  </>
+);
+
+FileList.propTypes = {
+  selectedFiles: PropTypes.array.isRequired,
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])
+};
+
+FileList.defaultProps = {
+  children: []
+};
+
+export default FileList;

package/src/components/FilePreviewReadOnly/FilePreviewList.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FilePreview from '../FilePreview';
+
+const FilePreviewList = ({ selectedFiles, children }) => (
+  <div className="FileUploadAdapter__preview">
+    {selectedFiles.map(file => (
+      <FilePreview key={file.id} file={file} previewType={FilePreview.availablePreviewTypes.raw} />
+    ))}
+    {children}
+  </div>
+);
+
+FilePreviewList.propTypes = {
+  selectedFiles: PropTypes.array.isRequired,
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])
+};
+
+FilePreviewList.defaultProps = {
+  children: []
+};
+
+export default FilePreviewList;

package/src/components/FilePreviewReadOnly/FilePreviewReadOnly.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useApolloClient } from '@apollo/client';
+import { getQuery } from '@blaze-cms/admin-ui-utils';
+import FileList from './FileList';
+import { formatInitialValue } from './mappers';
+
+const FilePreviewReadOnly = ({ label, id, type, value }) => {
+  const initialValue = formatInitialValue({ value, type });
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const client = useApolloClient();
+
+  const getFiles = async (offset, ids) => {
+    const {
+      data: { files: newFiles }
+    } = await client.query({
+      query: getQuery('GET_FILES'),
+      variables: {
+        offset,
+        where: {
+          id: {
+            _in: ids
+          }
+        }
+      },
+      skip: !initialValue.length,
+      fetchPolicy: 'network-only'
+    });
+    return newFiles;
+  };
+
+  useEffect(
+    () => {
+      (async () => {
+        const files = await getFiles(0, initialValue);
+        const orderedFiles = orderFiles(files, initialValue);
+        setSelectedFiles(orderedFiles);
+      })();
+    },
+    [] //eslint-disable-line
+  );
+
+  const orderFiles = (files, ids) =>
+    ids.map(currentId => files.find(({ id: fileId }) => fileId === currentId)).filter(Boolean);
+
+  return (
+    <>
+      <div className="form-field form-field--button">
+        <label>{label}</label>
+        {selectedFiles && (
+          <>
+            <FileList selectedFiles={selectedFiles} />
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+FilePreviewReadOnly.propTypes = {
+  label: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+};
+
+FilePreviewReadOnly.defaultProps = {
+  value: ''
+};
+
+export default FilePreviewReadOnly;

package/src/components/FilePreviewReadOnly/index.js

@@ -0,0 +1,3 @@
+import FilePreviewReadOnly from './FilePreviewReadOnly';
+
+export default FilePreviewReadOnly;

package/src/components/FilePreviewReadOnly/mappers/format-initial-value.js

@@ -0,0 +1,8 @@
+const formatInitialValue = ({ value, type }) => {
+  const parsedValue = value && type === 'array' ? value : [value];
+  const existValue = parsedValue.filter(Boolean).length;
+  if (!parsedValue || !existValue) return [];
+  return parsedValue;
+};
+
+export { formatInitialValue };

package/src/components/FilePreviewReadOnly/mappers/index.js

@@ -0,0 +1,3 @@
+import { formatInitialValue } from './format-initial-value';
+
+export { formatInitialValue };