Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(fw-select): added prop to display avatar #293

Merged
merged 2 commits into from
Nov 24, 2021
Merged

feat(fw-select): added prop to display avatar #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3b4b1b
feat(fw-select): added prop to display avatar in tags
kishore-kumar-E3682 Nov 19, 2021
1f0d3dd
feat: moved all the types to the types.ts file
kishore-kumar-E3682 Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions packages/crayons-core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { DropdownVariant } from "./components/select-option/select-option";
import { PopoverPlacementType } from "./components/popover/popover";
import { DropdownVariant as DropdownVariant1 } from "./components/select-option/select-option";
import { DropdownVariant, PopoverPlacementType, TagVariant } from "./utils/types";
import { ToastOptions } from "./components/toast/toast-util";
export namespace Components {
interface FwAvatar {
Expand Down Expand Up @@ -589,6 +587,10 @@ export namespace Components {
* Descriptive or instructional text displayed below the list box.
*/
"stateText": string;
/**
* The variant of tag to be used.
*/
"tagVariant": TagVariant;
/**
* Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated.
*/
Expand Down Expand Up @@ -729,7 +731,7 @@ export namespace Components {
/**
* The variant of tag to be displayed.
*/
"variant": 'standard' | 'avatar';
"variant": TagVariant;
}
interface FwTextarea {
/**
Expand Down Expand Up @@ -1804,6 +1806,10 @@ declare namespace LocalJSX {
* Descriptive or instructional text displayed below the list box.
*/
"stateText"?: string;
/**
* The variant of tag to be used.
*/
"tagVariant"?: TagVariant;
/**
* Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated.
*/
Expand Down Expand Up @@ -1955,7 +1961,7 @@ declare namespace LocalJSX {
/**
* The variant of tag to be displayed.
*/
"variant"?: 'standard' | 'avatar';
"variant"?: TagVariant;
}
interface FwTextarea {
/**
Expand Down
2 changes: 2 additions & 0 deletions packages/crayons-core/src/components/avatar/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,13 @@ function App() {

### Used by

- [fw-select-option](../select-option)
- [fw-tag](../tag)

### Graph
```mermaid
graph TD;
fw-select-option --> fw-avatar
fw-tag --> fw-avatar
style fw-avatar fill:#f9f,stroke:#333,stroke-width:4px
```
Expand Down
1 change: 1 addition & 0 deletions packages/crayons-core/src/components/datepicker/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ graph TD;
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-button --> fw-spinner
fw-button --> fw-icon
style fw-datepicker fill:#f9f,stroke:#333,stroke-width:4px
Expand Down
17 changes: 9 additions & 8 deletions packages/crayons-core/src/components/options-list/list-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
Event,
} from '@stencil/core';
import { debounce } from '../../utils';
import { DropdownVariant } from '../select-option/select-option';
import { DropdownVariant } from '../../utils/types';

@Component({
tag: 'fw-list-options',
Expand All @@ -34,11 +34,7 @@ export class ListOptions {
option.text.toLowerCase().includes(value)
)
: dataSource;
resolve(
filteredValue.length === 0
? [{ text: this.notFoundText, disabled: true }]
: filteredValue
);
resolve(filteredValue);
});
};

Expand Down Expand Up @@ -209,7 +205,11 @@ export class ListOptions {
this.isLoading = true;
this.fwLoading.emit({ isLoading: this.isLoading });
this.search(filterText, this.selectOptions).then((options) => {
this.filteredOptions = this.serializeData(options);
this.filteredOptions =
options?.length > 0
? this.serializeData(options)
: [{ text: this.notFoundText, disabled: true }];

this.isLoading = false;
this.fwLoading.emit({ isLoading: this.isLoading });
});
Expand Down Expand Up @@ -269,7 +269,8 @@ export class ListOptions {

componentWillLoad() {
if (this.selectedOptions.length > 0) {
this.value = this.selectedOptions.map((option) => option.value);
this.selectedOptionsState = this.selectedOptions;
this.value = this.selectedOptionsState.map((option) => option.value);
} else if (this.value.length > 0) {
this.setSelectedOptionsByValue(this.value);
}
Expand Down
1 change: 1 addition & 0 deletions packages/crayons-core/src/components/options-list/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ graph TD;
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-input --> fw-icon
fw-select --> fw-list-options
style fw-list-options fill:#f9f,stroke:#333,stroke-width:4px
Expand Down
15 changes: 1 addition & 14 deletions packages/crayons-core/src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
h,
} from '@stencil/core';
import { createPopper, Instance } from '@popperjs/core';
import { PopoverPlacementType } from '../../utils/types';

@Component({
tag: 'fw-popover',
Expand Down Expand Up @@ -184,17 +185,3 @@ export class Popover {
];
}
}

export type PopoverPlacementType =
| 'top-start'
| 'top'
| 'top-end'
| 'left-start'
| 'left'
| 'left-end'
| 'right-start'
| 'right'
| 'right-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end';
2 changes: 2 additions & 0 deletions packages/crayons-core/src/components/select-option/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,12 +149,14 @@ Type: `Promise<any>`

- [fw-icon](../icon)
- [fw-checkbox](../checkbox)
- [fw-avatar](../avatar)

### Graph
```mermaid
graph TD;
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-datepicker --> fw-select-option
fw-list-options --> fw-select-option
fw-timepicker --> fw-select-option
Expand Down
15 changes: 13 additions & 2 deletions packages/crayons-core/src/components/select-option/select-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
Method,
Listen,
} from '@stencil/core';
import { DropdownVariant } from '../../utils/types';

@Component({
tag: 'fw-select-option',
Expand Down Expand Up @@ -114,6 +115,14 @@ export class SelectOption {
{description}
</Fragment>
);
case 'avatar':
return (
<Fragment>
{checkbox}
{this.createAvatar()}
{description}
</Fragment>
);
default:
break;
}
Expand Down Expand Up @@ -150,6 +159,10 @@ export class SelectOption {
return <fw-checkbox checked={this.selected}></fw-checkbox>;
}

createAvatar() {
return <fw-avatar size='small' {...this.graphicsProps}></fw-avatar>;
}

render() {
return (
<div
Expand Down Expand Up @@ -177,5 +190,3 @@ export class SelectOption {
}
}
}

export type DropdownVariant = 'standard' | 'icon' | 'avatar';
6 changes: 6 additions & 0 deletions packages/crayons-core/src/components/select/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,11 @@ function App() {
<fw-select
id="dynamicSelect"
label="Rick & Morty Characters"
no-data-text="Type to search.."
placeholder="Your choices"
state-text="Select multiple options"
variant="avatar"
tag-variant="avatar"
multiple
>
</fw-select>
Expand All @@ -255,6 +258,7 @@ function App() {
text: x.name,
subText: x.type,
value: x.id.toString(),
graphicsProps: { image: x.image },
};
});
});
Expand Down Expand Up @@ -288,6 +292,7 @@ function App() {
| `selectedOptions` | -- | Array of the options that is displayed as the default selection, in the list box. Must be a valid option corresponding to the fw-select-option components used in Select. | `any[]` | `[]` |
| `state` | `state` | Theme based on which the list box is styled. | `"error" \| "normal" \| "warning"` | `'normal'` |
| `stateText` | `state-text` | Descriptive or instructional text displayed below the list box. | `string` | `''` |
| `tagVariant` | `tag-variant` | The variant of tag to be used. | `"avatar" \| "standard"` | `'standard'` |
| `type` | `type` | Type of option accepted as the input value. If a user tries to enter an option other than the specified type, the list is not populated. | `"number" \| "text"` | `'text'` |
| `value` | `value` | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any` | `undefined` |
| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` |
Expand Down Expand Up @@ -369,6 +374,7 @@ graph TD;
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-input --> fw-icon
fw-datepicker --> fw-select
fw-timepicker --> fw-select
Expand Down
8 changes: 7 additions & 1 deletion packages/crayons-core/src/components/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@stencil/core';

import { handleKeyDown, renderHiddenField } from '../../utils';
import { DropdownVariant } from '../select-option/select-option';
import { DropdownVariant, TagVariant } from '../../utils/types';
@Component({
tag: 'fw-select',
styleUrl: 'select.scss',
Expand Down Expand Up @@ -128,6 +128,10 @@ export class Select {
* Array of the options that is displayed as the default selection, in the list box. Must be a valid option corresponding to the fw-select-option components used in Select.
*/
@Prop({ reflect: true, mutable: true }) selectedOptions = [];
/**
* The variant of tag to be used.
*/
@Prop() tagVariant: TagVariant = 'standard';
// Events
/**
* Triggered when a value is selected or deselected from the list box options.
Expand Down Expand Up @@ -235,6 +239,8 @@ export class Select {
if (this.value.includes(option.value)) {
return (
<fw-tag
variant={this.tagVariant}
graphicsProps={option.graphicsProps}
text={option.text}
disabled={option.disabled}
value={option.value}
Expand Down
3 changes: 2 additions & 1 deletion packages/crayons-core/src/components/tag/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
h,
} from '@stencil/core';
import { handleKeyDown } from '../../utils';
import { TagVariant } from '../../utils/types';

@Component({
tag: 'fw-tag',
Expand All @@ -33,7 +34,7 @@ export class Tag {
/**
* The variant of tag to be displayed.
*/
@Prop({ reflect: true }) variant: 'standard' | 'avatar' = 'standard';
@Prop({ reflect: true }) variant: TagVariant = 'standard';

/**
* The props need to be passed for the variant. If the variant is avatar then use this prop to send the props for the fw-avatar component.
Expand Down
1 change: 1 addition & 0 deletions packages/crayons-core/src/components/timepicker/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ graph TD;
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-select-option --> fw-avatar
fw-input --> fw-icon
style fw-timepicker fill:#f9f,stroke:#333,stroke-width:4px
```
Expand Down
17 changes: 17 additions & 0 deletions packages/crayons-core/src/utils/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export type TagVariant = 'standard' | 'avatar';

export type DropdownVariant = 'standard' | 'icon' | 'avatar';

export type PopoverPlacementType =
| 'top-start'
| 'top'
| 'top-end'
| 'left-start'
| 'left'
| 'left-end'
| 'right-start'
| 'right'
| 'right-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end';