diginet-core-ui 1.4.39 → 1.4.40

package/utils/sb-template.js

@@ -1,113 +0,0 @@
-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 /*#__PURE__*/React.createElement(Row, {
-    style: {
-      padding: spacing(2)
-    }
-  }, /*#__PURE__*/React.createElement(Col, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Row, null, title && /*#__PURE__*/React.createElement(Col, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Typography, {
-    type: 'title1',
-    color: 'primary'
-  }, title)), /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(Tooltip, {
-      tooltipMaxWidth: 200,
-      disabled: disabledTooltip,
-      key: indexProps,
-      title: JSON.stringify(argsTemp)
-    }, /*#__PURE__*/React.createElement(Component, {
-      ...argsTemp
-    }));
-  })))));
-};
-const StoryBookTemplate = ({
-  args,
-  component,
-  propsCustom,
-  listItem,
-  componentName
-}) => {
-  return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(ImportComp, {
-    components: componentName
-  })), /*#__PURE__*/React.createElement(Col, {
-    xs: 12
-  }, listItem.map((propsItem, idx) => {
-    const {
-      horizontal,
-      title,
-      argsExtra,
-      propsCustom: itemPropsCustom,
-      disabledTooltip,
-      align
-    } = propsItem;
-    return /*#__PURE__*/React.createElement(Template, {
-      key: idx,
-      horizontal: horizontal,
-      title: title,
-      args: {
-        ...args,
-        ...argsExtra
-      },
-      component: component,
-      propsCustom: [...(propsCustom || []), ...(itemPropsCustom || [])],
-      disabledTooltip: disabledTooltip,
-      align: align
-    });
-  })));
-};
-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/utils/storybook/index.js

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

package/utils/storybook/refArgTypes.js

@@ -1,41 +0,0 @@
-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/utils/string/capitalize.js

@@ -1,3 +0,0 @@
-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/utils/string/capitalizeSentenceCase.js

@@ -1,8 +0,0 @@
-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/utils/string/string.js

@@ -1,60 +0,0 @@
-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/utils/type.js

@@ -1,69 +0,0 @@
-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/utils/updatePosition.js

@@ -1,35 +0,0 @@
-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 === null || cb === void 0 ? void 0 : 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 === null || cb === void 0 ? void 0 : cb();
-  } else {
-    transformEl.style.left = left + 'px';
-  }
-};
-export default updatePosition;

package/utils/useControlled/index.js

@@ -1,14 +0,0 @@
-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/utils/useDelayUnmount.js

@@ -1,15 +0,0 @@
-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;

package/utils/useElementSize.js

@@ -1,55 +0,0 @@
-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 === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0,
-      height: (ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0
-    });
-  }, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
-  useEventListener('resize', handleSize);
-  useLayoutEffect(() => {
-    handleSize();
-  }, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
-  return [setRef, size];
-};
-export default useElementSize;

package/utils/useEventListener.js

@@ -1,51 +0,0 @@
-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 === null || element === void 0 ? void 0 : 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/utils/useInput.js

@@ -1,33 +0,0 @@
-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 === null || onInput === void 0 ? void 0 : onInput(e);
-      };
-      onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, delayOnChange);
-  };
-  return {
-    value,
-    setValue,
-    resetState: () => setValue(value || ''),
-    clear: () => setValue(''),
-    bind: {
-      onChange: _onChange
-    }
-  };
-};
-export default useInput;

package/utils/useMediaQuery/index.js

@@ -1,44 +0,0 @@
-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/utils/useOnClickOutside.js

@@ -1,21 +0,0 @@
-/**
- * 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/utils/usePortal.js

@@ -1,49 +0,0 @@
-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;