-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EPMRPP-76651 || FieldText component (#3105)
* EPMRPP-76651 || rename InputNumeric to FieldNumber to match design system, fix margin, signs disabled state * EPMRPP-76651 || remove duplicates * EPMRPP-76651 || FieldErrorHint provide provideHint prop to have possibility work as error messages proxy * EPMRPP-76651 || FieldText component * EPMRPP-76651 || code review fixes - 1
- Loading branch information
1 parent
79b8ebe
commit a299f7d
Showing
16 changed files
with
460 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...c/componentLibrary/inputNumeric/README.md → ...rc/componentLibrary/fieldNumber/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| ## **InputNumeric** | ||
| ## **FieldNumber** | ||
|
|
||
| Min width - 5 symbols. Max width - flexible | ||
|
|
||
|
|
||
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| ## **FieldText** | ||
|
|
||
| Has 36px height & width adjusted by content. | ||
|
|
||
| ### Props: | ||
|
|
||
| - **value**: _string_, optional, default = "" | ||
| - **className**: _string_, optional, default = "" | ||
| - **error**: _string_, optional, default = "" | ||
| - **placeholder**: _string_, optional, default = "" | ||
| - **maxLength**: _number_, optional, default = 254 | ||
| - **disabled**: _bool_, optional, default = false | ||
| - **refFunction**: func, optional, default = () => {} | ||
| - **touched**: _bool_, optional, default = false | ||
| - **title**: _string_, optional, default = "" | ||
| - **label**: _string_, optional, default = "" | ||
| - **helperText**: _string_, optional, default = "" | ||
| - **defaultWidth**: _bool_, optional, default = true | ||
| - **startIcon**: _string_, optional, default = null | ||
| - **endIcon**: _string_, optional, default = null | ||
| - **clearable**: _bool_, optional, default = false | ||
|
|
||
| ### Events: | ||
|
|
||
| - **onFocus** | ||
| - **onBlur** | ||
| - **onKeyUp** | ||
| - **onKeyDown** | ||
| - **onChange** - returns new value: _string_ | ||
|
|
||
| ### Icon | ||
|
|
||
| Only text variant can be used with icon. You can pass imported svg icon | ||
| via _startIcon_ or _endIcon_ props to display it on the left or right respectively. | ||
|
|
||
| ### Default width | ||
|
|
||
| By default, width is set to 240px. | ||
| To disable this behavior set the _defaultWidth_ prop to false | ||
| However this props doesn't affect label, error text and helper text | ||
| so to restrict whole component to desire width wrap component | ||
| to container with desired width |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| /* | ||
| * Copyright 2022 EPAM Systems | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames/bind'; | ||
| import Parser from 'html-react-parser'; | ||
| import CrossIcon from './img/cross-inline.svg'; | ||
| import styles from './fieldText.scss'; | ||
|
|
||
| const cx = classNames.bind(styles); | ||
| const VARIANT = 'light'; | ||
|
|
||
| export const FieldText = ({ | ||
| value, | ||
| className, | ||
| error, | ||
| placeholder, | ||
| maxLength, | ||
| disabled, | ||
| refFunction, | ||
| onChange, | ||
| onFocus, | ||
| onBlur, | ||
| onKeyUp, | ||
| onKeyDown, | ||
| touched, | ||
| title, | ||
| label, | ||
| helpText, | ||
| defaultWidth, | ||
| startIcon, | ||
| endIcon, | ||
| clearable, | ||
| }) => { | ||
| const clearInput = () => onChange(''); | ||
|
|
||
| return ( | ||
| <> | ||
| {label && <span className={cx(VARIANT, 'label', { disabled })}>{label}</span>} | ||
| <div | ||
| className={cx(VARIANT, 'input-container', className, { | ||
| error, | ||
| touched, | ||
| disabled, | ||
| 'default-width': defaultWidth, | ||
| })} | ||
| title={title} | ||
| > | ||
| {startIcon && ( | ||
| <span className={cx('icon-container-start')}> | ||
| <i className={cx(VARIANT, 'icon')}>{Parser(startIcon)}</i> | ||
| </span> | ||
| )} | ||
| <input | ||
| ref={refFunction} | ||
| type="text" | ||
| className={cx(VARIANT, 'input')} | ||
| value={value} | ||
| placeholder={placeholder} | ||
| maxLength={maxLength} | ||
| disabled={disabled} | ||
| onChange={disabled ? null : onChange} | ||
| onFocus={disabled ? null : onFocus} | ||
| onBlur={disabled ? null : onBlur} | ||
| onKeyUp={disabled ? null : onKeyUp} | ||
| onKeyDown={disabled ? null : onKeyDown} | ||
| /> | ||
| {endIcon && ( | ||
| <span className={cx('icon-container-end')}> | ||
| <i className={cx(VARIANT, 'icon')}>{Parser(endIcon)}</i> | ||
| </span> | ||
| )} | ||
| {clearable && ( | ||
| <span className={cx('icon-container-end')}> | ||
| <i | ||
| className={cx(VARIANT, 'clear-icon', { disabled })} | ||
| onClick={disabled ? null : clearInput} | ||
| > | ||
| {Parser(CrossIcon)} | ||
| </i> | ||
| </span> | ||
| )} | ||
| </div> | ||
| {(error || helpText) && ( | ||
| <div className={cx(VARIANT, 'additional-content', { disabled })}> | ||
| {error && touched && <span className={cx(VARIANT, 'error-text')}>{error}</span>} | ||
| {helpText && <span className={cx(VARIANT, 'help-text')}>{helpText}</span>} | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
| FieldText.propTypes = { | ||
| value: PropTypes.string, | ||
| className: PropTypes.string, | ||
| error: PropTypes.string, | ||
| placeholder: PropTypes.string, | ||
| maxLength: PropTypes.number, | ||
| disabled: PropTypes.bool, | ||
| refFunction: PropTypes.func, | ||
| onChange: PropTypes.func, | ||
| onFocus: PropTypes.func, | ||
| onBlur: PropTypes.func, | ||
| onKeyUp: PropTypes.func, | ||
| onKeyDown: PropTypes.func, | ||
| touched: PropTypes.bool, | ||
| title: PropTypes.string, | ||
| label: PropTypes.string, | ||
| helpText: PropTypes.string, | ||
| defaultWidth: PropTypes.bool, | ||
| startIcon: PropTypes.string, | ||
| endIcon: PropTypes.string, | ||
| clearable: PropTypes.bool, | ||
| }; | ||
| FieldText.defaultProps = { | ||
| value: '', | ||
| className: '', | ||
| error: '', | ||
| placeholder: 'placeholder', | ||
| maxLength: 256, | ||
| disabled: false, | ||
| refFunction: () => {}, | ||
| onChange: () => {}, | ||
| onFocus: () => {}, | ||
| onBlur: () => {}, | ||
| onKeyUp: () => {}, | ||
| onKeyDown: () => {}, | ||
| touched: false, | ||
| title: '', | ||
| label: '', | ||
| helpText: '', | ||
| defaultWidth: true, | ||
| startIcon: null, | ||
| endIcon: null, | ||
| clearable: false, | ||
| }; |
Oops, something went wrong.