@pie-element/ebsr 6.6.2 → 6.6.3-next.1008

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

@@ -0,0 +1,75 @@
+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} aria-hidden={!this.state.show}>
+                {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 = {};