Skip to content

Commit

Permalink
story arguments added
Browse files Browse the repository at this point in the history
  • Loading branch information
verena-ifx authored and verena-ifx committed Jul 31, 2023
1 parent 421cf28 commit b72565b
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 80 deletions.
6 changes: 4 additions & 2 deletions packages/components-vue/lib/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,10 @@ export const IfxChoices = /*@__PURE__*/ defineContainer<JSX.IfxChoices, JSX.IfxC
'callbackOnInit',
'callbackOnCreateTemplates',
'valueComparer',
'error',
'errorMessage',
'ifxError',
'ifxErrorMessage',
'ifxPlaceholderValue',
'ifxChoices',
'ifxChange'
],
'value', 'change');
Expand Down
110 changes: 52 additions & 58 deletions packages/components/src/components/choices/choices.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,26 @@ export default {
searchEnabled: true,
removeItemButton: false,
disabled: false,
placeholder: true,
placeholderValue: 'Placeholder',
error: false,
errorMessage: 'Some error',
choices: 'Choice 1, Choice 2, Choice 3',
},

argTypes: {
// type: { control: { type: 'select', options: ['single', 'multiple', 'text'] } },
value: { control: 'text' },
name: { control: 'text' },
// name: { control: 'text' },
error: {
options: [true, false],
control: { type: 'radio' },
},
errorMessage: { control: 'text' },
removeItemButton: {
options: [true, false],
control: { type: 'radio' },
},
// removeItemButton: {
// options: [true, false],
// control: { type: 'radio' },
// },
searchEnabled: {
options: [true, false],
control: { type: 'radio' },
Expand All @@ -36,89 +41,78 @@ export default {
},
};

const DefaultTemplate = (args) => {
const DefaultTemplate = ({ disabled, type, value, name, error, errorMessage, placeholder, placeholderValue, removeItemButton, searchEnabled, searchPlaceholderValue, choices }) => {
const element = document.createElement('ifx-choices');
element.setAttribute('disabled', args.disabled);
element.setAttribute('type', args.type);
element.setAttribute('value', args.value);
element.setAttribute('name', args.name);
element.setAttribute('error', args.error);
element.setAttribute('errorMessage', args.errorMessage);
element.setAttribute('placeholder', args.placeholder);
element.setAttribute('placeholderValue', args.placeholderValue);
element.setAttribute('remove-item-button', args.removeItemButton);
element.setAttribute('search-enabled', args.searchEnabled)
element.setAttribute('search-placeholder-value', args.searchPlaceholderValue)
element.setAttribute('choices', args.choices);
element.setAttribute('disabled', disabled);
element.setAttribute('type', type);
element.setAttribute('value', value);
element.setAttribute('name', name);
element.setAttribute('ifx-error', error);
element.setAttribute('ifx-error-message', errorMessage);
element.setAttribute('placeholder', placeholder);
element.setAttribute('ifx-placeholder-value', placeholderValue);
element.setAttribute('remove-item-button', removeItemButton);
element.setAttribute('search-enabled', searchEnabled)
element.setAttribute('search-placeholder-value', searchPlaceholderValue)
element.setAttribute('ifx-choices', choices);

//no other way to set array of values in storybook
const choicesStr = args.choices;
if (typeof choicesStr === 'string') {
const choices = choicesStr.split(',').map((choice) => ({
value: choice.trim(),
label: choice.trim(),
}));
if (args.type === 'single' || args.type === 'multiple') {
element.setChoices(choices, 'value', 'label', true);
}
} else {
console.error("Invalid choices input:", choicesStr);
}
// const choicesStr = args.choices;
// if (typeof choicesStr === 'string') {
// const choices = choicesStr.split(',').map((choice) => ({
// value: choice.trim(),
// label: choice.trim(),
// }));
// if (args.type === 'single' || args.type === 'multiple') {
// element.setChoices(choices, 'value', 'label', true);
// }
// } else {
// console.error("Invalid choices input:", choicesStr);
// }

element.addEventListener('ifxChange', action('ifxChange'));

return element;
}


export const Default = DefaultTemplate.bind({});
Default.args = {
type: 'text',
name: 'text',
choices: 'Choice 1, Choice 2, Choice 3',
// export const Default = DefaultTemplate.bind({});
// Default.args = {
// type: 'text',
// name: 'text',
// choices: 'Choice 1, Choice 2, Choice 3',

};
// };


export const Single = DefaultTemplate.bind({});
Single.args = {
type: 'single',
name: 'single',
error: false,
errorMessage: 'Single select error',
removeItemButton: true,
placeholder: true,
placeholderValue: 'Placeholder',
searchPlaceholderValue: 'Search...',
searchEnabled: true,
disabled: false,
choices: 'Choice 1, Choice 2, Choice 3',

};

export const SingleWithIcon = DefaultTemplate.bind({});
SingleWithIcon.args = {
type: 'single',
name: 'single',
searchPlaceholderValue: 'Search...',
searchEnabled: true,
placeholder: true,
placeholderValue: 'Placeholder',
disabled: false,
choices: "Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>",
// export const SingleWithIcon = DefaultTemplate.bind({});
// SingleWithIcon.args = {
// type: 'single',
// name: 'single',
// searchPlaceholderValue: 'Search...',
// searchEnabled: true,
// placeholder: true,
// placeholderValue: 'Placeholder',
// disabled: false,
// choices: "Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>",

};
// };


export const Multiple = DefaultTemplate.bind({});
Multiple.args = {
type: 'multiple',
name: 'multi',
removeItemButton: true,
disabled: false,
placeholder: true,
placeholderValue: 'Placeholder',
choices: 'Choice 1, Choice 2, Choice 3'

};

Expand Down
46 changes: 31 additions & 15 deletions packages/components/src/components/choices/choices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
@Prop() public value: string;
@Prop() public name: string;
@Prop() public items: Array<any>;
@Prop() public choices: Array<any>;
@Prop() public choices: Array<any> | string;
@Prop() public renderChoiceLimit: number;
@Prop() public maxItemCount: number;
@Prop() public addItems: boolean;
Expand Down Expand Up @@ -81,11 +81,13 @@ export class Choices implements IChoicesProps, IChoicesMethods {
@Prop() public callbackOnCreateTemplates: OnCreateTemplates;
@Prop() public valueComparer: ValueCompareFunction;
//custom ifx props
@Prop() error: boolean = false;
@Prop() errorMessage: string = "Error";
@Prop() ifxError: boolean = false;
@Prop() ifxErrorMessage: string = "Error";
@Prop() ifxPlaceholderValue: string = "Error";
@State() ifxChoicesIconIsRotated: boolean = false;
@Event() ifxChange: EventEmitter<CustomEvent>;
@Element() private readonly root: HTMLElement;
@Prop() ifxChoices: Array<any> | string;

private choice;
private element;
Expand All @@ -97,6 +99,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
// this.removeItemButton = newValue !== 'single';
// }


@Method()
async handleChange() {
console.log("onChange: ", this.choice.getValue())
Expand Down Expand Up @@ -201,15 +204,22 @@ export class Choices implements IChoicesProps, IChoicesMethods {
}

@Method()
public async setChoices(choices: Array<any>, value: string, label: string, replaceChoices?: boolean) {
public async setChoices(choices: Array<any> | string, value: string, label: string, replaceChoices?: boolean) {
// Required format
// const predefinedChoices = [
// { value: 'Choice 1', label: 'Choice 1' },
// { value: 'Choice 2', label: 'Choice 2' },
// { value: 'Choice 3', label: 'Choice 3' },
// ];
// console.log("setting choices: ", choices, predefinedChoices);
this.choice.setChoices(choices, value, label, replaceChoices);

if (typeof choices === 'string') {
const listOfChoices = choices.split(',').map((choice) => ({
value: choice.trim(),
label: choice.trim(),
}));

console.log("transformed choices string to array: ");
this.choice.setChoices(listOfChoices, value, label, replaceChoices);
}
return this;
}

Expand Down Expand Up @@ -269,6 +279,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
}

protected render(): any {

const attributesSingle = {
'data-selector': 'root',
'name': this.name || null,
Expand All @@ -292,7 +303,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
<div class={`ifx-select-container`}>
<div class={`${choicesContainerClass}`} onClick={() => this.toggleIfxChoicesIcon()} >
<select {...attributesSingle} onChange={() => this.handleChange()}>
{this.value ? this.createSelectOptions(this.value) : this.placeholderValue}
{this.createSelectOptions(this.value)}
</select>

<div class="ifx-choices__icon-wrapper-up" onClick={() => this.toggleIfxChoicesIcon()}>
Expand All @@ -307,9 +318,9 @@ export class Choices implements IChoicesProps, IChoicesMethods {
</div>
</div>
{
this.error ?
this.ifxError ?
<div class="ifx-error-message-wrapper">
<span>{this.errorMessage}</span>
<span>{this.ifxErrorMessage}</span>
</div> : null
}
</div>;
Expand All @@ -320,7 +331,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {

<div class={choicesContainerClass} >
<select {...attributesDefault} multiple onChange={() => this.closeDropdownMenu()}>
{this.value ? this.createSelectOptions(this.value) : null}
{this.createSelectOptions(this.value)}
</select>
<div class="ifx-choices__icon-wrapper">
<ifx-icon
Expand Down Expand Up @@ -443,7 +454,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
const element = this.root.querySelector('[data-selector="root"]');
if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement) {
// this.choice = new ChoicesJs(element, settings); //standard, without using custom templates
if (props.type === 'single') {
if (this.type === 'single') {
this.choice = new ChoicesJs(element, Object.assign({}, settings, {
callbackOnCreateTemplates: function (template) {
return {
Expand Down Expand Up @@ -495,6 +506,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
}));

this.addEventListenersToHandleCustomFocusAndActiveState();
this.setChoices(this.ifxChoices, "value", "label", true)

} else { //multiselect - no custom template right now
this.choice = new ChoicesJs(element, settings); //standard, without using custom templates
Expand Down Expand Up @@ -547,9 +559,13 @@ export class Choices implements IChoicesProps, IChoicesMethods {
}
}

//needed?
private createSelectOptions(values: string | Array<string>): Array<HTMLStencilElement> {
console.log("values", values)
return getValues(values).map((value) => <option value={value}>{value}</option>);
console.log("select - initial value", values, this.ifxPlaceholderValue);
if (this.value !== 'undefined') {
return getValues(values).map((value) => <option value={value}>{value}</option>)
}
else {
return <option value={this.ifxPlaceholderValue}>{this.ifxPlaceholderValue}</option>;
}
}
}
2 changes: 1 addition & 1 deletion packages/components/src/components/choices/interfaces.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export type ValueCompareFunction = (value1: string, value2: string) => boolean;
export interface IChoicesProps {
silent?: boolean;
items?: Array<any>;
choices?: Array<any>;
choices?: Array<any> | string;
renderChoiceLimit?: number;
maxItemCount?: number;
addItems?: boolean;
Expand Down
Loading

0 comments on commit b72565b

Please sign in to comment.