phx-react 1.3.409 → 1.3.410

package/dist/esm/components/TimePicker/TimePicker.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 import { ClockIcon } from '@heroicons/react/24/outline';
 import React, { useEffect, useRef, useState } from 'react';
 import Time from './component/Time';
@@ -9,17 +10,41 @@ function classNames() {
     return classes.filter(Boolean).join(' ');
 }
 export function PHXTimePicker(_a) {
-    var className = _a.className, label = _a.label, step = _a.step, disabled = _a.disabled, onChange = _a.onChange, defaultValue = _a.defaultValue;
+    var className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'time-picker' : _b, label = _a.label, onChange = _a.onChange, register = _a.register, step = _a.step;
+    var message = function (type) {
+        var errorMessage = '';
+        switch (type) {
+            case 'required-field':
+                errorMessage = 'Vui lòng nhập thông tin';
+                break;
+            default:
+                break;
+        }
+        return errorMessage;
+    };
     var inputRef = useRef(null);
     var calendarRef = useRef(null);
-    var _b = useState(false), isCalendarVisible = _b[0], setIsCalendarVisible = _b[1];
-    var _c = useState(defaultValue ? defaultValue : '00:00'), inputValue = _c[0], setInputValue = _c[1];
+    var _c = useState(false), isCalendarVisible = _c[0], setIsCalendarVisible = _c[1];
+    var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = useState(false), isFocus = _e[0], setIsFocus = _e[1];
     var handleToggleCalendar = function () {
         setIsCalendarVisible(true);
     };
+    useEffect(function () {
+        if (defaultValue) {
+            // @ts-ignore
+            setInputValue(defaultValue);
+        }
+        else {
+            return;
+        }
+    }, []);
     useEffect(function () {
         var handleClickOutside = function (event) {
-            if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current !== event.target) {
+            if (calendarRef.current &&
+                !calendarRef.current.contains(event.target) &&
+                inputRef.current !== event.target &&
+                !isFocus) {
                 setIsCalendarVisible(false);
             }
         };
@@ -27,8 +52,11 @@ export function PHXTimePicker(_a) {
         return function () {
             document.removeEventListener('click', handleClickOutside);
         };
-    }, []);
+    }, [isFocus]);
     var handleChange = function (val) {
+        var inputElement = document.getElementById("".concat(id, "-after"));
+        if (inputElement)
+            inputElement.focus();
         setInputValue(val);
         if (onChange) {
             onChange(val);
@@ -56,10 +84,22 @@ export function PHXTimePicker(_a) {
         React.createElement("div", { className: className },
             label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
             React.createElement("div", { className: 'relative' },
-                React.createElement("input", { ref: inputRef, onClick: handleToggleCalendar, className: classNames('pl-9 block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-light shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', disabled ? 'bg-gray-50' : ''), disabled: disabled, value: inputValue, onChange: function (event) { return handleChangeInput(event); } }),
-                React.createElement("div", { className: 'absolute top-2 left-3' },
+                React.createElement("label", { ref: inputRef, className: 'absolute top-0 h-[1.875rem] w-full rounded-lg py-4', htmlFor: id, onClick: handleToggleCalendar }),
+                React.createElement("input", { className: classNames('block w-full rounded-lg border border-gray-500 px-3 py-1.5 pl-9 text-xs font-light shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', disabled ? 'bg-gray-50' : '', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : ''), disabled: disabled, id: id, onBlur: function () { return setIsFocus(false); }, onChange: function (event) { return handleChangeInput(event); }, onFocus: function () { return setIsFocus(true); }, value: inputValue }),
+                React.createElement("input", __assign({ className: 'rounded-lg', id: "".concat(id, "-after"), style: {
+                        content: '',
+                        position: 'absolute',
+                        height: 0,
+                        top: 0,
+                        zIndex: -100
+                    } }, register, { defaultValue: inputValue })),
+                error && errorType ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
+                    React.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
+                        React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
+                    React.createElement("p", { className: 'text-xs text-red-800' }, message(errorType)))) : null,
+                React.createElement("div", { className: 'absolute left-3 top-2' },
                     React.createElement(ClockIcon, { className: 'h-4 w-4 text-gray-500' })),
-                React.createElement("div", { className: "absolute z-50 top-10 left-0 w-full ".concat(isCalendarVisible ? '' : 'hidden'), ref: calendarRef },
-                    React.createElement(Time, { step: step, onChangeTime: function (val) { return handleChange(val); } }))))));
+                React.createElement("div", { ref: calendarRef, className: "absolute left-0 top-10 z-50 w-full ".concat(isCalendarVisible ? '' : 'hidden') },
+                    React.createElement(Time, { onChangeTime: function (val) { return handleChange(val); }, step: step }))))));
 }
 //# sourceMappingURL=TimePicker.js.map

package/dist/esm/components/TimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phx-react",
-  "version": "1.3.409",
+  "version": "1.3.410",
   "description": "PHX REACT",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",