Added double click to almost all components #1754

Original file line number	Diff line number	Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 deletions client/packages/lowcoder/src/comps/comps/avatarGroup.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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 Down Expand 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

4 changes: 3 additions & 1 deletion client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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

53 changes: 42 additions & 11 deletions client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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

15 changes: 11 additions & 4 deletions client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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

17 changes: 13 additions & 4 deletions client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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 Down Expand 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 deletions client/packages/lowcoder/src/comps/comps/iconComp.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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 Down Expand 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 deletions client/packages/lowcoder/src/comps/comps/imageComp.tsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff 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 Down Expand 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 Down Expand 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 Down Expand 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

Navigation Menu

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Added double click to almost all components #1754

Uh oh!

Added double click to almost all components #1754

Filter by extension

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!