@pie-element/categorize 13.2.0-beta.0 → 13.2.0-next.9

package/dist/author/design/choices/config.js

@@ -0,0 +1,33 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/material/TextField";
+//#region src/author/design/choices/config.tsx
+var a = n("div")(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	marginBottom: e.spacing(1)
+})), o = n(i)({ width: "100%" }), s = class extends e.Component {
+	static propTypes = {
+		config: t.object,
+		onModelChanged: t.func,
+		spellCheck: t.bool
+	};
+	static defaultProps = {};
+	changeLabel = ({ target: e }) => {
+		this.props.onModelChanged({ choicesLabel: e.value });
+	};
+	render() {
+		let { config: e, spellCheck: t } = this.props;
+		return /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(o, {
+			InputLabelProps: { shrink: !0 },
+			variant: "outlined",
+			label: "Label",
+			value: e.choicesLabel,
+			onChange: this.changeLabel,
+			spellCheck: t
+		}) });
+	}
+};
+//#endregion
+export { s as Config, s as default };

package/dist/author/design/choices/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @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';
+export declare class Choices extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        choices: PropTypes.Validator<any[]>;
+        defaultImageMaxWidth: PropTypes.Requireable<number>;
+        defaultImageMaxHeight: PropTypes.Requireable<number>;
+        onModelChanged: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        spellCheck: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {};
+    state: {
+        focusedEl: null;
+    };
+    changeChoice: any;
+    allChoicesHaveCount: any;
+    addChoice: any;
+    deleteFocusedEl: any;
+    deleteChoice: any;
+    render(): React.JSX.Element;
+}
+export default Choices;

package/dist/author/design/choices/index.js

@@ -0,0 +1,110 @@
+import { Header as e } from "../header.js";
+import t from "./choice.js";
+import { Config as n } from "./config.js";
+import r from "react";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { removeAllChoices as o } from "@pie-lib/categorize";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { choiceUtils as l } from "@pie-lib/config-ui";
+//#region src/author/design/choices/index.tsx
+var u = a("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), d = a("div")(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	paddingBottom: e.spacing(1),
+	display: "grid",
+	gridRowGap: e.spacing(1),
+	gridColumnGap: e.spacing(1)
+})), f = a("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(.5)
+})), p = class extends r.Component {
+	static propTypes = {
+		model: i.object.isRequired,
+		configuration: i.object.isRequired,
+		choices: i.array.isRequired,
+		defaultImageMaxWidth: i.number,
+		defaultImageMaxHeight: i.number,
+		onModelChanged: i.func.isRequired,
+		imageSupport: i.shape({
+			add: i.func.isRequired,
+			delete: i.func.isRequired
+		}),
+		uploadSoundSupport: i.shape({
+			add: i.func.isRequired,
+			delete: i.func.isRequired
+		}),
+		toolbarOpts: i.object,
+		spellCheck: i.bool
+	};
+	static defaultProps = {};
+	state = { focusedEl: null };
+	changeChoice = (e) => {
+		let { choices: t, onModelChanged: n } = this.props, r = t.findIndex((t) => t.id === e.id);
+		r !== -1 && (t.splice(r, 1, e), n({ choices: t }));
+	};
+	allChoicesHaveCount = (e) => {
+		let { choices: t } = this.props;
+		return Array.isArray(t) && t.every((t) => t.categoryCount === e);
+	};
+	addChoice = () => {
+		let { onModelChanged: e, model: t, choices: n } = this.props, { maxAnswerChoices: r } = t || {};
+		if (r && t.choices?.length >= r) return;
+		let i = l.firstAvailableIndex(t.choices.map((e) => e.id), 1), a = {
+			id: i,
+			content: "Choice " + i
+		};
+		this.setState({ focusedEl: n.length }, () => {
+			e({ choices: t.choices.concat([a]) });
+		});
+	};
+	deleteFocusedEl = () => {
+		this.setState({ focusedEl: null });
+	};
+	deleteChoice = (e) => {
+		let { model: t, onModelChanged: n } = this.props, r = t.choices.findIndex((t) => t.id === e.id);
+		r !== -1 && (t.choices.splice(r, 1), t.correctResponse = o(e.id, t.correctResponse), n(t));
+	};
+	render() {
+		let { focusedEl: r } = this.state, { choices: i, model: a, imageSupport: o, uploadSoundSupport: l, onModelChanged: p, spellCheck: m, toolbarOpts: h, configuration: g, defaultImageMaxWidth: _, defaultImageMaxHeight: v } = this.props, { errors: y, allowMultiplePlacementsEnabled: b, lockChoiceOrder: x, maxAnswerChoices: S } = a, { choicesError: C, choicesErrors: w } = y || {}, { maxImageWidth: T = {}, maxImageHeight: E = {} } = g || {}, D = { gridTemplateColumns: `repeat(${a.categoriesPerRow}, 1fr)` }, O = S && i?.length >= S ? `Only ${S} allowed maximum` : "";
+		return /* @__PURE__ */ c(u, { children: [
+			/* @__PURE__ */ s(e, {
+				label: "Choices",
+				buttonLabel: "ADD A CHOICE",
+				onAdd: this.addChoice,
+				buttonDisabled: S && i && i?.length >= S,
+				tooltip: O
+			}),
+			/* @__PURE__ */ s(n, {
+				config: a,
+				onModelChanged: p,
+				spellCheck: m
+			}),
+			/* @__PURE__ */ s(d, {
+				style: D,
+				children: i.map((e, n) => /* @__PURE__ */ s(t, {
+					choice: e,
+					focusedEl: r,
+					deleteFocusedEl: this.deleteFocusedEl,
+					correctResponseCount: e.correctResponseCount,
+					allowMultiplePlacements: b,
+					lockChoiceOrder: x,
+					index: n,
+					imageSupport: o,
+					onChange: this.changeChoice,
+					onDelete: () => this.deleteChoice(e),
+					toolbarOpts: h,
+					spellCheck: m,
+					error: w && w[e.id],
+					maxImageWidth: T && T.choice || _,
+					maxImageHeight: E && E.choice || v,
+					uploadSoundSupport: l,
+					configuration: g
+				}, e.id))
+			}),
+			C && /* @__PURE__ */ s(f, { children: C })
+		] });
+	}
+};
+//#endregion
+export { p as Choices, p as default };

package/dist/author/design/header.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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';
+export declare class Header extends React.Component {
+    static propTypes: {
+        buttonLabel: PropTypes.Requireable<string>;
+        onAdd: PropTypes.Validator<(...args: any[]) => any>;
+        label: PropTypes.Validator<string>;
+        info: PropTypes.Requireable<any>;
+        buttonDisabled: PropTypes.Requireable<boolean>;
+        variant: PropTypes.Requireable<string>;
+        tooltip: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {};
+    render(): React.JSX.Element;
+}
+export default Header;

package/dist/author/design/header.js

@@ -0,0 +1,49 @@
+import { AddButton as e } from "./buttons.js";
+import t from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/material/Tooltip";
+import s from "@mui/material/Typography";
+//#region src/author/design/header.tsx
+var c = r("div")(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	marginBottom: e.spacing(1)
+})), l = r("div")({
+	display: "flex",
+	alignItems: "center"
+}), u = r(o)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), d = class extends t.Component {
+	static propTypes = {
+		buttonLabel: n.string,
+		onAdd: n.func.isRequired,
+		label: n.string.isRequired,
+		info: n.any,
+		buttonDisabled: n.bool,
+		variant: n.string,
+		tooltip: n.string
+	};
+	static defaultProps = {};
+	render() {
+		let { onAdd: t, label: n, buttonLabel: r, info: o, buttonDisabled: d, variant: f, tooltip: p } = this.props;
+		return /* @__PURE__ */ a(c, { children: [/* @__PURE__ */ a(l, { children: [/* @__PURE__ */ i(s, {
+			variant: f || "title",
+			children: n
+		}), o] }), /* @__PURE__ */ i(u, {
+			title: p || "",
+			enterTouchDelay: 50,
+			leaveTouchDelay: 3e3,
+			children: /* @__PURE__ */ i("span", { children: /* @__PURE__ */ i(e, {
+				onClick: t,
+				label: r,
+				disabled: d
+			}) })
+		})] });
+	}
+};
+//#endregion
+export { d as Header, d as default };

package/dist/author/design/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/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';
+export declare class Design extends React.Component {
+    static propTypes: {
+        configuration: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        onConfigurationChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        uid: PropTypes.Requireable<string>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+    };
+    constructor(props: any);
+    updateModel: any;
+    changeRationale: any;
+    changeTeacherInstructions: any;
+    changeFeedback: any;
+    onAddAlternateResponse: any;
+    onPromptChanged: (prompt: any) => any;
+    onRemoveAlternateResponse: any;
+    countChoiceInCorrectResponse: any;
+    checkAllowMultiplePlacements: any;
+    isAlertModalOpened: any;
+    onAlertModalCancel: any;
+    onDragStart: any;
+    onDragEnd: any;
+    removeChoiceFromSource: any;
+    addChoiceToCategory: any;
+    deleteChoiceFromCategory: any;
+    moveChoice: any;
+    addChoiceToAlternateCategory: any;
+    moveChoiceInAlternate: any;
+    deleteChoiceFromAlternateCategory: any;
+    renderDragOverlay: any;
+    render(): React.JSX.Element;
+}
+export default Design;