@peers-app/peers-ui 0.0.14

package/src/components/io-schema-values.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import { IOSchema, Observable, observable, camelCaseToSpaces } from "@peers-app/peers-sdk";
+import { Tooltip } from "./tooltip";
+import { MarkdownEditorInline } from "./markdown-editor/editor-inline";
+import { Input } from "./input";
+import { InputNumber } from "./input-number";
+import { Checkbox } from "./checkbox";
+import { useSubscription } from "../hooks";
+
+interface IOSchemaValuesProps {
+  ioSchema: IOSchema;
+  values: Record<string, any>;
+  q: Observable<number>;
+  excludeFields?: string[];
+}
+
+export const IOSchemaValues = (props: IOSchemaValuesProps) => {
+
+  const { ioSchema, values, q } = props;
+
+  return (
+    <div>
+      {ioSchema.fields.map((field, i) => {
+        if (props.excludeFields?.includes(field.name)) {
+          return null;
+        }
+        return (
+          <div key={i} className='mt-2'>
+            <small className="text-body-secondary">
+              {camelCaseToSpaces(field.name)}:
+              <small>
+                <Tooltip markdownContent={field.description ?? ''} />
+              </small>
+            </small>
+
+            <IOSchemaValue
+              field={field}
+              values={values}
+              q={q}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+
+}
+
+export const IOSchemaValue = (props: { field: IOSchema['fields'][0], values: Record<string, any>, q: Observable<number> }) => {
+  const { field, values, q } = props;
+
+  const [valueObs] = useState(() => {
+    const obs = observable<any | undefined>(values[field.name] ?? '');
+    return obs;
+  });
+
+  useEffect(() => {
+    const sub = valueObs.subscribe(() => {
+      values[field.name] = valueObs();
+      q(q() + 1);
+    });
+    return () => {
+      sub.dispose();
+    }
+  });
+
+  useSubscription(q, () => {
+    valueObs(values[field.name] ?? '');
+  }, true);
+
+  const valueType = field.type;
+
+  // TODO isArray
+
+  // TODO UI Types - text:secret, date:time, date:date, date:datetime, enum
+
+  if (valueType === 'string') {
+    if (field.subType === 'markdown' || (!field.subType && field.name.toLowerCase().includes('body'))) {
+      return (
+        <MarkdownEditorInline
+          value={valueObs}
+          maxHeight={'250px'}
+        />
+      );
+    } else {
+      return (
+        <Input
+          className='form-control'
+          value={valueObs}
+        />
+      )
+    }
+  }
+  else if (valueType === 'number') {
+    return (
+      <InputNumber
+        className='form-control'
+        value={valueObs}
+      />
+    )
+  }
+  else if (valueType === 'boolean') {
+    return (
+      <Checkbox
+        className='form-control'
+        checked={valueObs}
+      />
+    )
+  }
+  else if (valueType === 'Date') {
+    return (
+      <Input
+        className='form-control'
+        value={valueObs}
+        type='date'
+      />
+    )
+  }
+  else {
+    return <div>Unknown type: {valueType}</div>
+  }
+}

package/src/components/io-schema.tsx

@@ -0,0 +1,234 @@
+import { arrayAsTable, FieldType, IField, initDoc, IOSchema, IOSchemaType, newid, Observable, observable } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from "react";
+import { useObservable, useObservableState } from "../hooks";
+import { MarkdownEditorInline } from "./markdown-editor/editor-inline";
+
+export const IOSchemaEditor = (props: { ioSchema: Observable<IOSchema>, simpleValueName: string }) => {
+  const { ioSchema, simpleValueName } = props;
+
+  if (!ioSchema().type) {
+    ioSchema().type = IOSchemaType.none;
+  }
+  if (!ioSchema().fields) {
+    ioSchema().fields = [];
+  }
+
+  const q = useObservableState(0)
+
+  useEffect(() => {
+    let schemaType = ioSchema().type;
+    const sub = ioSchema.subscribe(() => {
+      if (schemaType !== ioSchema().type) {
+        q(q() + 1);
+      }
+    });
+    return () => sub.dispose();
+  }, [ioSchema, q()]);
+
+  return (
+    <>
+      <select
+        className="form-select form-select-sm"
+        style={{ width: "150px", display: "inline-block" }}
+        defaultValue={ioSchema().type}
+        onChange={evt => {
+          ioSchema({
+            ...ioSchema(),
+            type: evt.target.value as IOSchemaType,
+          })
+        }}
+      >
+        <option value="none">None</option>
+        <option value="simple">Simple Value</option>
+        <option value="complex">Complex Value</option>
+      </select>
+
+      <div
+        className="ms-4"
+      >
+        {ioSchema().type === IOSchemaType.simple && <SimpleInputSchema ioSchema={ioSchema} simpleValueName={simpleValueName} />}
+        {ioSchema().type === IOSchemaType.complex && <ComplexInputSchema ioSchema={ioSchema} />}
+      </div>
+    </>
+  )
+}
+
+export const SimpleInputSchema = (props: { ioSchema: Observable<IOSchema>, simpleValueName: string }) => {
+
+  const { ioSchema, simpleValueName } = props;
+  useObservable(ioSchema);
+
+  const [ioValueType] = useState(() => observable(ioSchema()?.fields?.[0]?.type || FieldType.string));
+  const [ioValueDesc] = useState(() => observable(ioSchema()?.fields?.[0]?.description || ""));
+
+  const setSimpleInputSchema = () => {
+    const _ioSchema = { ...ioSchema() }
+    _ioSchema.type = IOSchemaType.simple;
+    _ioSchema.fields = _ioSchema.fields || [];
+    _ioSchema.fields[0] = {
+      name: simpleValueName,
+      description: ioValueDesc(),
+      type: ioValueType(),
+    }
+    ioSchema(_ioSchema);
+  }
+
+  useEffect(() => {
+    const sub = ioValueType.subscribe(() => {
+      setSimpleInputSchema();
+    });
+    const sub2 = ioValueDesc.subscribe(() => {
+      setSimpleInputSchema();
+    });
+    return () => {
+      sub.dispose();
+      sub2.dispose();
+    }
+  }, [ioSchema]);
+
+  const simpleValueTypes = Object.values(FieldType);
+
+  return (
+    <div>
+      <small>Value Type:</small><br />
+      <select
+        className="form-select form-select-sm mt-2 mb-2"
+        defaultValue={ioValueType()}
+        onChange={evt => ioValueType(evt.target.value as FieldType)}
+        style={{ width: "150px", display: "inline-block" }}
+      >
+        {simpleValueTypes.map((type) =>
+          <option
+            key={type}
+            value={type}
+          >
+            {type}
+          </option>
+        )}
+      </select>
+      <br />
+      <small>Value Description:</small>
+      <MarkdownEditorInline
+        value={ioValueDesc}
+        hideToolbar={true}
+      />
+    </div>
+  )
+}
+
+export const ComplexInputSchema = (props: { ioSchema: Observable<IOSchema> }) => {
+  const { ioSchema } = props;
+  useObservable(ioSchema);
+
+  const [[fields, newRow], __setState] = useState(() => {
+    const _fields: IField[] = ioSchema().fields || [];
+    // @ts-ignore
+    _fields.forEach(f => f.fakeId = newid());
+    const inMemoryTable = arrayAsTable(_fields, {
+      primaryKeyName: "fakeId",
+      fields: [
+        { name: "fakeId", type: FieldType.string, description: '', defaultValue: () => newid() },
+        { name: "name", type: FieldType.string, description: '' },
+        { name: "type", type: FieldType.string, description: '' },
+        { name: "description", type: FieldType.string, description: '' },
+        { name: "default", type: FieldType.string, description: '' },
+        { name: "optional", type: FieldType.string, description: '' },
+        { name: "isArray", type: FieldType.string, description: '' },
+      ]
+    });
+    const _fieldsDocs = _fields.map(f => initDoc(f, inMemoryTable));
+    const _fieldsDocsObs = observable(_fieldsDocs);
+
+    const newRow = () => {
+      const newField = initDoc({
+        // @ts-ignore
+        fakeId: newid(),
+        name: "",
+        description: "",
+        type: FieldType.string,
+        optional: false,
+        default: "",
+        isArray: false,
+      }, inMemoryTable);
+      _fieldsDocsObs([..._fieldsDocsObs(), newField]);
+      return newField;
+    }
+    return [_fieldsDocsObs, newRow];
+  });
+
+  useObservable(fields);
+
+  function updateSchemaFields() {
+    ioSchema({
+      ...ioSchema(),
+      type: IOSchemaType.complex,
+      fields: fields().map(f => f.toJS()),
+    });
+  }
+
+  useEffect(() => {
+    const subs = fields().map(f => f.q.subscribe(() => updateSchemaFields()));
+    return () => subs.forEach(s => s.dispose());
+  }, [fields()]);
+
+  return (
+    <div style={{ fontSize: '9pt' }} className="mt-2">
+      TODO - Move Datagrid over from peers-kore
+      {/* <Datagrid<IField>
+        primaryKey={{ name: "fakeId", dataType: "string" }}
+        columns={[
+          // { name: "name2", displayName: "Field Name" },
+          { name: "name", displayName: "Field Name", width: "180px" },
+          {
+            name: "type",
+            width: "120px",
+            getContent(doc, ref: any) {
+              return (
+                <select
+                  ref={ref}
+                  className="form-select form-select-sm"
+                  defaultValue={doc.qs.type()}
+                  onChange={evt => doc.qs.type(evt.target.value as FieldType)}
+                >
+                  {Object.values(FieldType).map((type) =>
+                    <option
+                      key={type}
+                      value={type}
+                    >
+                      {type}
+                    </option>
+                  )}
+                </select>
+              )
+            },
+          },
+          { name: "description" },
+          { name: "default", displayName: "Default Value", width: "120px" },
+          { name: "optional", dataType: "boolean", width: "40px" },
+          { name: "isArray", dataType: "boolean", displayName: "Array", width: "40px" },
+          {
+            name: 'delete',
+            displayName: '',
+            width: '40px',
+            getContent(doc: any) {
+              return (
+                <button
+                  className="btn btn-sm"
+                  onClick={() => {
+                    fields([...(_.without(fields(), doc))]);
+                    updateSchemaFields();
+                  }}
+                >
+                  <i className="bi bi-trash"></i>
+                </button>)
+            }
+          },
+        ]}
+        // @ts-ignore
+        data={fields()}
+        disableSorting={true}
+        newRow={newRow}
+      /> */}
+    </div>
+  )
+}

package/src/components/lazy-list.tsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect, useRef } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { useObservable } from '../hooks';
+import { observable } from "@peers-app/peers-sdk";
+
+interface IProps<T> {
+  loadMore: (existingItems: T[]) => Promise<T[]>
+  renderItems: (items: T[]) => React.ReactNode
+  filterItems?:(existingItems: T[]) => T[]
+  endOfList?: React.ReactNode
+  loadingIndicator?: React.ReactNode
+  scrollThreshold?: number | string
+  lazyListStyle?: React.CSSProperties
+  resetTrigger?: any
+}
+
+export function LazyList<T>(props: IProps<T>) {
+  const [itemsObsAry] = useState(() => observable<T[]>([]));
+  const [items] = useObservable(itemsObsAry);
+  const [allLoaded, setAllLoaded] = useState(false);
+  const [loading] = useState(() => observable(false));
+  useObservable(loading);
+  const isLoadingSync = useRef(false); // Synchronous loading flag
+
+  async function loadMore() {
+    if (loading() || isLoadingSync.current) {
+      return;
+    }
+    isLoadingSync.current = true;
+    loading(true);
+    const moreItems = await props.loadMore(items);
+    if (!moreItems.length) {
+      setAllLoaded(true);
+    } else {
+      itemsObsAry([...itemsObsAry(), ...moreItems]);
+    }
+    loading(false);
+    isLoadingSync.current = false;
+  }
+
+  let renderItems = items;
+  if (props.filterItems) {
+    renderItems = props.filterItems(items);
+  }
+
+  useEffect(() => {
+    if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
+      loadMore();
+    }
+  }, [renderItems.length, allLoaded, loading()]);
+
+  useEffect(() => {
+    itemsObsAry([]);
+    setAllLoaded(false);
+    isLoadingSync.current = false; // Reset sync loading flag when resetting
+  }, [props.resetTrigger]);
+  // console.log('existing tasks', items.length);
+  // console.log('rendering tasks', renderItems.length);
+
+  return (
+    <div
+      id="scrollableDiv"
+      style={props.lazyListStyle}
+      // style={{
+      //   // height: '600px',
+      //   overflow: 'auto',
+      //   marginLeft: '10px',
+      //   display: 'flex',
+      //   // flexDirection: 'column-reverse',
+      // }}
+    >
+      <InfiniteScroll
+        dataLength={renderItems.length}
+        next={loadMore}
+        hasMore={!allLoaded}
+        scrollThreshold={props.scrollThreshold}
+        loader={
+          props.loadingIndicator ??
+          <>
+            <div className="d-flex justify-content-center">
+              <div>loading...</div>
+            </div>
+          </>
+        }
+        endMessage={
+          props.endOfList ??
+          <>
+            <div className="d-flex justify-content-center">
+              <i>end of list</i>
+            </div>
+          </>
+        }
+      >
+        {props.renderItems(renderItems)}
+      </InfiniteScroll>
+    </div>
+  )
+}

package/src/components/lazy-sortable-list.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { LazyList } from './lazy-list';
+import { ISortable, SortableList } from './sortable-list';
+
+interface IProps<T> {
+  loadMore: (existingItems: T[]) => Promise<T[]>
+  filterItems?: (existingItems: T[]) => T[]
+  renderItem: (props: { item: T, listId: string, sortHandle: string }) => React.ReactNode,
+  listsGroup?: string
+  onAdd?: ((itemId: string, sortOrder: number) => any),
+  onUpdate?: ((args: { items: T[], ixMoved: number[] }) => any),
+  hidden?: boolean,
+  containerProps?: Record<string, any>
+  dragHandleClassName?: string
+  sortDirection?: 'asc' | 'desc'
+  minHeight?: string | number
+  paddingBottom?: string | number
+  endOfList?: React.ReactNode
+  loadingIndicator?: React.ReactNode
+  scrollThreshold?: string | number
+  lazyListStyle?: React.CSSProperties
+}
+
+export function LazySortableList<T extends ISortable>(props: IProps<T>) {
+
+  return (
+    <LazyList
+      lazyListStyle={props.lazyListStyle}
+      loadMore={props.loadMore}
+      filterItems={props.filterItems}
+      endOfList={props.endOfList}
+      loadingIndicator={props.loadingIndicator}
+      scrollThreshold={props.scrollThreshold}
+      renderItems={items => (
+        <SortableList
+          items={items}
+          sortDirection={props.sortDirection}
+          renderItem={props.renderItem}
+          listsGroup={props.listsGroup}
+          onAdd={props.onAdd}
+          onUpdate={props.onUpdate}
+          hidden={props.hidden}
+          containerProps={props.containerProps}
+          dragHandleClassName={props.dragHandleClassName}
+          minHeight={props.minHeight}
+          paddingBottom={props.paddingBottom}
+        />
+      )}
+    />
+  )
+}