feat: select comp search options enable js mode

fix: hidden comp in module
fix(BoolControl): fix BoolControl's changeDispatch

Author: ggbond2077

client/packages/openblocks-sdk/index.tsx

@@ -4,7 +4,7 @@ import { AppViewInstance, bootstrapAppAt, OpenblocksAppView } from "./src/index"
 
 const url = new URL(location.href);
 const appId = url.searchParams.get("appId");
-const baseUrl = url.searchParams.get("baseUrl") || "http://localhost:3000";
+const baseUrl = url.searchParams.get("baseUrl") || "http://localhost:8000";
 
 function ReactDemoApp() {
   const ref = useRef<AppViewInstance | null>(null);

client/packages/openblocks-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openblocks-sdk",
-  "version": "0.0.22",
+  "version": "0.0.28",
   "type": "module",
   "files": [
     "src",

client/packages/openblocks/src/components/EditableCell.tsx

@@ -1,12 +1,13 @@
 import _ from "lodash";
 import { changeChildAction, DispatchType } from "openblocks-core";
 import { constantColors } from "openblocks-design";
-import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { developEnv } from "util/envUtils";
 import { JSONValue } from "util/jsonTypes";
 
 export const TABLE_EDITABLE_SWITCH_ON = developEnv();
+export const TagsContext = React.createContext<string[]>([]);
 export type UpdateChangeSet<T> = (value: T) => void;
 
 // a top-right triangle chip
@@ -27,6 +28,7 @@ const EditableChip = styled.div`
 export interface CellProps {
   editable?: boolean;
   size?: string;
+  candidateTags?: string[];
 }
 export type CellViewReturn = (props: CellProps) => ReactNode;
 export type EditViewFn<T> = (props: {
@@ -62,7 +64,7 @@ interface EditableCellProps<T> extends CellProps {
 }
 
 export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
-  const { dispatch, normalView, editViewFn, changeValue, baseValue } = props;
+  const { dispatch, normalView, editViewFn, changeValue, baseValue, candidateTags } = props;
   const status = _.isNil(changeValue) ? "normal" : "toSave";
   const editable = editViewFn ? props.editable : false;
   const [isEditing, setIsEditing] = useState(false);
@@ -99,7 +101,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     return (
       <>
         <BorderDiv />
-        {editView}
+        <TagsContext.Provider value={candidateTags ?? []}>{editView}</TagsContext.Provider>
       </>
     );
   }

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

@@ -17,10 +17,8 @@ import EditorSkeletonView from "pages/editor/editorSkeletonView";
 import { ThemeContext } from "comps/utils/themeContext";
 import { ModuleLayoutCompName } from "constants/compConstants";
 import { defaultTheme as localDefaultTheme } from "comps/controls/styleControlConstants";
-import { useSelector } from "redux/store/store";
-import { getDefaultTheme, getThemeList } from "redux/selectors/commonSettingSelectors";
-import { ThemeDetail } from "api/commonSettingApi";
 import { ModuleLoading } from "components/ModuleLoading";
+import { getGlobalSettings } from "comps/utils/globalSettings";
 
 interface RootViewProps extends HTMLAttributes<HTMLDivElement> {
   comp: InstanceType<typeof RootComp>;
@@ -42,14 +40,14 @@ function RootView(props: RootViewProps) {
   const { comp, isModuleRoot, ...divProps } = props;
   const [editorState, setEditorState] = useState<EditorState>();
   const themeId = comp.children.settings.getView().themeId;
-  const themeList = useSelector(getThemeList) || [];
-  const defaultTheme = useSelector(getDefaultTheme);
-  let theme = {} as ThemeDetail;
+  const { orgCommonSettings } = getGlobalSettings();
+  const themeList = orgCommonSettings?.themeList || [];
+  const defaultTheme = orgCommonSettings?.defaultTheme || [];
+
+  let theme = localDefaultTheme;
   if (themeId === "default") {
     theme = themeList.find((theme) => theme.id === defaultTheme)?.theme || localDefaultTheme;
-  } else if (themeId === "") {
-    theme = localDefaultTheme;
-  } else {
+  } else if (themeId) {
     theme = themeList.find((theme) => theme.id === themeId)?.theme || localDefaultTheme;
   }
   theme = previewTheme?.previewTheme || theme;

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

@@ -1,21 +1,20 @@
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, sectionNames } from "openblocks-design";
 import { RecordConstructorToComp } from "openblocks-core";
-import { JSONObjectArrayControl, BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, JSONObjectArrayControl, StringControl } from "comps/controls/codeControl";
 import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
-import { BoolControl, BoolPureControl } from "comps/controls/boolControl";
+import { BoolControl } from "comps/controls/boolControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { styleControl } from "comps/controls/styleControl";
 import { CascaderStyle } from "comps/controls/styleControlConstants";
 import {
   allowClearPropertyView,
-  hiddenPropertyView,
   disabledPropertyView,
+  hiddenPropertyView,
   placeholderPropertyView,
   showSearchPropertyView,
 } from "comps/utils/propertyUtils";
-import { trans, i18nObjs } from "i18n";
-import { withDefault } from "comps/generators";
+import { i18nObjs, trans } from "i18n";
 
 export const defaultDataSource = JSON.stringify(i18nObjs.cascader, null, " ");
 
@@ -28,7 +27,7 @@ export const CascaderChildren = {
   allowClear: BoolControl,
   options: JSONObjectArrayControl,
   style: styleControl(CascaderStyle),
-  showSearch: withDefault(BoolPureControl, true),
+  showSearch: BoolControl.DEFAULT_TRUE,
 };
 
 export const CascaderPropertyView = (

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

@@ -10,6 +10,8 @@ import {
   SelectInputInvalidConfig,
   useSelectInputValidate,
 } from "./selectInputConstants";
+import { useRef } from "react";
+import { RecordConstructorToView } from "openblocks-core";
 
 export const SelectBasicComp = (function () {
   const childrenMap = {
@@ -18,8 +20,12 @@ export const SelectBasicComp = (function () {
     style: styleControl(SelectStyle),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const [validateState, handleValidate] = useSelectInputValidate(props);
+
+    const propsRef = useRef<RecordConstructorToView<typeof childrenMap>>(props);
+    propsRef.current = props;
+
     const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
-    const [validateState, onChange] = useSelectInputValidate(props);
     return props.label({
       required: props.required,
       style: props.style,
@@ -28,9 +34,10 @@ export const SelectBasicComp = (function () {
           {...props}
           value={valueSet.has(props.value.value) ? props.value.value : undefined}
           onChange={(value) => {
-            onChange(value ?? "");
-            props.value.onChange(value ?? "");
-            props.onEvent("change");
+            props.value.onChange(value ?? "").then(() => {
+              propsRef.current.onEvent("change");
+              handleValidate(value ?? "");
+            });
           }}
           dispatch={dispatch}
         />

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

@@ -4,7 +4,7 @@ import {
   RecordConstructorToComp,
   RecordConstructorToView,
 } from "openblocks-core";
-import { BoolControl, BoolPureControl } from "../../controls/boolControl";
+import { BoolControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
 import { BoolCodeControl, StringControl } from "../../controls/codeControl";
 import {
@@ -31,7 +31,7 @@ import {
   SelectStyleType,
   TreeSelectStyleType,
 } from "comps/controls/styleControlConstants";
-import { stateComp, withDefault } from "../../generators";
+import { stateComp } from "../../generators";
 import {
   allowClearPropertyView,
   disabledPropertyView,
@@ -165,7 +165,7 @@ export const SelectChildrenMap = {
   options: SelectOptionControl,
   allowClear: BoolControl,
   inputValue: stateComp<string>(""), // user's input value when search
-  showSearch: withDefault(BoolPureControl, true),
+  showSearch: BoolControl.DEFAULT_TRUE,
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };

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

@@ -11,7 +11,7 @@ import {
 } from "../../controls/codeStateControl";
 import { requiredPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { SelectInputOptionControl } from "../../controls/optionsControl";
 
 export const SelectInputValidationChildren = {
@@ -43,17 +43,21 @@ export const selectInputValidate = (
 };
 
 export const useSelectInputValidate = (props: ValidationParams) => {
+  const propsRef = useRef<ValidationParams>(props);
+  propsRef.current = props;
+
   const [validateState, setValidateState] = useState({});
-  const handleChange = (value: string | (string | number)[]) => {
-    const validateRes = selectInputValidate({
-      ...props,
-      value: {
-        value,
-      },
-    });
-    setValidateState(validateRes);
+  const handleValidate = (value: string | (string | number)[]) => {
+    setValidateState(
+      selectInputValidate({
+        ...propsRef.current,
+        value: {
+          value,
+        },
+      })
+    );
   };
-  return [validateState, handleChange] as const;
+  return [validateState, handleValidate] as const;
 };
 
 type ValidationCompWithValue = ValidationComp & {

client/packages/openblocks/src/comps/comps/tableComp/tableUtils.tsx

@@ -178,6 +178,17 @@ function renderTitle(props: { title: string; editable: boolean }) {
   );
 }
 
+function getUniqueTags(column: RawColumnType) {
+  const compType = column.render[0]
+    ? column.render[0].getComp().children.compType.getView()
+    : undefined;
+  const uniqueTags: string[] =
+    column.editable && compType === "tag"
+      ? _.uniq(Object.values(column.render).map((comp) => comp.getView().value))
+      : [];
+  return uniqueTags;
+}
+
 /**
  * convert column in raw format into antd format
  */
@@ -223,6 +234,7 @@ export function columnsToAntdFormat(
     ) {
       return [];
     }
+    const tags = getUniqueTags(column); // warn: this costs O(n) time
     const title = renderTitle({ title: column.title, editable: column.editable });
     return {
       title: title,
@@ -235,7 +247,7 @@ export function columnsToAntdFormat(
         return column.render[record.index]
           .setParams({ currentIndex: index })
           .getView()
-          .view({ editable: column.editable, size });
+          .view({ editable: column.editable, size, candidateTags: tags });
       },
       ...(column.sortable
         ? {

client/packages/openblocks/src/comps/comps/treeComp/treeSelectComp.tsx

@@ -1,7 +1,7 @@
 import { changeChildAction, DispatchType, RecordConstructorToView } from "openblocks-core";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, withExposingConfigs } from "comps/generators/withExposing";
-import { Section, sectionNames } from "openblocks-design";
+import { Section, sectionNames, ValueFromOption } from "openblocks-design";
 import { TreeSelect } from "antd";
 import { useEffect } from "react";
 import styled from "styled-components";
@@ -22,11 +22,10 @@ import {
 } from "./treeUtils";
 import { getStyle } from "../selectInputComp/selectCompConstants";
 import { useSelectInputValidate } from "../selectInputComp/selectInputConstants";
-import { ValueFromOption } from "openblocks-design";
 import { StringControl } from "comps/controls/codeControl";
 import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { BoolControl, BoolPureControl } from "comps/controls/boolControl";
-import { stateComp, withDefault } from "comps/generators/simpleGenerators";
+import { BoolControl } from "comps/controls/boolControl";
+import { stateComp } from "comps/generators/simpleGenerators";
 import { trans } from "i18n";
 import {
   allowClearPropertyView,
@@ -60,7 +59,7 @@ const childrenMap = {
   // TODO: more event
   onEvent: SelectEventHandlerControl,
   allowClear: BoolControl,
-  showSearch: withDefault(BoolPureControl, true),
+  showSearch: BoolControl.DEFAULT_TRUE,
   inputValue: stateComp<string>(""), // search value
   style: styleControl(TreeSelectStyle),
 };