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

Commit 6a30754

Browse files
Merge pull request #933 from MenamAfzal/feature/add-box-shadow-on-input
Feature/add box shadow on input
2 parents 88ecd3c + e47d7fd commit 6a30754

File tree

7 files changed

+22
-11
lines changed

7 files changed

+22
-11
lines changed

‎client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
withExposingConfigs,
1717
} from "comps/generators/withExposing";
1818
import styled, { css } from "styled-components";
19-
import { UICompBuilder } from "../../generators";
19+
import { UICompBuilder,withDefault } from "../../generators";
2020
import { FormDataPropertyView } from "../formComp/formDataConstants";
2121
import { jsonControl } from "comps/controls/codeControl";
2222
import { dropdownControl } from "comps/controls/dropdownControl";
@@ -58,7 +58,8 @@ import {
5858

5959

6060

61-
const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
61+
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
62+
box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
6263
${(props) => css`
6364
${getStyle(props.$style)}
6465
input {
@@ -75,7 +76,7 @@ const childrenMap = {
7576
...textInputChildren,
7677
viewRef: RefControl<InputRef>,
7778
allowClear: BoolControl.DEFAULT_TRUE,
78-
style: styleControl(InputFieldStyle),
79+
style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
7980
labelStyle:styleControl(LabelStyle),
8081
prefixIcon: IconControl,
8182
suffixIcon: IconControl,
@@ -89,7 +90,7 @@ const childrenMap = {
8990
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
9091
componentSize: dropdownControl(componentSize, "small"),
9192
valueInItems: booleanExposingStateControl("valueInItems"),
92-
inputFieldStyle: styleControl(InputLikeStyle),
93+
inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
9394
animationStyle: styleControl(AnimationStyle),
9495
};
9596

‎client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,11 @@ const getStyle = (style: InputLikeStyleType) => {
119119
`;
120120
};
121121

122-
const InputNumber = styled(AntdInputNumber)<{
122+
const InputNumber = styled(AntdInputNumber)<{
123123
$style: InputLikeStyleType;
124124
}>`
125+
box-shadow: ${(props) =>
126+
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
125127
width: 100%;
126128
${(props) => props.$style && getStyle(props.$style)}
127129
`;

‎client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ import { EditorContext } from "comps/editorState";
4040
* Input Comp
4141
*/
4242

43-
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
43+
const InputStyle = styled(Input)<{$style: InputLikeStyleType}>`
44+
box-shadow: ${(props) =>
45+
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
4446
${(props) => props.$style && getStyle(props.$style)}
4547
`;
4648

‎client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,11 @@ import React, { useContext } from "react";
4343
import { EditorContext } from "comps/editorState";
4444
import { migrateOldData } from "comps/generators/simpleGenerators";
4545

46-
const PasswordStyle = styled(InputPassword)<{
46+
const PasswordStyle = styled(InputPassword)<{
4747
$style: InputLikeStyleType;
4848
}>`
49+
box-shadow: ${(props) =>
50+
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
4951
${(props) => props.$style && getStyle(props.$style)}
5052
`;
5153

‎client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,11 @@ import React, { useContext } from "react";
3838
import { EditorContext } from "comps/editorState";
3939
import { migrateOldData } from "comps/generators/simpleGenerators";
4040

41-
const TextAreaStyled = styled(TextArea)<{
41+
const TextAreaStyled = styled(TextArea)<{
4242
$style: InputLikeStyleType;
4343
}>`
44+
box-shadow: ${(props) =>
45+
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
4446
${(props) => props.$style && getStyle(props.$style)}
4547
`;
4648

‎client/packages/lowcoder/src/comps/controls/labelControl.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function getStyle(style: any) {
4646
}
4747

4848
const LabelViewWrapper = styled.div<{ $style: any, inputFieldStyle: any,$animationStyle:any }>`
49-
${(props) => {
49+
${(props) => {
5050
return (
5151
props.$style && {
5252
...props.$style,
@@ -230,7 +230,7 @@ export const LabelControl = (function () {
230230
? `calc(100% - ${getLabelWidth(props.width, props.widthUnit)} - 8px)`
231231
: "100%",
232232
height: props.position === "column" && !!props.text ? "calc(100% - 22px)" : "100%",
233-
rotate:args?.inputFieldStyle?.rotation
233+
rotate:args?.inputFieldStyle?.rotation,
234234
}}
235235
>
236236
{args.children}

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1028,6 +1028,8 @@ export const SliderStyle = [
10281028

10291029
export const InputLikeStyle = [
10301030
getStaticBackground(SURFACE_COLOR),
1031+
BOXSHADOW,
1032+
BOXSHADOWCOLOR,
10311033
...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
10321034
...ACCENT_VALIDATE,
10331035
] as const;
@@ -1126,7 +1128,7 @@ export const startButtonStyle = [
11261128

11271129
export const LabelStyle = [
11281130
...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter(
1129-
(style) => style.name !== "radius" && style.name !== "background"&&style.name!=='rotation'
1131+
(style) => style.name !== "radius" && style.name !== "background"&&style.name!=='rotation'&&style.name!=="boxShadow"&&style.name!=='boxShadowColor'
11301132
),
11311133
];
11321134

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /