Movatterモバイル変換

[0]ホーム
URL:

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

Commitf3b1feb

Browse files
Merge pull request#1692 from kamalqureshi/scanner_camera_component
Switching cameras on Scanner Component
2 parents1fc4e6c +7fbdd10 commitf3b1feb

File tree

1 file changed

+144
-75
lines changed

1 file changed

+144
-75
lines changed

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

Lines changed: 144 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import{defaultasButton}from"antd/es/button";
2-
import{defaultasDropdown}from"antd/es/dropdown";
3-
import{defaultasMenu}from"antd/es/menu";
42
import{defaultasSkeleton}from"antd/es/skeleton";
53
import{
64
Button100,
@@ -14,16 +12,29 @@ import { DropdownStyle } from "comps/controls/styleControlConstants";
1412
import{withDefault}from"comps/generators";
1513
import{UICompBuilder}from"comps/generators/uiCompBuilder";
1614
import{CustomModal,Section,sectionNames}from"lowcoder-design";
17-
importstyledfrom"styled-components";
18-
import{CommonNameConfig,NameConfig,withExposingConfigs}from"../../generators/withExposing";
19-
import{hiddenPropertyView,disabledPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
15+
importstyled,{keyframes}from"styled-components";
16+
import{
17+
CommonNameConfig,
18+
NameConfig,
19+
withExposingConfigs,
20+
}from"../../generators/withExposing";
21+
import{
22+
hiddenPropertyView,
23+
disabledPropertyView,
24+
showDataLoadingIndicatorsPropertyView,
25+
}from"comps/utils/propertyUtils";
2026
import{trans}from"i18n";
21-
importReact,{Suspense,useEffect,useRef,useState,useContext}from"react";
27+
importReact,{
28+
Suspense,
29+
useEffect,
30+
useRef,
31+
useState,
32+
useContext,
33+
}from"react";
2234
import{arrayStringExposingStateControl}from"comps/controls/codeStateControl";
2335
import{BoolControl}from"comps/controls/boolControl";
24-
importtype{ItemType}from"antd/es/menu/interface";
2536
import{RefControl}from"comps/controls/refControl";
26-
import{EditorContext}from"comps/editorState";
37+
import{EditorContext}from"comps/editorState";
2738

2839
constError=styled.div`
2940
color: #f5222d;
@@ -51,6 +62,50 @@ const Wrapper = styled.div`
5162
}
5263
`;
5364

65+
constdropdownShow=keyframes`
66+
from {
67+
opacity: 0;
68+
transform: translateY(-8px) scaleY(0.98);
69+
}
70+
to {
71+
opacity: 1;
72+
transform: translateY(0) scaleY(1);
73+
}
74+
`;
75+
76+
constDropdownContainer=styled.div`
77+
position: absolute;
78+
top: 44px;
79+
right: 0;
80+
min-width: 150px;
81+
background: #fff;
82+
border: 1px solid #e0e0e0;
83+
border-radius: 8px;
84+
box-shadow:
85+
0 8px 24px rgba(0, 0, 0, 0.12),
86+
0 1.5px 3px rgba(0, 0, 0, 0.08);
87+
z-index: 1000;
88+
padding: 6px 0;
89+
animation:${dropdownShow} 0.22s cubic-bezier(0.22, 1, 0.36, 1);
90+
transition: box-shadow 0.2s;
91+
`;
92+
93+
constDropdownItem=styled.div`
94+
padding: 10px 20px;
95+
cursor: pointer;
96+
font-size: 14px;
97+
color: #222;
98+
background: transparent;
99+
transition: background 0.15s;
100+
&:hover {
101+
background: #f0f5ff;
102+
color: #1677ff;
103+
}
104+
&:active {
105+
background: #e6f7ff;
106+
}
107+
`;
108+
54109
constCustomModalStyled=styled(CustomModal)`
55110
top: 10vh;
56111
.react-draggable {
@@ -59,7 +114,9 @@ const CustomModalStyled = styled(CustomModal)`
59114
}
60115
`;
61116

62-
constBarcodeScannerComponent=React.lazy(()=>import("react-qr-barcode-scanner"));
117+
constBarcodeScannerComponent=React.lazy(
118+
()=>import("react-qr-barcode-scanner")
119+
);
63120

64121
constScannerTmpComp=(function(){
65122
constchildrenMap={
@@ -70,17 +127,20 @@ const ScannerTmpComp = (function () {
70127
maskClosable:withDefault(BoolControl,true),
71128
onEvent:ScannerEventHandlerControl,
72129
disabled:BoolCodeControl,
73-
style:styleControl(DropdownStyle,'style'),
130+
style:styleControl(DropdownStyle,"style"),
74131
viewRef:RefControl<HTMLElement>,
75132
};
76133
returnnewUICompBuilder(childrenMap,(props)=>{
77134
const[showModal,setShowModal]=useState(false);
78135
const[errMessage,setErrMessage]=useState("");
79-
const[videoConstraints,setVideoConstraints]=useState<MediaTrackConstraints>({
80-
facingMode:"environment",
81-
});
82-
const[modeList,setModeList]=useState<ItemType[]>([]);
83-
const[dropdownShow,setDropdownShow]=useState(false);
136+
const[videoConstraints,setVideoConstraints]=
137+
useState<MediaTrackConstraints>({
138+
facingMode:"environment",
139+
});
140+
const[modeList,setModeList]=useState<{label:string;key:string}[]>(
141+
[]
142+
);
143+
const[handleDropdown,setHandleDropdown]=useState(false);
84144
const[success,setSuccess]=useState(false);
85145

86146
useEffect(()=>{
@@ -92,7 +152,7 @@ const ScannerTmpComp = (function () {
92152
constcontinuousValue=useRef<string[]>([]);
93153

94154
consthandleUpdate=(err:any,result:any)=>{
95-
if(!!result){
155+
if(result){
96156
if(props.continuous){
97157
continuousValue.current=[...continuousValue.current,result.text];
98158
constval=props.uniqueData
@@ -109,15 +169,16 @@ const ScannerTmpComp = (function () {
109169
setSuccess(false);
110170
}
111171
};
172+
112173
consthandleErr=(err:any)=>{
113174
if(typeoferr==="string"){
114175
setErrMessage(err);
176+
}elseif(
177+
err.message==="getUserMedia is not implemented in this browser"
178+
){
179+
setErrMessage(trans("scanner.errTip"));
115180
}else{
116-
if(err.message==="getUserMedia is not implemented in this browser"){
117-
setErrMessage(trans("scanner.errTip"));
118-
}else{
119-
setErrMessage(err.message);
120-
}
181+
setErrMessage(err.message);
121182
}
122183
setSuccess(false);
123184
};
@@ -157,6 +218,8 @@ const ScannerTmpComp = (function () {
157218
onCancel={()=>{
158219
setShowModal(false);
159220
props.onEvent("close");
221+
setVideoConstraints({facingMode:"environment"});
222+
setHandleDropdown(false);
160223
}}
161224
>
162225
{!!errMessage ?(
@@ -173,36 +236,33 @@ const ScannerTmpComp = (function () {
173236
videoConstraints={videoConstraints}
174237
/>
175238
</Suspense>
176-
<div
177-
style={{height:"42px"}}
178-
onClick={()=>{
179-
setDropdownShow(false);
180-
}}
181-
>
182-
<Dropdown
183-
placement="bottomRight"
184-
trigger={["click"]}
185-
open={dropdownShow}
186-
onOpenChange={(value)=>setDropdownShow(value)}
187-
dropdownRender={()=>(
188-
<Menu
189-
items={modeList}
190-
onClick={(value)=>
191-
setVideoConstraints({ ...videoConstraints,deviceId:value.key})
192-
}
193-
/>
194-
)}
239+
240+
<divstyle={{position:"relative",marginTop:10}}>
241+
<Button
242+
style={{float:"right"}}
243+
onClick={()=>{
244+
getModeList();
245+
setHandleDropdown(!handleDropdown);
246+
}}
195247
>
196-
<Button
197-
style={{float:"right",marginTop:"10px"}}
198-
onClick={(e)=>{
199-
e.stopPropagation();
200-
getModeList();
201-
}}
202-
>
203-
{trans("scanner.changeCamera")}
204-
</Button>
205-
</Dropdown>
248+
{trans("scanner.changeCamera")}
249+
</Button>
250+
251+
{handleDropdown&&(
252+
<DropdownContainer>
253+
{modeList.map(({ key, label})=>(
254+
<DropdownItem
255+
key={key}
256+
onClick={()=>{
257+
setVideoConstraints({deviceId:{exact:key}});
258+
setHandleDropdown(false);
259+
}}
260+
>
261+
{label}
262+
</DropdownItem>
263+
))}
264+
</DropdownContainer>
265+
)}
206266
</div>
207267
</Wrapper>
208268
)
@@ -211,35 +271,44 @@ const ScannerTmpComp = (function () {
211271
</ButtonCompWrapper>
212272
);
213273
})
214-
.setPropertyViewFn((children)=>{
215-
return(
216-
<>
217-
<Sectionname={sectionNames.basic}>
218-
{children.text.propertyView({label:trans("text")})}
219-
</Section>
274+
.setPropertyViewFn((children)=>(
275+
<>
276+
<Sectionname={sectionNames.basic}>
277+
{children.text.propertyView({label:trans("text")})}
278+
</Section>
220279

221-
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
222-
<><Sectionname={sectionNames.interaction}>
223-
{children.onEvent.getPropertyView()}
224-
{disabledPropertyView(children)}
225-
{hiddenPropertyView(children)}
226-
{showDataLoadingIndicatorsPropertyView(children)}
227-
</Section>
228-
<Sectionname={sectionNames.advanced}>
229-
{children.continuous.propertyView({label:trans("scanner.continuous")})}
280+
{(useContext(EditorContext).editorModeStatus==="logic"||
281+
useContext(EditorContext).editorModeStatus==="both")&&(
282+
<>
283+
<Sectionname={sectionNames.interaction}>
284+
{children.onEvent.getPropertyView()}
285+
{disabledPropertyView(children)}
286+
{hiddenPropertyView(children)}
287+
{showDataLoadingIndicatorsPropertyView(children)}
288+
</Section>
289+
<Sectionname={sectionNames.advanced}>
290+
{children.continuous.propertyView({
291+
label:trans("scanner.continuous"),
292+
})}
230293
{children.continuous.getView()&&
231-
children.uniqueData.propertyView({label:trans("scanner.uniqueData")})}
232-
{children.maskClosable.propertyView({label:trans("scanner.maskClosable")})}
294+
children.uniqueData.propertyView({
295+
label:trans("scanner.uniqueData"),
296+
})}
297+
{children.maskClosable.propertyView({
298+
label:trans("scanner.maskClosable"),
299+
})}
233300
</Section>
234-
</>
235-
)}
301+
</>
302+
)}
236303

237-
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
238-
<><Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section></>
239-
)}
240-
</>
241-
);
242-
})
304+
{(useContext(EditorContext).editorModeStatus==="layout"||
305+
useContext(EditorContext).editorModeStatus==="both")&&(
306+
<Sectionname={sectionNames.style}>
307+
{children.style.getPropertyView()}
308+
</Section>
309+
)}
310+
</>
311+
))
243312
.setExposeMethodConfigs(buttonRefMethods)
244313
.build();
245314
})();

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp