onBlur and focusOnRender props were added
This commit is contained in:
parent
736529b0c4
commit
f7bed93bb7
@ -19,10 +19,12 @@ import TimePicker from "@docspace/components/time-picker";
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| -------------- | :------------: | :------: | :-----------: | :-----------------------: | ------------------------------------------------------------ |
|
||||
| `className` | `string` | - | - | '' | Allows to set classname |
|
||||
| `date` | `object` | - | - | - | Inital date |
|
||||
| `setDate` | `func` | - | - | - | State setter function |
|
||||
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
|
||||
| `hasError` | `bool` | - | - | false | Indicates error |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| --------------- | :------: | :------: | :----: | :-----: | ------------------------------------------------ |
|
||||
| `className` | `string` | - | - | '' | Allows to set classname |
|
||||
| `date` | `object` | - | - | - | Inital date |
|
||||
| `setDate` | `func` | - | - | - | State setter function |
|
||||
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
|
||||
| `hasError` | `bool` | - | - | false | Indicates error |
|
||||
| `onBlur` | `func` | - | - | - | Triggers function on blur |
|
||||
| `focusOnRender` | `bool` | - | - | false | Focus input on render |
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import moment from "moment";
|
||||
import styled, { css } from "styled-components";
|
||||
@ -51,10 +51,11 @@ const TimePicker = ({
|
||||
className,
|
||||
hasError,
|
||||
tabIndex,
|
||||
onBlur,
|
||||
focusOnRender,
|
||||
}) => {
|
||||
const hoursInputRef = useRef(null);
|
||||
const minutesInputRef = useRef(null);
|
||||
const timeInputRef = useRef(null);
|
||||
|
||||
const [isInputFocused, setIsInputFocused] = useState(false);
|
||||
|
||||
@ -62,6 +63,17 @@ const TimePicker = ({
|
||||
|
||||
const [minutes, setMinutes] = useState(moment(date, "HH:mm").format("mm"));
|
||||
|
||||
const mountRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
onBlur && mountRef.current && !isInputFocused && onBlur();
|
||||
}, [isInputFocused]);
|
||||
|
||||
useEffect(() => {
|
||||
focusOnRender && hoursInputRef.current.select();
|
||||
mountRef.current = true;
|
||||
}, []);
|
||||
|
||||
const changeHours = (time) => {
|
||||
setHours(time);
|
||||
setDate(
|
||||
@ -155,7 +167,6 @@ const TimePicker = ({
|
||||
|
||||
return (
|
||||
<TimeInput
|
||||
ref={timeInputRef}
|
||||
onClick={focusHoursInput}
|
||||
className={className}
|
||||
hasError={hasError}
|
||||
@ -183,7 +194,6 @@ const TimePicker = ({
|
||||
</TimeInput>
|
||||
);
|
||||
};
|
||||
|
||||
TimePicker.propTypes = {
|
||||
/** Inital date */
|
||||
date: PropTypes.object,
|
||||
@ -197,12 +207,17 @@ TimePicker.propTypes = {
|
||||
hasError: PropTypes.bool,
|
||||
/** Tab index allows to make element focusable */
|
||||
hasError: PropTypes.bool,
|
||||
/** Triggers function on blur */
|
||||
onBlur: PropTypes.func,
|
||||
/** Focus input on render */
|
||||
focusOnRender: PropTypes.bool,
|
||||
};
|
||||
|
||||
TimePicker.defaultProps = {
|
||||
onChange: () => {},
|
||||
className: "",
|
||||
hasError: false,
|
||||
focusOnRender: false,
|
||||
};
|
||||
|
||||
export default TimePicker;
|
||||
|
Loading…
Reference in New Issue
Block a user