@arbisoft/react-design-tool 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -1
- package/dist/cjs/index.js +62 -62
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +62 -62
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -23,7 +23,7 @@ Check out the live demo here:
|
|
|
23
23
|
|
|
24
24
|
[](https://codesandbox.io/p/sandbox/fdftlr)
|
|
25
25
|
|
|
26
|
-
## 📦 Installation
|
|
26
|
+
## 📦 Installation( react >= 19 )
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
29
|
npm install @arbisoft/react-design-tool
|
|
@@ -32,6 +32,16 @@ OR
|
|
|
32
32
|
```bash
|
|
33
33
|
yarn add @arbisoft/react-design-tool
|
|
34
34
|
|
|
35
|
+
```
|
|
36
|
+
#### ⚠️ Important: Installation Guide for React 18 and Below
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install @arbisoft/react-design-tool@1.0.10
|
|
40
|
+
```
|
|
41
|
+
OR
|
|
42
|
+
```bash
|
|
43
|
+
yarn add @arbisoft/react-design-tool@1.0.10
|
|
44
|
+
|
|
35
45
|
```
|
|
36
46
|
## 🚀 Quick Start
|
|
37
47
|
|
package/dist/cjs/index.js
CHANGED
|
@@ -534,7 +534,7 @@ var propTypes$A = {
|
|
|
534
534
|
qrLink: PropTypes.string,
|
|
535
535
|
styleProps: PropTypes.object,
|
|
536
536
|
defaultText: PropTypes.string,
|
|
537
|
-
onSave: PropTypes.func
|
|
537
|
+
onSave: PropTypes.func,
|
|
538
538
|
saveButtonText: PropTypes.string,
|
|
539
539
|
locale: PropTypes.oneOf(['en', 'ru', 'pl', 'de', 'es', 'fr', 'it'])
|
|
540
540
|
};
|
|
@@ -608,11 +608,11 @@ var _templateObject$t;
|
|
|
608
608
|
var SideBarWrapper$1 = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n width: 100px;\n overflow: auto;\n"])), theme.color.white);
|
|
609
609
|
|
|
610
610
|
var propTypes$y = {
|
|
611
|
-
key: PropTypes.string
|
|
611
|
+
key: PropTypes.string,
|
|
612
612
|
isSelected: PropTypes.bool,
|
|
613
613
|
onClick: PropTypes.func,
|
|
614
614
|
icon: PropTypes.node,
|
|
615
|
-
text: PropTypes.string
|
|
615
|
+
text: PropTypes.string,
|
|
616
616
|
pillActiveColor: PropTypes.string
|
|
617
617
|
};
|
|
618
618
|
|
|
@@ -1907,7 +1907,7 @@ var propTypes$x = {
|
|
|
1907
1907
|
editorHeight: PropTypes.number,
|
|
1908
1908
|
editorWidth: PropTypes.number,
|
|
1909
1909
|
onSetBackgroundColor: PropTypes.func,
|
|
1910
|
-
elements: PropTypes.array
|
|
1910
|
+
elements: PropTypes.array,
|
|
1911
1911
|
history: PropTypes.array,
|
|
1912
1912
|
redoStack: PropTypes.array,
|
|
1913
1913
|
onSetBackgroundImage: PropTypes.func,
|
|
@@ -1992,44 +1992,44 @@ var EditorBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTe
|
|
|
1992
1992
|
}, theme.color.gray_25);
|
|
1993
1993
|
|
|
1994
1994
|
var propTypes$w = {
|
|
1995
|
-
selectedTab: PropTypes.string
|
|
1996
|
-
onSetBackgroundColor: PropTypes.func
|
|
1995
|
+
selectedTab: PropTypes.string,
|
|
1996
|
+
onSetBackgroundColor: PropTypes.func,
|
|
1997
1997
|
canvasBackgroundColor: PropTypes.string,
|
|
1998
1998
|
canvasBackgroundImage: PropTypes.string,
|
|
1999
|
-
onSetBackgroundImage: PropTypes.func
|
|
1999
|
+
onSetBackgroundImage: PropTypes.func,
|
|
2000
2000
|
shapeStrokeColor: PropTypes.string,
|
|
2001
2001
|
shapeStrokeWidth: PropTypes.number,
|
|
2002
2002
|
shapeFillColor: PropTypes.string,
|
|
2003
2003
|
shapeOpacity: PropTypes.number,
|
|
2004
|
-
onChangeShapeStrokeColor: PropTypes.func
|
|
2005
|
-
onChangeShapeStrokeWidth: PropTypes.func
|
|
2006
|
-
onChangeShapeFill: PropTypes.func
|
|
2007
|
-
onChangeShapeOpacity: PropTypes.func
|
|
2004
|
+
onChangeShapeStrokeColor: PropTypes.func,
|
|
2005
|
+
onChangeShapeStrokeWidth: PropTypes.func,
|
|
2006
|
+
onChangeShapeFill: PropTypes.func,
|
|
2007
|
+
onChangeShapeOpacity: PropTypes.func,
|
|
2008
2008
|
selectedElement: PropTypes.object,
|
|
2009
|
-
onChangeBackgroundImageOpacity: PropTypes.func
|
|
2009
|
+
onChangeBackgroundImageOpacity: PropTypes.func,
|
|
2010
2010
|
backgroundImageOpacity: PropTypes.number,
|
|
2011
2011
|
imageStrokeWidth: PropTypes.number,
|
|
2012
2012
|
imageStrokeColor: PropTypes.string,
|
|
2013
2013
|
imageOpacity: PropTypes.number,
|
|
2014
|
-
onChangeImageStrokeWidth: PropTypes.func
|
|
2015
|
-
onChangeImageStrokeColor: PropTypes.func
|
|
2016
|
-
onChangeImageOpacity: PropTypes.func
|
|
2014
|
+
onChangeImageStrokeWidth: PropTypes.func,
|
|
2015
|
+
onChangeImageStrokeColor: PropTypes.func,
|
|
2016
|
+
onChangeImageOpacity: PropTypes.func,
|
|
2017
2017
|
qrStrokeWidth: PropTypes.number,
|
|
2018
2018
|
qrStrokeColor: PropTypes.string,
|
|
2019
2019
|
qrOpacity: PropTypes.number,
|
|
2020
|
-
onChangeQrStrokeWidth: PropTypes.func
|
|
2021
|
-
onChangeQrStrokeColor: PropTypes.func
|
|
2022
|
-
onChangeQrOpacity: PropTypes.func
|
|
2020
|
+
onChangeQrStrokeWidth: PropTypes.func,
|
|
2021
|
+
onChangeQrStrokeColor: PropTypes.func,
|
|
2022
|
+
onChangeQrOpacity: PropTypes.func,
|
|
2023
2023
|
defaultTextProps: PropTypes.object,
|
|
2024
|
-
onChangeTextProperty: PropTypes.func
|
|
2025
|
-
onSetPageSize: PropTypes.func
|
|
2024
|
+
onChangeTextProperty: PropTypes.func,
|
|
2025
|
+
onSetPageSize: PropTypes.func,
|
|
2026
2026
|
selectedPageSize: PropTypes.object,
|
|
2027
|
-
translation: PropTypes.object
|
|
2028
|
-
uploadImageCallBack: PropTypes.func
|
|
2029
|
-
setLoadingUploadImage: PropTypes.func
|
|
2027
|
+
translation: PropTypes.object,
|
|
2028
|
+
uploadImageCallBack: PropTypes.func,
|
|
2029
|
+
setLoadingUploadImage: PropTypes.func,
|
|
2030
2030
|
cuttingGuideStroke: PropTypes.number,
|
|
2031
2031
|
cuttingGuideStrokeColor: PropTypes.string,
|
|
2032
|
-
onChangeCuttingGuideProp: PropTypes.func
|
|
2032
|
+
onChangeCuttingGuideProp: PropTypes.func
|
|
2033
2033
|
};
|
|
2034
2034
|
|
|
2035
2035
|
var _templateObject$q, _templateObject2$k;
|
|
@@ -2043,28 +2043,28 @@ var ToolBarWrapper = styled.div(_templateObject$q || (_templateObject$q = _tagge
|
|
|
2043
2043
|
var OverlayBlocker = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n background: rgba(255, 255, 255, 0.1);\n z-index: 100;\n cursor: not-allowed;\n"])));
|
|
2044
2044
|
|
|
2045
2045
|
var propTypes$v = {
|
|
2046
|
-
onSetBackgroundColor: PropTypes.func
|
|
2047
|
-
canvasBackgroundColor: PropTypes.string
|
|
2048
|
-
onSetBackgroundImage: PropTypes.func
|
|
2049
|
-
backgroundImageOpacity: PropTypes.number
|
|
2050
|
-
onChangeBackgroundImageOpacity: PropTypes.func
|
|
2051
|
-
onSetPageSize: PropTypes.func
|
|
2052
|
-
selectedPageSize: PropTypes.object
|
|
2046
|
+
onSetBackgroundColor: PropTypes.func,
|
|
2047
|
+
canvasBackgroundColor: PropTypes.string,
|
|
2048
|
+
onSetBackgroundImage: PropTypes.func,
|
|
2049
|
+
backgroundImageOpacity: PropTypes.number,
|
|
2050
|
+
onChangeBackgroundImageOpacity: PropTypes.func,
|
|
2051
|
+
onSetPageSize: PropTypes.func,
|
|
2052
|
+
selectedPageSize: PropTypes.object,
|
|
2053
2053
|
languageLocale: PropTypes.string,
|
|
2054
|
-
uploadImageCallBack: PropTypes.func
|
|
2055
|
-
setLoadingUploadImage: PropTypes.func
|
|
2056
|
-
cuttingGuideStroke: PropTypes.number
|
|
2057
|
-
cuttingGuideStrokeColor: PropTypes.string
|
|
2058
|
-
onChangeCuttingGuideProp: PropTypes.func
|
|
2054
|
+
uploadImageCallBack: PropTypes.func,
|
|
2055
|
+
setLoadingUploadImage: PropTypes.func,
|
|
2056
|
+
cuttingGuideStroke: PropTypes.number,
|
|
2057
|
+
cuttingGuideStrokeColor: PropTypes.string,
|
|
2058
|
+
onChangeCuttingGuideProp: PropTypes.func
|
|
2059
2059
|
};
|
|
2060
2060
|
|
|
2061
2061
|
var propTypes$u = {
|
|
2062
|
-
height: PropTypes.string
|
|
2062
|
+
height: PropTypes.string,
|
|
2063
2063
|
paddingTop: PropTypes.string,
|
|
2064
2064
|
paddingBottom: PropTypes.string,
|
|
2065
2065
|
paddingLeft: PropTypes.string,
|
|
2066
2066
|
paddingRight: PropTypes.string,
|
|
2067
|
-
children: PropTypes.node
|
|
2067
|
+
children: PropTypes.node,
|
|
2068
2068
|
marginLeft: PropTypes.string,
|
|
2069
2069
|
marginRight: PropTypes.string,
|
|
2070
2070
|
justifyContent: PropTypes.string,
|
|
@@ -2124,8 +2124,8 @@ var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _ta
|
|
|
2124
2124
|
});
|
|
2125
2125
|
|
|
2126
2126
|
var propTypes$t = {
|
|
2127
|
-
children: PropTypes.node
|
|
2128
|
-
text: PropTypes.string
|
|
2127
|
+
children: PropTypes.node,
|
|
2128
|
+
text: PropTypes.string,
|
|
2129
2129
|
position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
|
|
2130
2130
|
disabled: PropTypes.bool
|
|
2131
2131
|
};
|
|
@@ -2780,13 +2780,13 @@ var OpacityPicker = function OpacityPicker(_ref) {
|
|
|
2780
2780
|
OpacityPicker.propTypes = propTypes$q;
|
|
2781
2781
|
|
|
2782
2782
|
var propTypes$p = {
|
|
2783
|
-
value: PropTypes.number
|
|
2784
|
-
strokeColor: PropTypes.string
|
|
2783
|
+
value: PropTypes.number,
|
|
2784
|
+
strokeColor: PropTypes.string,
|
|
2785
2785
|
min: PropTypes.number,
|
|
2786
2786
|
max: PropTypes.number,
|
|
2787
2787
|
step: PropTypes.number,
|
|
2788
|
-
onChangeStrokeWidth: PropTypes.func
|
|
2789
|
-
onChangeShapeStrokeColor: PropTypes.func
|
|
2788
|
+
onChangeStrokeWidth: PropTypes.func,
|
|
2789
|
+
onChangeShapeStrokeColor: PropTypes.func,
|
|
2790
2790
|
pickerWidth: PropTypes.number,
|
|
2791
2791
|
languageLocale: PropTypes.string,
|
|
2792
2792
|
tooltip: PropTypes.string,
|
|
@@ -3054,15 +3054,15 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
|
|
|
3054
3054
|
TemplateToolBar.propTypes = propTypes$v;
|
|
3055
3055
|
|
|
3056
3056
|
var propTypes$o = {
|
|
3057
|
-
fontFamily: PropTypes.string
|
|
3058
|
-
fontSize: PropTypes.string
|
|
3059
|
-
color: PropTypes.string
|
|
3057
|
+
fontFamily: PropTypes.string,
|
|
3058
|
+
fontSize: PropTypes.string,
|
|
3059
|
+
color: PropTypes.string,
|
|
3060
3060
|
textDecoration: PropTypes.string,
|
|
3061
3061
|
fontStyle: PropTypes.string,
|
|
3062
3062
|
fontWeight: PropTypes.string,
|
|
3063
3063
|
textAlign: PropTypes.string,
|
|
3064
3064
|
textOpacity: PropTypes.number,
|
|
3065
|
-
onChangeTextProperty: PropTypes.func
|
|
3065
|
+
onChangeTextProperty: PropTypes.func,
|
|
3066
3066
|
languageLocale: PropTypes.string
|
|
3067
3067
|
};
|
|
3068
3068
|
|
|
@@ -3593,7 +3593,7 @@ var propTypes$i = {
|
|
|
3593
3593
|
zoomLevel: PropTypes.number,
|
|
3594
3594
|
onZoomIn: PropTypes.func,
|
|
3595
3595
|
onZoomOut: PropTypes.func,
|
|
3596
|
-
translation: PropTypes.object
|
|
3596
|
+
translation: PropTypes.object
|
|
3597
3597
|
};
|
|
3598
3598
|
|
|
3599
3599
|
var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$2, _templateObject5$1;
|
|
@@ -3776,11 +3776,11 @@ var BottomToolbarWrapper = styled.div(_templateObject$b || (_templateObject$b =
|
|
|
3776
3776
|
});
|
|
3777
3777
|
|
|
3778
3778
|
var propTypes$f = {
|
|
3779
|
-
onUndo: PropTypes.func
|
|
3780
|
-
onRedo: PropTypes.func
|
|
3779
|
+
onUndo: PropTypes.func,
|
|
3780
|
+
onRedo: PropTypes.func,
|
|
3781
3781
|
disableUndo: PropTypes.bool,
|
|
3782
3782
|
disableRedo: PropTypes.bool,
|
|
3783
|
-
translation: PropTypes.object
|
|
3783
|
+
translation: PropTypes.object
|
|
3784
3784
|
};
|
|
3785
3785
|
|
|
3786
3786
|
var UndoRedoControls = function UndoRedoControls(_ref) {
|
|
@@ -3877,8 +3877,8 @@ var BottomToolBar = function BottomToolBar(_ref) {
|
|
|
3877
3877
|
BottomToolBar.propTypes = propTypes$j;
|
|
3878
3878
|
|
|
3879
3879
|
var propTypes$e = {
|
|
3880
|
-
id: PropTypes.string
|
|
3881
|
-
element: PropTypes.object
|
|
3880
|
+
id: PropTypes.string,
|
|
3881
|
+
element: PropTypes.object,
|
|
3882
3882
|
onClick: PropTypes.func,
|
|
3883
3883
|
onDragEnd: PropTypes.func,
|
|
3884
3884
|
onTransformEnd: PropTypes.func,
|
|
@@ -3939,7 +3939,7 @@ var CanvasImage = function CanvasImage(_ref) {
|
|
|
3939
3939
|
CanvasImage.propTypes = propTypes$e;
|
|
3940
3940
|
|
|
3941
3941
|
var propTypes$d = {
|
|
3942
|
-
element: PropTypes.object
|
|
3942
|
+
element: PropTypes.object,
|
|
3943
3943
|
onClick: PropTypes.func,
|
|
3944
3944
|
onDragEnd: PropTypes.func,
|
|
3945
3945
|
onTransformEnd: PropTypes.func,
|
|
@@ -4088,7 +4088,7 @@ var QrElement = function QrElement(_ref) {
|
|
|
4088
4088
|
QrElement.propTypes = propTypes$d;
|
|
4089
4089
|
|
|
4090
4090
|
var propTypes$c = {
|
|
4091
|
-
element: PropTypes.object
|
|
4091
|
+
element: PropTypes.object,
|
|
4092
4092
|
onClick: PropTypes.func,
|
|
4093
4093
|
onDragEnd: PropTypes.func,
|
|
4094
4094
|
onTransformEnd: PropTypes.func,
|
|
@@ -5152,10 +5152,10 @@ var SideBarWrapper = styled.div(_templateObject$9 || (_templateObject$9 = _tagge
|
|
|
5152
5152
|
var SideBarContainer = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n width: ", "px;\n"])), helperSideBarWidth);
|
|
5153
5153
|
|
|
5154
5154
|
var propTypes$9 = {
|
|
5155
|
-
oncreateNewTemplate: PropTypes.func
|
|
5155
|
+
oncreateNewTemplate: PropTypes.func,
|
|
5156
5156
|
languageLocale: PropTypes.string,
|
|
5157
|
-
defaultTemplatesList: PropTypes.array
|
|
5158
|
-
customTemplatesList: PropTypes.array
|
|
5157
|
+
defaultTemplatesList: PropTypes.array,
|
|
5158
|
+
customTemplatesList: PropTypes.array
|
|
5159
5159
|
};
|
|
5160
5160
|
|
|
5161
5161
|
var propTypes$8 = {
|
|
@@ -5297,7 +5297,7 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
|
|
|
5297
5297
|
TemplateSideBar.propTypes = propTypes$9;
|
|
5298
5298
|
|
|
5299
5299
|
var propTypes$7 = {
|
|
5300
|
-
onAddTextToCanvas: PropTypes.func
|
|
5300
|
+
onAddTextToCanvas: PropTypes.func,
|
|
5301
5301
|
languageLocale: PropTypes.string
|
|
5302
5302
|
};
|
|
5303
5303
|
|
|
@@ -5504,7 +5504,7 @@ var propTypes$4 = {
|
|
|
5504
5504
|
qrPresent: PropTypes.bool,
|
|
5505
5505
|
toggleQrLogo: PropTypes.func,
|
|
5506
5506
|
addQrLogo: PropTypes.func,
|
|
5507
|
-
elements: PropTypes.array
|
|
5507
|
+
elements: PropTypes.array,
|
|
5508
5508
|
qrLogo: PropTypes.object,
|
|
5509
5509
|
languageLocale: PropTypes.string
|
|
5510
5510
|
};
|
|
@@ -5610,7 +5610,7 @@ var QrSideBar = function QrSideBar(_ref) {
|
|
|
5610
5610
|
QrSideBar.propTypes = propTypes$4;
|
|
5611
5611
|
|
|
5612
5612
|
var propTypes$2 = {
|
|
5613
|
-
translation: PropTypes.object
|
|
5613
|
+
translation: PropTypes.object
|
|
5614
5614
|
};
|
|
5615
5615
|
|
|
5616
5616
|
var _templateObject$1;
|