lonare-react-time-picker
Advanced tools
Comparing version
import * as React from 'react'; | ||
import { useState, useEffect } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
function TimePicker({ | ||
setTime, | ||
defaultTime, | ||
startTime, | ||
endTime, | ||
buttonText, | ||
buttonClassName, | ||
timePickerClassName, | ||
is24Hour, | ||
disabled | ||
setTime = () => {}, | ||
defaultTime = '', | ||
startTime = '', | ||
endTime = '', | ||
align = 'left' | ||
}) { | ||
@@ -19,5 +14,4 @@ const [showTimePicker, setShowTimePicker] = useState(false); | ||
const [selectedMinute, setSelectedMinute] = useState(null); | ||
const [error, setError] = useState(null); | ||
// Parse time function with validation | ||
// Parse time function | ||
const parseTime = time => { | ||
@@ -28,10 +22,2 @@ if (!time) return { | ||
}; | ||
const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/; | ||
if (!timeRegex.test(time)) { | ||
console.warn(`Invalid time format: ${time}. Expected format: HH:MM`); | ||
return { | ||
hour: null, | ||
minute: null | ||
}; | ||
} | ||
const [hour, minute] = time.split(':').map(Number); | ||
@@ -43,15 +29,2 @@ return { | ||
}; | ||
// Validate time ranges | ||
useEffect(() => { | ||
if (startTime && endTime) { | ||
const start = parseTime(startTime); | ||
const end = parseTime(endTime); | ||
if (start.hour > end.hour || start.hour === end.hour && start.minute >= end.minute) { | ||
setError('Start time must be before end time'); | ||
} else { | ||
setError(null); | ||
} | ||
} | ||
}, [startTime, endTime]); | ||
const { | ||
@@ -84,3 +57,2 @@ hour: defaultHour, | ||
const showTimePickerHandler = () => { | ||
if (disabled) return; | ||
setSelectedHour(null); | ||
@@ -124,16 +96,13 @@ setSelectedMinute(null); | ||
}, /*#__PURE__*/React.createElement("button", { | ||
disabled: disabled, | ||
className: `border-2 border-gray-300 px-3 py-1 rounded-md flex flex-row gap-1 items-center ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'} ${buttonClassName}`, | ||
className: `border-2 border-gray-300 px-3 py-1 rounded-md flex flex-row gap-1 items-center ${'hover:border-gray-400'}`, | ||
onClick: showTimePickerHandler | ||
}, /*#__PURE__*/React.createElement("span", { | ||
className: "text-gray-900 text-sm" | ||
}, buttonText)), error && /*#__PURE__*/React.createElement("div", { | ||
className: "text-red-500 text-sm mt-1" | ||
}, error), showTimePicker && /*#__PURE__*/React.createElement("div", { | ||
className: `absolute left-0 z-10 mt-2 min-w-[450px] bg-white rounded-md shadow-lg p-4 ${timePickerClassName}` | ||
}, "Select Time")), showTimePicker && /*#__PURE__*/React.createElement("div", { | ||
className: `absolute ${align === 'right' ? '-right-2' : 'left-0'} z-10 mt-2 min-w-[450px] bg-white rounded-md shadow-lg p-4` | ||
}, /*#__PURE__*/React.createElement("div", { | ||
className: "flex justify-end" | ||
className: "float-right" | ||
}, /*#__PURE__*/React.createElement("button", { | ||
onClick: () => setShowTimePicker(false), | ||
className: "px-3 py-1 border-2 border-gray-300 bg-black text-white rounded-md hover:bg-gray-700" | ||
className: "text-black" | ||
}, /*#__PURE__*/React.createElement("span", null, "\u2715"))), /*#__PURE__*/React.createElement("div", { | ||
@@ -179,25 +148,3 @@ className: "mt-4" | ||
} | ||
TimePicker.propTypes = { | ||
setTime: PropTypes.func, | ||
defaultTime: PropTypes.string, | ||
startTime: PropTypes.string, | ||
endTime: PropTypes.string, | ||
buttonText: PropTypes.string, | ||
buttonClassName: PropTypes.string, | ||
timePickerClassName: PropTypes.string, | ||
is24Hour: PropTypes.bool, | ||
disabled: PropTypes.bool | ||
}; | ||
TimePicker.defaultProps = { | ||
setTime: () => {}, | ||
defaultTime: '', | ||
startTime: '', | ||
endTime: '', | ||
buttonText: 'Select Time', | ||
buttonClassName: '', | ||
timePickerClassName: '', | ||
is24Hour: false, | ||
disabled: false | ||
}; | ||
export { TimePicker, TimePicker as default }; |
@@ -6,3 +6,2 @@ 'use strict'; | ||
var React = require('react'); | ||
var PropTypes = require('prop-types'); | ||
@@ -29,11 +28,7 @@ function _interopNamespaceDefault(e) { | ||
function TimePicker({ | ||
setTime, | ||
defaultTime, | ||
startTime, | ||
endTime, | ||
buttonText, | ||
buttonClassName, | ||
timePickerClassName, | ||
is24Hour, | ||
disabled | ||
setTime = () => {}, | ||
defaultTime = '', | ||
startTime = '', | ||
endTime = '', | ||
align = 'left' | ||
}) { | ||
@@ -43,5 +38,4 @@ const [showTimePicker, setShowTimePicker] = React.useState(false); | ||
const [selectedMinute, setSelectedMinute] = React.useState(null); | ||
const [error, setError] = React.useState(null); | ||
// Parse time function with validation | ||
// Parse time function | ||
const parseTime = time => { | ||
@@ -52,10 +46,2 @@ if (!time) return { | ||
}; | ||
const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/; | ||
if (!timeRegex.test(time)) { | ||
console.warn(`Invalid time format: ${time}. Expected format: HH:MM`); | ||
return { | ||
hour: null, | ||
minute: null | ||
}; | ||
} | ||
const [hour, minute] = time.split(':').map(Number); | ||
@@ -67,15 +53,2 @@ return { | ||
}; | ||
// Validate time ranges | ||
React.useEffect(() => { | ||
if (startTime && endTime) { | ||
const start = parseTime(startTime); | ||
const end = parseTime(endTime); | ||
if (start.hour > end.hour || start.hour === end.hour && start.minute >= end.minute) { | ||
setError('Start time must be before end time'); | ||
} else { | ||
setError(null); | ||
} | ||
} | ||
}, [startTime, endTime]); | ||
const { | ||
@@ -108,3 +81,2 @@ hour: defaultHour, | ||
const showTimePickerHandler = () => { | ||
if (disabled) return; | ||
setSelectedHour(null); | ||
@@ -148,16 +120,13 @@ setSelectedMinute(null); | ||
}, /*#__PURE__*/React__namespace.createElement("button", { | ||
disabled: disabled, | ||
className: `border-2 border-gray-300 px-3 py-1 rounded-md flex flex-row gap-1 items-center ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'} ${buttonClassName}`, | ||
className: `border-2 border-gray-300 px-3 py-1 rounded-md flex flex-row gap-1 items-center ${'hover:border-gray-400'}`, | ||
onClick: showTimePickerHandler | ||
}, /*#__PURE__*/React__namespace.createElement("span", { | ||
className: "text-gray-900 text-sm" | ||
}, buttonText)), error && /*#__PURE__*/React__namespace.createElement("div", { | ||
className: "text-red-500 text-sm mt-1" | ||
}, error), showTimePicker && /*#__PURE__*/React__namespace.createElement("div", { | ||
className: `absolute left-0 z-10 mt-2 min-w-[450px] bg-white rounded-md shadow-lg p-4 ${timePickerClassName}` | ||
}, "Select Time")), showTimePicker && /*#__PURE__*/React__namespace.createElement("div", { | ||
className: `absolute ${align === 'right' ? '-right-2' : 'left-0'} z-10 mt-2 min-w-[450px] bg-white rounded-md shadow-lg p-4` | ||
}, /*#__PURE__*/React__namespace.createElement("div", { | ||
className: "flex justify-end" | ||
className: "float-right" | ||
}, /*#__PURE__*/React__namespace.createElement("button", { | ||
onClick: () => setShowTimePicker(false), | ||
className: "px-3 py-1 border-2 border-gray-300 bg-black text-white rounded-md hover:bg-gray-700" | ||
className: "text-black" | ||
}, /*#__PURE__*/React__namespace.createElement("span", null, "\u2715"))), /*#__PURE__*/React__namespace.createElement("div", { | ||
@@ -203,26 +172,4 @@ className: "mt-4" | ||
} | ||
TimePicker.propTypes = { | ||
setTime: PropTypes.func, | ||
defaultTime: PropTypes.string, | ||
startTime: PropTypes.string, | ||
endTime: PropTypes.string, | ||
buttonText: PropTypes.string, | ||
buttonClassName: PropTypes.string, | ||
timePickerClassName: PropTypes.string, | ||
is24Hour: PropTypes.bool, | ||
disabled: PropTypes.bool | ||
}; | ||
TimePicker.defaultProps = { | ||
setTime: () => {}, | ||
defaultTime: '', | ||
startTime: '', | ||
endTime: '', | ||
buttonText: 'Select Time', | ||
buttonClassName: '', | ||
timePickerClassName: '', | ||
is24Hour: false, | ||
disabled: false | ||
}; | ||
exports.TimePicker = TimePicker; | ||
exports.default = TimePicker; |
{ | ||
"name": "lonare-react-time-picker", | ||
"version": "1.0.1", | ||
"version": "1.0.2", | ||
"description": "A modern React TimePicker component with Tailwind CSS", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
18855
-14.41%295
-26.07%