@antscorp/antsomi-ui 1.3.3-beta.34 → 1.3.3-beta.35

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 // Libraries
 import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, } from 'react';
 import classnames from 'classnames';
@@ -11,53 +22,54 @@ import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/
 import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, } from './utils';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
-const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
-const defaultProps = {
+var PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
+var defaultProps = {
     value: '',
     isViewMode: false,
     errors: [],
     canMultipleLine: false,
-    onError: () => { },
-    onChange: () => { },
-    addMessageToQueue: () => { },
+    onError: function () { },
+    onChange: function () { },
+    addMessageToQueue: function () { },
 };
-export const InputDynamic = (props) => {
-    const { value, isViewMode, errors, disabledOpts, canMultipleLine, onError, onChange, addMessageToQueue, } = props;
+export var InputDynamic = function (props) {
+    var value = props.value, isViewMode = props.isViewMode, errors = props.errors, disabledOpts = props.disabledOpts, canMultipleLine = props.canMultipleLine, onError = props.onError, onChange = props.onChange, addMessageToQueue = props.addMessageToQueue;
     // States
-    const [textValue, setTextValue] = useState(initialValue(value));
-    const [initSelectedProperties, setInitSelectedProperties] = useState({
+    var _a = useState(initialValue(value)), textValue = _a[0], setTextValue = _a[1];
+    var _b = useState({
         keyTag: 'shortlink_static',
         link: '',
         urlDetected: '',
-    });
-    const [popoverOpenShortLink, setPopoverOpenShortLink] = useState(false);
-    const [tooltipHoverDebounce, _tooltipHover, setTooltipHover] = useDebounce({ x: 0, y: 0 }, 200);
+    }), initSelectedProperties = _b[0], setInitSelectedProperties = _b[1];
+    var _c = useState(false), popoverOpenShortLink = _c[0], setPopoverOpenShortLink = _c[1];
+    var _d = useDebounce({ x: 0, y: 0 }, 200), tooltipHoverDebounce = _d[0], _tooltipHover = _d[1], setTooltipHover = _d[2];
     // Refs
-    const caretPositionRef = useRef(null);
-    const personalizationInputRef = useRef(null);
-    const onTriggerChange = (event = null) => {
+    var caretPositionRef = useRef(null);
+    var personalizationInputRef = useRef(null);
+    var onTriggerChange = function (event) {
         var _a;
+        if (event === void 0) { event = null; }
         try {
-            let tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
+            var tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
             if (event !== null) {
                 caretPositionRef.current = CaretPositioning.saveSelection(event.currentTarget);
                 tmp = event.currentTarget.innerHTML;
             }
             tmp = tmp === null || tmp === void 0 ? void 0 : tmp.replace(
             // replace old non tracking url to detect url
-            /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, match => {
-                const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)/);
+            /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, function (match) {
+                var url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)/);
                 if (url) {
-                    return `<span id="${random(5)}" class="detect-url">${url[1]}</span>`;
+                    return "<span id=\"".concat(random(5), "\" class=\"detect-url\">").concat(url[1], "</span>");
                 }
                 return match; // If no match found, return the original string
             }).replace(
             // replace url to detect url
-            /((?<!class="detect-url">|#{shortlink(?:_static)?\(|<span style="line-height: 20px;margin-right: 8px;pointer-events:none;">)\bhttps*:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)/g, match => `<span id="${random(5)}" class="detect-url">${match}</span>`);
+            /((?<!class="detect-url">|#{shortlink(?:_static)?\(|<span style="line-height: 20px;margin-right: 8px;pointer-events:none;">)\bhttps*:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)/g, function (match) { return "<span id=\"".concat(random(5), "\" class=\"detect-url\">").concat(match, "</span>"); });
             tmp = convertDivToBreakTag(tmp);
             setTextValue(tmp);
-            const text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
-            const textConverted = convertBreakTag(text);
+            var text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
+            var textConverted = convertBreakTag(text);
             onChange(removeHtmlTag(textConverted));
         }
         catch (error) {
@@ -72,22 +84,22 @@ export const InputDynamic = (props) => {
             console.error(error);
         }
     };
-    const callback = (type, data) => {
+    var callback = function (type, data) {
         var _a, _b;
         switch (type) {
             case 'REPLACE_DETECTED_URL': {
-                const innerHTML = getObjectPropSafely(() => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
+                var innerHTML = getObjectPropSafely(function () { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
                 if (innerHTML) {
                     // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
-                    const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
-                    const range = document.createRange(); // Tạo một đối tượng Range
-                    const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
+                    var index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex(function (element) { return element.id === data.id; });
+                    var range = document.createRange(); // Tạo một đối tượng Range
+                    var sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
                     range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
                     range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
                     sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
                     sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
                     caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
+                    var newDataUpdate = innerHTML.replace(data.outerHTML, '');
                     personalizationInputRef.current.innerHTML = newDataUpdate;
                 }
                 break;
@@ -96,17 +108,17 @@ export const InputDynamic = (props) => {
                 break;
         }
     };
-    const onPaste = (e) => {
+    var onPaste = function (e) {
         // cancel paste
         e.preventDefault();
         // get text representation of clipboard
-        const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+        var text = (e.originalEvent || e).clipboardData.getData('text/plain');
         // insert text manually
         document.execCommand('insertHTML', false, text);
     };
-    const handleInsertSortLink = (url, type) => {
+    var handleInsertSortLink = function (url, type) {
         try {
-            const { id, value: linkValue, label: linkLabel } = genShortLinkValue(url, type);
+            var _a = genShortLinkValue(url, type), id = _a.id, linkValue = _a.value, linkLabel = _a.label;
             setPopoverOpenShortLink(false);
             if (personalizationInputRef.current instanceof HTMLElement) {
                 CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
@@ -126,21 +138,21 @@ export const InputDynamic = (props) => {
             }
         }
     };
-    const handleKeyPress = (e) => {
+    var handleKeyPress = function (e) {
         if (canMultipleLine)
             return;
         if (+e.charCode === 13) {
             e.preventDefault();
         }
     };
-    const getDangerouslySetInnerHTML = (text) => {
+    var getDangerouslySetInnerHTML = function (text) {
         if (text) {
-            const regex = /<[^<>]+>/g;
-            let tag;
+            var regex = /<[^<>]+>/g;
+            var tag = void 0;
             // eslint-disable-next-line no-cond-assign
             while ((tag = regex.exec(text))) {
                 if (!validateHTMLTags.isValidTag(tag[0])) {
-                    const finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
+                    var finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
                     text = text.replace(tag[0], finalTag);
                 }
             }
@@ -152,22 +164,22 @@ export const InputDynamic = (props) => {
         }
         return '';
     };
-    const toggleShortLinkModal = useCallback(() => {
+    var toggleShortLinkModal = useCallback(function () {
         setPopoverOpenShortLink(!popoverOpenShortLink);
     }, [popoverOpenShortLink]);
     /**
      * [NOTE:open shortlink modal to edit]
      */
-    useEffect(() => {
-        const handleClickTag = (e) => {
+    useEffect(function () {
+        var handleClickTag = function (e) {
             try {
                 e.stopPropagation();
                 if (e.target) {
-                    const { value = '' } = e.target;
-                    const shortLink = value.replace(/#|{|}|/g, '').split('(');
-                    if (shortLink && shortLink.length >= 2) {
-                        const link = shortLink[1].substring(0, shortLink[1].length - 1) || '';
-                        setInitSelectedProperties(prev => (Object.assign(Object.assign({}, prev), { link, keyTag: shortLink[0], urlDetected: e.currentTarget })));
+                    var _a = e.target.value, value_1 = _a === void 0 ? '' : _a;
+                    var shortLink_1 = value_1.replace(/#|{|}|/g, '').split('(');
+                    if (shortLink_1 && shortLink_1.length >= 2) {
+                        var link_1 = shortLink_1[1].substring(0, shortLink_1[1].length - 1) || '';
+                        setInitSelectedProperties(function (prev) { return (__assign(__assign({}, prev), { link: link_1, keyTag: shortLink_1[0], urlDetected: e.currentTarget })); });
                         toggleShortLinkModal();
                     }
                 }
@@ -177,75 +189,77 @@ export const InputDynamic = (props) => {
                 console.log('err', err);
             }
         };
-        const listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
+        var listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
         if (listTags && listTags.length > 0) {
-            listTags.forEach((tag) => {
+            listTags.forEach(function (tag) {
                 tag.addEventListener('click', handleClickTag);
             });
         }
-        return () => {
-            listTags.forEach((tag) => {
+        return function () {
+            listTags.forEach(function (tag) {
                 tag.removeEventListener('click', handleClickTag);
             });
         };
     }, [textValue, toggleShortLinkModal]);
     /** Anchor tooltip */
-    useEffect(() => {
-        let listElement = [];
-        const handleMouseOver = (e, targetRect) => {
+    useEffect(function () {
+        var listElement = [];
+        var handleMouseOver = function (e, targetRect) {
             e === null || e === void 0 ? void 0 : e.stopPropagation();
-            const viewportTop = window.pageYOffset;
-            const viewportLeft = window.pageXOffset;
-            const offsetWidth = targetRect.width / 2;
-            const offsetHeight = targetRect.height / 2;
-            const tooltipHeight = 16;
-            const x = targetRect.left - viewportLeft + offsetWidth;
-            const y = targetRect.top - viewportTop - offsetHeight - tooltipHeight;
+            var viewportTop = window.pageYOffset;
+            var viewportLeft = window.pageXOffset;
+            var offsetWidth = targetRect.width / 2;
+            var offsetHeight = targetRect.height / 2;
+            var tooltipHeight = 16;
+            var x = targetRect.left - viewportLeft + offsetWidth;
+            var y = targetRect.top - viewportTop - offsetHeight - tooltipHeight;
             setTooltipHover({
-                x,
-                y,
+                x: x,
+                y: y,
             });
         };
-        const handleMouseOut = (e) => {
+        var handleMouseOut = function (e) {
             e === null || e === void 0 ? void 0 : e.stopPropagation();
             setTooltipHover({ x: 0, y: 0 });
         };
-        const handleClickDetectUrl = (e) => {
+        var handleClickDetectUrl = function (e) {
             e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setInitSelectedProperties(prev => {
+            setInitSelectedProperties(function (prev) {
                 var _a;
-                return (Object.assign(Object.assign({}, prev), { link: ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.textContent) || '', urlDetected: e === null || e === void 0 ? void 0 : e.currentTarget }));
+                return (__assign(__assign({}, prev), { link: ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.textContent) || '', urlDetected: e === null || e === void 0 ? void 0 : e.currentTarget }));
             });
             toggleShortLinkModal();
         };
         if (!isViewMode) {
-            const elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
+            var elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
             listElement = Array.from(elements);
             if (listElement.length) {
-                listElement.forEach((element) => {
-                    element.addEventListener('mouseover', e => handleMouseOver(e, element.getBoundingClientRect()));
+                listElement.forEach(function (element) {
+                    element.addEventListener('mouseover', function (e) {
+                        return handleMouseOver(e, element.getBoundingClientRect());
+                    });
                     element.addEventListener('mouseout', handleMouseOut);
                     /** Open shortlink modal */
                     element.addEventListener('click', handleClickDetectUrl);
                 });
             }
         }
-        return () => {
-            listElement.forEach((element) => {
+        return function () {
+            listElement.forEach(function (element) {
                 element.removeEventListener('mouseover', handleMouseOver);
                 element.removeEventListener('mouseout', handleMouseOut);
             });
         };
     }, [textValue, isViewMode, setTooltipHover, toggleShortLinkModal]);
     /** Style & remove for tag shortlink button & icon remove */
-    useLayoutEffect(() => {
+    useLayoutEffect(function () {
         // get button Els [x] to create hover and style it
-        const iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
-        const listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
+        var iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
+        var listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
         // get button elements
-        const buttonElement = document.querySelectorAll('.insert-word');
-        const listBtnElement = buttonElement && Array.from(buttonElement);
-        const handleRemoveTag = (e) => {
+        var buttonElement = document.querySelectorAll('.insert-word');
+        var listBtnElement = buttonElement && Array.from(buttonElement);
+        var handleRemoveTag = function (e) {
             var _a, _b, _c, _d, _e;
             if (e && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) === 'EM' && ((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === 'editor-icon-remove') {
                 e.stopPropagation();
@@ -253,17 +267,17 @@ export const InputDynamic = (props) => {
                 setTextValue(personalizationInputRef && ((_e = personalizationInputRef.current) === null || _e === void 0 ? void 0 : _e.innerHTML));
             }
         };
-        listIconRemove.forEach(eachIcon => {
+        listIconRemove.forEach(function (eachIcon) {
             eachIcon.addEventListener('click', handleRemoveTag);
         });
         handleUpdateInputPersonalization(listIconRemove, listBtnElement);
-        return () => {
-            listIconRemove.forEach(eachIcon => {
+        return function () {
+            listIconRemove.forEach(function (eachIcon) {
                 eachIcon.removeEventListener('click', handleRemoveTag);
             });
         };
     }, [textValue]);
-    useLayoutEffect(() => {
+    useLayoutEffect(function () {
         try {
             // save caret position
             if (!personalizationInputRef.current) {
@@ -297,12 +311,12 @@ export const InputDynamic = (props) => {
                 'input-wrapper-outter': true,
                 'styles-input-wrapper': !isViewMode,
                 'input-error': (errors === null || errors === void 0 ? void 0 : errors.length) && (errors === null || errors === void 0 ? void 0 : errors.length) > 0,
-            }), style: Object.assign(Object.assign({}, (isViewMode && {
+            }), style: __assign(__assign({}, (isViewMode && {
                 padding: 0,
                 minHeight: 0,
                 fontSize: 12,
                 border: 'none',
-            })), { width: '100%' }), onClick: () => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+            })), { width: '100%' }), onClick: function () { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
             React.createElement("div", { className: "input-personal", style: {
                     display: textValue && textValue !== '<br>' ? 'inline-block' : undefined,
                 }, contentEditable: !isViewMode, onBlur: onTriggerChange, onKeyPress: handleKeyPress, ref: personalizationInputRef, 
@@ -310,7 +324,7 @@ export const InputDynamic = (props) => {
                 dangerouslySetInnerHTML: {
                     __html: getDangerouslySetInnerHTML(textValue),
                 }, onPaste: onPaste }),
-            React.createElement(Icon, { type: "icon-ants-search-2", onClick: e => {
+            React.createElement(Icon, { type: "icon-ants-search-2", onClick: function (e) {
                     e.stopPropagation();
                     toggleShortLinkModal();
                 }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } })),

package/es/components/atoms/InputDynamic/PopupShortLink.js

@@ -10,7 +10,7 @@ import { Radio } from '../Radio';
 import { InputShortLink, InputWrapper } from './styled';
 // Utils
 import { validateURL } from './utils';
-const OPTIONS = [
+var OPTIONS = [
     {
         value: 'individual',
         label: 'Individual',
@@ -20,49 +20,50 @@ const OPTIONS = [
         label: 'General',
     },
 ];
-export const PopupShortLink = props => {
-    const { open, onClose, onOk, disabledOpts, initSelectedProperties, callback } = props;
-    const [state, setState] = useImmer({
+export var PopupShortLink = function (props) {
+    var open = props.open, onClose = props.onClose, onOk = props.onOk, disabledOpts = props.disabledOpts, initSelectedProperties = props.initSelectedProperties, callback = props.callback;
+    var _a = useImmer({
         link: '',
         type: 'individual',
         error: '',
-    });
-    useEffect(() => {
-        let type = 'individual';
+    }), state = _a[0], setState = _a[1];
+    useEffect(function () {
+        var type = 'individual';
         if (initSelectedProperties && initSelectedProperties.keyTag) {
             type = initSelectedProperties.keyTag === 'shortlink' ? 'individual' : 'general';
         }
-        setState(draft => {
+        setState(function (draft) {
             draft.link = initSelectedProperties.link;
             draft.type = type;
         });
     }, [initSelectedProperties, setState]);
-    const handleClose = () => {
-        setState(draft => {
+    var handleClose = function () {
+        setState(function (draft) {
             draft.link = '';
             draft.error = '';
         });
         if (onClose)
             onClose();
     };
-    const handleValidate = ({ urlString = state.link, afterValidate }) => {
-        const isValid = validateURL(urlString);
-        setState(draft => {
+    var handleValidate = function (_a) {
+        var _b = _a.urlString, urlString = _b === void 0 ? state.link : _b, afterValidate = _a.afterValidate;
+        var isValid = validateURL(urlString);
+        setState(function (draft) {
             draft.error = isValid ? '' : 'Invalid URL';
         });
         if (typeof afterValidate === 'function')
             afterValidate(isValid);
     };
-    const handleOnChange = (value) => {
+    var handleOnChange = function (value) {
         if (state.error)
             handleValidate({ urlString: value });
-        setState(draft => {
+        setState(function (draft) {
             draft.link = value;
         });
     };
-    const handleOnOK = () => {
+    var handleOnOK = function () {
         handleValidate({
-            afterValidate: (isValid) => {
+            afterValidate: function (isValid) {
                 if (isValid && onOk) {
                     if (initSelectedProperties.urlDetected) {
                         callback('REPLACE_DETECTED_URL', initSelectedProperties.urlDetected);
@@ -73,8 +74,8 @@ export const PopupShortLink = props => {
             },
         });
     };
-    const onChangeType = (event) => {
-        setState(draft => {
+    var onChangeType = function (event) {
+        setState(function (draft) {
             draft.type = event.target.value;
         });
     };
@@ -86,7 +87,7 @@ export const PopupShortLink = props => {
             React.createElement(Col, { span: 6 },
                 React.createElement("span", { style: { fontSize: 12, color: '#000' } }, "Short link type")),
             React.createElement(Col, { span: 18 },
-                React.createElement(Radio.Group, { onChange: onChangeType, value: state.type }, OPTIONS.map(each => (React.createElement(Radio, { key: each.value, disabled: disabledOpts && disabledOpts[each.value], name: "shortlink-type", value: each.value }, each.label)))))),
+                React.createElement(Radio.Group, { onChange: onChangeType, value: state.type }, OPTIONS.map(function (each) { return (React.createElement(Radio, { key: each.value, disabled: disabledOpts && disabledOpts[each.value], name: "shortlink-type", value: each.value }, each.label)); })))),
         React.createElement(Row, null,
             React.createElement(Col, { span: 24 },
                 React.createElement(InputWrapper, null,