Skip to content

Commit ae43e5f

Browse files
raheeliftikhar5raheeliftikhar5
committed
upgrade styles-components dependency
1 parent 54786b8 commit ae43e5f

File tree

144 files changed

+1188
-1040
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

144 files changed

+1188
-1040
lines changed

‎client/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@
3434
"@types/react-resizable": "^3.0.5",
3535
"@types/react-router-dom": "^5.3.2",
3636
"@types/shelljs": "^0.8.11",
37-
"@types/styled-components": "^5.1.19",
3837
"@types/stylis": "^4.0.2",
3938
"@types/tern": "0.23.4",
4039
"@types/ua-parser-js": "^0.7.36",
@@ -71,6 +70,9 @@
7170
},
7271
"dependencies": {
7372
"@lottiefiles/react-lottie-player": "^3.5.3",
73+
"@testing-library/react": "^14.1.2",
74+
"@testing-library/user-event": "^14.5.1",
75+
"@types/styled-components": "^5.1.34",
7476
"antd-mobile": "^5.28.0",
7577
"chalk": "4",
7678
"number-precision": "^1.6.0",

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -290,11 +290,11 @@ let CalendarBasicComp = (function () {
290290
return (
291291
<Wrapper
292292
ref={ref}
293-
editable={editable}
293+
$editable={editable}
294294
$style={style}
295-
theme={theme?.theme}
295+
$theme={theme?.theme}
296296
onDoubleClick={handleDbClick}
297-
left={left}
297+
$left={left}
298298
key={initialDate ? defaultView + initialDate : defaultView}
299299
>
300300
<FullCalendar

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import {
2727
import { Form } from "antd";
2828

2929
export const Wrapper = styled.div<{
30-
editable: boolean;
30+
$editable: boolean;
3131
$style: CalendarStyleType;
32-
theme?: ThemeDetail;
33-
left?: number;
32+
$theme?: ThemeDetail;
33+
$left?: number;
3434
}>`
3535
position: relative;
3636
height: 100%;
@@ -205,9 +205,9 @@ export const Wrapper = styled.div<{
205205
flex-direction: inherit;
206206
}
207207
.fc-day-today .fc-daygrid-day-number {
208-
background-color: ${(props) => props.theme.primary};
208+
background-color: ${(props) => props.$theme.primary};
209209
color: ${(props) =>
210-
contrastText(props.theme.primary || "", props.theme.textDark, props.theme.textLight)};
210+
contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)};
211211
}
212212
.fc-daygrid-day-events {
213213
padding: 1px 0 5px 0;
@@ -261,7 +261,7 @@ export const Wrapper = styled.div<{
261261
border-radius: 4px;
262262
box-shadow: 0 0px 10px 4px rgba(0, 0, 0, 0.25);
263263
overflow: hidden;
264-
left: ${(props) => `min(${props.left}px, calc(100% - 210px)) !important`};
264+
left: ${(props) => `min(${props.$left}px, calc(100% - 210px)) !important`};
265265
.fc-popover-body {
266266
padding: 4px 0;
267267
min-width: 200px;
@@ -368,7 +368,7 @@ export const Wrapper = styled.div<{
368368
}
369369
&:hover {
370370
.event-remove {
371-
opacity: ${(props) => props.editable && 1};
371+
opacity: ${(props) => props.$editable ? 1 : undefined};
372372
}
373373
}
374374
}
@@ -585,10 +585,10 @@ export const Wrapper = styled.div<{
585585
}
586586
.fc-day-today.fc-col-header-cell {
587587
background-color: ${(props) =>
588-
isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.theme.primary!) + "19"};
588+
isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"};
589589
a {
590590
color: ${(props) =>
591-
!isDarkColor(props.$style.background) && darkenColor(props.theme.primary!, 0.1)};
591+
!isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)};
592592
}
593593
}
594594
.fc-col-header-cell-cushion {

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en";
44
export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
55
export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
66
export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;
7-
export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js?v=3.exp`;
7+
export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
88
export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
99
export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;

‎client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -266,8 +266,8 @@ export function getSelectedPoints(param: any, option: any) {
266266
return [];
267267
}
268268

269-
export function loadGoogleMapsScript(apiKey?: string) {
270-
const mapsUrl = `${googleMapsApiUrl}&key=${apiKey}`;
269+
export function loadGoogleMapsScript(apiKey: string) {
270+
const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
271271
const scripts = document.getElementsByTagName('script');
272272
// is script already loaded
273273
let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));

‎client/packages/lowcoder-design/src/components/Collapase.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,16 @@ import { ReactComponent as Omit } from "icons/icon-omit.svg";
55
import styled, { css } from "styled-components";
66
import React, { ReactNode } from "react";
77

8-
const Panel = styled(AntdCollapse.Panel)`
9-
.ant-collapse-header-text {
10-
max-width: calc(100% - 14px);
11-
}
12-
`;
13-
14-
const Container = styled.div<{ optColor?: boolean; simple?: boolean }>`
8+
const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
159
&&& {
16-
background: ${(props) => (props.optColor ? "#f2f7fc" : null)};
10+
background: ${(props) => (props.$optColor ? "#f2f7fc" : null)};
1711
}
1812
1913
cursor: pointer;
20-
padding-left: ${(props) => (props.simple ? 0 : "2px")};
14+
padding-left: ${(props) => (props.$simple ? 0 : "2px")};
2115
2216
&:hover {
23-
background-color: ${(props) => (props.simple ? "#FFFFFF" : "#f2f7fc80")};
17+
background-color: ${(props) => (props.$simple ? "#FFFFFF" : "#f2f7fc80")};
2418
}
2519
2620
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
@@ -39,12 +33,12 @@ const Container = styled.div<{ optColor?: boolean; simple?: boolean }>`
3933
font-weight: 500;
4034
font-size: 13px;
4135
line-height: 13px;
42-
padding-left: ${(props) => (props.simple ? 0 : "6px")};
36+
padding-left: ${(props) => (props.$simple ? 0 : "6px")};
4337
user-select: none;
4438
}
4539
4640
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
47-
margin-right: ${(props) => (props.simple ? 0 : "2px")};
41+
margin-right: ${(props) => (props.$simple ? 0 : "2px")};
4842
}
4943
`;
5044

@@ -106,7 +100,7 @@ export const Collapse = (props: Iprops) => {
106100

107101
return (
108102
// <Contain $color={props.isSelected || Color!==""}>
109-
<Container optColor={props.isSelected} simple={props.simple} className={props.className}>
103+
<Container $optColor={props.isSelected} $simple={props.simple} className={props.className}>
110104
<AntdCollapse
111105
ghost
112106
expandIcon={getExpandIcon}

‎client/packages/lowcoder-design/src/components/CustomModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { trans } from "i18n/design";
1111
import { modalInstance } from "components/GlobalInstances";
1212

1313
type ModalWrapperProps = {
14-
width?: string | number;
14+
$width?: string | number;
1515
};
1616

1717
type Model = {
@@ -22,7 +22,7 @@ type Model = {
2222
const ModalWrapper = styled.div<ModalWrapperProps>`
2323
display: flex;
2424
flex-direction: column;
25-
width: ${(props) => (props.width ? props.width : "368px")};
25+
width: ${(props) => (props.$width ? props.$width : "368px")};
2626
height: fit-content;
2727
background: #ffffff;
2828
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
@@ -217,7 +217,7 @@ const DEFAULT_PROPS = {
217217
function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
218218
return (
219219
<Draggable handle=".handle" disabled={!props.draggable}>
220-
<ModalWrapper width={props.width}>
220+
<ModalWrapper $width={props.width}>
221221
<>
222222
<ModalHeaderWrapper className="handle" $draggable={props.draggable}>
223223
<ModalHeader

‎client/packages/lowcoder-design/src/components/Dropdown.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { Tooltip, ToolTipLabel } from "./toolTip";
1010

1111
type ControlPlacement = "bottom" | "right" | "modal";
1212

13-
export const DropdownContainer = styled.div<{ placement: ControlPlacement }>`
13+
export const DropdownContainer = styled.div<{ $placement: ControlPlacement }>`
1414
display: flex;
1515
height: 32px;
1616
width: ${(props) =>
17-
props.placement === "right"
17+
props.$placement === "right"
1818
? "calc(100% - 96px)"
1919
: "bottom"
2020
? "calc(100% - 112px)"
@@ -35,18 +35,18 @@ export const DropdownContainer = styled.div<{ placement: ControlPlacement }>`
3535
}
3636
3737
> div {
38-
width: 100%;
38+
width: 100% !important;
3939
}
4040
4141
${(props) =>
42-
props.placement === "bottom" &&
42+
props.$placement === "bottom" &&
4343
`
4444
> div {
4545
width: 184px;
4646
flex-grow: 1;
4747
}
4848
49-
::after {
49+
&::after {
5050
content: "";
5151
width: 264px;
5252
flex-grow: 1;
@@ -60,21 +60,21 @@ const DropDownItemLabel = styled.div`
6060
line-height: 15px;
6161
`;
6262

63-
const SegmentedWrapper = styled.div<{ placement: ControlPlacement }>`
63+
const SegmentedWrapper = styled.div<{ $placement: ControlPlacement }>`
6464
display: flex;
6565
height: 28px;
66-
width: ${(props) => (props.placement === "right" ? "calc(100% - 96px)" : "100% - 112px")};
66+
width: ${(props) => (props.$placement === "right" ? "calc(100% - 96px)" : "100% - 112px")};
6767
flex-grow: 1;
6868
6969
${(props) =>
70-
props.placement === "bottom" &&
70+
props.$placement === "bottom" &&
7171
`
7272
> div {
7373
width: 184px;
7474
flex-grow: 1;
7575
}
7676
77-
::after {
77+
&::after {
7878
content: "";
7979
width: 264px;
8080
flex-grow: 1;
@@ -120,9 +120,9 @@ const FlexDiv = styled.div`
120120
align-items: center;
121121
`;
122122

123-
const LabelWrapper = styled.div<{ placement: ControlPlacement }>`
123+
const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
124124
flex-shrink: 0;
125-
width: ${(props) => (props.placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
125+
width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
126126
`;
127127

128128
export type OptionType = {
@@ -159,14 +159,14 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
159159
return (
160160
<FlexDiv style={props.style} className={props.className}>
161161
{props.label && (
162-
<LabelWrapper placement={placement} style={props.labelStyle}>
162+
<LabelWrapper $placement={placement} style={props.labelStyle}>
163163
<ToolTipLabel title={props.toolTip} label={props.label} />
164164
</LabelWrapper>
165165
)}
166166

167167
{!props.radioButton && (
168168
<Tooltip title={!props.label ? props.toolTip : undefined}>
169-
<DropdownContainer placement={placement} style={props.dropdownStyle}>
169+
<DropdownContainer $placement={placement} style={props.dropdownStyle}>
170170
<CustomSelect
171171
open={props.open}
172172
listHeight={props.lineHeight}
@@ -231,7 +231,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
231231
)}
232232

233233
{props.radioButton && (
234-
<SegmentedWrapper placement={placement}>
234+
<SegmentedWrapper $placement={placement}>
235235
<Segmented
236236
block={true}
237237
onChange={(value) => props.onChange(value.toString())}

‎client/packages/lowcoder-design/src/components/ExternalLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const ExternalLink = styled.a`
99
display: inline-flex;
1010
align-items: center;
1111
12-
:hover {
12+
&:hover {
1313
color: ${ActiveTextColor};
1414
}
1515
`;

‎client/packages/lowcoder-design/src/components/Label.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const labelCss: any = css`
77
font-size: 13px;
88
color: #222222;
99
10-
:hover {
10+
&:hover {
1111
cursor: default;
1212
}
1313
`;
@@ -67,21 +67,21 @@ export const BlockLabel = (props: IBlocklabel) => {
6767

6868
// Title text in each line of Collapse
6969
const LeftTitle = styled.span<{
70-
color?: string;
71-
line?: number;
72-
hasChild?: boolean;
70+
$color?: string;
71+
$line?: number;
72+
$hasChild?: boolean;
7373
}>`
7474
word-wrap: break-word;
7575
word-break: break-all;
7676
white-space: pre-wrap;
7777
user-select: none;
7878
font-size: 13px;
79-
line-height: ${(props) => (props.line ? props.line : 23)}px;
80-
color: ${(props) => (props.color ? props.color : "#333333")};
79+
line-height: ${(props) => (props.$line ? props.$line : 23)}px;
80+
color: ${(props) => (props.$color ? props.$color : "#333333")};
8181
margin-right: 8px;
82-
font-weight: ${(props) => (props.hasChild ? "600" : "normal")};
82+
font-weight: ${(props) => (props.$hasChild ? "600" : "normal")};
8383
84-
:hover {
84+
&:hover {
8585
cursor: pointer;
8686
}
8787
`;
@@ -97,7 +97,7 @@ interface ICollapseTitle {
9797
export const CollapseTitle = (props: ICollapseTitle) => {
9898
const { color, label, lineHeight, hasChild } = props;
9999
return (
100-
<LeftTitle style={props.style} color={color} line={lineHeight} hasChild={hasChild}>
100+
<LeftTitle style={props.style} $color={color} $line={lineHeight} $hasChild={hasChild}>
101101
{label}
102102
</LeftTitle>
103103
);
@@ -140,16 +140,16 @@ export const CommonGrayLabel = styled.p`
140140
margin: 0;
141141
`;
142142

143-
export const CommonErrorLabel = styled.p<{ fontSize?: number }>`
144-
font-size: ${(props) => (props.fontSize ? props.fontSize : 12)}px;
145-
line-height: ${(props) => (props.fontSize ? props.fontSize : 12)}px;
143+
export const CommonErrorLabel = styled.p<{ $fontSize?: number }>`
144+
font-size: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px;
145+
line-height: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px;
146146
color: #f73131;
147147
margin: 0;
148148
`;
149149

150150
export const CommonBlueLabel = styled.span`
151151
${labelCss}
152-
:hover {
152+
&:hover {
153153
cursor: pointer;
154154
}
155155

0 commit comments

Comments
 (0)