albinasoft-ui-package 1.1.4 → 1.1.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.
Files changed (3) hide show
  1. package/dist/components/CustomRichTextbox.d.ts +3 -10
  2. package/dist/components/CustomRichTextbox.js +80 -42
  3. package/package.json +2 -2
package/dist/components/CustomRichTextbox.d.ts CHANGED
@@ -1,21 +1,14 @@
1
1
  import React from 'react';
2
- import 'react-quill/dist/quill.snow.css';
2
+ import 'quill/dist/quill.snow.css';
3
3
  interface CustomRichTextboxProps {
4
4
  id?: string;
5
5
  name?: string;
6
6
  label: string;
7
7
  value: string;
8
8
  placeholder?: string;
9
- required?: boolean;
10
- errorMessage?: string;
11
- conditionalErrorVisible?: boolean;
12
- conditionalErrorMessage?: string;
13
- description?: string | null;
14
- tooltip?: string;
15
- disabled?: boolean;
16
- style?: React.CSSProperties;
17
- className?: string;
18
9
  onChange: (value: string) => void;
10
+ readOnly?: boolean;
11
+ className?: string;
19
12
  }
20
13
  declare const CustomRichTextbox: React.FC<CustomRichTextboxProps>;
21
14
  export default CustomRichTextbox;
package/dist/components/CustomRichTextbox.js CHANGED
@@ -1,51 +1,89 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
- var react_1 = __importDefault(require("react"));
7
- var react_quill_1 = __importDefault(require("react-quill"));
8
- require("react-quill/dist/quill.snow.css"); // Quill'in varsayılan stil dosyası
9
- var react_bootstrap_1 = require("react-bootstrap");
10
- var fa_1 = require("react-icons/fa");
29
+ var react_1 = __importStar(require("react"));
30
+ var quill_1 = __importDefault(require("quill"));
31
+ require("quill/dist/quill.snow.css");
11
32
  var CustomRichTextbox = function (_a) {
12
- var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, description = _a.description, tooltip = _a.tooltip, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? { border: 'none' } : _e, className = _a.className, onChange = _a.onChange;
13
- var handleChange = function (content) {
14
- onChange(content);
15
- };
16
- var modules = {
17
- toolbar: [
18
- [{ 'align': [] }],
19
- ['bold', 'italic', 'underline', 'strike'],
20
- [{ 'header': [1, 2, 3, false] }],
21
- [{ 'list': 'ordered' }, { 'list': 'bullet' }],
22
- ['clean']
23
- ]
24
- };
25
- var formats = [
26
- 'align', 'bold', 'italic', 'underline', 'strike', 'header', 'list'
27
- ];
33
+ var id = _a.id, label = _a.label, value = _a.value, placeholder = _a.placeholder, onChange = _a.onChange, _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, className = _a.className;
34
+ var editorRef = (0, react_1.useRef)(null);
35
+ var quillRef = (0, react_1.useRef)(null);
36
+ // 1. Quill'i yalnızca bir kez başlat
37
+ (0, react_1.useEffect)(function () {
38
+ if (!editorRef.current)
39
+ return;
40
+ if (quillRef.current)
41
+ return; // eğer zaten başlatıldıysa çık
42
+ quillRef.current = new quill_1.default(editorRef.current, {
43
+ theme: 'snow',
44
+ modules: {
45
+ toolbar: [
46
+ [{ align: [] }],
47
+ ['bold', 'italic', 'underline', 'strike'],
48
+ [{ header: [1, 2, 3, false] }],
49
+ [{ list: 'ordered' }, { list: 'bullet' }],
50
+ ['clean']
51
+ ]
52
+ },
53
+ });
54
+ // Başlangıç içeriğini ayarla
55
+ quillRef.current.clipboard.dangerouslyPasteHTML(value);
56
+ // Değişimi dinle
57
+ var handler = function () {
58
+ var html = editorRef.current.querySelector('.ql-editor').innerHTML;
59
+ onChange(html);
60
+ };
61
+ quillRef.current.on('text-change', handler);
62
+ return function () {
63
+ quillRef.current.off('text-change', handler);
64
+ // Eğer gerekiyorsa editorRef.current!.innerHTML = '' gibi cleanup
65
+ };
66
+ }, []); // sadece mount/unmount
67
+ // 2. readOnly ve placeholder dinamik ayarları
68
+ (0, react_1.useEffect)(function () {
69
+ if (!quillRef.current)
70
+ return;
71
+ quillRef.current.enable(!readOnly);
72
+ if (placeholder !== undefined) {
73
+ quillRef.current.root.dataset.placeholder = placeholder;
74
+ }
75
+ }, [readOnly, placeholder]);
76
+ // 3. value prop'u değişirse içeriği güncelle
77
+ (0, react_1.useEffect)(function () {
78
+ if (!quillRef.current)
79
+ return;
80
+ var current = quillRef.current.root.innerHTML;
81
+ if (value !== current) {
82
+ quillRef.current.clipboard.dangerouslyPasteHTML(value);
83
+ }
84
+ }, [value]);
28
85
  return (react_1.default.createElement("div", { className: className },
29
- react_1.default.createElement("div", { className: "form-group" },
30
- react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
31
- react_1.default.createElement("div", { className: "position-relative" },
32
- tooltip ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) },
33
- react_1.default.createElement("div", null,
34
- react_1.default.createElement(react_quill_1.default, { id: id, value: value, placeholder: placeholder, readOnly: disabled, onChange: handleChange, className: "form-control", style: style, theme: "snow", modules: modules, formats: formats })))) : (react_1.default.createElement(react_quill_1.default, { id: id, value: value, placeholder: placeholder, readOnly: disabled, onChange: handleChange, className: "form-control", style: style, theme: "snow", modules: modules, formats: formats })),
35
- required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
36
- react_1.default.createElement("div", { className: "description-icon" },
37
- react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
38
- react_1.default.createElement("div", { className: "description-text" },
39
- react_1.default.createElement("span", null, errorMessage || 'Bu alan boş bırakılamaz.')))),
40
- conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
41
- react_1.default.createElement("div", { className: "description-icon" },
42
- react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
43
- react_1.default.createElement("div", { className: "description-text" },
44
- react_1.default.createElement("span", null, conditionalErrorMessage)))),
45
- description && (react_1.default.createElement("div", { className: "form-description text-secondary mt-2" },
46
- react_1.default.createElement("div", { className: "description-icon" },
47
- react_1.default.createElement(fa_1.FaInfoCircle, null)),
48
- react_1.default.createElement("div", { className: "description-text" },
49
- react_1.default.createElement("span", null, description))))))));
86
+ react_1.default.createElement("label", { htmlFor: id }, label),
87
+ react_1.default.createElement("div", { id: id, ref: editorRef, style: { minHeight: '150px' } })));
50
88
  };
51
89
  exports.default = CustomRichTextbox;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "albinasoft-ui-package",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
@@ -13,6 +13,7 @@
13
13
  "ag-grid-community": "^33.1.1",
14
14
  "ag-grid-react": "^33.1.1",
15
15
  "date-fns": "^4.1.0",
16
+ "quill": "^2.0.3",
16
17
  "react": "^18.0.0",
17
18
  "react-bootstrap": "^2.10.6",
18
19
  "react-checkbox-tree": "^1.8.0",
@@ -20,7 +21,6 @@
20
21
  "react-dom": "^18.0.0",
21
22
  "react-icons": "^4.12.0",
22
23
  "react-input-mask": "^2.0.4",
23
- "react-quill": "^2.0.0",
24
24
  "react-router-dom": "^7.1.1",
25
25
  "react-toastify": "^10.0.6"
26
26
  },