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

Commit0e2a9fd

Browse files
author
FalkWolsky
committed
Introducing Layout / Logic Mode step 2
1 parentb814ce2 commit0e2a9fd

File tree

20 files changed

+600
-576
lines changed

20 files changed

+600
-576
lines changed

‎client/packages/lowcoder-comps/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name":"lowcoder-comps",
3-
"version":"0.0.19",
3+
"version":"0.0.20",
44
"type":"module",
55
"license":"MIT",
66
"dependencies": {

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

Lines changed: 100 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ import ErrorBoundary from "./errorBoundary";
2424
import{Theme}from"@rjsf/antd";
2525
import{hiddenPropertyView}from"comps/utils/propertyUtils";
2626

27+
import{useContext}from"react";
28+
import{EditorContext}from"comps/editorState";
29+
2730
Theme.widgets.DateWidget=DateWidget(false);
2831
Theme.widgets.DateTimeWidget=DateWidget(true);
2932
constForm=withTheme(Theme);
@@ -106,7 +109,7 @@ function convertData(schema?: JSONSchema7, data?: any) {
106109
}
107110
}
108111

109-
//FIXME: translate more other errors
112+
//TODO: translate more other errors
110113
// refer to ajv-i18n, https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js
111114
// https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#Validation-keywords
112115
// JSON schema refer to https://json-schema.org/understanding-json-schema/reference/
@@ -225,52 +228,105 @@ let FormBasicComp = (function () {
225228
.setPropertyViewFn((children)=>{
226229
return(
227230
<>
228-
<Sectionname={sectionNames.basic}>
229-
{children.resetAfterSubmit.propertyView({
230-
label:trans("jsonSchemaForm.resetAfterSubmit"),
231-
})}
232-
{children.schema.propertyView({
233-
label:trans("jsonSchemaForm.jsonSchema"),
234-
tooltip:(
235-
<>
236-
{trans("jsonSchemaForm.schemaTooltip")+" "}
237-
<a
238-
href={"http://json-schema.org/learn/getting-started-step-by-step"}
239-
target={"_blank"}
240-
rel="noreferrer"
241-
>
242-
JSON schema
243-
</a>
244-
</>
245-
),
246-
})}
247-
{children.uiSchema.propertyView({
248-
label:trans("jsonSchemaForm.uiSchema"),
249-
tooltip:(
250-
<>
251-
{trans("jsonSchemaForm.schemaTooltip")+" "}
252-
<a
253-
href={
254-
"https://jsonforms.io/docs/uischema"
255-
}
256-
target={"_blank"}
257-
rel="noreferrer"
258-
>
259-
UI schema
260-
</a>
261-
</>
262-
),
263-
})}
264-
{children.data.propertyView({
265-
label:trans("jsonSchemaForm.defaultData"),
266-
})}
267-
</Section>
231+
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
232+
<Sectionname={sectionNames.basic}>
233+
234+
{children.schema.propertyView({
235+
label:(
236+
<>
237+
{trans("jsonSchemaForm.jsonSchema")+" ("}
238+
<a
239+
href={"http://json-schema.org/learn/getting-started-step-by-step"}
240+
target={"_blank"}
241+
rel="noreferrer"
242+
>
243+
Docs 1
244+
</a>
245+
{", "}
246+
<a
247+
href={"https://jsonforms.io/examples/basic"}
248+
target={"_blank"}
249+
rel="noreferrer"
250+
>
251+
Docs 2
252+
</a>
253+
{")"}
254+
</>
255+
),
256+
tooltip:(
257+
<>
258+
{trans("jsonSchemaForm.schemaTooltip")+" "}
259+
<a
260+
href={"http://json-schema.org/learn/getting-started-step-by-step"}
261+
target={"_blank"}
262+
rel="noreferrer"
263+
>
264+
JSON schema
265+
</a>
266+
</>
267+
),
268+
})}
269+
{children.uiSchema.propertyView({
270+
label:(
271+
<>
272+
{trans("jsonSchemaForm.uiSchema")+" ("}
273+
<a
274+
href={"https://jsonforms.io/docs/uischema"}
275+
target={"_blank"}
276+
rel="noreferrer"
277+
>
278+
Docs 1
279+
</a>
280+
{", "}
281+
<a
282+
href={"https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema"}
283+
target={"_blank"}
284+
rel="noreferrer"
285+
>
286+
Docs 2
287+
</a>
288+
{")"}
289+
</>
290+
),
291+
tooltip:(
292+
<>
293+
{trans("jsonSchemaForm.schemaTooltip")+" "}
294+
<a
295+
href={
296+
"https://jsonforms.io/docs/uischema"
297+
}
298+
target={"_blank"}
299+
rel="noreferrer"
300+
>
301+
UI schema
302+
</a>
303+
</>
304+
),
305+
})}
306+
{children.data.propertyView({
307+
label:trans("jsonSchemaForm.defaultData"),
308+
})}
309+
</Section>
310+
)}
268311

269-
<Sectionname={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
312+
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
313+
<Sectionname={sectionNames.interaction}>
314+
{children.onEvent.getPropertyView()}
315+
{hiddenPropertyView(children)}
316+
{children.resetAfterSubmit.propertyView({
317+
label:trans("jsonSchemaForm.resetAfterSubmit"),
318+
})}
319+
</Section>
320+
)}
270321

271-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
322+
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
323+
<>
324+
<Sectionname={sectionNames.style}>
325+
{children.style.getPropertyView()}
326+
</Section>
327+
</>
328+
)}
272329

273-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
274330
</>
275331
);
276332
})

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { trans, transToNode } from "i18n";
22
import{Section,sectionNames}from"lowcoder-design";
33
import{ListViewImplComp}from"./listViewComp";
44
import{ListCompType}from"./listViewUtils";
5+
import{useContext}from"react";
6+
import{EditorContext}from"comps/editorState";
57

68
typeProps={
79
comp:InstanceType<typeofListViewImplComp>;
@@ -43,12 +45,22 @@ export function listPropertyView(compType: ListCompType) {
4345
}),
4446
})}
4547
</Section>
46-
<Sectionname={trans("prop.pagination")}>
47-
{comp.children.pagination.getPropertyView()}
48-
</Section>
49-
<Sectionname={sectionNames.layout}>{children.autoHeight.getPropertyView()}</Section>
50-
{/* <Section name={sectionNames.style}>{children.showBorder.propertyView({ label: "" })}</Section> */}
51-
<Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section>
48+
49+
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
50+
<Sectionname={trans("prop.pagination")}>
51+
{comp.children.pagination.getPropertyView()}
52+
</Section>
53+
)}
54+
55+
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
56+
<><Sectionname={sectionNames.layout}>
57+
{children.autoHeight.getPropertyView()}
58+
</Section>
59+
<Sectionname={sectionNames.style}>
60+
{children.style.getPropertyView()}
61+
</Section></>
62+
)}
63+
5264
</>
5365
);
5466
};

‎client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { withDefault } from "../../generators/simpleGenerators";
1313
import{trans}from"i18n";
1414
import{hiddenPropertyView}from"comps/utils/propertyUtils";
1515
import{mediaCommonChildren,mediaMethods}from"./mediaUtils";
16+
import{useContext}from"react";
17+
import{EditorContext}from"comps/editorState";
1618

1719
constContainer=styled.div`
1820
height: 100%;
@@ -74,17 +76,21 @@ let AudioBasicComp = (function () {
7476
{children.src.propertyView({
7577
label:trans("audio.src"),
7678
})}
77-
{children.autoPlay.propertyView({
78-
label:trans("audio.autoPlay"),
79-
})}
80-
{children.loop.propertyView({
81-
label:trans("audio.loop"),
82-
})}
8379
</Section>
8480

85-
<Sectionname={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
81+
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
82+
<Sectionname={sectionNames.interaction}>
83+
{children.onEvent.getPropertyView()}
84+
{hiddenPropertyView(children)}
85+
{children.autoPlay.propertyView({
86+
label:trans("audio.autoPlay"),
87+
})}
88+
{children.loop.propertyView({
89+
label:trans("audio.loop"),
90+
})}
91+
</Section>
92+
)}
8693

87-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
8894
</>
8995
);
9096
})

‎client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx‎

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
66
import{RecordConstructorToView}from"lowcoder-core";
77
import{useRef,useState}from"react";
88
import{styleControl}from"comps/controls/styleControl";
9-
import{ImageStyle}from"comps/controls/styleControlConstants";
9+
import{ImageStyle,ImageStyleType}from"comps/controls/styleControlConstants";
1010
import{BoolControl}from"comps/controls/boolControl";
1111
import{withDefault}from"../../generators/simpleGenerators";
1212
import{Container,playIcon}from"lowcoder-design";
@@ -17,19 +17,36 @@ import { Video } from "lowcoder-design";
1717
importReactPlayerfrom"react-player";
1818
import{mediaCommonChildren,mediaMethods}from"./mediaUtils";
1919

20+
import{useContext}from"react";
21+
import{EditorContext}from"comps/editorState";
22+
importstyled,{css}from"styled-components";
23+
2024
constEventOptions=[
2125
{label:trans("video.play"),value:"play",description:trans("video.playDesc")},
2226
{label:trans("video.pause"),value:"pause",description:trans("video.pauseDesc")},
2327
{label:trans("video.load"),value:"load",description:trans("video.loadDesc")},
2428
{label:trans("video.ended"),value:"ended",description:trans("video.endedDesc")},
2529
]asconst;
2630

31+
/* const StyledContainer = styled.div.attrs(props => ({
32+
style: props.style ? getStyle(props.style) : {}
33+
}))``;
34+
35+
const getStyle = (style: ImageStyleType) => {
36+
return {
37+
border: `1px solid ${style.border}`,
38+
radius: style.radius,
39+
margin: style.margin,
40+
padding: style.padding,
41+
};
42+
}; */
43+
2744
constContainerVideo=(props:RecordConstructorToView<typeofchildrenMap>)=>{
2845
constvideoRef=useRef<ReactPlayer|null>(null);
2946
let[posterClicked,setPosterClicked]=useState(false);
3047
return(
3148
<Containerref={props.containerRef}>
32-
<Video
49+
<Video
3350
config={{
3451
file:{
3552
forceVideo:true,
@@ -84,7 +101,7 @@ const childrenMap = {
84101
duration:numberExposingStateControl("duration"),
85102
...mediaCommonChildren,
86103
};
87-
104+
88105
letVideoBasicComp=(function(){
89106
returnnewUICompBuilder(childrenMap,(props)=>{
90107
return<ContainerVideo{...props}/>;
@@ -96,34 +113,41 @@ let VideoBasicComp = (function () {
96113
{children.src.propertyView({
97114
label:trans("video.src"),
98115
})}
99-
{children.poster.propertyView({
100-
label:trans("video.poster"),
101-
tooltip:trans("video.posterTooltip"),
102-
})}
103-
{children.autoPlay.propertyView({
104-
label:trans("video.autoPlay"),
105-
tooltip:trans("video.autoPlayTooltip"),
106-
})}
107-
{children.loop.propertyView({
108-
label:trans("video.loop"),
109-
})}
110-
{children.controls.propertyView({
111-
label:trans("video.controls"),
112-
tooltip:trans("video.controlsTooltip"),
113-
})}
114-
{children.volume.propertyView({
115-
label:trans("video.volume"),
116-
tooltip:trans("video.volumeTooltip"),
117-
})}
118-
{children.playbackRate.propertyView({
119-
label:trans("video.playbackRate"),
120-
tooltip:trans("video.playbackRateTooltip"),
121-
})}
122116
</Section>
123117

124-
<Sectionname={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
118+
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
119+
120+
<><Sectionname={sectionNames.interaction}>
121+
{children.onEvent.getPropertyView()}
122+
{hiddenPropertyView(children)}
123+
</Section>
124+
<Sectionname={sectionNames.advanced}>
125+
{children.poster.propertyView({
126+
label:trans("video.poster"),
127+
tooltip:trans("video.posterTooltip"),
128+
})}
129+
{children.volume.propertyView({
130+
label:trans("video.volume"),
131+
tooltip:trans("video.volumeTooltip"),
132+
})}
133+
{children.playbackRate.propertyView({
134+
label:trans("video.playbackRate"),
135+
tooltip:trans("video.playbackRateTooltip"),
136+
})}
137+
{children.autoPlay.propertyView({
138+
label:trans("video.autoPlay"),
139+
tooltip:trans("video.autoPlayTooltip"),
140+
})}
141+
{children.loop.propertyView({
142+
label:trans("video.loop"),
143+
})}
144+
{children.controls.propertyView({
145+
label:trans("video.controls"),
146+
tooltip:trans("video.controlsTooltip"),
147+
})}
125148

126-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
149+
</Section></>
150+
)}
127151
</>
128152
);
129153
})

0 commit comments

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