Merge branch 'improve/improve_left_bar' into develop

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

@@ -8,6 +8,7 @@ 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()
@@ -35,18 +36,22 @@ export const ActionSpaceTree: FC = () => {
  }}
  destroyChildrenWhenClose
  >
- {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"
+ />
+ ))}
+ </BaseDataItemContextProvider>
  </PanelBar>
  )
 }

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

@@ -0,0 +1,30 @@
+import { FC, createContext, useState } from "react"
+import { Injected, Props } from "./interface"
+
+export const BaseDataItemContext = createContext<Injected>({} as Injected)
+
+export const BaseDataItemContextProvider: FC<Props> = (props) => {
+ const { children } = props
+
+ const [expandedStatus, setExpandedStatus] = useState(new Map())
+
+ const handleUpdateExpandedWidget = (
+ displayName: string,
+ currentStatus: boolean,
+ ) => {
+ setExpandedStatus((prev) => {
+ prev.set(displayName, !currentStatus)
+ return new Map(prev)
+ })
+ }
+
+ return (
+ <BaseDataItemContext.Provider
+ value={{ handleUpdateExpandedWidget, expandedStatus }}
+ >
+ {children}
+ </BaseDataItemContext.Provider>
+ )
+}
+
+BaseDataItemContextProvider.displayName = "SelectedProvider"

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react"
+
+export interface Injected {
+ handleUpdateExpandedWidget: (
+ displayName: string,
+ currentExpanded: boolean,
+ ) => void
+ expandedStatus: Map<string, boolean>
+}
+
+export interface Props {
+ children: ReactNode
+}

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

@@ -1,19 +1,22 @@
 import { getIconFromWidgetType } from "@illa-public/icon"
-import { FC, useState } from "react"
-import useMeasure from "react-use-measure"
+import { AnimatePresence, motion } from "framer-motion"
+import { FC, useContext, useState } from "react"
 import { CaretRightIcon, getColor } from "@illa-design/react"
 import { ReactComponent as LocateIcon } from "@/assets/dataWorkspace/locate.svg"
 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 { MoreAction } from "../MoreAction"
 import { WorkSpaceTreeNode } from "../WorkSpaceTreeItem/WorkSpaceTreeNode"
+import { BaseDataItemContext } from "./context"
 import { BaseDataItemProps } from "./interface"
 import {
  applyExpandIconStyle,
  expendContainerStyle,
  iconContainerStyle,
  itemContainerStyle,
+ itemContentStyle,
  modalBodyContainerStyle,
  outerContainerStyle,
  rectangleStyle,
@@ -31,28 +34,44 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  haveMoreAction,
  value,
  onClick,
+ onFocus,
  dataType,
  selectedDisplayNames,
  } = props
  const [isOpenCodeModal, setIsOpenCodeModal] = useState(false)
- const [measureRef, rect] = useMeasure()
+ const { handleUpdateExpandedWidget, expandedStatus } =
+ useContext(BaseDataItemContext)
+ const isExpanded =
+ (canExpand ?? false) && (expandedStatus.get(title) ?? false)
 
  const isSelected = selectedDisplayNames?.includes(title) ?? false
 
  const handleClickOnContainer = () => {
  onClick?.(title, type ?? "")
  }
 
+ const handleOnFocus = () => {
+ onFocus?.(title)
+ }
+
+ const handleClickOnExpandIcon = (e: React.MouseEvent) => {
+ e.stopPropagation()
+ handleUpdateExpandedWidget(title, isExpanded)
+ }
+
  return (
  <>
  <div
  css={outerContainerStyle(isSelected)}
- ref={measureRef}
  onClick={handleClickOnContainer}
+ id={`${title}-baseDataItemContainer`}
  >
  <div css={itemContainerStyle(level)}>
  <div css={expendContainerStyle}>
- <span css={applyExpandIconStyle(false, !!canExpand)}>
+ <span
+ css={applyExpandIconStyle(isExpanded, !!canExpand)}
+ onClick={handleClickOnExpandIcon}
+ >
  <CaretRightIcon />
  </span>
  {!!type && level >= 1 && <div css={rectangleStyle} />}
@@ -63,7 +82,10 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  </div>
  <div css={iconContainerStyle} id="action-bar">
  {canFocused && (
- <IconHotSpot inactiveColor={getColor("grayBlue", "02")}>
+ <IconHotSpot
+ inactiveColor={getColor("grayBlue", "02")}
+ onClick={handleOnFocus}
+ >
  <LocateIcon />
  </IconHotSpot>
  )}
@@ -76,23 +98,36 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  </div>
  </div>
  </div>
- {dataType === "widget" &&
- Array.isArray(value.$childrenNode) &&
- value.$childrenNode.map((item) => (
- <BaseDataItem
- key={item.displayName}
- title={item.displayName}
- value={item}
- level={level + 1}
- dataType="widget"
- type={item.$widgetType as string}
- canExpand={item.$childrenNode.length > 0}
- haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
- canFocused={item.$widgetType.endsWith("_WIDGET")}
- selectedDisplayNames={selectedDisplayNames}
- onClick={onClick}
- />
- ))}
+
+ {dataType === "widget" && Array.isArray(value.$childrenNode) && (
+ <AnimatePresence>
+ {isExpanded && (
+ <motion.div
+ css={itemContentStyle}
+ variants={panelBarItemContainerAnimationVariants}
+ animate={isExpanded ? "enter" : "exit"}
+ transition={{ duration: 0.2 }}
+ exit="exit"
+ >
+ {value.$childrenNode.map((item) => (
+ <BaseDataItem
+ key={item.displayName}
+ title={item.displayName}
+ value={item}
+ level={level + 1}
+ dataType="widget"
+ type={item.$widgetType as string}
+ canExpand={item.$childrenNode.length > 0}
+ haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
+ canFocused={item.$widgetType.endsWith("_WIDGET")}
+ selectedDisplayNames={selectedDisplayNames}
+ onClick={onClick}
+ />
+ ))}
+ </motion.div>
+ )}
+ </AnimatePresence>
+ )}
  {isOpenCodeModal && (
  <MovableModal
  title={title}
@@ -119,8 +154,14 @@ export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
  }}
  docLink={`${value.type}` ?? ""}
  defaultPosition={{
- x: rect.right,
- y: rect.top,
+ x:
+ document
+ .querySelector(`#${title}-baseDataItemContainer`)
+ ?.getBoundingClientRect().right ?? 0,
+ y:
+ document
+ .querySelector(`#${title}-baseDataItemContainer`)
+ ?.getBoundingClientRect().top ?? 0,
  width: 320,
  height: 214,
  }}

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

@@ -9,4 +9,5 @@ export interface BaseDataItemProps {
  selectedDisplayNames?: string[]
  onClick?: (displayName: string, type: string) => void
  dataType: "globalData" | "action" | "widget"
+ onFocus?: (displayName: string) => void
 }

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

@@ -84,3 +84,8 @@ export const modalBodyContainerStyle = css`
  flex-direction: column;
  gap: 4px;
 `
+
+export const itemContentStyle = css`
+ font-family: "Fira Code", monospace;
+ height: 0;
+`