@wix/patterns 1.476.0 → 1.478.0

package/dist/examples/useSchemaSource/your-own-source.tsx

@@ -1,173 +0,0 @@
-/**
- * Illustrative example for `useSchemaSource` — see `dist/docs/useSchemaSource.md`.
- *
- * It demonstrates one API; the data source, http client and layout around
- * that are scaffolding to make the snippet runnable, not requirements.
- */
-import React from 'react';
-import { FilterOperator } from '@wix/patterns';
-import { CollectionPage } from '@wix/patterns/page';
-import {
-  Table,
-  useSchemaSource,
-  useTableCollection,
-} from '@wix/patterns/schema';
-import type {
-  CollectionBackend,
-  FieldActions,
-  LoadedSchema,
-  Schema,
-} from '@wix/patterns/schema';
-
-type Task = Record<string, unknown> & {
-  id: string;
-  title: string;
-  estimate: number;
-};
-
-function CustomSource() {
-  const tasks: Task[] = [
-    { id: '1', title: 'Design homepage', estimate: 5 },
-    { id: '2', title: 'Set up payments', estimate: 3 },
-    { id: '3', title: 'Write product descriptions', estimate: 8 },
-    { id: '4', title: 'Configure shipping', estimate: 2 },
-  ];
-
-  const schema: Schema = {
-    id: 'docs-schema-source-tasks',
-    idField: 'id',
-    displayField: 'title',
-    fields: {
-      title: { id: 'title', displayName: 'Title', type: 'SHORT_TEXT' },
-      estimate: {
-        id: 'estimate',
-        displayName: 'Estimate (days)',
-        type: 'NUMBER',
-      },
-    },
-    // Which field changes the user may make. Without it, fields are read-only.
-    // Each allowed change needs its action in `fieldActions` below.
-    schemaPermissions: {
-      createField: true,
-      updateField: false,
-      deleteField: true,
-    },
-  };
-
-  // The filter values, keyed by field id. A text field's filter sends
-  // `{ operator, value }`, a number field's sends `{ from, to }`.
-  const matchesFilter = (task: Task, fieldId: string, filter: unknown) => {
-    if (!filter || typeof filter !== 'object') {
-      return true;
-    }
-    const value = task[fieldId];
-    if ('operator' in filter) {
-      const text = String(value ?? '').toLowerCase();
-      const wanted = String(
-        'value' in filter ? filter.value ?? '' : '',
-      ).toLowerCase();
-      switch (filter.operator) {
-        case FilterOperator.CONTAINS:
-          return text.includes(wanted);
-        case FilterOperator.NOT_CONTAINS:
-          return !text.includes(wanted);
-        case FilterOperator.IS_EMPTY:
-          return text === '';
-        case FilterOperator.EXISTS:
-          return text !== '';
-        default:
-          return true;
-      }
-    }
-    const from = 'from' in filter ? filter.from : undefined;
-    const to = 'to' in filter ? filter.to : undefined;
-    if (typeof from !== 'number' && typeof to !== 'number') {
-      return true;
-    }
-    return (
-      typeof value === 'number' &&
-      (typeof from !== 'number' || value >= from) &&
-      (typeof to !== 'number' || value <= to)
-    );
-  };
-
-  // `find` gets search, filters, sort and paging from the query and must
-  // apply them all.
-  const backend: CollectionBackend<Task> = {
-    paginationMode: 'offset',
-    find: async (query, options) => {
-      const {
-        search = '',
-        filters = {},
-        sort = [],
-        offset = 0,
-        limit = 50,
-      } = query;
-      const searchIn = options?.searchableFieldIds ?? ['title'];
-      const found = tasks.filter(
-        (task) =>
-          searchIn.some((fieldId) =>
-            String(task[fieldId] ?? '')
-              .toLowerCase()
-              .includes(search.toLowerCase()),
-          ) &&
-          Object.entries(filters).every(([fieldId, filter]) =>
-            matchesFilter(task, fieldId, filter),
-          ),
-      );
-      if (sort.length) {
-        const [{ fieldName, order }] = sort;
-        found.sort((a, b) => {
-          const left = a[fieldName] as string | number;
-          const right = b[fieldName] as string | number;
-          const diff = left < right ? -1 : left > right ? 1 : 0;
-          return order === 'asc' ? diff : -diff;
-        });
-      }
-      return {
-        items: found.slice(offset, offset + limit),
-        total: found.length,
-      };
-    },
-  };
-
-  // Each change returns the updated fields; the page applies them.
-  const fieldActions: FieldActions = {
-    addField: async (field) => {
-      schema.fields = { ...schema.fields, [field.id]: field };
-      return schema.fields;
-    },
-    deleteField: async (fieldId) => {
-      const { [fieldId]: _deleted, ...rest } = schema.fields;
-      schema.fields = rest;
-      return schema.fields;
-    },
-  };
-
-  const loadSchema = async (): Promise<LoadedSchema<Task>> => ({
-    schema,
-    backend,
-    fieldActions,
-  });
-
-  const source = useSchemaSource<Task>({
-    collectionId: 'docs-schema-source-tasks',
-    loadSchema,
-    // The types the add-field modal offers.
-    fieldModal: {
-      types: [{ patternsType: 'SHORT_TEXT' }, { patternsType: 'NUMBER' }],
-    },
-  });
-  const state = useTableCollection<Task>(source);
-
-  return (
-    <CollectionPage height="400px">
-      <CollectionPage.Header title={{ text: 'Tasks' }} />
-      <CollectionPage.Content>
-        <Table state={state} horizontalScroll />
-      </CollectionPage.Content>
-    </CollectionPage>
-  );
-}
-
-export default CustomSource;