dce-reactkit 3.1.3 → 3.1.6

package/src/components/ItemPicker/index.tsx

@@ -0,0 +1,85 @@
+/**
+ * Reusable nested item picker
+ * @author Yuen Ler Chow
+ */
+
+// Import React
+import React from 'react';
+
+// Import shared components
+import TabBox from '../TabBox';
+
+// Import types
+import PickableItem from './types/PickableItem';
+
+// Import sub-components
+import NestableItemList from './NestableItemList';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Title of the picker
+  title: string,
+  // List of items to show
+  items: PickableItem[],
+  /**
+   * Handler to call when item selection is changed
+   * @param updatedItems an updated copy of the list of items with checked
+   *   values updated
+   */
+  onChanged: (updatedItems: PickableItem[]) => void,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const ItemPicker: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    title,
+    items,
+    onChanged,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                           Component Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  return (
+    <TabBox
+      title={title}
+    >
+      <div style={{ overflowX: 'scroll' }}>
+        <NestableItemList
+          items={items}
+          onChanged={onChanged}
+        />
+      </div>
+    </TabBox>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default ItemPicker;

package/src/components/ItemPicker/types/PickableItem.tsx

@@ -0,0 +1,30 @@
+/**
+ * An item that can be chosen (for use within ItemPicker)
+ * @author Gabe Abrams
+ */
+type PickableItem = (
+  {
+    // Unique id of the item
+    id: number | string,
+    // Name of the item (human readable)
+    name: string,
+    // Link to view the item in the browser
+    link?: string,
+  }
+  & (
+    | {
+      // True if this is a group of items
+      isGroup: false,
+      // True if item is checked
+      checked: boolean,
+    }
+    | {
+      // True if this is a group of items
+      isGroup: true,
+      // List of sub-items
+      children: PickableItem[],
+    }
+  )
+);
+
+export default PickableItem;

package/src/helpers/parallelLimit.ts

@@ -0,0 +1,61 @@
+/**
+ * Run tasks in parallel with a limit on how many tasks can execute at once.
+ *   No guarantees are made about the order of task execution
+ * @author Gabe Abrams
+ * @param taskFunctions functions that start asynchronous tasks and optionally
+ *   resolve with values
+ * @param limit maximum number of asynchronous tasks to permit to run at
+ *   once
+ * @returns array of resolved values in the same order as the task functions
+ */
+const parallelLimit = async (
+  taskFunctions: (() => Promise<any>)[],
+  limit: number,
+): Promise<any[]> => {
+  const results: any[] = [];
+
+  // Wait until finished with all tasks
+  await new Promise<void>((resolve) => {
+    /* ------------- Helpers ------------ */
+
+    let nextTaskIndex = 0;
+    let numFinishedTasks = 0;
+    /**
+     * Start the next task
+     * @author Gabe Abrams
+     */
+    const startTask = async () => {
+      const taskIndex = nextTaskIndex++;
+
+      // Get the task
+      const taskFunction = taskFunctions[taskIndex];
+      if (!taskFunction) {
+        return;
+      }
+
+      // Execute task
+      const result = await taskFunction();
+
+      // Add results
+      results[taskIndex] = result;
+
+      // Tally and finish
+      if (++numFinishedTasks === taskFunctions.length) {
+        return resolve();
+      }
+
+      // Not finished! Start another task
+      startTask();
+    };
+
+    /* ----------- Start Tasks ---------- */
+
+    for (let i = 0; i < limit; i++) {
+      startTask();
+    }
+  });
+
+  return results;
+};
+
+export default parallelLimit;

package/src/index.ts

@@ -13,6 +13,7 @@ import PopSuccessMark from './components/PopSuccessMark';
 import PopFailureMark from './components/PopFailureMark';
 import PopPendingMark from './components/PopPendingMark';
 import CopiableBox from './components/CopiableBox';
+import ItemPicker from './components/ItemPicker';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -46,6 +47,7 @@ import getHumanReadableDate from './helpers/getHumanReadableDate';
 import getPartOfDay from './helpers/getPartOfDay';
 import stringsToHumanReadableList from './helpers/stringsToHumanReadableList';
 import onlyKeepLetters from './helpers/onlyKeepLetters';
+import parallelLimit from './helpers/parallelLimit';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -73,6 +75,7 @@ export {
   PopFailureMark,
   PopPendingMark,
   CopiableBox,
+  ItemPicker,
   // Global functions
   alert,
   confirm,
@@ -102,6 +105,7 @@ export {
   getPartOfDay,
   stringsToHumanReadableList,
   onlyKeepLetters,
+  parallelLimit,
   // Client helpers
   visitServerEndpoint,
   // Server helpers