Refactoring code v2

This commit is contained in:
ShimaginAndrey 2021-10-18 10:17:49 +03:00
parent 7ecfe54766
commit 04e311b0cc
4 changed files with 4 additions and 32 deletions

View file

@ -9,18 +9,11 @@ const AddTable = props => {
const storeTableSettings = props.storeTableSettings; const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
useEffect(() => {
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [styles]);
return ( return (
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <ul className="row">
{stateLoaderSkeleton ? {!styles.length ?
Array.from({ length: 70 }).map((item,index) => ( Array.from({ length: 70 }).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'/>

View file

@ -177,23 +177,16 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
const tableObject = storeFocusObjects.tableObject; const tableObject = storeFocusObjects.tableObject;
const styleId = tableObject && tableObject.get_TableStyle(); const styleId = tableObject && tableObject.get_TableStyle();
const [stateId, setId] = useState(styleId); const [stateId, setId] = useState(styleId);
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
useEffect(() => { useEffect(() => {
if(!styles.length) onGetTableStylesPreviews(); if(!styles.length) onGetTableStylesPreviews();
}, []); }, []);
useEffect(() => {
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [styles]);
return ( return (
<div className="dataview table-styles"> <div className="dataview table-styles">
<ul className="row"> <ul className="row">
{ stateLoaderSkeleton ? { !styles.length ?
Array.from({ length: 27 }).map((item,index) => ( Array.from({ length: 27 }).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'/>

View file

@ -10,20 +10,13 @@ const PageTable = props => {
const _t = t('View.Add', {returnObjects: true}); const _t = t('View.Add', {returnObjects: true});
const storeTableSettings = props.storeTableSettings; const storeTableSettings = props.storeTableSettings;
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
useEffect(() => {
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [styles]);
return ( return (
<Page id={'add-table'}> <Page id={'add-table'}>
<Navbar title={_t.textTable} backLink={_t.textBack}/> <Navbar title={_t.textTable} backLink={_t.textBack}/>
<div className={'table-styles dataview'}> <div className={'table-styles dataview'}>
<ul className="row"> <ul className="row">
{stateLoaderSkeleton ? {!styles.length ?
Array.from({ length: 70 }).map((item,index) => ( Array.from({ length: 70 }).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'/>

View file

@ -11,19 +11,12 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
const tableObject = storeFocusObjects.tableObject; const tableObject = storeFocusObjects.tableObject;
const styleId = tableObject ? tableObject.get_TableStyle() : null; const styleId = tableObject ? tableObject.get_TableStyle() : null;
const [stateId, setId] = useState(styleId); const [stateId, setId] = useState(styleId);
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
const styles = storeTableSettings.arrayStyles; const styles = storeTableSettings.arrayStyles;
useEffect(() => { useEffect(() => {
if(!styles.length) setTimeout(() => onGetTableStylesPreviews(), 1); if(!styles.length) setTimeout(() => onGetTableStylesPreviews(), 1);
}, []); }, []);
useEffect(() => {
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
}, [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();
return null; return null;
@ -32,7 +25,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
return ( return (
<div className="dataview table-styles"> <div className="dataview table-styles">
<ul className="row"> <ul className="row">
{ stateLoaderSkeleton ? { !styles.length ?
Array.from({ length: 34 }).map((item,index) => ( Array.from({ length: 34 }).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'/>