Merge branch 'improve/improve_left_bar' into develop

apps/builder/src/page/App/Module/DataWorkspace/components/ActionSpaceTree/index.tsx

@@ -8,7 +8,6 @@ import { getActionList } from "@/redux/currentApp/action/actionSelector"
 import { getActionExecutionResultWithOutIgnoreKey } from "@/redux/currentApp/executionTree/executionSelector"
 import { FocusManager } from "@/utils/focusManager"
 import { BaseDataItem } from "../BaseDataItem"
-import { BaseDataItemContextProvider } from "../BaseDataItem/context"
 
 export const ActionSpaceTree: FC = () => {
  const { t } = useTranslation()
@@ -36,22 +35,18 @@ export const ActionSpaceTree: FC = () => {
  }}
  destroyChildrenWhenClose
  >
- <BaseDataItemContextProvider>
- {Object.keys(actionExecution).map((actionDisplayName) => (
- <BaseDataItem
- key={actionDisplayName}
- title={actionDisplayName}
- level={0}
- value={
- actionExecution[actionDisplayName] as Record<string, unknown>
- }
- haveMoreAction
- selectedDisplayNames={[selectedAction?.displayName ?? ""]}
- onClick={handleActionSelect}
- dataType="action"
- />
- ))}
- </BaseDataItemContextProvider>
+ {Object.keys(actionExecution).map((actionDisplayName) => (
+ <BaseDataItem
+ key={actionDisplayName}
+ title={actionDisplayName}
+ level={0}
+ value={actionExecution[actionDisplayName] as Record<string, unknown>}
+ haveMoreAction
+ selectedDisplayNames={[selectedAction?.displayName ?? ""]}
+ onClick={handleActionSelect}
+ dataType="action"
+ />
+ ))}
  </PanelBar>
  )
 }

apps/builder/src/page/App/Module/DataWorkspace/components/BaseDataItem/index.tsx

@@ -1,15 +1,17 @@
 import { getIconFromWidgetType } from "@illa-public/icon"
 import { AnimatePresence, motion } from "framer-motion"
-import { FC, useContext, useState } from "react"
+import { FC, useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
 import { CaretRightIcon } from "@illa-design/react"
 import { ReactComponent as StateIcon } from "@/assets/dataWorkspace/state.svg"
 import IconHotSpot from "@/components/IconHotSpot"
 import { MovableModal } from "@/components/Modal/movableModal"
 import { panelBarItemContainerAnimationVariants } from "@/components/PanelBar/style"
-import { ViewItemShape } from "../../../../components/InspectPanel/PanelSetters/TabsSetter/TabListSetter/interface"
+import { ViewItemShape } from "@/page/App/components/InspectPanel/PanelSetters/TabsSetter/TabListSetter/interface"
+import { getExpandedWidgets } from "@/redux/config/configSelector"
+import { configActions } from "../../../../../../redux/config/configSlice"
 import { MoreAction } from "../MoreAction"
 import { WorkSpaceTreeNode } from "../WorkSpaceTreeItem/WorkSpaceTreeNode"
-import { BaseDataItemContext } from "./context"
 import { BaseDataItemProps } from "./interface"
 import {
  applyExpandIconStyle,
@@ -55,21 +57,22 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  selectedDisplayNames,
  } = props
  const [isOpenCodeModal, setIsOpenCodeModal] = useState(false)
- const { handleUpdateExpandedWidget, expandedStatus } =
- useContext(BaseDataItemContext)
- const isExpanded =
- (canExpand ?? false) && (expandedStatus.get(title) ?? false)
+ const expandedStatus = useSelector(getExpandedWidgets)
+ const isExpanded = (canExpand ?? false) && (expandedStatus?.[title] ?? false)
 
  const isSelected = selectedDisplayNames?.includes(title) ?? false
-
+ const dispatch = useDispatch()
  const handleClickOnContainer = () => {
  onClick?.(title, type ?? "")
- handleUpdateExpandedWidget(title, isExpanded)
  }
 
  const handleClickOnExpandIcon = (e: React.MouseEvent) => {
  e.stopPropagation()
- handleUpdateExpandedWidget(title, isExpanded)
+ if (!isExpanded) {
+ dispatch(configActions.addExpandedWidgetReducer([title]))
+ } else {
+ dispatch(configActions.removeExpandWidgetReducer([title]))
+ }
  }
 
  return (
@@ -82,7 +85,7 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  <div css={itemContainerStyle(level)}>
  <div css={expendContainerStyle}>
  <span
- css={applyExpandIconStyle(isExpanded, !!canExpand)}
+ css={applyExpandIconStyle(isExpanded, !!canExpand, isSelected)}
  onClick={handleClickOnExpandIcon}
  id="expand-icon"
  >

apps/builder/src/page/App/Module/DataWorkspace/components/BaseDataItem/style.ts

@@ -61,6 +61,7 @@ export const titleStyle = css`
 export const applyExpandIconStyle = (
  isExpanded: boolean,
  canExpand: boolean,
+ isSelected: boolean,
 ) => css`
  font-size: 8px;
  line-height: 0;
@@ -74,8 +75,7 @@ export const applyExpandIconStyle = (
  align-items: center;
  justify-content: center;
  flex: none;
- visibility: ${canExpand ? "visible" : "hidden"};
- visibility: hidden;
+ visibility: ${canExpand ? (isSelected ? "visible" : "hidden") : "hidden"};
 `
 
 export const iconContainerStyle = css`