px-react-ui-components 1.0.2 → 1.0.5
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/dist/components/MyAlert/MyAlert.js +17 -9
- package/dist/components/MyContainer/MyContainer.js +42 -26
- package/dist/components/MyContainer/MyContainerBody.js +14 -5
- package/dist/components/MyContainer/MyContainerFooter.js +14 -5
- package/dist/components/MyContainer/MyContainerRight.js +15 -6
- package/dist/components/MyEditor/MyEditor.js +73 -59
- package/dist/components/MyFileUpload/MyFileUpload.js +132 -102
- package/dist/components/MyImageCropper/MyImageCropper.js +37 -24
- package/dist/components/MyInput/MyInput.js +435 -384
- package/dist/components/MyInput/index.js +23 -0
- package/dist/components/MyMaps/YandexMaps.js +21 -13
- package/dist/components/MyMenu/MenuItem.js +60 -38
- package/dist/components/MyModal/MyModal.js +39 -22
- package/dist/components/MyModal/MyModalBody.js +14 -5
- package/dist/components/MyModal/MyModalFooter.js +14 -5
- package/dist/components/MyNotFound/MyNotFound.js +22 -12
- package/dist/components/MyScrollableCard/MyScrollableCard.js +22 -12
- package/dist/components/MyTable/MyTable.js +142 -108
- package/dist/components/MyTable/MyTableBody.js +14 -5
- package/dist/components/MyTable/MyTableHead.js +14 -5
- package/dist/components/MyTabs/MyTabPane.js +14 -3
- package/dist/components/MyTabs/MyTabs.js +59 -41
- package/dist/components/MyWaiting/MyWaiting.js +30 -19
- package/dist/components/MyZoomImage/MyZoomImage.js +101 -77
- package/dist/index.js +131 -15
- package/package.json +7 -8
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
import { confirmAlert } from "react-confirm-alert";
|
|
3
|
-
import "react-confirm-alert/src/react-confirm-alert.css";
|
|
4
|
-
import "./MyAlert.css";
|
|
1
|
+
"use strict";
|
|
5
2
|
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.MyAlertType = exports.MyAlert = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactConfirmAlert = require("react-confirm-alert");
|
|
9
|
+
require("react-confirm-alert/src/react-confirm-alert.css");
|
|
10
|
+
require("./MyAlert.css");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
13
|
// import Swal from "sweetalert2";
|
|
7
14
|
|
|
8
|
-
|
|
15
|
+
const MyAlertType = exports.MyAlertType = {
|
|
9
16
|
WARNING: 'warning',
|
|
10
17
|
ERROR: 'error',
|
|
11
18
|
SUCCESS: 'success',
|
|
@@ -14,7 +21,7 @@ export const MyAlertType = {
|
|
|
14
21
|
};
|
|
15
22
|
Object.freeze(MyAlertType); // Enum sabitlerini değiştirmeyi engeller
|
|
16
23
|
|
|
17
|
-
|
|
24
|
+
const MyAlert = (message, type = MyAlertType.INFO, {
|
|
18
25
|
title = '',
|
|
19
26
|
buttontext = {
|
|
20
27
|
confirm: 'Tamam',
|
|
@@ -65,9 +72,9 @@ export const MyAlert = (message, type = MyAlertType.INFO, {
|
|
|
65
72
|
}
|
|
66
73
|
});
|
|
67
74
|
}
|
|
68
|
-
confirmAlert({
|
|
75
|
+
(0, _reactConfirmAlert.confirmAlert)({
|
|
69
76
|
title: title,
|
|
70
|
-
message: /*#__PURE__*/
|
|
77
|
+
message: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
71
78
|
dangerouslySetInnerHTML: {
|
|
72
79
|
__html: typeof message === 'string' ? message : message.props?.children || message.toString()
|
|
73
80
|
}
|
|
@@ -106,4 +113,5 @@ export const MyAlert = (message, type = MyAlertType.INFO, {
|
|
|
106
113
|
// // // Swal.fire("Changes are not saved", "", "info");
|
|
107
114
|
// // }
|
|
108
115
|
// });
|
|
109
|
-
};
|
|
116
|
+
};
|
|
117
|
+
exports.MyAlert = MyAlert;
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _MyContainerModule = _interopRequireDefault(require("./MyContainer.module.css"));
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
3
11
|
function MyContainer({
|
|
4
12
|
children,
|
|
5
13
|
title = "",
|
|
@@ -15,7 +23,7 @@ function MyContainer({
|
|
|
15
23
|
footerClassName = null,
|
|
16
24
|
footerStyle = null
|
|
17
25
|
}) {
|
|
18
|
-
const arrChild =
|
|
26
|
+
const arrChild = _react.default.Children.toArray(children);
|
|
19
27
|
let childHeaderRight = null;
|
|
20
28
|
let childBody = null;
|
|
21
29
|
let childFooter = null;
|
|
@@ -33,27 +41,35 @@ function MyContainer({
|
|
|
33
41
|
childFooter = el;
|
|
34
42
|
}
|
|
35
43
|
}
|
|
36
|
-
return /*#__PURE__*/
|
|
37
|
-
className: `${
|
|
38
|
-
style: style
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
|
|
45
|
+
className: `${_MyContainerModule.default.container} ${className || ""}`,
|
|
46
|
+
style: style,
|
|
47
|
+
children: [(title || childHeaderRight) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
48
|
+
className: `${_MyContainerModule.default.header} ${headerClassName || ""}`,
|
|
49
|
+
style: headerStyle,
|
|
50
|
+
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
51
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
|
|
52
|
+
className: _MyContainerModule.default.title,
|
|
53
|
+
style: titleTextStyle,
|
|
54
|
+
children: title
|
|
55
|
+
}), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
56
|
+
className: _MyContainerModule.default.description,
|
|
57
|
+
children: description
|
|
58
|
+
})]
|
|
59
|
+
}), childHeaderRight && childHeaderRight]
|
|
60
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
61
|
+
className: `${_MyContainerModule.default.body} ${bodyClassName || ""}`,
|
|
62
|
+
style: title ? {
|
|
63
|
+
paddingTop: "12px"
|
|
64
|
+
} : null,
|
|
65
|
+
children: childBody
|
|
66
|
+
}), childFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
67
|
+
className: `${_MyContainerModule.default.footer} ${footerClassName || ""}`,
|
|
68
|
+
style: title ? {
|
|
69
|
+
paddingTop: "12px"
|
|
70
|
+
} : null,
|
|
71
|
+
children: childFooter
|
|
72
|
+
})]
|
|
73
|
+
});
|
|
58
74
|
}
|
|
59
|
-
|
|
75
|
+
var _default = exports.default = MyContainer;
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
2
10
|
function MyContainerBody({
|
|
3
11
|
children
|
|
4
12
|
}) {
|
|
5
|
-
return /*#__PURE__*/
|
|
6
|
-
className: "MyContainerTagBody"
|
|
7
|
-
|
|
13
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
14
|
+
className: "MyContainerTagBody",
|
|
15
|
+
children: children
|
|
16
|
+
});
|
|
8
17
|
}
|
|
9
|
-
|
|
18
|
+
var _default = exports.default = MyContainerBody;
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
2
10
|
function MyContainerFooter({
|
|
3
11
|
children
|
|
4
12
|
}) {
|
|
5
|
-
return /*#__PURE__*/
|
|
6
|
-
className: "MyContainerTagFooter"
|
|
7
|
-
|
|
13
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
14
|
+
className: "MyContainerTagFooter",
|
|
15
|
+
children: children
|
|
16
|
+
});
|
|
8
17
|
}
|
|
9
|
-
|
|
18
|
+
var _default = exports.default = MyContainerFooter;
|
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _MyContainerModule = _interopRequireDefault(require("./MyContainer.module.css"));
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
3
11
|
function MyContainerRight({
|
|
4
12
|
children
|
|
5
13
|
}) {
|
|
6
|
-
return /*#__PURE__*/
|
|
7
|
-
className: "MyContainerTagRight " +
|
|
8
|
-
|
|
14
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
15
|
+
className: "MyContainerTagRight " + _MyContainerModule.default.rightBlock,
|
|
16
|
+
children: children
|
|
17
|
+
});
|
|
9
18
|
}
|
|
10
|
-
|
|
19
|
+
var _default = exports.default = MyContainerRight;
|
|
@@ -1,15 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
import ReactQuill from "react-quill";
|
|
3
|
-
import "react-quill/dist/quill.snow.css";
|
|
4
|
-
import ImageResize from "quill-image-resize";
|
|
5
|
-
import Quill from "quill";
|
|
6
|
-
import QuillTable from "quill-table";
|
|
7
|
-
import katex from "katex";
|
|
8
|
-
import "katex/dist/katex.min.css";
|
|
9
|
-
import "./MyEditor.scss";
|
|
1
|
+
"use strict";
|
|
10
2
|
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactQuill = _interopRequireDefault(require("react-quill"));
|
|
9
|
+
require("react-quill/dist/quill.snow.css");
|
|
10
|
+
var _quillImageResize = _interopRequireDefault(require("quill-image-resize"));
|
|
11
|
+
var _quill = _interopRequireDefault(require("quill"));
|
|
12
|
+
var _quillTable = _interopRequireDefault(require("quill-table"));
|
|
13
|
+
var _katex = _interopRequireDefault(require("katex"));
|
|
14
|
+
require("katex/dist/katex.min.css");
|
|
15
|
+
require("./MyEditor.scss");
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
20
|
// KaTeX'i global hale getir
|
|
12
|
-
window.katex =
|
|
21
|
+
window.katex = _katex.default;
|
|
13
22
|
|
|
14
23
|
// Özel font listesini tanımla
|
|
15
24
|
const fonts = [{
|
|
@@ -105,20 +114,20 @@ const fonts = [{
|
|
|
105
114
|
}];
|
|
106
115
|
|
|
107
116
|
// Quill font formatını genişlet
|
|
108
|
-
const Font =
|
|
117
|
+
const Font = _quill.default.import("formats/font");
|
|
109
118
|
Font.whitelist = fonts.map(f => f.value);
|
|
110
|
-
|
|
119
|
+
_quill.default.register(Font, true);
|
|
111
120
|
|
|
112
121
|
// Quill modüllerini kaydet
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
122
|
+
_quill.default.register("modules/imageResize", _quillImageResize.default);
|
|
123
|
+
_quill.default.register(_quillTable.default.TableCell);
|
|
124
|
+
_quill.default.register(_quillTable.default.TableRow);
|
|
125
|
+
_quill.default.register(_quillTable.default.Table);
|
|
126
|
+
_quill.default.register(_quillTable.default.Contain);
|
|
127
|
+
_quill.default.register("modules/table", _quillTable.default.TableModule);
|
|
119
128
|
|
|
120
129
|
// Formula Embed için düzeltme
|
|
121
|
-
const Embed =
|
|
130
|
+
const Embed = _quill.default.import("blots/embed");
|
|
122
131
|
class FormulaEmbed extends Embed {
|
|
123
132
|
static create(value) {
|
|
124
133
|
let node = super.create();
|
|
@@ -141,7 +150,7 @@ class FormulaEmbed extends Embed {
|
|
|
141
150
|
FormulaEmbed.blotName = "formula";
|
|
142
151
|
FormulaEmbed.tagName = "SPAN";
|
|
143
152
|
FormulaEmbed.className = "ql-formula";
|
|
144
|
-
|
|
153
|
+
_quill.default.register("formats/formula", FormulaEmbed);
|
|
145
154
|
function MyEditor({
|
|
146
155
|
value,
|
|
147
156
|
onChange,
|
|
@@ -149,23 +158,23 @@ function MyEditor({
|
|
|
149
158
|
height: "300px"
|
|
150
159
|
}
|
|
151
160
|
}) {
|
|
152
|
-
const [editorValue, setEditorValue] = useState("");
|
|
153
|
-
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
154
|
-
const editorRef = useRef(null);
|
|
155
|
-
const timeoutRef = useRef(null);
|
|
156
|
-
const isFirstRender = useRef(true);
|
|
161
|
+
const [editorValue, setEditorValue] = (0, _react.useState)("");
|
|
162
|
+
const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
|
|
163
|
+
const editorRef = (0, _react.useRef)(null);
|
|
164
|
+
const timeoutRef = (0, _react.useRef)(null);
|
|
165
|
+
const isFirstRender = (0, _react.useRef)(true);
|
|
157
166
|
const handleFullscreen = () => {
|
|
158
167
|
setIsFullscreen(!isFullscreen);
|
|
159
168
|
};
|
|
160
169
|
|
|
161
170
|
// Custom buton tanımı
|
|
162
|
-
useEffect(() => {
|
|
163
|
-
const icons =
|
|
171
|
+
(0, _react.useEffect)(() => {
|
|
172
|
+
const icons = _quill.default.import('ui/icons');
|
|
164
173
|
icons['fullscreen'] = `<svg viewbox="0 0 18 18">
|
|
165
174
|
<path d="M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"/>
|
|
166
175
|
</svg>`;
|
|
167
176
|
}, []);
|
|
168
|
-
useEffect(() => {
|
|
177
|
+
(0, _react.useEffect)(() => {
|
|
169
178
|
if (isFirstRender.current) {
|
|
170
179
|
isFirstRender.current = false;
|
|
171
180
|
setEditorValue(value || "");
|
|
@@ -258,35 +267,40 @@ function MyEditor({
|
|
|
258
267
|
pickerLabel.innerText = fonts[0].label; // Varsayılan font ismi
|
|
259
268
|
}
|
|
260
269
|
}
|
|
261
|
-
return /*#__PURE__*/
|
|
262
|
-
className: 'myEditorContainer ' + (isFullscreen ? 'fullscreen' : '')
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
270
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
271
|
+
className: 'myEditorContainer ' + (isFullscreen ? 'fullscreen' : ''),
|
|
272
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
273
|
+
className: "myEditorContainerContent",
|
|
274
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
275
|
+
onClick: handleFullscreen,
|
|
276
|
+
className: "myEditorContainerFullscreenButton",
|
|
277
|
+
title: isFullscreen ? "Minimize" : "Maximize",
|
|
278
|
+
children: isFullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
|
|
279
|
+
viewBox: "0 0 18 18",
|
|
280
|
+
width: "18",
|
|
281
|
+
height: "18",
|
|
282
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
283
|
+
d: "M4,4h2v6H0V8h4V4z M14,4v4h4v2h-6V4H14z M6,14H4v-4H0v-2h6V14z M14,14h-2v-6h6v2h-4V14z"
|
|
284
|
+
})
|
|
285
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
|
|
286
|
+
viewBox: "0 0 18 18",
|
|
287
|
+
width: "18",
|
|
288
|
+
height: "18",
|
|
289
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
290
|
+
d: "M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"
|
|
291
|
+
})
|
|
292
|
+
})
|
|
293
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
|
|
294
|
+
ref: editorRef,
|
|
295
|
+
theme: "snow",
|
|
296
|
+
value: editorValue,
|
|
297
|
+
onChange: handleChange,
|
|
298
|
+
modules: modules,
|
|
299
|
+
formats: formats,
|
|
300
|
+
style: style,
|
|
301
|
+
preserveWhitespace: true
|
|
302
|
+
})]
|
|
303
|
+
})
|
|
304
|
+
});
|
|
291
305
|
}
|
|
292
|
-
|
|
306
|
+
var _default = exports.default = MyEditor;
|