Refactoring code
This commit is contained in:
parent
63667a9c6d
commit
ceb58327fb
|
@ -9,9 +9,7 @@ export class storeTableSettings {
|
|||
cellBorderWidth: observable,
|
||||
cellBorderColor: observable,
|
||||
arrayStyles: observable,
|
||||
isRenderStyles:observable,
|
||||
initTableTemplates: action,
|
||||
resetFlagRender: action,
|
||||
setStyles: action,
|
||||
updateCellBorderWidth: action,
|
||||
updateCellBorderColor: action,
|
||||
|
@ -20,14 +18,9 @@ export class storeTableSettings {
|
|||
|
||||
_templates = [];
|
||||
arrayStyles = [];
|
||||
isRenderStyles;
|
||||
|
||||
resetFlagRender (bool) {
|
||||
this.isRenderStyles = bool;
|
||||
}
|
||||
|
||||
initTableTemplates () {
|
||||
this.isRenderStyles = true;
|
||||
this.arrayStyles = [];
|
||||
}
|
||||
|
||||
setStyles (arrStyles) {
|
||||
|
|
|
@ -184,12 +184,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
|
|||
|
||||
const onGetTableStylesPreviews = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
if(storeTableSettings.isRenderStyles) {
|
||||
setTimeout(() => {
|
||||
storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
|
||||
storeTableSettings.resetFlagRender(false);
|
||||
},5);
|
||||
}
|
||||
setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 5);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -13,15 +13,15 @@ const AddTable = props => {
|
|||
|
||||
useEffect(() => {
|
||||
|
||||
if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [storeTableSettings.isRenderStyles]);
|
||||
}, [styles]);
|
||||
|
||||
return (
|
||||
<div className={'table-styles dataview'}>
|
||||
<ul className="row">
|
||||
{stateLoaderSkeleton ?
|
||||
Array.from({ length: 31 }).map((item,index) => (
|
||||
Array.from({ length: 41 }).map((item,index) => (
|
||||
<li className='skeleton-list' key={index}>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||
|
|
|
@ -181,17 +181,14 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
|
|||
const styles = storeTableSettings.arrayStyles;
|
||||
|
||||
useEffect(() => {
|
||||
if (storeTableSettings.isRenderStyles) {
|
||||
onGetTableStylesPreviews();
|
||||
setTimeout(() => storeTableSettings.resetFlagRender(false), 0);
|
||||
}
|
||||
if(!styles.length) onGetTableStylesPreviews();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [storeTableSettings.isRenderStyles]);
|
||||
}, [styles]);
|
||||
|
||||
return (
|
||||
<div className="dataview table-styles">
|
||||
|
@ -225,8 +222,6 @@ const PageStyleOptions = props => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
const tableObject = props.storeFocusObjects.tableObject;
|
||||
const nextStateRef = useRef();
|
||||
const prevStateRef = useRef();
|
||||
|
||||
let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
|
||||
if (tableObject) {
|
||||
|
@ -238,20 +233,8 @@ const PageStyleOptions = props => {
|
|||
isLastCol = tableLook.get_LastCol();
|
||||
isBandVer = tableLook.get_BandVer();
|
||||
}
|
||||
|
||||
nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
|
||||
|
||||
useEffect(() => {
|
||||
prevStateRef.current = [...nextStateRef.current];
|
||||
|
||||
}, []);
|
||||
|
||||
const openIndicator = () => {
|
||||
if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
|
||||
props.onGetTableStylesPreviews();
|
||||
}
|
||||
setTimeout(() => props.storeTableSettings.resetFlagRender(false), 10);
|
||||
}
|
||||
const openIndicator = () => props.onGetTableStylesPreviews();
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
|
@ -94,12 +94,7 @@ class AddOtherController extends Component {
|
|||
|
||||
onGetTableStylesPreviews = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
if(this.props.storeTableSettings.isRenderStyles) {
|
||||
setTimeout(() => {
|
||||
this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true));
|
||||
this.props.storeTableSettings.resetFlagRender(false);
|
||||
},5);
|
||||
}
|
||||
setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 5);
|
||||
}
|
||||
|
||||
hideAddComment () {
|
||||
|
|
|
@ -9,9 +9,7 @@ export class storeTableSettings {
|
|||
cellBorderWidth: observable,
|
||||
cellBorderColor: observable,
|
||||
arrayStyles: observable,
|
||||
isRenderStyles:observable,
|
||||
initTableTemplates: action,
|
||||
resetFlagRender: action,
|
||||
setStyles: action,
|
||||
updateCellBorderWidth: action,
|
||||
updateCellBorderColor: action,
|
||||
|
@ -20,14 +18,9 @@ export class storeTableSettings {
|
|||
|
||||
_templates = [];
|
||||
arrayStyles = [];
|
||||
isRenderStyles;
|
||||
|
||||
resetFlagRender (bool) {
|
||||
this.isRenderStyles = bool;
|
||||
}
|
||||
|
||||
initTableTemplates () {
|
||||
this.isRenderStyles = true;
|
||||
this.arrayStyles = [];
|
||||
}
|
||||
|
||||
setStyles (arrStyles) {
|
||||
|
|
|
@ -14,9 +14,9 @@ const PageTable = props => {
|
|||
|
||||
useEffect(() => {
|
||||
|
||||
if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [storeTableSettings.isRenderStyles]);
|
||||
}, [styles]);
|
||||
|
||||
return (
|
||||
<Page id={'add-table'}>
|
||||
|
@ -24,7 +24,7 @@ const PageTable = props => {
|
|||
<div className={'table-styles dataview'}>
|
||||
<ul className="row">
|
||||
{stateLoaderSkeleton ?
|
||||
Array.from({ length: 31 }).map((item,index) => (
|
||||
Array.from({ length: 41 }).map((item,index) => (
|
||||
<li className='skeleton-list' key={index}>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave' />
|
||||
|
|
|
@ -15,19 +15,14 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
|
|||
const styles = storeTableSettings.arrayStyles;
|
||||
|
||||
useEffect(() => {
|
||||
if (storeTableSettings.isRenderStyles) {
|
||||
setTimeout(() => {
|
||||
onGetTableStylesPreviews();
|
||||
storeTableSettings.resetFlagRender(false);
|
||||
},0);
|
||||
}
|
||||
if(!styles.length) setTimeout(() => onGetTableStylesPreviews(), 1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [storeTableSettings.isRenderStyles]);
|
||||
}, [styles]);
|
||||
|
||||
if (!tableObject && Device.phone) {
|
||||
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
||||
|
@ -65,8 +60,6 @@ const PageStyleOptions = props => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const tableObject = props.storeFocusObjects.tableObject;
|
||||
const nextStateRef = useRef();
|
||||
const prevStateRef = useRef();
|
||||
|
||||
let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
|
||||
if (tableObject) {
|
||||
|
@ -79,18 +72,7 @@ const PageStyleOptions = props => {
|
|||
isBandVer = tableLook.get_BandVer();
|
||||
}
|
||||
|
||||
nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
|
||||
|
||||
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);
|
||||
}
|
||||
const openIndicator = () => setTimeout(() => props.onGetTableStylesPreviews(), 1);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
Loading…
Reference in a new issue