1
- import { BoolCodeControl , StringControl } from ' comps/controls/codeControl' ;
2
- import { withDefault } from ' comps/generators' ;
3
- import { UICompBuilder } from ' comps/generators/uiCompBuilder' ;
1
+ import { BoolCodeControl , StringControl } from " comps/controls/codeControl" ;
2
+ import { withDefault } from " comps/generators" ;
3
+ import { UICompBuilder } from " comps/generators/uiCompBuilder" ;
4
4
import {
5
5
disabledPropertyView ,
6
6
hiddenPropertyView ,
7
7
loadingPropertyView ,
8
- } from ' comps/utils/propertyUtils' ;
9
- import { Section , sectionNames } from ' lowcoder-design' ;
10
- import { trans } from ' i18n' ;
11
- import styled from ' styled-components' ;
12
- import { ChangeEventHandlerControl } from ' ../../controls/eventHandlerControl' ;
8
+ } from " comps/utils/propertyUtils" ;
9
+ import { Section , sectionNames } from " lowcoder-design" ;
10
+ import { trans } from " i18n" ;
11
+ import styled from " styled-components" ;
12
+ import { ChangeEventHandlerControl } from " ../../controls/eventHandlerControl" ;
13
13
import {
14
14
CommonNameConfig ,
15
15
NameConfig ,
16
16
withExposingConfigs ,
17
- } from ' ../../generators/withExposing' ;
17
+ } from " ../../generators/withExposing" ;
18
18
import {
19
19
Button100 ,
20
20
ButtonCompWrapper ,
21
21
buttonRefMethods ,
22
- } from ' ./buttonCompConstants' ;
23
- import { IconControl } from ' comps/controls/iconControl' ;
22
+ } from " ./buttonCompConstants" ;
23
+ import { IconControl } from " comps/controls/iconControl" ;
24
24
import {
25
25
AlignWithStretchControl ,
26
26
LeftRightControl ,
27
- } from ' comps/controls/dropdownControl' ;
28
- import { booleanExposingStateControl } from ' comps/controls/codeStateControl' ;
27
+ } from " comps/controls/dropdownControl" ;
28
+ import { booleanExposingStateControl } from " comps/controls/codeStateControl" ;
29
29
import {
30
30
AnimationStyle ,
31
31
AnimationStyleType ,
32
32
ToggleButtonStyle ,
33
- } from ' comps/controls/styleControlConstants' ;
34
- import { styleControl } from ' comps/controls/styleControl' ;
35
- import { BoolControl } from ' comps/controls/boolControl' ;
36
- import { RefControl } from ' comps/controls/refControl' ;
37
- import React , { useContext } from ' react' ;
38
- import { EditorContext } from ' comps/editorState' ;
33
+ } from " comps/controls/styleControlConstants" ;
34
+ import { styleControl } from " comps/controls/styleControl" ;
35
+ import { BoolControl } from " comps/controls/boolControl" ;
36
+ import { RefControl } from " comps/controls/refControl" ;
37
+ import React , { useContext } from " react" ;
38
+ import { EditorContext } from " comps/editorState" ;
39
39
40
40
const IconWrapper = styled . div `
41
41
display: flex;
42
42
` ;
43
43
44
44
const ButtonCompWrapperStyled = styled ( ButtonCompWrapper ) < {
45
- $align : ' left' | ' center' | ' right' | ' stretch' ;
45
+ $align : " left" | " center" | " right" | " stretch" ;
46
46
$showBorder : boolean ;
47
47
$animationStyle : AnimationStyleType ;
48
48
} > `
@@ -52,26 +52,26 @@ const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
52
52
justify-content: ${ ( props ) => props . $align } ;
53
53
54
54
> button {
55
- width: ${ ( props ) => props . $align !== ' stretch' && ' auto' } ;
56
- border: ${ ( props ) => ! props . $showBorder && ' none' } ;
57
- box-shadow: ${ ( props ) => ! props . $showBorder && ' none' } ;
55
+ width: ${ ( props ) => props . $align !== " stretch" && " auto" } ;
56
+ border: ${ ( props ) => ! props . $showBorder && " none" } ;
57
+ box-shadow: ${ ( props ) => ! props . $showBorder && " none" } ;
58
58
}
59
59
` ;
60
60
61
61
const ToggleTmpComp = ( function ( ) {
62
62
const childrenMap = {
63
- value : booleanExposingStateControl ( ' value' ) ,
63
+ value : booleanExposingStateControl ( " value" ) ,
64
64
showText : withDefault ( BoolControl , true ) ,
65
- trueText : withDefault ( StringControl , trans ( ' toggleButton.trueDefaultText' ) ) ,
65
+ trueText : withDefault ( StringControl , trans ( " toggleButton.trueDefaultText" ) ) ,
66
66
falseText : withDefault (
67
67
StringControl ,
68
- trans ( ' toggleButton.falseDefaultText' )
68
+ trans ( " toggleButton.falseDefaultText" )
69
69
) ,
70
70
onEvent : ChangeEventHandlerControl ,
71
71
disabled : BoolCodeControl ,
72
72
loading : BoolCodeControl ,
73
- trueIcon : withDefault ( IconControl , ' /icon:solid/AngleUp' ) ,
74
- falseIcon : withDefault ( IconControl , ' /icon:solid/AngleDown' ) ,
73
+ trueIcon : withDefault ( IconControl , " /icon:solid/AngleUp" ) ,
74
+ falseIcon : withDefault ( IconControl , " /icon:solid/AngleDown" ) ,
75
75
iconPosition : LeftRightControl ,
76
76
alignment : AlignWithStretchControl ,
77
77
style : styleControl ( ToggleButtonStyle ) ,
@@ -96,17 +96,17 @@ const ToggleTmpComp = (function () {
96
96
loading = { props . loading }
97
97
disabled = { props . disabled }
98
98
onClick = { ( ) => {
99
- props . onEvent ( ' change' ) ;
99
+ props . onEvent ( " change" ) ;
100
100
props . value . onChange ( ! props . value . value ) ;
101
101
} }
102
102
>
103
- { props . iconPosition === ' right' && text }
103
+ { props . iconPosition === " right" && text }
104
104
{
105
105
< IconWrapper >
106
106
{ props . value . value ? props . trueIcon : props . falseIcon }
107
107
</ IconWrapper >
108
108
}
109
- { props . iconPosition === ' left' && text }
109
+ { props . iconPosition === " left" && text }
110
110
</ Button100 >
111
111
</ ButtonCompWrapperStyled >
112
112
) ;
@@ -115,13 +115,13 @@ const ToggleTmpComp = (function () {
115
115
< >
116
116
< Section name = { sectionNames . basic } >
117
117
{ children . value . propertyView ( {
118
- label : trans ( ' prop.defaultValue' ) ,
119
- tooltip : trans ( ' toggleButton.valueDesc' ) ,
118
+ label : trans ( " prop.defaultValue" ) ,
119
+ tooltip : trans ( " toggleButton.valueDesc" ) ,
120
120
} ) }
121
121
</ Section >
122
122
123
- { ( useContext ( EditorContext ) . editorModeStatus === ' logic' ||
124
- useContext ( EditorContext ) . editorModeStatus === ' both' ) && (
123
+ { ( useContext ( EditorContext ) . editorModeStatus === " logic" ||
124
+ useContext ( EditorContext ) . editorModeStatus === " both" ) && (
125
125
< >
126
126
< Section name = { sectionNames . interaction } >
127
127
{ children . onEvent . getPropertyView ( ) }
@@ -131,41 +131,41 @@ const ToggleTmpComp = (function () {
131
131
</ Section >
132
132
< Section name = { sectionNames . advanced } >
133
133
{ children . showText . propertyView ( {
134
- label : trans ( ' toggleButton.showText' ) ,
134
+ label : trans ( " toggleButton.showText" ) ,
135
135
} ) }
136
136
{ children . showText . getView ( ) &&
137
137
children . trueText . propertyView ( {
138
- label : trans ( ' toggleButton.trueLabel' ) ,
138
+ label : trans ( " toggleButton.trueLabel" ) ,
139
139
} ) }
140
140
{ children . showText . getView ( ) &&
141
141
children . falseText . propertyView ( {
142
- label : trans ( ' toggleButton.falseLabel' ) ,
142
+ label : trans ( " toggleButton.falseLabel" ) ,
143
143
} ) }
144
144
{ children . trueIcon . propertyView ( {
145
- label : trans ( ' toggleButton.trueIconLabel' ) ,
145
+ label : trans ( " toggleButton.trueIconLabel" ) ,
146
146
} ) }
147
147
{ children . falseIcon . propertyView ( {
148
- label : trans ( ' toggleButton.falseIconLabel' ) ,
148
+ label : trans ( " toggleButton.falseIconLabel" ) ,
149
149
} ) }
150
150
{ children . showText . getView ( ) &&
151
151
children . iconPosition . propertyView ( {
152
- label : trans ( ' toggleButton.iconPosition' ) ,
152
+ label : trans ( " toggleButton.iconPosition" ) ,
153
153
radioButton : true ,
154
154
} ) }
155
155
{ children . alignment . propertyView ( {
156
- label : trans ( ' toggleButton.alignment' ) ,
156
+ label : trans ( " toggleButton.alignment" ) ,
157
157
radioButton : true ,
158
158
} ) }
159
159
</ Section >
160
160
</ >
161
161
) }
162
162
163
- { ( useContext ( EditorContext ) . editorModeStatus === ' layout' ||
164
- useContext ( EditorContext ) . editorModeStatus === ' both' ) && (
163
+ { ( useContext ( EditorContext ) . editorModeStatus === " layout" ||
164
+ useContext ( EditorContext ) . editorModeStatus === " both" ) && (
165
165
< >
166
166
< Section name = { sectionNames . style } >
167
167
{ children . showBorder . propertyView ( {
168
- label : trans ( ' toggleButton.showBorder' ) ,
168
+ label : trans ( " toggleButton.showBorder" ) ,
169
169
} ) }
170
170
{ children . style . getPropertyView ( ) }
171
171
</ Section >
@@ -181,7 +181,7 @@ const ToggleTmpComp = (function () {
181
181
} ) ( ) ;
182
182
183
183
export const ToggleButtonComp = withExposingConfigs ( ToggleTmpComp , [
184
- new NameConfig ( ' value' , trans ( ' dropdown.textDesc' ) ) ,
185
- new NameConfig ( ' loading' , trans ( ' button.loadingDesc' ) ) ,
184
+ new NameConfig ( " value" , trans ( " dropdown.textDesc" ) ) ,
185
+ new NameConfig ( " loading" , trans ( " button.loadingDesc" ) ) ,
186
186
...CommonNameConfig ,
187
187
] ) ;
0 commit comments