@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/MultiBulkActionToolbar/basic-secondary-action.tsx

@@ -0,0 +1,177 @@
+import { Avatar, CustomModalLayout, Modal, Page } from '@wix/design-system';
+import React from 'react';
+import {
+  MultiBulkActionToolbar,
+  Filter,
+  Table,
+  PageWrapper,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import {
+  Visible,
+  Download,
+  Block,
+  ChangeOrder,
+} from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function MultiBulkActionToolbarSecondaryActions() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'MultiBulkActionToolbar-SecondaryActions',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+  const collection = state.collection;
+  React.useEffect(() => {
+    collection.bulkSelect.selectAll();
+  }, []);
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                    imgProps={{ src: contact.info?.picture?.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.info?.jobTitle,
+              },
+              {
+                title: 'Last Activity',
+                render: (contact) =>
+                  contact.lastActivity?.activityDate?.toLocaleString(),
+              },
+            ]}
+            bulkActionModal={({
+              isModalOpen,
+              allSelected,
+              selectedValues,
+              uncheckedValues,
+              closeModal,
+              query,
+            }) => (
+              <Modal isOpen={isModalOpen}>
+                <CustomModalLayout
+                  height={300}
+                  dataHook="bulk-action-custom-modal-layout"
+                  title="Edit Product"
+                  primaryButtonOnClick={closeModal}
+                  primaryButtonText="Save"
+                  secondaryButtonOnClick={closeModal}
+                  secondaryButtonText="Cancel"
+                >
+                  <pre>
+                    {JSON.stringify(
+                      {
+                        allSelected,
+                        selectedValues: selectedValues.length,
+                        uncheckedValues: uncheckedValues.length,
+                        query: {
+                          page: query.page,
+                        },
+                      },
+                      null,
+                      2,
+                    )}
+                  </pre>
+                </CustomModalLayout>
+              </Modal>
+            )}
+            bulkActionToolbar={({ selectedValues, openModal }) => {
+              return (
+                <MultiBulkActionToolbar
+                  primaryActionItems={[
+                    {
+                      dataHook: 'primary-action-1',
+                      label: 'Primary 1',
+                      prefixIcon: <Visible />,
+                      subItems: [
+                        { label: 'option 1' },
+                        { label: 'option 2' },
+                        { label: 'option 3' },
+                      ],
+                    },
+                    {
+                      dataHook: 'primary-action-2',
+                      label: 'Primary 2',
+                      prefixIcon: <Download />,
+                      subItems: [
+                        { label: 'option 1' },
+                        { label: 'option 2' },
+                        { label: 'option 3' },
+                      ],
+                    },
+                  ]}
+                  secondaryActionItems={[
+                    {
+                      dataHook: 'secondary-action-1',
+                      onClick: openModal,
+                      label: 'Secondary 1',
+                      prefixIcon: <Block />,
+                    },
+                    {
+                      dataHook: 'secondary-action-2',
+                      onClick: openModal,
+                      disabled: true,
+                      label: 'Secondary 2',
+                      prefixIcon: <ChangeOrder />,
+                    },
+                  ]}
+                />
+              );
+            }}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/MultiBulkActionToolbar/bulk-action.tsx

@@ -0,0 +1,169 @@
+import {
+  Avatar,
+  Card,
+  CustomModalLayout,
+  Modal,
+  Page,
+  Text,
+} from '@wix/design-system';
+import React from 'react';
+import {
+  MultiBulkActionToolbar,
+  Filter,
+  Table,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { Edit, Download, ChangeOrder, Block } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function BulkActions() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'MultiBulkActionToolbar-BulkActions',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+  const collection = state.collection;
+  React.useEffect(() => {
+    collection.bulkSelect.selectAll();
+  }, []);
+
+  return (
+    <Page height="400px">
+      <Page.Header title="Contacts" />
+      <Page.Content>
+        <Table
+          state={state}
+          title={<ToolbarTitle title="Contacts" showTotal />}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          bulkActionModal={({
+            isModalOpen,
+            selectedValues,
+            closeModal,
+            query,
+          }) => (
+            <Modal isOpen={isModalOpen}>
+              <CustomModalLayout
+                height={300}
+                dataHook="bulk-action-custom-modal-layout"
+                title="Edit Contacts"
+                primaryButtonOnClick={closeModal}
+                primaryButtonText="save"
+                secondaryButtonOnClick={closeModal}
+                secondaryButtonText="cancel"
+              >
+                {selectedValues.map((value, index) => (
+                  <Card>
+                    <Text
+                      key={value._id}
+                      dataHook={`selected-value-text-${index}`}
+                    >
+                      Page: {query.page}; Name:{' '}
+                      {`${value.info?.name?.first} ${value.info?.name?.last}`}
+                    </Text>
+                  </Card>
+                ))}
+              </CustomModalLayout>
+            </Modal>
+          )}
+          bulkActionToolbar={({ selectedValues, openModal }) => {
+            const disabled = selectedValues.length > 4;
+            return (
+              <MultiBulkActionToolbar
+                primaryActionItems={[
+                  {
+                    dataHook: 'edit-button',
+                    onClick: openModal,
+                    label: 'Edit',
+                    prefixIcon: <Edit />,
+                  },
+                  {
+                    dataHook: 'download-button',
+                    onClick: openModal,
+                    label: 'Download',
+                    prefixIcon: <Download />,
+                    tooltip: disabled
+                      ? 'Downloading is supported for up to 10 items'
+                      : undefined,
+                    disabled,
+                  },
+                ]}
+                secondaryActionItems={[
+                  {
+                    dataHook: 'block-button',
+                    onClick: openModal,
+                    label: 'Block',
+                    prefixIcon: <Block />,
+                  },
+                  {
+                    dataHook: 'change-button',
+                    onClick: openModal,
+                    label: 'Change',
+                    disabled,
+                    prefixIcon: <ChangeOrder />,
+                  },
+                ]}
+              />
+            );
+          }}
+        />
+      </Page.Content>
+    </Page>
+  );
+}

package/dist/docs/MultiBulkActionToolbar/extend-menu-items.tsx

@@ -0,0 +1,174 @@
+import { Avatar, CustomModalLayout, Modal, Page } from '@wix/design-system';
+import React from 'react';
+import {
+  MultiBulkActionToolbar,
+  Filter,
+  Table,
+  PageWrapper,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+} from '@wix/patterns';
+import {
+  Visible,
+  Download,
+  Block,
+  ChangeOrder,
+} from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function MultiBulkActionToolbarExtensionMenuItems() {
+
+  const state = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'MultiBulkActionToolbar-ExtensionMenuItems',
+    paginationMode: 'offset',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                    imgProps={{ src: contact.info?.picture?.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.info?.jobTitle,
+              },
+              {
+                title: 'Last Activity',
+                render: (contact) =>
+                  contact.lastActivity?.activityDate?.toLocaleString(),
+              },
+            ]}
+            bulkActionModal={({
+              isModalOpen,
+              allSelected,
+              selectedValues,
+              uncheckedValues,
+              closeModal,
+              query,
+            }) => (
+              <Modal isOpen={isModalOpen}>
+                <CustomModalLayout
+                  height={300}
+                  dataHook="bulk-action-custom-modal-layout"
+                  title="Edit Product"
+                  primaryButtonOnClick={closeModal}
+                  primaryButtonText="Save"
+                  secondaryButtonOnClick={closeModal}
+                  secondaryButtonText="Cancel"
+                >
+                  <pre>
+                    {JSON.stringify(
+                      {
+                        allSelected,
+                        selectedValues: selectedValues.length,
+                        uncheckedValues: uncheckedValues.length,
+                        query: {
+                          page: query.page,
+                        },
+                      },
+                      null,
+                      2,
+                    )}
+                  </pre>
+                </CustomModalLayout>
+              </Modal>
+            )}
+            bulkActionToolbar={({ selectedValues, openModal }) => {
+              return (
+                <MultiBulkActionToolbar
+                  containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
+                  primaryActionItems={[
+                    {
+                      dataHook: 'primary-action-1',
+                      label: 'Primary 1',
+                      prefixIcon: <Visible />,
+                      subItems: [
+                        { label: 'option 1' },
+                        { label: 'option 2' },
+                        { label: 'option 3' },
+                      ],
+                    },
+                    {
+                      dataHook: 'primary-action-2',
+                      label: 'Primary 2',
+                      prefixIcon: <Download />,
+                      subItems: [
+                        { label: 'option 1' },
+                        { label: 'option 2' },
+                        { label: 'option 3' },
+                      ],
+                    },
+                  ]}
+                  secondaryActionItems={[
+                    {
+                      dataHook: 'secondary-action-1',
+                      onClick: openModal,
+                      label: 'Secondary 1',
+                      prefixIcon: <Block />,
+                    },
+                    {
+                      dataHook: 'secondary-action-2',
+                      onClick: openModal,
+                      disabled: true,
+                      label: 'Secondary 2',
+                      prefixIcon: <ChangeOrder />,
+                    },
+                  ]}
+                />
+              );
+            }}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/MultiBulkActionToolbar/maximum-selection.tsx

@@ -0,0 +1,168 @@
+import {
+  Avatar,
+  Card,
+  CustomModalLayout,
+  Modal,
+  Page,
+  Text,
+} from '@wix/design-system';
+import React from 'react';
+import {
+  MultiBulkActionToolbar,
+  Filter,
+  Table,
+  PageWrapper,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { Edit, Download, ChangeOrder, Block } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function MultiBulkActionToolbarMaxSelection() {
+  const tableState = useTableCollection<contacts.Contact, ContactsFilters>({
+    queryName: 'contacts-BulkActionsWithMaxSelection',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      if (filters.level) {
+        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchErrorMessage: () => 'Error Fetching Contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={tableState}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            maxSelection={5}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                    imgProps={{ src: contact.info?.picture?.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) =>
+                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.info?.jobTitle,
+              },
+              {
+                title: 'Last Activity',
+                render: (contact) =>
+                  contact.lastActivity?.activityDate?.toLocaleString(),
+              },
+            ]}
+            bulkActionModal={({
+              isModalOpen,
+              selectedValues,
+              closeModal,
+              query,
+            }) => (
+              <Modal isOpen={isModalOpen}>
+                <CustomModalLayout
+                  height={300}
+                  dataHook="bulk-action-custom-modal-layout"
+                  title="Edit Contacts"
+                  primaryButtonOnClick={closeModal}
+                  primaryButtonText="save"
+                  secondaryButtonOnClick={closeModal}
+                  secondaryButtonText="cancel"
+                >
+                  {selectedValues.map((value, index) => (
+                    <Card>
+                      <Text
+                        key={value._id}
+                        dataHook={`selected-value-text-${index}`}
+                      >
+                        Page: {query.page}; Name:{' '}
+                        {`${value.info?.name?.first} ${value.info?.name?.last}`}
+                      </Text>
+                    </Card>
+                  ))}
+                </CustomModalLayout>
+              </Modal>
+            )}
+            bulkActionToolbar={({ selectedValues, openModal }) => {
+              const disabled = selectedValues.length > 4;
+              return (
+                <MultiBulkActionToolbar
+                  primaryActionItems={[
+                    {
+                      dataHook: 'edit-button',
+                      onClick: openModal,
+                      label: 'Edit',
+                      prefixIcon: <Edit />,
+                    },
+                    {
+                      dataHook: 'download-button',
+                      onClick: openModal,
+                      label: 'Download',
+                      prefixIcon: <Download />,
+                      tooltip: disabled
+                        ? 'Downloading is supported for up to 10 items'
+                        : undefined,
+                      disabled,
+                    },
+                  ]}
+                  secondaryActionItems={[
+                    {
+                      dataHook: 'block-button',
+                      onClick: openModal,
+                      label: 'Block',
+                      prefixIcon: <Block />,
+                    },
+                    {
+                      dataHook: 'change-button',
+                      onClick: openModal,
+                      label: 'Change',
+                      disabled,
+                      prefixIcon: <ChangeOrder />,
+                    },
+                  ]}
+                />
+              );
+            }}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}