@pie-lib/render-ui 4.15.10-next.1 → 4.15.10-next.1639

package/src/ui-layout.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import AppendCSSRules from './append-css-rules';
+
+class UiLayout extends AppendCSSRules {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    children: PropTypes.array,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
+    fontSizeFactor: PropTypes.number,
+  };
+
+  static defaultProps = {
+    extraCSSRules: {},
+    fontSizeFactor: 1,
+  };
+
+  constructor(props) {
+    super(props);
+    this.classesSheet = document.createElement('style');
+  }
+
+  computeStyle(fontSizeFactor) {
+    const getFontSize = (element) => parseFloat(getComputedStyle(element).fontSize);
+
+    const rootFontSize = getFontSize(document.documentElement);
+    const bodyFontSize = getFontSize(document.body);
+    const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
+
+    return fontSizeFactor !== 1 ? { fontSize: `${effectiveFontSize * fontSizeFactor}px` } : null;
+  }
+
+  render() {
+    const { children, className, classes, fontSizeFactor, ...rest } = this.props;
+
+    const finalClass = classNames(className, classes.extraCSSRules, classes.uiLayoutContainer);
+    const { extraCSSRules, ...restProps } = rest;
+    const style = this.computeStyle(fontSizeFactor);
+
+    return (
+      <div className={finalClass} {...restProps} {...(style && { style })}>
+        {children}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  extraCSSRules: {},
+  // need this because some browsers set their own style on table
+  uiLayoutContainer: {
+    '& table, th, td': {
+      fontSize: 'inherit' /* Ensure table elements inherit font size */,
+    },
+  },
+};
+
+const Styled = withStyles(styles)(UiLayout);
+
+export default Styled;

package/README.md

@@ -1,33 +0,0 @@
-# @pie-lib/render-ui
-
-Some shared ui components for player rendering that are so small that they don't warrant their own package..
-
-## install
-
-```
-npm install
-```
-
-## demo
-
-```
-cd demo
-../node_modules/.bin/webpack-dev-server --hot --inline
-```
-
-go to http://localhost:8080
-
-# colors
-
-This package contains a color module that defines the css custom properties that all pie elements should use. It loosely follows the material design naming scheme with a few additions.
-
-| name                   | description                             | fallback           |
-| ---------------------- | --------------------------------------- | ------------------ |
-| `--pie-text`           | the color of the text                   | defaults.TEXT      |
-| `--pie-primary`        | the primary fill color                  | defaults.PRIMARY   |
-| `--pie-primary-text`   | the color of primary text               | `--pie-text`       |
-| `--pie-secondary`      | the secondary fill color                | defaults.SECONDARY |
-| `--pie-secondary-text` | the color of secondary text             | `--pie-text`       |
-| `--pie-correct`        | the fill color for correct ui widgets   | defaults.CORRECT   |
-| `--pie-incorrect`      | the fill color for incorrect ui widgets | defaults.INCORRECT |
-| `--pie-disabled`       | the disabled color                      | defaults.DISABLED  |