diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/password-input/index.js

@@ -0,0 +1,259 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, HelperText, InputBase, Label } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, positionRelative } from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, onValidate, refType as ref } from 'utils';
+
+const PasswordInput = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'PasswordInput' });
+        const {
+            action = {},
+            autoComplete,
+            autoFocus,
+            autoWidth,
+            className,
+            defaultValue,
+            delayOnChange,
+            disabled,
+            error,
+            helperTextProps,
+            inputProps,
+            inputRef = useRef(null),
+            inputStyle,
+            label,
+            labelProps,
+            name,
+            nonStyle,
+            onBlur,
+            onChange,
+            onFocus,
+            onInput,
+            onKeyDown,
+            onKeyUp,
+            onPaste,
+            placeholder,
+            readOnly,
+            required,
+            secureText,
+            startIcon,
+            startIconProps,
+            status,
+            style,
+            validates,
+            value: valueProp,
+            viewType,
+            visibilityToggle,
+            ...other
+        } = props;
+
+        const ref = useRef(null);
+
+        const [value, setValue] = useState(valueProp || defaultValue);
+        const [showPassword, setShowPassword] = useState(false);
+
+        const _PasswordInputRoot = PasswordInputRoot(theme);
+
+        const isError = !!error;
+
+        useEffect(() => {
+            setValue(valueProp);
+        }, [valueProp]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const validateResult = validates && onValidate(value, validates, true);
+
+        const setShowHide = () => {
+            setShowPassword(prevState => !prevState);
+        };
+
+        const VisibilityIcon = visibilityToggle ? (
+            <ButtonIcon viewType={'ghost'} name={showPassword ? 'View' : 'UnView'} onClick={setShowHide} />
+        ) : null;
+
+        return (
+            <div
+                ref={ref}
+                css={_PasswordInputRoot}
+                className={classNames('DGN-UI-PasswordInput', className, disabled && 'disabled')}
+                style={style}
+                {...other}
+            >
+                {!!label && (
+                    <Label required={required} disabled={disabled} {...labelProps}>
+                        {label}
+                    </Label>
+                )}
+                <InputBase
+                    autoComplete={autoComplete}
+                    autoFocus={autoFocus}
+                    autoWidth={autoWidth}
+                    className={classNames(secureText && !showPassword && 'DGN-UI-PasswordInput-SecureText')}
+                    defaultValue={defaultValue}
+                    delayOnChange={delayOnChange}
+                    disabled={disabled}
+                    endIcon={VisibilityIcon}
+                    inputProps={inputProps}
+                    inputRef={inputRef}
+                    inputStyle={inputStyle}
+                    nonStyle={nonStyle}
+                    onBlur={onBlur}
+                    onChange={onChange}
+                    onFocus={onFocus}
+                    onInput={onInput}
+                    onKeyDown={onKeyDown}
+                    onKeyUp={onKeyUp}
+                    onPaste={onPaste}
+                    placeholder={placeholder}
+                    readOnly={readOnly}
+                    name={name}
+                    startIcon={startIcon}
+                    startIconProps={startIconProps}
+                    status={isError || validateResult ? 'danger' : status}
+                    type={secureText || showPassword ? 'text' : 'password'}
+                    value={valueProp}
+                    viewType={viewType}
+                />
+                {isError && (
+                    <HelperText {...helperTextProps} disabled={disabled} status={status}>
+                        {error}
+                    </HelperText>
+                )}
+                {!isError && validateResult && (
+                    <HelperText {...helperTextProps} disabled={disabled}>
+                        {validateResult}
+                    </HelperText>
+                )}
+            </div>
+        );
+    })
+);
+
+const PasswordInputRoot = ({ typography }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+    .DGN-UI-PasswordInput-SecureText {
+        input::placeholder {
+            -webkit-text-security: initial;
+            ${typography.fontFamily};
+        }
+        input {
+            -webkit-text-security: disc;
+            ${typography.fontFamilySecurity};
+        }
+    }
+    input::-ms-reveal,
+    input::-ms-clear {
+        display: none;
+    }
+`;
+
+// PasswordInput.defaultProps = {
+//     autoComplete: 'new-password',
+//     autoFocus: false,
+//     autoWidth: false,
+//     className: '',
+//     defaultValue: '',
+//     disabled: false,
+//     error: '',
+//     label: '',
+//     readOnly: false,
+//     required: false,
+//     status: 'default',
+//     viewType: 'underlined',
+//     visibilityToggle: true,
+// };
+
+PasswordInput.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 input element is focused during the first mount. */
+    autoFocus: PropTypes.bool,
+    /** 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,
+    /** Error displayed below input. */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+    helperTextProps: 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,
+    /** The label of the component. */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+    labelProps: 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,
+    /** If `true`, the input type attribute is `text` and use css to secure the content. Use to prevent browser from suggesting password. */
+    secureText: 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 in InputBase component. */
+    startIconProps: PropTypes.object,
+    /** Status type to display color for input. */
+    status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Validation value, argument can:<br/>
+     * * string: the validation rule. Example required.<br/>
+     * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+     * * array: the validation rule list, insist object/string
+     */
+    validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
+    /** 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']),
+    /** If `true`, will show an icon to display the password as plain text. */
+    visibilityToggle: PropTypes.bool,
+};
+
+export default PasswordInput;

package/src/components/form-control/password-input/index.stories.js

@@ -0,0 +1,32 @@
+import { PasswordInput } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import { useTheme } from 'theme';
+import React from 'react';
+
+const theme = useTheme();
+PasswordInput.defaultProps = theme?.components?.PasswordInput?.defaultProps || {};
+
+export default {
+    title: 'Components/PasswordInput',
+    component: PasswordInput,
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'PasswordInput'} />
+            <PasswordInput {...args} />
+        </>
+    );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+    label: 'Label',
+};
+
+export const SecureText = Template.bind({});
+SecureText.args = {
+    label: 'Label',
+    secureText: true,
+};

package/src/components/form-control/phone-input/index.js

@@ -0,0 +1,382 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { InputBase, Label, HelperText, Typography } from '../../';
+import { Vietnam, England } from '../../../icons';
+
+const ensigns = {
+    Vietnam: {
+        icon: <Vietnam />,
+        countryCode: 84,
+        mark: '___ ___ ___',
+    },
+    England: {
+        icon: <England />,
+        countryCode: 44,
+        mark: '____ _______',
+    },
+};
+
+const PhoneInput = memo(
+    forwardRef(
+        (
+            {
+                viewType,
+                ensign,
+                required,
+                hiddenEnsign,
+                label,
+                defaultValue,
+                value,
+                placeholder,
+                autoFocus,
+                disabled,
+                readOnly,
+                multiline,
+                refs,
+                inputRef,
+                inputProps,
+                inputStyle,
+                error,
+                onChange,
+                onBlur,
+                onFocus,
+                onInput,
+                onKeyDown,
+                onKeyUp,
+                labelProps,
+                helperTextProps,
+                ...props
+            },
+            reference
+        ) => {
+            const ref = useRef(null);
+            if (!inputRef) {
+                inputRef = useRef(null);
+            }
+
+            /* Start styled */
+            const PhoneInputRoot = css`
+                display: block;
+                position: relative;
+            `;
+
+            const PhoneInputEnsign = css`
+                display: inline-flex;
+                position: relative;
+                max-height: 24px;
+                align-items: center;
+                svg {
+                    margin-right: 4px;
+                }
+            `;
+            /* End styled */
+
+            let currentKey,
+                isUnicode = 0,
+                isFocus = false,
+                isPaste = false,
+                clipboardText = '';
+
+            /* Start handler */
+            const replaceMark = value => {
+                let result = ensigns[ensign].mark;
+                if (value) {
+                    value = value.replaceAll(' ', '').replace(/_+$/, '');
+                    const length = value.length;
+                    if (length) {
+                        for (let i = 0; i < length; i++) {
+                            result = result.replace('_', value[i]);
+                        }
+                    }
+                }
+                return result;
+            };
+            const onFocusHandler = e => {
+                document.addEventListener('mouseup', onMouseUpHandler);
+                isFocus = true;
+                !!onFocus && onFocus(e);
+            };
+
+            const onMouseUpHandler = () => {
+                const text = window.getSelection().toString();
+                // Start focus and don't selection any text
+                if (!text) {
+                    const value = inputRef.current.value;
+                    const markFirstIndex = value.indexOf('_');
+                    let cursor = inputRef.current.selectionStart;
+                    if (isFocus) {
+                        isFocus = false;
+                        if (markFirstIndex !== -1) {
+                            inputRef.current.setSelectionRange(markFirstIndex, markFirstIndex);
+                        }
+                        return;
+                    }
+                    if (value[cursor] === ' ') {
+                        inputRef.current.setSelectionRange(cursor + 1, cursor + 1);
+                        return;
+                    }
+                    if (markFirstIndex !== -1 && markFirstIndex < cursor) {
+                        inputRef.current.setSelectionRange(markFirstIndex, markFirstIndex);
+                    }
+                }
+            };
+
+            const onBlurHandler = e => {
+                document.removeEventListener('mouseup', onMouseUpHandler);
+                !!onBlur && onBlur(e);
+            };
+
+            const onKeyDownHandler = e => {
+                const key = e.key;
+                const keyCode = e.keyCode;
+                if (/Arrow|Home|End/.test(key) || (/a|x|c|v/i.test(key) && e.ctrlKey)) {
+                    return;
+                }
+                if (keyCode === 231) {
+                    isUnicode = isUnicode > 0 ? 0 : 1;
+                    e.preventDefault();
+                    return false;
+                }
+                if (keyCode === 8 && /^[12]$/.test(isUnicode)) {
+                    isUnicode++;
+                    e.preventDefault();
+                    return false;
+                }
+                if (!/[0-9]|Backspace|Delete/.test(key)) {
+                    isUnicode = -1;
+                    currentKey = key;
+                    e.preventDefault();
+                    return false;
+                }
+                const { value, selectionStart: cursor } = inputRef.current;
+                if (key === 'ArrowRight') {
+                    if (value[cursor] === '_') {
+                        e.preventDefault();
+                        return false;
+                    }
+                    if (!value[cursor + 1].trim()) {
+                        inputRef.current.setSelectionRange(cursor + 1, cursor + 1);
+                    }
+                }
+                if (/[0-9]/.test(key) && !value[cursor]) {
+                    e.preventDefault();
+                    return false;
+                }
+                isUnicode = 0;
+                currentKey = key;
+                !!onKeyDown && onKeyDown(e);
+            };
+
+            const onPasteHandler = e => {
+                clipboardText = (e.clipboardData || window.clipboardData).getData('text');
+                if (!/\d+/.test(clipboardText)) {
+                    e.preventDefault();
+                    return;
+                }
+                isPaste = true;
+            };
+
+            const onChangeHandler = e => {
+                let value = e.target.value;
+                let cursor = e.target.selectionStart;
+                if (isPaste) {
+                    isPaste = false;
+                    value = value.replace(/\s/g, '');
+                    const index = value.indexOf(clipboardText);
+                    if (!index && value[0] === '0') {
+                        value = value.slice(1);
+                    }
+                    const cursorOnPaste = index + clipboardText.length;
+                    const mark = ensigns[ensign].mark;
+                    const lengthOfMark = mark.length;
+                    if (cursorOnPaste < lengthOfMark) {
+                        let newCursor = cursorOnPaste;
+                        while (
+                            mark.slice(0, newCursor).match(/_/g).length < cursorOnPaste &&
+                            newCursor < lengthOfMark
+                        ) {
+                            newCursor++;
+                        }
+                        if (!mark[newCursor].trim()) {
+                            newCursor++;
+                        }
+                        cursor = newCursor;
+                    }
+                }
+                const result = replaceMark(value);
+                if (/\d/.test(currentKey)) {
+                    if (result[cursor] && (!result[cursor].trim() || !result[cursor - 1].trim())) {
+                        cursor++;
+                    }
+                } else if (['Backspace', 'Delete'].includes(currentKey)) {
+                    if (currentKey === 'Backspace' && value[cursor - 1] && !value[cursor - 1].trim()) {
+                        cursor--;
+                    }
+                }
+                e.target.value = result;
+                e.target.setSelectionRange(cursor, cursor);
+
+                if (onChange) {
+                    const el = { ...e };
+                    el.target = { ...e.targe };
+                    el.target.value = '(+' + ensigns[ensign].countryCode + ') ' + result.replaceAll('_', '');
+                    el.value = '0' + result.replace(/\s|_/g, '');
+                    el.countryCode = ensigns[ensign].countryCode;
+                    onChange(el);
+                }
+            };
+
+            useEffect(() => {
+                !!refs && refs(ref);
+                if (defaultValue !== undefined && defaultValue !== '') {
+                    inputRef.current.value = replaceMark(defaultValue.replace(/^0/, ''));
+                }
+                if (autoFocus) {
+                    inputRef.current.focus();
+                    const value = inputRef.current.value;
+                    let markIndex = value.indexOf('_');
+                    markIndex = markIndex !== -1 ? markIndex : ensigns[ensign].mark.length;
+                    inputRef.current.setSelectionRange(markIndex, markIndex);
+                }
+                return () => {
+                    document.removeEventListener('mouseup', onMouseUpHandler);
+                };
+            }, []);
+
+            useEffect(() => {
+                if (placeholder !== undefined) {
+                    inputRef.current.placeholder = placeholder;
+                }
+            }, [placeholder]);
+
+            useEffect(() => {
+                if (value !== undefined) {
+                    inputRef.current.value = replaceMark(value.replace(/^0/, ''));
+                }
+            }, [value]);
+            /* End handler */
+
+            useImperativeHandle(reference, () => ({
+                get: () => ref.current,
+            }));
+
+            return (
+                <div ref={ref} css={PhoneInputRoot} style={{ marginBottom: '20px' }} {...props}>
+                    <Label {...labelProps} required={required} disabled={disabled}>
+                        {label}
+                    </Label>
+                    <InputBase
+                        inputRef={inputRef}
+                        viewType={viewType}
+                        defaultValue={ensigns[ensign].mark}
+                        value={value}
+                        placeholder={placeholder}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        multiline={multiline}
+                        status={error ? 'danger' : 'default'}
+                        inputProps={inputProps}
+                        inputStyle={inputStyle}
+                        onChange={onChangeHandler}
+                        onBlur={onBlurHandler}
+                        onFocus={onFocusHandler}
+                        onInput={onInput}
+                        onKeyDown={onKeyDownHandler}
+                        onKeyUp={onKeyUp}
+                        onPaste={onPasteHandler}
+                        startIcon={
+                            <span css={PhoneInputEnsign}>
+                                {!hiddenEnsign && ensigns[ensign].icon}{' '}
+                                <Typography>(+{ensigns[ensign].countryCode})</Typography>
+                            </span>
+                        }
+                        startIconProps={{ className: 'non-effect' }}
+                    />
+                    {!!error && (
+                        <HelperText {...helperTextProps} disabled={disabled}>
+                            {error}
+                        </HelperText>
+                    )}
+                </div>
+            );
+        }
+    )
+);
+
+PhoneInput.defaultProps = {
+    viewType: 'underlined',
+    ensign: 'Vietnam',
+    label: '',
+    placeholder: '',
+    error: '',
+    autoFocus: true,
+    disabled: false,
+    hiddenEnsign: false,
+    multiline: false,
+    readOnly: false,
+    required: false,
+    inputProps: {},
+};
+
+PhoneInput.propTypes = {
+    /** the type of border you want to display */
+    viewType: PropTypes.oneOf(['underlined', 'outlined']),
+    /** the ensign to determinate */
+    ensign: PropTypes.oneOf(['Vietnam', 'England']),
+    /** label for input */
+    label: PropTypes.string,
+    /** default value is displayed for first render */
+    defaultValue: PropTypes.string,
+    /** the displayed value for each change */
+    value: PropTypes.string,
+    /** hints for input */
+    placeholder: PropTypes.string,
+    /** error for input */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** prevent all event if true, hide all icon */
+    disabled: PropTypes.bool,
+    /** hidden ensign icon if true */
+    hiddenEnsign: 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,
+    /** props of input in PhoneInput component */
+    inputProps: PropTypes.object,
+    /** style inline of input in PhoneInput 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. Return a object, example:<br/>
+     * {<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+     * }
+     */
+    onChange: PropTypes.func,
+    /** on blur function */
+    onBlur: PropTypes.func,
+    /** on focus function */
+    onFocus: PropTypes.func,
+    /** inputRef of PhoneInput component */
+    inputRef: PropTypes.any,
+    /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+    labelProps: PropTypes.object,
+    /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+    helperTextProps: PropTypes.object,
+};
+
+export default PhoneInput;