74 |
78 | Settings:
79 |
80 |
81 |
91 |
102 |
119 |
120 |
133 |
134 |
144 |
154 |
164 |
174 |
184 |
185 |
186 |
187 |
195 |
196 |
204 |
212 |
213 |
221 |
229 |
230 |
231 |
232 |
233 |
236 |
244 |
252 |
260 |
268 |
269 |
270 | )
271 | }
272 |
273 | export default Settings
274 |
--------------------------------------------------------------------------------
/components/state.js:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useReducer } from 'react'
2 | export const StateContext = createContext()
3 |
4 | const initialState = {
5 | select: 3,
6 | rewind: true,
7 | direction: 'horizontal',
8 | showElements: 1,
9 | slideBy: 1,
10 | pauseOnMouseOver: true,
11 | stopOnInteraction: true,
12 | keyboard: true,
13 | dragging: true,
14 | dragDistance: 100,
15 | autoPlayInterval: 3000,
16 | width: '100%',
17 | proportion: '2:1',
18 | clamp: true,
19 | mass: 1,
20 | tension: 170,
21 | friction: 26
22 | }
23 |
24 | const reducer = (state, action) => {
25 | switch (action.type) {
26 | case 'select': return { ...state, select: action.value }
27 | case 'proportion': return { ...state, proportion: action.value }
28 | case 'direction': return { ...state, direction: action.value }
29 | case 'rewind': return { ...state, rewind: action.value }
30 | case 'pauseOnMouseOver': return { ...state, pauseOnMouseOver: action.value }
31 | case 'stopOnInteraction': return { ...state, stopOnInteraction: action.value }
32 | case 'keyboard': return { ...state, keyboard: action.value }
33 | case 'dragging': return { ...state, dragging: action.value }
34 | case 'dragDistance': return { ...state, dragDistance: action.value }
35 | case 'autoPlayInterval': return { ...state, autoPlayInterval: action.value }
36 | case 'width': return { ...state, width: action.value }
37 | case 'height': return { ...state, height: action.value }
38 | case 'clamp': return { ...state, clamp: action.value }
39 | case 'mass': return { ...state, mass: action.value }
40 | case 'tension': return { ...state, tension: action.value }
41 | case 'friction': return { ...state, friction: action.value }
42 | case 'showElements': return { ...state, showElements: action.value }
43 | case 'slideBy': return { ...state, slideBy: action.value }
44 | default: return state
45 | }
46 | }
47 |
48 | export const StateProvider = ({ children }) => (
49 |