[feature] time range

docs/js/sections/api.tsx

@@ -61,7 +61,7 @@ export default function Intro() {
 	hour12: 4,
 	minute: 55,
 	meridiem: 'pm',
-	isValid: boolean,        // requires \`disabledTimeRange\`, false if time selected is blocked off
+	isValid: boolean,        // requires \`disabledTimeRange\` or \`timeRange\`, false if time selected is blocked off
 }`}</Code>
 			</div>
 

docs/js/sections/examples.tsx

@@ -12,6 +12,8 @@ export default function Examples() {
 	const [time4, setTime4] = useState('12:45pm')
 	const [time5, setTime5] = useState('5:30')
 	const [isValid5, setIsValid5] = useState(true)
+	const [time6, setTime6] = useState('7:00')
+	const [isValid6, setIsValid6] = useState(true)
 
 	return (
 		<section className="examples docs-section" id="examples">
@@ -39,7 +41,7 @@ import TimeKeeper from 'react-timekeeper';
 
 function YourComponent(){
 	const [time, setTime] = useState('12:34pm')
-	
+
 	return (
 		<div>
 			<TimeKeeper
@@ -132,7 +134,7 @@ import TimeKeeper from 'react-timekeeper';
 
 function YourComponent(){
 	const [time, setTime] = useState('12:34pm')
-	
+
 	return (
 		<div>
 			<TimeKeeper
@@ -177,7 +179,7 @@ import TimeKeeper from 'react-timekeeper';
 
 function YourComponent(){
 	const [time, setTime] = useState('12:34pm')
-	
+
 	return (
 		<div>
 			<TimeKeeper
@@ -235,7 +237,50 @@ function YourComponent(){
 				}}
 				disabledTimeRange={{ from: '6:20', to: '20:45' }}
 			/>
-			<span>Time is {time5}, valid time: {isValid ? '✅' : '❌'}</span>
+			<span>Time is {time}, valid time: {isValid ? '✅' : '❌'}</span>
+		</div>
+	)
+}`}</Code>
+			</div>
+
+			{/* example 6 */}
+			<div className="examples__item foo">
+				<Text>time range</Text>
+
+				<div className="examples__example-3">
+					<div className="examples__example-3-timekeeper-wrapper">
+						<TimeKeeper
+							time={time6}
+							onChange={newTime => {
+								setIsValid6(newTime.isValid)
+								setTime6(newTime.formatted12)
+							}}
+							timeRange={{ from: '6:20', to: '20:45' }}
+						/>
+					</div>
+					<span className="examples__example-1-time">
+						Time is {time6}, valid time: {isValid6 ? '✅' : '❌'}
+					</span>
+				</div>
+
+				<Code type={SYNTAX.js}>{`import React from 'react';
+import TimeKeeper from 'react-timekeeper';
+
+function YourComponent(){
+	const [time, setTime] = useState('12:34pm')
+	const [isValid, setIsValid] = useState(true)
+
+	return (
+		<div>
+			<TimeKeeper
+				time={time}
+				onChange={(newTime) => {
+					setIsValid(newTime.isValid)
+					setTime(newTime.formatted12)
+				}}
+				timeRange={{ from: '6:20', to: '20:45' }}
+			/>
+			<span>Time is {time}, valid time: {isValid ? '✅' : '❌'}</span>
 		</div>
 	)
 }`}</Code>

src/components/Clock.tsx

@@ -31,7 +31,7 @@ interface Props {
 export default function ClockWrapper({ clockEl }: Props) {
 	const firstRun = useRef(true)
 	const { hour24Mode } = useConfig()
-	const { mode, time, meridiem, disabledTimeRangeValidator } = useTimekeeperState()
+	const { mode, time, meridiem, timeRangeValidator } = useTimekeeperState()
 
 	const transitions = useTransition(mode, {
 		unique: true,
@@ -63,15 +63,15 @@ export default function ClockWrapper({ clockEl }: Props) {
 				isMinuteMode(currentMode) ? (
 					<MinuteNumbers
 						anim={anim}
-						disabledTimeRangeValidator={disabledTimeRangeValidator}
+						timeRangeValidator={timeRangeValidator}
 						hour={time.hour}
 					/>
 				) : (
 					<HourNumbers
 						anim={anim}
 						mode={currentMode as MODE.HOURS_12 | MODE.HOURS_24}
 						hour24Mode={hour24Mode}
-						disabledTimeRangeValidator={disabledTimeRangeValidator}
+						timeRangeValidator={timeRangeValidator}
 						meridiem={meridiem}
 					/>
 				),

src/components/Numbers.tsx

@@ -1,13 +1,13 @@
 import { memo, useMemo } from 'react'
 import { animated, SpringValue } from 'react-spring'
-import DisabledTimeRange from '../helpers/disable-time'
+import { TimeRangeValidator } from '../helpers/disable-time'
 
 import { MINUTES, CLOCK_VALUES, MODE, MERIDIEM } from '../helpers/constants'
 import { transform } from '../helpers/math'
 import { numbersStyle, numbersWrapperStyle } from './styles/numbers'
 
 interface CommonProps {
-	disabledTimeRangeValidator: DisabledTimeRange | null
+	timeRangeValidator: TimeRangeValidator | null
 	anim: {
 		opacity: SpringValue<number>
 		translate: SpringValue<number>
@@ -33,7 +33,7 @@ function Hours({
 	anim,
 	mode,
 	hour24Mode,
-	disabledTimeRangeValidator,
+    timeRangeValidator,
 	meridiem,
 }: HourProps) {
 	const { opacity, translate: translateOuter, translateInner } = anim
@@ -55,17 +55,17 @@ function Hours({
 			numbersOuter: numbersOuter.map((value, i) => ({
 				value,
 				enabled:
-					disabledTimeRangeValidator?.validateHour(normalizeOuterIndex(i)) ??
+					timeRangeValidator?.validateHour(normalizeOuterIndex(i)) ??
 					true,
 			})),
 			numbersInner: numbersInner?.map((value, i) => ({
 				value,
 				enabled:
-					disabledTimeRangeValidator?.validateHour(normalizeInnerIndex(i)) ??
+					timeRangeValidator?.validateHour(normalizeInnerIndex(i)) ??
 					true,
 			})),
 		}
-	}, [mode, meridiem, disabledTimeRangeValidator])
+	}, [mode, meridiem, timeRangeValidator])
 
 	return (
 		<animated.div
@@ -112,20 +112,20 @@ export const HourNumbers = memo(Hours, (prev, next) => {
 		prev.mode === next.mode &&
 		prev.hour24Mode === next.hour24Mode &&
 		prev.meridiem === next.meridiem &&
-		prev.disabledTimeRangeValidator === next.disabledTimeRangeValidator
+		prev.timeRangeValidator === next.timeRangeValidator
 	)
 })
 
-function Minutes({ anim, hour, disabledTimeRangeValidator }: MinuteProps) {
+function Minutes({ anim, hour, timeRangeValidator }: MinuteProps) {
 	const { opacity, translate } = anim
 	const minutes = useMemo(() => {
 		return MINUTES.map(value => ({
 			value,
 			enabled:
-				disabledTimeRangeValidator?.validateMinute(hour, parseInt(value, 10)) ??
+				timeRangeValidator?.validateMinute(hour, parseInt(value, 10)) ??
 				true,
 		}))
-	}, [disabledTimeRangeValidator, hour])
+	}, [timeRangeValidator, hour])
 
 	return (
 		<animated.div
@@ -153,7 +153,7 @@ function Minutes({ anim, hour, disabledTimeRangeValidator }: MinuteProps) {
 
 export const MinuteNumbers = memo(Minutes, (prev, next) => {
 	return (
-		prev.disabledTimeRangeValidator === next.disabledTimeRangeValidator &&
+		prev.timeRangeValidator === next.timeRangeValidator &&
 		prev.hour === next.hour
 	)
 })

src/components/TimeDropdown.tsx

@@ -18,7 +18,7 @@ type ElementLiRef = MutableRefObject<HTMLLIElement | null>
 
 export default function TimeDropdown({ close }: Props) {
 	const { hour24Mode } = useConfig()
-	const { updateTimeValue, mode, time, meridiem, disabledTimeRangeValidator } =
+	const { updateTimeValue, mode, time, meridiem, timeRangeValidator } =
 		useTimekeeperState()
 
 	const container: ElementRef = useRef(null)
@@ -28,31 +28,31 @@ export default function TimeDropdown({ close }: Props) {
 		const o = CLOCK_VALUES[mode].dropdown
 
 		let validator: (value: string, i: number) => boolean = () => true
-		if (disabledTimeRangeValidator) {
+		if (timeRangeValidator) {
 			if (mode === MODE.HOURS_12) {
 				if (meridiem === 'am') {
 					validator = (_, i) =>
-						disabledTimeRangeValidator.validateHour((i + 1) % 12)
+						timeRangeValidator.validateHour((i + 1) % 12)
 				} else {
 					validator = (_, i) => {
 						// account for last number (12) which should be first (noon, 1pm, ...) in 24h format
 						const num = i === 11 ? 12 : i + 13
-						return disabledTimeRangeValidator.validateHour(num)
+						return timeRangeValidator.validateHour(num)
 					}
 				}
 			} else if (mode === MODE.HOURS_24) {
 				validator = (_, i) =>
-					disabledTimeRangeValidator.validateHour((i + 1) % 24)
+					timeRangeValidator.validateHour((i + 1) % 24)
 			} else if (mode === MODE.MINUTES) {
 				validator = v =>
-					disabledTimeRangeValidator.validateMinute(time.hour, parseInt(v, 10))
+					timeRangeValidator.validateMinute(time.hour, parseInt(v, 10))
 			}
 		}
 		return o.map((value, i) => ({
 			value,
 			enabled: validator(value, i),
 		}))
-	}, [mode, disabledTimeRangeValidator, meridiem, time.hour])
+	}, [mode, timeRangeValidator, meridiem, time.hour])
 
 	const selected = getNormalizedTimeValue(mode, time).toString()
 

src/components/TimeKeeperContainer.tsx

@@ -6,6 +6,7 @@ import { TimeInput, ChangeTimeFn } from '../helpers/types'
 export interface Props extends ConfigProps {
 	time?: TimeInput
 	onChange?: ChangeTimeFn
+	timeRange?: null | { from: string, to: string }
 	disabledTimeRange?: null | { from: string; to: string }
 }
 
@@ -21,6 +22,7 @@ export default function TimepickerWithConfig({
 	hour24Mode,
 	onDoneClick,
 	doneButton,
+	timeRange,
 	disabledTimeRange,
 }: Props) {
 	return (
@@ -37,6 +39,7 @@ export default function TimepickerWithConfig({
 			<StateProvider
 				onChange={onChange}
 				time={time}
+				timeRange={timeRange}
 				disabledTimeRange={disabledTimeRange}
 			>
 				<TimeKeeper />

src/helpers/__tests__/compose-time.test.ts

@@ -1,4 +1,4 @@
-import DisabledTimeRange from '../disable-time'
+import { TimeOutRange } from '../disable-time'
 import { composeTime as compose } from '../time'
 
 describe('helpers/compose-time', () => {
@@ -49,7 +49,7 @@ describe('helpers/compose-time', () => {
 	})
 
 	it('supports disabled time ranges', () => {
-		const dsr = new DisabledTimeRange('6:20', '15:20')
+		const dsr = new TimeOutRange('6:20', '15:20')
 		expect(compose(6, 20, dsr)).toHaveProperty('isValid', true)
 		expect(compose(6, 21, dsr)).toHaveProperty('isValid', false)
 	})