diginet-core-ui 1.3.24

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

@@ -0,0 +1,71 @@
+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, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Typography } from '../../';
+import theme from '../../../theme/settings';
+import { getGlobal } from '../../../global';
+const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  disabled,
+  status,
+  className,
+  children,
+  ...props
+}, ref) => {
+  /* Start styled */
+  const HelperTextRoot = css`
+        margin-top: 4px;
+        &.info {
+            color: ${theme.colors.info};
+        }
+        &.success {
+            color: ${theme.colors.success};
+        }
+        &.warning {
+            color: ${theme.colors.warning};
+        }
+        &.danger {
+            color: ${theme.colors.danger};
+        }
+        &.disabled {
+            color: ${theme.colors.disabled};
+        }
+    `;
+  /* End styled */
+
+  return jsx(Typography, _extends({
+    ref: ref,
+    type: 'p3',
+    color: theme.colors.danger,
+    fullWidth: false,
+    css: HelperTextRoot,
+    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim()
+  }, props), typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
+}));
+HelperText.defaultProps = {
+  disabled: false,
+  status: 'default',
+  className: '',
+  children: ''
+};
+HelperText.propTypes = {
+  /** prevent all event if true */
+  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 use in for helper text */
+  className: PropTypes.string,
+
+  /** the content to display in HelperText */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /** any props else */
+  props: PropTypes.any
+};
+export default HelperText;

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

@@ -0,0 +1,733 @@
+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, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { renderIcon } from '../../../utils';
+import theme from '../../../theme/settings';
+const {
+  colors,
+  typography: {
+    fontSize,
+    fontFamily
+  }
+} = theme;
+const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  type,
+  viewType,
+  defaultValue,
+  value,
+  placeholder,
+  resize,
+  status,
+  className,
+  autoComplete,
+  autoFocus,
+  disabled,
+  readOnly,
+  multiline,
+  nonStyle,
+  refs,
+  startIcon,
+  endIcon,
+  startIconProps,
+  endIconProps,
+  inputRef,
+  inputProps,
+  iconStyle,
+  inputStyle,
+  rows,
+  maxRows,
+  onChange,
+  onBlur,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onKeyUp,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  const inputBaseRef = useRef(null);
+  const valueArray = useRef([]);
+  /* Start styled */
+
+  const inputBaseRoot = css`
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        position: relative;
+        height: max-content;
+        &:hover,
+        &:focus-within {
+            .start-icon:not(.non-effect) {
+                path {
+                    fill: ${colors.primary};
+                }
+            }
+        }
+        &:focus-within {
+              border-bottom-color: ${colors.borderFocus};
+            &::after {
+                border-bottom-color: inherit;
+                transform: scaleX(1);
+            }
+        }
+        &.underlined {
+            padding-bottom: 4px;
+            padding-top: 4px;
+            &:not(:focus-within):hover {
+                &::before {
+                    border-bottom-color: ${colors.borderHover};
+                }
+            }
+            &:focus-within {
+                ${!readOnly && `
+                    border-bottom-color: ${colors.borderFocus};
+                    &::after {
+                        border-bottom-color: inherit;
+                        transform: scaleX(1);
+                    }
+                `}
+            }
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-bottom: 1px solid ${colors.border};
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0px;
+                right: 0px;
+                bottom: -1px;
+                border-bottom: 2px solid transparent;
+                transform: scaleX(0);
+                transform-origin: center;
+                transition: all 0.2s ease;
+            }
+        }
+        &.outlined {
+            border: 1px solid ${colors.border};
+            border-radius: 4px;
+            height: 40px;
+            box-sizing: border-box;
+            background-color: ${colors.white};
+            &:not(:focus-within):hover {
+                background-color: ${colors.hover};
+                border-color: ${colors.borderHover};
+                input {
+                    background-color: ${colors.hover};
+                }
+            }
+            &:focus-within {
+                ${!readOnly && `
+                    border-color: ${colors.borderFocus};
+                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                    &::after {
+                        border-color: inherit;
+                    }
+                `}
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                left: -2px;
+                right: -2px;
+                top: -2px;
+                bottom: -2px;
+                border: 2px solid transparent;
+                border-radius: 4px;
+                pointer-events: none;
+            }
+            .start-icon {
+                margin-left: 16px;
+            }
+            .end-icon {
+                margin-right: 16px;
+            }
+        }
+        &.non-style {
+            border-color: transparent !important;
+            box-shadow: none !important;
+            background-color: transparent !important;
+            input {
+                background-color: transparent !important;
+            }
+            &:before,
+            &:after {
+                border-color: transparent !important;
+            }
+        }
+        &.info {
+            border-color: ${colors.info} !important;
+            &::before {
+                border-color: ${colors.info} !important;
+            }
+        }
+        &.success {
+            border-color: ${colors.success} !important;
+            &::before {
+                border-color: ${colors.success} !important;
+            }
+        }
+        &.warning {
+            border-color: ${colors.warning} !important;
+            &::before {
+                border-color: ${colors.warning} !important;
+            }
+        }
+        &.danger {
+            border-color: ${colors.danger} !important;
+            &::before {
+                border-color: ${colors.danger} !important;
+            }
+        }
+        &.disabled {
+            border-color: ${colors.disabled} !important;
+            pointer-events: none;
+            &::before {
+                border-bottom-color: ${colors.disabled} !important;
+            }
+            &.outlined {
+                background-color: ${colors.bgDisabled};
+            }
+            input {
+                // color: ${colors.disabled};
+            }
+            .start-icon,
+            .end-icon {
+                &:not(.non-effect), &.allow-disabled {
+                    path {
+                        fill: ${colors.disabled};
+                    }
+                }
+            }
+        }
+        & + .DGN-UI-HelperText {
+            min-height: 16px;
+            position: absolute;
+            top: 100%;
+        }
+    `;
+  const inputBaseCSS = css`
+        display: flex;
+        flex: 1 1 auto;
+    `;
+  const inputCSS = css`
+        width: 100%;
+        border: none;
+        outline: none;
+        color: ${colors.input};
+        background-color: transparent;
+        padding-top: 0;
+        font-family: ${fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: ${fontSize};
+        line-height: 20px;
+        height: 24px;
+        &::placeholder {
+            color: ${colors.placeholder};
+            font-family: ${fontFamily};
+            font-size: ${fontSize};
+        }
+        &:focus {
+            background-color: transparent;
+            color: ${colors.primary};
+        }
+        &:hover {
+            color: ${colors.primary};
+        }
+        &.outlined {
+            padding-bottom: inherit;
+            padding-left: 16px;
+            padding-right: 16px;
+        }
+        &.underlined {
+            padding-bottom: 0;
+            padding-left: 0;
+            padding-right: 0;
+        }
+        &:disabled {
+            background-color: transparent;
+        }
+    `;
+  const textAreaCSS = css`
+        display: block;
+        color: ${colors.input};
+        font-family: ${fontFamily};
+        font-size: ${fontSize};
+        line-height: 20px;
+        min-height: max-content;
+        min-width: max-content;
+        outline: none;
+        border: none;
+        background-color: transparent;
+        padding: 2px 0;
+        width: 100%;
+        overflow-y: auto;
+        position: relative;
+        resize: ${resize};
+        box-sizing: border-box;
+        &:disabled {
+            color: ${colors.disabled};
+        }
+        &:hover:not(:focus-within) {
+            border-color: ${colors.borderHover};
+            color: ${colors.primary};
+            ::placeholder {
+                color: ${colors.primary};
+            }
+        }
+        &:focus-within {
+            color: ${colors.primary};
+        }
+        &::-webkit-scrollbar {
+            width: 4px;
+            background-color: white;
+            border-radius: 4px;
+        }
+        &::-webkit-scrollbar-thumb{
+            border-radius: 10px;
+            mix-blend-mode: normal;
+            background-color: ${colors.bgDisabled};
+            background-clip: content-box;
+        }
+    `;
+  const multilineCSS = css`
+        display: block;
+        position: relative;
+        height: max-content;
+        width: 100%;
+        box-sizing: border-box;
+        &.outlined {
+            border: 1px solid ${colors.border};
+            border-radius: 4px;
+            /* height: 30px; */
+            padding: 7px 16px;
+            .css-${textAreaCSS.name} {
+                height: 24px;
+            }
+            &:not(:focus-within):hover {
+                background-color: ${colors.hover};
+                border-color: ${colors.borderHover};
+                input {
+                    background-color: ${colors.hover};
+                }
+            }
+            &:focus-within {
+                ${!readOnly && `
+                    border-color: ${colors.borderFocus};
+                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                    &::after {
+                        border-color: inherit;
+                    }
+                `}
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                left: -2px;
+                right: -2px;
+                top: -2px;
+                bottom: -2px;
+                border: 2px solid transparent;
+                border-radius: 4px;
+                pointer-events: none;
+            }
+        }
+        &.underlined {
+            border: 0;
+            /* height: 26px; */
+            padding: 4px 0;
+            .css-${textAreaCSS.name} {
+                height: 24px;
+            }
+            &:not(:focus-within):hover {
+                &::before {
+                    border-bottom-color: ${colors.borderHover};
+                }
+            }
+            &:focus-within {
+                ${!readOnly && `
+                    &::after {
+                        border-bottom-color: ${colors.borderFocus};
+                        transform: scaleX(1);
+                    }
+                `}
+            }
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-bottom: 1px solid ${colors.border};
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0px;
+                right: 0px;
+                bottom: -1px;
+                border-bottom: 2px solid transparent;
+                transform: scaleX(0);
+                transform-origin: center;
+                transition: all 0.2s ease;
+            }
+        }
+        &.disabled {
+            pointer-events: none;
+            resize: none;
+            color: ${colors.disabled};
+            &.outlined {
+                background-color: ${colors.bgDisabled};
+            }
+            &.underlined::before {
+                border-bottom-color: ${colors.disabled} !important;
+            }
+        }
+        & + .DGN-UI-HelperText {
+            min-height: 16px;
+            position: absolute;
+            top: 100%;
+        }
+    `;
+  const inputBaseIconCSS = css`
+        display: flex;
+        color: inherit;
+        &.start-icon {
+            margin-right: 4px;
+            & + input {
+                padding-left: 0;
+            }
+        }
+        &.end-icon {
+            margin-left: 4px;
+        }
+    `;
+  /* End styled */
+
+  /* Start handler */
+
+  const onInputTextArea = e => {
+    if (!/\d+/.test(rows)) {
+      const el = e.target;
+      const defaultHeight = 24;
+
+      if (el.value) {
+        el.style.height = 0;
+        el.style.height = Math.max(defaultHeight, el.scrollHeight) + 'px';
+      } else {
+        el.style.height = defaultHeight + 'px';
+      }
+    }
+
+    !!onInput && onInput(e);
+  };
+
+  useEffect(() => {
+    !!refs && refs(ref);
+
+    if (defaultValue !== undefined && defaultValue !== '') {
+      if (multiline && !/\d+/.test(rows)) {
+        inputBaseRef.current.style.height = 0;
+        inputBaseRef.current.style.height = Math.max(24, inputBaseRef.current.scrollHeight) + 'px';
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (/\d+/.test(rows)) {
+      inputBaseRef.current.style.height = 20 * rows + 4 + 'px';
+      return () => {
+        if (inputBaseRef.current) {
+          inputBaseRef.current.style.height = null;
+        }
+      };
+    }
+  }, [rows]);
+  useEffect(() => {
+    if (/\d+/.test(maxRows)) {
+      inputBaseRef.current.style.maxHeight = 20 * maxRows + 4 + 'px';
+      return () => {
+        if (inputBaseRef.current) {
+          inputBaseRef.current.style.maxHeight = null;
+        }
+      };
+    }
+  }, [maxRows]);
+  useEffect(() => {
+    if (viewType === 'outlined' && endIcon) {
+      inputBaseRef.current.style.paddingRight = '0';
+      return () => {
+        if (inputBaseRef.current) {
+          inputBaseRef.current.style.paddingRight = null;
+        }
+      };
+    }
+  }, [viewType]);
+  useEffect(() => {
+    if (multiline && !/\d+/.test(rows) && !(inputBaseRef.current.value || inputBaseRef.current.value === 0)) {
+      inputBaseRef.current.style.height = '24px';
+    }
+
+    if (autoFocus) {
+      inputBaseRef.current.focus();
+    }
+  }, [multiline]);
+  useEffect(() => {
+    if (placeholder !== undefined) {
+      inputBaseRef.current.placeholder = placeholder;
+    }
+  }, [placeholder]);
+  useEffect(() => {
+    const defaultHeight = 24;
+
+    if (value !== undefined) {
+      valueArray.current.push(value);
+      inputBaseRef.current.value = value;
+
+      if (multiline && !/\d+/.test(rows)) {
+        inputBaseRef.current.style.height = 0;
+        inputBaseRef.current.style.height = Math.max(defaultHeight, inputBaseRef.current.scrollHeight) + 'px';
+      }
+    }
+
+    return () => {
+      if (value !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
+        inputBaseRef.current.style.height = defaultHeight + 'px';
+      }
+    };
+  }, [value]);
+  useEffect(() => {
+    if (disabled) {
+      if (ref.current) {
+        ref.current.classList.add('disabled');
+      }
+
+      inputBaseRef.current.disabled = disabled;
+    }
+
+    return () => {
+      ref.current && ref.current.classList.remove('disabled');
+      inputBaseRef.current && inputBaseRef.current.removeAttribute('disabled');
+    };
+  }, [disabled]);
+  /* End handler */
+
+  /* Start component */
+
+  const newClass = (viewType === 'outlined' ? 'outlined' : 'underlined') + (nonStyle ? ' non-style' : '');
+  const MultipleInputComp = jsx("div", _extends({
+    css: multilineCSS,
+    className: ['DGN-UI-InputBase', newClass, className].join(' ').trim(),
+    ref: ref
+  }, props), jsx("textarea", _extends({
+    type: "text",
+    placeholder: placeholder,
+    defaultValue: defaultValue
+  }, inputProps, {
+    css: textAreaCSS,
+    readOnly: readOnly,
+    style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
+    className: inputProps.className ? inputProps.className : '',
+    ref: inputBaseRef,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onInput: onInputTextArea,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus
+  })));
+  const InputComp = jsx("div", _extends({
+    css: inputBaseRoot,
+    ref: ref
+  }, props, {
+    className: ['DGN-UI-InputBase', newClass, className, status].join(' ').trim()
+  }), jsx("div", {
+    css: inputBaseCSS
+  }, !!startIcon && jsx("div", _extends({
+    css: inputBaseIconCSS
+  }, startIconProps, {
+    className: 'start-icon ' + (startIconProps.className ? startIconProps.className : '')
+  }), renderIcon(startIcon, typeof startIcon === 'string' && startIcon.length < 20 ? 'effect' : null, {
+    onClick: startIconProps.onClick ? null : () => inputBaseRef.current.focus(),
+    style: {
+      padding: 0,
+      minHeight: '24px',
+      ...iconStyle
+    },
+    viewBox: true
+  })), jsx("input", _extends({
+    type: type,
+    autoComplete: autoComplete,
+    placeholder: placeholder,
+    defaultValue: defaultValue
+  }, inputProps, {
+    readOnly: readOnly,
+    style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
+    className: [newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className].join(' '),
+    ref: inputBaseRef,
+    css: inputCSS,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onInput: onInput,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }))), !!endIcon && jsx("div", _extends({
+    css: inputBaseIconCSS
+  }, endIconProps, {
+    className: 'end-icon ' + (endIconProps.className ? endIconProps.className : '')
+  }), renderIcon(endIcon, null, {
+    style: {
+      padding: 0,
+      minHeight: '24px',
+      ...iconStyle
+    },
+    viewBox: true
+  })));
+  const InputBaseComp = multiline ? MultipleInputComp : InputComp;
+  /* End component */
+
+  useImperativeHandle(reference, () => ref.current);
+  useImperativeHandle(inputRef, () => {
+    inputBaseRef.current.resetValue = () => {
+      inputBaseRef.current.value = value;
+      return value;
+    };
+
+    inputBaseRef.current.setPreviousValue = () => {
+      valueArray.current.pop();
+      const preValue = valueArray.current[valueArray.current.length - 1];
+      const previousValue = preValue || preValue === 0 ? preValue : defaultValue || '';
+      inputBaseRef.current.value = previousValue;
+      return previousValue;
+    };
+
+    return inputBaseRef.current;
+  });
+  return InputBaseComp;
+}));
+InputBase.defaultProps = {
+  autoComplete: 'off',
+  className: '',
+  defaultValue: '',
+  placeholder: '',
+  resize: 'none',
+  status: 'default',
+  type: 'text',
+  viewType: 'underlined',
+  autoFocus: false,
+  nonStyle: false,
+  disabled: false,
+  multiline: false,
+  readOnly: false,
+  required: false,
+  endIconProps: {},
+  iconStyle: {},
+  inputProps: {},
+  inputStyle: {},
+  startIconProps: {}
+};
+InputBase.propTypes = {
+  /** the type of border you want to display */
+  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
+  /** default value is displayed for first render */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** the displayed value for each change */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** hints for input */
+  placeholder: PropTypes.string,
+
+  /** type auto complete of input (like new-password) */
+  autoComplete: PropTypes.string,
+
+  /** allow resize multiline input (resize css style) */
+  resize: PropTypes.string,
+
+  /** class for InputBase component */
+  className: PropTypes.string,
+
+  /** the number of rows of textarea */
+  rows: PropTypes.number,
+
+  /** the maximum of rows of textarea */
+  maxRows: PropTypes.number,
+
+  /** status type to display color for input (only available for type is inform) */
+  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
+
+  /** use multiline input if true */
+  multiline: PropTypes.bool,
+
+  /** transparent border color if true */
+  nonStyle: PropTypes.bool,
+
+  /** prevent all event if true, hide all icon */
+  disabled: PropTypes.bool,
+
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
+  /** auto focus after first render */
+  autoFocus: PropTypes.bool,
+
+  /** At least one character is required */
+  required: PropTypes.bool,
+
+  /** icon element display in the left of input */
+  startIcon: PropTypes.any,
+
+  /** icon element display in the right of input */
+  endIcon: PropTypes.any,
+
+  /** props of input in InputBase component */
+  inputProps: PropTypes.object,
+
+  /** props of start icon in InputBase component */
+  startIconProps: PropTypes.object,
+
+  /** props of end icon in InputBase component */
+  endIconProps: PropTypes.object,
+
+  /** style inline of icon in InputBase component */
+  iconStyle: PropTypes.object,
+
+  /** style inline of input in InputBase component */
+  inputStyle: PropTypes.object,
+
+  /** The function to get ref of Dropdown component */
+  refs: PropTypes.func,
+
+  /** on key down function */
+  onKeyDown: PropTypes.func,
+
+  /** on key up function */
+  onKeyUp: PropTypes.func,
+
+  /** on input function */
+  onInput: PropTypes.func,
+
+  /** on change function */
+  onChange: PropTypes.func,
+
+  /** on blur function */
+  onBlur: PropTypes.func,
+
+  /** on focus function */
+  onFocus: PropTypes.func,
+
+  /** inputRef of InputBase component */
+  inputRef: PropTypes.any
+};
+export default InputBase;