From 23ea984b32b89e20019067500d429672075d6857 Mon Sep 17 00:00:00 2001 From: kimcoder Date: Fri, 12 Feb 2021 17:58:26 +0900 Subject: [PATCH 1/5] Updates --- App.tsx | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++ images/1.jpg | Bin 0 -> 123440 bytes images/2.jpg | Bin 0 -> 126814 bytes images/3.jpg | Bin 0 -> 173479 bytes images/4.jpg | Bin 0 -> 464919 bytes images/5.jpg | Bin 0 -> 201846 bytes images/6.jpg | Bin 0 -> 75362 bytes images/7.jpg | Bin 0 -> 143495 bytes index.html | 14 ++++ index.js | 45 +++++++++++++ mobile.html | 14 ++++ 11 files changed, 251 insertions(+) create mode 100644 App.tsx create mode 100644 images/1.jpg create mode 100644 images/2.jpg create mode 100644 images/3.jpg create mode 100644 images/4.jpg create mode 100644 images/5.jpg create mode 100644 images/6.jpg create mode 100644 images/7.jpg create mode 100644 index.html create mode 100644 index.js create mode 100644 mobile.html diff --git a/App.tsx b/App.tsx new file mode 100644 index 0000000..7df7690 --- /dev/null +++ b/App.tsx @@ -0,0 +1,178 @@ +import React, { useCallback, useState } from 'react'; +import ReactDOM from 'react-dom'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import AppBar from '@material-ui/core/AppBar'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Checkbox from '@material-ui/core/Checkbox'; +import FormControl from '@material-ui/core/FormControl'; +import InputLabel from '@material-ui/core/InputLabel'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import SimpleImageSlider from '../dist'; + +const IMAGES = [ + { url: 'images/1.jpg' }, + { url: 'images/2.jpg' }, + { url: 'images/3.jpg' }, + { url: 'images/4.jpg' }, + { url: 'images/5.jpg' }, + { url: 'images/6.jpg' }, + { url: 'images/7.jpg' } +]; + +type SliderOptions = { + useGPURender: boolean; + showNavs: boolean; + showBullets: boolean; + navStyle: 1 | 2; + duration: number; + bgColor: string; +}; + +const App: React.FC = () => { + const [sliderOptions, setSliderOptions] = useState({ + useGPURender: true, + showNavs: true, + showBullets: true, + navStyle: 1, + duration: 0.5, + bgColor: '#000' + }); + + const [slideIndexText, setSlideIndexText] = useState(''); + + const onClick = useCallback((idx: number, event: React.SyntheticEvent) => { + console.log(`[App onClick] ${idx} ${event.currentTarget}`); + }, []); + + const onClickNav = useCallback((toRight: boolean) => { + console.log(`[App onClickNav] ${toRight}`); + }, []); + + const onClickBullets = useCallback((idx: number) => { + console.log(`[App onClickBullets] ${idx}`); + }, []); + + const onStartSlide = useCallback((idx: number, length: number) => { + console.log(`[App onStartSlide] ${idx}/${length}`); + setSlideIndexText(`${idx} / ${length}`); + }, []); + + const onCompleteSlide = useCallback((idx: number, length: number) => { + console.log(`[App onCompleteSlide] ${idx}/${length}`); + setSlideIndexText(`${idx} / ${length}`); + }, []); + + const updateOptions = useCallback( + (key: string, value: boolean | number | string) => () => { + console.log(`[App updateOptions] ${key} ${value}`); + switch (key) { + case 'useGPURender': + setSliderOptions({ ...sliderOptions, useGPURender: value as boolean }); + break; + case 'showNavs': + setSliderOptions({ ...sliderOptions, showNavs: value as boolean }); + break; + case 'showBullets': + setSliderOptions({ ...sliderOptions, showBullets: value as boolean }); + break; + case 'navStyle': + setSliderOptions({ ...sliderOptions, navStyle: value as 1 | 2 }); + break; + case 'duration': + setSliderOptions({ ...sliderOptions, duration: value as number }); + break; + case 'bgColor': + setSliderOptions({ ...sliderOptions, bgColor: value as string }); + break; + } + }, + [sliderOptions] + ); + + const onChangeSelect = useCallback( + (event: React.ChangeEvent<{ name?: string; value: string | number }>) => { + event.target.name && updateOptions(event.target.name, event.target.value)(); + }, + [updateOptions] + ); + + return ( +

+ + +

React Simple Image Slider Example

+

simple image slider component for react

+