@@ -2,44 +2,157 @@ import React from "react";
22import ReactDOM from "react-dom" ;
33import CssBaseline from "@material-ui/core/CssBaseline" ;
44import AppBar from "@material-ui/core/AppBar" ;
5- import ImageSlider from ".." ;
5+ import List from "@material-ui/core/List" ;
6+ import ListItem from "@material-ui/core/ListItem" ;
7+ import ListItemText from "@material-ui/core/ListItemText" ;
8+ import ListSubheader from "@material-ui/core/ListSubheader" ;
9+ import Checkbox from "@material-ui/core/Checkbox" ;
10+ import FormControl from "@material-ui/core/FormControl" ;
11+ import InputLabel from "@material-ui/core/InputLabel" ;
12+ import MenuItem from "@material-ui/core/MenuItem" ;
13+ import Select from "@material-ui/core/Select" ;
14+ import SimpleImageSlider from ".." ;
615
7- // https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
816class App extends React . Component {
917 constructor ( ) {
1018 super ( ) ;
11- console . log ( "[App constructor]" ) ;
12- this . state = { } ;
19+ this . state = {
20+ useGPURender : true ,
21+ showNavs : true ,
22+ showBullets : true ,
23+ navStyle : 1 ,
24+ slideDuration : 0.5 ,
25+ bgColor : "#000000" ,
26+ slideIndexText : "" ,
27+ } ;
1328 }
1429
1530 componentDidMount ( ) {
1631 console . log ( "[App componentDidMount]" ) ;
1732 }
1833
19- static getDerivedStateFromProps ( props , state ) {
20- console . log ( "[App getDerivedStateFromProps]" ) ;
21- return null ;
34+ componentDidUpdate ( prevProps , prevState , snapshot ) {
35+ console . log ( "[App componentDidUpdate]" ) ;
2236 }
2337
24- getSnapshotBeforeUpdate ( prevProps , prevState ) {
25- console . log ( " [App getSnapshotBeforeUpdate]" ) ;
38+ onClickNav = ( toRight ) => {
39+ console . log ( ` [App onClickNav] ${ toRight } ` ) ;
2640 }
2741
28- componentDidUpdate ( prevProps , prevState , snapshot ) {
29- console . log ( "[App componentDidUpdate]" ) ;
42+ onClickBullets = ( idx ) => {
43+ console . log ( `[App onClickBullets] ${ idx } ) ;
44+ }
45+
46+ onStartSlide = ( idx , length ) => {
47+ console . log ( `[App onStartSlide] ${ idx } ${ length } ) ;
48+ this . setState ( { slideIndexText : `${ idx } ${ length } } ) ;
49+ }
50+
51+ onCompleteSlide = ( idx , length ) => {
52+ console . log ( `[App onCompleteSlide] ${ idx } ${ length } ) ;
53+ this . setState ( { slideIndexText : `${ idx } ${ length } } ) ;
3054 }
3155
32- render ( ) {
56+ onToggleOptions = value => ( ) => {
57+ console . log ( `[App onToggleOptions] ${ value } ) ;
58+ const updateValue = ! this . state [ value ] ;
59+ this . setState ( { [ value ] : updateValue } ) ;
60+ }
61+
62+ onChangeSelect = event => this . setState ( { [ event . target . name ] : event . target . value } ) ;
63+
64+ render ( ) {
65+ const listSubHeader = < ListSubheader > < h1 > Slider Settings</ h1 > </ ListSubheader > ;
66+ const toggleOptions = [ "useGPURender" , "showNavs" , "showBullets" ] ;
67+ const images = [
68+ { url : "images/1.jpg" } ,
69+ { url : "images/2.jpg" } ,
70+ { url : "images/3.jpg" } ,
71+ { url : "images/4.jpg" } ,
72+ { url : "images/5.jpg" } ,
73+ { url : "images/6.jpg" } ,
74+ { url : "images/7.jpg" } ,
75+ ] ;
76+ const slideText = this . state . slideIndexText || `${ 1 } ${ images . length } ;
77+
3378 return (
34- < div style = { { textAlign : "center" } } >
35- < CssBaseline />
36- < AppBar position = "stickey" style = { { height : 100 , textAlign : "center" } } >
37- < h1 > Image Slider Example</ h1 >
79+ < div style = { { textAlign : "center" } } >
80+ < CssBaseline />
81+ < AppBar style = { { position : "relative" , height : 140 , textAlign : "center" } } >
82+ < h1 style = { { marginBottom : 5 } } > React Simple Image Slider Example</ h1 >
83+ < p > simple image slider component for react</ p >
84+ < div >
85+ < iframe
86+ title = "git icon"
87+ src = "https://ghbtns.com/github-btn.html?user=kimcoder& repo = react - simple-image-slider & type = star "
88+ frameBorder=" 0 "
89+ width = "51px"
90+ height = "30px"
91+ />
92+ </ div >
3893 </ AppBar >
39- < ImageSlider />
40- </ div >
41- ) ;
42- }
94+ < SimpleImageSlider
95+ style = { { margin : "0 auto" , marginTop : "50px" } }
96+ width = { 896 }
97+ height = { 504 }
98+ images = { images }
99+ showBullets = { this . state . showBullets }
100+ showNavs = { this . state . showNavs }
101+ useGPURender = { this . state . useGPURender }
102+ navStyle = { this . state . navStyle }
103+ slideDuration = { this . state . slideDuration }
104+ onClickNav = { this . onClickNav }
105+ onClickBullets = { this . onClickBullets }
106+ onStartSlide = { this . onStartSlide }
107+ onCompleteSlide = { this . onCompleteSlide }
108+ />
109+
110+ < div style = { { margin : "10px" } } >
111+ { slideText }
112+ </ div >
113+
114+ {
115+ // Slide Settings
116+ }
117+ < List subheader = { listSubHeader } style = { { margin : "0 auto 100px auto" , width : 900 , textAlign : "left" } } >
118+ { toggleOptions . map ( value => (
119+ < ListItem key = { value } button onClick = { this . onToggleOptions ( value ) } >
120+ < Checkbox checked = { this . state [ value ] } disableRipple />
121+ < ListItemText primary = { `${ value } } />
122+ </ ListItem >
123+ ) ) }
124+ < ListItem >
125+ < FormControl component = "fieldset" >
126+ < InputLabel > NavStyle</ InputLabel >
127+ < Select
128+ value = { this . state . navStyle }
129+ onChange = { this . onChangeSelect }
130+ inputProps = { { name : "navStyle" } }
131+ >
132+ < MenuItem value = { 1 } > 1</ MenuItem >
133+ < MenuItem value = { 2 } > 2</ MenuItem >
134+ </ Select >
135+ </ FormControl >
136+ </ ListItem >
137+ < ListItem >
138+ < FormControl >
139+ < InputLabel > slideDuration</ InputLabel >
140+ < Select
141+ value = { this . state . slideDuration }
142+ onChange = { this . onChangeSelect }
143+ inputProps = { { name : "slideDuration" } }
144+ >
145+ < MenuItem value = { 0.3 } > 0.3</ MenuItem >
146+ < MenuItem value = { 0.5 } > 0.5</ MenuItem >
147+ < MenuItem value = { 0.7 } > 0.9</ MenuItem >
148+ < MenuItem value = { 1.2 } > 1.2</ MenuItem >
149+ </ Select >
150+ </ FormControl >
151+ </ ListItem >
152+ </ List >
153+ </ div >
154+ ) ;
155+ }
43156}
44157
45- ReactDOM . render ( < App /> , document . getElementById ( "App" ) ) ;
158+ ReactDOM . render ( < App /> , document . getElementById ( "App" ) ) ;
0 commit comments