Add rem example (#480) (#487)

k1sul1 · web-flow · commit a5e7b9f33c47 · 2020-06-08T11:53:21.000-04:00
diff --git a/example/example.js b/example/example.js
@@ -141,6 +141,16 @@ class App extends React.Component {
             I already have an absolute position.
           </div>
         </Draggable>
+        <Draggable {...dragHandlers}>
+          <RemWrapper>
+            <div className="box rem-position-fix" style={{position: 'absolute', bottom: '6.25rem', right: '18rem'}}>
+              I use <span style={{ fontWeight: 700 }}>rem</span> instead of <span style={{ fontWeight: 700 }}>px</span> for my transforms. I also have absolute positioning.
+
+              <br /><br />
+              I depend on a CSS hack to avoid double absolute positioning.
+            </div>
+          </RemWrapper>
+        </Draggable>
         <Draggable defaultPosition={{x: 25, y: 25}} {...dragHandlers}>
           <div className="box">
             {"I have a default position of {x: 25, y: 25}, so I'm slightly offset."}
@@ -181,4 +191,44 @@ class App extends React.Component {
   }
 }
 
+class RemWrapper extends React.Component {
+  // PropTypes is not available in this environment, but here they are.
+  // static propTypes = {
+  //   style: PropTypes.shape({
+  //     transform: PropTypes.string.isRequired
+  //   }),
+  //   children: PropTypes.node.isRequired,
+  //   remBaseline: PropTypes.number,
+  // }
+
+  translateTransformToRem(transform, remBaseline = 16) {
+    const convertedValues = transform.replace('translate(', '').replace(')', '')
+      .split(',')
+      .map(px => px.replace('px', ''))
+      .map(px => parseInt(px, 10) / remBaseline)
+      .map(x => `${x}rem`)
+    const [x, y] = convertedValues
+
+    return `translate(${x}, ${y})`
+  }
+
+  render() {
+    const { children, remBaseline = 16, style } = this.props
+    const child = React.Children.only(children)
+
+    const editedStyle = {
+      ...child.props.style,
+      ...style,
+      transform: this.translateTransformToRem(style.transform, remBaseline),
+    }
+
+    return React.cloneElement(child, {
+       ...child.props,
+       ...this.props,
+       style: editedStyle
+    })
+  }
+}
+
+
 ReactDOM.render(<App/>, document.getElementById('container'));
diff --git a/example/index.html b/example/index.html
@@ -51,6 +51,16 @@
       padding: 10px;
       float: left;
     }
+
+
+    /*
+     * RemWrapper needs to take it's styles from this element,
+     * and this element can't have an absolute position after it's kicked in.
+     * AFAIK it's not possible to do this directly in the RemWrapper component.
+     */
+    .rem-position-fix {
+      position: static !important;
+    }
   </style>
 </head>
 <body>
