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
|
||||
node_modules/
|
||||
.history/
|
||||
.vscode/
|
||||
build/
|
||||
.idea/
|
||||
|
|
|
@ -1,39 +1,47 @@
|
|||
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 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(
|
||||
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 [nextBtnEnabled, setNextBtnEnabled] = useState(false);
|
||||
|
||||
const scrollNext = useCallback(() => {
|
||||
if (!emblaApi) return;
|
||||
emblaApi.scrollNext();
|
||||
autoplay.current.reset();
|
||||
}, [emblaApi]);
|
||||
const scroll = useCallback(
|
||||
(direction) => {
|
||||
if (!emblaApi) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollPrev = useCallback(() => {
|
||||
if (!emblaApi) return;
|
||||
emblaApi.scrollPrev();
|
||||
autoplay.current.reset();
|
||||
}, [emblaApi]);
|
||||
if (direction === 'next') {
|
||||
emblaApi.scrollNext();
|
||||
} else {
|
||||
emblaApi.scrollPrev();
|
||||
}
|
||||
autoplay.current.reset();
|
||||
},
|
||||
[emblaApi],
|
||||
);
|
||||
|
||||
const onSelect = useCallback(() => {
|
||||
if (!emblaApi) return;
|
||||
if (!emblaApi) {
|
||||
return;
|
||||
}
|
||||
setPrevBtnEnabled(emblaApi.canScrollPrev());
|
||||
setNextBtnEnabled(emblaApi.canScrollNext());
|
||||
}, [emblaApi]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
if (!emblaApi) {
|
||||
return;
|
||||
}
|
||||
onSelect();
|
||||
emblaApi.on('select', onSelect);
|
||||
}, [emblaApi, onSelect]);
|
||||
|
@ -45,16 +53,32 @@ const EmblaCarousel = ({ data, options = { loop: false } }) => {
|
|||
{data.map((photo, index) => (
|
||||
<div className="embla__slide" key={index}>
|
||||
<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>
|
||||
<PrevButton onClick={scrollPrev} enabled={prevBtnEnabled} />
|
||||
<NextButton onClick={scrollNext} enabled={nextBtnEnabled} />
|
||||
<button
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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"
|
||||
/>
|
||||
</SettingsItem>
|
||||
{localStorage.getItem('weatherType') == 4 && (
|
||||
{localStorage.getItem('weatherType') === 4 && (
|
||||
<SettingsItem title="Custom Settings">
|
||||
<Checkbox
|
||||
name="weatherdescription"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { createRoot } from 'react-dom/client';
|
||||
import { render } from 'react-dom';
|
||||
import * as Sentry from '@sentry/react';
|
||||
|
||||
import App from './App';
|
||||
|
@ -40,7 +40,7 @@ variables.language = new I18n(variables.languagecode, {
|
|||
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
|
||||
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
||||
|
@ -61,4 +61,4 @@ Sentry.init({
|
|||
autoSessionTracking: false,
|
||||
});
|
||||
|
||||
createRoot(document.getElementById('root')).render(<App />);
|
||||
render(<App />, document.getElementById('root'));
|
||||
|
|
Loading…
Reference in New Issue