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

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

@@ -1,14 +1,3 @@
-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';
@@ -22,54 +11,53 @@ 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';
-var PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
-var defaultProps = {
+const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
+const defaultProps = {
     value: '',
     isViewMode: false,
     errors: [],
     canMultipleLine: false,
-    onError: function () { },
-    onChange: function () { },
-    addMessageToQueue: function () { },
+    onError: () => { },
+    onChange: () => { },
+    addMessageToQueue: () => { },
 };
-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;
+export const InputDynamic = (props) => {
+    const { value, isViewMode, errors, disabledOpts, canMultipleLine, onError, onChange, addMessageToQueue, } = props;
     // States
-    var _a = useState(initialValue(value)), textValue = _a[0], setTextValue = _a[1];
-    var _b = useState({
+    const [textValue, setTextValue] = useState(initialValue(value));
+    const [initSelectedProperties, setInitSelectedProperties] = useState({
         keyTag: 'shortlink_static',
         link: '',
         urlDetected: '',
-    }), 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];
+    });
+    const [popoverOpenShortLink, setPopoverOpenShortLink] = useState(false);
+    const [tooltipHoverDebounce, _tooltipHover, setTooltipHover] = useDebounce({ x: 0, y: 0 }, 200);
     // Refs
-    var caretPositionRef = useRef(null);
-    var personalizationInputRef = useRef(null);
-    var onTriggerChange = function (event) {
+    const caretPositionRef = useRef(null);
+    const personalizationInputRef = useRef(null);
+    const onTriggerChange = (event = null) => {
         var _a;
-        if (event === void 0) { event = null; }
         try {
-            var tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
+            let 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, function (match) {
-                var url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)/);
+            /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, match => {
+                const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)/);
                 if (url) {
-                    return "<span id=\"".concat(random(5), "\" class=\"detect-url\">").concat(url[1], "</span>");
+                    return `<span id="${random(5)}" class="detect-url">${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, function (match) { return "<span id=\"".concat(random(5), "\" class=\"detect-url\">").concat(match, "</span>"); });
+            /((?<!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>`);
             tmp = convertDivToBreakTag(tmp);
             setTextValue(tmp);
-            var text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
-            var textConverted = convertBreakTag(text);
+            const text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
+            const textConverted = convertBreakTag(text);
             onChange(removeHtmlTag(textConverted));
         }
         catch (error) {
@@ -84,22 +72,22 @@ export var InputDynamic = function (props) {
             console.error(error);
         }
     };
-    var callback = function (type, data) {
+    const callback = (type, data) => {
         var _a, _b;
         switch (type) {
             case 'REPLACE_DETECTED_URL': {
-                var innerHTML = getObjectPropSafely(function () { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
+                const innerHTML = getObjectPropSafely(() => { 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.
-                    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
+                    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
                     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);
-                    var newDataUpdate = innerHTML.replace(data.outerHTML, '');
+                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
                     personalizationInputRef.current.innerHTML = newDataUpdate;
                 }
                 break;
@@ -108,17 +96,17 @@ export var InputDynamic = function (props) {
                 break;
         }
     };
-    var onPaste = function (e) {
+    const onPaste = (e) => {
         // cancel paste
         e.preventDefault();
         // get text representation of clipboard
-        var text = (e.originalEvent || e).clipboardData.getData('text/plain');
+        const text = (e.originalEvent || e).clipboardData.getData('text/plain');
         // insert text manually
         document.execCommand('insertHTML', false, text);
     };
-    var handleInsertSortLink = function (url, type) {
+    const handleInsertSortLink = (url, type) => {
         try {
-            var _a = genShortLinkValue(url, type), id = _a.id, linkValue = _a.value, linkLabel = _a.label;
+            const { id, value: linkValue, label: linkLabel } = genShortLinkValue(url, type);
             setPopoverOpenShortLink(false);
             if (personalizationInputRef.current instanceof HTMLElement) {
                 CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
@@ -138,21 +126,21 @@ export var InputDynamic = function (props) {
             }
         }
     };
-    var handleKeyPress = function (e) {
+    const handleKeyPress = (e) => {
         if (canMultipleLine)
             return;
         if (+e.charCode === 13) {
             e.preventDefault();
         }
     };
-    var getDangerouslySetInnerHTML = function (text) {
+    const getDangerouslySetInnerHTML = (text) => {
         if (text) {
-            var regex = /<[^<>]+>/g;
-            var tag = void 0;
+            const regex = /<[^<>]+>/g;
+            let tag;
             // eslint-disable-next-line no-cond-assign
             while ((tag = regex.exec(text))) {
                 if (!validateHTMLTags.isValidTag(tag[0])) {
-                    var finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
+                    const finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
                     text = text.replace(tag[0], finalTag);
                 }
             }
@@ -164,22 +152,22 @@ export var InputDynamic = function (props) {
         }
         return '';
     };
-    var toggleShortLinkModal = useCallback(function () {
+    const toggleShortLinkModal = useCallback(() => {
         setPopoverOpenShortLink(!popoverOpenShortLink);
     }, [popoverOpenShortLink]);
     /**
      * [NOTE:open shortlink modal to edit]
      */
-    useEffect(function () {
-        var handleClickTag = function (e) {
+    useEffect(() => {
+        const handleClickTag = (e) => {
             try {
                 e.stopPropagation();
                 if (e.target) {
-                    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 })); });
+                    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 })));
                         toggleShortLinkModal();
                     }
                 }
@@ -189,77 +177,75 @@ export var InputDynamic = function (props) {
                 console.log('err', err);
             }
         };
-        var listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
+        const listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
         if (listTags && listTags.length > 0) {
-            listTags.forEach(function (tag) {
+            listTags.forEach((tag) => {
                 tag.addEventListener('click', handleClickTag);
             });
         }
-        return function () {
-            listTags.forEach(function (tag) {
+        return () => {
+            listTags.forEach((tag) => {
                 tag.removeEventListener('click', handleClickTag);
             });
         };
     }, [textValue, toggleShortLinkModal]);
     /** Anchor tooltip */
-    useEffect(function () {
-        var listElement = [];
-        var handleMouseOver = function (e, targetRect) {
+    useEffect(() => {
+        let listElement = [];
+        const handleMouseOver = (e, targetRect) => {
             e === null || e === void 0 ? void 0 : e.stopPropagation();
-            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;
+            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;
             setTooltipHover({
-                x: x,
-                y: y,
+                x,
+                y,
             });
         };
-        var handleMouseOut = function (e) {
+        const handleMouseOut = (e) => {
             e === null || e === void 0 ? void 0 : e.stopPropagation();
             setTooltipHover({ x: 0, y: 0 });
         };
-        var handleClickDetectUrl = function (e) {
+        const handleClickDetectUrl = (e) => {
             e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setInitSelectedProperties(function (prev) {
+            setInitSelectedProperties(prev => {
                 var _a;
-                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 }));
+                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 }));
             });
             toggleShortLinkModal();
         };
         if (!isViewMode) {
-            var elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
+            const elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
             listElement = Array.from(elements);
             if (listElement.length) {
-                listElement.forEach(function (element) {
-                    element.addEventListener('mouseover', function (e) {
-                        return handleMouseOver(e, element.getBoundingClientRect());
-                    });
+                listElement.forEach((element) => {
+                    element.addEventListener('mouseover', e => handleMouseOver(e, element.getBoundingClientRect()));
                     element.addEventListener('mouseout', handleMouseOut);
                     /** Open shortlink modal */
                     element.addEventListener('click', handleClickDetectUrl);
                 });
             }
         }
-        return function () {
-            listElement.forEach(function (element) {
+        return () => {
+            listElement.forEach((element) => {
                 element.removeEventListener('mouseover', handleMouseOver);
                 element.removeEventListener('mouseout', handleMouseOut);
             });
         };
     }, [textValue, isViewMode, setTooltipHover, toggleShortLinkModal]);
     /** Style & remove for tag shortlink button & icon remove */
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
         // get button Els [x] to create hover and style it
-        var iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
-        var listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
+        const iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
+        const listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
         // get button elements
-        var buttonElement = document.querySelectorAll('.insert-word');
-        var listBtnElement = buttonElement && Array.from(buttonElement);
-        var handleRemoveTag = function (e) {
+        const buttonElement = document.querySelectorAll('.insert-word');
+        const listBtnElement = buttonElement && Array.from(buttonElement);
+        const handleRemoveTag = (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();
@@ -267,17 +253,17 @@ export var InputDynamic = function (props) {
                 setTextValue(personalizationInputRef && ((_e = personalizationInputRef.current) === null || _e === void 0 ? void 0 : _e.innerHTML));
             }
         };
-        listIconRemove.forEach(function (eachIcon) {
+        listIconRemove.forEach(eachIcon => {
             eachIcon.addEventListener('click', handleRemoveTag);
         });
         handleUpdateInputPersonalization(listIconRemove, listBtnElement);
-        return function () {
-            listIconRemove.forEach(function (eachIcon) {
+        return () => {
+            listIconRemove.forEach(eachIcon => {
                 eachIcon.removeEventListener('click', handleRemoveTag);
             });
         };
     }, [textValue]);
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
         try {
             // save caret position
             if (!personalizationInputRef.current) {
@@ -311,12 +297,12 @@ export var InputDynamic = function (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: __assign(__assign({}, (isViewMode && {
+            }), style: Object.assign(Object.assign({}, (isViewMode && {
                 padding: 0,
                 minHeight: 0,
                 fontSize: 12,
                 border: 'none',
-            })), { width: '100%' }), onClick: function () { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+            })), { width: '100%' }), onClick: () => { 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, 
@@ -324,7 +310,7 @@ export var InputDynamic = function (props) {
                 dangerouslySetInnerHTML: {
                     __html: getDangerouslySetInnerHTML(textValue),
                 }, onPaste: onPaste }),
-            React.createElement(Icon, { type: "icon-ants-search-2", onClick: function (e) {
+            React.createElement(Icon, { type: "icon-ants-search-2", onClick: 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';
-var OPTIONS = [
+const OPTIONS = [
     {
         value: 'individual',
         label: 'Individual',
@@ -20,50 +20,49 @@ var OPTIONS = [
         label: 'General',
     },
 ];
-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({
+export const PopupShortLink = props => {
+    const { open, onClose, onOk, disabledOpts, initSelectedProperties, callback } = props;
+    const [state, setState] = useImmer({
         link: '',
         type: 'individual',
         error: '',
-    }), state = _a[0], setState = _a[1];
-    useEffect(function () {
-        var type = 'individual';
+    });
+    useEffect(() => {
+        let type = 'individual';
         if (initSelectedProperties && initSelectedProperties.keyTag) {
             type = initSelectedProperties.keyTag === 'shortlink' ? 'individual' : 'general';
         }
-        setState(function (draft) {
+        setState(draft => {
             draft.link = initSelectedProperties.link;
             draft.type = type;
         });
     }, [initSelectedProperties, setState]);
-    var handleClose = function () {
-        setState(function (draft) {
+    const handleClose = () => {
+        setState(draft => {
             draft.link = '';
             draft.error = '';
         });
         if (onClose)
             onClose();
     };
-    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) {
+    const handleValidate = ({ urlString = state.link, afterValidate }) => {
+        const isValid = validateURL(urlString);
+        setState(draft => {
             draft.error = isValid ? '' : 'Invalid URL';
         });
         if (typeof afterValidate === 'function')
             afterValidate(isValid);
     };
-    var handleOnChange = function (value) {
+    const handleOnChange = (value) => {
         if (state.error)
             handleValidate({ urlString: value });
-        setState(function (draft) {
+        setState(draft => {
             draft.link = value;
         });
     };
-    var handleOnOK = function () {
+    const handleOnOK = () => {
         handleValidate({
-            afterValidate: function (isValid) {
+            afterValidate: (isValid) => {
                 if (isValid && onOk) {
                     if (initSelectedProperties.urlDetected) {
                         callback('REPLACE_DETECTED_URL', initSelectedProperties.urlDetected);
@@ -74,8 +73,8 @@ export var PopupShortLink = function (props) {
             },
         });
     };
-    var onChangeType = function (event) {
-        setState(function (draft) {
+    const onChangeType = (event) => {
+        setState(draft => {
             draft.type = event.target.value;
         });
     };
@@ -87,7 +86,7 @@ export var PopupShortLink = function (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(function (each) { return (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(each => (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,

package/es/components/atoms/InputDynamic/styled.d.ts

@@ -4,7 +4,7 @@ export declare const SpanIcon: import("styled-components").StyledComponent<"span
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;