diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 02147bb58..f10a197f0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,6 +2,7 @@ - [Development](#development) - [First Setup](#first-setup) + - [Run](#run) - [Conventions](#conventions) - [Release](#release) - [Versionning](#versionning) @@ -35,7 +36,13 @@ yarn yarn setup ``` -4. [Setup your IDE](https://yarnpkg.com/getting-started/editor-sdks). +### Run + +```sh +yarn start +``` + +1. [Setup your IDE](https://yarnpkg.com/getting-started/editor-sdks). ### Conventions diff --git a/package.json b/package.json index 83b319021..b89d97c4f 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "build:copy": "sh ./scripts/build/copyPublicFiles.sh", "build:dev": "rm -Rf ./dist && rollup -c", "build:package": "node ./scripts/build/generatePackageJson.js", - "dev": "start-storybook -p 6006", + "dev": "start-storybook --no-open -p 6006", + "start": "start-storybook -p 6006", "icons": "yarn icons:clean && yarn icons:generate && yarn icons:lint", "icons:clean": "rm -Rf ./src/icons && mkdir ./src/icons", "icons:generate": "node --experimental-json-modules ./scripts/icons/generateIcons.mjs", diff --git a/src/fields/DatePicker/index.tsx b/src/fields/DatePicker/index.tsx index cb78e2be9..eec85e4dd 100644 --- a/src/fields/DatePicker/index.tsx +++ b/src/fields/DatePicker/index.tsx @@ -110,8 +110,8 @@ export function DatePicker({ timeInputRef.current.focus() }, [withTime]) - const handleDateInputFilled = useCallback( - (nextDateTuple: DateTuple) => { + const handleDateInputChange = useCallback( + (nextDateTuple: DateTuple, isFilled: boolean) => { selectedDateTupleRef.current = nextDateTuple // If there is no time input or a time has already been selected, @@ -125,7 +125,9 @@ export function DatePicker({ submit() } - handleDateInputNext() + if (isFilled) { + handleDateInputNext() + } }, [handleDateInputNext, submit, withTime] ) @@ -207,7 +209,7 @@ export function DatePicker({ isCompact={isCompact} isForcedFocused={isCalendarPickerOpenRef.current} isLight={isLight} - onChange={handleDateInputFilled} + onChange={handleDateInputChange} onClick={openCalendarPicker} onNext={handleDateInputNext} /> diff --git a/src/fields/DateRangePicker/DateInput.tsx b/src/fields/DateRangePicker/DateInput.tsx index 7ffb44b9b..64e7d3f6c 100644 --- a/src/fields/DateRangePicker/DateInput.tsx +++ b/src/fields/DateRangePicker/DateInput.tsx @@ -1,8 +1,7 @@ -import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react' +import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react' import styled from 'styled-components' import { Calendar } from '../../icons' -import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs' import { NumberInput } from './NumberInput' import { formatNumberAsDoubleDigit } from './utils' @@ -19,7 +18,7 @@ export type DateInputProps = Pick Promisable + onChange: (nextDateTuple: DateTuple, isFilled: boolean) => Promisable onClick: () => Promisable } function DateInputWithRef( @@ -58,8 +57,6 @@ function DateInputWithRef( } })) - const currentUtcYear = useMemo(() => getUtcizedDayjs().year(), []) - const handleBlur = useCallback(() => { setIsFocused(false) }, []) @@ -75,6 +72,8 @@ function DateInputWithRef( const submit = useCallback(() => { setHasValidationError(false) + const isFilled = window.document.activeElement === yearInputRef.current + switch (window.document.activeElement) { case dayInputRef.current: monthInputRef.current.focus() @@ -110,7 +109,7 @@ function DateInputWithRef( formatNumberAsDoubleDigit(dayInputRef.current.value) ] - onChange(nextDateTuple) + onChange(nextDateTuple, isFilled) }, [onChange]) return ( @@ -161,7 +160,7 @@ function DateInputWithRef( ref={yearInputRef} aria-label={`Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`} defaultValue={defaultValue && defaultValue[0]} - max={currentUtcYear} + max={2030} min={2020} onBack={() => monthInputRef.current.focus()} onBlur={handleBlur} diff --git a/src/fields/DateRangePicker/index.tsx b/src/fields/DateRangePicker/index.tsx index a29aeaeb8..860dfc9c6 100644 --- a/src/fields/DateRangePicker/index.tsx +++ b/src/fields/DateRangePicker/index.tsx @@ -144,8 +144,8 @@ export function DateRangePicker({ endDateInputRef.current.focus() }, [withTime]) - const handleDateInputFilled = useCallback( - (position: DateRangePosition, nextDateTuple: DateTuple) => { + const handleDateInputChange = useCallback( + (position: DateRangePosition, nextDateTuple: DateTuple, isFilled: boolean) => { if (position === DateRangePosition.START) { selectedStartDateTupleRef.current = nextDateTuple @@ -160,7 +160,9 @@ export function DateRangePicker({ submit() } - handleStartDateInputNext() + if (isFilled) { + handleStartDateInputNext() + } } else { selectedEndDateTupleRef.current = nextDateTuple @@ -175,7 +177,9 @@ export function DateRangePicker({ submit() } - handleEndDateInputNext() + if (isFilled) { + handleEndDateInputNext() + } } }, [handleEndDateInputNext, handleStartDateInputNext, submit, withTime] @@ -290,7 +294,9 @@ export function DateRangePicker({ isForcedFocused={isRangeCalendarPickerOpenRef.current} isLight={isLight} isStartDate - onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple)} + onChange={(nextDateTuple, isFilled) => + handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled) + } onClick={openRangeCalendarPicker} onNext={handleStartDateInputNext} /> @@ -323,7 +329,9 @@ export function DateRangePicker({ isForcedFocused={isRangeCalendarPickerOpenRef.current} isLight={isLight} onBack={handleEndDateInputPrevious} - onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple)} + onChange={(nextDateTuple, isFilled) => + handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled) + } onClick={openRangeCalendarPicker} onNext={handleEndDateInputNext} onPrevious={handleEndDateInputPrevious}