diginet-core-ui 1.4.39 → 1.4.40

package/components/form-control/dropdown-box/index.js

@@ -1,238 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../../utils";
-const DropdownBox = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'DropdownBox'
-  });
-  const {
-    action = {},
-    bgColor: bgColorProp,
-    children,
-    className,
-    delayOnInput,
-    endIcon,
-    inputProps,
-    inputRef,
-    inputStyle,
-    label,
-    labelProps,
-    onChangeInput,
-    onClosed,
-    onOpened,
-    openOnClickAt,
-    placeholder,
-    startIcon,
-    style,
-    value,
-    viewType
-  } = props;
-  const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
-  const ref = useRef(null);
-  const dropdownBoxRef = useRef(null);
-  const timer = useRef(null);
-  const [openState, setOpenState] = useState(false);
-  const [popoverWidth, setPopoverWidth] = useState(0);
-  const _DropdownBoxRootCSS = DropdownBoxRootCSS(bgColor, theme, openState);
-  const customizeWidthDropdown = () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    timer.current = setTimeout(() => {
-      if (ref.current) {
-        const {
-          width
-        } = ref.current.getBoundingClientRect();
-        setPopoverWidth(width);
-      }
-    }, 300);
-  };
-  const onTriggerDropdown = e => {
-    if (!openState) {
-      openDropdownBox();
-    } else {
-      closeDropdownBox();
-      e.currentTarget.blur();
-    }
-  };
-  const pressESCHandler = event => {
-    if (event.key === 'Escape') {
-      closeDropdownBox();
-    }
-  };
-  const openDropdownBox = () => {
-    setOpenState(true);
-    onOpened === null || onOpened === void 0 ? void 0 : onOpened();
-  };
-  const closeDropdownBox = () => {
-    if (dropdownBoxRef.current) {
-      setOpenState(false);
-      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
-    }
-  };
-  useLayoutEffect(() => {
-    if (ref.current) {
-      const {
-        width
-      } = ref.current.getBoundingClientRect();
-      setPopoverWidth(width);
-    }
-  });
-  useLayoutEffect(() => {
-    window.addEventListener('resize', customizeWidthDropdown);
-    return () => {
-      window.removeEventListener('resize', customizeWidthDropdown);
-    };
-  }, []);
-  useEffect(() => {
-    return () => {
-      closeDropdownBox();
-    };
-  }, []);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      ...action,
-      open: () => {
-        openDropdownBox();
-      },
-      close: () => {
-        closeDropdownBox();
-      }
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    // keep old method
-    currentRef.open = () => openDropdownBox();
-    currentRef.close = () => closeDropdownBox();
-  });
-  const renderEndIcon = () => {
-    return endIcon ? jsx(ButtonIcon, {
-      key: openState,
-      viewType: 'ghost',
-      css: animation,
-      name: endIcon === 'ArrowDown' ? openState ? 'ArrowUp' : 'ArrowDown' : endIcon,
-      onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
-    }) : null;
-  };
-  return jsx(Fragment, null, jsx("div", {
-    ref: ref,
-    css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
-    style: style
-  }, label ? jsx(Label, {
-    ...labelProps
-  }, label) : null, jsx(InputBase, {
-    ...inputProps,
-    style: inputStyle,
-    viewType: viewType,
-    inputRef: inputRef,
-    placeholder: placeholder,
-    value: value,
-    startIcon: startIcon,
-    endIcon: renderEndIcon(),
-    onChange: onChangeInput,
-    delayOnChange: delayOnInput,
-    onClick: openOnClickAt === 'full' ? onTriggerDropdown : null,
-    onKeyDown: pressESCHandler
-  })), jsx(Popover, {
-    css: DropdownBoxCSS(theme),
-    ref: dropdownBoxRef,
-    open: openState,
-    anchor: ref.current,
-    width: popoverWidth,
-    onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
-}));
-const DropdownBoxRootCSS = (bgColorProp, {
-  colors
-}, openState) => css`
-    ${displayBlock};
-    ${positionRelative};
-    ${parseMinWidth(150)};
-    ${parseHeight('max-content')};
-    .DGN-UI-InputBase {
-        background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
-        ${openState && css`
-            background-color: inherit;
-            &::after {
-                ${borderColor(getProp(colors, 'semantic/info'))};
-                ${scaleX(1)};
-            }
-        `}
-    }
-`;
-const DropdownBoxCSS = ({
-  spacing
-}) => css`
-    margin-top: ${spacing([1])};
-    ${overflowHidden};
-`;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
-DropdownBox.propTypes = {
-  /** class for dropdown */
-  className: PropTypes.string,
-  /** label for input */
-  label: PropTypes.string,
-  /** hints for input */
-  placeholder: PropTypes.string,
-  /** the content to display in input */
-  value: PropTypes.string,
-  /** icon at start */
-  startIcon: PropTypes.string,
-  /** icon at end */
-  endIcon: PropTypes.string,
-  /** background color of DropdownBox input */
-  bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  /** viewType of InputBase */
-  viewType: PropTypes.oneOf(['underlined', 'outlined']),
-  /** viewType of InputBase */
-  openOnClickAt: PropTypes.oneOf(['full', 'icon']),
-  /** style inline for dropdown */
-  style: PropTypes.object,
-  /** props of input in DropdownBox component */
-  inputProps: PropTypes.object,
-  /** style inline of input in DropdownBox component */
-  inputStyle: PropTypes.object,
-  /** the function will run when entering input */
-  onChangeInput: PropTypes.func,
-  /** delay time on input */
-  delayOnInput: PropTypes.number,
-  /** style inline of label in DropdownBox component */
-  labelProps: PropTypes.object,
-  /** the contents in DropdownBox box (Exp: TreeView) */
-  children: PropTypes.node.isRequired,
-  /** the function will run after open */
-  onOpened: PropTypes.func,
-  /** the function will run after close */
-  onClosed: PropTypes.func
-};
-export default DropdownBox;

package/components/form-control/form/context.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-const FormContext = /*#__PURE__*/createContext({
-  onChange: () => {}
-});
-export default FormContext;

package/components/form-control/form/index.js

@@ -1,40 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { memo, useMemo, useRef, useEffect, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import FormContext from "./context";
-const Form = /*#__PURE__*/forwardRef(({
-  onLoaded,
-  onValidate,
-  onSubmit,
-  onChange,
-  children,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  const submitHandler = e => {
-    e.preventDefault();
-    !!onValidate && onValidate();
-    !!onSubmit && onSubmit(e);
-  };
-  useEffect(() => {
-    !!onLoaded && onLoaded(ref.current);
-  }, []);
-  return useMemo(() => /*#__PURE__*/React.createElement("form", {
-    onSubmit: submitHandler,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: {
-      onChange
-    }
-  }, children)), [props]);
-});
-Form.propTypes = {
-  onLoaded: PropTypes.func,
-  onChange: PropTypes.func,
-  onValidate: PropTypes.func,
-  onSubmit: PropTypes.func,
-  children: PropTypes.node
-};
-export default /*#__PURE__*/memo(Form);

package/components/form-control/form-group/index.js

@@ -1,117 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { Children, forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
-import { useTheme } from "../../../theme";
-const FormGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  fullWidth,
-  oneHelperText,
-  marginRight,
-  className,
-  children,
-  ...props
-}, reference) => {
-  const theme = useTheme();
-  const {
-    spacing
-  } = theme;
-  const ref = useRef(null);
-  const previousError = useRef(false);
-
-  /* Start styled */
-  const FormGroupRoot = css`
-            position: relative;
-            align-items: flex-end;
-            box-sizing: border-box;
-            width: auto;
-            margin-bottom: ${spacing(4)}px;
-            &.Form-Group-full-width {
-                width: 100% !important;
-                flex: 1 1 auto;
-                .DGN-UI-TextInput {
-                    flex: 1 1 auto;
-                }
-            }
-            &.Form-Group-Common {
-                margin-bottom: 20px;
-                width: max-content;
-                .DGN-UI-HelperText {
-                    width: 100%;
-                    left: 0;
-                }
-                .DGN-UI-TextInput {
-                    position: initial;
-                    margin-bottom: 0 !important;
-                }
-            }
-            &.DGN-UI-TextInput {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                height: 100%;
-                margin-bottom: 20px !important;
-                &:not(:last-of-type) {
-                    margin-right: ${isNaN(marginRight) ? marginRight : marginRight + 'px'};
-                }
-            }
-        `;
-  /* End styled */
-
-  /* Start handler */
-  const resetLabelPosition = () => {
-    const allUnderlined = ref.current.querySelectorAll('.DGN-UI-InputBase.underlined');
-    const outlined = ref.current.querySelector('.DGN-UI-InputBase.outlined');
-    if (allUnderlined.length && outlined) {
-      allUnderlined.forEach(input => {
-        if (input.previousElementSibling) {
-          input.previousElementSibling.style.marginBottom = '10px';
-        }
-      });
-    }
-  };
-  useEffect(() => {
-    if (ref.current) {
-      resetLabelPosition();
-    }
-  }, []);
-  useEffect(() => {
-    if (oneHelperText) {
-      let isError = false;
-      Children.forEach(children, child => {
-        if (!isError && !!child.props.error) {
-          isError = true;
-        }
-      });
-      if (previousError.current !== isError) {
-        previousError.current = isError;
-        ref.current.querySelectorAll('.DGN-UI-TextInput, .DGN-UI-Dropdown, .DGN-UI-InputBase').forEach(node => {
-          node.classList[isError ? 'add' : 'remove']('danger');
-        });
-      }
-    }
-  }, [children]);
-  /* End handler */
-
-  useImperativeHandle(reference, () => ref.current);
-  return jsx("div", {
-    ref: ref,
-    css: FormGroupRoot,
-    className: ['DGN-UI-FormGroup', fullWidth ? 'Form-Group-full-width' : '', oneHelperText ? 'Form-Group-Common' : '', className].join(' ').trim(),
-    ...props
-  }, children);
-}));
-FormGroup.defaultProps = {
-  marginRight: 16,
-  fullWidth: false,
-  oneHelperText: false,
-  className: ''
-};
-FormGroup.propTypes = {
-  fullWidth: PropTypes.bool,
-  oneHelperText: PropTypes.bool,
-  marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired
-};
-export default FormGroup;

package/components/form-control/helper-text/index.js

@@ -1,88 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Typography } from "../..";
-import { getGlobal } from "../../../global";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../../utils";
-const colorMap = new Map([['default', 'semantic/danger'], ['success', 'semantic/success'], ['warning', 'semantic/warning'], ['danger', 'semantic/danger'], ['info', 'semantic/info']]);
-const HelperText = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'HelperText'
-  });
-  const {
-    action = {},
-    disabled,
-    status,
-    className,
-    style,
-    children,
-    id,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  let color = colorMap.get(status);
-  color = getProp(colors, color, color);
-  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(Typography, {
-    ref: ref,
-    css: HelperTextRootCSS(theme),
-    id: id,
-    color: disabled ? getProp(colors, 'system/disabled', 'system/disabled') : color,
-    style: style,
-    className: classNames('DGN-UI-HelperText', className),
-    type: 'p3',
-    fullWidth: false,
-    lineClamp: 1,
-    ...other
-  }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
-}));
-const HelperTextRootCSS = ({
-  spacing
-}) => css`
-    margin-top: ${spacing([0.5])};
-`;
-
-// HelperText.defaultProps = {
-//     disabled: false,
-//     status: 'default',
-//     className: '',
-//     style: {},
-//     children: '',
-// };
-
-HelperText.propTypes = {
-  /** If true, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** status type to display color for input (only available for type is inform) */
-  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
-  /** Class for component. */
-  className: PropTypes.string,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Content to display in component. */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) of Typography */
-  props: PropTypes.any
-};
-export default HelperText;