Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 47x 1x | import {forwardRef} from 'react'
import PropTypes from 'prop-types'
import {INPUT_SHAPES, SIZES} from '../config.js'
import Input, {inputSizes, inputStates} from './Component/index.js'
import InputAddons from './Wrappers/Addons/InputAddons.js'
import InputButton from './Wrappers/Button/InputButton.js'
import InputIcons from './Wrappers/Icons/InputIcons.js'
const BaseInput = forwardRef(
(
{
button,
leftAddon,
rightAddon,
leftIcon,
rightIcon,
children,
onClickLeftIcon,
onClickRightIcon,
size = SIZES.MEDIUM,
shape,
...inputProps
},
forwardedRef
) => {
return (
<InputButton button={button}>
<InputAddons leftAddon={leftAddon} rightAddon={rightAddon} shape={shape} size={size}>
<InputIcons
leftIcon={leftIcon}
rightIcon={rightIcon}
onClickLeftIcon={onClickLeftIcon}
onClickRightIcon={onClickRightIcon}
>
<Input ref={forwardedRef} shape={shape} {...inputProps} size={size}>
{children}
</Input>
</InputIcons>
</InputAddons>
</InputButton>
)
}
)
BaseInput.propTypes = {
/** button html element */
button: PropTypes.node,
/* inner react node element */
children: PropTypes.node,
/* Left addon component, text,... */
leftAddon: PropTypes.any,
/* Right addon component, text,... */
rightAddon: PropTypes.any,
/* Left icon component */
leftIcon: PropTypes.node,
/* Left icon component */
rightIcon: PropTypes.node,
/* Left icon click callback */
onClickLeftIcon: PropTypes.func,
/* Right icon click callback */
onClickRightIcon: PropTypes.func,
/* Sets the size of the inputAddon */
size: PropTypes.oneOf(Object.values(SIZES)),
/* Sets the shape of the input */
shape: PropTypes.oneOf(Object.values(INPUT_SHAPES))
}
export default BaseInput
export {inputSizes, inputStates, BaseInput}
|