Skip to content

Commit e05e603

Browse files
hanshuaihanshuai
authored
Merge pull request lowcoder-org#147 from jerry-goodman/develop
pr_1223
2 parents 6bbab05 + 30e8fcc commit e05e603

File tree

105 files changed

+1984
-658
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+1984
-658
lines changed

‎app.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,11 @@
77
"low code",
88
"develop tool"
99
],
10-
"stack": "container"
10+
"stack": "container",
11+
"formation": {
12+
"web": {
13+
"quantity": 1,
14+
"size": "standard-2x"
15+
}
16+
}
1117
}

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
},
7474
"dependencies": {
7575
"chalk": "4",
76+
"number-precision": "^1.6.0",
7677
"react-player": "^2.11.0",
7778
"tui-image-editor": "^3.15.3"
7879
}

‎client/packages/openblocks-cli/config/vite.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ export default defineConfig({
2727
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
2828
},
2929
build: {
30-
target: "chrome69",
30+
target: "es2015",
31+
cssTarget: "chrome63",
3132
outDir: paths.appOutPath,
3233
emptyOutDir: true,
3334
lib: {

‎client/packages/openblocks-cli/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "openblocks-cli",
33
"description": "CLI tool used to start build publish openblocks components",
4-
"version": "0.0.21",
4+
"version": "0.0.22",
55
"bin": "./index.js",
66
"type": "module",
77
"exports": {

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

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const ScrollBarWrapper = styled.div`
2222
2323
.simplebar-content-wrapper {
2424
height: 100% !important;
25+
outline: none !important;
2526
}
2627
2728
.simplebar-offset {

‎client/packages/openblocks-design/src/components/colorSelect/index.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
isValidColor,
99
} from "components/colorSelect/colorUtils";
1010
import styled, { css } from "styled-components";
11-
import { useCallback } from "react";
11+
import { useCallback, useMemo, useState } from "react";
1212
import { throttle } from "lodash";
1313
import { changeValueAction } from "openblocks-core";
1414

@@ -21,25 +21,29 @@ interface ColorSelectProps {
2121

2222
export const ColorSelect = (props: ColorSelectProps) => {
2323
const { color, trigger = "click", dispatch, changeColor } = props;
24-
const rgbaColor = toRGBA(color);
24+
const [visible, setVisible] = useState(false);
2525
const throttleChange = useCallback(
2626
throttle((rgbaColor: string) => {
2727
dispatch && dispatch(changeValueAction(toHex(rgbaColor)));
2828
changeColor && changeColor(toHex(rgbaColor));
2929
}, 200),
3030
[dispatch]
3131
);
32+
const rgbaColor = useMemo(() => {
33+
return toRGBA(color);
34+
}, [visible])
3235

3336
return (
3437
<Popover
3538
trigger={trigger}
3639
destroyTooltipOnHide={true}
40+
onVisibleChange={(value) => setVisible(value)}
3741
content={
3842
<PopoverContainer>
3943
<div style={{ position: "relative" }}>
4044
<RgbaStringColorPicker color={rgbaColor} onChange={throttleChange} />
4145
<AlphaDiv color={color?.substring(0, 7)}>
42-
<BackDiv color={alphaOfRgba(rgbaColor)}></BackDiv>
46+
<BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
4347
</AlphaDiv>
4448
</div>
4549
<ConstantDiv>
@@ -59,7 +63,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
5963
}
6064
>
6165
<ColorBlock color={color?.substring(0, 7)}>
62-
<BackDiv color={alphaOfRgba(rgbaColor)}></BackDiv>
66+
<BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
6367
</ColorBlock>
6468
</Popover>
6569
);

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@ import styled from "styled-components";
33
import { ReactComponent as Dcopy } from "icons/icon-copy.svg";
44
import { message } from "antd";
55
import { trans } from "i18n/design";
6+
import { CSSProperties } from "react";
67

78
const Copy = styled(Dcopy)`
9+
flex-shrink: 0;
10+
color: #333333;
11+
812
:hover {
913
cursor: pointer;
1014
}
@@ -14,10 +18,11 @@ const Copy = styled(Dcopy)`
1418
}
1519
`;
1620

17-
export function CopyTextButton(props: { text: string }) {
21+
export function CopyTextButton(props: { text: string; style?: CSSProperties }) {
1822
return (
1923
// <Button type="dashed" shape="circle" size="small" icon={<Copy />} onClick={(e) => copyToClipboard(props.text)} />
2024
<Copy
25+
style={props.style}
2126
onClick={(e) => {
2227
e.stopPropagation();
2328
if (props.text) {

‎client/packages/openblocks-design/src/components/iconSelect/index.tsx

Lines changed: 68 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -108,26 +108,44 @@ const IconItemContainer = styled.div`
108108
}
109109
`;
110110

111+
class Icon {
112+
readonly title: string;
113+
constructor(readonly def: IconDefinition, readonly names: string[]) {
114+
this.title = def.iconName.split("-").map(_.upperFirst).join(" ");
115+
}
116+
getView() {
117+
return <FontAwesomeIcon icon={this.def} style={{ width: "1em", height: "1em" }} />;
118+
}
119+
}
120+
121+
let allIcons: Record<string, Icon> | undefined = undefined;
122+
111123
async function getAllIcons() {
124+
if (allIcons !== undefined) {
125+
return allIcons;
126+
}
112127
const [{ far }, { fas }] = await Promise.all([
113128
import("@fortawesome/free-regular-svg-icons"),
114129
import("@fortawesome/free-solid-svg-icons"),
115130
]);
116-
117-
return Object.fromEntries(
118-
Object.entries({ solid: fas, regular: far }).flatMap(([type, pack]) =>
119-
Object.entries(pack).map(([k, v]) => [type + "/" + (k.startsWith("fa") ? k.slice(2) : k), v])
120-
)
121-
);
122-
}
123-
124-
function getName(path: string) {
125-
return path.slice(path.lastIndexOf("/") + 1);
126-
}
127-
128-
async function getAllPaths() {
129-
const allIcons = await getAllIcons();
130-
return Object.values(_.groupBy(Object.keys(allIcons), getName)).flatMap((v) => v);
131+
const ret: Record<string, Icon> = {};
132+
for (const [type, pack] of Object.entries({ solid: fas, regular: far })) {
133+
const list = Object.entries(pack);
134+
for (const [k, def] of list) {
135+
ret[type + "/" + def.iconName] = new Icon(def, [def.iconName]);
136+
}
137+
for (const [k, def] of list) {
138+
const name = k.startsWith("fa") ? k.slice(2) : k;
139+
ret[type + "/" + def.iconName].names.push(name);
140+
// for compatibility of old data
141+
const key = type + "/" + name;
142+
if (ret[key] === undefined) {
143+
ret[key] = new Icon(def, []);
144+
}
145+
}
146+
}
147+
allIcons = ret;
148+
return ret;
131149
}
132150

133151
export const iconPrefix = "/icon:";
@@ -136,62 +154,43 @@ export function removeQuote(value?: string) {
136154
return value ? (value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value) : "";
137155
}
138156

139-
export function getIconPath(value?: string) {
157+
function getIconKey(value?: string) {
140158
const v = removeQuote(value);
141159
return v.startsWith(iconPrefix) ? v.slice(iconPrefix.length) : "";
142160
}
143161

144-
function getIconViewByPath(allIcons: Record<string, IconDefinition>, path: string) {
145-
if (!path) {
146-
return;
147-
}
148-
const icon = allIcons[path];
149-
if (icon !== undefined) {
150-
return <FontAwesomeIcon icon={icon} style={{ width: "1em", height: "1em" }} />;
151-
}
152-
}
153-
154-
export function useIconViewByPath(path: string) {
155-
const [view, setView] = useState<ReactNode>(null);
162+
export function useIcon(value?: string) {
163+
const key = getIconKey(value);
164+
const [icon, setIcon] = useState<Icon | undefined>(undefined);
156165
useEffect(() => {
157-
getAllIcons().then((icons) => {
158-
setView(getIconViewByPath(icons, path));
159-
});
160-
}, [path]);
161-
return view;
166+
getAllIcons().then((icons) => setIcon(icons[key]));
167+
}, [key]);
168+
return icon;
162169
}
163170

164-
async function getIconViewByValue(value?: string) {
165-
const icons = await getAllIcons();
166-
return getIconViewByPath(icons, getIconPath(value));
167-
}
168-
169-
export function useIconViewByValue(value?: string) {
170-
const [view, setView] = useState<ReactNode>(null);
171-
useEffect(() => {
172-
getIconViewByValue(value).then((v) => setView(v));
173-
}, [value]);
174-
return view;
175-
}
176-
177-
export function getDescription(path: string) {
178-
return getName(path)
179-
.replace(/[A-Z][a-z]+/g, (s) => " " + s + " ")
180-
.replace(/[a-z][A-Z]/g, (s) => s[0] + " " + s[1])
181-
.replace(/[ ]+/g, (s) => " ")
182-
.trim();
183-
}
184-
185-
function search(allPaths: string[], searchText: string, searchKeywords?: Record<string, string>) {
171+
function search(
172+
allIcons: Record<string, Icon>,
173+
searchText: string,
174+
searchKeywords?: Record<string, string>
175+
) {
186176
const tokens = searchText
187177
.toLowerCase()
188178
.split(/\s+/g)
189179
.filter((t) => t);
190-
return allPaths.filter((path) => {
191-
const name = getName(path);
192-
const desc = name.toLowerCase() + " " + (searchKeywords?.[name] ?? "");
193-
return tokens.every((t) => desc.includes(t));
194-
});
180+
return _.sortBy(
181+
Object.entries(allIcons).filter(([key, icon]) => {
182+
if (icon.names.length === 0) {
183+
return false;
184+
}
185+
let text = icon.names
186+
.flatMap((name) => [name, searchKeywords?.[name]])
187+
.filter((t) => t)
188+
.join(" ");
189+
text = (icon.title + " " + text).toLowerCase();
190+
return tokens.every((t) => text.includes(t));
191+
}),
192+
([key, icon]) => icon.title
193+
);
195194
}
196195

197196
const IconPopup = (props: {
@@ -201,40 +200,38 @@ const IconPopup = (props: {
201200
searchKeywords?: Record<string, string>;
202201
}) => {
203202
const [searchText, setSearchText] = useState("");
204-
const [allPaths, setAllPaths] = useState<string[]>([]);
205-
const [allIcons, setAllIcons] = useState<Record<string, IconDefinition>>({});
203+
const [allIcons, setAllIcons] = useState<Record<string, Icon>>({});
206204
const searchResults = useMemo(
207-
() => search(allPaths, searchText, props.searchKeywords),
208-
[searchText, allPaths]
205+
() => search(allIcons, searchText, props.searchKeywords),
206+
[searchText, allIcons]
209207
);
210208
const onChangeRef = useRef(props.onChange);
211209
onChangeRef.current = props.onChange;
212-
const onChangeIcon = useCallback((path: string) => onChangeRef.current(iconPrefix + path), []);
210+
const onChangeIcon = useCallback((key: string) => onChangeRef.current(iconPrefix + key), []);
213211
const columnNum = 8;
214212

215213
useEffect(() => {
216-
getAllPaths().then(setAllPaths);
217214
getAllIcons().then(setAllIcons);
218215
}, []);
219216

220217
const rowRenderer = useCallback(
221218
(p: ListRowProps) => (
222219
<IconRow key={p.key} style={p.style}>
223-
{searchResults.slice(p.index * columnNum, (p.index + 1) * columnNum).map((path) => (
220+
{searchResults.slice(p.index * columnNum, (p.index + 1) * columnNum).map(([key, icon]) => (
224221
<Tooltip
225-
key={path}
226-
title={getDescription(path)}
222+
key={key}
223+
title={icon.title}
227224
placement="bottom"
228225
align={{ offset: [0, -7, 0, 0] }}
229226
destroyTooltipOnHide
230227
>
231228
<IconItemContainer
232229
tabIndex={0}
233230
onClick={() => {
234-
onChangeIcon(path);
231+
onChangeIcon(key);
235232
}}
236233
>
237-
{getIconViewByPath(allIcons, path)}
234+
{icon.getView()}
238235
</IconItemContainer>
239236
</Tooltip>
240237
))}

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -192,12 +192,7 @@ function ToolTipLabel(
192192
{...restProps}
193193
>
194194
{label ? (
195-
<Label
196-
style={labelStyle}
197-
border={!!title}
198-
className="tooltipLabel"
199-
title={typeof label === "string" ? label : undefined}
200-
>
195+
<Label style={labelStyle} border={!!title} className="tooltipLabel">
201196
{label}
202197
</Label>
203198
) : (

‎client/packages/openblocks-design/src/icons/icon-copy.svg

Lines changed: 2 additions & 2 deletions
Loading

‎client/packages/openblocks-design/src/icons/icon-query-openblocks.svg

Lines changed: 5 additions & 2 deletions
Loading

‎client/packages/openblocks-design/src/icons/icon-scanner.svg

Lines changed: 12 additions & 0 deletions
Loading

‎client/packages/openblocks-design/src/icons/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,3 +247,4 @@ export { ReactComponent as LeftTree } from "./icon-left-comp-tree.svg";
247247
export { ReactComponent as LeftVideo } from "./icon-left-comp-video.svg";
248248
export { ReactComponent as LeftOpen } from "./icon-left-comp-open.svg";
249249
export { ReactComponent as LeftClose } from "./icon-left-comp-close.svg";
250+
export { ReactComponent as ScannerIcon } from "./icon-scanner.svg";

‎client/packages/openblocks-plugin-demo/icons/demo-icon.png

2.11 KB
Loading

‎client/packages/openblocks-plugin-demo/icons/demo-icon.svg

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)