feat: customizable collapse transition

mll-lab · Mar 18, 2024 · 5ddc372 · 5ddc372
1 parent 5556a03
commit 5ddc372
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/Collapse/Collapse.ts b/src/Collapse/Collapse.ts
@@ -1,7 +1,7 @@
 import { Collapse as AntdCollapse } from 'antd';
 import { CollapseProps as AntdCollapseProps } from 'antd/lib/collapse/Collapse';
 import { CollapsePanelProps as AntdCollapsePanelProps } from 'antd/lib/collapse/CollapsePanel';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
 
@@ -18,6 +18,14 @@ const StyledCollapse: typeof AntdCollapse = styled(
   .mll-ant-collapse-item > .mll-ant-collapse-header {
     align-items: center;
   }
+
+  .ant-motion-collapse {
+    ${(props) =>
+      props.theme.collapseTransition &&
+      css`
+        transition: ${props.theme.collapseTransition} !important;
+      `}
+  }
 `;
 
 export const Collapse: typeof AntdCollapse = StyledCollapse;

diff --git a/src/theme.ts b/src/theme.ts
@@ -36,6 +36,7 @@ export type Theme = {
   backgroundColor: string;
   borderColor: string;
   collapseBackgroundColor: string;
+  collapseTransition?: string;
   containerBorderColor: string;
   dividerColor: string;
   focusedRowColor: string;
@@ -66,6 +67,7 @@ export const THEME: Theme = {
   backgroundColor: PALETTE.blueTintedGray,
   borderColor: PALETTE.blue,
   collapseBackgroundColor: PALETTE.lightBlue,
+  collapseTransition: '0.05s',
   containerBorderColor: PALETTE.gray4,
   dividerColor: PALETTE.gray4,
   focusedRowColor: PALETTE.lightBlue,