1. feat: select expose selectedIndex/selectedLabel

2. feat: modal and drawer add showMask
3. fix: run libs seqly
4. refactor(table): refactor withContext to withParams in table

Author: ggbond2077

client/packages/openblocks-core/lib/index.js

@@ -3431,7 +3431,7 @@ var MultiBaseComp = /** @class */ (function (_super) {
                 if (shallowEqual(children, this.children) && containFields(this, extraFields)) {
                     return this;
                 }
-                return setFieldsNoTypeCheck(this, __assign((_b = { children: children }, _b[cacheKey] = value_1, _b), extraFields), { keepCache: true });
+                return setFieldsNoTypeCheck(this, __assign((_b = { children: children }, _b[cacheKey] = value_1, _b), extraFields));
             }
             case CompActionTypes.CHANGE_VALUE: {
                 return this.setChildren(this.parseChildrenFromValue({

client/packages/openblocks-core/src/baseComps/multiBaseComp.tsx

@@ -153,8 +153,8 @@ export abstract class MultiBaseComp<
             children: children,
             [cacheKey]: value,
             ...extraFields,
-          },
-          { keepCache: true }
+          }
+          // { keepCache: true }
         );
       }
       case CompActionTypes.CHANGE_VALUE: {

client/packages/openblocks/src/comps/comps/preLoadComp.tsx

@@ -6,7 +6,7 @@ import { CodeTextControl } from "comps/controls/codeTextControl";
 import SimpleStringControl from "comps/controls/simpleStringControl";
 import { MultiCompBuilder } from "comps/generators";
 import { list } from "comps/generators/list";
-import { CustomModal, TacoButton } from "openblocks-design";
+import { CustomModal, DocLink, TacoButton } from "openblocks-design";
 import { clearMockWindow, evalFunc } from "openblocks-core";
 import { clearStyleEval, evalStyle } from "openblocks-core";
 import { useContext, useEffect, useState } from "react";
@@ -39,6 +39,15 @@ const LibListWrapper = styled.div`
     flex: 1;
     margin-right: 8px;
   }
+  .lib-list-add-btn-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .lib-list-add-btn {
+      margin-right: 8px;
+    }
+  }
 `;
 
 function runScript(code: string, inHost?: boolean) {
@@ -64,30 +73,42 @@ class LibsComp extends list(SimpleStringControl) implements RunAndClearable<stri
   runInHost: boolean = false;
   async loadScript(url: string) {
     if (this.success[url]) {
-      return;
+      return async () => {};
     }
     if (this.runInHost) {
-      await loadScript(url);
+      return async () => {
+        await loadScript(url);
+        this.success[url] = true;
+      };
     } else {
       const res = await fetch(url);
       const code = await res.text();
-      runScript(code);
+      return async () => {
+        runScript(code);
+        this.success[url] = true;
+      };
     }
-    this.success[url] = true;
   }
 
   async loadAllLibs() {
-    const scripts: Promise<void>[] = [];
+    const scriptRunners: Promise<() => Promise<void>>[] = [];
     const appLibs = this.getView().map((i) => i.getView());
     this.externalLibs.concat(appLibs).forEach((url) => {
       const trimUrl = url.trim();
       if (!/^https?.+\.js$/.test(trimUrl)) {
         return;
       }
-      scripts.push(this.loadScript(trimUrl));
+      scriptRunners.push(this.loadScript(trimUrl));
     });
 
-    return Promise.allSettled(scripts);
+    try {
+      const runners = await Promise.all(scriptRunners);
+      for await (const runner of runners) {
+        await runner();
+      }
+    } catch (e) {
+      log.warn("load preload libs error:", e);
+    }
   }
 
   async run(id: string, externalLibs: string[] = [], runInHost: boolean = false) {
@@ -183,16 +204,20 @@ function LibsTabPane(props: { libsComp: ChildrenInstance["libs"] }) {
           );
         })}
       </div>
-      <div>
+      <div className="lib-list-add-btn-wrapper">
         <TacoButton
           ghost
+          className="lib-list-add-btn"
           buttonType="primary"
           onClick={() => {
             props.libsComp.dispatch(props.libsComp.pushAction(""));
           }}
         >
           {trans("preLoad.add")}
         </TacoButton>
+        {trans("docUrls.thirdLib") && (
+          <DocLink href={trans("docUrls.thirdLib")}>{trans("docUrls.thirdLibUrlText")}</DocLink>
+        )}
       </div>
     </LibListWrapper>
   );

client/packages/openblocks/src/comps/comps/selectInputComp/selectComp.tsx

@@ -5,7 +5,11 @@ import { stringExposingStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { SelectChildrenMap, SelectPropertyView, SelectUIView } from "./selectCompConstants";
-import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputConstants";
+import {
+  SelectInputCommonConfig,
+  SelectInputInvalidConfig,
+  useSelectInputValidate,
+} from "./selectInputConstants";
 
 export const SelectBasicComp = (function () {
   const childrenMap = {
@@ -42,5 +46,6 @@ export const SelectComp = withExposingConfigs(SelectBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
   new NameConfig("inputValue", trans("select.inputValueDesc")),
   SelectInputInvalidConfig,
+  ...SelectInputCommonConfig,
   ...CommonNameConfig,
 ]);

client/packages/openblocks/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -1,8 +1,19 @@
-import { DispatchType, RecordConstructorToComp, RecordConstructorToView } from "openblocks-core";
+import {
+  changeChildAction,
+  DispatchType,
+  RecordConstructorToComp,
+  RecordConstructorToView,
+} from "openblocks-core";
 import { BoolControl, BoolPureControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
 import { BoolCodeControl, StringControl } from "../../controls/codeControl";
-import { Section, sectionNames } from "openblocks-design";
+import {
+  isDarkColor,
+  lightenColor,
+  MultiselectTagIcon,
+  Section,
+  sectionNames,
+} from "openblocks-design";
 import { SelectInputOptionControl } from "../../controls/optionsControl";
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Select as AntdSelect } from "antd";
@@ -20,14 +31,11 @@ import {
   SelectStyleType,
   TreeSelectStyleType,
 } from "comps/controls/styleControlConstants";
-import { MultiselectTagIcon } from "openblocks-design";
-import { isDarkColor, lightenColor } from "openblocks-design";
-import { changeChildAction } from "openblocks-core";
 import { stateComp, withDefault } from "../../generators";
 import {
   allowClearPropertyView,
-  hiddenPropertyView,
   disabledPropertyView,
+  hiddenPropertyView,
   placeholderPropertyView,
   showSearchPropertyView,
 } from "comps/utils/propertyUtils";

client/packages/openblocks/src/comps/comps/selectInputComp/selectInputConstants.tsx

@@ -12,6 +12,7 @@ import {
 import { requiredPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { useState } from "react";
+import { SelectInputOptionControl } from "../../controls/optionsControl";
 
 export const SelectInputValidationChildren = {
   required: BoolControl,
@@ -84,3 +85,22 @@ export const SelectInputValidationSection = (children: ValidationComp) => (
     {children.customRule.propertyView({})}
   </Section>
 );
+
+type ChildrenType = RecordConstructorToComp<{
+  value: ReturnType<typeof stringExposingStateControl>;
+  options: typeof SelectInputOptionControl;
+}>;
+export const SelectInputCommonConfig = [
+  depsConfig<ChildrenType, ChildrenTypeToDepsKeys<ChildrenType>>({
+    name: "selectedIndex",
+    desc: trans("selectInput.selectedIndexDesc"),
+    depKeys: ["value", "options"],
+    func: (input) => input.options.findIndex?.((o: any) => o.value === input.value),
+  }),
+  depsConfig<ChildrenType, ChildrenTypeToDepsKeys<ChildrenType>>({
+    name: "selectedLabel",
+    desc: trans("selectInput.selectedLabelDesc"),
+    depKeys: ["value", "options"],
+    func: (input) => input.options.find?.((o: any) => o.value === input.value)?.label,
+  }),
+];

client/packages/openblocks/src/comps/controls/optionsControl.tsx

@@ -5,9 +5,17 @@ import {
   CompParams,
   ConstructorToDataType,
   ConstructorToView,
+  fromRecord,
   MultiBaseComp,
+  withFunction,
 } from "openblocks-core";
-import { ArrayControl, BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import {
+  ArrayControl,
+  BoolCodeControl,
+  codeControl,
+  CodeControlType,
+  StringControl,
+} from "comps/controls/codeControl";
 import { dropdownControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { MultiCompBuilder, valueComp, withContext, withDefault } from "comps/generators";
 import { list } from "comps/generators/list";
@@ -16,13 +24,13 @@ import { genRandomKey } from "comps/utils/idGenerator";
 import { AutoArea, Option } from "openblocks-design";
 import { getNextEntityName } from "util/stringUtils";
 import { ButtonEventHandlerControl } from "./eventHandlerControl";
-import _ from "lodash";
-import { JSONValue } from "util/jsonTypes";
+import _, { mapValues } from "lodash";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import styled from "styled-components";
 import { ViewDocIcon } from "assets/icons";
 import { IconControl } from "comps/controls/iconControl";
+import { JSONValue } from "../../util/jsonTypes";
 
 const OptionTypes = [
   {
@@ -36,7 +44,7 @@ const OptionTypes = [
 ] as const;
 
 // All options must contain label
-type OptionChildType = { label: Comp<string> };
+type OptionChildType = { label: InstanceType<typeof StringControl> };
 type OptionsControlType = new (params: CompParams<any>) => MultiBaseComp<
   OptionChildType,
   any,
@@ -131,6 +139,17 @@ export function manualOptionsControl<T extends OptionsControlType>(
     .build();
 
   class ManualOptionControl extends TmpManualOptionControl {
+    exposingNode() {
+      return withFunction(
+        fromRecord(
+          mapValues(this.children.manual.children, (c1) =>
+            fromRecord(mapValues(c1.children, (c2) => c2.exposingNode()))
+          )
+        ),
+        (params) => Object.values(params)
+      );
+    }
+
     private getNewId(): number {
       const { autoIncField } = config;
       if (!autoIncField) return 0;
@@ -260,6 +279,17 @@ export function mapOptionsControl<T extends OptionsControlType>(
   return class extends TmpOptionControl {
     private lastDataExample: any = {};
 
+    exposingNode() {
+      return withFunction(
+        fromRecord({
+          data: this.children.data.exposingNode(),
+          mapData: this.children.mapData.node(),
+        }),
+        (params) =>
+          params.data.map((d: any, i) => mapValues((params.mapData as any)(d), (v) => v.value))
+      );
+    }
+
     override reduce(action: CompAction) {
       const comp = super.reduce(action);
       if (action.type === CompActionTypes.UPDATE_NODES_V2) {
@@ -325,6 +355,12 @@ export function optionsControl<T extends OptionsControlType>(
     .build();
 
   return class extends TmpOptionControl {
+    exposingNode() {
+      return this.children.optionType.getView() === "manual"
+        ? this.children.manual.exposingNode()
+        : this.children.mapData.exposingNode();
+    }
+
     propertyView(param: OptionControlParam) {
       return (
         <>

client/packages/openblocks/src/comps/hooks/drawerComp.tsx

@@ -22,6 +22,8 @@ import styled from "styled-components";
 import { useUserViewMode } from "util/hooks";
 import { isNumeric } from "util/stringUtils";
 import { NameConfig, withExposingConfigs } from "../generators/withExposing";
+import { BoolControl } from "comps/controls/boolControl";
+import { withDefault } from "comps/generators";
 
 const EventOptions = [closeEvent] as const;
 
@@ -96,6 +98,8 @@ let TmpDrawerComp = (function () {
       autoHeight: AutoHeightControl,
       style: styleControl(DrawerStyle),
       placement: PositionControl,
+      maskClosable: withDefault(BoolControl, true),
+      showMask: withDefault(BoolControl, true),
     },
     (props, dispatch) => {
       const isTopBom = ["top", "bottom"].includes(props.placement);
@@ -140,6 +144,8 @@ let TmpDrawerComp = (function () {
                 }
               }}
               zIndex={Layers.drawer}
+              maskClosable={props.maskClosable}
+              mask={props.showMask}
             >
               <ButtonStyle
                 onClick={() => {
@@ -182,6 +188,12 @@ let TmpDrawerComp = (function () {
               tooltip: trans("drawer.heightTooltip"),
               placeholder: DEFAULT_SIZE + "",
             })}
+          {children.maskClosable.propertyView({
+            label: trans("prop.maskClosable"),
+          })}
+          {children.showMask.propertyView({
+            label: trans("prop.showMask"),
+          })}
         </Section>
         <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
         <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>

client/packages/openblocks/src/comps/hooks/modalComp.tsx

@@ -73,6 +73,7 @@ let TmpModalComp = (function () {
       autoHeight: AutoHeightControl,
       style: styleControl(ModalStyle),
       maskClosable: withDefault(BoolControl, true),
+      showMask: withDefault(BoolControl, true),
     },
     (props, dispatch) => {
       const userViewMode = useUserViewMode();
@@ -126,6 +127,7 @@ let TmpModalComp = (function () {
               }}
               zIndex={Layers.modal}
               modalRender={(node) => <ModalStyled $style={props.style}>{node}</ModalStyled>}
+              mask={props.showMask}
             >
               <InnerGrid
                 {...otherContainerProps}
@@ -157,7 +159,10 @@ let TmpModalComp = (function () {
             placeholder: DEFAULT_WIDTH,
           })}
           {children.maskClosable.propertyView({
-            label: trans("modalComp.maskClosable"),
+            label: trans("prop.maskClosable"),
+          })}
+          {children.showMask.propertyView({
+            label: trans("prop.showMask"),
           })}
         </Section>
         <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>