mirror of https://github.com/mue/mue.git
fix: translation display bug, marketplace error, cleanup carousel
This commit is contained in:
parent
bf1723e63c
commit
6a0722a697
|
@ -1,5 +1,6 @@
|
||||||
# Directories
|
# Directories
|
||||||
node_modules/
|
node_modules/
|
||||||
|
.history/
|
||||||
.vscode/
|
.vscode/
|
||||||
build/
|
build/
|
||||||
.idea/
|
.idea/
|
||||||
|
|
|
@ -1,39 +1,47 @@
|
||||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||||
import { PrevButton, NextButton } from './CarouselButtons';
|
import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
|
||||||
import useEmblaCarousel from 'embla-carousel-react';
|
import useEmblaCarousel from 'embla-carousel-react';
|
||||||
import Autoplay from 'embla-carousel-autoplay';
|
import Autoplay from 'embla-carousel-autoplay';
|
||||||
import './carousel.scss';
|
|
||||||
import { FaPhotoVideo } from 'react-icons/fa';
|
|
||||||
|
|
||||||
const EmblaCarousel = ({ data, options = { loop: false } }) => {
|
import './carousel.scss';
|
||||||
|
|
||||||
|
export default function EmblaCarousel({ data }) {
|
||||||
const autoplay = useRef(
|
const autoplay = useRef(
|
||||||
Autoplay({ delay: 3000, stopOnInteraction: false }, (emblaRoot) => emblaRoot.parentElement),
|
Autoplay({ delay: 3000, stopOnInteraction: false }, (emblaRoot) => emblaRoot.parentElement),
|
||||||
);
|
);
|
||||||
|
|
||||||
const [emblaRef, emblaApi] = useEmblaCarousel(options, [autoplay.current]);
|
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [autoplay.current]);
|
||||||
const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
|
const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
|
||||||
const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
|
const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
|
||||||
|
|
||||||
const scrollNext = useCallback(() => {
|
const scroll = useCallback(
|
||||||
if (!emblaApi) return;
|
(direction) => {
|
||||||
emblaApi.scrollNext();
|
if (!emblaApi) {
|
||||||
autoplay.current.reset();
|
return;
|
||||||
}, [emblaApi]);
|
}
|
||||||
|
|
||||||
const scrollPrev = useCallback(() => {
|
if (direction === 'next') {
|
||||||
if (!emblaApi) return;
|
emblaApi.scrollNext();
|
||||||
emblaApi.scrollPrev();
|
} else {
|
||||||
autoplay.current.reset();
|
emblaApi.scrollPrev();
|
||||||
}, [emblaApi]);
|
}
|
||||||
|
autoplay.current.reset();
|
||||||
|
},
|
||||||
|
[emblaApi],
|
||||||
|
);
|
||||||
|
|
||||||
const onSelect = useCallback(() => {
|
const onSelect = useCallback(() => {
|
||||||
if (!emblaApi) return;
|
if (!emblaApi) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
setPrevBtnEnabled(emblaApi.canScrollPrev());
|
setPrevBtnEnabled(emblaApi.canScrollPrev());
|
||||||
setNextBtnEnabled(emblaApi.canScrollNext());
|
setNextBtnEnabled(emblaApi.canScrollNext());
|
||||||
}, [emblaApi]);
|
}, [emblaApi]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!emblaApi) return;
|
if (!emblaApi) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
onSelect();
|
onSelect();
|
||||||
emblaApi.on('select', onSelect);
|
emblaApi.on('select', onSelect);
|
||||||
}, [emblaApi, onSelect]);
|
}, [emblaApi, onSelect]);
|
||||||
|
@ -45,16 +53,32 @@ const EmblaCarousel = ({ data, options = { loop: false } }) => {
|
||||||
{data.map((photo, index) => (
|
{data.map((photo, index) => (
|
||||||
<div className="embla__slide" key={index}>
|
<div className="embla__slide" key={index}>
|
||||||
<div className="embla__slide__inner">
|
<div className="embla__slide__inner">
|
||||||
<img className="embla__slide__img" src={photo.url.default} alt="A cool cat." />
|
<img
|
||||||
|
className="embla__slide__img"
|
||||||
|
src={photo.url.default}
|
||||||
|
alt="Marketplace example screenshot"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<PrevButton onClick={scrollPrev} enabled={prevBtnEnabled} />
|
<button
|
||||||
<NextButton onClick={scrollNext} enabled={nextBtnEnabled} />
|
className="embla__button embla__button--prev"
|
||||||
|
onClick={() => scroll('prev')}
|
||||||
|
disabled={!prevBtnEnabled}
|
||||||
|
title="Previous"
|
||||||
|
>
|
||||||
|
<MdOutlineArrowBackIos />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="embla__button embla__button--next"
|
||||||
|
onClick={() => scroll('next')}
|
||||||
|
disabled={!nextBtnEnabled}
|
||||||
|
title="Next"
|
||||||
|
>
|
||||||
|
<MdOutlineArrowForwardIos />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default EmblaCarousel;
|
|
||||||
|
|
|
@ -1,14 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
|
|
||||||
|
|
||||||
export const PrevButton = ({ enabled, onClick }) => (
|
|
||||||
<button className="embla__button embla__button--prev" onClick={onClick} disabled={!enabled}>
|
|
||||||
<MdOutlineArrowBackIos />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const NextButton = ({ enabled, onClick }) => (
|
|
||||||
<button className="embla__button embla__button--next" onClick={onClick} disabled={!enabled}>
|
|
||||||
<MdOutlineArrowForwardIos />
|
|
||||||
</button>
|
|
||||||
);
|
|
|
@ -122,7 +122,7 @@ export default class TimeSettings extends PureComponent {
|
||||||
category="weather"
|
category="weather"
|
||||||
/>
|
/>
|
||||||
</SettingsItem>
|
</SettingsItem>
|
||||||
{localStorage.getItem('weatherType') == 4 && (
|
{localStorage.getItem('weatherType') === 4 && (
|
||||||
<SettingsItem title="Custom Settings">
|
<SettingsItem title="Custom Settings">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
name="weatherdescription"
|
name="weatherdescription"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { createRoot } from 'react-dom/client';
|
import { render } from 'react-dom';
|
||||||
import * as Sentry from '@sentry/react';
|
import * as Sentry from '@sentry/react';
|
||||||
|
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
@ -40,7 +40,7 @@ variables.language = new I18n(variables.languagecode, {
|
||||||
tr_TR: translations.tr_TR,
|
tr_TR: translations.tr_TR,
|
||||||
});
|
});
|
||||||
|
|
||||||
variables.getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
variables.getMessage = (text, optional) => variables.language.getMessage(variables.languagecode, text, optional || {});
|
||||||
|
|
||||||
// set html language tag
|
// set html language tag
|
||||||
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
||||||
|
@ -61,4 +61,4 @@ Sentry.init({
|
||||||
autoSessionTracking: false,
|
autoSessionTracking: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(<App />);
|
render(<App />, document.getElementById('root'));
|
||||||
|
|
Loading…
Reference in New Issue