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

Comparing version 1.0.1 to 1.0.2

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 };

dist/index.js

@@ -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;

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",

No alert changes

Worsened metrics

Total package byte prevSize

18855

-14.41%

Lines of code

295

-26.07%

No dependency changes