Dec 8, 2023 · Dec 7, 2023 · Dec 7, 2023 · Dec 8, 2023
diff --git a/client/packages/lowcoder-design/src/components/option.tsx b/client/packages/lowcoder-design/src/components/option.tsx
  popoverTitle?: string;
  draggable?: boolean;
  optionExtra?: React.ReactNode;
  scrollable?: boolean;
 }) => {
  const { content, config, title, popoverTitle, draggable = true, optionExtra } = props;
  const { content, config, title, popoverTitle, draggable = true, optionExtra, scrollable } = props;
  const [visible, setVisible] = useState(false);
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
    id: config.dataIndex,
      setVisible={(vis) => {
        setVisible(vis);
      }}
      scrollable={scrollable}
    >
      {optionRow}
    </SimplePopover>
  optionToolbar?: React.ReactNode;
  headerItem?: React.ReactNode;
  itemExtra?: (comp: T) => React.ReactNode;
  scrollable?: boolean;
 }) {
  const { items, uniqVal, headerItem, optionToolbar, itemExtra } = props;
  const itemsDistinctValCount = uniqVal
                    title={props.itemTitle(item)}
                    config={{ dataIndex: dataIndex }}
                    optionExtra={optionExtra}
                    scrollable={props.scrollable}
                  />
                );
              })}
diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
  setVisible?: (vis: boolean) => void;
  children: JSX.Element | React.ReactNode;
  content: JSX.Element | React.ReactNode;
  scrollable?: boolean;
 }) => {
  const { visible, setVisible } = props;
  const contentWithBox = (
    <SuspensionBox
      title={props.title}
      onClose={() => setVisible?.(false)}
      content={props.content}
      scrollable={props.scrollable}
    />
  );
  return (
      align={{
        offset: [-12, 0, 0, 0],
      }}
      destroyTooltipOnHide
 //destroyTooltipOnHide
      content={contentWithBox}
      trigger="click"
      open={visible}
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
            )}
          </Switch>
        </Router>
        <CodeEditorTooltipContainer />
      </Wrapper>
    );
  }
diff --git a/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx b/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
    ...props,
    showLineNum,
    onChange: handleChange,
    tooltipContainer: container.current,
  });
  useEffect(() => reconfigure(viewRef.current), [reconfigure]);
  useEffect(() => {
  const { expandable = true, ...editorProps } = props;
  const [disabled, setDisabled] = useState(false);
  return (
    <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
      <Container
        styleName={props.styleName}
        bordered={props.bordered}
        disabled={disabled}
        error={props.hasError}
        ref={editor as MutableRefObject<HTMLDivElement>}
        enableClickCompName={props.enableClickCompName}
      >
        {expandable && (
          <CodeEditorPanel
            breadcrumb={[props.label ?? ""]}
            editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
            onVisibleChange={(visible) => setDisabled(visible)}
          />
        )}
      </Container>
    </CodeEditorCommon>
    <CodeEditorTooltipContainer>
      <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
        <Container
          styleName={props.styleName}
          bordered={props.bordered}
          disabled={disabled}
          error={props.hasError}
          ref={editor as MutableRefObject<HTMLDivElement>}
          enableClickCompName={props.enableClickCompName}
        >
          {expandable && (
            <CodeEditorPanel
              breadcrumb={[props.label ?? ""]}
              editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
              onVisibleChange={(visible) => setDisabled(visible)}
            />
          )}
        </Container>
      </CodeEditorCommon>
    </CodeEditorTooltipContainer>
  );
 }

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
          comp.children.columns.dispatch(action);
        }}
        dataIndex={(column) => column.getView().dataIndex}
        scrollable={true}
      />
    </>
  );
diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
      maskClosable={true}
      onPopupVisibleChange={(visible) => setVisible(visible)}
      afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}
      getPopupContainer={(node: any) => node.parentNode.parentNode}
      popup={() => (
        <Draggable
          positionOffset={{ x: "-50%", y: "-50%" }}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -153,8 +153,9 @@ const OptionItem = (props: {
		popoverTitle?: string;
		draggable?: boolean;
		optionExtra?: React.ReactNode;
		scrollable?: boolean;
		}) => {
		const { content, config, title, popoverTitle, draggable = true, optionExtra } = props;
		const { content, config, title, popoverTitle, draggable = true, optionExtra, scrollable } = props;
		const [visible, setVisible] = useState(false);
		const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
		id: config.dataIndex,
Expand DownExpand Up		@@ -182,6 +183,7 @@ const OptionItem = (props: {
		setVisible={(vis) => {
		setVisible(vis);
		}}
		scrollable={scrollable}
		>
		{optionRow}
		</SimplePopover>
Expand All		@@ -204,6 +206,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
		optionToolbar?: React.ReactNode;
		headerItem?: React.ReactNode;
		itemExtra?: (comp: T) => React.ReactNode;
		scrollable?: boolean;
		}) {
		const { items, uniqVal, headerItem, optionToolbar, itemExtra } = props;
		const itemsDistinctValCount = uniqVal
Expand DownExpand Up		@@ -286,6 +289,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
		title={props.itemTitle(item)}
		config={{ dataIndex: dataIndex }}
		optionExtra={optionExtra}
		scrollable={props.scrollable}
		/>
		);
		})}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,13 +51,15 @@ const SimplePopover = (props: {
		setVisible?: (vis: boolean) => void;
		children: JSX.Element \| React.ReactNode;
		content: JSX.Element \| React.ReactNode;
		scrollable?: boolean;
		}) => {
		const { visible, setVisible } = props;
		const contentWithBox = (
		<SuspensionBox
		title={props.title}
		onClose={() => setVisible?.(false)}
		content={props.content}
		scrollable={props.scrollable}
		/>
		);
		return (
Expand All		@@ -66,7 +68,7 @@ const SimplePopover = (props: {
		align={{
		offset: [-12, 0, 0, 0],
		}}
		destroyTooltipOnHide
		//destroyTooltipOnHide
		content={contentWithBox}
		trigger="click"
		open={visible}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -159,7 +159,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
		)}
		</Switch>
		</Router>
		<CodeEditorTooltipContainer />
		</Wrapper>
		);
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -227,6 +227,7 @@ function useCodeMirror(
		...props,
		showLineNum,
		onChange: handleChange,
		tooltipContainer: container.current,
		});
		useEffect(() => reconfigure(viewRef.current), [reconfigure]);
		useEffect(() => {
Expand DownExpand Up		@@ -385,24 +386,26 @@ export function CodeEditor(props: CodeEditorProps) {
		const { expandable = true, ...editorProps } = props;
		const [disabled, setDisabled] = useState(false);
		return (
		<CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
		<Container
		styleName={props.styleName}
		bordered={props.bordered}
		disabled={disabled}
		error={props.hasError}
		ref={editor as MutableRefObject<HTMLDivElement>}
		enableClickCompName={props.enableClickCompName}
		>
		{expandable && (
		<CodeEditorPanel
		breadcrumb={[props.label ?? ""]}
		editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
		onVisibleChange={(visible) => setDisabled(visible)}
		/>
		)}
		</Container>
		</CodeEditorCommon>
		<CodeEditorTooltipContainer>
		<CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
		<Container
		styleName={props.styleName}
		bordered={props.bordered}
		disabled={disabled}
		error={props.hasError}
		ref={editor as MutableRefObject<HTMLDivElement>}
		enableClickCompName={props.enableClickCompName}
		>
		{expandable && (
		<CodeEditorPanel
		breadcrumb={[props.label ?? ""]}
		editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
		onVisibleChange={(visible) => setDisabled(visible)}
		/>
		)}
		</Container>
		</CodeEditorCommon>
		</CodeEditorTooltipContainer>
		);
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -390,6 +390,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
		comp.children.columns.dispatch(action);
		}}
		dataIndex={(column) => column.getView().dataIndex}
		scrollable={true}
		/>
		</>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -129,6 +129,7 @@ export const CodeEditorPanel = (props: {
		maskClosable={true}
		onPopupVisibleChange={(visible) => setVisible(visible)}
		afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}
		getPopupContainer={(node: any) => node.parentNode.parentNode}
		popup={() => (
		<Draggable
		positionOffset={{ x: "-50%", y: "-50%" }}
Expand Down