[@mantine/tag-picker] Add full transitions support

mantinedev · May 3, 2021 · 94f7faf · 94f7faf
1 parent 5f2fe5b
commit 94f7faf
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 2 deletions.
diff --git a/docs/src/docs/demos/others/tag-picker/tag-picker-transitions.demo.tsx b/docs/src/docs/demos/others/tag-picker/tag-picker-transitions.demo.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { useMantineTheme } from '@mantine/core';
+import { useListState, randomId } from '@mantine/hooks';
+import { TagPicker, TagPickerTag } from '@mantine/tag-picker';
+import mockdata from './mockdata';
+import CodeDemo from '../../../../components/CodeDemo/CodeDemo';
+
+const code = `<TagPicker
+  transition="rotate-right"
+  transitionDuration={250}
+  transitionTimingFunction="ease"
+  /* ...other props */
+/>`;
+
+export function TagPickerTransitionsDemo() {
+  const theme = useMantineTheme();
+  const [value, onChange] = useState<TagPickerTag>(null);
+  const [categoriesState, categoriesHandlers] = useListState(mockdata);
+  const colors = Object.keys(theme.colors)
+    .filter((color) => color !== 'dark')
+    .map((color) => ({ name: color, color }));
+
+  return (
+    <CodeDemo
+      code={code}
+      language="tsx"
+      demoBackground={theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white}
+    >
+      <div>
+        <TagPicker
+          transition="rotate-right"
+          transitionDuration={250}
+          transitionTimingFunction="ease"
+          data={categoriesState}
+          colors={colors}
+          value={value}
+          description="Select or create new category"
+          createLabel="Create category"
+          deleteLabel="Delete category"
+          noValueLabel="Select category"
+          searchPlaceholder="Search categories"
+          enableColorChange
+          enableCreate
+          enableUpdate
+          enableDelete
+          onChange={onChange}
+          onTagCreate={(val) => {
+            const category = { ...val, id: randomId() };
+            categoriesHandlers.append(category);
+            return category;
+          }}
+          onTagDelete={(id) =>
+            categoriesHandlers.setState(categoriesState.filter((c) => c.id !== id))
+          }
+          onTagUpdate={(id, values) => {
+            const category = { id, ...values };
+
+            categoriesHandlers.setItem(
+              categoriesState.findIndex((c) => c.id === id),
+              category
+            );
+          }}
+        />
+      </div>
+    </CodeDemo>
+  );
+}
diff --git a/docs/src/docs/others/tag-picker.mdx b/docs/src/docs/others/tag-picker.mdx
@@ -7,6 +7,7 @@ slug: /others/tag-picker/
 
 import { TagPickerBaseDemo } from '../demos/others/tag-picker/tag-picker-base.demo';
 import { TagPickerMinimalDemo } from '../demos/others/tag-picker/tag-picker-minimal.demo';
+import { TagPickerTransitionsDemo } from '../demos/others/tag-picker/tag-picker-transitions.demo';
 
 # Mantine tag picker
 
@@ -70,6 +71,18 @@ Enhance tag picker with extra logic:
 
 <TagPickerBaseDemo />
 
+## Change transitions
+
+TagPicker is built with <GatsbyLink to="/core/transition/">Transition</GatsbyLink> component.
+
+You can change transitions with props:
+
+- **transition** – premade transition or transition object
+- **transitionDuration** – transition duration in ms, defaults to 200ms.
+- **transitionTimingFunction** – timing function, defaults to `theme.transitionTimingFunction`
+
+<TagPickerTransitionsDemo />
+
 ## Multiple state
 
 Multiple state is not currently supported, feel free to add this feature and add <GatsbyLink to="/pages/contribute/">open pull request</GatsbyLink>.

diff --git a/src/mantine-tag-picker/src/TagItem/TagItem.tsx b/src/mantine-tag-picker/src/TagItem/TagItem.tsx
@@ -6,6 +6,7 @@ import {
   Badge,
   useMantineTheme,
   MantineThemeOverride,
+  MantineTransition,
 } from '@mantine/core';
 import { useReducedMotion } from '@mantine/hooks';
 import { TagPickerColor, TagPickerTag } from '../types';
@@ -33,6 +34,8 @@ interface TagItemProps {
   enableDelete?: boolean;
   enableColorChange?: boolean;
   transitionDuration?: number;
+  transition?: MantineTransition;
+  transitionTimingFunction: string;
 }
 
 export function TagItem({
@@ -55,6 +58,8 @@ export function TagItem({
   enableDelete,
   enableColorChange,
   transitionDuration,
+  transition = 'skew-up',
+  transitionTimingFunction,
 }: TagItemProps) {
   const classes = useStyles({ theme: useMantineTheme(themeOverride) });
   const controlRef = useRef<HTMLButtonElement>();
@@ -86,7 +91,8 @@ export function TagItem({
       <Transition
         duration={duration}
         mounted={editDropdownOpened}
-        transition="skew-up"
+        transition={transition}
+        timingFunction={transitionTimingFunction}
         themeOverride={themeOverride}
       >
         {(transitionStyles) => (

diff --git a/src/mantine-tag-picker/src/TagPicker.story.tsx b/src/mantine-tag-picker/src/TagPicker.story.tsx
@@ -44,6 +44,7 @@ function TagPickerWrapper(props: TagPickerWrapperProps) {
         value={value}
         onChange={onChange}
         data={data}
+        transition="rotate-right"
         searchPlaceholder="Search categories"
         colors={colors}
         description="Select category or create new one"

diff --git a/src/mantine-tag-picker/src/TagPicker/TagPicker.tsx b/src/mantine-tag-picker/src/TagPicker/TagPicker.tsx
@@ -26,6 +26,8 @@ export function TagPicker({
   transitionDuration,
   controlId,
   labelledBy,
+  transition = 'skew-up',
+  transitionTimingFunction,
   ...others
 }: TagPickerProps) {
   const theme = useMantineTheme(themeOverride);
@@ -58,7 +60,8 @@ export function TagPicker({
       <Transition
         duration={duration}
         mounted={dropdownOpened}
-        transition="skew-up"
+        transition={transition}
+        timingFunction={transitionTimingFunction}
         themeOverride={themeOverride}
       >
         {(transitionStyles) => (
@@ -72,7 +75,9 @@ export function TagPicker({
           >
             <TagsList
               value={value}
+              transition={transition}
               transitionDuration={transitionDuration}
+              transitionTimingFunction={transitionTimingFunction}
               themeOverride={themeOverride}
               {...others}
             />

diff --git a/src/mantine-tag-picker/src/TagsList/TagsList.tsx b/src/mantine-tag-picker/src/TagsList/TagsList.tsx
@@ -75,6 +75,8 @@ export function TagsList({
   enableDelete,
   enableColorChange,
   transitionDuration,
+  transition,
+  transitionTimingFunction,
 }: TagsListProps) {
   const classes = useStyles({ theme: useMantineTheme(themeOverride) });
   const focusTrapRef = useFocusTrap();
@@ -99,6 +101,8 @@ export function TagsList({
       enableUpdate={enableUpdate}
       enableDelete={enableDelete}
       enableColorChange={enableColorChange}
+      transition={transition}
+      transitionTimingFunction={transitionTimingFunction}
       transitionDuration={transitionDuration}
       themeOverride={themeOverride}
     />