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

package/src/delivery/feedback-tick.tsx

@@ -1,156 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/feedback-tick.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import React from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
-
-const FeedbackTickContainer: any = styled(Box)({
-  width: '33px',
-  height: '33px',
-  '& svg': {
-    position: 'absolute',
-    display: 'inline-block',
-    width: '33px',
-    height: '33px',
-    verticalAlign: 'middle',
-    '& hide': {
-      display: 'none',
-    },
-  },
-});
-
-const StyledSVG: any = styled('svg')({
-  '& .incorrect-fill': {
-    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,
-  },
-  '& .correct-fill': {
-    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,
-  },
-});
-
-const TransitionWrapper: any = 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.Component {
-  static propTypes = {
-    correctness: PropTypes.string,
-  };
-
-  constructor(props) {
-    super(props);
-    this.nodeRef = React.createRef();
-  }
-
-  getIncorrectIcon = () => (
-    <StyledSVG
-      key="1"
-      preserveAspectRatio="xMinYMin meet"
-      x="0px"
-      y="0px"
-      viewBox="0 0 44 40"
-      style={{ enableBackground: 'new 0 0 44 40' }}
-    >
-      <g>
-        <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"
-        />
-        <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"
-        />
-      </g>
-    </StyledSVG>
-  );
-
-  getCorrectIcon = () => (
-    <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' }}
-    >
-      <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"
-      />
-    </StyledSVG>
-  );
-
-  render() {
-    const { correctness } = this.props;
-
-    const icon = (() => {
-      if (correctness === 'incorrect') {
-        return this.getIncorrectIcon();
-      } else if (correctness === 'correct') {
-        return this.getCorrectIcon();
-      }
-      return null;
-    })();
-
-    return (
-      <FeedbackTickContainer>
-        <TransitionGroup>
-          {correctness && (
-            <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 }}
-            >
-              <TransitionWrapper ref={this.nodeRef}>{icon}</TransitionWrapper>
-            </CSSTransition>
-          )}
-        </TransitionGroup>
-      </FeedbackTickContainer>
-    );
-  }
-}
-
-export default FeedbackTick;

package/src/delivery/main.tsx

@@ -1,85 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/main.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { PreviewLayout as PreviewLayoutImport } from '@pie-lib/render-ui';
-
-function isRenderableReactInteropType(value: any) {
-  return (
-    typeof value === 'function' ||
-    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
-  );
-}
-
-function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
-  if (!maybeSymbol) return maybeSymbol;
-  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
-  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
-  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
-    return maybeSymbol[namedExport];
-  }
-  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
-    return maybeSymbol[namedExport].default;
-  }
-  return maybeSymbol;
-}
-const PreviewLayout = unwrapReactInteropSymbol(PreviewLayoutImport, 'PreviewLayout') || unwrapReactInteropSymbol(renderUi.PreviewLayout, 'PreviewLayout');
-import * as RenderUiNamespace from '@pie-lib/render-ui';
-const renderUiNamespaceAny = RenderUiNamespace as any;
-const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
-const renderUi =
-  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
-    ? renderUiDefaultMaybe
-    : renderUiNamespaceAny;
-import MultipleChoice from './multiple-choice.js';
-
-class Main extends React.Component {
-  static propTypes = {
-    model: PropTypes.object,
-    session: PropTypes.object,
-    options: PropTypes.object,
-    onChoiceChanged: PropTypes.func,
-    onShowCorrectToggle: PropTypes.func,
-    extraCSSRules: PropTypes.shape({
-      names: PropTypes.arrayOf(PropTypes.string),
-      rules: PropTypes.string,
-    }),
-    baseHeadingLevel: PropTypes.number,
-    includeSrHeading: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    model: {},
-    session: {},
-  };
-
-  render() {
-    const { model, onChoiceChanged, session, onShowCorrectToggle, options, baseHeadingLevel, includeSrHeading } = this.props;
-    const { extraCSSRules, fontSizeFactor } = model;
-
-    // model.partLabel is a property used for ebsr
-    return (
-      <PreviewLayout extraCSSRules={extraCSSRules} fontSizeFactor={fontSizeFactor} classes={{}}>
-        <MultipleChoice
-          {...model}
-          options={options}
-          session={session}
-          onChoiceChanged={onChoiceChanged}
-          onShowCorrectToggle={onShowCorrectToggle}
-          baseHeadingLevel={baseHeadingLevel}
-          includeSrHeading={includeSrHeading}
-        />
-      </PreviewLayout>
-    );
-  }
-}
-
-export default Main;