@pie-element/categorize 0.1.0

package/src/author/design/choices/choice.tsx

@@ -0,0 +1,200 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/choices/choice.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 { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import InputHeader from '../input-header.js';
+import { Checkbox } from '@pie-lib/config-ui';
+import { DeleteButton } from '../buttons.js';
+import DragHandle from '@mui/icons-material/DragHandle';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import debug from 'debug';
+import { uid } from '@pie-lib/drag';
+import { multiplePlacements } from '../../utils.js';
+
+const log = debug('@pie-element:categorize:configure:choice');
+
+const canDrag = (props) => {
+  if (props.lockChoiceOrder) {
+    return true;
+  }
+  const count = props.choice.categoryCount || 0;
+  if (count === 0) {
+    return true;
+  } else {
+    return props.correctResponseCount < count;
+  }
+};
+
+const StyledCard: any = styled(Card)(({ theme }) => ({
+  minWidth: '196px',
+  padding: theme.spacing(1),
+  overflow: 'visible',
+}));
+
+const StyledCardActions: any = styled(CardActions)({
+  padding: 0,
+  justifyContent: 'space-between',
+});
+
+const DragHandleContainer: any = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'draggable',
+})(({ draggable }) => ({
+  cursor: draggable ? 'move' : 'inherit',
+  touchAction: 'none',
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingBottom: theme.spacing(1),
+}));
+
+const Choice = ({
+  allowMultiplePlacements,
+  configuration,
+  choice,
+  deleteFocusedEl,
+  focusedEl,
+  index,
+  onDelete,
+  onChange,
+  correctResponseCount,
+  lockChoiceOrder,
+  imageSupport,
+  spellCheck,
+  toolbarOpts,
+  error,
+  maxImageWidth,
+  maxImageHeight,
+  uploadSoundSupport,
+}) => {
+  const draggable = canDrag({ choice, correctResponseCount, lockChoiceOrder });
+
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragNodeRef,
+    isDragging,
+  } = useDraggable({
+    id: `choice-${choice.id}`,
+    data: {
+      id: choice.id,
+      index,
+      type: 'choice',
+    },
+    disabled: !draggable,
+  });
+
+  const {
+    setNodeRef: setDropNodeRef,
+  } = useDroppable({
+    id: `choice-drop-${choice.id}`,
+    data: {
+      id: choice.id,
+      index,
+      type: 'choice',
+    },
+  });
+
+  const changeContent = (content) => {
+    choice.content = content;
+    onChange(choice);
+  };
+
+  const changeCategoryCount = () => {
+    if (choice.categoryCount === 1) {
+      choice.categoryCount = 0;
+    } else {
+      choice.categoryCount = 1;
+    }
+    onChange(choice);
+  };
+
+  const isCheckboxShown = (allowMultiplePlacements) => allowMultiplePlacements === multiplePlacements.perChoice;
+
+  const showRemoveAfterPlacing = isCheckboxShown(allowMultiplePlacements);
+
+  const setNodeRef = (element) => {
+    setDragNodeRef(element);
+    setDropNodeRef(element);
+  };
+
+  return (
+    <StyledCard ref={setNodeRef} style={{ opacity: isDragging ? 0.5 : 1 }}>
+      <StyledCardActions>
+        <DragHandleContainer draggable={draggable} {...dragAttributes} {...dragListeners}>
+          <DragHandle color={draggable ? 'primary' : 'disabled'} />
+        </DragHandleContainer>
+      </StyledCardActions>
+      <InputHeader
+        imageSupport={imageSupport}
+        focusedEl={focusedEl}
+        deleteFocusedEl={deleteFocusedEl}
+        index={index}
+        label={choice.content}
+        onChange={changeContent}
+        onDelete={onDelete}
+        toolbarOpts={toolbarOpts}
+        spellCheck={spellCheck}
+        error={error}
+        maxImageWidth={maxImageWidth}
+        maxImageHeight={maxImageHeight}
+        uploadSoundSupport={uploadSoundSupport}
+        configuration={configuration}
+      />
+      {error && <ErrorText>{error}</ErrorText>}
+
+      <StyledCardActions>
+        <DeleteButton label={'delete'} onClick={onDelete} />
+        {showRemoveAfterPlacing && (
+          <Checkbox
+            mini
+            label={'Remove after placing'}
+            checked={choice.categoryCount === 1}
+            onChange={changeCategoryCount}
+          />
+        )}
+      </StyledCardActions>
+    </StyledCard>
+  );
+};
+
+Choice.propTypes = {
+  allowMultiplePlacements: PropTypes.string,
+  configuration: PropTypes.object.isRequired,
+  choice: PropTypes.object.isRequired,
+  deleteFocusedEl: PropTypes.func,
+  focusedEl: PropTypes.number,
+  index: PropTypes.number,
+  lockChoiceOrder: PropTypes.bool,
+  maxImageHeight: PropTypes.object,
+  maxImageWidth: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  correctResponseCount: PropTypes.number.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+  toolbarOpts: PropTypes.object,
+  error: PropTypes.string,
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+  spellCheck: PropTypes.bool,
+  rearrangeChoices: PropTypes.func,
+};
+
+export default uid.withUid(Choice);

package/src/author/design/choices/config.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/choices/config.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 { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+
+const ConfigContainer: any = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+}));
+
+const StyledTextField: any = styled(TextField)({
+  width: '100%',
+});
+
+export class Config extends React.Component {
+  static propTypes = {
+    config: PropTypes.object,
+    onModelChanged: PropTypes.func,
+    spellCheck: PropTypes.bool,
+  };
+
+  static defaultProps = {};
+
+  changeLabel: any = ({ target }) => {
+    this.props.onModelChanged({ choicesLabel: target.value });
+  };
+
+  render() {
+    const { config, spellCheck } = this.props;
+
+    return (
+      <ConfigContainer>
+        <StyledTextField
+          InputLabelProps={{
+            shrink: true,
+          }}
+          variant="outlined"
+          label="Label"
+          value={config.choicesLabel}
+          onChange={this.changeLabel}
+          spellCheck={spellCheck}
+        />
+      </ConfigContainer>
+    );
+  }
+}
+
+export default Config;

package/src/author/design/choices/index.tsx

@@ -0,0 +1,185 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/choices/index.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 { styled } from '@mui/material/styles';
+import Choice from './choice.js';
+import Header from '../header.js';
+import Config from './config.js';
+import { choiceUtils as utils } from '@pie-lib/config-ui';
+import { removeAllChoices } from '@pie-lib/categorize';
+
+const ChoicesContainer: any = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2.5),
+}));
+
+const ChoiceHolder: any = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(1),
+  display: 'grid',
+  gridRowGap: `${theme.spacing(1)}px`,
+  gridColumnGap: `${theme.spacing(1)}px`,
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(0.5),
+}));
+
+export class Choices extends React.Component {
+  static propTypes = {
+    model: PropTypes.object.isRequired,
+    configuration: PropTypes.object.isRequired,
+    choices: PropTypes.array.isRequired,
+    defaultImageMaxWidth: PropTypes.number,
+    defaultImageMaxHeight: PropTypes.number,
+    onModelChanged: PropTypes.func.isRequired,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    toolbarOpts: PropTypes.object,
+    spellCheck: PropTypes.bool,
+  };
+
+  static defaultProps = {};
+
+  state = {
+    focusedEl: null,
+  };
+
+  changeChoice: any = (choice) => {
+    const { choices, onModelChanged } = this.props;
+    const index = choices.findIndex((h) => h.id === choice.id);
+    if (index !== -1) {
+      choices.splice(index, 1, choice);
+      onModelChanged({ choices });
+    }
+  };
+
+  allChoicesHaveCount: any = (count) => {
+    const { choices } = this.props;
+    return Array.isArray(choices) && choices.every((c) => c.categoryCount === count);
+  };
+
+  addChoice: any = () => {
+    const { onModelChanged, model, choices: oldChoices } = this.props;
+    let { maxAnswerChoices } = model || {};
+
+    if (maxAnswerChoices && model.choices?.length >= maxAnswerChoices) {
+      return;
+    }
+
+    const id = utils.firstAvailableIndex(
+      model.choices.map((a) => a.id),
+      1,
+    );
+    const data = { id, content: 'Choice ' + id };
+
+    this.setState(
+      {
+        focusedEl: oldChoices.length,
+      },
+      () => {
+        onModelChanged({ choices: model.choices.concat([data]) });
+      },
+    );
+  };
+
+  deleteFocusedEl: any = () => {
+    this.setState({
+      focusedEl: null,
+    });
+  };
+
+  deleteChoice: any = (choice) => {
+    const { model, onModelChanged } = this.props;
+    const index = model.choices.findIndex((a) => a.id === choice.id);
+    if (index !== -1) {
+      model.choices.splice(index, 1);
+      model.correctResponse = removeAllChoices(choice.id, model.correctResponse);
+      onModelChanged(model);
+    }
+  };
+
+  render() {
+    const { focusedEl } = this.state;
+    const {
+      choices,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onModelChanged,
+      spellCheck,
+      toolbarOpts,
+      configuration,
+      defaultImageMaxWidth,
+      defaultImageMaxHeight,
+    } = this.props;
+    const { errors, allowMultiplePlacementsEnabled, lockChoiceOrder, maxAnswerChoices } = model;
+    const { choicesError, choicesErrors } = errors || {};
+    const { maxImageWidth = {}, maxImageHeight = {} } = configuration || {};
+    const choiceHolderStyle = {
+      gridTemplateColumns: `repeat(${model.categoriesPerRow}, 1fr)`,
+    };
+    const addChoiceButtonTooltip =
+      maxAnswerChoices && choices?.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '';
+
+    return (
+      <ChoicesContainer>
+        <Header
+          label="Choices"
+          buttonLabel="ADD A CHOICE"
+          onAdd={this.addChoice}
+          buttonDisabled={maxAnswerChoices && choices && choices?.length >= maxAnswerChoices}
+          tooltip={addChoiceButtonTooltip}
+        />
+
+        <Config config={model} onModelChanged={onModelChanged} spellCheck={spellCheck} />
+
+        <ChoiceHolder style={choiceHolderStyle}>
+          {choices.map((h, index) => {
+            return (
+              <Choice
+                key={h.id}
+                choice={h}
+                focusedEl={focusedEl}
+                deleteFocusedEl={this.deleteFocusedEl}
+                correctResponseCount={h.correctResponseCount}
+                allowMultiplePlacements={allowMultiplePlacementsEnabled}
+                lockChoiceOrder={lockChoiceOrder}
+                index={index}
+                imageSupport={imageSupport}
+                onChange={this.changeChoice}
+                onDelete={() => this.deleteChoice(h)}
+                toolbarOpts={toolbarOpts}
+                spellCheck={spellCheck}
+                error={choicesErrors && choicesErrors[h.id]}
+                maxImageWidth={(maxImageWidth && maxImageWidth.choice) || defaultImageMaxWidth}
+                maxImageHeight={(maxImageHeight && maxImageHeight.choice) || defaultImageMaxHeight}
+                uploadSoundSupport={uploadSoundSupport}
+                configuration={configuration}
+              />
+            );
+          })}
+        </ChoiceHolder>
+        {choicesError && <ErrorText>{choicesError}</ErrorText>}
+      </ChoicesContainer>
+    );
+  }
+}
+
+export default Choices;

package/src/author/design/header.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/header.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 Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { AddButton } from './buttons.js';
+
+const HeaderContainer: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginBottom: theme.spacing(1),
+}));
+
+const TitleContainer: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const StyledTooltip: any = styled(Tooltip)(({ theme }) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+}));
+
+export class Header extends React.Component {
+  static propTypes = {
+    buttonLabel: PropTypes.string,
+    onAdd: PropTypes.func.isRequired,
+    label: PropTypes.string.isRequired,
+    info: PropTypes.any,
+    buttonDisabled: PropTypes.bool,
+    variant: PropTypes.string,
+    tooltip: PropTypes.string,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { onAdd, label, buttonLabel, info, buttonDisabled, variant, tooltip } = this.props;
+    return (
+      <HeaderContainer>
+        <TitleContainer>
+          <Typography variant={variant || 'title'}>
+            {label}
+          </Typography>
+          {info}
+        </TitleContainer>
+        <StyledTooltip
+            title={tooltip || ''}
+            enterTouchDelay={50}
+            leaveTouchDelay={3000}
+        >
+          <span>
+            <AddButton onClick={onAdd} label={buttonLabel} disabled={buttonDisabled} />
+          </span>
+        </StyledTooltip>
+      </HeaderContainer>
+    );
+  }
+}
+
+export default Header;