Input
General
*
Show Code
import React from "react";
import Input from 'funda-ui/Input';
export default () => {
function handleChange(e, onComposition) {
let temp = e.target.value;
if (!onComposition) {
console.log(temp);
}
}
return (
<>
<Input
name="name"
label="Title"
onChange={handleChange}
/>
<Input
placeholder="String"
name="name"
label="Disabled"
onChange={handleChange}
iconRight={<><i className="fa fa-arrow-up" aria-hidden="true"></i></>}
required
disabled
/>
<Input
name="name"
label="Only Numeric (realtime)"
onInputCallback={(e) => {
// only numeric
if (isNaN(e.target.value)) return '0';
const newVal = e.target.value.replace(/[^0-9.]/g, '');
return newVal;
}}
/>
<Input
name="name"
label="Only Numeric (change)"
onChangeCallback={(e) => {
// only numeric
if (isNaN(e.target.value)) return '0';
const newVal = e.target.value.replace(/[^0-9.]/g, '');
return newVal;
}}
/>
</>
);
}No spacing
Show Code
import React from "react";
import Input from 'funda-ui/Input';
export default () => {
return (
<>
<Input
...
wrapperClassName="position-relative"
...
/>
<Input
...
wrapperClassName=""
...
/>
</>
);
}Date or DateTime
Show Code
import React from "react";
import Input from 'funda-ui/Input';
export default () => {
return (
<>
<Input
name="name"
label="Date"
type="date"
step={1}
/>
<Input
name="name"
label="DateTime"
type="datetime-local"
onFocus={(e) => {
e.target.setAttribute("max", new Date().toISOString().split("T")[0] + 'T00:00');
}}
step={1}
/>
<Input
name="name"
label="DateTime"
type="datetime-local"
step={60}
onInputCallback={(e) => {
// yyyy-MM-dd HH:mm
const date = new Date(e.target.value);
const padZero = (num: number): string => {
return num < 10 ? '0' + num : num.toString();
};
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hours = padZero(date.getHours());
const minutes = padZero(date.getMinutes());
const res = `${year}-${month}-${day} ${hours}:${minutes}`;
return res;
}}
/>
<Input
name="name"
label="Time"
type="time"
step={60}
/>
</>
);
}Asynchronous Usage
Show Code
import React, { useEffect, useState } from "react";
import Input from 'funda-ui/Input';
export default () => {
const [inputValue, setInputValue] = useState('');
function handleChange(e) {
setInputValue(e.target.value);
}
useEffect(() => {
setInputValue('default');
}, []);
return (
<>
<Input
value={inputValue}
name="name"
onChange={handleChange}
/>
<p>{inputValue}</p>
</>
);
}Implement independent time elements
Use the appendControl property to extend the settings
-- ::
Show Code [styles.scss]
.input-group:not(.has-left-content) {
.app-input-demo {
left: 0.5rem;
}
}
.app-input-demo {
display: inline-block;
position: relative;
width: 100%;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
transform: translateY(-50%);
margin-left: .5rem;
> input {
padding: 0 !important;
margin: 0 !important;
border: none;
background: transparent;
box-shadow: none;
border: none;
width: 1.25rem;
&:focus {
outline: none;
border: none;
box-shadow: none;
background: none;
}
}
.app-input-demo--year {
width: 2.5rem;
}
}Show Code [index.tsx]
import React from "react";
import Input from 'funda-ui/Input';
export default () => {
const [val, setVal] = useState<any>({
year: '2024',
month: '03',
day: '15',
hours: '22',
minutes: '15',
seconds: '00'
}as {
year: string | number;
month: string | number;
day: string | number;
hours: string | number;
minutes: string | number;
seconds: string | number;
});
return (
<>
<Input
name="name"
label="DateTime Custom"
type="text"
appendControl={<>
<div className="app-input-demo">
<input
tabIndex={-1}
className="app-input-demo--year"
value={val.year}
onChange={(e: React.MouseEvent) => {
setVal((prevState) => {
return {
...prevState,
year: e.target.value
}
})
}}
/>
-
<input
tabIndex={-1}
className="app-input-demo--month"
value={val.month}
onChange={(e: React.MouseEvent) => {
setVal((prevState) => {
return {
...prevState,
month: e.target.value
}
})
}}
/>
-
<input
tabIndex={-1}
className="app-input-demo--day"
value={val.day}
onChange={(e: React.MouseEvent) => {
setVal((prevState) => {
return {
...prevState,
day: e.target.value
}
})
}}
/>
<input
tabIndex={-1}
className="app-input-demo--hours"
value={val.hours}
onChange={(e: React.MouseEvent) => {
setVal((prevState) => {
return {
...prevState,
hours: e.target.value
}
})
}}
/>
:
<input
tabIndex={-1}
className="app-input-demo--minutes"
value={val.minutes}
onChange={(e: React.MouseEvent) => {
setVal((prevState) => {
return {
...prevState,
minutes: e.target.value
}
})
}}
/>
:
<input
tabIndex={-1}
className="app-input-demo--seconds"
value={val.seconds}
onChange={(e: React.MouseEvent) => {
setVal((prevState) => {
return {
...prevState,
seconds: e.target.value
}
})
}}
/>
</div>
</>}
/>
</>
)
}Use the exposed method to assign and empty
Lets you callback the handle exposed as attribute contentRef.
Set Empty Value | Set Custom Value
Show Code
import React, { useRef } from 'react';
import Input from 'funda-ui/Input';
export default () => {
const conRef = useRef<any>(null);
return (
<>
<a
href="#"
onClick={(e: React.MouseEvent) => {
e.preventDefault();
if (conRef.current) conRef.current.clear();
}}
>Set Empty Value</a>
|
<a
href="#"
onClick={(e: React.MouseEvent) => {
e.preventDefault();
if (conRef.current) conRef.current.set('new value', () => { console.log('callback') });
}}
>Set Custom Value</a>
<Input
contentRef={conRef}
name="name"
/>
</>
)
}Using <Array>
Set Empty Value | Set Custom Value
Show Code
import React, { useRef } from 'react';
import Input from 'funda-ui/Input';
export default () => {
const conRef = useRef<any[]>([]);
return (
<>
<a
href="#"
onClick={(e: React.MouseEvent) => {
e.preventDefault();
if (conRef.current) {
conRef.current.forEach((obj: any) => {
obj.clear();
});
}
}}
>Set Empty Value</a>
|
<a
href="#"
onClick={(e: React.MouseEvent) => {
e.preventDefault();
if (conRef.current) {
conRef.current.forEach((obj: any, i: number) => {
obj.set('new value__' + i);
});
}
}}
>Set Custom Value</a>
<Input
contentRef={(node: any) => {
if (node) {
conRef.current[0] = node;
}
}}
name="name1"
/>
<Input
contentRef={(node: any) => {
if (node) {
conRef.current[1] = node;
}
}}
name="name2"
/>
<Input
contentRef={(node: any) => {
if (node) {
conRef.current[2] = node;
}
}}
name="name2"
/>
</>
)
}Complex use of popup and default value
Lets you callback the handle exposed as attribute contentRef.
Open Input Popup
Show Code
import React, { useState, useRef } from 'react';
// bootstrap components
import ModalDialog from 'funda-ui/ModalDialog';
import Input from 'funda-ui/Input';
export default () => {
const conRef = useRef<any>(null);
const [show, setShow] = useState<boolean>(false);
const [userContent, setUserContent] = useState<string>('');
return (
<>
<a
href="#"
onClick={(e: React.MouseEvent) => {
e.preventDefault();
setShow(true);
}}
>Open Input Popup</a>
{/*<!-- EDIT INFO -->*/}
<ModalDialog
show={show}
heading="TEST"
triggerClassName=""
triggerContent=""
closeBtnClassName="btn btn-secondary"
closeBtnLabel="Cancel"
submitBtnClassName="btn btn-primary"
submitBtnLabel="Confirm"
onOpen={() => {
// if (conRef.current) conRef.current.set('my default value here', () => { console.log('callback') });
}}
onClose={(e) => {
// Modifying React State can ensure that the window content is updated in real time
setTimeout(() => {
setShow(false);
}, 350);
}}
onSubmit={(e, closewin, data) => {
if (e === null) return;
closewin();
setTimeout(() => {
setUserContent('');
if (conRef.current) conRef.current.clear();
setShow(false);
}, 350);
// do something
alert(userContent);
}}
>
<Input
contentRef={conRef}
name="name"
onChange={(e) => {
setUserContent(e.target.value);
}}
/>
</ModalDialog>
{/*<!-- /EDIT INFOD -->*/}
</>
)
}Safe Asynchronous Example
When a useState() in a child component changes state, it will cause the entire parent component to re-render, resulting in invalidation such as checkbox.
At this time, we need to use useMemo() to wrap this subcomponent to avoid problems caused when the child component triggers a method of useState() of the parent component.
test
Show Code
import React, { useState, useMemo } from "react";
import Input from 'funda-ui/Input';
// DO NOT move `useMemo` to component
function MemoInput(props: any) {
const {val, callback} = props;
return useMemo(() => {
return <Input
name="name"
value={val}
onChange={(e) => {
callback(e.target.value);
}}
/>
}, []);
}
export default () => {
const [myInput, setMyInput] = useState('test');
return (
<>
<MemoInput
val={myInput}
name="name"
callback={setMyInput}
/>
<p>{myInput}</p>
</>
);
}
API
Input
import Input from 'funda-ui/Input';| Property | Type | Default | Description | Required |
|---|---|---|---|---|
ref | React.ForwardedRef | - | It is the return element of this component. | - |
contentRef | React.RefObject | - | It exposes the following methods:
DO NOT USE it in the | - |
wrapperClassName | string | mb-3 position-relative | The class name of the control wrapper. | - |
controlClassName | string | form-control | The class name of the control. | - |
controlExClassName | string | - | The extended class name of controlClassName. | - |
controlGroupWrapperClassName | string | input-group | The class name of the control group wrapper. | - |
controlGroupTextClassName | string | input-group-text | The class name of the control group text. | - |
appendControl | ReactNode | - | An extension of the same level as <input >, usually used to placeholder of some elements | - |
type | string | text | The type of input. Such as <input type="text" name="name"> gives a text box. | - |
defaultValue | string | - | Specifies the default value. Use when the component is not controlled. It does not re-render the component because the incoming value changes. | - |
value | string | - | Set a default value for this control | - |
requiredLabel | string | ReactNode | <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span> | It is used to specify a label for an element required. | - |
label | string | ReactNode | - | It is used to specify a label for an element of a form.Support html tags | - |
units | string | - | Specify a unit identification string. Such as em, px, and so on. | - |
name | string | - | Name is not deprecated when used with form fields. | - |
alt | string | - | An HTML form with an image that represents the submit button. | - |
inputMode | search | text | email | tel | url | none | numeric | decimal | undefined | text | The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. | - |
step | number | 1 | Specified legal number intervals. | - |
min | number | - | The minimum value to accept | - |
max | number | - | The maximum value to accept | - |
pattern | string | - | The pattern attribute specifies a regular expression that the <input > element's value is checked against on form submission. such as (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} | - |
placeholder | string | - | Specifies a short hint that describes. | - |
src | string | - | specifies the URL of the image to use as a submit button. The src attribute can only be used with (and is required for) <input type="image">. | - |
size | number | - | The size attribute specifies the visible width, in characters, of an <input > element. It is valid when | - |
maxLength | number | - | Defines the maximum string length that the user can enter into it. | - |
minLength | number | - | Defines the minimum string length that the user can enter into it. | - |
readOnly | boolean | false | When present, it specifies that this component field is read-only. | - |
disabled | boolean | false | Whether it is disabled | - |
required | boolean | false | When present, it specifies that a field must be filled out before submitting the form. | - |
iconLeft | ReactNode | - | Set the left icon of this control | - |
iconRight | ReactNode | - | Set the right icon of this control | - |
autoComplete | string | on | The autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control. | - |
autoCapitalize | string | off | The autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input. | - |
spellCheck | boolean | false | The spellcheck global attribute is an enumerated attribute that defines whether the element may be checked for spelling errors. | - |
onChangeCallback | function | - | Return value from onChangeCallback property to format the data of the control element, which will match the data structure of the component. It returns two callback values.
At the same time it returns the Control Event, you will use this function and use the return keyword to return a new value. It fires when focus is lost. If return is not set, it will not return. | - |
onInputCallback | function | - | Return value from onInputCallback property to format the data of the control element, which will match the data structure of the component. It returns two callback values.
At the same time it returns the Control Event, you will use this function and use the return keyword to return a new value. It fires in real time as the user enters. If return is not set, it will not return. | - |
onKeyPressedCallback | function | - | Return value from onKeyPressedCallback property to format the data of the control element, which will match the data structure of the component. It returns two callback values.
At the same time it returns the Control Event, you will use this function and use the return keyword to return a new value. It fires when the keyboard is pressed. If return is not set, it will not return. | - |
onChange | function | - | Call a function when the value of an HTML element is changed. It returns three callback values.
| - |
onBlur | function | - | Call a function when a user leaves an form field. It returns three callback values.
| - |
onFocus | function | - | Call a function when an form field gets focus. It returns three callback values.
| - |
onPressEnter | function | - | The callback function that is triggered when Enter key is pressed. It returns two callback values.
| - |
It accepts all props which this control support. Such as style, data-*, tabIndex, id, and so on.