Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refactoring code

Browse source
This commit is contained in:
ShimaginAndrey 2021-10-15 10:41:19 +03:00
parent 63667a9c6d
commit ceb58327fb
8 changed files with 18 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/documenteditor/mobile/src/store/tableSettings.js
View file

@ -9,9 +9,7 @@ export class storeTableSettings {
cellBorderWidth: observable, cellBorderWidth: observable,
cellBorderColor: observable, cellBorderColor: observable,
arrayStyles: observable, arrayStyles: observable,
isRenderStyles:observable,
initTableTemplates: action, initTableTemplates: action,
resetFlagRender: action,
setStyles: action, setStyles: action,
updateCellBorderWidth: action, updateCellBorderWidth: action,
updateCellBorderColor: action, updateCellBorderColor: action,
@ -20,14 +18,9 @@ export class storeTableSettings {
_templates = []; _templates = [];
arrayStyles = []; arrayStyles = [];
isRenderStyles;
resetFlagRender (bool) {
this.isRenderStyles = bool;
}
initTableTemplates () { initTableTemplates () {
this.isRenderStyles = true; this.arrayStyles = [];
} }
setStyles (arrStyles) { setStyles (arrStyles) {

7
apps/documenteditor/mobile/src/view/add/Add.jsx
View file

@ -184,12 +184,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
const onGetTableStylesPreviews = () => { const onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if(storeTableSettings.isRenderStyles) { setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 5);
setTimeout(() => {
storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
storeTableSettings.resetFlagRender(false);
},5);
}
} }
return ( return (

6
apps/documenteditor/mobile/src/view/add/AddTable.jsx
View file

@ -13,15 +13,15 @@ const AddTable = props => {
useEffect(() => { useEffect(() => {
if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false); !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]); }, [styles]);
return ( return (
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <ul className="row">
{stateLoaderSkeleton ? {stateLoaderSkeleton ?
Array.from({ length: 31 }).map((item,index) => ( Array.from({ length: 41 }).map((item,index) => (
<li className='skeleton-list' key={index}> <li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/> <SkeletonBlock width='70px' height='8px' effect='wave'/>
<SkeletonBlock width='70px' height='8px' effect='wave' /> <SkeletonBlock width='70px' height='8px' effect='wave' />

25
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View file

@ -181,17 +181,14 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
useEffect(() => { useEffect(() => {
if (storeTableSettings.isRenderStyles) { if(!styles.length) onGetTableStylesPreviews();
onGetTableStylesPreviews();
setTimeout(() => storeTableSettings.resetFlagRender(false), 0);
}
}, []); }, []);
useEffect(() => { useEffect(() => {
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false); !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]); }, [styles]);
return ( return (
<div className="dataview table-styles"> <div className="dataview table-styles">
@ -225,8 +222,6 @@ const PageStyleOptions = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true}); const _t = t('Edit', {returnObjects: true});
const tableObject = props.storeFocusObjects.tableObject; const tableObject = props.storeFocusObjects.tableObject;
const nextStateRef = useRef();
const prevStateRef = useRef();
let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer; let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
if (tableObject) { if (tableObject) {
@ -238,20 +233,8 @@ const PageStyleOptions = props => {
isLastCol = tableLook.get_LastCol(); isLastCol = tableLook.get_LastCol();
isBandVer = tableLook.get_BandVer(); isBandVer = tableLook.get_BandVer();
} }
nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
useEffect(() => { const openIndicator = () => props.onGetTableStylesPreviews();
prevStateRef.current = [...nextStateRef.current];
}, []);
const openIndicator = () => {
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
props.onGetTableStylesPreviews();
}
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 10);
}
return ( return (
<Page> <Page>

7
apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
View file

@ -94,12 +94,7 @@ class AddOtherController extends Component {
onGetTableStylesPreviews = () => { onGetTableStylesPreviews = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if(this.props.storeTableSettings.isRenderStyles) { setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 5);
setTimeout(() => {
this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
this.props.storeTableSettings.resetFlagRender(false);
},5);
}
} }
hideAddComment () { hideAddComment () {

9
apps/presentationeditor/mobile/src/store/tableSettings.js
View file

@ -9,9 +9,7 @@ export class storeTableSettings {
cellBorderWidth: observable, cellBorderWidth: observable,
cellBorderColor: observable, cellBorderColor: observable,
arrayStyles: observable, arrayStyles: observable,
isRenderStyles:observable,
initTableTemplates: action, initTableTemplates: action,
resetFlagRender: action,
setStyles: action, setStyles: action,
updateCellBorderWidth: action, updateCellBorderWidth: action,
updateCellBorderColor: action, updateCellBorderColor: action,
@ -20,14 +18,9 @@ export class storeTableSettings {
_templates = []; _templates = [];
arrayStyles = []; arrayStyles = [];
isRenderStyles;
resetFlagRender (bool) {
this.isRenderStyles = bool;
}
initTableTemplates () { initTableTemplates () {
this.isRenderStyles = true; this.arrayStyles = [];
} }
setStyles (arrStyles) { setStyles (arrStyles) {

6
apps/presentationeditor/mobile/src/view/add/AddOther.jsx
View file

@ -14,9 +14,9 @@ const PageTable = props => {
useEffect(() => { useEffect(() => {
if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false); !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]); }, [styles]);
return ( return (
<Page id={'add-table'}> <Page id={'add-table'}>
@ -24,7 +24,7 @@ const PageTable = props => {
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <ul className="row">
{stateLoaderSkeleton ? {stateLoaderSkeleton ?
Array.from({ length: 31 }).map((item,index) => ( Array.from({ length: 41 }).map((item,index) => (
<li className='skeleton-list' key={index}> <li className='skeleton-list' key={index}>
<SkeletonBlock width='70px' height='8px' effect='wave'/> <SkeletonBlock width='70px' height='8px' effect='wave'/>
<SkeletonBlock width='70px' height='8px' effect='wave' /> <SkeletonBlock width='70px' height='8px' effect='wave' />

26
apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
View file

@ -15,19 +15,14 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
useEffect(() => { useEffect(() => {
if (storeTableSettings.isRenderStyles) { if(!styles.length) setTimeout(() => onGetTableStylesPreviews(), 1);
setTimeout(() => {
onGetTableStylesPreviews();
storeTableSettings.resetFlagRender(false);
},0);
}
}, []); }, []);
useEffect(() => { useEffect(() => {
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false); !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [storeTableSettings.isRenderStyles]); }, [styles]);
if (!tableObject && Device.phone) { if (!tableObject && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -65,8 +60,6 @@ const PageStyleOptions = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const tableObject = props.storeFocusObjects.tableObject; const tableObject = props.storeFocusObjects.tableObject;
const nextStateRef = useRef();
const prevStateRef = useRef();
let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer; let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
if (tableObject) { if (tableObject) {
@ -79,18 +72,7 @@ const PageStyleOptions = props => {
isBandVer = tableLook.get_BandVer(); isBandVer = tableLook.get_BandVer();
} }
nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer]; const openIndicator = () => setTimeout(() => props.onGetTableStylesPreviews(), 1);
useEffect(() => {
prevStateRef.current = [...nextStateRef.current];
}, []);
const openIndicator = () => {
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
setTimeout (() => props.onGetTableStylesPreviews(),0);
}
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 0);
}
return ( return (
<Page> <Page>