diginet-core-ui 1.3.24

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

@@ -0,0 +1,292 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useState, useEffect, useRef, useImperativeHandle, forwardRef, Fragment } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { InputBase, Label } from '../../';
+import Icon from '../../../icons';
+import { randomString, updatePosition } from '../../../utils';
+import { useTheme } from '../../../theme';
+const {
+  colors,
+  typography: {
+    fontSize,
+    fontFamily
+  }
+} = useTheme();
+const timing = {};
+const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  className,
+  label,
+  placeholder,
+  startIcon,
+  viewType,
+  value,
+  openOnClickAt,
+  bgColor,
+  style,
+  inputProps,
+  inputStyle,
+  labelProps,
+  inputRef,
+  children,
+  zIndex,
+  onOpened,
+  onClosed,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const inputBaseRef = useRef(null);
+  const dropdownBoxRef = useRef(null);
+  const dropdownIconRef = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const [open, setOpen] = useState(false);
+  /* Start styled */
+
+  const DropdownBoxRoot = css`
+        &.DGN-UI-Dropdown-Box {
+            display: block;
+            position: relative;
+            min-width: 150px;
+            height: max-content;
+            .end-icon > .DGN-UI-Icon {
+                transition: transform 250ms;
+            }
+            &.dropdown-showing {
+                .end-icon > .DGN-UI-Icon {
+                    transform: rotateX(180deg);
+                }
+            }
+            .DGN-UI-InputBase {
+                background-color: ${bgColor ? bgColor === true ? colors.bgDisabled : bgColor : 'inherit'};
+                &.underlined {
+                    height: 32px;
+                }
+                &.dropdown-focus {
+                    background-color: inherit;
+                    &::after {
+                        border-bottom-color: ${colors.info};
+                        transform: scaleX(1);
+                    }
+                }
+            }
+        }
+    `;
+  const DropdownBoxCSS = css`
+		display: block;
+        position: fixed;
+		width: 100%;
+		height: auto;
+        max-height: 80%;
+		overflow: auto;
+        padding: 16px;
+        font-size: ${fontSize};
+        font-family: ${fontFamily};
+        background-color: #FFF;
+		box-sizing: border-box;
+		border-radius: 4px;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        box-sizing: border-box;
+        opacity: 0;
+        transition: opacity 0.3s;
+        z-index: ${zIndex};
+		&::-webkit-scrollbar {
+			width: 8px;
+			background-color: #FFF !important;
+            border-radius: 4px;
+		}
+		&::-webkit-scrollbar-thumb {
+			border-radius: 4px;
+			mix-blend-mode: normal;
+			background-color: ${colors.scrollbar} !important;
+			background-clip: content-box;
+		}
+        .DGN-UI-TreeView {
+            padding: 1px;
+        }
+    `;
+  /* End styled */
+
+  /* Start handler */
+
+  const onTriggerDropdown = e => {
+    if (!ref.current.classList.contains('dropdown-showing')) {
+      ref.current.classList.add('dropdown-showing');
+      inputBaseRef.current.classList.add('dropdown-focus');
+      openDropdownBox();
+    } else {
+      closeDropdownBox(true);
+      e.currentTarget.blur();
+    }
+  };
+
+  const onClickOutsideOfInput = event => {
+    if ((!ref.current || !ref.current.contains(event.target)) && (!dropdownBoxRef.current || !dropdownBoxRef.current.contains(event.target))) {
+      closeDropdownBox();
+    }
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      closeDropdownBox();
+    }
+  };
+
+  const openDropdownBox = () => {
+    setOpen(true);
+    setTimeout(() => {
+      const {
+        top,
+        left,
+        height,
+        width
+      } = ref.current.getBoundingClientRect();
+      let positionTop = top + height + 2;
+      dropdownBoxRef.current.style.cssText = `top: ${positionTop}px; left: ${left}px; width: ${width}px;`;
+      dropdownBoxRef.current.style.opacity = 1; // window.addEventListener('resize', customizeWidthDropdown);
+      // window.addEventListener('scroll', updatePositionDropdown);
+
+      document.addEventListener('click', onClickOutsideOfInput);
+      document.addEventListener('keydown', pressESCHandler);
+      !!onOpened && onOpened(ref.current);
+    }, 10);
+  };
+
+  const closeDropdownBox = certain => {
+    const portals = document.querySelectorAll('.DGN-UI-Portal');
+
+    if (!certain && portals && portals.length > 1 && Array.from(portals)[portals.length - 1] && !Array.from(portals)[portals.length - 1].contains(ref.current)) {
+      return;
+    }
+
+    if (dropdownBoxRef.current) {
+      dropdownBoxRef.current.style.pointerEvents = `none`;
+      dropdownBoxRef.current.style.opacity = 0;
+
+      if (ref.current) {
+        ref.current.classList.remove('dropdown-showing');
+      }
+
+      if (inputBaseRef.current) {
+        inputBaseRef.current.classList.remove('dropdown-focus');
+      }
+
+      document.removeEventListener('click', onClickOutsideOfInput);
+      timing[unique + 'Box'] = setTimeout(() => {
+        clearTimeout(timing[unique + 'Box']);
+        timing[unique + 'Box'] = null;
+        setOpen(false);
+        !!onClosed && onClosed(ref.current);
+      }, 300);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      closeDropdownBox();
+    };
+  }, []);
+  /* End handler */
+
+  useImperativeHandle(reference, () => ({
+    open: () => {
+      openDropdownBox();
+    },
+    close: () => {
+      closeDropdownBox(true);
+    }
+  }));
+  const dropdownIcon = jsx(Icon, {
+    name: 'ArrowDown',
+    onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null,
+    ref: dropdownIconRef
+  });
+  return jsx(Fragment, null, jsx("div", _extends({
+    ref: ref,
+    css: DropdownBoxRoot,
+    className: ['DGN-UI-Dropdown-Box', className].join(' ').trim(),
+    style: style
+  }, props), label ? jsx(Label, _extends({
+    required: required
+  }, labelProps), label) : null, jsx(InputBase, _extends({}, inputProps, {
+    style: inputStyle,
+    viewType: viewType,
+    ref: inputBaseRef,
+    inputRef: inputRef,
+    placeholder: placeholder,
+    value: value,
+    startIcon: startIcon,
+    endIcon: dropdownIcon,
+    onClick: openOnClickAt === 'full' ? onTriggerDropdown : null
+  }))), open && /*#__PURE__*/createPortal(jsx("div", {
+    ref: dropdownBoxRef,
+    className: `DGN-UI-Portal DGN-DropdownBox-${unique}`,
+    css: DropdownBoxCSS
+  }, children), document.body));
+}));
+DropdownBox.defaultProps = {
+  className: '',
+  label: '',
+  placeholder: '',
+  startIcon: 'search',
+  openOnClickAt: 'icon',
+  inputProps: {},
+  zIndex: 9001
+};
+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,
+
+  /** 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,
+
+  /** style inline of label in DropdownBox component */
+  labelProps: PropTypes.object,
+
+  /** z-index for DropdownBox component */
+  zIndex: PropTypes.number,
+
+  /** 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

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

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

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

@@ -0,0 +1,118 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useRef, useEffect, forwardRef, Children, cloneElement, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  fullWidth,
+  oneHelperText,
+  marginRight,
+  className,
+  children,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const previousError = useRef(false);
+  /* Start styled */
+
+  const FormGroupRoot = css`  
+        display: flex;
+        position: relative;
+        align-items: flex-end;
+        box-sizing: border-box;
+        width: auto;
+        &.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", _extends({
+    ref: ref,
+    css: FormGroupRoot,
+    className: ['DGN-UI-FormGroup', fullWidth ? 'Form-Group-full-width' : '', oneHelperText ? 'Form-Group-Common' : '', className].join(' ').trim()
+  }, props), children);
+}));
+MoneyInput.defaultProps = {
+  marginRight: 16,
+  fullWidth: false,
+  oneHelperText: false,
+  className: ''
+};
+MoneyInput.propTypes = {
+  fullWidth: PropTypes.bool,
+  oneHelperText: PropTypes.bool,
+  marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+export default MoneyInput;