Skip to content

Commit 13f7396

Browse files
MenamAfzalMenamAfzal
committed
animation style
1 parent d5f451a commit 13f7396

File tree

18 files changed

+1605
-1001
lines changed

18 files changed

+1605
-1001
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 84 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,45 @@
1-
import { default as Button } from "antd/es/button";
2-
import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
3-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
4-
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
5-
import { styleControl } from "comps/controls/styleControl";
6-
import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
7-
import { withDefault } from "comps/generators";
8-
import { migrateOldData } from "comps/generators/simpleGenerators";
9-
import { UICompBuilder } from "comps/generators/uiCompBuilder";
10-
import { Section, sectionNames } from "lowcoder-design";
11-
import styled from "styled-components";
12-
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
1+
import {default as Button} from 'antd/es/button';
2+
import {
3+
ButtonCompWrapper,
4+
buttonRefMethods,
5+
} from 'comps/comps/buttonComp/buttonCompConstants';
6+
import {BoolCodeControl, StringControl} from 'comps/controls/codeControl';
7+
import {ButtonEventHandlerControl} from 'comps/controls/eventHandlerControl';
8+
import {styleControl} from 'comps/controls/styleControl';
9+
import {
10+
AnimationStyle,
11+
AnimationStyleType,
12+
LinkStyle,
13+
LinkStyleType,
14+
} from 'comps/controls/styleControlConstants';
15+
import {withDefault} from 'comps/generators';
16+
import {migrateOldData} from 'comps/generators/simpleGenerators';
17+
import {UICompBuilder} from 'comps/generators/uiCompBuilder';
18+
import {Section, sectionNames} from 'lowcoder-design';
19+
import styled from 'styled-components';
20+
import {
21+
CommonNameConfig,
22+
NameConfig,
23+
withExposingConfigs,
24+
} from '../../generators/withExposing';
1325
import {
1426
hiddenPropertyView,
1527
disabledPropertyView,
1628
loadingPropertyView,
17-
} from "comps/utils/propertyUtils";
18-
import { trans } from "i18n";
19-
import { IconControl } from "comps/controls/iconControl";
20-
import { hasIcon } from "comps/utils";
21-
import { RefControl } from "comps/controls/refControl";
29+
} from 'comps/utils/propertyUtils';
30+
import {trans} from 'i18n';
31+
import {IconControl} from 'comps/controls/iconControl';
32+
import {hasIcon} from 'comps/utils';
33+
import {RefControl} from 'comps/controls/refControl';
2234

23-
import { EditorContext } from "comps/editorState";
24-
import React, { useContext } from "react";
35+
import {EditorContext} from 'comps/editorState';
36+
import React, {useContext} from 'react';
2537

26-
const Link = styled(Button) <{ $style: LinkStyleType }>`
38+
const Link = styled(Button)<{
39+
$style: LinkStyleType;
40+
$animationStyle: AnimationStyleType;
41+
}>`
42+
${(props) => props.$animationStyle}
2743
${(props) => `
2844
color: ${props.$style.text};
2945
margin: ${props.$style.margin};
@@ -33,9 +49,9 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
3349
font-family:${props.$style.fontFamily};
3450
font-weight:${props.$style.textWeight};
3551
border: ${props.$style.borderWidth} solid ${props.$style.border};
36-
border-radius:${props.$style.radius ? props.$style.radius:'0px'};
37-
text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
38-
text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
52+
border-radius:${props.$style.radius ? props.$style.radius : '0px'};
53+
text-transform:${props.$style.textTransform ? props.$style.textTransform : ''};
54+
text-decoration:${props.$style.textDecoration ? props.$style.textDecoration : ''} !important;
3955
background-color: ${props.$style.background};
4056
&:hover {
4157
color: ${props.$style.hoverText} !important;
@@ -45,7 +61,7 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
4561
}
4662
`}
4763
48-
&.ant-btn {
64+
&.ant-btn {
4965
display: inline-flex;
5066
align-items: center;
5167
> span {
@@ -66,7 +82,7 @@ const IconWrapper = styled.span`
6682
* compatible with old data 2022-08-26
6783
*/
6884
function fixOldData(oldData: any) {
69-
if (oldData && oldData.hasOwnProperty("color")) {
85+
if (oldData && oldData.hasOwnProperty('color')) {
7086
return {
7187
text: oldData.color,
7288
};
@@ -76,33 +92,40 @@ function fixOldData(oldData: any) {
7692

7793
const LinkTmpComp = (function () {
7894
const childrenMap = {
79-
text: withDefault(StringControl, trans("link.link")),
95+
text: withDefault(StringControl, trans('link.link')),
8096
onEvent: ButtonEventHandlerControl,
8197
disabled: BoolCodeControl,
8298
loading: BoolCodeControl,
8399
style: migrateOldData(styleControl(LinkStyle), fixOldData),
100+
animationStyle: styleControl(AnimationStyle),
84101
prefixIcon: IconControl,
85102
suffixIcon: IconControl,
86103
viewRef: RefControl<HTMLElement>,
87104
};
88105
return new UICompBuilder(childrenMap, (props) => {
89106
// chrome86 bug: button children should not contain only empty span
90-
const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
107+
const hasChildren =
108+
hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
91109
return (
92110
<ButtonCompWrapper disabled={props.disabled}>
93111
<Link
112+
$animationStyle={props.animationStyle}
94113
ref={props.viewRef}
95114
$style={props.style}
96115
loading={props.loading}
97116
disabled={props.disabled}
98-
onClick={() => props.onEvent("click")}
99-
type={"link"}
117+
onClick={() => props.onEvent('click')}
118+
type={'link'}
100119
>
101120
{hasChildren && (
102121
<span>
103-
{hasIcon(props.prefixIcon) && <IconWrapper>{props.prefixIcon}</IconWrapper>}
122+
{hasIcon(props.prefixIcon) && (
123+
<IconWrapper>{props.prefixIcon}</IconWrapper>
124+
)}
104125
{!!props.text && props.text}
105-
{hasIcon(props.suffixIcon) && <IconWrapper>{props.suffixIcon}</IconWrapper>}
126+
{hasIcon(props.suffixIcon) && (
127+
<IconWrapper>{props.suffixIcon}</IconWrapper>
128+
)}
106129
</span>
107130
)}
108131
</Link>
@@ -113,24 +136,39 @@ const LinkTmpComp = (function () {
113136
return (
114137
<>
115138
<Section name={sectionNames.basic}>
116-
{children.text.propertyView({ label: trans("text") })}
139+
{children.text.propertyView({label: trans('text')})}
117140
</Section>
118141

119-
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
120-
<><Section name={sectionNames.interaction}>
121-
{children.onEvent.getPropertyView()}
122-
{disabledPropertyView(children)}
123-
{hiddenPropertyView(children)}
124-
{loadingPropertyView(children)}
125-
</Section>
142+
{(useContext(EditorContext).editorModeStatus === 'logic' ||
143+
useContext(EditorContext).editorModeStatus === 'both') && (
144+
<>
145+
<Section name={sectionNames.interaction}>
146+
{children.onEvent.getPropertyView()}
147+
{disabledPropertyView(children)}
148+
{hiddenPropertyView(children)}
149+
{loadingPropertyView(children)}
150+
</Section>
126151
<Section name={sectionNames.advanced}>
127-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
128-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
129-
</Section></>
152+
{children.prefixIcon.propertyView({
153+
label: trans('button.prefixIcon'),
154+
})}
155+
{children.suffixIcon.propertyView({
156+
label: trans('button.suffixIcon'),
157+
})}
158+
</Section>
159+
</>
130160
)}
131161

132-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
133-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
162+
{(useContext(EditorContext).editorModeStatus === 'layout' ||
163+
useContext(EditorContext).editorModeStatus === 'both') && (
164+
<>
165+
<Section name={sectionNames.style}>
166+
{children.style.getPropertyView()}
167+
</Section>
168+
<Section name={sectionNames.animationStyle}>
169+
{children.animationStyle.getPropertyView()}
170+
</Section>
171+
</>
134172
)}
135173
</>
136174
);
@@ -140,7 +178,7 @@ const LinkTmpComp = (function () {
140178
})();
141179

142180
export const LinkComp = withExposingConfigs(LinkTmpComp, [
143-
new NameConfig("text", trans("link.textDesc")),
144-
new NameConfig("loading", trans("link.loadingDesc")),
181+
new NameConfig('text', trans('link.textDesc')),
182+
new NameConfig('loading', trans('link.loadingDesc')),
145183
...CommonNameConfig,
146184
]);

0 commit comments

Comments
 (0)