Alexey Safronov
f3afd79a3f
# Conflicts: # packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js # packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js # packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js # packages/asc-web-common/components/PageLayout/index.js # packages/asc-web-common/store/SettingsStore.js # packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js # packages/asc-web-components/combobox/index.js # packages/asc-web-components/context-menu/styled-context-menu.js # packages/asc-web-components/drop-down/index.js # packages/asc-web-components/link-with-dropdown/index.js # packages/asc-web-components/row/index.js # packages/asc-web-components/table-container/StyledTableContainer.js # packages/asc-web-components/table-container/TableHeaderCell.js # packages/asc-web-components/themes/dark.js # products/ASC.Files/Client/public/images/files.menu.svg # products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js # products/ASC.Files/Client/src/components/Badges.js # products/ASC.Files/Client/src/components/QuickButtons.js # products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js # products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js # products/ASC.Files/Client/src/components/panels/SharingPanel/index.js # products/ASC.Files/Client/src/components/panels/StyledPanels.js # products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js # products/ASC.Files/Client/src/components/panels/UploadPanel/index.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js # products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js # products/ASC.Files/Client/src/pages/Home/Section/Header/index.js # products/ASC.Files/Client/src/pages/Home/index.js # products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js # products/ASC.Files/Client/src/store/UploadDataStore.js # products/ASC.People/Client/public/images/people.menu.svg # products/ASC.People/Client/src/components/GroupSelector/index.js # products/ASC.People/Client/src/components/PeopleSelector/index.js # products/ASC.People/Client/src/pages/Home/Section/Body/RowView/userContent.js # products/ASC.People/Client/src/pages/Home/index.js # products/ASC.People/Client/src/pages/Profile/Section/Body/index.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/nav-item.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js # web/ASC.Web.Client/src/components/pages/Home/index.js |
||
---|---|---|
.. | ||
index.js | ||
input-block.stories.js | ||
input-block.test.js | ||
README.md | ||
styled-input-block.js |
InputBlock
InputBlock description
Usage
import InputBlock from "@appserver/components/input-block";
const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
<InputBlock
mask={mask}
iconName={"static/images/search.react.svg"}
onIconClick={(event) => alert(event.target.value)}
onChange={(event) => alert(event.target.value)}
>
<Button
size="base"
isDisabled={false}
onClick={() => alert("Button clicked")}
label="OK"
/>
</InputBlock>
Properties
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
autoComplete |
string |
- | - | - | Used as HTML autocomplete property |
className |
string |
- | - | - | Accepts class |
hasError |
bool |
- | - | - | Indicates the input field has an error |
hasWarning |
bool |
- | - | - | Indicates the input field has a warning |
iconColor |
string |
- | - | black |
Specifies the icon color |
iconName |
string |
- | - | - | Specifies the icon name |
iconSize |
number |
✅ | - | - | Size icon |
id |
string |
- | - | - | Used as HTML id property |
isAutofocussed |
bool |
- | - | - | Focus the input field on initial render |
isDisabled |
bool |
- | - | false |
Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
isIconFill |
bool |
- | - | false |
Determines if icon fill is needed |
isReadOnly |
bool |
- | - | false |
Indicates that the field is displaying read-only content |
mask |
array |
- | - | - | input text mask |
name |
string |
- | - | - | Used as HTML name property |
onBlur |
func |
- | - | - | Called when field is blurred |
onChange |
func |
- | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as value |
onFocus |
func |
- | - | - | Called when field is focused |
onIconClick |
func |
✅ | - | - | Will be triggered whenever an icon is clicked |
placeholder |
string |
- | - | - | Placeholder text for the input |
scale |
bool |
- | - | - | Indicates the input field has scale |
size |
string |
- | base , middle , big , huge |
base |
Supported size of the input fields. |
style |
obj , array |
- | - | - | Accepts css style |
type |
string |
- | text , password |
text |
Supported type of the input fields. |
value |
string |
✅ | - | - | Value of the input |