выбор загруженных

package.json

 {
     "name": "react-ag-qeditor",
-    "version": "1.1.44",
+    "version": "1.1.45",
     "description": "WYSIWYG html editor",
     "author": "atma",
     "license": "MIT",

src/QEditor.jsx

@@ -139,6 +139,9 @@ const QEditor = ({
     const [buttonLinkData, setButtonLinkData] = useState(defaultButtonLinkData)
     const [suggestedFiles, setSuggestedFiles] = useState([])
     const [suggestedLoading, setSuggestedLoading] = useState(false)
+    const [suggestPage, setSuggestPage] = useState(1)
+    const [suggestTotal, setSuggestTotal] = useState(0)
+    const SUGGEST_LIMIT = 20
 
     let formRef = useRef(null);
     // eslint-disable-next-line no-unused-vars
@@ -187,23 +190,37 @@ const QEditor = ({
         file: 'file'
     }
 
+    useEffect(() => {
+        setSuggestPage(1)
+        setSuggestTotal(0)
+        setSuggestedFiles([])
+    }, [innerModalType])
+
     useEffect(() => {
         if (!modalIsOpen || !uploadOptions.suggestUrl || !SUGGEST_TYPES.includes(innerModalType)) {
             setSuggestedFiles([])
+            setSuggestTotal(0)
             return
         }
         let cancelled = false
         setSuggestedLoading(true)
-        axios.get(uploadOptions.suggestUrl, { params: { type: SUGGEST_TYPE_MAP[innerModalType] } })
+        axios.get(uploadOptions.suggestUrl, {
+            params: {
+                type: SUGGEST_TYPE_MAP[innerModalType],
+                page: suggestPage,
+                limit: SUGGEST_LIMIT
+            }
+        })
             .then(response => {
                 if (!cancelled && response.data.state === 'success' && Array.isArray(response.data.files)) {
                     setSuggestedFiles(response.data.files)
+                    setSuggestTotal(response.data.total || response.data.files.length)
                 }
             })
             .catch(() => {})
             .finally(() => { if (!cancelled) setSuggestedLoading(false) })
         return () => { cancelled = true }
-    }, [modalIsOpen, innerModalType])
+    }, [modalIsOpen, innerModalType, suggestPage])
 
     const editWord = (values) => {
 
@@ -839,12 +856,13 @@ const QEditor = ({
         if (suggestedLoading) {
             return <div className='atma-editor-suggest-loading'>Загрузка файлов...</div>
         }
-        if (suggestedFiles.length === 0) {
+        if (!suggestedLoading && suggestedFiles.length === 0) {
             return null
         }
         const isVideo = innerModalType === 'video'
         const isAudio = innerModalType === 'audio'
         const isFile = innerModalType === 'file'
+        const totalPages = Math.ceil(suggestTotal / SUGGEST_LIMIT)
         return (
             <div className='atma-editor-suggest'>
                 <div className='atma-editor-suggest-title'>Ранее загруженные файлы</div>
@@ -885,6 +903,25 @@ const QEditor = ({
                         )
                     })}
                 </div>
+                {totalPages > 1 && (
+                    <div className='atma-editor-suggest-pagination'>
+                        <button
+                            type='button'
+                            className='atma-editor-suggest-page-btn'
+                            disabled={suggestPage <= 1}
+                            onClick={() => setSuggestPage(p => p - 1)}
+                        >&#8592;</button>
+                        <span className='atma-editor-suggest-page-info'>
+                            {suggestPage} / {totalPages}
+                        </span>
+                        <button
+                            type='button'
+                            className='atma-editor-suggest-page-btn'
+                            disabled={suggestPage >= totalPages}
+                            onClick={() => setSuggestPage(p => p + 1)}
+                        >&#8594;</button>
+                    </div>
+                )}
             </div>
         )
     }
@@ -918,8 +955,8 @@ const QEditor = ({
             case 'audio':
                 return (
                     <Fragment>
-                        {getSuggestionsSection()}
                         {getUploader({accept: '.wav, .mp3, .ogg'})}
+                        {getSuggestionsSection()}
                     </Fragment>
                 )
             case 'iframe_pdf':
@@ -943,29 +980,29 @@ const QEditor = ({
             case 'video':
                 return (
                     <Fragment>
-                        {getSuggestionsSection()}
                         {getUploader({accept: 'video/mp4,.mp4'})}
+                        {getSuggestionsSection()}
                     </Fragment>
                 )
             case 'image':
                 return (
                     <Fragment>
-                        {getSuggestionsSection()}
                         {getUploader({accept: 'image/*'})}
+                        {getSuggestionsSection()}
                     </Fragment>
                 )
             case 'interactiveImage':
                 return (
                     <Fragment>
-                        {getSuggestionsSection()}
                         {getUploader({accept: 'image/*', multiple: false})}
+                        {getSuggestionsSection()}
                     </Fragment>
                 )
             case 'file':
                 return (
                     <Fragment>
-                        {getSuggestionsSection()}
                         {getUploader({accept: '*', afterParams: ['no_convert=1']})}
+                        {getSuggestionsSection()}
                     </Fragment>
                 )
             case 'buttonLink':

src/index.scss

@@ -861,16 +861,16 @@ body{
             background-position: center;
             background-repeat: no-repeat;
             cursor: pointer;
-            border: 2px solid transparent;
-            transition: border-color 0.15s;
+            box-shadow: 0 0 0 2px transparent;
+            transition: box-shadow 0.2s ease;
             overflow: hidden;
 
             &:hover{
-                border-color: #adb0b6;
+                box-shadow: 0 0 0 2px #adb0b6;
             }
 
             &.selected{
-                border-color: #1790FF;
+                box-shadow: 0 0 0 2px #1790FF;
 
                 &::after{
                     content: '';
@@ -920,6 +920,47 @@ body{
                 display: block;
             }
         }
+
+        &-pagination{
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 12px;
+        }
+
+        &-page-btn{
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            border-radius: 6px;
+            border: 1px solid #CCD1D9;
+            background: #fff;
+            cursor: pointer;
+            font-size: 14px;
+            color: #434A53;
+            transition: background 0.15s, border-color 0.15s;
+            padding: 0;
+            line-height: 1;
+
+            &:hover:not(:disabled){
+                background: #F5F7FA;
+                border-color: #adb0b6;
+            }
+
+            &:disabled{
+                opacity: 0.35;
+                cursor: default;
+            }
+        }
+
+        &-page-info{
+            font-size: 13px;
+            color: #656D77;
+            min-width: 44px;
+            text-align: center;
+        }
     }
 
     &-btn{