Skip to content

Commit 92f83e9

Browse files
ggbond2077ggbond2077
committed
feat: file query config support file and type
feat: date range / time range replace onChange with onCalendarChange feat: jsQuery and jsAction support setTimeout/setInterval fix: not show footer when footer is null fix: text support align justify fix: application rename not reload
1 parent edaa0a1 commit 92f83e9

File tree

19 files changed

+185
-75
lines changed

19 files changed

+185
-75
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ function ModalFooter(props: {
177177
if (result && !!result.then) {
178178
return result.then(model && model.destroy).finally(() => setConfirmLoading(false));
179179
}
180-
setConfirmLoading(false)
180+
setConfirmLoading(false);
181181
model && model.destroy();
182182
}}
183183
autoFocus={autoFocusButton === "ok"}
@@ -225,7 +225,7 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
225225

226226
<div style={{ padding: "0 16px", ...props.bodyStyle }}>{props.children}</div>
227227

228-
{props.footer ? (
228+
{props.footer === null || props.footer ? (
229229
props.footer
230230
) : (
231231
<ModalFooterWrapper>

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ReactNode } from "react";
66
import styled from "styled-components";
77
import { CustomSelect } from "./customSelect";
88
import { EllipsisTextCss } from "./Label";
9+
import { TacoMarkDown } from "./markdown";
910
import { Tooltip, ToolTipLabel } from "./toolTip";
1011

1112
type ControlPlacement = "bottom" | "right" | "modal";
@@ -252,12 +253,30 @@ interface DropdownOptionLabelWithDescProps {
252253
description: string;
253254
}
254255

256+
const DropdownOptionDesc = styled.div`
257+
font-size: 12px;
258+
max-width: 600px;
259+
white-space: normal;
260+
.markdown-body {
261+
font-size: 12px;
262+
background-color: transparent;
263+
p {
264+
margin-bottom: 4px;
265+
color: ${GreyTextColor};
266+
}
267+
}
268+
`;
269+
255270
export function DropdownOptionLabelWithDesc(props: DropdownOptionLabelWithDescProps) {
256271
const { label, description } = props;
257272
return (
258273
<div style={{ padding: 0 }}>
259274
<div style={{ fontWeight: 700, marginBottom: 4 }}>{label}</div>
260-
{description && <div style={{ fontSize: 12, color: GreyTextColor }}>{description}</div>}
275+
{description && (
276+
<DropdownOptionDesc>
277+
<TacoMarkDown>{description}</TacoMarkDown>
278+
</DropdownOptionDesc>
279+
)}
261280
</div>
262281
);
263282
}

‎client/packages/openblocks-design/src/components/MarkdownTooltip.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styled from "styled-components";
2+
import { TacoMarkDown } from "./markdown";
3+
4+
interface MarkdownTooltipProps {
5+
children: string;
6+
}
7+
8+
const Wrapper = styled.div`
9+
.markdown-body {
10+
font-size: 12px;
11+
background-color: transparent;
12+
color: white;
13+
p {
14+
margin-bottom: 4px;
15+
}
16+
}
17+
`;
18+
19+
export default function MarkdownTooltip(props: MarkdownTooltipProps) {
20+
return (
21+
<Wrapper>
22+
<TacoMarkDown>{props.children}</TacoMarkDown>
23+
</Wrapper>
24+
);
25+
}

‎client/packages/openblocks-design/src/components/markdown.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown";
33
import rehypeRaw from "rehype-raw";
44
import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
55
import remarkGfm from "remark-gfm";
6+
import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
67

78
export const markdownCompCss = css`
89
.markdown-body {
@@ -30,10 +31,27 @@ export const markdownCompCss = css`
3031
}
3132
`;
3233

33-
export const TacoMarkDown = (props: { children: string }) => {
34+
interface TacoMarkDownProps extends ReactMarkdownOptions {
35+
children: string;
36+
}
37+
38+
const components = {
39+
a: (props: any) => {
40+
const { node, children, ...otherProps } = props;
41+
return (
42+
<a {...otherProps} target="_blank">
43+
{children}
44+
</a>
45+
);
46+
},
47+
};
48+
49+
export const TacoMarkDown = (props: TacoMarkDownProps) => {
50+
const { children, ...otherProps } = props;
3451
return (
3552
<ReactMarkdown
3653
remarkPlugins={[remarkGfm]}
54+
components={components}
3755
rehypePlugins={[
3856
[rehypeRaw],
3957
[
@@ -51,8 +69,9 @@ export const TacoMarkDown = (props: { children: string }) => {
5169
],
5270
]}
5371
className="markdown-body"
72+
{...otherProps}
5473
>
55-
{props.children}
74+
{children}
5675
</ReactMarkdown>
5776
);
5877
};

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

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,29 @@ const Error = styled.div`
2626
`;
2727

2828
const Wrapper = styled.div`
29-
video {
30-
height: 250px;
29+
video,
30+
.ant-skeleton {
31+
height: 400px;
32+
max-height: 70vh;
3133
position: relative;
3234
object-fit: cover;
3335
background-color: #000;
3436
}
37+
.ant-skeleton {
38+
h3,
39+
li {
40+
background-color: transparent;
41+
}
42+
}
3543
`;
3644

3745
const CustomModalStyled = styled(CustomModal)`
46+
top: 10vh;
3847
.react-draggable {
3948
max-width: 100%;
49+
width: 500px;
4050
}
41-
`
51+
`;
4252

4353
const BarcodeScannerComponent = React.lazy(() => import("react-qr-barcode-scanner"));
4454

@@ -61,21 +71,23 @@ const ScannerTmpComp = (function () {
6171
});
6272
const [modeList, setModeList] = useState<ItemType[]>([]);
6373
const [dropdownShow, setDropdownShow] = useState(false);
64-
const [success, setSuccess] = useState(false)
74+
const [success, setSuccess] = useState(false);
6575

66-
useEffect(() =>{
76+
useEffect(() => {
6777
if (!showModal && success) {
6878
props.onEvent("success");
6979
}
70-
}, [success, showModal])
80+
}, [success, showModal]);
7181

7282
const continuousValue = useRef<string[]>([]);
7383

7484
const handleUpdate = (err: any, result: any) => {
7585
if (!!result) {
7686
if (props.continuous) {
7787
continuousValue.current = [...continuousValue.current, result.text];
78-
const val = props.uniqueData ? [...new Set(continuousValue.current)] : continuousValue.current;
88+
const val = props.uniqueData
89+
? [...new Set(continuousValue.current)]
90+
: continuousValue.current;
7991
props.data.onChange(val);
8092
props.onEvent("success");
8193
} else {
@@ -134,51 +146,52 @@ const ScannerTmpComp = (function () {
134146
>
135147
{!!errMessage ? (
136148
<Error>{errMessage}</Error>
137-
) : (showModal && (
138-
<Wrapper>
139-
<Suspense fallback={<Skeleton />}>
140-
<BarcodeScannerComponent
141-
key={JSON.stringify(videoConstraints)}
142-
height={250}
143-
delay={1000}
144-
onUpdate={handleUpdate}
145-
onError={handleErr}
146-
videoConstraints={videoConstraints}
147-
/>
148-
</Suspense>
149-
<div
150-
style={{ height: "42px" }}
151-
onClick={() => {
152-
setDropdownShow(false);
153-
}}
154-
>
155-
<Dropdown
156-
placement="bottomRight"
157-
trigger={["click"]}
158-
visible={dropdownShow}
159-
onVisibleChange={(value) => setDropdownShow(value)}
160-
overlay={
161-
<Menu
162-
items={modeList}
163-
onClick={(value) =>
164-
setVideoConstraints({ ...videoConstraints, deviceId: value.key })
165-
}
166-
/>
167-
}
149+
) : (
150+
showModal && (
151+
<Wrapper>
152+
<Suspense fallback={<Skeleton />}>
153+
<BarcodeScannerComponent
154+
key={JSON.stringify(videoConstraints)}
155+
delay={1000}
156+
onUpdate={handleUpdate}
157+
onError={handleErr}
158+
videoConstraints={videoConstraints}
159+
/>
160+
</Suspense>
161+
<div
162+
style={{ height: "42px" }}
163+
onClick={() => {
164+
setDropdownShow(false);
165+
}}
168166
>
169-
<Button
170-
style={{ float: "right", marginTop: "10px" }}
171-
onClick={(e) => {
172-
e.stopPropagation();
173-
getModeList();
174-
}}
167+
<Dropdown
168+
placement="bottomRight"
169+
trigger={["click"]}
170+
visible={dropdownShow}
171+
onVisibleChange={(value) => setDropdownShow(value)}
172+
overlay={
173+
<Menu
174+
items={modeList}
175+
onClick={(value) =>
176+
setVideoConstraints({ ...videoConstraints, deviceId: value.key })
177+
}
178+
/>
179+
}
175180
>
176-
{trans("scanner.changeCamera")}
177-
</Button>
178-
</Dropdown>
179-
</div>
180-
</Wrapper>
181-
))}
181+
<Button
182+
style={{ float: "right", marginTop: "10px" }}
183+
onClick={(e) => {
184+
e.stopPropagation();
185+
getModeList();
186+
}}
187+
>
188+
{trans("scanner.changeCamera")}
189+
</Button>
190+
</Dropdown>
191+
</div>
192+
</Wrapper>
193+
)
194+
)}
182195
</CustomModalStyled>
183196
</ButtonCompWrapper>
184197
);

‎client/packages/openblocks/src/comps/comps/dateComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -385,9 +385,9 @@ export const dateRangeControl = (function () {
385385
})()}
386386
disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
387387
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
388-
onChange={(time) => {
389-
const start = time && time[0] ? moment(time[0]) : null;
390-
const end = time && time[1] ? moment(time[1]) : null;
388+
onCalendarChange={(time) => {
389+
const start = time?.[0];
390+
const end = time?.[1];
391391
props.start.onChange(
392392
start && start.isValid()
393393
? start.format(props.showTime ? DATE_TIME_FORMAT : DATE_FORMAT)

‎client/packages/openblocks/src/comps/comps/tableComp/tableUtils.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -315,10 +315,12 @@ function getUniqueStatus(column: RawColumnType) {
315315
column.editable && compType === "badgeStatus"
316316
? _.uniqBy(
317317
Object.values(column.render).map((comp) => {
318-
const value = comp.getView().value.split(" ");
318+
const value = comp.getView().value;
319+
const status = value.slice(0, value.indexOf(' '));
320+
const text = value.slice(value.indexOf(' ') + 1);
319321
return {
320-
status: value[0],
321-
text: value[1],
322+
status,
323+
text,
322324
};
323325
}),
324326
"text"

‎client/packages/openblocks/src/comps/comps/textComp.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import styled, { css } from "styled-components";
66
import { AlignCenter } from "openblocks-design";
77
import { AlignLeft } from "openblocks-design";
88
import { AlignRight } from "openblocks-design";
9-
import { HorizontalAlignmentControl } from "../controls/dropdownControl";
109
import { UICompBuilder } from "../generators";
1110
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
1211
import { markdownCompCss, TacoMarkDown } from "openblocks-design";
1312
import { styleControl } from "comps/controls/styleControl";
1413
import { TextStyle, TextStyleType } from "comps/controls/styleControlConstants";
1514
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1615
import { trans } from "i18n";
16+
import { alignWithJustifyControl } from "comps/controls/alignControl";
1717

1818
const getStyle = (style: TextStyleType) => {
1919
return css`
@@ -104,7 +104,7 @@ let TextTmpComp = (function () {
104104
),
105105
autoHeight: AutoHeightControl,
106106
type: dropdownControl(typeOptions, "markdown"),
107-
horizontalAlignment: HorizontalAlignmentControl,
107+
horizontalAlignment: alignWithJustifyControl(),
108108
verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
109109
style: styleControl(TextStyle),
110110
};

‎client/packages/openblocks/src/comps/comps/timeComp.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -220,9 +220,9 @@ export const timeRangeControl = (function () {
220220
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
221221
{...timePickerComps(props)}
222222
order={true}
223-
onChange={(time) => {
224-
const start = time && time[0] ? moment(time[0]) : null;
225-
const end = time && time[1] ? moment(time[1]) : null;
223+
onCalendarChange={(time) => {
224+
const start = time?.[0];
225+
const end = time?.[1];
226226
props.start.onChange(start && start.isValid() ? start.format(TIME_FORMAT) : "");
227227
props.end.onChange(end && end.isValid() ? end.format(TIME_FORMAT) : "");
228228
props.onEvent("change");

‎client/packages/openblocks/src/comps/controls/actionSelector/actionSelectorControl.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,6 @@ function actionSelectorControl(needContext: boolean) {
265265
action,
266266
realNeedContext ? action.value.func() : this.children.comp.getView()()
267267
);
268-
console.info(action, ACTION_TRIGGERED_TYPE_STRING);
269268
return this;
270269
}
271270
if (

‎client/packages/openblocks/src/comps/controls/codeControl.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import {
4343
toString,
4444
toStringArray,
4545
toStringNumberArray,
46+
toStringOrJSONObject,
4647
toStringOrNumber,
4748
} from "util/convertUtils";
4849
import { JSONObject, JSONValue } from "util/jsonTypes";
@@ -366,6 +367,10 @@ export const NumberOrJSONObjectArrayControl = jsonBaseControl<number | Array<JSO
366367
"number | Array<JSON>",
367368
toNumberOrJSONObjectArray
368369
);
370+
export const StringOrJSONObjectControl = jsonBaseControl<string | JSONObject>(
371+
"string | JSON",
372+
toStringOrJSONObject
373+
);
369374
export const ArrayControl = jsonBaseControl<Array<JSONValue>>("Array", toJSONArray);
370375
export const JSONObjectControl = jsonBaseControl<JSONObject>("JSON", toJSONObject);
371376
export const JSONValueControl = jsonBaseControl<JSONValue>(undefined, toJSONValue);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const Label = styled.span<{ border: boolean }>`
8484
text-overflow: ellipsis;
8585
overflow: hidden;
8686
display: inline-block;
87+
line-height: normal;
8788
`;
8889

8990
const ChildrenWrapper = styled.div`

0 commit comments

Comments
 (0)