@doenet/doenetml 0.6.0-alpha1

package/src/Viewer/renderers/codeViewer.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useRef, useEffect } from "react";
+import useDoenetRenderer from "../useDoenetRenderer";
+import { sizeToCSS } from "./utils/css";
+import Button from "../../uiComponents/Button";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function CodeViewer(props) {
+  let { name, id, SVs, children, actions, callAction } = useDoenetRenderer(
+    props,
+    false,
+  );
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+  let viewerHeight = { ...SVs.height };
+  viewerHeight.size = viewerHeight.size - 40;
+
+  let viewerWidth = { ...SVs.width };
+  viewerWidth.size = viewerWidth.size - 4;
+
+  let surroundingBoxStyle = {
+    width: sizeToCSS(SVs.width),
+    maxWidth: "100%",
+  };
+
+  if (SVs.locationFromParent !== "bottom") {
+    surroundingBoxStyle.border = "var(--mainBorder)";
+    surroundingBoxStyle.borderRadius = "var(--mainBorderRadius)";
+  }
+
+  let contentPanel = (
+    <div
+      style={{
+        width: sizeToCSS(SVs.width),
+        height: sizeToCSS(SVs.height),
+        maxWidth: "100%",
+        // padding: "12px",
+        // border: "1px solid black",
+        // overflowY: "scroll"
+        boxSizing: "border-box",
+        paddingLeft: "10px",
+      }}
+    >
+      <div style={{ height: "28px" }}>
+        <Button
+          onClick={() => callAction({ action: actions.updateComponents })}
+          value="update"
+          id={id + "_updateButton"}
+          style={{ marginTop: "10px" }}
+        ></Button>
+      </div>
+      <div
+        style={{
+          overflowY: "scroll",
+          width: sizeToCSS(viewerWidth),
+          maxWidth: "100%",
+          height: sizeToCSS(viewerHeight),
+          paddingRight: "10px",
+          marginTop: "10px",
+          boxSizing: "border-box",
+        }}
+        id={id + "_content"}
+      >
+        {children}
+      </div>
+    </div>
+  );
+
+  let outerStyle = {};
+  if (SVs.locationFromParent !== "bottom") {
+    outerStyle = { margin: "12px 0" };
+  }
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <div style={outerStyle}>
+        <a name={id} />
+        <div
+          style={surroundingBoxStyle}
+          className="codeViewerSurroundingBox"
+          id={id}
+        >
+          {contentPanel}
+        </div>
+      </div>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/containerBlock.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import useDoenetRenderer from "../useDoenetRenderer";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function Container(props) {
+  let { name, id, SVs, children, actions, callAction } =
+    useDoenetRenderer(props);
+
+  let onChangeVisibility = (isVisible) => {
+    if (actions.recordVisibilityChange) {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible },
+      });
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (actions.recordVisibilityChange) {
+        callAction({
+          action: actions.recordVisibilityChange,
+          args: { isVisible: false },
+        });
+      }
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <div id={id}>
+        <a name={id} />
+        {children}
+      </div>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/containerInline.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function ContainerInline(props) {
+  let { name, id, SVs, children } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <span id={id}>
+      <a name={id} />
+      {children}
+    </span>
+  );
+});

package/src/Viewer/renderers/contentBrowser.jsx

@@ -0,0 +1,159 @@
+import React, { useEffect } from "react";
+import useDoenetRenderer from "../useDoenetRenderer";
+import VisibilitySensor from "react-visibility-sensor-v2";
+import { Link } from "react-router-dom";
+import { cesc } from "../../utils/url";
+
+export default React.memo(function ContentBrowser(props) {
+  let { name, id, SVs, children, actions, callAction, location } =
+    useDoenetRenderer(props);
+
+  let search = location.search || "";
+  let hash = location.hash || "";
+
+  let onChangeVisibility = (isVisible) => {
+    if (actions.recordVisibilityChange) {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible },
+      });
+    }
+  };
+
+  let setSelectedItemInd = (ind) => {
+    callAction({
+      action: actions.setSelectedItemInd,
+      args: { ind },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (actions.recordVisibilityChange) {
+        callAction({
+          action: actions.recordVisibilityChange,
+          args: { isVisible: false },
+        });
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    // Check to see if hash contains the component name of one of the items of the browser.
+    // If so, select that item
+    let hashFirstSlash = hash.indexOf("\\/");
+    if (hashFirstSlash !== -1) {
+      let hashTarget = hash.substring(hashFirstSlash);
+      let indFromHash = SVs.indByEscapedComponentName[hashTarget];
+
+      if (indFromHash !== undefined && indFromHash !== SVs.selectedItemInd) {
+        // have an item from the browser that isn't hte current selected one
+        setSelectedItemInd(indFromHash);
+      }
+    }
+  }, [hash]);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let firstSlash = id.indexOf("\\/");
+  let prefix = id.substring(0, firstSlash);
+  let urlStart = search + "#" + prefix;
+
+  let initials = SVs.allInitials.map((initial) => (
+    <Link
+      key={initial}
+      style={{
+        padding: "0 5px",
+        width: "10px",
+        cursor: "pointer",
+        color: "var(--mainBlue)",
+        textDecoration: initial === SVs.initial ? "underline" : "none",
+      }}
+      to={urlStart + cesc(SVs.firstComponentNameByInitial[initial])}
+    >
+      {initial}
+    </Link>
+  ));
+
+  let labelRows = [];
+
+  let nLabels = SVs.itemInfoForInitial.length;
+  let nRows = Math.ceil(nLabels / 3);
+
+  for (let rowInd = 0; rowInd < nRows; rowInd++) {
+    let row = [];
+    for (let ind = rowInd * 3; ind < (rowInd + 1) * 3; ind++) {
+      let itemInfo = SVs.itemInfoForInitial[ind];
+      if (!itemInfo) {
+        break;
+      }
+      row.push(
+        <td width="33%">
+          <Link
+            key={itemInfo.ind}
+            style={{
+              display: "block",
+              // padding: "4px",
+              // width: "100%",
+              cursor: "pointer",
+              color: "var(--canvasText)",
+              textDecoration: "none",
+              backgroundColor: itemInfo.selected
+                ? "var(--mainGray)"
+                : "var(--canvas)",
+            }}
+            to={urlStart + cesc(itemInfo.componentName)}
+          >
+            {itemInfo.label}
+          </Link>
+        </td>,
+      );
+    }
+    labelRows.push(<tr key={rowInd}>{row}</tr>);
+  }
+
+  let labels = <table>{labelRows}</table>;
+
+  let labelPicker = (
+    <div style={{ width: "100%" }} data-test="labelPicker">
+      <div
+        style={{
+          marginTop: "12px",
+          height: "25px",
+          maxWidth: "220px",
+        }}
+      >
+        Select component
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          border: "solid",
+          maxWidth: "100%",
+          height: "100px",
+          overflowX: "hidden",
+          marginBottom: "12px",
+          boxSizing: "border-box",
+        }}
+      >
+        {labels}
+      </div>
+    </div>
+  );
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <div id={id}>
+        <a name={id} />
+        <div style={{ display: "flex" }} data-test="initials">
+          Filter by: {initials}
+        </div>
+        {labelPicker}
+        {children}
+      </div>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/contentPicker.jsx

@@ -0,0 +1,160 @@
+import React, { useRef, useState } from "react";
+import useDoenetRenderer from "../useDoenetRenderer";
+import VisibilitySensor from "react-visibility-sensor-v2";
+import { useEffect } from "react";
+import { rendererState } from "../useDoenetRenderer";
+import { useSetRecoilState } from "recoil";
+
+export default React.memo(function ContentPicker(props) {
+  let {
+    name,
+    id,
+    SVs,
+    children,
+    actions,
+    ignoreUpdate,
+    rendererName,
+    callAction,
+  } = useDoenetRenderer(props);
+
+  ContentPicker.baseStateVariable = "selectedIndices";
+
+  const [rendererSelectedIndices, setRendererSelectedIndices] = useState(
+    SVs.selectedIndices,
+  );
+
+  const setRendererState = useSetRecoilState(rendererState(rendererName));
+
+  let selectedIndicesWhenSetState = useRef(null);
+
+  if (
+    !ignoreUpdate &&
+    selectedIndicesWhenSetState.current !== SVs.selectedIndices
+  ) {
+    setRendererSelectedIndices(SVs.selectedIndices);
+    selectedIndicesWhenSetState.current = SVs.selectedIndices;
+  } else {
+    selectedIndicesWhenSetState.current = null;
+  }
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  function onChangeHandler(e) {
+    let newSelectedIndices = [];
+
+    if (e.target.value) {
+      newSelectedIndices = Array.from(e.target.selectedOptions, (option) =>
+        Number(option.value),
+      );
+    }
+
+    if (
+      rendererSelectedIndices.length !== newSelectedIndices.length ||
+      rendererSelectedIndices.some((v, i) => v != newSelectedIndices[i])
+    ) {
+      setRendererSelectedIndices(newSelectedIndices);
+      selectedIndicesWhenSetState.current = SVs.selectedIndices;
+
+      setRendererState((was) => {
+        let newObj = { ...was };
+        newObj.ignoreUpdate = true;
+        return newObj;
+      });
+
+      callAction({
+        action: actions.updateSelectedIndices,
+        args: {
+          selectedIndices: newSelectedIndices,
+        },
+        baseVariableValue: newSelectedIndices,
+      });
+    }
+  }
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let options = [];
+
+  if (SVs.separateByTopic) {
+    for (let topic in SVs.childrenByTopic) {
+      let childIndices = SVs.childrenByTopic[topic];
+
+      let optionsList = childIndices.map(function (ind) {
+        return (
+          <option key={ind + 1} value={ind + 1}>
+            {SVs.childInfo[ind].title}
+          </option>
+        );
+      });
+
+      options.push(
+        <optgroup label={topic} key={topic}>
+          {optionsList}
+        </optgroup>,
+      );
+    }
+  } else {
+    options = SVs.childInfo.map(function (obj, ind) {
+      return (
+        <option key={ind + 1} value={ind + 1}>
+          {obj.title}
+        </option>
+      );
+    });
+  }
+
+  let value = rendererSelectedIndices[0];
+
+  if (value === undefined) {
+    value == "";
+  }
+
+  let label = null;
+
+  if (SVs.label) {
+    label = SVs.label + ": ";
+  }
+
+  let picker = (
+    <p>
+      <label>
+        {label}
+        <select
+          className="custom-select"
+          id={id + "-select"}
+          onChange={(e) => onChangeHandler(e)}
+          value={value}
+          disabled={SVs.disabled}
+        >
+          {options}
+        </select>
+      </label>
+    </p>
+  );
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <section id={id}>
+        <a name={id} />
+        {picker}
+        {children}
+      </section>
+    </VisibilitySensor>
+  );
+});