Alexey Safronov
3aeac42444
# Conflicts: # common/ASC.Core.Common/Data/DbSubscriptionService.cs # common/ASC.Core.Common/Notify/Signalr/SignalrServiceClient.cs # common/services/ASC.ElasticSearch/Engine/FactoryIndexer.cs # common/services/ASC.ElasticSearch/Service/Settings.cs # common/services/ASC.Socket.IO.Svc/ASC.Socket.IO.Svc.csproj # common/services/ASC.Socket.IO.Svc/SocketServiceLauncher.cs # packages/asc-web-components/combobox/index.js # packages/asc-web-components/table-container/StyledTableContainer.js # packages/asc-web-components/table-container/TableGroupMenu.js # packages/asc-web-components/table-container/TableHeader.js # packages/asc-web-components/table-container/TableHeaderCell.js # packages/asc-web-components/table-container/TableRow.js # products/ASC.Files/Client/public/locales/az/Home.json # products/ASC.Files/Client/public/locales/bg/Home.json # products/ASC.Files/Client/public/locales/bg/Translations.json # products/ASC.Files/Client/public/locales/cs/Home.json # products/ASC.Files/Client/public/locales/de/ConvertDialog.json # products/ASC.Files/Client/public/locales/de/Home.json # products/ASC.Files/Client/public/locales/de/Translations.json # products/ASC.Files/Client/public/locales/de/UploadPanel.json # products/ASC.Files/Client/public/locales/el/ConvertDialog.json # products/ASC.Files/Client/public/locales/el/Home.json # products/ASC.Files/Client/public/locales/en/ConvertDialog.json # products/ASC.Files/Client/public/locales/en/Home.json # products/ASC.Files/Client/public/locales/en/Translations.json # products/ASC.Files/Client/public/locales/en/UploadPanel.json # products/ASC.Files/Client/public/locales/es/ConvertDialog.json # products/ASC.Files/Client/public/locales/es/Home.json # products/ASC.Files/Client/public/locales/es/UploadPanel.json # products/ASC.Files/Client/public/locales/fi/Home.json # products/ASC.Files/Client/public/locales/fr/ConvertDialog.json # products/ASC.Files/Client/public/locales/fr/Home.json # products/ASC.Files/Client/public/locales/fr/Translations.json # products/ASC.Files/Client/public/locales/it/ConvertDialog.json # products/ASC.Files/Client/public/locales/it/Home.json # products/ASC.Files/Client/public/locales/it/Translations.json # products/ASC.Files/Client/public/locales/it/UploadPanel.json # products/ASC.Files/Client/public/locales/ja/Home.json # products/ASC.Files/Client/public/locales/ja/UploadPanel.json # products/ASC.Files/Client/public/locales/lv/Home.json # products/ASC.Files/Client/public/locales/nl/Home.json # products/ASC.Files/Client/public/locales/nl/Translations.json # products/ASC.Files/Client/public/locales/pl/Home.json # products/ASC.Files/Client/public/locales/pt-BR/ConvertDialog.json # products/ASC.Files/Client/public/locales/pt-BR/Home.json # products/ASC.Files/Client/public/locales/pt-BR/Translations.json # products/ASC.Files/Client/public/locales/ro/Home.json # products/ASC.Files/Client/public/locales/ro/UploadPanel.json # products/ASC.Files/Client/public/locales/ru/ConvertDialog.json # products/ASC.Files/Client/public/locales/ru/Home.json # products/ASC.Files/Client/public/locales/ru/Translations.json # products/ASC.Files/Client/public/locales/ru/UploadPanel.json # products/ASC.Files/Client/public/locales/sk/Home.json # products/ASC.Files/Client/public/locales/tr/Home.json # products/ASC.Files/Client/public/locales/uk/Home.json # products/ASC.Files/Client/public/locales/vi/ConvertDialog.json # products/ASC.Files/Client/public/locales/vi/Home.json # products/ASC.Files/Client/public/locales/zh-CN/Home.json # products/ASC.Files/Client/public/locales/zh-CN/UploadPanel.json # products/ASC.Files/Client/src/HOCs/withBadges.js # products/ASC.Files/Client/src/HOCs/withContent.js # products/ASC.Files/Client/src/components/Badges.js # products/ASC.Files/Client/src/components/EditingWrapperComponent.js # products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js # products/ASC.Files/Client/src/components/panels/SharingPanel/index.js # products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js # products/ASC.Files/Client/src/pages/Home/Section/Body/index.js # products/ASC.Files/Client/src/store/DialogsStore.js # products/ASC.Files/Client/src/store/FilesActionsStore.js # products/ASC.Files/Core/HttpHandlers/FileHandler.ashx.cs # products/ASC.Files/Core/Utils/FileConverter.cs # products/ASC.Files/Server/Helpers/FilesControllerHelper.cs # products/ASC.Files/Service/Thumbnail/Builder.cs # products/ASC.Files/Service/Thumbnail/ThumbnailSettings.cs # products/ASC.Files/Service/Thumbnail/Worker.cs # products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableRow.js # public/locales/de/Common.json |
||
---|---|---|
.. | ||
sub-components | ||
combobox.stories.js | ||
combobox.stories.mdx | ||
combobox.test.js | ||
index.js | ||
README.md | ||
styled-combobox.js |
ComboBox
Custom combo box input
Usage
import ComboBox from "@appserver/components/combobox";
import NavLogoIcon from "../../../../../public/images/nav.logo.react.svg";
const options = [
{
key: 1,
icon: "static/images/catalog.employee.react.svg", // optional item
label: "Option 1",
disabled: false, // optional item
onClick: clickFunction, // optional item
},
];
<ComboBox
options={options}
isDisabled={false}
selectedOption={{
key: 0,
label: "Select",
}}
dropDownMaxHeight={200}
noBorder={false}
scale={true}
scaledOptions={true}
size="content"
onSelect={(option) => console.log("selected", option)}
/>
Options have options:
- key - Item key, may be a string or a number
- label - Display text
- icon - Optional name of icon that will be displayed before label
- disabled - Make option disabled
- onClick - On click function
ComboBox perceives all property`s for positioning from DropDown!
If you need to display a custom list of options, you must use advancedOptions property. Like this:
const advancedOptions = (
<>
<DropDownItem>
<RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
</DropDownItem>
<DropDownItem>
<RadioButton value="desc" name="first" label="Z-A" />
</DropDownItem>
<DropDownItem isSeparator />
<DropDownItem>
<RadioButton value="first" name="second" label="First name" />
</DropDownItem>
<DropDownItem>
<RadioButton
value="last"
name="second"
label="Last name"
isChecked={true}
/>
</DropDownItem>
</>
);
<ComboBox
options={[]} // An empty array will enable advancedOptions
advancedOptions={advancedOptions}
onSelect={(option) => console.log("Selected option", option)}
selectedOption={{
key: 0,
label: "Select",
}}
isDisabled={false}
scaled={false}
size="content"
directionX="right"
>
<NavLogoIcon size="medium" key="comboIcon" />
</ComboBox>
To use Combobox as a toggle button, you must declare it according to the parameters:
<ComboBox
options={[]} // Required to display correctly
selectedOption={{
key: 0,
label: "Selected option",
}}
scaled={false}
size="content"
displayType="toggle"
toggleAction={alert("action")}
>
<NavLogoIcon size="medium" key="comboIcon" />
</ComboBox>
Properties
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
advancedOptions |
element |
- | - | - | If you need display options not basic options |
className |
string |
- | - | - | Accepts class |
displayType |
oneOf |
- | default , toggle |
default |
Component Display Type |
dropDownMaxHeight |
number |
- | - | - | Height of Dropdown |
id |
string |
- | - | - | Accepts id |
isDisabled |
bool |
- | - | false |
Indicates that component is disabled |
noBorder |
bool |
- | - | false |
Indicates that component is displayed without borders |
onSelect |
func |
- | - | - | Will be triggered whenever an ComboBox is selected option |
options |
array |
✅ | - | - | Combo box options |
scaledOptions |
bool |
- | - | false |
Indicates that component`s options is scaled by ComboButton |
scaled |
bool |
- | - | true |
Indicates that component is scaled by parent |
selectedOption |
object |
✅ | - | - | Selected option |
size |
oneOf |
- | base , middle , big , huge , content |
base |
Select component width, one of default |
style |
obj , array |
- | - | - | Accepts css style |
toggleAction |
func |
- | - | - | The event will be raised when using displayType: toggle when clicking on a component |
showDisabledItems |
bool |
- | - | false |
Display disabled items or not when displayType !== toggle |