diginet-core-ui 1.4.39 → 1.4.40

package/src/utils/randomString.js

@@ -0,0 +1,22 @@
+export default function getRandomString (length=10, options={}) {
+    const {allowNumber=true, allowLowercase=true, allowUppercase=true, allowSymbol=true} = options;
+    let string = '';
+    if (allowNumber) {
+        string += '0123456789';
+    }
+    if (allowLowercase) {
+        string += 'abcdefghijklmnopqrstuvwxyz';
+    }
+    if (allowUppercase) {
+        string += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    }
+    if (allowSymbol) {
+        string += '@$%^&*_+-';
+    }
+
+    let newString = '';
+    for (let i = 0; i < length; i++) {
+        newString += string[Math.floor(Math.random()*string.length)];
+    }
+    return newString;
+}

package/src/utils/refMethodType.js

@@ -0,0 +1,9 @@
+const refMethodType = (props, propName, componentName) => {
+    if (propName in props) {
+        return new Error(
+            `Invalid prop ${propName} passed to ${componentName}. Don't use this prop! This prop only used for showing ref methods on storybook!`
+        );
+    }
+};
+
+export default refMethodType;

package/src/utils/refType.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+
+const refType = PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]);
+
+export default refType;

package/src/utils/remove-unicode.js

@@ -0,0 +1,13 @@
+const removeUnicode = (str, spaceTo=' ') => {
+    if (!str || typeof str !== 'string') return str;
+    return str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/gi, "a")
+    .replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/gi, "e")
+    .replace(/ì|í|ị|ỉ|ĩ/gi, "i")
+    .replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/gi, "o")
+    .replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/gi, "u")
+    .replace(/ỳ|ý|ỵ|ỷ|ỹ/gi, "y")
+    .replace(/đ/gi, "d")
+    .replaceAll(' ', spaceTo);
+}
+
+export default removeUnicode;

package/src/utils/render-portal.js

@@ -0,0 +1,87 @@
+import { Children } from 'react';
+import { render, createPortal } from 'react-dom';
+import { useTheme } from 'theme';
+const idPortal = 'DGN-UI-Portal',
+    classNameCommon = 'DGN-UI-Portal';
+
+export const getPortal = () => {
+    const theme = useTheme();
+    const { zIndex } = theme;
+    const portal = document.getElementById(idPortal);
+    if (portal) return portal;
+    const node = document.createElement('div');
+    node.id = idPortal;
+    node.style.cssText = `position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; pointer-events: none; z-index: ${zIndex()};`;
+    return document.body.appendChild(node);
+};
+
+export const isLastChildNode = node => {
+    if (!node) return false;
+    if (typeof node === 'string') {
+        node = document.querySelector(node);
+    } else {
+        node = node.current || node.target || node;
+    }
+    const portal = getPortal();
+    const length = portal.childNodes.length;
+    return length && portal.lastChild.contains(node);
+};
+
+export const renderPortal = (node, containers, isCreate = false, options = {}) => {
+    const { style = {}, className } = options;
+    let container = getPortal();
+    Object.assign(container, style);
+    if (className) {
+        container.classList.add(className);
+    }
+    if (containers) {
+        containers.classList.add(classNameCommon);
+        containers.style.pointerEvents = 'auto';
+        container = container.appendChild(containers);
+        if (isCreate) {
+            return createPortal(node, container);
+        } else {
+            render(node, container);
+        }
+    } else {
+        Children.forEach(node, containerChild => {
+            const parent = document.createElement(containerChild.type);
+            const children = containerChild.props.children;
+            Object.keys(containerChild.props).forEach(key => {
+                if (!/__EMOTION_TYPE_PLEASE_DO_NOT_USE__|children/.test(key)) {
+                    if (key === 'css') {
+                        parent.classList.add(`css-${containerChild.props[key].name}`);
+                    } else if (key === 'style') {
+                        Object.assign(parent.style, containerChild.props[key]);
+                    } else {
+                        parent[key] = containerChild.props[key];
+                    }
+                }
+            });
+            parent.classList.add(classNameCommon);
+            parent.style.pointerEvents = 'auto';
+            container = container.appendChild(parent);
+            if (isCreate) {
+                return createPortal(children, container);
+            } else {
+                render(children, container);
+            }
+        });
+    }
+};
+
+export const removePortal = node => {
+    if (isLastChildNode(node)) {
+        node.remove();
+        removePortalCommon();
+        return true;
+    }
+    return false;
+};
+
+export const removePortalCommon = () => {
+    const portals = getPortal();
+    if (!portals.childNodes.length) {
+        portals.remove();
+    }
+};

package/src/utils/renderHTML.js

@@ -0,0 +1,17 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import parseTextToHTML from './parseHTML';
+
+const renderHTML = (text = null, TagName = 'div', options = {}) => {
+    if (
+        text &&
+        ((text.$$typeof && String(text.$$typeof) === 'Symbol(react.element)') ||
+            (Array.isArray(text) && text.some(node => node && String(node.$$typeof) === 'Symbol(react.element)')))
+    ) {
+        return <TagName {...options}>{text}</TagName>;
+    }
+    return <TagName {...options} dangerouslySetInnerHTML={{ __html: parseTextToHTML(String(text ?? '')) }} />;
+};
+
+export default renderHTML;

package/src/utils/renderIcon.js

@@ -0,0 +1,41 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { ButtonIcon } from '../components';
+import * as Icons from '../icons';
+import { parseTextToHTML, capitalize } from './';
+/**
+ * render icon form source (dynamic type)
+ * @param {String|jsx} source data of icon, maybe svg text | image link | name of icon in icons store or a jsx element
+ * @param {String} type text to parse text to HTML, img link to use img tag, name to use icon form icons store
+ * @param {Object} options properties of Icon component if us type is name {width, height, color, viewBox, ...}
+ */
+const renderIcon = (source, type, options = {}) => {
+    if (typeof source === 'string') {
+        switch (type) {
+            case 'name': {
+                let IconComp = Icons[capitalize(source)];
+                if (IconComp) {
+                    return <IconComp {...options} />;
+                }
+                return null;
+            }
+            case 'effect':
+                return <ButtonIcon viewType={'ghost'} name={source} {...options} />;
+            case 'link':
+            case 'imgLink':
+                return <img src={source} {...options} />;
+            default:
+                if (source.length < 20) {
+                    const IconComp = Icons[capitalize(source)];
+                    if (IconComp) {
+                        return <IconComp {...options} />;
+                    }
+                    return null;
+                }
+                return parseTextToHTML(source, options.output || options);
+        }
+    }
+    return source;
+};
+export default renderIcon;

package/src/utils/sb-template.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { css } from '@emotion/core';
+
+import { Col, Row, Tooltip, Typography } from '../components/index';
+import { useTheme } from '../theme';
+import { flexWrap, flexRow, itemsCenter, flexCol, itemsStart, itemsEnd } from '../styles/general';
+import ImportComp from '../components/others/import';
+import PropTypes from 'prop-types';
+
+const { spacing } = useTheme();
+
+const alignMap = new Map([
+    ['start', itemsStart],
+    ['center', itemsCenter],
+    ['end', itemsEnd],
+]);
+
+export const Template = ({ title, args, propsCustom, disabledTooltip, component: Component, horizontal, align }) => {
+    return (
+        <Row style={{ padding: spacing(2) }}>
+            <Col xs={12}>
+                <Row>
+                    {title && (
+                        <Col xs={12}>
+                            <Typography type={'title1'} color={'primary'}>
+                                {title}
+                            </Typography>
+                        </Col>
+                    )}
+                    <Col
+                        xs={12}
+                        style={{ gap: spacing(2) }}
+                        css={css`
+                            ${horizontal ? flexRow : flexCol};
+                            ${flexWrap};
+                            ${alignMap.get(align)};
+                        `}
+                    >
+                        {[{}, ...propsCustom].map((itemProps, indexProps) => {
+                            const argsTemp = { ...args, ...itemProps };
+                            return (
+                                <Tooltip
+                                    tooltipMaxWidth={200}
+                                    disabled={disabledTooltip}
+                                    key={indexProps}
+                                    title={JSON.stringify(argsTemp)}
+                                >
+                                    <Component {...argsTemp} />
+                                </Tooltip>
+                            );
+                        })}
+                    </Col>
+                </Row>
+            </Col>
+        </Row>
+    );
+};
+
+const StoryBookTemplate = ({ args, component, propsCustom, listItem, componentName }) => {
+    return (
+        <Row>
+            <Col xs={12}>
+                <ImportComp components={componentName} />
+            </Col>
+            <Col xs={12}>
+                {listItem.map((propsItem, idx) => {
+                    const {
+                        horizontal,
+                        title,
+                        argsExtra,
+                        propsCustom: itemPropsCustom,
+                        disabledTooltip,
+                        align,
+                    } = propsItem;
+                    return (
+                        <Template
+                            key={idx}
+                            horizontal={horizontal}
+                            title={title}
+                            args={{ ...args, ...argsExtra }}
+                            component={component}
+                            propsCustom={[...(propsCustom || []), ...(itemPropsCustom || [])]}
+                            disabledTooltip={disabledTooltip}
+                            align={align}
+                        />
+                    );
+                })}
+            </Col>
+        </Row>
+    );
+};
+
+Template.defaultProps = {
+    propsCustom: [],
+    disabledTooltip: false,
+    align: 'start',
+};
+
+Template.propTypes = {
+    title: PropTypes.string.isRequired,
+    args: PropTypes.object,
+    propsCustom: PropTypes.array,
+    disabledTooltip: PropTypes.bool,
+    horizontal: PropTypes.bool,
+    align: PropTypes.oneOf(['start', 'center', 'end']),
+};
+
+StoryBookTemplate.propTypes = {
+    componentName: PropTypes.string.isRequired,
+    args: PropTypes.object,
+    propsCustom: PropTypes.array,
+    listItem: PropTypes.array,
+};
+
+export default StoryBookTemplate;

package/src/utils/storybook/index.js

@@ -0,0 +1 @@
+export { default as refArgTypes } from './refArgTypes';

package/src/utils/storybook/refArgTypes.js

@@ -0,0 +1,46 @@
+const refArgTypes = (optionWrapper = true, otherDescription = '') => {
+    const optionWrapperDescription = `<ul>
+    <li>
+        option(): Gets all UI component properties
+        <ul>
+            <li>Returns value - object</li>
+        </ul>
+    </li>
+    <li>
+        option(optionName): Gets the value of a single property
+        <ul>
+            <li>@param {optionName} - string</li>
+            <li>Returns value - any</li>
+        </ul>
+    </li>
+    <li>
+        option(optionName, optionValue): Updates the value of a single property
+        <ul>
+            <li>@param {optionName} - string</li>
+            <li>@param {optionValue} - any</li>
+        </ul>
+    </li>
+    <li>
+        option(options): Updates the values of several properties
+        <ul>
+            <li>@param {options} - object</li>
+        </ul>
+    </li>
+</ul>
+`;
+
+    const _description = `<div><p>ref methods (ref.current.instance.<em>method</em>)</p>${
+        optionWrapper ? optionWrapperDescription : ''
+    }${otherDescription}</div>`;
+
+    return {
+        description: _description,
+        table: {
+            type: {
+                summary: 'ref',
+            },
+        },
+    };
+};
+
+export default refArgTypes;

package/src/utils/string/capitalize.js

@@ -0,0 +1,6 @@
+const capitalize = s => (s && s.charAt(0).toUpperCase() + s.slice(1)) || '';
+
+export const capitalizeLocale = ([first, ...rest], locale = navigator.language) =>
+    first.toLocaleUpperCase(locale) + rest.join('');
+
+export default capitalize;

package/src/utils/string/capitalizeSentenceCase.js

@@ -0,0 +1,9 @@
+import capitalize from './capitalize';
+
+export default function capitalizeSentenceCase(string, separator = ' ') {
+	const sentence = string.toLowerCase().split(`${separator}`);
+	for (let i in sentence) {
+		sentence[i] = capitalize(sentence[i]);
+	}
+	return sentence.join(`${separator}`);
+}

package/src/utils/string/string.js

@@ -0,0 +1,83 @@
+import { isFunction, isString } from '../type';
+
+export const encodeHtml = str => {
+    const encodeRegExp = [
+        new RegExp('&', 'g'),
+        new RegExp('"', 'g'),
+        new RegExp("'", 'g'),
+        new RegExp('<', 'g'),
+        new RegExp('>', 'g'),
+    ];
+
+    return String(str)
+        .replace(encodeRegExp[0], '&amp;')
+        .replace(encodeRegExp[1], '&quot;')
+        .replace(encodeRegExp[2], '&#39;')
+        .replace(encodeRegExp[3], '&lt;')
+        .replace(encodeRegExp[4], '&gt;');
+};
+
+const splitQuad = raw => {
+    switch (typeof raw) {
+        case 'string':
+            return raw.split(/\s+/, 4);
+        case 'object':
+            return [
+                raw.x || raw.h || raw.left,
+                raw.y || raw.v || raw.top,
+                raw.x || raw.h || raw.right,
+                raw.y || raw.v || raw.bottom,
+            ];
+        case 'number':
+            return [raw];
+        default:
+            return raw;
+    }
+};
+
+export const quadToObject = raw => {
+    const quad = splitQuad(raw);
+    let left = parseInt(quad && quad[0], 10);
+    let top = parseInt(quad && quad[1], 10);
+    let right = parseInt(quad && quad[2], 10);
+    let bottom = parseInt(quad && quad[3], 10);
+
+    if (!isFinite(left)) {
+        left = 0;
+    }
+    if (!isFinite(top)) {
+        top = left;
+    }
+    if (!isFinite(right)) {
+        right = left;
+    }
+    if (!isFinite(bottom)) {
+        bottom = top;
+    }
+
+    return { top: top, right: right, bottom: bottom, left: left };
+};
+
+export const format = (template, ...values) => {
+    if (isFunction(template)) {
+        return template(...values);
+    }
+
+    values.forEach((value, index) => {
+        if (isString(value)) {
+            value = value.replace(/\$/g, '$$$$');
+        }
+
+        const placeholderReg = new RegExp('\\{' + index + '\\}', 'gm');
+        template = template.replace(placeholderReg, value);
+    });
+
+    return template;
+};
+
+export const replaceAll = (() => {
+    const quote = str => (str + '').replace(/([+*?.[^\]$(){}><|=!:])/g, '\\$1'); // lgtm[js/incomplete-sanitization]
+
+    return (text, searchToken, replacementToken) =>
+        text.replace(new RegExp('(' + quote(searchToken) + ')', 'gi'), replacementToken);
+})();

package/src/utils/type.js

@@ -0,0 +1,121 @@
+const types = {
+	'[object Array]' : 'array',
+	'[object Date]'  : 'date',
+	'[object Object]': 'object',
+	'[object String]': 'string',
+	'[object Null]'  : 'null'
+};
+
+const type = (object) => {
+	const typeOfObject = Object.prototype.toString.call(object);
+
+	return typeof object === 'object'
+		? types[typeOfObject] || 'object'
+		: typeof object;
+};
+
+const isBoolean = (object) => {
+	return typeof object === 'boolean';
+};
+
+const isExponential = (value) => {
+	return isNumeric(value) && value.toString().indexOf('e') !== -1;
+};
+
+const isDate = (object) => {
+	return type(object) === 'date';
+};
+
+const isDefined = (object) => {
+	return object !== null && object !== undefined;
+};
+
+const isFunction = (object) => {
+	return typeof object === 'function';
+};
+
+const isString = (object) => {
+	return typeof object === 'string';
+};
+
+const isNumeric = (object) => {
+	return (
+		(typeof object === 'number' && isFinite(object)) ||
+		!isNaN(object - parseFloat(object))
+	);
+};
+
+const isObject = (object) => {
+	return type(object) === 'object';
+};
+
+const isEmptyObject = (object) => {
+	let property;
+
+	for (property in object) {
+		return false;
+	}
+
+	return true;
+};
+
+const isPlainObject = (object) => {
+	if (
+		!object ||
+		Object.prototype.toString.call(object) !== '[object Object]'
+	) {
+		return false;
+	}
+	const proto = Object.getPrototypeOf(object);
+	const ctor =
+		Object.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+
+	return (
+		typeof ctor === 'function' &&
+		Object.toString.call(ctor) === Object.toString.call(Object)
+	);
+};
+
+const isPrimitive = (value) => {
+	return ['object', 'array', 'function'].indexOf(type(value)) === -1;
+};
+
+const isWindow = (object) => {
+	return object != null && object === object.window;
+};
+
+const isRenderer = (object) => {
+	return !!(object.jquery || object.dxRenderer);
+};
+
+const isPromise = (object) => {
+	return object && isFunction(object.then);
+};
+
+const isDeferred = (object) => {
+	return object && isFunction(object.done) && isFunction(object.fail);
+};
+
+const isEvent = (object) => {
+	return !!(object && object.preventDefault);
+};
+
+export {
+	isBoolean,
+	isExponential,
+	isDate,
+	isDefined,
+	isFunction,
+	isString,
+	isNumeric,
+	isObject,
+	isEmptyObject,
+	isPlainObject,
+	isPrimitive,
+	isWindow,
+	isRenderer,
+	isPromise,
+	isDeferred,
+	type,
+	isEvent
+};

package/src/utils/updatePosition.js

@@ -0,0 +1,27 @@
+const updatePosition = (anchorEl, transformEl, cb) => {
+    const {top, bottom, left, right} = anchorEl.getBoundingClientRect();
+    const {innerHeight, innerWidth} = window;
+
+    const { height: nodeHeight } = transformEl.getBoundingClientRect();
+    // Vertical
+    if (bottom < 0 || top > innerHeight) {
+        cb?.();
+    } else if (bottom + 4 + nodeHeight > innerHeight) {
+        if (top - (nodeHeight+4) > 0) {
+            transformEl.style.top = top - (nodeHeight+4) + 'px';
+        } else {
+            transformEl.style.top = innerHeight - nodeHeight + 'px';
+        }
+    } else {
+        transformEl.style.top = bottom + 4 + 'px';
+    }
+
+    // Horizontal
+    if (left < 0 || right > innerWidth) {
+        cb?.();
+    } else {
+        transformEl.style.left = left + 'px';
+    }
+}
+
+export default updatePosition;

package/src/utils/useControlled/index.js

@@ -0,0 +1,23 @@
+import { useRef, useState, useCallback } from 'react';
+
+function useControlled(controlledValue, defaultValue) {
+    const controlledRef = useRef(false);
+    controlledRef.current = controlledValue !== undefined;
+
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+
+    const value = controlledRef.current ? controlledValue : uncontrolledValue;
+
+    const setValue = useCallback(
+        nextValue => {
+            if (!controlledRef.current) {
+                setUncontrolledValue(nextValue);
+            }
+        },
+        [controlledRef]
+    );
+
+    return [value, setValue, controlledRef.current];
+}
+
+export default useControlled;

package/src/utils/useDelayUnmount.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+const useDelayUnmount = (isMounted, delayTime) => {
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        let timeoutId;
+        if (isMounted && !show) {
+            setShow(true);
+        } else if (!isMounted && show) {
+            timeoutId = setTimeout(() => setShow(false), delayTime);
+        }
+        return () => clearTimeout(timeoutId);
+    }, [isMounted, delayTime, show]);
+    return show;
+};
+
+export default useDelayUnmount;