Refactoring code v2
This commit is contained in:
parent
7ecfe54766
commit
04e311b0cc
|
@ -9,18 +9,11 @@ const AddTable = props => {
|
|||
|
||||
const storeTableSettings = props.storeTableSettings;
|
||||
const styles = storeTableSettings.arrayStyles;
|
||||
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [styles]);
|
||||
|
||||
return (
|
||||
<div className={'table-styles dataview'}>
|
||||
<ul className="row">
|
||||
{stateLoaderSkeleton ?
|
||||
{!styles.length ?
|
||||
Array.from({ length: 70 }).map((item,index) => (
|
||||
<li className='skeleton-list' key={index}>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||
|
|
|
@ -177,23 +177,16 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
|
|||
const tableObject = storeFocusObjects.tableObject;
|
||||
const styleId = tableObject && tableObject.get_TableStyle();
|
||||
const [stateId, setId] = useState(styleId);
|
||||
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
|
||||
const styles = storeTableSettings.arrayStyles;
|
||||
|
||||
useEffect(() => {
|
||||
if(!styles.length) onGetTableStylesPreviews();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [styles]);
|
||||
|
||||
return (
|
||||
<div className="dataview table-styles">
|
||||
<ul className="row">
|
||||
{ stateLoaderSkeleton ?
|
||||
{ !styles.length ?
|
||||
Array.from({ length: 27 }).map((item,index) => (
|
||||
<li className='skeleton-list' key={index}>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||
|
|
|
@ -10,20 +10,13 @@ const PageTable = props => {
|
|||
const _t = t('View.Add', {returnObjects: true});
|
||||
const storeTableSettings = props.storeTableSettings;
|
||||
const styles = storeTableSettings.arrayStyles;
|
||||
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [styles]);
|
||||
|
||||
return (
|
||||
<Page id={'add-table'}>
|
||||
<Navbar title={_t.textTable} backLink={_t.textBack}/>
|
||||
<div className={'table-styles dataview'}>
|
||||
<ul className="row">
|
||||
{stateLoaderSkeleton ?
|
||||
{!styles.length ?
|
||||
Array.from({ length: 70 }).map((item,index) => (
|
||||
<li className='skeleton-list' key={index}>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||
|
|
|
@ -11,19 +11,12 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
|
|||
const tableObject = storeFocusObjects.tableObject;
|
||||
const styleId = tableObject ? tableObject.get_TableStyle() : null;
|
||||
const [stateId, setId] = useState(styleId);
|
||||
const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true);
|
||||
const styles = storeTableSettings.arrayStyles;
|
||||
|
||||
useEffect(() => {
|
||||
if(!styles.length) setTimeout(() => onGetTableStylesPreviews(), 1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
|
||||
|
||||
}, [styles]);
|
||||
|
||||
if (!tableObject && Device.phone) {
|
||||
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
||||
return null;
|
||||
|
@ -32,7 +25,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
|
|||
return (
|
||||
<div className="dataview table-styles">
|
||||
<ul className="row">
|
||||
{ stateLoaderSkeleton ?
|
||||
{ !styles.length ?
|
||||
Array.from({ length: 34 }).map((item,index) => (
|
||||
<li className='skeleton-list' key={index}>
|
||||
<SkeletonBlock width='70px' height='8px' effect='wave'/>
|
||||
|
|
Loading…
Reference in a new issue