From 73a12bc5a98f95b3145fac4914a07f2a6e95d736 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <sergey.ezhin@onlyoffice.com>
Date: Fri, 20 Oct 2023 09:50:19 +0200
Subject: [PATCH] [SSE mobile] Fix Bug 57730

---
 .../mobile/src/view/edit/EditCell.jsx         | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
index 9643ec66fa..86dcf4c315 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 const EditCell = props => {
     const isAndroid = Device.android;
@@ -145,25 +146,23 @@ const PageCellStyle = props => {
                 }
             </Navbar>
             {cellStyles && cellStyles.length ? (
-                <div className="swiper-container swiper-init" data-pagination='{"el": ".swiper-pagination"}'>
-                    <div className="swiper-wrapper">
-                        {arraySlides.map((_, indexSlide) => {
-                            let stylesSlide = cellStyles.slice(indexSlide * countStylesSlide, (indexSlide * countStylesSlide) + countStylesSlide);
-                            
-                            return (
-                                <div className="swiper-slide" key={indexSlide}>
-                                    <List className="cell-styles-list">
-                                        {stylesSlide.map((elem, index) => (
-                                            <ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
-                                                <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
-                                            </ListItem> 
-                                        ))}
-                                    </List>
-                                </div>
-                        )})}
-                    </div>
-                    <div className="swiper-pagination"></div>
-                </div>
+                <Swiper pagination={true}>
+                    {arraySlides.map((_, indexSlide) => {
+                        let stylesSlide = cellStyles.slice(indexSlide * countStylesSlide, (indexSlide * countStylesSlide) + countStylesSlide);
+                        
+                        return (
+                            <SwiperSlide>
+                                <List className="cell-styles-list">
+                                    {stylesSlide.map((elem, index) => (
+                                        <ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
+                                            <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
+                                        </ListItem> 
+                                    ))}
+                                </List>
+                            </SwiperSlide>
+                        )
+                    })}
+                </Swiper>
             ) : null}
         </Page>
     )