| 1 | {"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { Spring, animated } from 'react-spring'\nimport { springs } from '../../style'\nimport { useTheme } from '../../theme'\nimport { unselectable } from '../../utils'\n\nconst BAR_HEIGHT = 6\nconst HANDLE_SIZE = 24\nconst HANDLE_SHADOW_MARGIN = 15\nconst PADDING = 5\nconst MIN_WIDTH = HANDLE_SIZE * 10\nconst HEIGHT = Math.max(HANDLE_SIZE, BAR_HEIGHT) + PADDING * 2\n\n// The check on window.DOMRect is needed for the JSDOM environment, which has\n// window but not window.DOMRect. JSDOM is used by default in Jest.\nconst DEFAULT_RECT =\n typeof window === 'undefined' || typeof window.DOMRect !== 'function'\n ? { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 }\n : new window.DOMRect()\n\nclass Slider extends React.Component {\n static propTypes = {\n value: PropTypes.number,\n onUpdate: PropTypes.func,\n theme: PropTypes.object,\n }\n static defaultProps = {\n value: 0,\n onUpdate: () => {},\n }\n state = {\n pressed: false,\n }\n componentWillUnmount() {\n this.dragStop()\n }\n handleRef = element => {\n this._mainElement = element\n this._document = element && element.ownerDocument\n }\n getRect = () => {\n const now = Date.now()\n\n // Cache the rect if the last poll was less than a second ago\n if (this._lastRect && now - this._lastRectTime < 1000) {\n return this._lastRect\n }\n\n this._lastRectTime = now\n this._lastRect = this._mainElement\n ? this._mainElement.getBoundingClientRect()\n : DEFAULT_RECT\n\n return this._lastRect\n }\n clientXFromEvent(event) {\n return (event.touches ? event.touches.item(0) : event).clientX\n }\n updateValueFromClientX(clientX) {\n const rect = this.getRect()\n const x = Math.min(rect.width, Math.max(0, clientX - rect.x))\n this.props.onUpdate(x / rect.width)\n }\n dragStart = event => {\n this.dragStop()\n const clientX = this.clientXFromEvent(event)\n this.setState({ pressed: true }, () => {\n this.updateValueFromClientX(clientX)\n })\n this._document.addEventListener('mouseup', this.dragStop)\n this._document.addEventListener('touchend', this.dragStop)\n this._document.addEventListener('mousemove', this.dragMove)\n this._document.addEventListener('touchmove', this.dragMove)\n }\n dragStop = () => {\n this.setState({ pressed: false })\n this._document.removeEventListener('mouseup', this.dragStop)\n this._document.removeEventListener('touchend', this.dragStop)\n this._document.removeEventListener('mousemove', this.dragMove)\n this._document.removeEventListener('touchmove', this.dragMove)\n }\n dragMove = event => {\n if (!this.state.pressed) {\n return\n }\n\n this.updateValueFromClientX(this.clientXFromEvent(event))\n }\n getHandleStyles(pressProgress) {\n return {\n transform: pressProgress.interpolate(\n t => `translate3d(0, calc(${t * 0.5}px - 50%), 0)`\n ),\n boxShadow: pressProgress.interpolate(\n t => `0 1px 3px rgba(0, 0, 0, ${0.1 - 0.02 * t})`\n ),\n background: pressProgress.interpolate(\n t => `hsl(0, 0%, ${100 * (1 - t * 0.01)}%)`\n ),\n }\n }\n getHandlePositionStyles(value) {\n return {\n transform: value.interpolate(\n t => `translate3d(calc(${t * 100}% + ${HANDLE_SHADOW_MARGIN}px), 0, 0)`\n ),\n }\n }\n getActiveBarStyles(value, pressProgress) {\n return {\n transform: value.interpolate(t => `scaleX(${t}) translateZ(0)`),\n }\n }\n render() {\n const { pressed } = this.state\n const { onUpdate, value, theme, ...props } = this.props\n return (\n <Spring\n native\n config={springs.swift}\n to={{\n pressProgress: Number(pressed),\n value: Math.max(0, Math.min(1, value)),\n }}\n >\n {({ value, pressProgress }) => (\n <div\n css={`\n min-width: ${MIN_WIDTH}px;\n padding: 0 ${HANDLE_SIZE / 2 + PADDING}px;\n ${unselectable};\n `}\n {...props}\n >\n <div\n ref={this.handleRef}\n onMouseDown={this.dragStart}\n onTouchStart={this.dragStart}\n css={`\n position: relative;\n height: ${HEIGHT}px;\n cursor: pointer;\n `}\n >\n <Bars>\n <Bar\n css={`\n background: ${theme.surfaceUnder};\n `}\n />\n <Bar\n style={this.getActiveBarStyles(value, pressProgress)}\n css={`\n transform-origin: 0 0;\n background: ${theme.selected};\n `}\n />\n </Bars>\n\n <HandleClip>\n <HandlePosition\n style={this.getHandlePositionStyles(value, pressProgress)}\n >\n <animated.div\n style={this.getHandleStyles(pressProgress)}\n css={`\n position: absolute;\n top: 50%;\n left: 0;\n width: ${HANDLE_SIZE}px;\n height: ${HANDLE_SIZE}px;\n border: 1px solid ${theme.border};\n border-radius: 50%;\n cursor: pointer;\n pointer-events: auto;\n `}\n />\n </HandlePosition>\n </HandleClip>\n </div>\n </div>\n )}\n </Spring>\n )\n }\n}\n\nconst Bars = styled(animated.div)`\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n overflow: hidden;\n border-radius: 2px;\n height: ${BAR_HEIGHT}px;\n`\n\nconst Bar = styled(animated.div)`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n`\n\nconst HandleClip = styled.div`\n pointer-events: none;\n overflow: hidden;\n width: calc(100% + ${HANDLE_SIZE + HANDLE_SHADOW_MARGIN * 2}px);\n height: calc(100% + ${HANDLE_SHADOW_MARGIN * 2}px);\n transform-origin: 50% 50%;\n transform: translate(\n -${HANDLE_SIZE / 2 + HANDLE_SHADOW_MARGIN}px,\n -${HANDLE_SHADOW_MARGIN}px\n );\n`\n\nconst HandlePosition = styled(animated.div)`\n width: calc(100% - ${HANDLE_SIZE + HANDLE_SHADOW_MARGIN * 2}px);\n height: 100%;\n transform-origin: 50% 50%;\n`\n\nexport default props => {\n const theme = useTheme()\n return <Slider theme={theme} {...props} />\n}\n"],"names":["BAR_HEIGHT","HANDLE_SIZE","HANDLE_SHADOW_MARGIN","PADDING","MIN_WIDTH","HEIGHT","Math","max","DEFAULT_RECT","window","DOMRect","x","y","width","height","top","right","bottom","left","unselectable","Slider","pressed","element","_mainElement","_document","ownerDocument","now","Date","_lastRect","_lastRectTime","getBoundingClientRect","event","dragStop","clientX","clientXFromEvent","setState","updateValueFromClientX","addEventListener","dragMove","removeEventListener","state","touches","item","rect","getRect","min","props","onUpdate","pressProgress","transform","interpolate","t","boxShadow","background","value","theme","React","Spring","springs","swift","Number","handleRef","dragStart","surfaceUnder","getActiveBarStyles","selected","getHandlePositionStyles","getHandleStyles","border","Component","PropTypes","number","func","object","Bars","styled","animated","div","Bar","HandleClip","HandlePosition","useTheme"],"mappings":"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"} |