🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

lonare-react-time-picker

Package Overview
Dependencies
Maintainers
0
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lonare-react-time-picker - npm Package Compare versions

Comparing version

to
1.0.2

75

dist/index.esm.js
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;

2

package.json
{
"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",