Skip to content

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 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
Show file tree
Hide file tree
Changes from all commits
Commits
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 deletions client/packages/lowcoder/src/comps/comps/avatar.tsx
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
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
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
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
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
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
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
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
Loading
Loading