IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

onBlur and focusOnRender props were added

Browse Source
This commit is contained in:
Vladimir Khvan 2023-07-05 14:13:12 +05:00
parent 736529b0c4
commit f7bed93bb7
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/components/time-picker/README.md
View File

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

23
packages/components/time-picker/index.js
View File

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