Skip to content

change icons as lazy icons and process it's dependencies #1219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 2, 2024
Merged

change icons as lazy icons and process it's dependencies #1219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e6df96
change icons as lazy icons and process it's dependencies
Imiss-U1025 Oct 2, 2024
aa9e0e3
Merge branch 'dev' into feature-viewer
FalkWolsky Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/packages/lowcoder-design/src/components/option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}}
/>
Expand Down
727 changes: 0 additions & 727 deletions client/packages/lowcoder-design/src/icons/index.ts
View file
Open in desktop

This file was deleted.

728 changes: 728 additions & 0 deletions client/packages/lowcoder-design/src/icons/index.tsx
View file
Open in desktop

Large diffs are not rendered by default.

143 changes: 104 additions & 39 deletions client/packages/lowcoder-design/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ function HideIcon(props: { hide: boolean; setHide: (hide: boolean) => void }) {
const Eye = hide ? CloseEye : OpenEye;
return (
<Eye
onClick={(e) => {
onClick={(e: any) => {
setHide(!hide);
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/controls/iconControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const IconPicker = (props: {
<ButtonIconWrapper>{icon.getView()}</ButtonIconWrapper>
<ButtonText title={icon.title}>{icon.title}</ButtonText>
<StyledDeleteInputIcon
onClick={(e) => {
onClick={(e: any) => {
props.onChange("");
e.stopPropagation();
}}
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/controls/shapeControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const IconPicker = (props: {
</ButtonIconWrapper>

<StyledDeleteInputIcon
onClick={(e) => {
onClick={(e: any) => {
props.onChange("");
e.stopPropagation();
}}
Expand Down
Loading