feat: dashkit and action panel toggle animations properties

gravity-ui · Jan 30, 2024 · ef55821 · ef55821
1 parent 9f896cb
commit ef55821
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 38 deletions.
diff --git a/src/components/ActionPanel/ActionPanel.tsx b/src/components/ActionPanel/ActionPanel.tsx
@@ -17,13 +17,15 @@ export type ActionPanelItem = {
 export type ActionPanelProps = {
     items: ActionPanelItem[];
     className?: string;
-    enable?: boolean;
+    disable?: boolean;
+    toggleAnimation?: boolean;
 };
 
 const b = cn('dashkit-action-panel');
 
 export const ActionPanel = (props: ActionPanelProps) => {
-    const isHidden = !props.enable;
+    const isDisabled = props.disable ?? false;
+    const isAnimated = props.toggleAnimation ?? false;
     const nodeRef = React.useRef<HTMLDivElement | null>(null);
 
     const content = (
@@ -47,15 +49,19 @@ export const ActionPanel = (props: ActionPanelProps) => {
         </div>
     );
 
-    return (
-        <CSSTransition
-            in={!isHidden}
-            nodeRef={nodeRef}
-            classNames={b(null)}
-            timeout={600}
-            unmountOnExit
-        >
-            {content}
-        </CSSTransition>
-    );
+    if (isAnimated) {
+        return (
+            <CSSTransition
+                in={!isDisabled}
+                nodeRef={nodeRef}
+                classNames={b(null)}
+                timeout={300}
+                unmountOnExit
+            >
+                {content}
+            </CSSTransition>
+        );
+    } else {
+        return isDisabled ? null : content;
+    }
 };
diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx
@@ -22,6 +22,7 @@ interface DashKitGeneralProps {
     editMode: boolean;
     draggableHandleClassName?: string;
     overlayControls?: Record<string, OverlayControlItem[]>;
+    editModeAnimation?: boolean;
 }
 
 interface DashKitDefaultProps {

diff --git a/src/components/DashKit/__stories__/CssApiShowcase.tsx b/src/components/DashKit/__stories__/CssApiShowcase.tsx
@@ -104,7 +104,7 @@ export const CssApiShowcase: React.FC = () => {
             </style>
             <Demo title="CSS API">
                 <DemoRow title="Component view">
-                    <ActionPanel enable={true} items={items} />
+                    <ActionPanel items={items} />
                     <DashKit editMode={true} config={getConfig()} />
                 </DemoRow>
             </Demo>

diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx
@@ -35,6 +35,7 @@ type DashKitDemoState = {
     customControlsActionData: number;
     showCustomMenu: boolean;
     enableActionPanel: boolean;
+    enableAnimations: boolean;
 };
 
 export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
@@ -53,6 +54,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
         customControlsActionData: 0,
         showCustomMenu: true,
         enableActionPanel: false,
+        enableAnimations: true,
     };
 
     private dashKitRef = React.createRef<DashKit>();
@@ -107,6 +109,17 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                         {editMode ? 'Disable editMode' : 'Enable editMode'}
                     </Button>
                     <div className={b('controls-line')}>
+                        <Button
+                            view="normal"
+                            size="m"
+                            onClick={() => this.toggleAnimations()}
+                            className={b('btn-contol')}
+                            disabled={!editMode}
+                        >
+                            {this.state.enableAnimations
+                                ? 'Disable animations'
+                                : 'Enable animations'}
+                        </Button>
                         <Button
                             view="normal"
                             size="m"
@@ -175,12 +188,14 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                 <DemoRow title="Last action in DashKit">{this.state.lastAction}</DemoRow>
                 <DemoRow title="Component view">
                     <ActionPanel
-                        enable={editMode ? this.state.enableActionPanel : false}
                         items={this.getActionPanelItems()}
+                        toggleAnimation={this.state.enableAnimations}
+                        disable={editMode ? !this.state.enableActionPanel : true}
                     />
                     <DashKit
                         config={this.state.config}
                         editMode={editMode}
+                        editModeAnimation={this.state.enableAnimations}
                         itemsStateAndParams={this.state.itemsStateAndParams}
                         defaultGlobalParams={this.state.defaultGlobalParams}
                         globalParams={this.state.globalParams}
@@ -367,6 +382,10 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
         this.setState({enableActionPanel: !this.state.enableActionPanel});
     }
 
+    private toggleAnimations() {
+        this.setState({enableAnimations: !this.state.enableAnimations});
+    }
+
     private getActionPanelItems() {
         return [
             {

diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
@@ -43,40 +43,55 @@ class GridItem extends React.PureComponent {
 
     renderOverlay() {
         const {overlayControls} = this.props;
-        const {editMode} = this.context;
+        const {editMode, editModeAnimation} = this.context;
         const isHidden = !editMode || this.props.item.data._editActive;
 
         const {item} = this.props;
         const controls = overlayControls && overlayControls[item.type];
 
-        return (
-            <>
-                <CSSTransition
-                    in={!isHidden}
-                    nodeRef={this.overlayRef}
-                    classNames={b('overlay')}
-                    timeout={300}
-                    unmountOnExit
-                >
+        if (editModeAnimation) {
+            return (
+                <>
+                    <CSSTransition
+                        in={!isHidden}
+                        nodeRef={this.overlayRef}
+                        classNames={b('overlay')}
+                        timeout={300}
+                        unmountOnExit
+                    >
+                        <div ref={this.overlayRef} className={b('overlay')} />
+                    </CSSTransition>
+                    <CSSTransition
+                        in={!isHidden}
+                        nodeRef={this.controlsRef}
+                        classNames={b('controls')}
+                        timeout={300}
+                        unmountOnExit
+                    >
+                        <OverlayControls
+                            ref={this.controlsRef}
+                            configItem={item}
+                            items={controls}
+                            overlayControls={overlayControls}
+                            className={b('controls')}
+                        />
+                    </CSSTransition>
+                </>
+            );
+        } else {
+            return isHidden ? null : (
+                <>
                     <div ref={this.overlayRef} className={b('overlay')} />
-                </CSSTransition>
-                <CSSTransition
-                    in={!isHidden}
-                    nodeRef={this.controlsRef}
-                    classNames={b('controls')}
-                    timeout={300}
-                    unmountOnExit
-                >
                     <OverlayControls
                         ref={this.controlsRef}
                         configItem={item}
                         items={controls}
                         overlayControls={overlayControls}
                         className={b('controls')}
                     />
-                </CSSTransition>
-            </>
-        );
+                </>
+            );
+        }
     }
 
     render() {
@@ -94,7 +109,7 @@ class GridItem extends React.PureComponent {
             noOverlay,
             withCustomHandle,
         } = this.props;
-        const {editMode} = this.context;
+        const {editMode, editModeAnimation} = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
@@ -120,7 +135,12 @@ class GridItem extends React.PureComponent {
                 ref={this.props.forwardedRef}
                 {...reactGridLayoutProps}
             >
-                <div className={b('item', {editMode: editMode && !_editActive && !noOverlay})}>
+                <div
+                    className={b('item', {
+                        editMode: editMode && !_editActive && !noOverlay,
+                        animate: editModeAnimation,
+                    })}
+                >
                     <Item
                         id={this.props.id}
                         item={this.props.item}

diff --git a/src/hocs/withContext.js b/src/hocs/withContext.js
@@ -199,6 +199,7 @@ function useMemoStateContext(props) {
             revertToOriginalLayout,
             forwardedMetaRef: props.forwardedMetaRef,
             draggableHandleClassName: props.draggableHandleClassName,
+            editModeAnimation: props.editModeAnimation,
         }),
         [
             resultLayout,
@@ -221,6 +222,7 @@ function useMemoStateContext(props) {
             revertToOriginalLayout,
             props.forwardedMetaRef,
             props.draggableHandleClassName,
+            props.editModeAnimation,
         ],
     );
 }