Merge pull request #1222 from lowcoder-org/dev

Dev -> Main v2.4.8

client/packages/lowcoder-design/src/components/Dropdown.tsx

@@ -163,7 +163,6 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
  const dropdownElems = document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
  for (let index = 0; index < dropdownElems.length; index++) {
  const element = dropdownElems[index];
- console.log(element);
  element.style.maxHeight = "300px";
  element.style.overflowY = "scroll";
  element.style.minWidth = "150px";

client/packages/lowcoder-design/src/components/option.tsx

@@ -273,7 +273,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
  del={props.onDel ? () => props.onDel!(index) : undefined}
  >
  <StyledPointIcon
- onClick={(e) => {
+ onClick={(e: any) => {
  e.stopPropagation();
  }}
  />

client/packages/lowcoder-design/src/index.ts

@@ -1,54 +1,119 @@
-export * from "./components/Collapase";
+import React from "react";
+
+export const Collapse = React.lazy(() => import("./components/Collapase").then(module => ({ default: module.Collapse })));
+export const PadDiv = React.lazy(() => import("./components/Collapase").then(module => ({ default: module.PadDiv })));
+export const UnShow = React.lazy(() => import("./components/Collapase").then(module => ({ default: module.UnShow})));
 export * from "./components/CustomModal";
-export * from "./components/Drawer";
-export * from "./components/Dropdown";
-export * from "./components/ExternalLink";
+export const Drawer = React.lazy(() => import("./components/Drawer").then(module => ({ default: module.Drawer })));
+export * from "./components/Dropdown"
+export const ExternalLink = React.lazy(() => import("./components/ExternalLink").then(module => ({ default: module.ExternalLink })));
+export const DocLink = React.lazy(() => import("./components/ExternalLink").then(module => ({ default: module.DocLink })));
 export * from "./components/GlobalInstances";
-export * from "./components/Input";
-export * from "./components/Label";
-export * from "./components/Menu";
-export * from "./components/MenuItem";
-export * from "./components/Modal";
-export * from "./components/ScrollBar";
-export * from "./components/Search";
-export * from "./components/Section";
-export * from "./components/SuspensionBox";
-export * from "./components/Switch";
-export * from "./components/Tab";
-export * from "./components/Table";
-export * from "./components/Trees";
+export const Input = React.lazy(() => import("./components/Input").then(module => ({ default: module.Input })));
+export const StyledInput = React.lazy(() => import("./components/Input").then(module => ({ default: module.StyledInput })));
+export { EllipsisTextCss, labelCss, CommonTextLabel, CommonGrayLabel } from "./components/Label";
+export const BlockGrayLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.BlockGrayLabel })));
+export const TextLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.TextLabel })));
+export const BlockLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.BlockLabel })));
+export const CollapseTitle = React.lazy(() => import("./components/Label").then(module => ({ default: module.CollapseTitle })));
+export const CollapseLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.CollapseLabel })));
+export const CollapseLink = React.lazy(() => import("./components/Label").then(module => ({ default: module.CollapseLink })));
+export const CommonTextLabel2 = React.lazy(() => import("./components/Label").then(module => ({ default: module.CommonTextLabel2 })));
+export const CommonErrorLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.CommonErrorLabel })));
+export const CommonBlueLabel = React.lazy(() => import("./components/Label").then(module => ({ default: module.CommonBlueLabel })));
+export const Menu = React.lazy(() => import("./components/Menu").then(module => ({ default: module.Menu })));
+export const DropdownMenu = React.lazy(() => import("./components/Menu").then(module => ({ default: module.DropdownMenu })));
+export const DropDownSubMenu = React.lazy(() => import("./components/Menu").then(module => ({ default: module.DropDownSubMenu })));
+export const MenuItemWithDelete = React.lazy(() => import("./components/Menu").then(module => ({ default: module.MenuItemWithDelete })));
+export const MenuItem = React.lazy(() => import("./components/MenuItem").then(module => ({ default: module.MenuItem })));
+export const FormItem = React.lazy(() => import("./components/MenuItem").then(module => ({ default: module.FormItem})));
+export const Modal = React.lazy(() => import("./components/Modal").then(module => ({ default: module.Modal})));
+export const ScrollBar = React.lazy(() => import("./components/ScrollBar").then(module => ({ default: module.ScrollBar})));
+export const Search = React.lazy(() => import("./components/Search").then(module => ({ default: module.Search })));
+export {PropertySectionContext, sectionNames} from "./components/Section";
+export type { PropertySectionState, PropertySectionContextType } from "./components/Section";
+export const Section = React.lazy(() => import("./components/Section").then(module => ({ default: module.Section})));
+export const BaseSection = React.lazy(() => import("./components/Section").then(module => ({ default: module.BaseSection})));
+export const SuspensionBox = React.lazy(() => import("./components/SuspensionBox").then(module => ({ default: module.SuspensionBox })));
+export const Switch = React.lazy(() => import("./components/Switch").then(module => ({ default: module.Switch })));
+export const SwitchJsIcon = React.lazy(() => import("./components/Switch").then(module => ({ default: module.SwitchJsIcon })));
+export const SwitchWrapper = React.lazy(() => import("./components/Switch").then(module => ({ default: module.SwitchWrapper })));
+export const TacoSwitch = React.lazy(() => import("./components/Switch").then(module => ({ default: module.TacoSwitch })));
+export const Tabs = React.lazy(() => import("./components/Tab").then(module => ({ default: module.Tabs })));
+export const TableShow = React.lazy(() => import("./components/Table").then(module => ({ default: module.TableShow })));
+export const CustomTree = React.lazy(() => import("./components/Trees").then(module => ({ default: module.CustomTree})));
+export const BranchDiv = React.lazy(() => import("./components/Trees").then(module => ({ default: module.BranchDiv })));
+export const Treediv = React.lazy(() => import("./components/Trees").then(module => ({ default: module.Treediv})));
 export * from "./components/TriggeredDialog";
-export * from "./components/alert";
-export * from "./components/audio";
-export * from "./components/button";
-export * from "./components/checkBox";
-export * from "./components/colorSelect";
+export const Alert = React.lazy(() => import("./components/alert").then(module => ({ default: module.Alert })));
+export const TacoAudio = React.lazy(() => import("./components/audio").then(module => ({ default: module.TacoAudio })));
+export type { TacoButtonType } from "./components/button";
+export const BigButtonStyle = React.lazy(() => import("./components/button").then(module => ({ default: module.BigButtonStyle })));
+export const BlueButton = React.lazy(() => import("./components/button").then(module => ({ default: module.BlueButton })));
+export const RedButton = React.lazy(() => import("./components/button").then(module => ({ default: module.RedButton })));
+export const LinkButton = React.lazy(() => import("./components/button").then(module => ({ default: module.LinkButton })));
+export const TacoButton = React.lazy(() => import("./components/button").then(module => ({ default: module.TacoButton })));
+export const CheckBox = React.lazy(() => import("./components/checkBox").then(module => ({ default: module.CheckBox })));
 export * from "./components/colorSelect/colorUtils";
-export * from "./components/colorSelect/index";
+export const ColorSelect = React.lazy(() => import("./components/colorSelect/index").then(module => ({ default: module.ColorSelect })));
 export * from "./components/container";
 export * from "./components/control";
-export * from "./components/copyTextButton";
+export const CopyTextButton = React.lazy(() => import("./components/copyTextButton").then(module => ({ default: module.CopyTextButton})));
 export * from "./components/customSelect";
 export * from "./components/edit";
+export type { EditTextProps } from "./components/edit";
+export const EditText = React.lazy(() => import("./components/edit").then(module => ({ default: module.EditText })));
+export const EditTextWrapper = React.lazy(() => import("./components/edit").then(module => ({ default: module.EditTextWrapper })));
+export const TextWrapper = React.lazy(() => import("./components/edit").then(module => ({ default: module.TextWrapper })));
 export * from "./components/eventHandler";
 export * from "./components/form";
-export * from "./components/iconSelect";
-export * from "./components/image";
-export * from "./components/keyValueList";
-export * from "./components/Loading";
-export * from "./components/markdown";
+export { removeQuote, useIcon, iconPrefix } from "./components/iconSelect";
+export const IconSelect = React.lazy(() => import("./components/iconSelect").then(module => ({ default: module.IconSelect })));
+export const IconSelectBase = React.lazy(() => import("./components/iconSelect").then(module => ({ default: module.IconSelectBase})));
+export const TacoImage = React.lazy(() => import("./components/image").then(module => ({ default: module.TacoImage })));
+export const KeyValueList = React.lazy(() => import("./components/keyValueList").then(module => ({ default: module.KeyValueList })));
+export const Loading = React.lazy(() => import("./components/Loading").then(module => ({ default: module.Loading })));
+export const WhiteLoading = React.lazy(() => import("./components/Loading").then(module => ({ default: module.WhiteLoading })));
+export const LightLoading = React.lazy(() => import("./components/Loading").then(module => ({ default: module.LightLoading })));
+export { markdownCompCss } from "./components/markdown";
+export const TacoMarkDown = React.lazy(() => import("./components/markdown").then(module => ({ default: module.TacoMarkDown })));
 export * from "./components/mockData";
 export * from "./components/option";
-export * from "./components/popover";
-export * from "./components/popupCard";
-export * from "./components/query";
-export * from "./components/selectedComps";
-export * from "./components/tacoInput";
-export * from "./components/tacoPagination";
-export * from "./components/toolTip";
-export * from "./components/video";
-export * from "./components/shapeSelect";
+export type { EditPopoverItemType, EditPopoverProps } from "./components/popover";
+export const CustomPopover = React.lazy(() => import("./components/popover").then(module => ({ default: module.CustomPopover })));
+export const SimplePopover = React.lazy(() => import("./components/popover").then(module => ({ default: module.SimplePopover })));
+export const EditPopover = React.lazy(() => import("./components/popover").then(module => ({ default: module.EditPopover})));
+export const PopupCard = React.lazy(() => import("./components/popupCard").then(module => ({ default: module.PopupCard })));
+export const QueryPropertyViewWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryPropertyViewWrapper })));
+export const QueryAlert = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryAlert })));
+export const QuerySectionWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QuerySectionWrapper })));
+export const QueryConfigWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryConfigWrapper })));
+export const QueryConfigLabel = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryConfigLabel })));
+export const QueryConfigItemWrapper = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryConfigItemWrapper })));
+export const QueryTutorialButton = React.lazy(() => import("./components/query").then(module => ({ default: module.QueryTutorialButton })));
+export const TriggerTypeStyled = React.lazy(() => import("./components/query").then(module => ({ default: module.TriggerTypeStyled })));
+export const SelectedComps = React.lazy(() => import("./components/selectedComps").then(module => ({ default: module.SelectedComps})));
+export const TacoInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.TacoInput })));
+export const BlurFinishInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.BlurFinishInput })));
+export const PhoneNumberInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.PhoneNumberInput })));
+export const OtpFormInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.OtpFormInput })));
+export const FormInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.FormInput })));
+export const PasswordInput = React.lazy(() => import("./components/tacoInput").then(module => ({ default: module.PasswordInput })));
+export { pageItemRender } from "./components/tacoPagination";
+export const TacoPagination = React.lazy(() => import("./components/tacoPagination").then(module => ({ default: module.TacoPagination })));
+export { UnderlineCss } from "./components/toolTip";
+export const TooltipCodeBlock = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.TooltipCodeBlock})));
+export const TooltipLink = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.TooltipLink})));
+export const TutorialsTooltip = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.TutorialsTooltip})));
+export const CommonTipsOverlay = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.CommonTipsOverlay})));
+export const Tooltip = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.Tooltip})));
+export const ToolTipLabel = React.lazy(() => import("./components/toolTip").then(module => ({ default: module.ToolTipLabel})));
+export { playIcon } from "./components/video";
+export const Video = React.lazy(() => import("./components/video").then(module => ({ default: module.Video })));
+export const Container = React.lazy(() => import("./components/video").then(module => ({ default: module.Container})));
+export { useShape } from "./components/shapeSelect";
+export const ShapeSelect = React.lazy(() => import("./components/shapeSelect").then(module => ({ default: module.ShapeSelect })));
+export const ShapeSelectBase = React.lazy(() => import("./components/shapeSelect").then(module => ({ default: module.ShapeSelectBase})));
 
 export * from "./icons";
-
 export * from "./icons/antIcon";

client/packages/lowcoder/package.json

@@ -25,10 +25,10 @@
  "@fortawesome/free-solid-svg-icons": "^6.5.1",
  "@fortawesome/react-fontawesome": "latest",
  "@manaflair/redux-batch": "^1.0.0",
- "@rjsf/antd": "^5.18.6",
- "@rjsf/core": "^5.18.6",
- "@rjsf/utils": "^5.18.6",
- "@rjsf/validator-ajv8": "^5.18.6",
+ "@rjsf/antd": "^5.21.2",
+ "@rjsf/core": "^5.21.2",
+ "@rjsf/utils": "^5.21.2",
+ "@rjsf/validator-ajv8": "^5.21.2",
  "@types/lodash": "^4.14.194",
  "@types/node": "^16.7.13",
  "@types/react": "^18.2.45",

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ArrayFieldTemplate.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button, Row, Col } from 'antd';
+import { ArrayFieldTemplateProps } from '@rjsf/utils';
+import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+
+const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+ const { items, canAdd, onAddClick, title } = props;
+
+ return (
+ <fieldset>
+ {title && <legend>{title}</legend>}
+ <Row gutter={[0, 0]}>
+ {items.map((element: any) => (
+ <Col key={element.index} span={24} style={{ display: 'flex', alignItems: 'center' }}>
+ {/* Content container for the array item */}
+ <div style={{ flexGrow: 1 }}>
+ {element.children}
+ </div>
+
+ {/* Container for the control buttons with vertical alignment */}
+ <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', paddingTop: "58px" }}>
+ {/* Move down button */}
+ {element.hasMoveDown && (
+ <Button
+ type="default"
+ icon={<ArrowDownOutlined />}
+ onClick={element.onReorderClick(element.index, element.index + 1)}
+ style={{ marginLeft: '4px' }}
+ />
+ )}
+
+ {/* Move up button */}
+ {element.hasMoveUp && (
+ <Button
+ type="default"
+ icon={<ArrowUpOutlined />}
+ onClick={element.onReorderClick(element.index, element.index - 1)}
+ style={{ marginLeft: '4px' }}
+ />
+ )}
+
+ {/* Remove button */}
+ {element.hasRemove && (
+ <Button
+ type="default"
+ icon={<DeleteOutlined />}
+ danger
+ onClick={element.onDropIndexClick(element.index)}
+ style={{ marginLeft: '4px' }}
+ />
+ )}
+ </div>
+ </Col>
+ ))}
+ {/* Add button for the array */}
+ {canAdd && (
+ <Col span={24} style={{ textAlign: 'center' }}>
+ <Button type="dashed" onClick={onAddClick} icon={<PlusOutlined />}>
+ Add Item
+ </Button>
+ </Col>
+ )}
+ </Row>
+ </fieldset>
+ );
+};
+
+export default ArrayFieldTemplate;