mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
0a376fe3ab
* MMI adds the note-to-trader component * MMI adds colors vars * MMI added component folder * MMI adds fireEvent * adds Box * review fixes * adds story * lint fix * prettier fix * prettier fix --------- Co-authored-by: Albert Olivé <albertolivecorbella@gmail.com>
54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
DISPLAY,
|
|
FLEX_DIRECTION,
|
|
JustifyContent,
|
|
} from '../../../helpers/constants/design-system';
|
|
import { Label, Text } from '../../component-library';
|
|
import Box from '../../ui/box';
|
|
|
|
const NoteToTrader = (props) => {
|
|
const { placeholder, maxLength, onChange, noteText, labelText } = props;
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
className="note-header"
|
|
display={DISPLAY.FLEX}
|
|
justifyContent={JustifyContent.spaceBetween}
|
|
>
|
|
<Label htmlFor="transaction-note">{labelText}</Label>
|
|
<Text className="note-header__counter">
|
|
{noteText.length}/{maxLength}
|
|
</Text>
|
|
</Box>
|
|
<Box
|
|
display={DISPLAY.FLEX}
|
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
|
className="note-field"
|
|
>
|
|
<textarea
|
|
id="transaction-note"
|
|
data-testid="transaction-note"
|
|
onChange={({ target: { value } }) => onChange(value)}
|
|
autoFocus
|
|
maxLength={maxLength}
|
|
placeholder={placeholder}
|
|
value={noteText}
|
|
/>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
NoteToTrader.propTypes = {
|
|
placeholder: PropTypes.string,
|
|
maxLength: PropTypes.string,
|
|
onChange: PropTypes.func,
|
|
noteText: PropTypes.string,
|
|
labelText: PropTypes.string,
|
|
};
|
|
|
|
export default NoteToTrader;
|