@pie-element/ebsr 6.6.3-next.264 → 6.6.3-next.280

package/configure/node_modules/@pie-lib/correct-answer-toggle/lib/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CorrectAnswerToggle = void 0;
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _styles2 = require("@material-ui/core/styles");
+
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+
+var _icons = require("@pie-lib/icons");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _expander = _interopRequireDefault(require("./expander"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+var CorrectAnswerToggle =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(CorrectAnswerToggle, _React$Component);
+
+  function CorrectAnswerToggle(props) {
+    var _this;
+
+    _classCallCheck(this, CorrectAnswerToggle);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(CorrectAnswerToggle).call(this, props));
+    _this.state = {
+      show: props.show
+    };
+    return _this;
+  }
+
+  _createClass(CorrectAnswerToggle, [{
+    key: "onClick",
+    value: function onClick() {
+      this.props.onToggle(!this.props.toggled);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        show: nextProps.show
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          toggled = _this$props.toggled,
+          hideMessage = _this$props.hideMessage,
+          showMessage = _this$props.showMessage;
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.root, className)
+      }, _react["default"].createElement(_expander["default"], {
+        show: this.state.show,
+        className: classes.expander
+      }, _react["default"].createElement("div", {
+        className: classes.content,
+        onClick: this.onClick.bind(this)
+      }, _react["default"].createElement("div", {
+        className: classes.iconHolder
+      }, _react["default"].createElement(_CSSTransition["default"], {
+        timeout: 400,
+        "in": toggled,
+        exit: !toggled,
+        classNames: classes
+      }, _react["default"].createElement(_icons.CorrectResponse, {
+        open: toggled,
+        key: "correct-open",
+        className: classes.icon
+      })), _react["default"].createElement(_CSSTransition["default"], {
+        timeout: 5000,
+        "in": !toggled,
+        exit: toggled,
+        classNames: classes
+      }, _react["default"].createElement(_icons.CorrectResponse, {
+        open: toggled,
+        key: "correct-closed",
+        className: classes.icon
+      }))), _react["default"].createElement(_renderUi.Readable, {
+        "false": true
+      }, _react["default"].createElement("div", {
+        className: classes.label
+      }, toggled ? hideMessage : showMessage)))));
+    }
+  }]);
+
+  return CorrectAnswerToggle;
+}(_react["default"].Component);
+
+exports.CorrectAnswerToggle = CorrectAnswerToggle;
+
+_defineProperty(CorrectAnswerToggle, "propTypes", {
+  onToggle: _propTypes["default"].func,
+  toggled: _propTypes["default"].bool,
+  show: _propTypes["default"].bool,
+  hideMessage: _propTypes["default"].string,
+  showMessage: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string
+});
+
+_defineProperty(CorrectAnswerToggle, "defaultProps", {
+  showMessage: 'Show correct answer',
+  hideMessage: 'Hide correct answer',
+  show: false,
+  toggled: false
+});
+
+var _default = (0, _styles2.withStyles)(_styles["default"])(CorrectAnswerToggle);
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/configure/node_modules/@pie-lib/correct-answer-toggle/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.jsx"],"names":["CorrectAnswerToggle","props","state","show","onToggle","toggled","nextProps","setState","classes","className","hideMessage","showMessage","root","expander","content","onClick","bind","iconHolder","icon","label","React","Component","PropTypes","func","bool","string","object","isRequired","styles"],"mappings":"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","sourcesContent":["import styles from './styles';\nimport { withStyles } from '@material-ui/core/styles';\nimport CSSTransition from 'react-transition-group/CSSTransition';\nimport { CorrectResponse } from '@pie-lib/icons';\nimport { Readable } from '@pie-lib/render-ui';\nimport Expander from './expander';\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n/**\n * We export the raw unstyled class for testability. For public use please use the default export.\n */\nexport class CorrectAnswerToggle extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func,\n    toggled: PropTypes.bool,\n    show: PropTypes.bool,\n    hideMessage: PropTypes.string,\n    showMessage: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string\n  };\n\n  static defaultProps = {\n    showMessage: 'Show correct answer',\n    hideMessage: 'Hide correct answer',\n    show: false,\n    toggled: false\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: props.show\n    };\n  }\n\n  onClick() {\n    this.props.onToggle(!this.props.toggled);\n  }\n\n  componentWillReceiveProps(nextProps) {\n    this.setState({\n      show: nextProps.show\n    });\n  }\n\n  render() {\n    const { classes, className, toggled, hideMessage, showMessage } = this.props;\n\n    return (\n      <div className={classNames(classes.root, className)}>\n        <Expander show={this.state.show} className={classes.expander}>\n          <div className={classes.content} onClick={this.onClick.bind(this)}>\n            <div className={classes.iconHolder}>\n              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>\n                <CorrectResponse open={toggled} key=\"correct-open\" className={classes.icon} />\n              </CSSTransition>\n              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>\n                <CorrectResponse open={toggled} key=\"correct-closed\" className={classes.icon} />\n              </CSSTransition>\n            </div>\n            <Readable false>\n              <div className={classes.label}>{toggled ? hideMessage : showMessage}</div>\n            </Readable>\n          </div>\n        </Expander>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(CorrectAnswerToggle);\n"],"file":"index.js"}

package/configure/node_modules/@pie-lib/correct-answer-toggle/lib/styles.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.animationStyles = exports["default"] = void 0;
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none'
+};
+var _default = {
+  root: {
+    width: '100%',
+    cursor: 'pointer'
+  },
+  content: {
+    margin: '0 auto',
+    textAlign: 'center',
+    display: 'flex'
+  },
+  label: Object.assign({
+    width: '140px',
+    // eslint-disable-next-line
+    fontFamily: "'Roboto', sans-serif",
+    height: '25px',
+    lineHeight: '25px',
+    verticalAlign: 'middle',
+    color: "var(--correct-answer-toggle-label-color,  ".concat(_renderUi.color.text(), ")"),
+    fontSize: '15px',
+    fontWeight: 'normal'
+  }, noTouch),
+  icon: {
+    position: 'absolute',
+    width: '25px'
+  },
+  iconHolder: {
+    width: '25px',
+    marginRight: '5px'
+  },
+  enter: {
+    opacity: '0'
+  },
+  enterActive: {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in'
+  },
+  exit: {
+    opacity: '1'
+  },
+  exitActive: {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in'
+  }
+};
+exports["default"] = _default;
+var animationStyles = {};
+exports.animationStyles = animationStyles;
+//# sourceMappingURL=styles.js.map

package/configure/node_modules/@pie-lib/correct-answer-toggle/lib/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.js"],"names":["noTouch","root","width","cursor","content","margin","textAlign","display","label","Object","assign","fontFamily","height","lineHeight","verticalAlign","color","text","fontSize","fontWeight","icon","position","iconHolder","marginRight","enter","opacity","enterActive","transition","exit","exitActive","animationStyles"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,OAAO,GAAG;AACd,2BAAyB,MADX;AAEd,yBAAuB,MAFT;AAGd,wBAAsB,MAHR;AAId,sBAAoB,MAJN;AAKd,qBAAmB,MALL;AAMd,iBAAe;AAND,CAAhB;eASe;AACbC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE,MADH;AAEJC,IAAAA,MAAM,EAAE;AAFJ,GADO;AAKbC,EAAAA,OAAO,EAAE;AACPC,IAAAA,MAAM,EAAE,QADD;AAEPC,IAAAA,SAAS,EAAE,QAFJ;AAGPC,IAAAA,OAAO,EAAE;AAHF,GALI;AAUbC,EAAAA,KAAK,EAAEC,MAAM,CAACC,MAAP,CACL;AACER,IAAAA,KAAK,EAAE,OADT;AAEE;AACAS,IAAAA,UAAU,EAAE,sBAHd;AAIEC,IAAAA,MAAM,EAAE,MAJV;AAKEC,IAAAA,UAAU,EAAE,MALd;AAMEC,IAAAA,aAAa,EAAE,QANjB;AAOEC,IAAAA,KAAK,sDAA+CA,gBAAMC,IAAN,EAA/C,MAPP;AAQEC,IAAAA,QAAQ,EAAE,MARZ;AASEC,IAAAA,UAAU,EAAE;AATd,GADK,EAYLlB,OAZK,CAVM;AAwBbmB,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,UADN;AAEJlB,IAAAA,KAAK,EAAE;AAFH,GAxBO;AA4BbmB,EAAAA,UAAU,EAAE;AACVnB,IAAAA,KAAK,EAAE,MADG;AAEVoB,IAAAA,WAAW,EAAE;AAFH,GA5BC;AAgCbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AADJ,GAhCM;AAmCbC,EAAAA,WAAW,EAAE;AACXD,IAAAA,OAAO,EAAE,GADE;AAEXE,IAAAA,UAAU,EAAE;AAFD,GAnCA;AAuCbC,EAAAA,IAAI,EAAE;AACJH,IAAAA,OAAO,EAAE;AADL,GAvCO;AA0CbI,EAAAA,UAAU,EAAE;AACVJ,IAAAA,OAAO,EAAE,GADC;AAEVE,IAAAA,UAAU,EAAE;AAFF;AA1CC,C;;AAgDR,IAAMG,eAAe,GAAG,EAAxB","sourcesContent":["import { color } from '@pie-lib/render-ui';\n\nconst noTouch = {\n  '-webkit-touchCcallout': 'none',\n  '-webkit-user-select': 'none',\n  '-khtml-user-select': 'none',\n  '-moz-user-select': 'none',\n  '-ms-user-select': 'none',\n  'user-select': 'none'\n};\n\nexport default {\n  root: {\n    width: '100%',\n    cursor: 'pointer'\n  },\n  content: {\n    margin: '0 auto',\n    textAlign: 'center',\n    display: 'flex'\n  },\n  label: Object.assign(\n    {\n      width: '140px',\n      // eslint-disable-next-line\n      fontFamily: \"'Roboto', sans-serif\",\n      height: '25px',\n      lineHeight: '25px',\n      verticalAlign: 'middle',\n      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,\n      fontSize: '15px',\n      fontWeight: 'normal'\n    },\n    noTouch\n  ),\n  icon: {\n    position: 'absolute',\n    width: '25px'\n  },\n  iconHolder: {\n    width: '25px',\n    marginRight: '5px'\n  },\n  enter: {\n    opacity: '0'\n  },\n  enterActive: {\n    opacity: '1',\n    transition: 'opacity 0.3s ease-in'\n  },\n  exit: {\n    opacity: '1'\n  },\n  exitActive: {\n    opacity: '0',\n    transition: 'opacity 0.3s ease-in'\n  }\n};\n\nexport const animationStyles = {};\n"],"file":"styles.js"}

package/configure/node_modules/@pie-lib/correct-answer-toggle/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pie-lib/correct-answer-toggle",
+  "description": "A react based toggle component",
+  "repository": "pie-framework/pie-lib",
+  "license": "ISC",
+  "keywords": [
+    "react",
+    "pie",
+    "material-ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "2.3.29",
+  "main": "lib/index.js",
+  "module": "src/index.jsx",
+  "scripts": {},
+  "dependencies": {
+    "@material-ui/core": "^3.8.3",
+    "@pie-lib/icons": "^2.4.25",
+    "@pie-lib/render-ui": "^4.12.0",
+    "classnames": "^2.2.6",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.6.2",
+    "react-transition-group": "^2.5.2"
+  },
+  "devDependencies": {
+    "react": "^16.8.1",
+    "react-dom": "^16.9.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1"
+  },
+  "gitHead": "de37d3ba44d3e7934e2f804381fe50d2da16a29a"
+}

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/expander.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { CSSTransition } from 'react-transition-group';
+
+const Expander = props => {
+  const { classes, show, children } = props;
+
+  return (
+    <CSSTransition
+      in={show}
+      appear={true}
+      mountOnEnter={false}
+      timeout={300}
+      classNames={{ ...classes }}
+    >
+      <div className={classes.expander}>{children}</div>
+    </CSSTransition>
+  );
+};
+
+Expander.propTypes = {
+  show: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+};
+
+const transition = 'height ease-in 300ms, opacity ease-in 300ms';
+
+export default withStyles(() => ({
+  expander: {
+    position: 'relative',
+    height: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    visibility: 'hidden'
+  },
+  enter: {
+    transition,
+    opacity: 1,
+    height: '25px',
+    visibility: 'visible'
+  },
+  enterDone: {
+    height: '25px',
+    visibility: 'visible'
+  },
+  exit: {
+    transition,
+    opacity: 0,
+    height: '0px',
+    visibility: 'visible'
+  },
+  exitDone: {
+    opacity: 0,
+    visibility: 'hidden',
+    height: '0px'
+  }
+}))(Expander);

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/index.jsx

@@ -0,0 +1,73 @@
+import styles from './styles';
+import { withStyles } from '@material-ui/core/styles';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { CorrectResponse } from '@pie-lib/icons';
+import { Readable } from '@pie-lib/render-ui';
+import Expander from './expander';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+export class CorrectAnswerToggle extends React.Component {
+  static propTypes = {
+    onToggle: PropTypes.func,
+    toggled: PropTypes.bool,
+    show: PropTypes.bool,
+    hideMessage: PropTypes.string,
+    showMessage: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string
+  };
+
+  static defaultProps = {
+    showMessage: 'Show correct answer',
+    hideMessage: 'Hide correct answer',
+    show: false,
+    toggled: false
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: props.show
+    };
+  }
+
+  onClick() {
+    this.props.onToggle(!this.props.toggled);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      show: nextProps.show
+    });
+  }
+
+  render() {
+    const { classes, className, toggled, hideMessage, showMessage } = this.props;
+
+    return (
+      <div className={classNames(classes.root, className)}>
+        <Expander show={this.state.show} className={classes.expander}>
+          <div className={classes.content} onClick={this.onClick.bind(this)}>
+            <div className={classes.iconHolder}>
+              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>
+                <CorrectResponse open={toggled} key="correct-open" className={classes.icon} />
+              </CSSTransition>
+              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>
+                <CorrectResponse open={toggled} key="correct-closed" className={classes.icon} />
+              </CSSTransition>
+            </div>
+            <Readable false>
+              <div className={classes.label}>{toggled ? hideMessage : showMessage}</div>
+            </Readable>
+          </div>
+        </Expander>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(CorrectAnswerToggle);

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/styles.js

@@ -0,0 +1,60 @@
+import { color } from '@pie-lib/render-ui';
+
+const noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none'
+};
+
+export default {
+  root: {
+    width: '100%',
+    cursor: 'pointer'
+  },
+  content: {
+    margin: '0 auto',
+    textAlign: 'center',
+    display: 'flex'
+  },
+  label: Object.assign(
+    {
+      width: '140px',
+      // eslint-disable-next-line
+      fontFamily: "'Roboto', sans-serif",
+      height: '25px',
+      lineHeight: '25px',
+      verticalAlign: 'middle',
+      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,
+      fontSize: '15px',
+      fontWeight: 'normal'
+    },
+    noTouch
+  ),
+  icon: {
+    position: 'absolute',
+    width: '25px'
+  },
+  iconHolder: {
+    width: '25px',
+    marginRight: '5px'
+  },
+  enter: {
+    opacity: '0'
+  },
+  enterActive: {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in'
+  },
+  exit: {
+    opacity: '1'
+  },
+  exitActive: {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in'
+  }
+};
+
+export const animationStyles = {};