Refactoring code v2
This commit is contained in:
parent
7ecfe54766
commit
04e311b0cc
|
@ -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'/>
|
||||||
|
|
|
@ -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'/>
|
||||||
|
|
|
@ -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'/>
|
||||||
|
|
|
@ -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'/>
|
||||||
|
|
Loading…
Reference in a new issue