@pie-lib/config-ui 13.0.4-next.31 → 13.0.4-next.34

package/src/two-choice.jsx

@@ -0,0 +1,90 @@
+import { InputContainer } from '@pie-lib/render-ui';
+import PropTypes from 'prop-types';
+import RadioWithLabel from './radio-with-label';
+import React from 'react';
+import { styled } from '@mui/material/styles';
+
+const StyledGroup = styled('div')(({ theme, direction }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  paddingLeft: 0,
+  marginTop: theme.spacing(1),
+  ...(direction === 'vertical' && {
+    flexDirection: 'column',
+  }),
+}));
+
+class NChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+    opts: PropTypes.array.isRequired,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  };
+
+  handleChange = (event) => {
+    this.props.onChange(event.currentTarget.value);
+  };
+
+  render() {
+    const { header, className, customLabel, opts, value, direction } = this.props;
+
+    const preppedOpts = opts.map((o) => {
+      return typeof o === 'string' ? { label: o, value: o } : o;
+    });
+    const LabelComponent = customLabel || RadioWithLabel;
+
+    return (
+      <InputContainer label={header} className={className}>
+        <StyledGroup direction={direction}>
+          {preppedOpts.map((o, index) => (
+            <LabelComponent
+              value={o.value}
+              key={index}
+              checked={o.value === value}
+              onChange={this.handleChange}
+              label={o.label}
+            />
+          ))}
+        </StyledGroup>
+      </InputContainer>
+    );
+  }
+}
+
+export { NChoice };
+
+const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
+
+class TwoChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    one: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    two: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+  };
+
+  render() {
+    const { one, two, header, className, customLabel, value, onChange } = this.props;
+    const opts = [one, two];
+
+    return (
+      <NChoice
+        customLabel={customLabel}
+        header={header}
+        className={className}
+        opts={opts}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
+export default TwoChoice;

package/src/with-stateful-model.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withStatefulModel = (Component) => {
+  class Stateful extends React.Component {
+    static propTypes = {
+      model: PropTypes.object.isRequired,
+      onChange: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        model: props.model,
+      };
+    }
+
+    UNSAFE_componentWillReceiveProps(props) {
+      this.setState({ model: props.model });
+    }
+
+    onChange = (model) => {
+      this.setState({ model }, () => {
+        this.props.onChange(this.state.model);
+      });
+    };
+
+    render() {
+      return <Component model={this.state.model} onChange={this.onChange} />;
+    }
+  }
+
+  return Stateful;
+};
+
+export default withStatefulModel;

package/dist/_virtual/_rolldown/runtime.js

@@ -1,11 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = (t, n) => {
-	let r = {};
-	for (var i in t) e(r, i, {
-		get: t[i],
-		enumerable: !0
-	});
-	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-};
-//#endregion
-export { t as __exportAll };

package/dist/alert-dialog.d.ts

@@ -1,44 +0,0 @@
-/**
- * @synced-from pie-lib/packages/config-ui/src/alert-dialog.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';
-declare const AlertDialog: {
-    ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, }: {
-        text: any;
-        title: any;
-        onClose: any;
-        onConfirm: any;
-        open: any;
-        onCloseText: any;
-        onConfirmText: any;
-        disableAutoFocus: any;
-        disableEnforceFocus: any;
-        disableRestoreFocus: any;
-    }): React.JSX.Element;
-    defaultProps: {
-        onCloseText: string;
-        onConfirmText: string;
-        disableAutoFocus: boolean;
-        disableEnforceFocus: boolean;
-        disableRestoreFocus: boolean;
-    };
-    propTypes: {
-        text: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
-        title: PropTypes.Requireable<string>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
-        open: PropTypes.Requireable<boolean>;
-        onConfirmText: PropTypes.Requireable<string>;
-        onCloseText: PropTypes.Requireable<string>;
-        disableAutoFocus: PropTypes.Requireable<boolean>;
-        disableEnforceFocus: PropTypes.Requireable<boolean>;
-        disableRestoreFocus: PropTypes.Requireable<boolean>;
-    };
-};
-export default AlertDialog;

package/dist/alert-dialog.js

@@ -1,47 +0,0 @@
-import "react";
-import e from "prop-types";
-import { Button as t, Dialog as n, DialogActions as r, DialogContent as i, DialogContentText as a, DialogTitle as o } from "@mui/material";
-import { styled as s } from "@mui/material/styles";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/alert-dialog.tsx
-var u = s(o)(() => ({ fontSize: "max(1.25rem, 18px)" })), d = s(a)(() => ({ fontSize: "max(1rem, 14px)" })), f = ({ text: e, title: a, onClose: o, onConfirm: s, open: f, onCloseText: p, onConfirmText: m, disableAutoFocus: h, disableEnforceFocus: g, disableRestoreFocus: _ }) => /* @__PURE__ */ l(n, {
-	open: f,
-	disableAutoFocus: h,
-	disableEnforceFocus: g,
-	disableRestoreFocus: _,
-	onClose: o,
-	children: [
-		a && /* @__PURE__ */ c(u, { children: a }),
-		e && /* @__PURE__ */ c(i, { children: /* @__PURE__ */ c(d, { children: e }) }),
-		/* @__PURE__ */ l(r, { children: [o && /* @__PURE__ */ c(t, {
-			onClick: o,
-			color: "primary",
-			children: p
-		}), s && /* @__PURE__ */ c(t, {
-			autoFocus: !0,
-			onClick: s,
-			color: "primary",
-			children: m
-		})] })
-	]
-});
-f.defaultProps = {
-	onCloseText: "CANCEL",
-	onConfirmText: "OK",
-	disableAutoFocus: !1,
-	disableEnforceFocus: !1,
-	disableRestoreFocus: !1
-}, f.propTypes = {
-	text: e.oneOfType([e.string, e.object]),
-	title: e.string,
-	onClose: e.func,
-	onConfirm: e.func,
-	open: e.bool,
-	onConfirmText: e.string,
-	onCloseText: e.string,
-	disableAutoFocus: e.bool,
-	disableEnforceFocus: e.bool,
-	disableRestoreFocus: e.bool
-};
-//#endregion
-export { f as default };

package/dist/checkbox.d.ts

@@ -1,34 +0,0 @@
-/**
- * @synced-from pie-lib/packages/config-ui/src/checkbox.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 PropTypes from 'prop-types';
-import React from 'react';
-declare const Checkbox: {
-    ({ mini, checked, onChange, value, label, error }: {
-        mini: any;
-        checked: any;
-        onChange: any;
-        value: any;
-        label: any;
-        error: any;
-    }): React.JSX.Element;
-    propTypes: {
-        mini: PropTypes.Requireable<boolean>;
-        checked: PropTypes.Validator<boolean>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        value: PropTypes.Requireable<string>;
-        label: PropTypes.Validator<string>;
-        error: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        value: string;
-        mini: boolean;
-        error: boolean;
-    };
-};
-export default Checkbox;

package/dist/checkbox.js

@@ -1,57 +0,0 @@
-import "react";
-import e from "prop-types";
-import { styled as t } from "@mui/material/styles";
-import { jsx as n } from "react/jsx-runtime";
-import { color as r } from "@pie-lib/render-ui";
-import i from "@mui/material/FormControlLabel";
-import a from "@mui/material/Checkbox";
-import { grey as o } from "@mui/material/colors";
-//#region src/checkbox.tsx
-var s = t(i)(({ theme: e, mini: t }) => ({
-	margin: 0,
-	marginLeft: 0,
-	padding: 0,
-	"& .MuiFormControlLabel-label": {
-		fontSize: e.typography.fontSize - 1,
-		transform: "translate(-4%, 2%)",
-		color: "rgba(0,0,0,1.0)",
-		...t && {
-			marginLeft: e.spacing(1),
-			color: o[700],
-			fontSize: e.typography.fontSize - 3
-		}
-	}
-})), c = t(a)(({ theme: e, mini: t, error: n }) => ({
-	color: `${r.tertiary()} !important`,
-	...t && {
-		margin: 0,
-		padding: 0,
-		width: e.spacing(3),
-		height: e.spacing(3)
-	},
-	...n && { color: `${e.palette.error.main} !important` }
-})), l = ({ mini: e, checked: t, onChange: r, value: i, label: a, error: o }) => /* @__PURE__ */ n(s, {
-	mini: e,
-	control: /* @__PURE__ */ n(c, {
-		checked: t,
-		onChange: r,
-		value: i,
-		mini: e,
-		error: o
-	}),
-	label: a
-});
-l.propTypes = {
-	mini: e.bool,
-	checked: e.bool.isRequired,
-	onChange: e.func.isRequired,
-	value: e.string,
-	label: e.string.isRequired,
-	error: e.bool
-}, l.defaultProps = {
-	value: "",
-	mini: !1,
-	error: !1
-};
-//#endregion
-export { l as default };

package/dist/choice-configuration/feedback-menu.d.ts

@@ -1,32 +0,0 @@
-/**
- * @synced-from pie-lib/packages/config-ui/src/choice-configuration/feedback-menu.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 PropTypes from 'prop-types';
-import React from 'react';
-export declare class IconMenu extends React.Component {
-    static propTypes: {
-        opts: PropTypes.Requireable<object>;
-        onClick: PropTypes.Validator<(...args: any[]) => any>;
-        iconButtonElement: PropTypes.Requireable<any>;
-    };
-    constructor(props: any);
-    handleClick: any;
-    handleRequestClose: any;
-    render(): React.JSX.Element;
-}
-export default class FeedbackMenu extends React.Component {
-    static propTypes: {
-        value: PropTypes.Requireable<object>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        classes: PropTypes.Validator<object>;
-    };
-    static defaultProps: {
-        classes: {};
-    };
-    render(): React.JSX.Element;
-}

package/dist/choice-configuration/feedback-menu.js

@@ -1,85 +0,0 @@
-import e from "react";
-import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import * as i from "@pie-lib/render-ui";
-import { InlineMenu as a } from "@pie-lib/render-ui";
-import o from "@mui/material/MenuItem";
-import s from "@mui/material/IconButton";
-import c from "@mui/icons-material/Feedback";
-//#region src/choice-configuration/feedback-menu.tsx
-function l(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function u(e, t) {
-	return !e || l(e) ? e : l(e.default) ? e.default : t && l(e[t]) ? e[t] : t && l(e[t]?.default) ? e[t].default : e;
-}
-var d = u(a, "InlineMenu") || u(m.InlineMenu, "InlineMenu"), f = i, p = f.default, m = p && typeof p == "object" ? p : f, h = class extends e.Component {
-	static propTypes = {
-		opts: t.object,
-		onClick: t.func.isRequired,
-		iconButtonElement: t.any
-	};
-	constructor(e) {
-		super(e), this.state = {
-			anchorEl: void 0,
-			open: !1
-		};
-	}
-	handleClick = (e) => {
-		this.setState({
-			open: !0,
-			anchorEl: e.currentTarget
-		});
-	};
-	handleRequestClose = () => {
-		this.setState({ open: !1 });
-	};
-	render() {
-		let { opts: e, onClick: t } = this.props, i = Object.keys(e), a = (e) => () => {
-			t(e), this.handleRequestClose();
-		};
-		return /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("div", {
-			onClick: this.handleClick,
-			children: this.props.iconButtonElement
-		}), /* @__PURE__ */ n(d, {
-			id: "simple-menu",
-			anchorEl: this.state.anchorEl,
-			open: this.state.open,
-			onClose: this.handleRequestClose,
-			transitionDuration: {
-				enter: 225,
-				exit: 195
-			},
-			children: i.map((t, r) => /* @__PURE__ */ n(o, {
-				onClick: a(t),
-				children: e[t]
-			}, r))
-		})] });
-	}
-}, g = class extends e.Component {
-	static propTypes = {
-		value: t.object,
-		onChange: t.func.isRequired,
-		classes: t.object.isRequired
-	};
-	static defaultProps = { classes: {} };
-	render() {
-		let { value: e, onChange: t, classes: r } = this.props, i = e && e.type, a = i === "custom" || i === "default" ? "primary" : "disabled", o = i === "custom" ? "Custom Feedback" : i === "default" ? "Default Feedback" : "Feedback disabled";
-		return /* @__PURE__ */ n(h, {
-			iconButtonElement: /* @__PURE__ */ n(s, {
-				className: r.icon,
-				"aria-label": o,
-				size: "large",
-				children: /* @__PURE__ */ n(c, { color: a })
-			}),
-			onClick: (e) => t(e),
-			opts: {
-				none: "No Feedback",
-				default: "Default",
-				custom: "Custom"
-			}
-		});
-	}
-};
-//#endregion
-export { g as default };

package/dist/choice-configuration/index.d.ts

@@ -1,62 +0,0 @@
-/**
- * @synced-from pie-lib/packages/config-ui/src/choice-configuration/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 ChoiceConfiguration extends React.Component {
-    static propTypes: {
-        noLabels: PropTypes.Requireable<boolean>;
-        useLetterOrdering: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        error: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-        defaultFeedback: PropTypes.Validator<object>;
-        disabled: PropTypes.Requireable<boolean>;
-        nonEmpty: PropTypes.Requireable<boolean>;
-        data: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Validator<string>;
-            value: PropTypes.Validator<string>;
-            correct: PropTypes.Requireable<boolean>;
-            feedback: PropTypes.Requireable<PropTypes.InferProps<{
-                type: PropTypes.Requireable<string>;
-                value: PropTypes.Requireable<string>;
-            }>>;
-        }>>;
-        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        index: PropTypes.Requireable<number>;
-        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
-            add: PropTypes.Validator<(...args: any[]) => any>;
-            delete: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        disableImageAlignmentButtons: PropTypes.Requireable<boolean>;
-        allowFeedBack: PropTypes.Requireable<boolean>;
-        allowDelete: PropTypes.Requireable<boolean>;
-        noCorrectAnswerError: PropTypes.Requireable<string>;
-        spellCheck: PropTypes.Requireable<boolean>;
-        pluginOpts: PropTypes.Requireable<object>;
-        toolbarOpts: PropTypes.Requireable<object>;
-        uploadSoundSupport: PropTypes.Requireable<object>;
-        maxImageWidth: PropTypes.Requireable<number>;
-        maxImageHeight: PropTypes.Requireable<number>;
-    };
-    static defaultProps: {
-        index: number;
-        noLabels: boolean;
-        useLetterOrdering: boolean;
-        allowFeedBack: boolean;
-        allowDelete: boolean;
-    };
-    _changeFn: (key: any) => (update: any) => void;
-    onLabelChange: (update: any) => void;
-    onCheckedChange: any;
-    onFeedbackValueChange: any;
-    onFeedbackTypeChange: any;
-    render(): React.JSX.Element;
-}
-export default ChoiceConfiguration;