Merge pull request #1258 from streetmix/louh/css-transform

Remove `system.cssTransform`
streetmix · Apr 13, 2019 · c0fe3b9 · c0fe3b9
2 parents cccf4ac + 07cbf84
commit c0fe3b9
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/assets/scripts/app/SkyBackground.jsx b/assets/scripts/app/SkyBackground.jsx
@@ -9,7 +9,6 @@ class SkyBackground extends React.PureComponent {
   static propTypes = {
     scrollPos: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
-    system: PropTypes.object.isRequired,
     environment: PropTypes.string.isRequired
   }
 
@@ -37,32 +36,37 @@ class SkyBackground extends React.PureComponent {
     this.currentBackgroundEl.current.classList.add('sky-transition-in')
   }
 
-  updateStreetSkyBackground = (isFront, scrollPos) => {
+  transformSkyBackground = (isFront, scrollPos) => {
     let style = ''
+
     if (isFront) {
       const frontPos = -scrollPos * 0.5
       style = 'translateX(' + frontPos + 'px)'
     } else {
       const rearPos = -scrollPos * 0.25
       style = 'translateX(' + rearPos + 'px)'
     }
-    return style
+
+    return {
+      WebkitTransform: style,
+      transform: style
+    }
   }
 
   render () {
-    const { height, scrollPos, system, environment } = this.props
+    const { height, scrollPos, environment } = this.props
     const environs = getEnvirons(environment)
     const prevEnvirons = getEnvirons(this.state.prevEnvirons)
 
     const skyStyle = {
       height: `${height}px`
     }
     const frontCloudStyle = {
-      [system.cssTransform]: this.updateStreetSkyBackground(true, scrollPos),
+      ...this.transformSkyBackground(true, scrollPos),
       opacity: environs.cloudOpacity || null
     }
     const rearCloudStyle = {
-      [system.cssTransform]: this.updateStreetSkyBackground(false, scrollPos),
+      ...this.transformSkyBackground(false, scrollPos),
       opacity: environs.cloudOpacity || null
     }
 
@@ -102,7 +106,6 @@ class SkyBackground extends React.PureComponent {
 
 function mapStateToProps (state) {
   return {
-    system: state.system,
     environment: state.street.environment
   }
 }

diff --git a/assets/scripts/segments/Segment.jsx b/assets/scripts/segments/Segment.jsx
@@ -47,7 +47,6 @@ export class Segment extends React.Component {
     updatePerspective: PropTypes.func,
 
     // Provided by store
-    cssTransform: PropTypes.string,
     locale: PropTypes.string,
     infoBubbleHovered: PropTypes.bool,
     descriptionVisible: PropTypes.bool,
@@ -235,13 +234,15 @@ export class Segment extends React.Component {
 
     const actualWidth = this.calculateSegmentWidths(RESIZE_TYPE_INITIAL)
     const elementWidth = actualWidth * TILE_SIZE
+    const translate = 'translateX(' + this.props.segmentPos + 'px)'
 
     const segmentStyle = {
       width: elementWidth + 'px',
       // In a street, certain segments have stacking priority over others (expressed as z-index).
       // Setting a z-index here will clobber a separate z-index (applied via CSS) when hovered by mouse pointer
       zIndex: (this.props.isDragging) ? 0 : segmentInfo.zIndex,
-      [this.props.cssTransform]: 'translateX(' + this.props.segmentPos + 'px)'
+      WebkitTransform: translate,
+      transform: translate
     }
 
     const dataAttributes = {
@@ -310,7 +311,6 @@ export class Segment extends React.Component {
 
 function mapStateToProps (state) {
   return {
-    cssTransform: state.system.cssTransform,
     locale: state.locale.locale,
     infoBubbleHovered: state.infoBubble.mouseInside,
     descriptionVisible: state.infoBubble.descriptionVisible,

diff --git a/assets/scripts/segments/__tests__/Segment.test.js b/assets/scripts/segments/__tests__/Segment.test.js
@@ -61,29 +61,29 @@ describe('Segment', () => {
     })
   })
   it('renders the units correctly', () => {
-    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} units={SETTINGS_UNITS_IMPERIAL} cssTransform={'transform'} segmentPos={1} />)
+    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} units={SETTINGS_UNITS_IMPERIAL} segmentPos={1} />)
     expect(wrapper).toMatchSnapshot()
   })
   it('renders active segment correctly', () => {
-    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} cssTransform={'transform'} segmentPos={1} />)
+    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} segmentPos={1} />)
     expect(wrapper).toMatchSnapshot()
   })
   it('renders segment warnings outside correctly', () => {
     segment.warnings = {}
     segment.warnings[SEGMENT_WARNING_OUTSIDE] = 'warning'
-    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} cssTransform={'transform'} segmentPos={1} />)
+    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} segmentPos={1} />)
     expect(wrapper).toMatchSnapshot()
   })
   it('renders segment warnings correctly', () => {
     segment.warnings = {}
     segment.warnings[SEGMENT_WARNING_WIDTH_TOO_SMALL] = 'warning'
-    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} cssTransform={'transform'} segmentPos={1} />)
+    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} segmentPos={1} />)
     expect(wrapper).toMatchSnapshot()
   })
   it('renders segment warnings width too large correctly', () => {
     segment.warnings = {}
     segment.warnings[SEGMENT_WARNING_WIDTH_TOO_LARGE] = 'warning'
-    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} cssTransform={'transform'} segmentPos={1} />)
+    const wrapper = shallow(<Segment connectDropTarget={connectDropTarget} connectDragSource={connectDragSource} segment={segment} actualWidth={1} updateSegmentData={updateSegmentData} connectDragPreview={connectDragPreview} isDragging={false} dataNo={10} activeSegment={10} segmentPos={1} />)
     expect(wrapper).toMatchSnapshot()
   })
 })
diff --git a/assets/scripts/segments/__tests__/__snapshots__/Segment.test.js.snap b/assets/scripts/segments/__tests__/__snapshots__/Segment.test.js.snap
@@ -8,6 +8,7 @@ exports[`Segment renders active segment correctly 1`] = `
   onMouseLeave={[Function]}
   style={
     Object {
+      "WebkitTransform": "translateX(1px)",
       "transform": "translateX(1px)",
       "width": "12px",
       "zIndex": 1,
@@ -80,6 +81,7 @@ exports[`Segment renders segment warnings correctly 1`] = `
   onMouseLeave={[Function]}
   style={
     Object {
+      "WebkitTransform": "translateX(1px)",
       "transform": "translateX(1px)",
       "width": "12px",
       "zIndex": 1,
@@ -152,6 +154,7 @@ exports[`Segment renders segment warnings outside correctly 1`] = `
   onMouseLeave={[Function]}
   style={
     Object {
+      "WebkitTransform": "translateX(1px)",
       "transform": "translateX(1px)",
       "width": "12px",
       "zIndex": 1,
@@ -224,6 +227,7 @@ exports[`Segment renders segment warnings width too large correctly 1`] = `
   onMouseLeave={[Function]}
   style={
     Object {
+      "WebkitTransform": "translateX(1px)",
       "transform": "translateX(1px)",
       "width": "12px",
       "zIndex": 1,
@@ -296,6 +300,7 @@ exports[`Segment renders the units correctly 1`] = `
   onMouseLeave={[Function]}
   style={
     Object {
+      "WebkitTransform": "translateX(1px)",
       "transform": "translateX(1px)",
       "width": "12px",
       "zIndex": 1,

diff --git a/assets/scripts/store/reducers/system.js b/assets/scripts/store/reducers/system.js
@@ -12,8 +12,7 @@ const initialState = {
   noInternet: false,
   viewportWidth: window.innerWidth,
   viewportHeight: window.innerHeight,
-  devicePixelRatio: window.devicePixelRatio || 1.0,
-  cssTransform: (Modernizr && Modernizr.prefixed('transform')) || 'transform'
+  devicePixelRatio: window.devicePixelRatio || 1.0
 }
 
 const system = (state = initialState, action) => {