@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/More Actions/integrate-with-extension.tsx

@@ -0,0 +1,100 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function Extensions() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Extensions',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header
+        title={{ text: 'Contacts' }}
+        subtitle={{ text: 'My Contacts' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
+            items={[
+              [
+                {
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+            ]}
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/More Actions/more-actions-in-the-toolbar.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Page } from '@wix/design-system';
+import {
+  Table,
+  PageWrapper,
+  useTableCollection,
+  OffsetQuery,
+  MoreActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+
+function Toolbar() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Toolbar',
+    paginationMode: 'offset',
+    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header />
+        <Page.Content>
+          <Table
+            state={state}
+            moreActions={
+              <MoreActions
+                items={[
+                  [
+                    {
+                      text: 'Do Action #1',
+                      prefixIcon: <InvoiceSmall />,
+                      onClick: () => {
+                        console.log('Action #1');
+                      },
+                    },
+                    {
+                      text: 'Another Action #2',
+                      prefixIcon: <VisibleSmall />,
+                      onClick: () => {
+                        console.log('Action #2');
+                      },
+                    },
+                  ],
+                  [
+                    {
+                      text: 'Move',
+                      prefixIcon: <InvoiceSmall />,
+                      onClick: () => {
+                        console.log('Move #1');
+                      },
+                    },
+                    {
+                      text: 'Duplicate',
+                      prefixIcon: <VisibleSmall />,
+                      onClick: () => {
+                        console.log('Duplicate #2');
+                      },
+                    },
+                  ],
+                ]}
+              />
+            }
+            columns={[
+              {
+                id: 'name',
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+            ]}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/More Actions/more-actions-with-a-divider.tsx

@@ -0,0 +1,115 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import {
+  Table,
+  useTableCollection,
+  MoreActions,
+  PrimaryActions,
+} from '@wix/patterns';
+import { CollectionPage } from '@wix/patterns/page';
+import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function Toolbar() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-Toolbar',
+    itemName: (contact) =>
+      `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+    fetchData: (query) => {
+      const { limit, offset, search } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {},
+  });
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header
+        title={{ text: 'Contacts' }}
+        subtitle={{ text: 'My Contacts' }}
+        primaryAction={
+          <PrimaryActions
+            label="Do something"
+            onClick={() => console.log('I do something')}
+          />
+        }
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  text: 'Do Action #1',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Action #1');
+                  },
+                },
+                {
+                  text: 'Another Action #2',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Action #2');
+                  },
+                },
+              ],
+              [
+                {
+                  text: 'Move',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Move #1');
+                  },
+                },
+                {
+                  text: 'Duplicate',
+                  prefixIcon: <VisibleSmall />,
+                  onClick: () => {
+                    console.log('Duplicate #2');
+                  },
+                },
+              ],
+            ]}
+          />
+        }
+      />
+      <CollectionPage.Content>
+        <Table
+          state={state}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '50px',
+              hideable: false,
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              id: 'name',
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}