diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/input-base/UncontrolledInputBase.js

@@ -0,0 +1,499 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from 'components';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    border,
+    borderBottom,
+    borderBottomColor,
+    borderColor,
+    borderNone,
+    borderRadius,
+    bottom,
+    boxBorder,
+    displayFlex,
+    displayNone,
+    fill,
+    flexRow,
+    inset,
+    insetX,
+    itemsCenter,
+    outlineNone,
+    parseHeight,
+    parseMinHeight,
+    parseWidthHeight,
+    pointerEventsNone,
+    positionAbsolute,
+    positionRelative,
+    scaleX,
+    textColor,
+    textEllipsis,
+    top,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, refType as ref, getProp } from 'utils';
+
+const UncontrolledInputBase = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'InputBase' });
+        const {
+            action = {},
+            autoComplete,
+            autoWidth: autoWidthProp,
+            className,
+            defaultValue,
+            disabled,
+            endIcon,
+            endIconProps,
+            hoverTooltip,
+            iconStyle,
+            inputProps,
+            inputRef: inputRefProp = useRef(null),
+            inputStyle,
+            name,
+            nonStyle,
+            onBlur,
+            onChange,
+            onFocus,
+            onInput,
+            onKeyDown,
+            onKeyUp,
+            placeholder: placeholderProp,
+            readOnly,
+            startIcon,
+            startIconProps,
+            status,
+            type,
+            value,
+            viewType,
+            ...other
+        } = props;
+
+        const autoWidth = !autoWidthProp && inputProps?.autoWidth ? inputProps.autoWidth : autoWidthProp;
+
+        const placeholder = placeholderProp || getGlobal('inputPlaceholder');
+
+        const _onChange = e => {
+            onChange && onChange(e);
+            dynamicWidth(e);
+        };
+
+        const inputRef = useRef(null);
+        const ref = useRef(null);
+        const canvas = document.createElement('canvas');
+        const styleInputBase = useRef(null);
+        const widthInit = useRef(null);
+
+        const isEnabled = !readOnly && !disabled;
+
+        const _InputBaseCSS = InputBaseCSS(readOnly, getProp(colors, status, status), theme);
+        const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly, theme);
+        const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip, theme);
+        const _TypoCSS = TypoCSS(disabled, theme);
+        const _InputBaseIconCSS = InputBaseIconCSS(theme);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = inputRef.current || {};
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const saveInitInfo = refs => {
+            if (!autoWidth) return;
+            const style = window.getComputedStyle(refs) || refs.currentStyle;
+            if (!widthInit.current) widthInit.current = parseInt(style.width);
+            styleInputBase.current = style;
+        };
+
+        const dynamicWidth = e => {
+            if (!autoWidth || !inputRef.current) return;
+            if (!canvas || !styleInputBase.current || !inputRef.current) return;
+            const context = canvas.getContext('2d');
+            context.font = styleInputBase.current.font;
+
+            const { width } = context.measureText(e.target.value);
+            inputRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
+        };
+
+        /* Start component */
+        const newClass = viewType + (viewType === 'none' || nonStyle ? ' non-style' : '');
+
+        const StartIcon = useMemo(() => {
+            let node = startIcon;
+            if (typeof node === 'string') {
+                node = <Icon name={startIcon} style={iconStyle} {...startIconProps} />;
+            }
+            return (
+                <div
+                    css={_InputBaseIconCSS}
+                    className={classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className)}
+                    {...startIconProps}
+                >
+                    {node}
+                </div>
+            );
+        }, [startIcon, startIconProps, iconStyle]);
+
+        const EndIcon = useMemo(() => {
+            let node = endIcon;
+            if (typeof node === 'string') {
+                node = <Icon name={endIcon} style={iconStyle} {...endIconProps} />;
+            }
+            return (
+                <div
+                    css={_InputBaseIconCSS}
+                    className={classNames('DGN-UI-InputBase-End-Icon', endIconProps.className)}
+                    {...endIconProps}
+                >
+                    {node}
+                </div>
+            );
+        }, [endIcon, endIconProps, iconStyle]);
+
+        return (
+            <div
+                ref={ref}
+                css={[[_InputBaseCSS, _SingleLineCSS, disabled && DisabledCSS(theme)]]}
+                className={classNames('DGN-UI-InputBase', 'DGN-UI-UncontrolledInputBase', newClass, className)}
+                {...other}
+            >
+                {startIcon ? StartIcon : null}
+                <input
+                    type={type}
+                    autoComplete={autoComplete}
+                    placeholder={isEnabled ? placeholder : ''}
+                    defaultValue={defaultValue}
+                    readOnly={readOnly}
+                    style={inputStyle || inputProps?.style}
+                    className={classNames('DGN-UI-InputBase-Input', newClass, inputProps?.className)}
+                    ref={refs => {
+                        if (!refs) return;
+                        inputRef.current = refs;
+                        typeof inputRefProp === 'function' ? inputRefProp(refs) : (inputRefProp.current = refs);
+                        saveInitInfo(refs);
+                    }}
+                    css={_InputCSS}
+                    onKeyDown={onKeyDown}
+                    onKeyUp={onKeyUp}
+                    onInput={onInput}
+                    onBlur={onBlur}
+                    onFocus={onFocus}
+                    disabled={disabled}
+                    name={name}
+                    value={value}
+                    onChange={_onChange}
+                    {...inputProps}
+                />
+                {!isEnabled && hoverTooltip ? (
+                    <Typography
+                        css={_TypoCSS}
+                        className={classNames(newClass, inputProps?.className)}
+                        lineClamp={1}
+                        hoverTooltip
+                        type={'p1'}
+                        style={{
+                            lineHeight: '26px',
+                            width: '100%',
+                        }}
+                    >
+                        {value ?? ''}
+                    </Typography>
+                ) : null}
+                {endIcon ? EndIcon : null}
+            </div>
+        );
+        /* End component */
+    })
+);
+
+const DisabledCSS = ({ colors }) => css`
+    ${pointerEventsNone};
+    ${borderColor(getProp(colors, 'system/disabled'))};
+    &::before {
+        ${borderBottomColor(getProp(colors, 'system/disabled'))};
+    }
+    &.outlined {
+        ${bgColor(getProp(colors, 'fill/disabled'))};
+    }
+    .DGN-UI-InputBase-Start-Icon,
+    .DGN-UI-InputBase-End-Icon {
+        &:not(.non-effect),
+        &.allow-disabled {
+            path {
+                ${fill(getProp(colors, 'system/disabled'))};
+            }
+        }
+    }
+`;
+
+const InputBaseCSS = (readOnly, status, { colors, spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${boxBorder};
+    &:hover,
+    &:focus-within {
+        .DGN-UI-InputBase-Start-Icon:not(.non-effect) {
+            path {
+                ${fill(getProp(colors, 'system/active'))};
+            }
+        }
+    }
+    &.outlined {
+        ${border(1, getProp(colors, 'line/normal'))};
+        ${borderRadius(4)};
+        padding: ${spacing([1.75, 4])};
+        &:not(:focus-within):hover {
+            ${!readOnly &&
+            css`
+                ${bgColor(getProp(colors, 'fill/hover'))};
+                ${borderColor(getProp(colors, 'line/hover'))};
+                input,
+                textarea {
+                    ::placeholder {
+                        ${textColor(getProp(colors, 'system/active'))};
+                    }
+                }
+            `};
+        }
+        &:focus-within {
+            ${!readOnly &&
+            css`
+                ${borderColor(getProp(colors, 'line/focus'))};
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+                &::after {
+                    ${borderColor('inherit')};
+                }
+            `}
+        }
+        &::after {
+            content: '';
+            ${positionAbsolute};
+            ${borderRadius(4)};
+            ${pointerEventsNone};
+            ${border(2, 'transparent')};
+            ${inset(-2)};
+        }
+    }
+    &.underlined {
+        padding-top: ${spacing([1])};
+        padding-bottom: ${spacing([1])};
+        &:not(:focus-within):hover {
+            ${!readOnly &&
+            css`
+                &::before {
+                    ${borderBottomColor(getProp(colors, 'line/hover'))};
+                }
+            `};
+            input,
+            textarea {
+                ::placeholder {
+                    ${textColor(getProp(colors, 'system/active'))};
+                }
+            }
+        }
+        &:focus-within {
+            ${!readOnly &&
+            css`
+                &::after {
+                    ${borderBottomColor(getProp(colors, 'line/focus'))};
+                    ${scaleX(1)};
+                }
+            `}
+        }
+        &::before {
+            content: '';
+            ${positionAbsolute};
+            ${insetX(0)};
+            ${bottom(0)};
+            ${borderBottom(1, getProp(colors, 'line/normal'))};
+        }
+        &::after {
+            content: '';
+            ${positionAbsolute};
+            ${insetX(0)};
+            ${bottom(-1)};
+            ${borderBottom(2, 'transparent')};
+            ${scaleX(0)};
+            transform-origin: center;
+            transition: all 0.2s ease;
+        }
+    }
+    &.non-style {
+        padding-top: ${spacing([1])};
+        padding-bottom: ${spacing([1])};
+        border-color: transparent !important;
+        box-shadow: none !important;
+        background-color: transparent !important;
+        input,
+        textarea {
+            background-color: transparent !important;
+        }
+        &:before,
+        &:after {
+            border-color: transparent !important;
+        }
+    }
+    ${status !== 'default' &&
+    css`
+        border-color: ${status} !important;
+        &::before {
+            border-color: ${status} !important;
+        }
+    `}
+    & + .DGN-UI-HelperText {
+        ${positionAbsolute};
+        ${parseMinHeight(16)};
+        ${top('100%')};
+    }
+`;
+
+const SingleLineCSS = (autoWidth, readOnly, { colors }) => css`
+    ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
+    ${itemsCenter};
+    flex: 1 1 auto;
+    &:focus-within {
+        ${!readOnly &&
+        css`
+            ${borderBottomColor(getProp(colors, 'semantic/info'))};
+            &::after {
+                ${borderBottomColor('inherit')};
+                ${scaleX(1)};
+            }
+        `}
+    }
+    &.outlined {
+        ${parseHeight(40)};
+        ${bgColor(getProp(colors, 'system/standard'))};
+    }
+`;
+
+const InputCSS = (autoWidth, isEnabled, hoverTooltip, { colors, spacing, typography }) => css`
+    ${parseWidthHeight(autoWidth ? 10 : '100%', 24)};
+    ${borderNone};
+    ${outlineNone};
+    transition: all 0.1s;
+    ${textColor(getProp(colors, 'text/main'))};
+    ${bgColor('transparent')};
+    padding-top: ${spacing([0])};
+    padding-bottom: ${spacing([0])};
+    ${typography.paragraph1};
+    ${textEllipsis};
+    &::placeholder {
+        ${textColor(getProp(colors, 'text/sub'))};
+        ${typography.paragraph1};
+    }
+    &:focus {
+        ${bgColor('transparent')};
+        ${textColor(getProp(colors, 'system/active'))};
+    }
+    &:hover {
+        ${textColor(getProp(colors, 'system/active'))};
+    }
+    &.underlined {
+        padding-left: ${spacing([0])};
+        padding-right: ${spacing([0])};
+    }
+    &:disabled {
+        ${bgColor('transparent')};
+    }
+    ${!isEnabled && hoverTooltip && displayNone};
+`;
+
+const TypoCSS = (disabled, { colors }) => css`
+    ${parseHeight(24)};
+    &:focus {
+        ${bgColor('transparent')};
+        ${textColor(getProp(colors, 'system/active'))};
+    }
+    &:hover {
+        ${textColor(getProp(colors, 'system/active'))};
+    }
+    ${disabled && userSelectNone};
+`;
+
+const InputBaseIconCSS = ({ spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${textColor('inherit')};
+    &.DGN-UI-InputBase-Start-Icon {
+        margin-right: ${spacing([1])};
+        & + input {
+            padding-left: 0px;
+        }
+    }
+    &.DGN-UI-InputBase-End-Icon {
+        margin-left: ${spacing([1])};
+    }
+`;
+
+UncontrolledInputBase.propTypes = {
+    /** This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). */
+    autoComplete: PropTypes.string,
+    /** If `true`, the width of the component will automatically be set according to the contents inside the input, don't run with multiline = true */
+    autoWidth: PropTypes.bool,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The default value. Use when the component is not controlled. */
+    defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** If `true`, the component is disabled.*/
+    disabled: PropTypes.bool,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
+    endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Props of end icon. */
+    endIconProps: PropTypes.object,
+    /** Style inline of icon. */
+    iconStyle: PropTypes.object,
+    /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+    inputProps: PropTypes.object,
+    /** Pass a ref to the input element. */
+    inputRef: ref,
+    /** Style inline of input element. */
+    inputStyle: PropTypes.object,
+    /** Callback fired when the input is blurred. */
+    onBlur: PropTypes.func,
+    /** Callback fired when the value is changed. */
+    onChange: PropTypes.func,
+    /** Callback fired when the input is focused. */
+    onFocus: PropTypes.func,
+    /** Callback fired when input. */
+    onInput: PropTypes.func,
+    /** Callback fired when pressing a key. */
+    onKeyDown: PropTypes.func,
+    /** Callback fired when releases a key. */
+    onKeyUp: PropTypes.func,
+    /** The short hint displayed in the input before the user enters a value. */
+    placeholder: PropTypes.string,
+    /** If `true`, the component is readonly. */
+    readOnly: PropTypes.bool,
+    /** If `true`, the input element is required. */
+    required: PropTypes.bool,
+    /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
+    startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** Props of start icon. */
+    startIconProps: PropTypes.object,
+    /** Status type to display color for input. */
+    status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
+    /** The value of the input element, required for a controlled component. */
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** The variant to use. */
+    viewType: PropTypes.oneOf(['underlined', 'outlined', 'none']),
+};
+
+export default UncontrolledInputBase;