diginet-core-ui 1.4.39 → 1.4.40

package/src/utils/useElementSize.js

@@ -0,0 +1,59 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { useEventListener } from './useEventListener';
+
+// Usage:
+// export const Component = () => {
+//     const [isVisible, setVisible] = useState(true);
+//     const [squareRef, { width, height }] = useElementSize();
+
+//     const toggleVisibility = () => setVisible(x => !x);
+
+//     return (
+//         <>
+//             <p>{`The square width is ${width}px and height ${height}px`}</p>
+//             <p>Try, resize your window and-or click on the button.</p>
+
+//             <button onClick={toggleVisibility}>{isVisible ? 'Hide' : 'Show'} square</button>
+
+//             {isVisible && (
+//                 <div
+//                     ref={squareRef}
+//                     style={{
+//                         width: '50%',
+//                         paddingTop: '50%',
+//                         backgroundColor: 'aquamarine',
+//                         margin: 'auto',
+//                     }}
+//                 />
+//             )}
+//         </>
+//     );
+// }
+
+export const useElementSize = () => {
+    // Mutable values like 'ref.current' aren't valid dependencies
+    // because mutating them doesn't re-render the component.
+    // Instead, we use a state as a ref to be reactive.
+    const [ref, setRef] = useState(null);
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    // Prevent too many rendering using useCallback
+    const handleSize = useCallback(() => {
+        setSize({
+            width: ref?.offsetWidth || 0,
+            height: ref?.offsetHeight || 0,
+        });
+    }, [ref?.offsetHeight, ref?.offsetWidth]);
+
+    useEventListener('resize', handleSize);
+
+    useLayoutEffect(() => {
+        handleSize();
+    }, [ref?.offsetHeight, ref?.offsetWidth]);
+
+    return [setRef, size];
+};
+
+export default useElementSize;

package/src/utils/useEventListener.js

@@ -0,0 +1,54 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+// Usage:
+// export const Component = () => {
+//     // Define button ref
+//     const buttonRef = useRef < HTMLButtonElement > null;
+
+//     const onScroll = (event: Event) => {
+//         console.log("window scrolled!", event);
+//     };
+
+//     const onClick = (event: Event) => {
+//         console.log("button clicked!", event);
+//     };
+
+//     // example with window based event
+//     useEventListener("scroll", onScroll);
+
+//     // example with element based event
+//     useEventListener("click", onClick, buttonRef);
+
+//     return (
+//         <div style={{ minHeight: "200vh" }}>
+//             <button ref={buttonRef}>Click me</button>
+//         </div>
+//     );
+// };
+
+export const useEventListener = (eventName, handler, element) => {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+
+    useLayoutEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+
+    useEffect(() => {
+        // Define the listening target
+        const targetElement = element?.current || window;
+        if (!(targetElement && targetElement.addEventListener)) {
+            return;
+        }
+
+        // Create event listener that calls handler function stored in ref
+        const eventListener = event => savedHandler.current(event);
+
+        targetElement.addEventListener(eventName, eventListener);
+
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, eventListener);
+        };
+    }, [eventName, element]);
+};

package/src/utils/useInput.js

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useInput = (defaultValue, valueProp, onChange, onInput, delayOnChange) => {
+    const [value, setValue] = useState(defaultValue || valueProp);
+
+    const timer = useRef(null);
+    delayOnChange = Number(delayOnChange || 0);
+
+    useEffect(() => {
+        setValue(valueProp);
+    }, [valueProp]);
+
+    const _onChange = e => {
+        e.persist();
+        if (timer.current) clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            const valueInput = e.target.value || e.value;
+            setValue(valueInput);
+            e.reset = () => {
+                setValue(valueProp);
+                e.target.value = valueProp;
+                onInput?.(e);
+            };
+            onChange?.(e);
+        }, delayOnChange);
+    };
+
+    return {
+        value,
+        setValue,
+        resetState: () => setValue(value || ''),
+        clear: () => setValue(''),
+        bind: {
+            onChange: _onChange,
+        },
+    };
+};
+
+export default useInput;

package/src/utils/useMediaQuery/index.js

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+
+// Usage:
+// export default function Component() {
+//     const matches = useMediaQuery('(min-width: 768px)');
+//     return <div>{`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}</div>;
+// }
+
+const useMediaQuery = query => {
+    const getMatches = query => {
+        // Prevents SSR issues
+        if (typeof window !== 'undefined') {
+            return window.matchMedia(query).matches;
+        }
+        return false;
+    };
+
+    const [matches, setMatches] = useState(getMatches(query));
+
+    const handleChange = () => {
+        setMatches(getMatches(query));
+    };
+
+    useEffect(() => {
+        const matchMedia = window.matchMedia(query);
+
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+
+        // Listen matchMedia
+        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        } else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            } else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+
+    return matches;
+};
+
+export default useMediaQuery;

package/src/utils/useMediaQuery/index.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ImportComp } from 'components/others/import/index.stories';
+import { Divider, Typography } from 'components';
+import { useMediaQuery } from 'utils';
+
+export default {
+    title: 'Utils / useMediaQuery',
+};
+
+const Template = args => {
+    const { name, description } = args;
+    const matches = useMediaQuery('(min-width: 768px)');
+    return (
+        <>
+            <ImportComp components={name} from={'utils'} />
+            <Typography type={'t1'}>{name}</Typography>
+            <br />
+            <Divider />
+            <br />
+            <Typography type={'h3'}>{description}</Typography>
+            <br />
+            <Typography>Example:</Typography>
+            <div>
+                The view port is <mark>{matches ? 'at least' : 'less than'}</mark> 768 pixels wide
+            </div>
+        </>
+    );
+};
+
+export const UseMediaQuery = Template.bind({});
+UseMediaQuery.args = {
+    name: 'useMediaQuery',
+    description: 'Easily retrieve media dimensions with this Hook React which also works onResize.',
+};
+UseMediaQuery.parameters = {
+    controls: { include: [], hideNoControlsWarning: true },
+    docs: {
+        source: {
+            code: `import { useMediaQuery } from 'diginet-core-ui/utils'
+
+export default function Component() {
+    const matches = useMediaQuery('(min-width: 768px)')
+
+    return (
+    <div>
+        {\`The view port is \${matches ? 'at least' : 'less than'} 768 pixels wide\`}
+    </div>
+    )
+}
+`,
+            language: 'javascript',
+            type: 'auto',
+        },
+    },
+};

package/src/utils/useOnClickOutside.js

@@ -0,0 +1,28 @@
+/**
+ * https://usehooks.com/useOnClickOutside/
+ */
+import {useEffect} from 'react';
+
+export default function useOnClickOutside (ref, handler) {
+  useEffect (
+    () => {
+      const listener = event => {
+        // Do nothing if clicking ref's element or descendent elements
+        if (!ref.current || ref.current.contains (event.target)) {
+          return;
+        }
+
+        handler (event);
+      };
+
+      document.addEventListener ('mousedown', listener);
+      document.addEventListener ('touchstart', listener);
+
+      return () => {
+        document.removeEventListener ('mousedown', listener);
+        document.removeEventListener ('touchstart', listener);
+      };
+    },
+    [ref, handler]
+  );
+}

package/src/utils/usePortal.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Create a element with id
+ * @param {string} id 
+ */
+export const createEl = (id) => {
+	const createdEl = document.createElement('div');
+    createdEl.setAttribute('id', id);
+	return createdEl;
+};
+
+/**
+ * Insert into document.body at last
+ * @param {Element} rootElem
+ */
+export const addRootEl = (rootElem) => {
+	document.body.insertBefore(rootElem, document.body.lastElementChild.nextElementSibling);
+};
+
+/**
+ * Create a portal with id
+ * @param {string} id 
+ */
+const usePortal = (id) => {
+	const rootElemRef = useRef(null);
+
+    const getRootEl = () => {
+        if (!rootElemRef.current) {
+            rootElemRef.current = document.createElement('div');
+        }
+        return rootElemRef.current;
+    };
+
+	useEffect(() => {
+		const existingParent = document.querySelector(`#${id}`);
+		const parentEl = existingParent || createEl(id);
+		if (!existingParent) {
+			addRootEl(parentEl);
+		}
+        parentEl.appendChild(rootElemRef.current);
+
+		return () => {
+			rootElemRef.current.remove();
+			if (parentEl.childNodes.length === -1) {
+				parentEl.remove();
+			}
+		};
+	}, []);
+
+	return getRootEl();
+};
+
+export default usePortal;

package/src/utils/validate.js

@@ -0,0 +1,135 @@
+import { getGlobal } from '../global';
+
+/**
+ * Validation the string is an valid email
+ * @param {String} str The string to check an email
+ * @param {String} message the error will return if str is not an email
+ * @returns {Boolean} true if value is an email, message or default error if value is not an email
+ */
+export const isEmail = (str, _, message) => {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if (!nonNullish(str) || str === '') return true;
+    return re.test(String(str).toLowerCase()) || (nonNullish(message) ? message : getGlobal(['validate', 'isEmail']));
+};
+
+/**
+ * Validation value is not an empty string, array or object
+ * @param {String|Object|Array} value the value to validate not empty
+ * @param {String} message the error will return if value is empty
+ * @returns {Boolean} true if value is not empty, message or default error if value is empty
+ */
+export const isNotEmpty = (value, _, message) => {
+    if (!nonNullish(value)) return getGlobal(['validate', 'invalidInput']);
+    if (typeof value === 'string') {
+        return value !== '' || message || getGlobal(['validate', 'isNotEmptyString']);
+    } else if (typeof value === 'object') {
+        if (Array.isArray(value)) {
+            return value.length || message || getGlobal(['validate', 'isNotEmptyArray']);
+        } else {
+            return Object.keys(value).length || message || getGlobal(['validate', 'isNotEmptyObject']);
+        }
+    }
+    return true;
+};
+
+/**
+ * Check a number is less than or equal the maximum allowed
+ * @param {Number} value the value to compare with maximum
+ * @param {Number} maximum the maximum value
+ * @param {String} message the error will return if value > maximum
+ * @returns {Boolean|String} true if value is valid, message or default error if invalid (both value and maximum)
+ */
+export const max = (value, maximum, message) => {
+    if (!nonNullish([value, maximum]) || value === '') return true;
+    if (isNaN(value) || isNaN(maximum)) return getGlobal(['validate', 'invalidInput']);
+    return value <= maximum || (nonNullish(message) ? message : `${getGlobal(['validate', 'max'])} (${maximum})`);
+};
+
+/**
+ * check a number is greater than or equal the minimum allowed
+ * @param {Number} value the value to compare with minimize
+ * @param {Number} minimize the minimize value
+ * @param {String} message the error will return if value < minimize
+ * @returns {Boolean|String} true if value is valid, message or default error if invalid (both value and minimize)
+ */
+export const min = (value, minimize, message) => {
+    if (!nonNullish([value, minimize]) || value === '') return true;
+    if (isNaN(value) || isNaN(minimize)) return getGlobal(['validate', 'invalidInput']);
+    return value >= minimize || (nonNullish(message) ? message : `${getGlobal(['validate', 'min'])} (${minimize})`);
+};
+
+/**
+ * check value has anything
+ * @param {String|Number|Object} value the value to check
+ * @param {String} message the error will return if undefined|null|empty
+ * @returns {Boolean|String} true if value is valid, message input or default error if value invalid
+ */
+export const required = (value, message) => {
+    return (nonNullish(value) && value !== '') || (nonNullish(message) ? message : getGlobal(['validate', 'required']));
+};
+
+const nonNullish = value => {
+    if (Array.isArray(value)) {
+        return value.every(v => v !== undefined && v !== null);
+    }
+    return value !== undefined && value !== null;
+};
+
+const validations = { isEmail, isNotEmpty, max, min, required };
+
+/**
+ * validation value follow rule(s)
+ * @param {String|Number|Object|Array} value the value to validate
+ * @param {String|Object|Array} rules the rule(s) to validation value
+ * @param {Boolean} returnOneError only return first error if have errors
+ * @returns {Boolean|String|Array} true if value is valid, error text or an array error if invalid value
+ */
+const onValidate = (value, rules, returnOneError) => {
+    if (!rules) return true;
+    let result = true;
+
+    if (typeof rules === 'function') {
+        result = rules(value);
+    } else if (typeof rules === 'object') {
+        if (Array.isArray(rules)) {
+            rules.forEach(rule => {
+                let res;
+                if (typeof rule === 'string') {
+                    res = validations[rule](value);
+                } else {
+                    const name = rule.name || Object.keys(rule)[0];
+                    const compareValue = rule.compareValue !== undefined ? rule.compareValue : rule[name];
+                    if (name && validations[name]) {
+                        res = validations[name](value, compareValue, rule.message);
+                    }
+                }
+                if (res !== true) {
+                    if (result === true) {
+                        result = [];
+                    }
+                    result.push(res);
+                }
+            });
+        } else {
+            const name = rules.name || Object.keys(rules)[0];
+            const compareValue = rules.compareValue !== undefined ? rules.compareValue : rules[name];
+            if (name) {
+                result = validations[name](value, compareValue, rules.message);
+            }
+        }
+    } else if (validations[rules]) {
+        result = validations[rules](value);
+    }
+
+    if (returnOneError) {
+        if (result === true) {
+            return false;
+        } else if (typeof result === 'string') {
+            return result;
+        } else return result[0];
+    }
+
+    return result;
+};
+
+export default onValidate;

package/components/accordion/context.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-const AccordionContext = /*#__PURE__*/createContext({
-  onExpand: () => {},
-  onCollapse: () => {}
-});
-export default AccordionContext;

package/components/accordion/details.js

@@ -1,76 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { boxBorder, overflowHidden, parseHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const AccordionDetails = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'AccordionDetails'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style
-  } = props;
-  const ref = useRef(null);
-  const _DetailsRootCSS = DetailsRootCSS(theme);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    css: _DetailsRootCSS,
-    className: 'DGN-UI-Accordion-Details',
-    ref: ref,
-    id: id
-  }, jsx("div", {
-    style: style,
-    className: classNames('DGN-UI-Accordion-Details-Content', className)
-  }, children));
-}));
-const DetailsRootCSS = ({
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${positionRelative};
-    ${overflowHidden};
-    ${parseHeight(0)};
-    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    .DGN-UI-Accordion-Details-Content {
-        ${boxBorder};
-        ${typography.paragraph1};
-        padding: ${spacing([0, 6, 4, 6])};
-        ${textColor(getProp(colors, 'text/main'))};
-        &.disabled {
-            ${pointerEventsNone};
-            ${userSelectNone};
-        }
-    }
-`;
-AccordionDetails.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** Inline style object for the component. */
-  style: PropTypes.object
-};
-export default AccordionDetails;