Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Added double click to almost all components#1754

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.

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

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
13 commits
Select commitHold shift + click to select a range
e9ec6de
Added double click to almost all components
kamal-qureshiJun 6, 2025
1bc331a
Merge branch 'dev' into doubleClick_event_component
raheeliftikhar5Jun 10, 2025
f3c8d43
Merge branch 'dev' into doubleClick_event_component
kamal-qureshiJun 11, 2025
a65010b
Updated event value
kamal-qureshiJun 11, 2025
a0190a5
Merge branch 'dev' into doubleClick_event_component
kamal-qureshiJun 12, 2025
a538642
Merge branch 'dev' into doubleClick_event_component
kamal-qureshiJun 12, 2025
4dbce10
Updated Double Click event on all components
kamal-qureshiJun 12, 2025
a27f132
fix: - Added timeout - Removed Console logs
kamal-qureshiJun 12, 2025
c6f2d79
fix memory leaks and convert click event wrapper to hook
raheeliftikhar5Jun 13, 2025
5c18bfc
Merge branch 'dev' into doubleClick_event_component
kamal-qureshiJun 13, 2025
fe1deda
Merge branch 'dev' into doubleClick_event_component
kamal-qureshiJun 14, 2025
df38a03
Optimizations - Added hook for click event handlers
kamal-qureshiJun 16, 2025
b454a7f
- Requested Changes
kamal-qureshiJun 16, 2025
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
10 changes: 7 additions & 3 deletionsclient/packages/lowcoder/src/comps/comps/avatar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,6 +25,7 @@ import { IconControl } from "comps/controls/iconControl";
import {
clickEvent,
eventHandlerControl,
doubleClickEvent,
} from "../controls/eventHandlerControl";
import { Avatar, AvatarProps, Badge, Dropdown, Menu } from "antd";
import { LeftRightControl, dropdownControl } from "../controls/dropdownControl";
Expand All@@ -34,6 +35,8 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
import { DropdownOptionControl } from "../controls/optionsControl";
import { ReactElement, useContext, useEffect } from "react";
import { CompNameContext, EditorContext } from "../editorState";
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";


const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
background: ${(props) => props.$style.background};
Expand DownExpand Up@@ -106,7 +109,7 @@ padding: ${props=>props.$style.padding};
background: ${props=>props.$style.background};
text-decoration: ${props => props.$style.textDecoration};
`
const EventOptions = [clickEvent] as const;
const EventOptions = [clickEvent, doubleClickEvent] as const;
const sharpOptions = [
{ label: trans("avatarComp.square"), value: "square" },
{ label: trans("avatarComp.circle"), value: "circle" },
Expand DownExpand Up@@ -140,6 +143,8 @@ const childrenMap = {
const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
const { shape, title, src, iconSize } = props;
const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})

// const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
const items = props.options
Expand DownExpand Up@@ -181,8 +186,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
shape={shape}
$style={props.avatarStyle}
src={src.value}
// $cursorPointer={eventsCount > 0}
onClick={() => props.onEvent("click")}
onClick={handleClickEvent}
>
{title.value}
</AvatarWrapper>
Expand Down
9 changes: 6 additions & 3 deletionsclient/packages/lowcoder/src/comps/comps/avatarGroup.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { NumberControl, StringControl } from "comps/controls/codeControl";
import { Avatar, Tooltip } from "antd";
import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
import { clickEvent,doubleClickEvent,eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
import styled from "styled-components";
import { useContext, ReactElement, useEffect } from "react";
import { MultiCompBuilder, stateComp, withDefault } from "../generators";
Expand All@@ -19,6 +19,7 @@ import { optionsControl } from "../controls/optionsControl";
import { BoolControl } from "../controls/boolControl";
import { dropdownControl } from "../controls/dropdownControl";
import { JSONObject } from "util/jsonTypes";
import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";

const MacaroneList = [
'#fde68a',
Expand DownExpand Up@@ -77,7 +78,7 @@ const DropdownOption = new MultiCompBuilder(
))
.build();

const EventOptions = [clickEvent, refreshEvent] as const;
const EventOptions = [clickEvent, refreshEvent, doubleClickEvent] as const;

export const alignOptions = [
{ label: <AlignLeft />, value: "flex-start" },
Expand DownExpand Up@@ -105,6 +106,8 @@ const childrenMap = {
};

const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})

return (
<Container
$style={props.style}
Expand All@@ -125,7 +128,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
}}
size={props.avatarSize}
onClick={() => {
props.onEvent("click")
handleClickEvent();
props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
}}
>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,6 +29,7 @@ import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstant
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
import { RecordConstructorToComp } from "lowcoder-core";
import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";

const FormLabel = styled(CommonBlueLabel)`
font-size: 13px;
Expand DownExpand Up@@ -181,6 +182,7 @@ const ButtonPropertyView = React.memo((props: {
const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
const editorState = useContext(EditorContext);
const mountedRef = useRef<boolean>(true);
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent});

useEffect(() => {
return () => {
Expand All@@ -193,7 +195,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {

try {
if (isDefault(props.type)) {
props.onEvent("click");
handleClickEvent();
} else {
submitForm(editorState, props.form);
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import React from "react";
import { RecordConstructorToView } from "lowcoder-core";
import { BoolControl } from "comps/controls/boolControl";
import { stringExposingStateControl } from "comps/controls/codeStateControl";
Expand All@@ -16,7 +17,7 @@ import { IconControl } from "comps/controls/iconControl";
import styled from "styled-components";
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
import { manualOptionsControl } from "comps/controls/optionsControl";
import {useContext, useEffect} from "react";
import {useCompClickEventHandler} from "@lowcoder-ee/comps/utils/useCompClickEventHandler";

const StyledFloatButton = styled(FloatButton)<{
$animationStyle: AnimationStyleType;
Expand DownExpand Up@@ -98,21 +99,51 @@ const childrenMap = {
dot: BoolControl,
};

const FloatButtonItem = React.memo(({
button,
animationStyle,
badgeStyle,
buttonTheme,
shape,
dot
}: {
button: any;
animationStyle: AnimationStyleType;
badgeStyle: BadgeStyleType;
buttonTheme: 'primary' | 'default';
shape: 'circle' | 'square';
dot: boolean;
}) => {
const handleClickEvent = useCompClickEventHandler({ onEvent: button.onEvent });

return (
<StyledFloatButton
$animationStyle={animationStyle}
key={button?.id}
icon={button?.icon}
onClick={handleClickEvent}
tooltip={button?.label}
description={button?.description}
badge={{ count: button?.badge, color: badgeStyle.badgeColor, dot: dot }}
type={buttonTheme}
shape={shape}
/>
);
});

const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) => {
const renderButton = (button: any, onlyOne?: boolean) => {
return !button?.hidden ? (
<StyledFloatButton
$animationStyle={props.animationStyle}
<FloatButtonItem
key={button?.id}
icon={button?.icon}
onClick={() => button.onEvent("click")}
tooltip={button?.label}
description={button?.description}
badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}
type={onlyOne ? props.buttonTheme : 'default'}
button={button}
animationStyle={props.animationStyle}
badgeStyle={props.badgeStyle}
buttonTheme={onlyOne ? props.buttonTheme : 'default'}
shape={props.shape}
/>)
: ''
dot={props.dot}
/>
) : '';
}
return (
<Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,10 +25,11 @@ import {
eventHandlerControl,
deleteEvent,
mentionEvent,
} from "comps/controls/eventHandlerControl";

doubleClickEvent,
} from "comps/controls/eventHandlerControl";
import { EditorContext } from "comps/editorState";


// Introducing styles
import {
AnimationStyle,
Expand DownExpand Up@@ -66,6 +67,7 @@ import dayjs from "dayjs";
// import "dayjs/locale/zh-cn";
import { getInitialsAndColorCode } from "util/stringUtils";
import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";

dayjs.extend(relativeTime);
// dayjs.locale("zh-cn");
Expand All@@ -80,6 +82,7 @@ dayjs.extend(relativeTime);

const EventOptions = [
clickEvent,
doubleClickEvent,
submitEvent,
deleteEvent,
mentionEvent,
Expand DownExpand Up@@ -133,6 +136,8 @@ const CommentCompBase = (
const [commentListData, setCommentListData] = useState<commentDataTYPE[]>([]);
const [prefix, setPrefix] = useState<PrefixType>("@");
const [context, setContext] = useState<string>("");
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})

// Integrate the comment list with the names in the original mention list
const mergeAllMentionList = (mentionList: any) => {
setMentionList(
Expand DownExpand Up@@ -174,7 +179,7 @@ const CommentCompBase = (
const generateCommentAvatar = (item: commentDataTYPE) => {
return (
<Avatar
onClick={() => props.onEvent("click")}
onClick={handleClickEvent}
// If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode
style={{
backgroundColor: item?.user?.avatar
Expand DownExpand Up@@ -290,7 +295,9 @@ const CommentCompBase = (
<List.Item.Meta
avatar={generateCommentAvatar(item)}
title={
<div onClick={() => props.onEvent("click")}>
<div
onClick={handleClickEvent}
>
<a>{item?.user?.name}</a>
<Tooltip
title={
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,6 +21,7 @@ import { optionsControl } from "comps/controls/optionsControl";
import { dropdownControl } from "comps/controls/dropdownControl";
import { styleControl } from "comps/controls/styleControl";
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";

const { Meta } = Card;

Expand DownExpand Up@@ -196,7 +197,6 @@ export const ContainerBaseComp = (function () {

return new ContainerCompBuilder(childrenMap, (props) => {
props.container.showHeader = false;
// 注入容器参数
props.container.style = Object.assign(props.container.style, {
CONTAINER_BODY_PADDING: props.style.containerBodyPadding,
border: '#00000000',
Expand All@@ -205,6 +205,12 @@ export const ContainerBaseComp = (function () {
const conRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
const actionHandlers = props.actionOptions.map(item => ({
...item,
clickHandler: useCompClickEventHandler({onEvent: item.onEvent})
}));

useEffect(() => {
if (height && width) {
onResize();
Expand DownExpand Up@@ -233,7 +239,7 @@ export const ContainerBaseComp = (function () {
$cardType={props.cardType}
onMouseEnter={() => props.onEvent('focus')}
onMouseLeave={() => props.onEvent('blur')}
onClick={() => props.onEvent('click')}
onClick={handleClickEvent}
>
<Card
style={{ width: width, height: '100%' }}
Expand All@@ -246,10 +252,13 @@ export const ContainerBaseComp = (function () {
// 内容
cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
actions={props.cardType == 'common' && props.showActionIcon ?
props.actionOptions.filter(item => !item.hidden).map(item => {
actionHandlers.filter(item => !item.hidden).map(item => {
return (
<IconWrapper
onClick={() => item.onEvent('click')}
onClick={(e) => {
e.stopPropagation()
item.clickHandler()
}}
disabled={item.disabled}
$style={props.style}
>
Expand Down
7 changes: 5 additions & 2 deletionsclient/packages/lowcoder/src/comps/comps/iconComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,11 +27,13 @@ import { AutoHeightControl } from "../controls/autoHeightControl";
import {
clickEvent,
eventHandlerControl,
doubleClickEvent,
} from "../controls/eventHandlerControl";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
import { dropdownControl } from "../controls/dropdownControl";
import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";

const Container = styled.div<{
$sourceMode: string;
Expand DownExpand Up@@ -72,7 +74,7 @@ const Container = styled.div<{
`}
`;

const EventOptions = [clickEvent] as const;
const EventOptions = [clickEvent, doubleClickEvent] as const;

const ModeOptions = [
{ label: "Standard", value: "standard" },
Expand All@@ -94,6 +96,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
const conRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})

useEffect(() => {
if (height && width) {
Expand DownExpand Up@@ -134,7 +137,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
$sourceMode={props.sourceMode}
$animationStyle={props.animationStyle}
style={style}
onClick={() => props.onEvent("click")}
onClick={handleClickEvent}
>
{ props.sourceMode === 'standard'
? (props.icon || '')
Expand Down
8 changes: 6 additions & 2 deletionsclient/packages/lowcoder/src/comps/comps/imageComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import { Section, sectionNames } from "lowcoder-design";
import {
clickEvent,
eventHandlerControl,
doubleClickEvent,
} from "../controls/eventHandlerControl";
import { StringStateControl } from "../controls/codeStateControl";
import { UICompBuilder, withDefault } from "../generators";
Expand DownExpand Up@@ -37,6 +38,7 @@ import { StringControl } from "../controls/codeControl";
import { PositionControl } from "comps/controls/dropdownControl";
import { dropdownControl } from "../controls/dropdownControl";
import { AssetType, IconscoutControl } from "../controls/iconscoutControl";
import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";

const Container = styled.div<{
$style: ImageStyleType | undefined,
Expand DownExpand Up@@ -112,7 +114,7 @@ const getStyle = (style: ImageStyleType) => {
`;
};

const EventOptions = [clickEvent] as const;
const EventOptions = [clickEvent, doubleClickEvent] as const;
const ModeOptions = [
{ label: "URL", value: "standard" },
{ label: "Asset Library", value: "asset-library" },
Expand All@@ -123,6 +125,8 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
const conRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})


const imgOnload = (img: HTMLImageElement) => {
img.onload = function () {
Expand DownExpand Up@@ -211,7 +215,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
draggable={false}
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
fallback={DEFAULT_IMG_URL}
onClick={() => props.onEvent("click")}
onClick={handleClickEvent}
/>
</div>
</Container>
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp