@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/molecules/QuillEditor/EditorToolbar.d.ts

@@ -0,0 +1,26 @@
+interface QuillEditor {
+    quill: any;
+}
+declare function undoChange(this: QuillEditor): void;
+declare function redoChange(this: QuillEditor): void;
+export declare const modules: (id: any) => {
+    toolbar: {
+        container: string;
+        handlers: {
+            undo: typeof undoChange;
+            redo: typeof redoChange;
+        };
+    };
+    history: {
+        delay: number;
+        maxStack: number;
+        userOnly: boolean;
+    };
+};
+export declare const formats: string[];
+export declare const QuillToolbar: ({ id, isRoundCorner, borderColor }: {
+    id: any;
+    isRoundCorner?: boolean | undefined;
+    borderColor: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default QuillToolbar;

package/es/components/molecules/QuillEditor/EditorToolbar.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Quill from 'quill';
+import styled from 'styled-components';
+const CustomUndo = () => (_jsxs("svg", { viewBox: "0 0 18 18", children: [_jsx("polygon", { className: "ql-fill ql-stroke", points: "6 10 4 12 2 10 6 10" }), _jsx("path", { className: "ql-stroke", d: "M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9" })] }));
+const CustomRedo = () => (_jsxs("svg", { viewBox: "0 0 18 18", children: [_jsx("polygon", { className: "ql-fill ql-stroke", points: "12 10 14 12 16 10 12 10" }), _jsx("path", { className: "ql-stroke", d: "M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5" })] }));
+function undoChange() {
+    this.quill.history.undo();
+}
+function redoChange() {
+    this.quill.history.redo();
+}
+// const Size: any = Quill.import('formats/size');
+// Size.whitelist = ['small', 'medium', 'large']; // 'extra-small',
+// Quill.register(Size, true);
+const SizeStyle = Quill.import('attributors/style/size');
+SizeStyle.whitelist = [
+    '12px',
+    '14px',
+    '16px',
+    '18px',
+    '20px',
+    '22px',
+    '24px',
+    '26px',
+    '28px',
+    '30px',
+];
+Quill.register(SizeStyle, true);
+// const icons: any = Quill.import('ui/icons');
+// icons.link = `<svg width="24" height="24" focusable="false">
+//                   <path
+//                     d="M6.2 12.3a1 1 0 011.4 1.4l-2.1 2a2 2 0 102.7 2.8l4.8-4.8a1 1 0 000-1.4 1 1 0 111.4-1.3 2.9 2.9 0 010 4L9.6 20a3.9 3.9 0 01-5.5-5.5l2-2zm11.6-.6a1 1 0 01-1.4-1.4l2-2a2 2 0 10-2.6-2.8L11 10.3a1 1 0 000 1.4A1 1 0 119.6 13a2.9 2.9 0 010-4L14.4 4a3.9 3.9 0 015.5 5.5l-2 2z"
+//                     fillRule="nonzero"
+//                   />
+//                 </svg>`;
+// const Font: any = Quill.import('formats/font');
+// Font.whitelist = ['arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida'];
+// Quill.register(Font, true);
+export const modules = id => ({
+    toolbar: {
+        container: `#${id}`,
+        handlers: {
+            undo: undoChange,
+            redo: redoChange,
+        },
+    },
+    history: {
+        delay: 500,
+        maxStack: 100,
+        userOnly: true,
+    },
+});
+export const formats = [
+    'header',
+    'font',
+    'size',
+    'bold',
+    'italic',
+    'underline',
+    'align',
+    'strike',
+    'script',
+    'blockquote',
+    'background',
+    'list',
+    // 'bullet',
+    'indent',
+    'link',
+    'image',
+    'color',
+    'code-block',
+];
+const ToolBarWrapper = styled.div `
+  border: 1px solid ${props => props.borderColor} !important;
+  border-bottom: none !important;
+  border-radius: ${props => (props.isRoundCorner ? '10px 10px 0 0' : '0')};
+  * {
+    font-weight: 400;
+  }
+`;
+export const QuillToolbar = ({ id, isRoundCorner = true, borderColor }) => (_jsxs(ToolBarWrapper, { id: id, isRoundCorner: isRoundCorner, borderColor: borderColor, children: [_jsx("span", { className: "ql-formats", children: _jsxs("select", { className: "ql-size", defaultValue: "12px", children: [_jsx("option", { value: "12px", children: "Paragraph" }), _jsx("option", { value: "24px", children: "Heading 1" }), _jsx("option", { value: "18px", children: "Heading 2" }), _jsx("option", { value: "14px", children: "Heading 3" })] }) }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-bold" }), _jsx("button", { className: "ql-italic" }), _jsx("button", { className: "ql-underline" }), _jsx("button", { className: "ql-strike" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-list", value: "ordered" }), _jsx("button", { className: "ql-list", value: "bullet" }), _jsx("button", { className: "ql-indent", value: "-1" }), _jsx("button", { className: "ql-indent", value: "+1" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("select", { className: "ql-align" }), _jsx("select", { className: "ql-color" }), _jsx("select", { className: "ql-background" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-link" }), _jsx("button", { className: "ql-image" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-blockquote" }), _jsx("button", { className: "ql-code-block" }), _jsx("button", { className: "ql-clean" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-undo", children: _jsx(CustomUndo, {}) }), _jsx("button", { className: "ql-redo", children: _jsx(CustomRedo, {}) })] })] }));
+export default QuillToolbar;

package/es/components/molecules/QuillEditor/QuillEditor.d.ts

@@ -0,0 +1,13 @@
+import 'quill/dist/quill.snow.css';
+type TEditorProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder: string;
+    uploadService?: Function;
+    height?: string | number;
+    maxImgHeight?: string;
+    borderColor?: string;
+    isRoundCorner?: boolean;
+};
+export declare const QuillEditor: ({ value, onChange, placeholder, uploadService, height, maxImgHeight, borderColor, isRoundCorner, }: TEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/QuillEditor/QuillEditor.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import Quill from 'quill';
+import { ImageHandler } from 'quill-upload';
+// Hooks
+import debounce from 'lodash/debounce';
+// Components
+import EditorToolbar, { modules, formats } from './EditorToolbar';
+// Styles
+import 'quill/dist/quill.snow.css';
+import styled from 'styled-components';
+Quill.register('modules/imageHandler', ImageHandler);
+const Block = Quill.import('blots/block');
+Block.tagName = 'DIV';
+Quill.register(Block, true);
+// const toolbarOptions = [
+//   ['bold', 'italic', 'underline', 'strike'],
+//   ['blockquote', 'code-block'],
+//   ['link', 'image', 'video', 'formula'],
+//   [{ header: 1 }, { header: 2 }],
+//   [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+//   [{ script: 'sub' }, { script: 'super' }],
+//   [{ indent: '-1' }, { indent: '+1' }],
+//   [{ direction: 'rtl' }],
+//   [{ size: ['small', false, 'large', 'huge'] }],
+//   [{ header: [1, 2, 3, 4, 5, 6, false] }],
+//   [{ color: [] }, { background: [] }],
+//   [{ font: [] }],
+//   [{ align: [] }],
+//   ['clean'],
+// ];
+const EditorWrapper = styled.div `
+  border: 1px solid ${props => props.borderColor} !important;
+
+  .ql-editor.ql-blank::before {
+    font-style: normal !important;
+  }
+
+  .ql-editor a {
+    color: #06c !important;
+  }
+`;
+export const QuillEditor = ({ value, onChange, placeholder = '', uploadService, height = 'auto', maxImgHeight = '300px', borderColor = '#d4d4d4', isRoundCorner, }) => {
+    const editor = useRef(null);
+    const rand = useRef(String(Math.random()).replace(/\./g, ''));
+    const processText = () => {
+        editor.current?.root.querySelectorAll('li').forEach(li => {
+            let max = 0;
+            li.querySelectorAll('[style*="font-size"]').forEach(el => {
+                const fontS = +el.style.fontSize.replace(/\D/g, '');
+                max = fontS > max ? fontS : max;
+            });
+            li.style.fontSize = max ? `${max}px` : 'unset';
+        });
+    };
+    const debounceQuickProcess = debounce(processText, 100);
+    const debounceChange = debounce(onChange, 500);
+    // Upload handler function
+    const _onUpload = async (file, resolve) => {
+        try {
+            const result = await uploadService({ files: [file], mode: 'file' });
+            if (result?.data?.length) {
+                resolve(result.data[0].url);
+                editor.current.root.querySelectorAll('img.quill-upload-progress').forEach(el => {
+                    el.classList.remove('quill-upload-progress');
+                    el.style.maxHeight = maxImgHeight;
+                });
+            }
+            resolve('');
+        }
+        catch (error) {
+            resolve('');
+        }
+    };
+    useEffect(() => {
+        if (!value && editor.current) {
+            editor.current.setText('');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (editor.current)
+            return;
+        editor.current = new Quill(`#editor-${rand.current}`, {
+            theme: 'snow',
+            modules: {
+                ...modules(`toolbar-${rand.current}`),
+                imageHandler: uploadService
+                    ? {
+                        imageClass: 'custom-image-class',
+                        upload: file => new Promise(resolve => {
+                            if (file.size > 10 * 1024 * 1024) {
+                                resolve('');
+                                return;
+                            }
+                            _onUpload(file, resolve);
+                        }),
+                    }
+                    : undefined,
+            },
+            formats,
+            placeholder,
+        });
+        editor.current.root.innerHTML = value || '';
+        editor.current.on('text-change', (delta, oldDelta, source) => {
+            // if (source === 'api') {}
+            if (source === 'user') {
+                debounceQuickProcess();
+                if (editor.current?.getText().trim().length === 0) {
+                    debounceChange('');
+                }
+                else {
+                    debounceChange(editor.current?.root.innerHTML || '');
+                }
+            }
+        });
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(EditorToolbar, { id: `toolbar-${rand.current}`, isRoundCorner: isRoundCorner, borderColor: borderColor }), _jsx(EditorWrapper, { id: `editor-${rand.current}`, style: { height, color: '#000000' }, borderColor: borderColor })] }));
+};

package/es/components/molecules/QuillEditor/index.d.ts

@@ -0,0 +1 @@
+export { QuillEditor } from './QuillEditor';

package/es/components/molecules/QuillEditor/index.js

@@ -0,0 +1 @@
+export { QuillEditor } from './QuillEditor';

package/es/components/molecules/RadioGroup/index.js

@@ -1,23 +1,9 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Components
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
 import { RadioGroupWrapper, StyledRadioGroup } from './styled';
 export const RadioGroup = props => {
-    const { label } = props, restOf = __rest(props, ["label"]);
-    return (React.createElement(RadioGroupWrapper, null,
-        label ? React.createElement(Text, null, label) : null,
-        React.createElement(StyledRadioGroup, Object.assign({}, restOf))));
+    const { label, ...restOf } = props;
+    return (_jsxs(RadioGroupWrapper, { children: [label ? _jsx(Text, { children: label }) : null, _jsx(StyledRadioGroup, { ...restOf })] }));
 };

package/es/components/molecules/RequestAccess/RequestAccess.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface RequestAccessProps {
+    fullscreen?: boolean;
     className?: string;
     placeholder?: string;
     deniedTitle?: string;

package/es/components/molecules/RequestAccess/RequestAccess.js

@@ -1,28 +1,23 @@
-import React, { useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import { Button, Flex, TextArea, Typography } from '@antscorp/antsomi-ui/es/components';
+import { translate as t, translations } from '@antscorp/antsomi-locales';
 // Styled
 import { RequestAccessStyled } from './styled';
-// Translate
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { BlockIcon } from '../../icons';
-const { t } = i18nInstance;
 export const RequestAccess = props => {
-    const { className, placeholder = t(translations.requestAccess.placeholder), deniedTitle = t(translations.requestAccess.deniedTitle), deniedSubTitle = t(translations.requestAccess.deniedSubTitle), sentTitle = t(translations.requestAccess.sentTitle), sentSubTitle = t(translations.requestAccess.sentSubTitle), requestText = t(translations.requestAccess.requestText), switchAccountText = t(translations.requestAccess.switchAccountText), onRequest, onSwitchAccount, } = props;
+    const { fullscreen, className, placeholder = t(translations.requestAccess.placeholder), deniedTitle = t(translations.requestAccess.deniedTitle), deniedSubTitle = t(translations.requestAccess.deniedSubTitle), sentTitle = t(translations.requestAccess.sentTitle), sentSubTitle = t(translations.requestAccess.sentSubTitle), requestText = t(translations.requestAccess.requestText), switchAccountText = t(translations.requestAccess.switchAccountText), onRequest, onSwitchAccount, } = props;
     const [isSentRequest, setIsSentRequest] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const messageRef = useRef(null);
     const handleClickRequest = () => {
-        var _a, _b;
-        const message = ((_b = (_a = messageRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea.value) || '';
+        const message = messageRef.current?.resizableTextArea?.textArea.value || '';
         if (onRequest) {
             try {
                 setIsLoading(true);
                 onRequest(message)
-                    .then(data => {
-                    if (data) {
-                        setIsSentRequest(true);
-                    }
+                    .then(() => {
+                    setIsSentRequest(true);
                 })
                     .finally(() => setIsLoading(false));
             }
@@ -36,15 +31,5 @@ export const RequestAccess = props => {
         if (onSwitchAccount)
             onSwitchAccount();
     };
-    return (React.createElement(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}` },
-        React.createElement(Flex, { vertical: true, gap: 20 },
-            React.createElement(Flex, { vertical: true, gap: 5 },
-                React.createElement(Typography.Text, { className: "denied-title" }, isSentRequest ? (sentTitle) : (React.createElement(React.Fragment, null,
-                    deniedTitle,
-                    React.createElement(BlockIcon, null)))),
-                React.createElement(Typography.Text, { className: "denied-sub-title" }, isSentRequest ? sentSubTitle : deniedSubTitle)),
-            !isSentRequest ? (React.createElement(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null,
-            React.createElement(Flex, { className: "action-buttons", gap: 10 },
-                isSentRequest ? null : (React.createElement(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading }, requestText)),
-                React.createElement(Button, { onClick: handleSwitchAccount }, switchAccountText)))));
+    return (_jsx(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}`, style: fullscreen ? { inset: 0, height: '100vh' } : {}, children: _jsxs(Flex, { vertical: true, gap: 20, children: [_jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Typography.Text, { className: "denied-title", children: isSentRequest ? (sentTitle) : (_jsxs(_Fragment, { children: [deniedTitle, _jsx(BlockIcon, {})] })) }), _jsx(Typography.Text, { className: "denied-sub-title", children: isSentRequest ? sentSubTitle : deniedSubTitle })] }), !isSentRequest ? (_jsx(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null, _jsxs(Flex, { className: "action-buttons", gap: 10, children: [isSentRequest ? null : (_jsx(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading, children: requestText })), _jsx(Button, { onClick: handleSwitchAccount, children: switchAccountText })] })] }) }));
 };

package/es/components/molecules/RequestAccess/styled.js

@@ -19,22 +19,22 @@ export const RequestAccessStyled = styled.div `
       font-size: 20px;
       line-height: 24px;
       font-weight: 700;
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.orange6};
+      color: ${globalToken?.orange6};
 
       & > svg {
-        color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+        color: ${globalToken?.bw5};
       }
     }
 
     .denied-sub-title {
       line-height: 14px;
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      color: ${globalToken?.bw8};
     }
 
     .antsomi-input {
       height: 150px;
-      border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1} !important;
-      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border: 1px solid ${globalToken?.blue1} !important;
+      border-radius: ${globalToken?.borderRadius}px;
       padding: 10px;
     }
   }