@flozy/editor 1.5.8 → 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +103 -17
- package/dist/Editor/Editor.css +194 -24
- package/dist/Editor/Elements/Accordion/Accordion.js +0 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +0 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +134 -131
- package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js +4 -2
- package/dist/Editor/Elements/Button/EditorButton.js +4 -4
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +29 -58
- package/dist/Editor/Elements/Embed/Embed.js +18 -16
- package/dist/Editor/Elements/Embed/Image.js +11 -2
- package/dist/Editor/Elements/Embed/Video.js +10 -2
- package/dist/Editor/Elements/Form/Form.js +0 -1
- package/dist/Editor/Elements/Form/FormButton.js +2 -2
- package/dist/Editor/Elements/Form/FormElements/FormText.js +3 -2
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Grid/Grid.js +128 -43
- package/dist/Editor/Elements/Grid/GridItem.js +2 -2
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +0 -1
- package/dist/Editor/Elements/PageSettings/PageSettings.js +4 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +0 -2
- package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js +1 -1
- package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +0 -2
- package/dist/Editor/Toolbar/FormatTools/FontFamilyDropdown.js +63 -0
- package/dist/Editor/Toolbar/FormatTools/FontSize.js +112 -0
- package/dist/Editor/Toolbar/FormatTools/index.js +3 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -3
- package/dist/Editor/Toolbar/PopupTool/index.js +25 -49
- package/dist/Editor/Toolbar/Toolbar.js +21 -5
- package/dist/Editor/Toolbar/styles.css +135 -17
- package/dist/Editor/Toolbar/toolbarGroups.js +21 -10
- package/dist/Editor/common/Icon.js +7 -1
- package/dist/Editor/common/ImageList.js +69 -0
- package/dist/Editor/common/ImageUploader.js +83 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +3 -3
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +3 -3
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -5
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +7 -7
- package/dist/Editor/common/StyleBuilder/chipTextStyle.js +3 -3
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +18 -5
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +8 -0
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +3 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +2 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +41 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +95 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +14 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +0 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -2
- package/dist/Editor/common/StyleBuilder/formButtonStyle.js +3 -3
- package/dist/Editor/common/StyleBuilder/formStyle.js +3 -3
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +1 -1
- package/dist/Editor/common/Uploader.js +25 -54
- package/dist/Editor/common/iconslist.js +26 -1
- package/dist/Editor/helper/index.js +0 -1
- package/dist/Editor/hooks/useDrag.js +2 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +1 -0
- package/dist/Editor/utils/button.js +2 -1
- package/dist/Editor/utils/embed.js +6 -3
- package/package.json +3 -2
@@ -10,7 +10,7 @@ const buttonStyle = [{
|
|
10
10
|
}, {
|
11
11
|
label: "Font Size",
|
12
12
|
key: "textSize",
|
13
|
-
type: "
|
13
|
+
type: "fontSize",
|
14
14
|
placeholder: "16px or 1em"
|
15
15
|
}, {
|
16
16
|
label: "Font Family",
|
@@ -121,16 +121,16 @@ const buttonStyle = [{
|
|
121
121
|
tab: "Colors",
|
122
122
|
value: "colors",
|
123
123
|
fields: [{
|
124
|
-
label: "Text",
|
124
|
+
label: "Text Color",
|
125
125
|
key: "textColor",
|
126
126
|
type: "color",
|
127
127
|
needPreview: true
|
128
128
|
}, {
|
129
|
-
label: "Background",
|
129
|
+
label: "Background Color",
|
130
130
|
key: "bgColor",
|
131
131
|
type: "color"
|
132
132
|
}, {
|
133
|
-
label: "Border",
|
133
|
+
label: "Border Color",
|
134
134
|
key: "borderColor",
|
135
135
|
type: "color"
|
136
136
|
}]
|
@@ -138,16 +138,16 @@ const buttonStyle = [{
|
|
138
138
|
tab: "Hover Colors",
|
139
139
|
value: "hoverColors",
|
140
140
|
fields: [{
|
141
|
-
label: "Text",
|
141
|
+
label: "Hover Text Color",
|
142
142
|
key: "textColorHover",
|
143
143
|
type: "color",
|
144
144
|
needPreview: true
|
145
145
|
}, {
|
146
|
-
label: "Background",
|
146
|
+
label: "Hover Background Color",
|
147
147
|
key: "bgColorHover",
|
148
148
|
type: "color"
|
149
149
|
}, {
|
150
|
-
label: "Border",
|
150
|
+
label: "Hover Border Color",
|
151
151
|
key: "borderColorHover",
|
152
152
|
type: "color"
|
153
153
|
}]
|
@@ -42,16 +42,16 @@ const chipTextStyle = [{
|
|
42
42
|
tab: "Colors",
|
43
43
|
value: "colors",
|
44
44
|
fields: [{
|
45
|
-
label: "Text",
|
45
|
+
label: "Text Color",
|
46
46
|
key: "textColor",
|
47
47
|
type: "color",
|
48
48
|
needPreview: true
|
49
49
|
}, {
|
50
|
-
label: "Background",
|
50
|
+
label: "Background Color",
|
51
51
|
key: "bgColor",
|
52
52
|
type: "color"
|
53
53
|
}, {
|
54
|
-
label: "Border",
|
54
|
+
label: "Border Color",
|
55
55
|
key: "borderColor",
|
56
56
|
type: "color"
|
57
57
|
}]
|
@@ -2,12 +2,25 @@ const embedImageStyle = [{
|
|
2
2
|
tab: "URL",
|
3
3
|
value: "url",
|
4
4
|
fields: [{
|
5
|
+
label: "",
|
6
|
+
key: "url",
|
7
|
+
type: "text",
|
8
|
+
placeholder: "Add Image URL here"
|
9
|
+
}, {
|
5
10
|
label: "File",
|
6
11
|
key: "url",
|
7
12
|
type: "backgroundImage"
|
13
|
+
}]
|
14
|
+
}, {
|
15
|
+
tab: "Image List Settings",
|
16
|
+
value: "imageListSettings",
|
17
|
+
fields: [{
|
18
|
+
label: "Image List Columns",
|
19
|
+
key: "cols",
|
20
|
+
type: "text"
|
8
21
|
}, {
|
9
|
-
label: "",
|
10
|
-
key: "
|
22
|
+
label: "Row Height",
|
23
|
+
key: "rowHeight",
|
11
24
|
type: "text"
|
12
25
|
}]
|
13
26
|
}, {
|
@@ -38,16 +51,16 @@ const embedImageStyle = [{
|
|
38
51
|
tab: "Colors",
|
39
52
|
value: "colors",
|
40
53
|
fields: [{
|
41
|
-
label: "Text",
|
54
|
+
label: "Text Color",
|
42
55
|
key: "textColor",
|
43
56
|
type: "color",
|
44
57
|
needPreview: true
|
45
58
|
}, {
|
46
|
-
label: "Background",
|
59
|
+
label: "Background Color",
|
47
60
|
key: "bgColor",
|
48
61
|
type: "color"
|
49
62
|
}, {
|
50
|
-
label: "Border",
|
63
|
+
label: "Border Color",
|
51
64
|
key: "borderColor",
|
52
65
|
type: "color"
|
53
66
|
}]
|
@@ -6,5 +6,13 @@ const embedVideoStyle = [{
|
|
6
6
|
key: "url",
|
7
7
|
type: "text"
|
8
8
|
}]
|
9
|
+
}, {
|
10
|
+
tab: "Position",
|
11
|
+
value: "position",
|
12
|
+
fields: [{
|
13
|
+
label: "Set Postion (Vertical & Horizantal)",
|
14
|
+
key: "alignment",
|
15
|
+
type: "alignment"
|
16
|
+
}]
|
9
17
|
}];
|
10
18
|
export default embedVideoStyle;
|
@@ -69,16 +69,16 @@ const fieldStyle = [{
|
|
69
69
|
tab: "Colors",
|
70
70
|
value: "colors",
|
71
71
|
fields: [{
|
72
|
-
label: "Text",
|
72
|
+
label: "Text Color",
|
73
73
|
key: "textColor",
|
74
74
|
type: "color",
|
75
75
|
needPreview: true
|
76
76
|
}, {
|
77
|
-
label: "Background",
|
77
|
+
label: "Background Color",
|
78
78
|
key: "bgColor",
|
79
79
|
type: "color"
|
80
80
|
}, {
|
81
|
-
label: "Border",
|
81
|
+
label: "Border Color",
|
82
82
|
key: "borderColor",
|
83
83
|
type: "color"
|
84
84
|
}]
|
@@ -21,7 +21,6 @@ const Alignment = props => {
|
|
21
21
|
});
|
22
22
|
};
|
23
23
|
const flexDirection = value?.flexDirection || "row";
|
24
|
-
console.log(flexDirection);
|
25
24
|
return /*#__PURE__*/_jsxs(Grid, {
|
26
25
|
container: true,
|
27
26
|
style: {
|
@@ -127,11 +126,11 @@ const Alignment = props => {
|
|
127
126
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
128
127
|
value: "row",
|
129
128
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
130
|
-
label: /*#__PURE__*/_jsx(
|
129
|
+
label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
|
131
130
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
132
131
|
value: "column",
|
133
132
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
134
|
-
label: /*#__PURE__*/_jsx(
|
133
|
+
label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
|
135
134
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
136
135
|
value: "row-reverse",
|
137
136
|
control: /*#__PURE__*/_jsx(Radio, {}),
|
@@ -1,9 +1,10 @@
|
|
1
|
-
import React, { useState } from "react";
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
2
|
import { Grid, Button, Typography } from "@mui/material";
|
3
3
|
// import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
4
4
|
import { convertBase64 } from "../../../utils/helper";
|
5
5
|
import { uploadFile } from "../../../service/fileupload";
|
6
6
|
import { UploadBtnIcon } from "../../iconslist";
|
7
|
+
import QuiltedImageList from "../../ImageList";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
10
|
const BackgroundImage = props => {
|
@@ -11,13 +12,30 @@ const BackgroundImage = props => {
|
|
11
12
|
value,
|
12
13
|
data,
|
13
14
|
customProps,
|
15
|
+
elementProps,
|
14
16
|
onChange
|
15
17
|
} = props;
|
18
|
+
const {
|
19
|
+
services
|
20
|
+
} = customProps;
|
16
21
|
const {
|
17
22
|
key
|
18
23
|
} = data;
|
24
|
+
const {
|
25
|
+
images
|
26
|
+
} = elementProps;
|
19
27
|
const [base64, setBase64] = useState(value);
|
20
28
|
const [uploading, setUploading] = useState(false);
|
29
|
+
const [items, setItems] = useState([]);
|
30
|
+
useEffect(() => {
|
31
|
+
getItems();
|
32
|
+
}, []);
|
33
|
+
const getItems = async () => {
|
34
|
+
if (services) {
|
35
|
+
let result = await services("getAssets", {});
|
36
|
+
setItems(result);
|
37
|
+
}
|
38
|
+
};
|
21
39
|
const handleChange = async e => {
|
22
40
|
const file = e.target.files[0];
|
23
41
|
const strImage = await convertBase64(file);
|
@@ -42,6 +60,16 @@ const BackgroundImage = props => {
|
|
42
60
|
[key]: "none"
|
43
61
|
});
|
44
62
|
};
|
63
|
+
const onSelectChange = (img, status) => {
|
64
|
+
const uImages = !status ? [...images]?.filter(f => f.img !== img) : [...images, {
|
65
|
+
img
|
66
|
+
}];
|
67
|
+
onChange({
|
68
|
+
images: uImages,
|
69
|
+
url: uImages.length === 1 ? uImages[0].img : "",
|
70
|
+
alt: ""
|
71
|
+
});
|
72
|
+
};
|
45
73
|
return /*#__PURE__*/_jsxs(Grid, {
|
46
74
|
container: true,
|
47
75
|
children: [/*#__PURE__*/_jsx(Grid, {
|
@@ -103,6 +131,18 @@ const BackgroundImage = props => {
|
|
103
131
|
})
|
104
132
|
})
|
105
133
|
})
|
134
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
135
|
+
item: true,
|
136
|
+
xs: 12,
|
137
|
+
style: {
|
138
|
+
marginBottom: "12px"
|
139
|
+
},
|
140
|
+
children: /*#__PURE__*/_jsx(QuiltedImageList, {
|
141
|
+
itemData: [...items],
|
142
|
+
cols: 2,
|
143
|
+
selected: images,
|
144
|
+
onSelectChange: onSelectChange
|
145
|
+
})
|
106
146
|
})]
|
107
147
|
});
|
108
148
|
};
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { TextField, IconButton, Grid, Typography } from "@mui/material";
|
3
|
+
import { sizeMap } from "../../../utils/font.js";
|
4
|
+
import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
|
+
const FontSize = props => {
|
9
|
+
const {
|
10
|
+
value,
|
11
|
+
data,
|
12
|
+
onChange
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
key
|
16
|
+
} = data;
|
17
|
+
const handleChange = e => {
|
18
|
+
let inc = parseInt(e.target.value) || 16;
|
19
|
+
inc = inc > 200 ? 200 : inc;
|
20
|
+
onChange({
|
21
|
+
[key]: inc
|
22
|
+
});
|
23
|
+
};
|
24
|
+
const getSizeVal = () => {
|
25
|
+
try {
|
26
|
+
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
27
|
+
return parseInt(size || 16);
|
28
|
+
} catch (err) {
|
29
|
+
return "";
|
30
|
+
}
|
31
|
+
};
|
32
|
+
const combinedOldVal = getSizeVal();
|
33
|
+
const onIncreaseSize = () => {
|
34
|
+
let inc = (combinedOldVal || 0) + 1;
|
35
|
+
inc = inc > 200 ? 200 : inc;
|
36
|
+
onChange({
|
37
|
+
[key]: inc
|
38
|
+
});
|
39
|
+
};
|
40
|
+
const onDecreaseSize = () => {
|
41
|
+
onChange({
|
42
|
+
[key]: combinedOldVal - 1 || 0
|
43
|
+
});
|
44
|
+
};
|
45
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
46
|
+
children: [/*#__PURE__*/_jsx(Grid, {
|
47
|
+
item: true,
|
48
|
+
xs: 12,
|
49
|
+
style: {
|
50
|
+
marginBottom: "5px"
|
51
|
+
},
|
52
|
+
children: /*#__PURE__*/_jsx(Typography, {
|
53
|
+
variant: "body1",
|
54
|
+
color: "primary",
|
55
|
+
sx: {
|
56
|
+
fontSize: "14px",
|
57
|
+
fontWeight: "500"
|
58
|
+
},
|
59
|
+
children: data?.label
|
60
|
+
})
|
61
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
62
|
+
item: true,
|
63
|
+
xs: 12,
|
64
|
+
style: {
|
65
|
+
marginBottom: "16px"
|
66
|
+
},
|
67
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
68
|
+
value: combinedOldVal,
|
69
|
+
onChange: handleChange,
|
70
|
+
size: "small",
|
71
|
+
inputProps: {
|
72
|
+
style: {
|
73
|
+
width: "30px",
|
74
|
+
textAlign: "center"
|
75
|
+
}
|
76
|
+
},
|
77
|
+
InputProps: {
|
78
|
+
endAdornment: /*#__PURE__*/_jsxs("div", {
|
79
|
+
className: "textFontArrows",
|
80
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
81
|
+
onClick: onIncreaseSize,
|
82
|
+
size: "small",
|
83
|
+
children: /*#__PURE__*/_jsx(TextPlusIcon, {})
|
84
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
85
|
+
onClick: onDecreaseSize,
|
86
|
+
size: "small",
|
87
|
+
children: /*#__PURE__*/_jsx(TextMinusIcon, {})
|
88
|
+
})]
|
89
|
+
})
|
90
|
+
}
|
91
|
+
})
|
92
|
+
})]
|
93
|
+
});
|
94
|
+
};
|
95
|
+
export default FontSize;
|
@@ -50,6 +50,11 @@ const Icons = props => {
|
|
50
50
|
setList(MUIIcons.filled.slice(0, 90));
|
51
51
|
}
|
52
52
|
};
|
53
|
+
const onRemoveIcon = () => {
|
54
|
+
onChange({
|
55
|
+
[key]: null
|
56
|
+
});
|
57
|
+
};
|
53
58
|
const SelectedIcon = value ? fIcons[value] : null;
|
54
59
|
return /*#__PURE__*/_jsxs(Grid, {
|
55
60
|
container: true,
|
@@ -80,9 +85,16 @@ const Icons = props => {
|
|
80
85
|
xs: 2,
|
81
86
|
className: "selctedBtnIcon",
|
82
87
|
style: {
|
83
|
-
|
88
|
+
padding: "4px"
|
84
89
|
},
|
85
|
-
children: SelectedIcon
|
90
|
+
children: SelectedIcon ? /*#__PURE__*/_jsx(Tooltip, {
|
91
|
+
title: "Click to Remove",
|
92
|
+
arrow: true,
|
93
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
94
|
+
onClick: onRemoveIcon,
|
95
|
+
children: /*#__PURE__*/_jsx(SelectedIcon, {})
|
96
|
+
})
|
97
|
+
}) : ""
|
86
98
|
})]
|
87
99
|
})
|
88
100
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -14,6 +14,7 @@ import TextAlign from "./textAlign";
|
|
14
14
|
import TextOptions from "./textOptions";
|
15
15
|
import SelectBox from "./selectBox";
|
16
16
|
import Icons from "./icons";
|
17
|
+
import FontSize from "./fontSize";
|
17
18
|
const FieldMap = {
|
18
19
|
text: Text,
|
19
20
|
bannerSpacing: BannerSpacing,
|
@@ -30,6 +31,7 @@ const FieldMap = {
|
|
30
31
|
textAlign: TextAlign,
|
31
32
|
textOptions: TextOptions,
|
32
33
|
selectBox: SelectBox,
|
33
|
-
icons: Icons
|
34
|
+
icons: Icons,
|
35
|
+
fontSize: FontSize
|
34
36
|
};
|
35
37
|
export default FieldMap;
|
@@ -7,7 +7,8 @@ const TextOptions = props => {
|
|
7
7
|
const {
|
8
8
|
value,
|
9
9
|
data,
|
10
|
-
onChange
|
10
|
+
onChange,
|
11
|
+
elementProps
|
11
12
|
} = props;
|
12
13
|
const {
|
13
14
|
key,
|
@@ -47,7 +48,7 @@ const TextOptions = props => {
|
|
47
48
|
children: options.map(m => {
|
48
49
|
return /*#__PURE__*/_jsx(MenuItem, {
|
49
50
|
value: m.value,
|
50
|
-
children: renderOption ? renderOption(m) : m.label || m.text
|
51
|
+
children: renderOption ? renderOption(m, elementProps) : m.label || m.text
|
51
52
|
}, `${key}_${m.value}`);
|
52
53
|
})
|
53
54
|
})]
|
@@ -72,16 +72,16 @@ const formButtonStyle = [{
|
|
72
72
|
tab: "Colors",
|
73
73
|
value: "colors",
|
74
74
|
fields: [{
|
75
|
-
label: "Text",
|
75
|
+
label: "Text Color",
|
76
76
|
key: "textColor",
|
77
77
|
type: "color",
|
78
78
|
needPreview: true
|
79
79
|
}, {
|
80
|
-
label: "Background",
|
80
|
+
label: "Background Color",
|
81
81
|
key: "bgColor",
|
82
82
|
type: "color"
|
83
83
|
}, {
|
84
|
-
label: "Border",
|
84
|
+
label: "Border Color",
|
85
85
|
key: "borderColor",
|
86
86
|
type: "color"
|
87
87
|
}]
|
@@ -96,16 +96,16 @@ const formStyle = [{
|
|
96
96
|
tab: "Colors",
|
97
97
|
value: "colors",
|
98
98
|
fields: [{
|
99
|
-
label: "Text",
|
99
|
+
label: "Text Color",
|
100
100
|
key: "textColor",
|
101
101
|
type: "color",
|
102
102
|
needPreview: true
|
103
103
|
}, {
|
104
|
-
label: "Background",
|
104
|
+
label: "Background Color",
|
105
105
|
key: "bgColor",
|
106
106
|
type: "color"
|
107
107
|
}, {
|
108
|
-
label: "Border",
|
108
|
+
label: "Border Color",
|
109
109
|
key: "borderColor",
|
110
110
|
type: "color"
|
111
111
|
}]
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Grid, Button
|
3
|
-
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
2
|
+
import { Grid, Button } from "@mui/material";
|
4
3
|
import { convertBase64 } from "../utils/helper";
|
5
4
|
import { uploadFile } from "../service/fileupload";
|
6
5
|
import { UploadBtnIcon } from "./iconslist";
|
@@ -11,13 +10,12 @@ const Uploader = props => {
|
|
11
10
|
value,
|
12
11
|
data,
|
13
12
|
onUploaded,
|
14
|
-
customProps
|
15
|
-
disableUpload = false
|
13
|
+
customProps
|
16
14
|
} = props;
|
17
15
|
const {
|
18
16
|
key
|
19
17
|
} = data;
|
20
|
-
const [base64, setBase64] = useState(value);
|
18
|
+
const [base64, setBase64] = useState(value?.url);
|
21
19
|
const [uploading, setUploading] = useState(false);
|
22
20
|
const handleChange = async e => {
|
23
21
|
const file = e.target.files[0];
|
@@ -52,18 +50,10 @@ const Uploader = props => {
|
|
52
50
|
item: true,
|
53
51
|
xs: 12,
|
54
52
|
children: uploading ? "Uploading..." : ""
|
55
|
-
}), /*#__PURE__*/_jsx(Typography, {
|
56
|
-
variant: "body1",
|
57
|
-
color: "primary",
|
58
|
-
sx: {
|
59
|
-
fontSize: "14px",
|
60
|
-
fontWeight: "500",
|
61
|
-
marginBottom: "5px"
|
62
|
-
},
|
63
|
-
children: "Upload Image"
|
64
53
|
}), /*#__PURE__*/_jsx(Grid, {
|
65
54
|
item: true,
|
66
55
|
xs: 12,
|
56
|
+
className: "btn--wrpr",
|
67
57
|
style: {
|
68
58
|
marginTop: "12px",
|
69
59
|
width: "100%",
|
@@ -76,55 +66,36 @@ const Uploader = props => {
|
|
76
66
|
backgroundColor: "rgba(0,0,0,0.5)",
|
77
67
|
borderRadius: "10px"
|
78
68
|
},
|
79
|
-
children: /*#__PURE__*/_jsx(Grid, {
|
69
|
+
children: !uploading ? /*#__PURE__*/_jsx(Grid, {
|
80
70
|
className: "uploadImageSection",
|
81
71
|
children: base64 ? /*#__PURE__*/_jsx(Grid, {
|
82
72
|
className: "removeImageText",
|
83
73
|
onClick: onRemoveBG,
|
84
74
|
children: "REMOVE"
|
85
|
-
}) : /*#__PURE__*/
|
75
|
+
}) : /*#__PURE__*/_jsx(Grid, {
|
86
76
|
className: "uploadImageText",
|
87
|
-
|
88
|
-
|
77
|
+
children: /*#__PURE__*/_jsxs(Button, {
|
78
|
+
component: "label",
|
79
|
+
variant: "contained",
|
89
80
|
style: {
|
90
|
-
|
81
|
+
background: "none"
|
91
82
|
},
|
92
|
-
children: "
|
93
|
-
|
83
|
+
children: [/*#__PURE__*/_jsx("input", {
|
84
|
+
type: "file",
|
85
|
+
style: {
|
86
|
+
opacity: 0,
|
87
|
+
width: "0px"
|
88
|
+
},
|
89
|
+
onChange: handleChange
|
90
|
+
}), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
|
91
|
+
style: {
|
92
|
+
paddingLeft: "8px"
|
93
|
+
},
|
94
|
+
children: "UPLOAD"
|
95
|
+
})]
|
96
|
+
})
|
94
97
|
})
|
95
|
-
})
|
96
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
97
|
-
item: true,
|
98
|
-
xs: 12,
|
99
|
-
sx: {
|
100
|
-
paddingTop: "20px"
|
101
|
-
},
|
102
|
-
children: /*#__PURE__*/_jsxs(Grid, {
|
103
|
-
container: true,
|
104
|
-
justifyContent: "space-between",
|
105
|
-
children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
|
106
|
-
component: "label",
|
107
|
-
sx: {
|
108
|
-
display: "inline-flex",
|
109
|
-
width: "154px",
|
110
|
-
whiteSpace: "nowrap"
|
111
|
-
},
|
112
|
-
variant: "contained",
|
113
|
-
startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
|
114
|
-
children: ["Upload file", /*#__PURE__*/_jsx("input", {
|
115
|
-
type: "file",
|
116
|
-
style: {
|
117
|
-
opacity: 0
|
118
|
-
},
|
119
|
-
onChange: handleChange
|
120
|
-
})]
|
121
|
-
}) : null, base64 ? /*#__PURE__*/_jsx(Button, {
|
122
|
-
variant: "contained",
|
123
|
-
color: "secondary",
|
124
|
-
onClick: onRemoveBG,
|
125
|
-
children: "Clear"
|
126
|
-
}) : ""]
|
127
|
-
})
|
98
|
+
}) : null
|
128
99
|
})]
|
129
100
|
});
|
130
101
|
};
|
@@ -1381,4 +1381,29 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
|
|
1381
1381
|
strokeLinecap: "round",
|
1382
1382
|
strokeLinejoin: "round"
|
1383
1383
|
})]
|
1384
|
-
});
|
1384
|
+
});
|
1385
|
+
export const FormIcon = () => {
|
1386
|
+
return /*#__PURE__*/_jsxs("svg", {
|
1387
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1388
|
+
width: "22",
|
1389
|
+
height: "22",
|
1390
|
+
viewBox: "0 0 24 24",
|
1391
|
+
fill: "none",
|
1392
|
+
children: [/*#__PURE__*/_jsx("path", {
|
1393
|
+
d: "M17.6211 9.61914H12.3711C11.9611 9.61914 11.6211 9.27914 11.6211 8.86914C11.6211 8.45914 11.9611 8.11914 12.3711 8.11914H17.6211C18.0311 8.11914 18.3711 8.45914 18.3711 8.86914C18.3711 9.27914 18.0411 9.61914 17.6211 9.61914Z",
|
1394
|
+
fill: "#64748B"
|
1395
|
+
}), /*#__PURE__*/_jsx("path", {
|
1396
|
+
d: "M7.11859 10.3803C6.92859 10.3803 6.73859 10.3103 6.58859 10.1603L5.83859 9.41031C5.54859 9.12031 5.54859 8.64031 5.83859 8.35031C6.12859 8.06031 6.60859 8.06031 6.89859 8.35031L7.11859 8.57031L8.83859 6.85031C9.12859 6.56031 9.60859 6.56031 9.89859 6.85031C10.1886 7.14031 10.1886 7.62031 9.89859 7.91031L7.64859 10.1603C7.50859 10.3003 7.31859 10.3803 7.11859 10.3803Z",
|
1397
|
+
fill: "#64748B"
|
1398
|
+
}), /*#__PURE__*/_jsx("path", {
|
1399
|
+
d: "M17.6211 16.6191H12.3711C11.9611 16.6191 11.6211 16.2791 11.6211 15.8691C11.6211 15.4591 11.9611 15.1191 12.3711 15.1191H17.6211C18.0311 15.1191 18.3711 15.4591 18.3711 15.8691C18.3711 16.2791 18.0411 16.6191 17.6211 16.6191Z",
|
1400
|
+
fill: "#64748B"
|
1401
|
+
}), /*#__PURE__*/_jsx("path", {
|
1402
|
+
d: "M7.11859 17.3803C6.92859 17.3803 6.73859 17.3103 6.58859 17.1603L5.83859 16.4103C5.54859 16.1203 5.54859 15.6403 5.83859 15.3503C6.12859 15.0603 6.60859 15.0603 6.89859 15.3503L7.11859 15.5703L8.83859 13.8503C9.12859 13.5603 9.60859 13.5603 9.89859 13.8503C10.1886 14.1403 10.1886 14.6203 9.89859 14.9103L7.64859 17.1603C7.50859 17.3003 7.31859 17.3803 7.11859 17.3803Z",
|
1403
|
+
fill: "#64748B"
|
1404
|
+
}), /*#__PURE__*/_jsx("path", {
|
1405
|
+
d: "M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z",
|
1406
|
+
fill: "#64748B"
|
1407
|
+
})]
|
1408
|
+
});
|
1409
|
+
};
|
@@ -15,7 +15,6 @@ export function customCollisionDetectionAlgorithm(args) {
|
|
15
15
|
|
16
16
|
// Collision detection algorithms return an array of collisions
|
17
17
|
if (pointerCollisions.length >= 0 && rectIntersection(args)) {
|
18
|
-
console.log(rectIntersection(args));
|
19
18
|
return rectIntersection(args);
|
20
19
|
}
|
21
20
|
|