ar-design 0.2.18 → 0.2.19

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/feedback/notification/index.js +23 -34
  2. package/dist/components/form/text-editor/index.js +22 -19
  3. package/package.json +1 -1
package/dist/components/feedback/notification/index.js CHANGED
@@ -5,10 +5,6 @@ import "../../../assets/css/components/feedback/notification/notification.css";
5
5
  const Notification = ({ title, message, status, direction = "bottom-left", trigger }) => {
6
6
  const _firstLoad = useRef(false);
7
7
  const _notificationItems = useRef([]);
8
- const _interval = useRef();
9
- // const _automaticRemoveInterval = useRef<NodeJS.Timeout>();
10
- // const _closedInterval = useRef<NodeJS.Timeout>();
11
- const _i = useRef(0);
12
8
  const [items, setItems] = useState([]);
13
9
  useEffect(() => {
14
10
  if (!_firstLoad.current) {
@@ -32,29 +28,28 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
32
28
  status = "error";
33
29
  }
34
30
  }
35
- setItems((prevItems) => [...prevItems, { id: _i.current++, title, message, status, direction }]);
31
+ setItems((prev) => [...prev, { id: Math.random(), title, message, status, direction }]);
36
32
  }, [trigger]);
37
33
  useEffect(() => {
38
- if (items.length === 0)
39
- return;
40
- // const firstNotification = _notificationItems.current[0];
41
- // _automaticRemoveInterval.current = setTimeout(() => {
42
- // if (firstNotification) firstNotification.classList.add("closed");
43
- // _interval.current = setTimeout(() => {
44
- // setItems((prevItems) => prevItems.slice(1));
45
- // if (firstNotification) firstNotification.classList.remove("closed");
46
- // clearTimeout(_interval.current);
47
- // }, 500);
48
- // clearTimeout(_automaticRemoveInterval.current);
49
- // }, 3000);
50
- _interval.current = setTimeout(() => {
51
- setItems((prevItems) => prevItems.slice(1));
52
- // if (firstNotification) firstNotification.classList.remove("closed");
53
- clearTimeout(_interval.current);
54
- }, 3000);
34
+ let clearTimeoutId = undefined;
35
+ items.forEach((item) => {
36
+ if (!item.timeoutId) {
37
+ const timeoutId = setTimeout(() => {
38
+ clearTimeoutId = item.timeoutId;
39
+ setItems((prev) => prev.filter((_item) => _item.id !== item.id));
40
+ }, 3000);
41
+ // Öncesinde timeoutId değerinin tanımlanması yapılıyor.
42
+ setItems((prev) => prev.map((prevItem) => (prevItem.id === item.id ? { ...prevItem, timeoutId } : prevItem)));
43
+ }
44
+ });
55
45
  return () => {
56
- // clearTimeout(_automaticRemoveInterval.current);
57
- clearTimeout(_interval.current);
46
+ if (items.length === 0)
47
+ return;
48
+ const item = items.find((x) => x.timeoutId == clearTimeoutId);
49
+ if (item) {
50
+ clearTimeout(item.timeoutId);
51
+ clearTimeoutId = undefined;
52
+ }
58
53
  };
59
54
  }, [items]);
60
55
  const getBottomPosition = (index) => {
@@ -63,14 +58,14 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
63
58
  if (_notificationItems.current[index - 1]) {
64
59
  bottom = _notificationItems.current.slice(0, index).reduce((acc, el) => {
65
60
  const rect = el.getBoundingClientRect();
66
- return acc + rect.height + 20; // +20 değeri ara boşluğu artıyor.
61
+ return acc + rect.height + 20; // +20 değeri ara boşluğu arttırıyor.
67
62
  }, 30); // 30px'lik boşluğu başlangıçta ekliyoruz.
68
63
  }
69
64
  return bottom;
70
65
  };
71
66
  return items.map((item, index) => {
72
67
  const bottom = getBottomPosition(index);
73
- return (React.createElement("div", { key: index, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: items.length > 5
68
+ return (React.createElement("div", { key: item.id, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: items.length > 5
74
69
  ? {
75
70
  backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
76
71
  backdropFilter: "blur(10px)",
@@ -87,15 +82,9 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
87
82
  React.createElement("span", { className: "title" }, item.title),
88
83
  React.createElement("span", { className: "message" }, item.message)),
89
84
  React.createElement("div", { className: "close", onClick: () => {
90
- // clearTimeout(_automaticRemoveInterval.current);
91
- clearTimeout(_interval.current);
85
+ if (item.timeoutId)
86
+ clearTimeout(item.timeoutId);
92
87
  setItems((prev) => prev.filter((_item) => _item.id !== item.id));
93
- // if (_notificationItems.current[index]) _notificationItems.current[index]!.classList.add("closed");
94
- // _closedInterval.current = setTimeout(() => {
95
- // setItems((prev) => prev.filter((_item) => _item.id !== item.id));
96
- // if (_notificationItems.current[index]) _notificationItems.current[index]!.classList.remove("closed");
97
- // clearTimeout(_closedInterval.current);
98
- // }, 500);
99
88
  } })));
100
89
  });
101
90
  };
package/dist/components/form/text-editor/index.js CHANGED
@@ -54,45 +54,48 @@ const TextEditor = ({ name, value, onChange, placeholder, height, validation })
54
54
  }
55
55
  };
56
56
  // useEffects
57
- // Iframe Document yüklendikten sonra çalışacaktır. (Bir defa çalışır.)
58
57
  useEffect(() => {
58
+ // Iframe Document yüklendikten sonra çalışacaktır.
59
59
  if (!iframeDocument)
60
60
  return;
61
61
  const selection = iframeDocument.getSelection();
62
62
  let range = null;
63
63
  // Eğer bir seçim (caret) varsa, konumunu kaydet
64
- if (selection && selection.rangeCount > 0) {
64
+ if (selection && selection.rangeCount > 0)
65
65
  range = selection.getRangeAt(0);
66
- }
67
66
  // Eğer içeriği kendimiz değiştirmedikse ve gelen value farklıysa, içeriği güncelle
68
- if (iframeDocument.body.innerHTML !== value) {
67
+ if (iframeDocument.body.innerHTML !== value)
69
68
  iframeDocument.body.innerHTML = value || `<p>${placeholder ?? ""}</p>`;
70
- }
71
69
  // Cursor (caret) konumunu geri yükle
72
70
  if (range) {
73
71
  selection?.removeAllRanges();
74
72
  selection?.addRange(range);
75
73
  }
76
74
  }, [value, iframeDocument]);
77
- // Iframe yüklendikten sonra çalışacaktır.
78
75
  useEffect(() => {
76
+ // Iframe yüklendikten sonra çalışacaktır.
79
77
  if (!iframe)
80
78
  return;
81
79
  const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
82
- if (iframeDocument) {
83
- setIframeDocument(iframeDocument);
84
- iframeDocument.designMode = "on";
85
- // Herhangi bir değişikliği izlemek için MutationObserver kullan
86
- const observer = new MutationObserver((mutationsList) => {
87
- mutationsList.forEach(() => {
88
- iframeDocument.body.innerHTML === "<br>" ? onChange(undefined) : onChange(iframeDocument.body.innerHTML);
89
- });
80
+ if (!iframeDocument)
81
+ return; // 👈 Güvenlik önlemi
82
+ // Herhangi bir değişikliği izlemek için MutationObserver kullan
83
+ const observer = new MutationObserver((mutationsList) => {
84
+ mutationsList.forEach(() => {
85
+ iframeDocument?.body.innerHTML === "<br>" ? onChange(undefined) : onChange(iframeDocument.body.innerHTML);
90
86
  });
91
- // Observer'ı body üzerinde başlat
92
- observer.observe(iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
93
- iframeDocument.body.addEventListener("focus", handleFocus);
94
- iframeDocument.body.addEventListener("blur", handleBlur);
95
- }
87
+ });
88
+ setIframeDocument(iframeDocument);
89
+ iframeDocument.designMode = "on";
90
+ // Observer'ı body üzerinde başlat
91
+ observer.observe(iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
92
+ iframeDocument.body.addEventListener("focus", handleFocus);
93
+ iframeDocument.body.addEventListener("blur", handleBlur);
94
+ return () => {
95
+ observer.disconnect();
96
+ iframeDocument?.body.removeEventListener("focus", handleFocus);
97
+ iframeDocument?.body.removeEventListener("blur", handleBlur);
98
+ };
96
99
  }, [iframe]);
97
100
  useEffect(() => {
98
101
  if (!_arIframe.current)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.2.18",
3
+ "version": "0.2.19",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",