@pie-element/multiple-choice 13.1.1-next.0 → 13.2.0-next.0

package/lib/feedback-tick.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactTransitionGroup = require("react-transition-group");
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+const FeedbackTickContainer = (0, _styles.styled)(_Box.default)({
+  width: '33px',
+  height: '33px',
+  '& svg': {
+    position: 'absolute',
+    display: 'inline-block',
+    width: '33px',
+    height: '33px',
+    verticalAlign: 'middle',
+    '& hide': {
+      display: 'none'
+    }
+  }
+});
+const StyledSVG = (0, _styles.styled)('svg')({
+  '& .incorrect-fill': {
+    fill: `var(--feedback-incorrect-bg-color, ${_renderUi.color.incorrect()})`
+  },
+  '& .correct-fill': {
+    fill: `var(--feedback-correct-bg-color, ${_renderUi.color.correct()})`
+  }
+});
+const TransitionWrapper = (0, _styles.styled)('div')({
+  position: 'relative',
+  '&.feedback-tick-enter': {
+    opacity: '0',
+    left: '-50px'
+  },
+  '&.feedback-tick-enter-active': {
+    opacity: '1',
+    left: '0px',
+    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms'
+  },
+  '&.feedback-tick-exit': {
+    opacity: '1',
+    left: '0px'
+  },
+  '&.feedback-tick-exit-active': {
+    opacity: '0',
+    left: '-50px',
+    transition: 'left 300ms ease-in, opacity 300ms'
+  }
+});
+class FeedbackTick extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "getIncorrectIcon", () => /*#__PURE__*/_react.default.createElement(StyledSVG, {
+      key: "1",
+      preserveAspectRatio: "xMinYMin meet",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 44 40",
+      style: {
+        enableBackground: 'new 0 0 44 40'
+      }
+    }, /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("rect", {
+      x: "11",
+      y: "17.3",
+      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
+      className: "incorrect-fill",
+      width: "16.6",
+      height: "3.7"
+    }), /*#__PURE__*/_react.default.createElement("rect", {
+      x: "17.4",
+      y: "10.7",
+      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
+      className: "incorrect-fill",
+      width: "3.7",
+      height: "16.6"
+    }))));
+    (0, _defineProperty2.default)(this, "getCorrectIcon", () => /*#__PURE__*/_react.default.createElement(StyledSVG, {
+      key: "2",
+      preserveAspectRatio: "xMinYMin meet",
+      version: "1.1",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 44 40",
+      style: {
+        enableBackground: 'new 0 0 44 40'
+      }
+    }, /*#__PURE__*/_react.default.createElement("polygon", {
+      className: "correct-fill",
+      points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+    })));
+    this.nodeRef = /*#__PURE__*/_react.default.createRef();
+  }
+  render() {
+    const {
+      correctness
+    } = this.props;
+    const icon = (() => {
+      if (correctness === 'incorrect') {
+        return this.getIncorrectIcon();
+      } else if (correctness === 'correct') {
+        return this.getCorrectIcon();
+      }
+      return null;
+    })();
+    return /*#__PURE__*/_react.default.createElement(FeedbackTickContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, correctness && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      nodeRef: this.nodeRef,
+      classNames: {
+        enter: 'feedback-tick-enter',
+        enterActive: 'feedback-tick-enter-active',
+        exit: 'feedback-tick-exit',
+        exitActive: 'feedback-tick-exit-active'
+      },
+      timeout: {
+        enter: 700,
+        exit: 300
+      }
+    }, /*#__PURE__*/_react.default.createElement(TransitionWrapper, {
+      ref: this.nodeRef
+    }, icon))));
+  }
+}
+(0, _defineProperty2.default)(FeedbackTick, "propTypes", {
+  correctness: _propTypes.default.string
+});
+var _default = exports.default = FeedbackTick;
+//# sourceMappingURL=feedback-tick.js.map

package/lib/feedback-tick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback-tick.js","names":["_react","_interopRequireDefault","require","_reactTransitionGroup","_styles","_Box","_propTypes","_renderUi","FeedbackTickContainer","styled","Box","width","height","position","display","verticalAlign","StyledSVG","fill","color","incorrect","correct","TransitionWrapper","opacity","left","transition","FeedbackTick","React","Component","constructor","props","_defineProperty2","default","createElement","key","preserveAspectRatio","x","y","viewBox","style","enableBackground","transform","className","version","points","nodeRef","createRef","render","correctness","icon","getIncorrectIcon","getCorrectIcon","TransitionGroup","CSSTransition","classNames","enter","enterActive","exit","exitActive","timeout","ref","PropTypes","string","_default","exports"],"sources":["../src/feedback-tick.jsx"],"sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\n\nconst FeedbackTickContainer = styled(Box)({\n  width: '33px',\n  height: '33px',\n  '& svg': {\n    position: 'absolute',\n    display: 'inline-block',\n    width: '33px',\n    height: '33px',\n    verticalAlign: 'middle',\n    '& hide': {\n      display: 'none',\n    },\n  },\n});\n\nconst StyledSVG = styled('svg')({\n  '& .incorrect-fill': {\n    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  '& .correct-fill': {\n    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n});\n\nconst TransitionWrapper = styled('div')({\n  position: 'relative',\n  '&.feedback-tick-enter': {\n    opacity: '0',\n    left: '-50px',\n  },\n  '&.feedback-tick-enter-active': {\n    opacity: '1',\n    left: '0px',\n    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n  },\n  '&.feedback-tick-exit': {\n    opacity: '1',\n    left: '0px',\n  },\n  '&.feedback-tick-exit-active': {\n    opacity: '0',\n    left: '-50px',\n    transition: 'left 300ms ease-in, opacity 300ms',\n  },\n});\n\nclass FeedbackTick extends React.Component {\n  static propTypes = {\n    correctness: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n    this.nodeRef = React.createRef();\n  }\n\n  getIncorrectIcon = () => (\n    <StyledSVG\n      key=\"1\"\n      preserveAspectRatio=\"xMinYMin meet\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 44 40\"\n      style={{ enableBackground: 'new 0 0 44 40' }}\n    >\n      <g>\n        <rect\n          x=\"11\"\n          y=\"17.3\"\n          transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n          className=\"incorrect-fill\"\n          width=\"16.6\"\n          height=\"3.7\"\n        />\n        <rect\n          x=\"17.4\"\n          y=\"10.7\"\n          transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n          className=\"incorrect-fill\"\n          width=\"3.7\"\n          height=\"16.6\"\n        />\n      </g>\n    </StyledSVG>\n  );\n\n  getCorrectIcon = () => (\n    <StyledSVG\n      key=\"2\"\n      preserveAspectRatio=\"xMinYMin meet\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 44 40\"\n      style={{ enableBackground: 'new 0 0 44 40' }}\n    >\n      <polygon\n        className=\"correct-fill\"\n        points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n      />\n    </StyledSVG>\n  );\n\n  render() {\n    const { correctness } = this.props;\n\n    const icon = (() => {\n      if (correctness === 'incorrect') {\n        return this.getIncorrectIcon();\n      } else if (correctness === 'correct') {\n        return this.getCorrectIcon();\n      }\n      return null;\n    })();\n\n    return (\n      <FeedbackTickContainer>\n        <TransitionGroup>\n          {correctness && (\n            <CSSTransition\n              nodeRef={this.nodeRef}\n              classNames={{\n                enter: 'feedback-tick-enter',\n                enterActive: 'feedback-tick-enter-active',\n                exit: 'feedback-tick-exit',\n                exitActive: 'feedback-tick-exit-active',\n              }}\n              timeout={{ enter: 700, exit: 300 }}\n            >\n              <TransitionWrapper ref={this.nodeRef}>{icon}</TransitionWrapper>\n            </CSSTransition>\n          )}\n        </TransitionGroup>\n      </FeedbackTickContainer>\n    );\n  }\n}\n\nexport default FeedbackTick;\n"],"mappings":"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","ignoreList":[]}