@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/Tags/custom-config-for-tags-column.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable */
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  Tags,
+  useTagsColumn,
+  useTableCollection,
+  CustomColumns,
+} from '@wix/patterns';
+import {
+  DummyEntity,
+  Tags as TagsType,
+} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function CustomizedTagsColumnPosition() {
+  const contacts: DummyEntity[] = [
+    {
+      id: '1',
+      name: 'Sadie Ramirez',
+      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
+    },
+    {
+      id: '2',
+      name: 'Jose Pittman	',
+      tags: { privateTags: { tagIds: [] } },
+    },
+    {
+      id: '3',
+      name: 'Garrett Graves	',
+      tags: { privateTags: { tagIds: ['4'] } },
+    },
+  ];
+
+  const state = useTableCollection<DummyEntity>({
+    queryName: 'contacts-table',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: async ({ search = '' }) => {
+      // your code to fetch the entity's tags
+      return {
+        total: contacts.length,
+        items: contacts,
+      };
+    },
+    fetchErrorMessage: ({ err }) => `Error: ${err}`,
+    itemKey: (item) => item.id!,
+    itemName: (item) => item.name!,
+  });
+
+  const { buildTagsColumn } = useTagsColumn<DummyEntity>();
+
+  const handleBulkUpdateTags = ({
+    entityIds,
+    assignTags,
+    unassignTags,
+  }: {
+    entityIds: string[];
+    assignTags: TagsType;
+    unassignTags: TagsType;
+  }) => {
+    // your code to update the server
+
+    return Promise.resolve();
+  };
+
+  return (
+    <CollectionPage>
+      <CollectionPage.Header title={{ text: "Contacts" }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          customColumns={<CustomColumns />}
+          tags={
+            <Tags
+              entityTypeName="Contact"
+              bulkUpdateTags={handleBulkUpdateTags}
+              columnConfig={{ defaultHidden: false }} // Config here if you use the default position of tags columns
+            />
+          }
+          columns={[
+            buildTagsColumn({ defaultHidden: false }), // Config here if you use the custom position of tags columns
+            {
+              id: 'name',
+              hideable: false,
+              title: 'Name',
+              render: (item) => item.name,
+              width: '250px',
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Tags/customized-filter-position.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable */
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  CollectionToolbarFilters,
+  Table,
+  MultiSelectCheckboxFilter,
+  Tags,
+  idNameArrayFilter,
+  useTagsFilter,
+  useTableCollection,
+  useStaticListFilterCollection,
+} from '@wix/patterns';
+import {
+  DummyEntity,
+  Tags as TagsType,
+} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function CustomizedFilterPosition() {
+  const [filter] = React.useState(() => idNameArrayFilter());
+
+  const filterCollection = useStaticListFilterCollection(
+    filter,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ].map((name) => ({ id: name, name })),
+  );
+
+  const contacts: DummyEntity[] = [
+    {
+      id: '1',
+      name: 'Sadie Ramirez',
+      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
+    },
+    {
+      id: '2',
+      name: 'Jose Pittman	',
+      tags: { privateTags: { tagIds: [] } },
+    },
+    {
+      id: '3',
+      name: 'Garrett Graves	',
+      tags: { privateTags: { tagIds: ['4'] } },
+    },
+  ];
+
+  const state = useTableCollection<DummyEntity>({
+    queryName: 'contacts-table',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: async ({ search = '' }) => {
+      // your code to fetch the entity's tags
+      return {
+        total: contacts.length,
+        items: contacts,
+      };
+    },
+    fetchErrorMessage: ({ err }) => `Error: ${err}`,
+    itemKey: (item) => item.id!,
+    itemName: (item) => item.name!,
+  });
+
+  const { buildTagsFilter } = useTagsFilter(state);
+  const tagsFilter = buildTagsFilter();
+
+  const handleBulkUpdateTags = ({
+    entityIds,
+    assignTags,
+    unassignTags,
+  }: {
+    entityIds: string[];
+    assignTags: TagsType;
+    unassignTags: TagsType;
+  }) => {
+    // your code to update the server
+
+    return Promise.resolve();
+  };
+
+  return (
+    <CollectionPage>
+      <CollectionPage.Header title={{ text: "Contacts" }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          tags={
+            <Tags
+              entityTypeName="Contact"
+              bulkUpdateTags={handleBulkUpdateTags}
+            />
+          }
+          columns={[
+            {
+              id: 'name',
+              hideable: false,
+              title: 'Name',
+              render: (item) => item.name,
+              width: '250px',
+            },
+          ]}
+          filters={
+            <CollectionToolbarFilters>
+              {tagsFilter}
+              <MultiSelectCheckboxFilter
+                popoverProps={{ appendTo: 'window' }}
+                filter={filter}
+                collection={filterCollection}
+              />
+            </CollectionToolbarFilters>
+          }
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Tags/customized-tags-column-position.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable */
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  Tags,
+  useTagsColumn,
+  useTableCollection,
+  CustomColumns,
+} from '@wix/patterns';
+import {
+  DummyEntity,
+  Tags as TagsType,
+} from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+
+function CustomizedTagsColumnPosition() {
+  const contacts: DummyEntity[] = [
+    {
+      id: '1',
+      name: 'Sadie Ramirez',
+      tags: { privateTags: { tagIds: ['1', '2', '4'] } },
+    },
+    {
+      id: '2',
+      name: 'Jose Pittman	',
+      tags: { privateTags: { tagIds: [] } },
+    },
+    {
+      id: '3',
+      name: 'Garrett Graves	',
+      tags: { privateTags: { tagIds: ['4'] } },
+    },
+  ];
+
+  const state = useTableCollection<DummyEntity>({
+    queryName: 'contacts-table',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: async ({ search = '' }) => {
+      // your code to fetch the entity's tags
+      return {
+        total: contacts.length,
+        items: contacts,
+      };
+    },
+    fetchErrorMessage: ({ err }) => `Error: ${err}`,
+    itemKey: (item) => item.id!,
+    itemName: (item) => item.name!,
+  });
+
+  const { buildTagsColumn } = useTagsColumn<DummyEntity>();
+
+  const handleBulkUpdateTags = ({
+    entityIds,
+    assignTags,
+    unassignTags,
+  }: {
+    entityIds: string[];
+    assignTags: TagsType;
+    unassignTags: TagsType;
+  }) => {
+    // your code to update the server
+
+    return Promise.resolve();
+  };
+
+  return (
+    <CollectionPage>
+      <CollectionPage.Header title={{text: "Contacts" }} />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          customColumns={<CustomColumns />}
+          tags={
+            <Tags
+              entityTypeName="Contact"
+              bulkUpdateTags={handleBulkUpdateTags}
+            />
+          }
+          columns={[
+            buildTagsColumn(),
+            {
+              id: 'name',
+              hideable: false,
+              title: 'Name',
+              render: (item) => item.name,
+              width: '250px',
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/Tags/on-table-with-folders.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  TagsFolders,
+  MultiBulkActionToolbar,
+  useCollection,
+  TableFolders,
+  useTableFolders,
+  CustomColumns,
+  OffsetQuery,
+} from '@wix/patterns';
+import { Tags as TagsType } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+function TagsOnTableFolders() {
+  const httpClient = useHttpClient();
+
+  const collection = useCollection<Contact>({
+    queryName: 'tableitems',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts,
+            total: pagingMetadata?.total,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  // Note: This is only for demo/mock purposes.
+  // In real usage, you should use your actual API method to fetch folders
+  const foldersCollection = useCollection<Contact>({
+    queryName: 'tablefolders',
+    paginationMode: 'offset',
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit: 2, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then((res) => {
+          const {
+            data: { contacts = [], pagingMetadata },
+          } = res;
+          return {
+            items: contacts.map((contact) => ({
+              ...contact,
+              id: `folder-${contact.id}`,
+            })),
+            total: 2,
+          };
+        });
+    },
+    fetchErrorMessage: ({ err }) => String(err),
+  });
+
+  const componentState = useTableFolders({
+    items: collection,
+    folders: foldersCollection,
+  });
+
+  const handleBulkUpdateTags = ({
+    entityIds,
+    assignTags,
+    unassignTags,
+  }: {
+    entityIds: string[];
+    assignTags: TagsType;
+    unassignTags: TagsType;
+  }) => {
+    // your code to update the server
+    return Promise.resolve();
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <TableFolders
+          state={componentState}
+          tags={
+            <TagsFolders
+              entityTypeName="Contact"
+              bulkUpdateTags={handleBulkUpdateTags}
+            />
+          }
+          customColumns={<CustomColumns />}
+          columns={[
+            {
+              id: 'name',
+              hideable: false,
+              title: 'Name',
+              render: (contact) => contact.name,
+              renderFolder: (folder) => folder.name,
+              width: '250px',
+            },
+          ]}
+          bulkActionToolbar={() => <MultiBulkActionToolbar />}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}