1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/text-field/text-field.js
George Marshall 9821c59e11
TextField component updates (#16424)
* Updating showClearButton prop name and making component dumber

* Docs update

* Adding missing proptype

* Fixing casing on tests

* Replacing clear button placeholder with ButtonIcon and docs update

* Fixing linting issues

* Adding note about controlled only for showClearButton to work and fixing some tests

* Updating test to include controlled testing setup function for clearButton tests
2022-11-10 11:13:15 -08:00

84 lines
1.9 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { SIZES } from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { ICON_NAMES } from '../icon';
import { ButtonIcon } from '../button-icon';
import { TextFieldBase } from '../text-field-base';
export const TextField = ({
className,
showClearButton, // only works with a controlled input
clearButtonOnClick,
clearButtonProps,
rightAccessory,
inputProps,
value,
onChange,
...props
}) => (
<TextFieldBase
className={classnames('mm-text-field', className)}
value={value}
onChange={onChange}
rightAccessory={
value && showClearButton ? (
<>
<ButtonIcon
className="mm-text-field__button-clear"
ariaLabel="Clear" // TODO: i18n
icon={ICON_NAMES.CLOSE_OUTLINE}
size={SIZES.SM}
onClick={clearButtonOnClick}
{...clearButtonProps}
/>
{rightAccessory}
</>
) : (
rightAccessory
)
}
inputProps={{
marginRight: showClearButton ? 6 : 0,
...inputProps,
}}
{...props}
/>
);
TextField.propTypes = {
/**
* The value af the TextField
*/
value: TextFieldBase.propTypes.value.isRequired,
/**
* The onChange handler af the TextField
*/
onChange: TextFieldBase.propTypes.onChange.isRequired,
/**
* An additional className to apply to the text-field
*/
className: PropTypes.string,
/**
* Show a clear button to clear the input
*/
showClearButton: PropTypes.bool,
/**
* The onClick handler for the clear button
*/
clearButtonOnClick: PropTypes.func,
/**
* The props to pass to the clear button
*/
clearButtonProps: PropTypes.shape(Box.PropTypes),
/**
* TextField accepts all the props from TextFieldBase and Box
*/
...TextFieldBase.propTypes,
};