diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/date-picker/index.js

@@ -0,0 +1,429 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, DateInput, HelperText, InputBase, Label, Popover, Tooltip } from 'components';
+import { format, isValid, parse } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
+import { getGlobal } from 'global';
+import locale from 'locale';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import {
+    cursorNotAllowed,
+    displayBlock,
+    displayFlex,
+    flexRow,
+    itemsCenter,
+    justifyEnd,
+    positionRelative,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { capitalizeSentenceCase, classNames, isValidDate, useControlled } from 'utils';
+import Calendar from '../calendar';
+import { lowerCaseDayYear } from '../date-input/utils';
+
+const unique = {
+    footer: 'DGN-UI-DatePicker-Footer',
+    cancel: 'DGN-UI-DatePicker-cancel',
+    confirm: 'DGN-UI-DatePicker-confirm',
+    icon: 'DGN-UI-DatePicker-Icon',
+};
+
+const confirmText = getGlobal(['confirm']);
+const cancelText = getGlobal(['cancel']);
+
+const viDisplayFormat = new Map([
+    ['year', 'YYYY'],
+    ['quarter', 'Q-YYYY'],
+    ['month', 'MM-YYYY'],
+]);
+
+const pickerReturnFormat = new Map([
+    ['year', 'YYYY'],
+    ['quarter', 'YYYY-Q'],
+    ['month', 'YYYY-MM'],
+]);
+
+const parseValueToDate = valueProp => {
+    if (valueProp === '') return null;
+
+    return isValidDate(valueProp) ? new Date(valueProp) : valueProp;
+};
+
+const DatePicker = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'DatePicker' });
+        const {
+            action = {},
+            actionIconAt,
+            className,
+            clearAble,
+            controls,
+            defaultValue,
+            disabled,
+            displayAnotherMonth,
+            displayFormat: displayFormatProp,
+            error,
+            errorProps,
+            inputProps,
+            inputStyle,
+            label,
+            labelProps,
+            max,
+            min,
+            minZoom,
+            maxZoom,
+            onChange,
+            placeholder: placeholderProp,
+            pressESCToClose,
+            readOnly,
+            required,
+            returnFormat: returnFormatProp,
+            style,
+            textAlign,
+            useDateInput,
+            value: valueProp,
+            viewType,
+            onBlur,
+            ...other
+        } = props;
+
+        const dateLocale = locale.get();
+
+        const displayFormat =
+            (dateLocale === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) ?? displayFormatProp;
+        const returnFormat = pickerReturnFormat.get(minZoom) ?? returnFormatProp;
+        const placeholder = placeholderProp ?? displayFormat;
+
+        const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
+        const [openPickerState, setOpenPickerState] = useState(false);
+
+        const ipRef = useRef(null);
+        const ref = useRef(null);
+        const focusedValue = useRef(null);
+        const pickerRef = useRef(null);
+        const buttonCarlendarRef = useRef(null);
+
+        const isError = !!error && (!value || !isValid(value));
+
+        const _DatePickerRoot = DatePickerRoot();
+        const _IconAreaCSS = IconAreaCSS();
+        const _ControlContainerCSS = ControlContainerCSS(theme);
+
+        const onConfirm = () => {
+            onChangeValue({ value: focusedValue.current });
+            closePicker();
+        };
+
+        const onCancel = () => {
+            closePicker();
+        };
+
+        const formatValue = (value, formatStr) => {
+            // return moment(value).format(format, utc = false);
+            return format(value, lowerCaseDayYear(formatStr), { locale: dateLocale === 'vi' ? vi : enUS });
+        };
+
+        const onChangeValue = e => {
+            const vl = e?.value || e;
+            closePicker();
+            setValue(vl);
+            onChange?.({
+                value: isValid(vl)
+                    ? formatValue(vl, returnFormat)
+                    : String(vl) === 'Invalid Date'
+                    ? 'Invalid Date'
+                    : vl,
+            });
+        };
+
+        const onCalendarClick = e => {
+            !controls ? onChangeValue(e) : (focusedValue.current = e?.value);
+        };
+
+        const openPicker = () => {
+            if (!readOnly) {
+                setOpenPickerState(true);
+            }
+        };
+        const closePicker = () => {
+            if (pickerRef.current?.element) {
+                setOpenPickerState(false);
+                if (ipRef.current) onBlur?.(ipRef.current);
+            }
+        };
+
+        const onClear = () => {
+            if (!clearAble && !ipRef.current) return;
+            onChangeValue(null);
+            focusedValue.current = null;
+        };
+
+        const _onBlur = e => {
+            if (ipRef.current && e?.relatedTarget !== buttonCarlendarRef.current) {
+                onBlur?.(ipRef.current);
+            }
+        };
+
+        useEffect(() => {
+            const vl = parseValueToDate(valueProp);
+            setValue(vl);
+        }, [valueProp]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const iconComp = (
+            <div css={_IconAreaCSS}>
+                {clearAble && value ? (
+                    <ButtonIcon
+                        disabled={disabled || readOnly}
+                        viewType={'ghost'}
+                        onClick={onClear}
+                        className={`${unique.icon} ${unique.icon}-cancel`}
+                        viewBox
+                        name={'Close'}
+                    />
+                ) : null}
+                <ButtonIcon
+                    ref={buttonCarlendarRef}
+                    disabled={disabled || readOnly}
+                    viewType={'ghost'}
+                    onClick={openPicker}
+                    className={`${unique.icon} ${unique.icon}-accept`}
+                    viewBox
+                    name={'Calendar'}
+                />
+            </div>
+        );
+        const endIcon = actionIconAt === 'end' && iconComp;
+        const startIcon = actionIconAt === 'start' && iconComp;
+        const footerMemo = (
+            <div css={_ControlContainerCSS} className={unique.footer}>
+                <Button className={unique.cancel} onClick={onCancel}>
+                    {cancelText}
+                </Button>
+                <Button color={'info'} className={unique.confirm} onClick={onConfirm}>
+                    {confirmText}
+                </Button>
+            </div>
+        );
+
+        const renderedValue = useMemo(() => {
+            if (isValidDate(value)) return capitalizeSentenceCase(formatValue(value, displayFormat));
+            return value;
+        }, [value, displayFormat]);
+
+        const valueDateInput = useMemo(() => {
+            if (value && isValid(value)) {
+                return value;
+            } else if (value === null) {
+                return null;
+            } else return parse(value, lowerCaseDayYear(returnFormat), new Date());
+        }, [value]);
+
+        const renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max;
+
+        return (
+            <Fragment>
+                <div
+                    ref={ref}
+                    css={_DatePickerRoot}
+                    className={classNames('DGN-UI-DatePicker', className, disabled && 'disabled')}
+                    style={style}
+                    {...other}
+                >
+                    {label ? (
+                        <Label disabled={disabled} required={required} {...labelProps}>
+                            {label}
+                        </Label>
+                    ) : null}
+                    <Tooltip title={ipRef?.current?.clientWidth < 200 ? ipRef?.current?.value : ''}>
+                        {renderDateInputCondition ? (
+                            <DateInput
+                                inputRef={ipRef}
+                                disabled={disabled}
+                                readOnly={readOnly}
+                                viewType={viewType}
+                                startIcon={startIcon}
+                                endIcon={endIcon}
+                                format={displayFormat}
+                                value={valueDateInput}
+                                onBlur={_onBlur}
+                                onChange={onChangeValue}
+                            />
+                        ) : (
+                            <InputBase
+                                inputProps={{
+                                    placeholder: !readOnly && !disabled ? placeholder : '',
+                                    ...inputProps,
+                                }}
+                                inputRef={ipRef}
+                                disabled={disabled}
+                                viewType={viewType}
+                                inputStyle={{
+                                    textAlign: textAlign,
+                                    ...inputStyle,
+                                }}
+                                startIcon={startIcon}
+                                endIcon={endIcon}
+                                onKeyDown={e => e.preventDefault()}
+                                readOnly
+                                value={renderedValue}
+                                onFocus={openPicker}
+                            />
+                        )}
+                    </Tooltip>
+                    {isError ? (
+                        <HelperText {...errorProps} disabled={disabled}>
+                            {error}
+                        </HelperText>
+                    ) : null}
+                </div>
+                <Popover
+                    css={PopoverCSS}
+                    ref={pickerRef}
+                    open={openPickerState}
+                    anchor={ref.current}
+                    pressESCToClose={pressESCToClose}
+                    onClose={closePicker}
+                >
+                    <Calendar
+                        actions={controls && footerMemo}
+                        value={value}
+                        max={max}
+                        min={min}
+                        minZoom={minZoom}
+                        maxZoom={maxZoom}
+                        displayAnotherMonth={displayAnotherMonth}
+                        onClick={onCalendarClick}
+                    />
+                </Popover>
+            </Fragment>
+        );
+    })
+);
+
+const PopoverCSS = css`
+    .DGN-UI-Calendar {
+        box-shadow: none;
+    }
+`;
+
+const DatePickerRoot = () => css`
+    ${displayBlock};
+    ${positionRelative};
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+`;
+
+const IconAreaCSS = () => css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsCenter};
+`;
+
+const ControlContainerCSS = ({ spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${justifyEnd};
+    margin: ${spacing([0, 4, 4])};
+`;
+
+// DatePicker.defaultProps = {
+//     actionIconAt: 'end',
+//     clearAble: false,
+//     controls: false,
+//     disabled: false,
+//     displayAnotherMonth: true,
+//     displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
+//     pressESCToClose: true,
+//     readOnly: false,
+//     required: false,
+//     returnFormat: 'YYYY-MM-DD',
+//     textAlign: 'start',
+//     viewType: 'underlined',
+// };
+
+DatePicker.propTypes = {
+    /** Action icons position. */
+    actionIconAt: PropTypes.oneOf(['end', 'start']),
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** Display the clear icon if true. */
+    clearAble: PropTypes.bool,
+    /** If `true`, the calendar will have a footer controls. */
+    controls: PropTypes.bool,
+    /** The default value of the component. */
+    defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+    /** If `true`, the form control will be disabled. */
+    disabled: PropTypes.bool,
+    /** Format to display value. */
+    displayFormat: PropTypes.oneOfType([
+        PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']),
+        PropTypes.string,
+    ]),
+    /** View days of previous or next month. */
+    displayAnotherMonth: PropTypes.bool,
+    /** Error of the form control. */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** InputProps are properties of the input element. */
+    inputProps: PropTypes.object,
+    /** InputStyle is style of input element. */
+    inputStyle: PropTypes.object,
+    /** Content of the label element. */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** LabelProps are properties if the label element. */
+    labelProps: PropTypes.object,
+    /** Min value of date picker. */
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+    /** Max value of date picker. */
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+    /** Callback fired when the input is blurred. */
+    onBlur: PropTypes.func,
+    /** A callback function when value input change. */
+    onChange: PropTypes.func,
+    /** Hints for input. */
+    placeholder: PropTypes.string,
+    /** Allow close Popup when press ESC. */
+    pressESCToClose: PropTypes.bool,
+    /** Status read only of input. */
+    readOnly: PropTypes.bool,
+    /** Required state of the form control. */
+    required: PropTypes.bool,
+    /** Format of the returned value. */
+    returnFormat: PropTypes.oneOfType([
+        PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']),
+        PropTypes.string,
+    ]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Text align of the input. */
+    textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+    /** If `true`, lets users select a date with the keyboard. */
+    useDateInput: PropTypes.bool,
+    /** Value of the component. */
+    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array, PropTypes.object]),
+    /** View type of the form control. */
+    viewType: PropTypes.oneOf(['outlined', 'underlined']),
+    /** Min zoom level of DatePicker */
+    minZoom: PropTypes.oneOf(['day', 'month', 'quarter', 'year']),
+    /** Max zoom level of DatePicker */
+    maxZoom: PropTypes.oneOf(['day', 'month', 'year', 'decade']),
+};
+
+export default DatePicker;

package/src/components/form-control/date-picker/index.stories.js

@@ -0,0 +1,141 @@
+import { DatePicker, TextInput } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useState } from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+DatePicker.defaultProps = theme?.components?.DatePicker?.defaultProps || {};
+
+export default {
+    title: 'Components/DatePicker',
+    component: DatePicker,
+    parameters: {
+        componentSubtitle: 'The Date Picker component lets users select a date.',
+    },
+};
+
+const Template = args => {
+    const [value, setValue] = React.useState(null);
+
+    const handleChange = e => {
+        console.log('Controlled Change', e.value);
+        setValue(e.value);
+    };
+
+    return (
+        <>
+            <DatePicker
+                {...args}
+                // onChange={e => console.log('onChange DatePicker', e)}
+                value={value}
+                onChange={handleChange}
+            />
+        </>
+    );
+};
+
+const Template2 = args => {
+    const initDataForm = {
+        GoalName: '',
+        OrgChartID: '',
+        GoalPlanID: null,
+        EmployeeID: '',
+        GroupGoalID: null,
+        ValidDateFrom: null,
+        ValidDateTo: null,
+        Proportion: '',
+        MeasureMethod: '%',
+        Description: '',
+    };
+    const [dataForm, setDataForm] = useState(initDataForm);
+    const setData = obj => {
+        setDataForm({ ...dataForm, ...obj });
+    };
+    const handleChange = (key, e) => {
+        if (!key) return false;
+        const value = e.value !== undefined ? e.value : e.target.value;
+        switch (key) {
+            case 'GoalName':
+                setData({ GoalName: value });
+                break;
+            case 'ValidDateFrom':
+                setData({ ValidDateFrom: value });
+                break;
+            case 'ValidDateTo':
+                setData({ ValidDateTo: value });
+                break;
+            default:
+                break;
+        }
+    };
+    return (
+        <>
+            <ImportComp components={'DatePicker'} />
+            <TextInput
+                label={'Trường nhập sử dụng cho kiểm tra hàm onChange'}
+                required={true}
+                value={dataForm.GoalName}
+                onChange={e => handleChange('GoalName', e)}
+            />
+            <TextInput label={'Ngày bắt đầu'} required={true} value={dataForm.ValidDateFrom} />
+            <DatePicker
+                {...args}
+                placeholder={'DD/MM/YYYY'}
+                label={'Ngày 1 (min: 2020-01-01)'}
+                max={dataForm.ValidDateTo}
+                value={dataForm?.ValidDateFrom}
+                onChange={e => handleChange('ValidDateFrom', e)}
+            />
+            <TextInput label={'Ngày kết thúc'} required={true} value={dataForm.ValidDateTo} />
+            <DatePicker
+                {...args}
+                placeholder={'DD/MM/YYYY'}
+                label={'Ngày 2 (max: 2025-12-31)'}
+                min={dataForm.ValidDateFrom}
+                value={dataForm?.ValidDateTo}
+                onChange={e => handleChange('ValidDateTo', e)}
+            />
+        </>
+    );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+    actionIconAt: 'end',
+    clearAble: false,
+    disabled: false,
+    error: '',
+    label: '',
+    min: null,
+    max: null,
+    placeholder: 'DD/MM/YYYY',
+    readOnly: false,
+    required: false,
+    viewType: 'underlined',
+};
+
+export const UseDateInput = Template.bind({});
+UseDateInput.args = {
+    useDateInput: true,
+    clearAble: true,
+};
+
+export const Month = Template.bind({});
+Month.args = {
+    minZoom: 'month',
+    maxZoom: 'decade',
+};
+
+export const Quarter = Template.bind({});
+Quarter.args = {
+    ...Month.args,
+    minZoom: 'quarter',
+};
+
+export const Year = Template.bind({});
+Year.args = {
+    ...Month.args,
+    minZoom: 'year',
+};
+
+export const Sample = Template2.bind({});