@xaypay/tui 0.2.21 → 0.2.22

package/dist/index.es.js

@@ -1837,9 +1837,11 @@ const File = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const inpRef = useRef(null);
   const labelRef = useRef(null);
+  const parentlRef = useRef(null);
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [classProps, setClassProps] = useState({});
   const [singleFile, setSingleFile] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
@@ -2074,14 +2076,10 @@ const File = /*#__PURE__*/forwardRef(({
     }
   };
   const handleClick = () => {
-    inpRef.current.files = null;
-    inpRef.current.value = null;
-    if (multiple) {
+    if (!image && !singleFile) {
+      inpRef.current.files = null;
+      inpRef.current.value = null;
       inpRef.current.click();
-    } else {
-      if (!image) {
-        inpRef.current.click();
-      }
     }
   };
   const handleDrop = e => {
@@ -2117,18 +2115,21 @@ const File = /*#__PURE__*/forwardRef(({
     return width;
   };
   const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
     if (labelRef.current) {
+      const parentElem = parentlRef.current.getBoundingClientRect();
       const rect = labelRef.current.getBoundingClientRect();
       const top = rect.top;
       const left = rect.left;
       const height = rect.height;
       const elementWidth = rect.width;
       const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
       const textWidth = getRenderedTextWidth(labelRef.current);
-      console.log(textWidth, ' - - - - textWidth');
-      console.log(elementWidth, ' - - - - elementWidth');
-      if (textWidth > elementWidth) {
+      if (textWidth > Math.ceil(elementWidth)) {
         const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
         const newTootltipTextElem = document.createElement('p');
         const newTooltipChildElem = document.createElement('div');
         const newTooltipDecorElem = document.createElement('div');
@@ -2138,7 +2139,7 @@ const File = /*#__PURE__*/forwardRef(({
         newTooltipElem.style.height = 'fit-content';
         newTooltipElem.style.boxSizing = 'border-box';
         newTooltipElem.style.top = top + height + 'px';
-        newTooltipElem.style.width = elementWidth + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
         newTooltipChildElem.style.width = '100%';
         newTooltipChildElem.style.position = 'relative';
         newTooltipChildElem.style.height = 'fit-content';
@@ -2152,7 +2153,7 @@ const File = /*#__PURE__*/forwardRef(({
         newTooltipDecorElem.style.height = '18px';
         newTooltipDecorElem.style.rotate = '45deg';
         newTooltipDecorElem.style.position = 'absolute';
-        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 30px)' : '13px';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
         newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
         newTootltipTextElem.innerText = label;
         newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.FILE.label.tooltip.color;
@@ -2169,9 +2170,14 @@ const File = /*#__PURE__*/forwardRef(({
     }
   };
   const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
     if (tooltipElem) {
       document.body.removeChild(tooltipElem);
     }
+    setRemoveID(() => '');
   };
   useImperativeHandle(ref, () => ({
     handleReset() {
@@ -2246,6 +2252,7 @@ const File = /*#__PURE__*/forwardRef(({
     };
   }, []);
   return configStyles.FILE && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentlRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth

package/dist/index.js

@@ -1868,9 +1868,11 @@ const File = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const inpRef = React.useRef(null);
   const labelRef = React.useRef(null);
+  const parentlRef = React.useRef(null);
   const memoizedItems = React.useMemo(() => filesArray, [filesArray]);
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
+  const [removeID, setRemoveID] = React.useState('');
   const [classProps, setClassProps] = React.useState({});
   const [singleFile, setSingleFile] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
@@ -2105,14 +2107,10 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleClick = () => {
-    inpRef.current.files = null;
-    inpRef.current.value = null;
-    if (multiple) {
+    if (!image && !singleFile) {
+      inpRef.current.files = null;
+      inpRef.current.value = null;
       inpRef.current.click();
-    } else {
-      if (!image) {
-        inpRef.current.click();
-      }
     }
   };
   const handleDrop = e => {
@@ -2148,18 +2146,21 @@ const File = /*#__PURE__*/React.forwardRef(({
     return width;
   };
   const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
     if (labelRef.current) {
+      const parentElem = parentlRef.current.getBoundingClientRect();
       const rect = labelRef.current.getBoundingClientRect();
       const top = rect.top;
       const left = rect.left;
       const height = rect.height;
       const elementWidth = rect.width;
       const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
       const textWidth = getRenderedTextWidth(labelRef.current);
-      console.log(textWidth, ' - - - - textWidth');
-      console.log(elementWidth, ' - - - - elementWidth');
-      if (textWidth > elementWidth) {
+      if (textWidth > Math.ceil(elementWidth)) {
         const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
         const newTootltipTextElem = document.createElement('p');
         const newTooltipChildElem = document.createElement('div');
         const newTooltipDecorElem = document.createElement('div');
@@ -2169,7 +2170,7 @@ const File = /*#__PURE__*/React.forwardRef(({
         newTooltipElem.style.height = 'fit-content';
         newTooltipElem.style.boxSizing = 'border-box';
         newTooltipElem.style.top = top + height + 'px';
-        newTooltipElem.style.width = elementWidth + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
         newTooltipChildElem.style.width = '100%';
         newTooltipChildElem.style.position = 'relative';
         newTooltipChildElem.style.height = 'fit-content';
@@ -2183,7 +2184,7 @@ const File = /*#__PURE__*/React.forwardRef(({
         newTooltipDecorElem.style.height = '18px';
         newTooltipDecorElem.style.rotate = '45deg';
         newTooltipDecorElem.style.position = 'absolute';
-        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 30px)' : '13px';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
         newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
         newTootltipTextElem.innerText = label;
         newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.FILE.label.tooltip.color;
@@ -2200,9 +2201,14 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
     if (tooltipElem) {
       document.body.removeChild(tooltipElem);
     }
+    setRemoveID(() => '');
   };
   React.useImperativeHandle(ref, () => ({
     handleReset() {
@@ -2277,6 +2283,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     };
   }, []);
   return configStyles.FILE && /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: parentlRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",