Merge pull request #3590 from illacloud/Release/4.1.2

Release/4.1.2

apps/builder/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",
@@ -149,6 +149,7 @@
     "@types/deep-diff": "^1.0.1",
     "@types/downloadjs": "^1.4.4",
     "@types/google.maps": "^3.53.2",
+    "@types/gtag.js": "^0.0.18",
     "@types/lodash": "^4.14.199",
     "@types/mdx": "^2.0.3",
     "@types/papaparse": "^5.3.9",

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnMappedSelect/index.tsx

@@ -0,0 +1,181 @@
+import { get, isString } from "lodash"
+import { FC, useCallback, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { Select } from "@illa-design/react"
+import { CodeEditor } from "@/components/CodeEditor"
+import {
+  CODE_LANG,
+  CODE_TYPE,
+} from "@/components/CodeEditor/CodeMirror/extensions/interface"
+import {
+  getNeedComputedValueWithDataList,
+  realInputValueWithDataList,
+} from "@/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils"
+import { DynamicIcon } from "@/page/App/components/InspectPanel/PanelSetters/PublicComponent/DynamicIcon"
+import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label"
+import {
+  getExecutionError,
+  getExecutionResult,
+} from "@/redux/currentApp/executionTree/executionSelector"
+import { RootState } from "@/store"
+import { hasDynamicStringSnippet } from "@/utils/evaluateDynamicString/utils"
+import { ColumnMappedSelectProps } from "./interface"
+import {
+  basicDynamicSetterContainerStyle,
+  dynamicSelectHeaderStyle,
+  dynamicSelectSetterStyle,
+} from "./style"
+
+const ColumnMappedSelect: FC<ColumnMappedSelectProps> = (props) => {
+  const {
+    placeholder,
+    attrName,
+    handleUpdateDsl,
+    expectedType,
+    value,
+    widgetDisplayName,
+    labelName,
+    detailedDescription,
+    defaultValue,
+    labelDesc,
+    options,
+    wrappedCodeFunc,
+  } = props
+
+  const targetComponentProps = useSelector<RootState, Record<string, any>>(
+    (rootState) => {
+      const executionTree = getExecutionResult(rootState)
+      return get(executionTree, widgetDisplayName, {})
+    },
+  )
+
+  const isDynamic =
+    get(
+      targetComponentProps,
+      `${widgetDisplayName}.${attrName}JS`,
+      "select",
+    ) === "dynamic"
+
+  const isError = useSelector<RootState, boolean>((state) => {
+    const errors = getExecutionError(state)
+    const thisError = get(errors, `${widgetDisplayName}.${attrName}JS`)
+    return thisError?.length > 0
+  })
+  const handleClickFxButton = useCallback(() => {
+    if (isDynamic) {
+      handleUpdateDsl(`${widgetDisplayName}.${attrName}JS`, "select")
+      handleUpdateDsl(attrName, undefined)
+    } else {
+      handleUpdateDsl(`${widgetDisplayName}.${attrName}JS`, "dynamic")
+    }
+  }, [attrName, handleUpdateDsl, isDynamic, widgetDisplayName])
+
+  const dataSourceMode = get(targetComponentProps, "dataSourceMode", "dynamic")
+
+  const finalWrapperCode = useMemo(() => {
+    if (
+      hasDynamicStringSnippet(value ?? "") &&
+      isString(value) &&
+      value?.includes("currentRow")
+    ) {
+      return (value: string) => {
+        return getNeedComputedValueWithDataList(
+          value,
+          widgetDisplayName,
+          dataSourceMode,
+        )
+      }
+    }
+    return wrappedCodeFunc
+  }, [value, wrappedCodeFunc, widgetDisplayName, dataSourceMode])
+
+  const finalValue = useMemo(() => {
+    const v = value ?? defaultValue
+
+    if (widgetDisplayName && isString(v) && v.includes("currentRow")) {
+      return realInputValueWithDataList(
+        value ?? defaultValue,
+        widgetDisplayName,
+      )
+    }
+
+    if (value === undefined && defaultValue === undefined) {
+      return undefined
+    }
+    if (!isString(value ?? defaultValue)) {
+      return `{{ ${value ?? defaultValue} }}`
+    }
+    return value ?? defaultValue
+  }, [widgetDisplayName, value, defaultValue])
+
+  const onChange = useCallback(
+    (value: string) => {
+      let output = value
+      if (
+        hasDynamicStringSnippet(value ?? "") &&
+        value.includes("currentRow")
+      ) {
+        output = getNeedComputedValueWithDataList(
+          value,
+          widgetDisplayName,
+          dataSourceMode,
+        )
+        handleUpdateDsl(attrName, output)
+      } else {
+        if (output === "") {
+          handleUpdateDsl(attrName, undefined)
+        } else {
+          handleUpdateDsl(attrName, output)
+        }
+      }
+    },
+    [attrName, dataSourceMode, handleUpdateDsl, widgetDisplayName],
+  )
+
+  return (
+    <div css={basicDynamicSetterContainerStyle}>
+      <div css={dynamicSelectHeaderStyle}>
+        <PanelLabel labelName={labelName} labelDesc={labelDesc} />
+        <DynamicIcon
+          isDynamic={isDynamic}
+          onClick={handleClickFxButton}
+          hasRightContent={false}
+        />
+      </div>
+      <div css={dynamicSelectSetterStyle}>
+        {isDynamic ? (
+          <CodeEditor
+            value={finalValue ?? ""}
+            onChange={onChange}
+            showLineNumbers={false}
+            placeholder={placeholder}
+            expectValueType={expectedType}
+            lang={CODE_LANG.JAVASCRIPT}
+            maxHeight="208px"
+            minHeight="30px"
+            maxWidth="100%"
+            codeType={CODE_TYPE.EXPRESSION}
+            modalTitle={labelName}
+            modalDescription={labelDesc ?? detailedDescription}
+            scopeOfAutoComplete="page"
+            wrappedCodeFunc={finalWrapperCode}
+          />
+        ) : (
+          <Select
+            colorScheme="techPurple"
+            placeholder={placeholder}
+            options={options}
+            value={finalValue}
+            onChange={(v) => handleUpdateDsl?.(attrName, v)}
+            showSearch
+            allowClear
+            error={isError}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+ColumnMappedSelect.displayName = "ColumnMappedSelect"
+export default ColumnMappedSelect

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnMappedSelect/interface.ts

@@ -0,0 +1,6 @@
+import { BaseSelectSetterProps } from "../../SelectSetter/interface"
+
+export interface ColumnMappedSelectProps extends BaseSelectSetterProps {
+  wrappedCodeFunc?: (code: string) => string
+  onlyHasSetter?: boolean
+}

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnMappedSelect/style.ts

@@ -0,0 +1,17 @@
+import { css } from "@emotion/react"
+
+export const basicDynamicSetterContainerStyle = css`
+  display: flex;
+  padding: 8px 0;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`
+export const dynamicSelectHeaderStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+export const dynamicSelectSetterStyle = css`
+  width: 100%;
+`

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/interface.ts

@@ -20,6 +20,7 @@ export type ColumnType =
   | "buttongroup"
   | "boolean"
   | "image"
+  | "avatar"
   | "rating"
   | "markdown"
   | "html"

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils.ts

@@ -1,4 +1,5 @@
-import { isObject } from "lodash"
+import { isObject, isString } from "lodash"
+import { isNumber } from "@illa-design/react"
 import { JSToString, stringToJS } from "@/utils/evaluateDynamicString/utils"
 
 export function dealRawData2ArrayData(rawData: unknown): object[] {
@@ -46,7 +47,6 @@ export function getHashCode(str: string) {
 }
 
 export function isValidLocale(locale: string) {
-  // 使用正则表达式来匹配标准的locale格式
   const localePattern = /^[a-z]{2}(?:-[A-Z]{2})?$/
   return localePattern.test(locale)
 }
@@ -230,21 +230,15 @@ export const CurrencyCode = {
 
 export function getPreColor(index: number) {
   const colors = [
-    "white",
-    "blackAlpha",
-    "gray",
-    "grayBlue",
     "red",
     "orange",
     "yellow",
     "green",
-    "blue",
     "cyan",
     "purple",
-    "techPurple",
     "techPink",
   ]
-  return colors[index % colors.length]
+  return colors[Math.abs(index) % colors.length]
 }
 
 export const realInputValueWithDataList = (
@@ -290,3 +284,17 @@ export const getNeedComputedValueWithDataList = (
     dataSourceMode === "select" ? "dataSource" : "dataSourceJS"
   }.map((currentRow) => (${stringToCanEvaluate}))}}`
 }
+
+export const getValueFromMappedValue = (
+  value: unknown,
+  index: number,
+  defaultValue?: string,
+): string | undefined => {
+  let finalValue = defaultValue
+  if (Array.isArray(value)) {
+    finalValue = isString(value[index]) ? value[index] : finalValue
+  } else if (isNumber(value) || isString(value)) {
+    finalValue = `${value}`
+  }
+  return finalValue
+}

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/index.tsx

@@ -13,7 +13,12 @@ import {
 import IconHotSpot from "@/components/IconHotSpot"
 import { BaseModal } from "@/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal"
 import { ColumnProps } from "./interface"
-import { columnContainerStyle, columnLabelStyle, dragIconStyle } from "./style"
+import {
+  baseModalContainerStyle,
+  columnContainerStyle,
+  columnLabelStyle,
+  dragIconStyle,
+} from "./style"
 
 export const Column: FC<ColumnProps> = (props) => {
   const {
@@ -69,6 +74,7 @@ export const Column: FC<ColumnProps> = (props) => {
           <BaseModal
             title={label as string}
             attrPath={attrPath}
+            _css={baseModalContainerStyle}
             widgetDisplayName={widgetDisplayName}
             childrenSetter={childrenSetter}
             extraElement={extraElement}

apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/style.ts

@@ -34,3 +34,8 @@ export const columnLabelStyle = css`
   font-weight: 400;
   line-height: 22px;
 `
+
+export const baseModalContainerStyle = css`
+  max-height: 800px;
+  overflow-y: auto;
+`

apps/builder/src/page/App/components/InspectPanel/PanelSetters/IconSetter/baseIconSetter.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, useCallback, useEffect, useState } from "react"
-import { ErrorCircleIcon, Input } from "@illa-design/react"
+import { ErrorCircleIcon, getColor } from "@illa-design/react"
 import {
   applyBaseIconWrapperStyle,
   clearIconStyle,
@@ -36,13 +36,9 @@ export const BaseIconSetter: FC<BaseIconSetterProps> = (props) => {
         <div css={iconSelectorIconStyle}>
           {displayData?.getIcon && displayData?.getIcon({})}
         </div>
-        <Input
-          _css={iconContentStyle}
-          value={displayData?.name ?? ""}
-          disabled
-        />
+        <span css={iconContentStyle}>{displayData?.name ?? ""}</span>
         <div css={clearIconStyle} onClick={handleClearClick}>
-          <ErrorCircleIcon />
+          <ErrorCircleIcon color={getColor("grayBlue", "05")} />
         </div>
       </div>
     </div>