mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-20 19:37:27 +03:00
Make slide transitions themeable
This commit is contained in:
parent
9170140b03
commit
40757cc3b3
5
package-lock.json
generated
5
package-lock.json
generated
@ -6420,6 +6420,11 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
||||
},
|
||||
"lodash.get": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
|
||||
"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
|
||||
},
|
||||
"lodash.sortby": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
|
||||
|
@ -43,6 +43,7 @@
|
||||
"koa-webpack": "^5.1.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.get": "^4.4.2",
|
||||
"meow": "^5.0.0",
|
||||
"mini-html-webpack-plugin": "^0.2.3",
|
||||
"normalize-newline": "^3.0.0",
|
||||
|
@ -1,6 +1,11 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components'
|
||||
import get from 'lodash.get'
|
||||
|
||||
const themeable = key => props => ({
|
||||
[key]: get(props.theme, key, props[key])
|
||||
})
|
||||
|
||||
const CarouselRoot = styled.div([], {
|
||||
overflowX: 'hidden',
|
||||
@ -16,21 +21,28 @@ const CarouselInner = styled.div([], {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
transitionProperty: 'transform',
|
||||
transitionTimingFunction: 'ease-out',
|
||||
transitionDuration: '.3s',
|
||||
'@media print': {
|
||||
height: 'auto',
|
||||
display: 'block'
|
||||
}
|
||||
}, props => ({
|
||||
},
|
||||
transitionProperty: 'transform',
|
||||
},
|
||||
themeable('transitionTimingFunction'),
|
||||
themeable('transitionDuration'),
|
||||
props => ({
|
||||
transform: `translateX(${-100 * props.index}%)`
|
||||
}))
|
||||
})
|
||||
)
|
||||
|
||||
CarouselInner.propTypes = {
|
||||
index: PropTypes.number.isRequired
|
||||
}
|
||||
|
||||
CarouselInner.defaultProps = {
|
||||
transitionTimingFunction: 'ease-out',
|
||||
transitionDuration: '.3s',
|
||||
}
|
||||
|
||||
export const Carousel = props =>
|
||||
<CarouselRoot>
|
||||
<CarouselInner {...props} />
|
||||
|
Loading…
Reference in New Issue
Block a user