@synerise/ds-subject v0.9.95
id: subject
title: Subject
Subject UI Component
Installation
npm i @synerise/ds-subject
or
yarn add @synerise/ds-subject
Usage
import Subject from '@synerise/ds-subject'
<Subject
texts={{
noResults: 'No results',
searchPlaceholder: 'Search'
}}
onSelectItem={(item) => {}
onShowPreview={() => {}}
type='event'
placeholder='Choose event'
iconPlaceholder={<VarTypeStringM />}
selectedItem={undefined}
items={[
{
id: 1,
name: `Attribute 1`,
icon: <NotificationsM />,
},
{
id: 2,
name: `Attribute 2`,
icon: <NotificationsM />,
}
]}
/>
Demo
API
| --------- | ------ | ------ | ----- |
| getPopupContainerOverride | Popup container function for child tooltips and dropdowns | (trigger: HTMLElement | null) => HTMLElement; | - |
| iconPlaceholder | Icon for empty selected item | React.ReactNode | - |
| items | Array of available subjects | SubjectItem[] | [] |
| onActivate | Callback called when user opens dropdown | (fieldType: string) => void | - |
| onDeactivate | Callback called when user closes dropdown | () => void | - |
| onSelectItem | Callback called when user select new subject | ( SubjectItem) => void; | - |
| onShowPreview | Callback called when user clicks on Show Preview button | () => void \ undefined | - |
| placeholder | Placeholder for empty selected item | string \ React.ReactNode; | - |
| Property | Description | Type | Default |
| selectedItem? | Selected item | SubjectItem \ undefined; | undefined
|
| texts | Object with translations | TEXTS | - |
| type? | Type of subject parameter
\ context
\ event
| SubjectType | parameter
|
SubjectItem
Property | Description | Type | Default |
---|---|---|---|
icon | Icon of subject item | React.ReactNode | - |
id | Id of subject item | React.ReactText | - |
name | Name of subject item | string | - |
TEXTS
Property | Description | Type | Default |
---|---|---|---|
noResults | No results info | string | - |
searchPlaceholder | Search box placeholder | string | - |
2 days ago
2 days ago
11 days ago
25 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
6 months ago
8 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago