Skip to content

Commit

Permalink
Merge pull request #1432 from carloslancha/issue-1431-clay-multiselect
Browse files Browse the repository at this point in the history 
Fixes #1431 - Review ClayMultiselect (API CHANGED)
  • Loading branch information
@jbalsas
jbalsas authored Jan 11, 2019
2 parents 4ae46cf + 4068ae9 commit b4cd661
Show file tree
Hide file tree
Showing 9 changed files with 17 additions and 114 deletions.
2 changes: 1 addition & 1 deletion packages/clay-isomorphic/fixtures/expected/ClayMultiSelect.content
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="input-group input-group-stacked-sm-down"><div class="input-group-item"><div class="dropdown-full form-control form-control-tag-group" data-onkeydown="null"><input name="selectedItems"type="hidden" value="foo"><span class="label label-secondary label-dismissible"id="item-tag"tabIndex="0"><span class="label-item label-item-expand">Foo</span><span class="label-item label-item-after"><button class="btn close"aria-label="close"tabIndex="-1"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span><input class="form-control-inset"id="input name" name="input name"onBlur=" null " onFocus=" null " onInput=" null " onKeydown=" null " ref="input" type="text"value="input value" /><ul class="dropdown-menu show" ref="dropdown"><li><a data-onclick="null" data-dropdown-item-index="0" id="item" class="dropdown-item" href="javascript:;"><strong>B</strong><strong>r</strong><strong>e</strong><strong>a</strong>d</a></li></ul></div></div><div class="input-group-item input-group-item-shrink"><button class="btn btn-secondary"type="null">select</button></div></div>
<div class="input-group input-group-stacked-sm-down"><div class="input-group-item"><div class="dropdown-full form-control form-control-tag-group" data-onkeydown="null"><input name="selectedItems"type="hidden" value="foo"><span class="label label-secondary label-dismissible"id="item-tag"tabIndex="0"><span class="label-item label-item-expand">Foo</span><span class="label-item label-item-after"><button class="btn close"aria-label="close"tabIndex="-1"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span><input class="form-control-inset"onBlur=" null " onFocus=" null " onInput=" null " onKeydown=" null " ref="input" type="text"value="" /><ul class="dropdown-menu show" ref="dropdown"><li><a data-onclick="null" data-dropdown-item-index="0" id="item" class="dropdown-item" href="javascript:;"><strong>B</strong><strong>r</strong><strong>e</strong><strong>a</strong>d</a></li></ul></div></div><div class="input-group-item input-group-item-shrink"><button class="btn btn-secondary"type="null">select</button></div></div>
2 changes: 1 addition & 1 deletion packages/clay-isomorphic/fixtures/expected/ClayMultiSelect.render
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="from-group my-element-classes"id="myId"><label for="input name">Tags</label><div class="input-group input-group-stacked-sm-down"><div class="input-group-item"><div class="dropdown-full form-control form-control-tag-group" data-onkeydown="null"><input name="selectedItems"type="hidden" value="foo"><span class="label label-secondary label-dismissible"id="item-tag"tabIndex="0"><span class="label-item label-item-expand">Foo</span><span class="label-item label-item-after"><button class="btn close"aria-label="close"tabIndex="-1"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span><input class="form-control-inset"id="input name" name="input name"onBlur=" null " onFocus=" null " onInput=" null " onKeydown=" null " ref="input" type="text"value="inputValue" /><ul class="dropdown-menu show" ref="dropdown"><li><a data-onclick="null" data-dropdown-item-index="0" id="item" class="dropdown-item" href="javascript:;"><strong>B</strong><strong>r</strong><strong>e</strong><strong>a</strong>d</a></li></ul></div></div><div class="input-group-item input-group-item-shrink"><button class="btn btn-secondary"type="null">select</button></div></div></div>
<div class="from-group my-element-classes"id="myId"><label>Tags</label><div class="input-group input-group-stacked-sm-down"><div class="input-group-item"><div class="dropdown-full form-control form-control-tag-group" data-onkeydown="null"><input name="selectedItems"type="hidden" value="foo"><span class="label label-secondary label-dismissible"id="item-tag"tabIndex="0"><span class="label-item label-item-expand">Foo</span><span class="label-item label-item-after"><button class="btn close"aria-label="close"tabIndex="-1"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span><input class="form-control-inset"onBlur=" null " onFocus=" null " onInput=" null " onKeydown=" null " ref="input" type="text"value="" /><ul class="dropdown-menu show" ref="dropdown"><li><a data-onclick="null" data-dropdown-item-index="0" id="item" class="dropdown-item" href="javascript:;"><strong>B</strong><strong>r</strong><strong>e</strong><strong>a</strong>d</a></li></ul></div></div><div class="input-group-item input-group-item-shrink"><button class="btn btn-secondary"type="null">select</button></div></div></div>
4 changes: 1 addition & 3 deletions packages/clay-isomorphic/fixtures/input/ClayMultiSelect.content
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
],
"_handleButtonClicked": "(any|null)",
"contentRenderer": "(null|string)",
"inputName": "input name",
"spritemap": "icons.svg",
"requestPolling": 5,
"initialData": [],
Expand All @@ -44,7 +43,6 @@
"_removeFocusedItem": "(any|null)",
"_handleFilteredItemsChange": "(any|null)",
"_handleOnInput": "(any|null)",
"inputValue": "input value",
"dataSource": [
"Bread"
],
Expand All @@ -55,5 +53,5 @@
"value": "foo"
}
],
"selectedItemsInputName": "selectedItems"
"inputName": "selectedItems"
}
2 changes: 1 addition & 1 deletion packages/clay-isomorphic/fixtures/input/ClayMultiSelect.items
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
"value": "foo"
}
],
"selectedItemsInputName": "selectedItems"
"inputName": "selectedItems"
}
4 changes: 1 addition & 3 deletions packages/clay-isomorphic/fixtures/input/ClayMultiSelect.render
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
{
"_handleDropdownItemClick": "(any|null)",
"elementClasses": "my-element-classes",
"inputName": "input name",
"requestPolling": 0,
"extractData": "(null|unknown)",
"_removeFocusedItem": "(any|null)",
"_handleFilteredItemsChange": "(any|null)",
"_handleOnInput": "(any|null)",
"inputValue": "inputValue",
"id": "myId",
"requestTimeout": 1000,
"selectedItemsInputName": "selectedItems",
"inputName": "selectedItems",
"enableAutocomplete": false,
"requestRetries": 10,
"helpText": "Help Text",
Expand Down
25 changes: 3 additions & 22 deletions packages/clay-multi-select/src/ClayMultiSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ class ClayMultiSelect extends ClayComponent {
*/
_handleDropdownItemClick(event) {
this.filteredItems = [];
this.inputValue = '';
this.refs.autocomplete.refs.input.focus();

const value = this._performCall(this.valueLocator, event.data);
Expand Down Expand Up @@ -428,22 +427,13 @@ ClayMultiSelect.STATE = {
initialData: Config.oneOfType([Config.object(), Config.array()]),

/**
* Name of the input.
* @default undefind
* @instance
* @memberof ClayMultiSelect
* @type {?(string|undefined)}
*/
inputName: Config.string(),

/**
* Value of the input.
* @default undefined
* Name for each selected item input hidden.
* @default selectedItems
* @instance
* @memberof ClayMultiSelect
* @type {?(string|undefined)}
*/
inputValue: Config.string(),
inputName: Config.string().value('selectedItems'),

/**
* Set ups the request options
Expand Down Expand Up @@ -519,15 +509,6 @@ ClayMultiSelect.STATE = {
*/
selectedItems: Config.array(Config.object()).value([]),

/**
* Name of the selected items input.
* @default selectedItems
* @instance
* @memberof ClayMultiSelect
* @type {?(string|undefined)}
*/
selectedItemsInputName: Config.string().value('selectedItems'),

/**
* The path to the SVG spritemap file containing the icons.
* @default undefined
Expand Down
26 changes: 6 additions & 20 deletions packages/clay-multi-select/src/ClayMultiSelect.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
{@param? id: string}
{@param? initialData: []|list<?>}
{@param? inputName: string}
{@param? inputValue: string}
{@param? label: string}
{@param? labelLocator: any}
{@param? requestOptions: [
Expand All @@ -39,7 +38,6 @@
{@param? requestRetries: number}
{@param? requestTimeout: number}
{@param? selectedItems: list<?>}
{@param? selectedItemsInputName: string}

{let $attributes kind="attributes"}
class="from-group
Expand All @@ -55,13 +53,7 @@

<div {$attributes}>
{if $label}
{let $labelAttributes kind="attributes"}
{if $inputName}
for="{$inputName}"
{/if}
{/let}

<label {$labelAttributes}>{$label}</label>
<label>{$label}</label>
{/if}

{call .content}
Expand All @@ -80,14 +72,12 @@
{param helpText: $helpText /}
{param initialData: $initialData /}
{param inputName: $inputName /}
{param inputValue: $inputValue /}
{param labelLocator: $labelLocator /}
{param requestOptions: $requestOptions /}
{param requestPolling: $requestPolling /}
{param requestRetries: $requestRetries /}
{param requestTimeout: $requestTimeout /}
{param selectedItems: $selectedItems /}
{param selectedItemsInputName: $selectedItemsInputName /}
{param spritemap: $spritemap /}
{/call}
</div>
Expand All @@ -113,7 +103,6 @@
{@param? filteredItems: list<?>}
{@param? initialData: []|list<?>}
{@param? inputName: string}
{@param? inputValue: string}
{@param? labelLocator: any}
{@param? requestOptions: [
method: string,
Expand All @@ -129,7 +118,6 @@
{@param? requestRetries: number}
{@param? requestTimeout: number}
{@param? selectedItems: list<?>}
{@param? selectedItemsInputName: string}

<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
Expand All @@ -151,8 +139,6 @@
{param filteredItems: $filteredItems /}
{param initialData: $initialData /}
{param inputElementClasses: 'form-control-inset' /}
{param inputName: $inputName /}
{param inputValue: $inputValue /}
{param ref: 'autocomplete' /}
{param requestOptions: $requestOptions /}
{param requestPolling: $requestPolling /}
Expand All @@ -163,8 +149,8 @@
{call .items}
{param _handleCloseButtonClick: $_handleCloseButtonClick /}
{param contentRenderer: $contentRenderer /}
{param inputName: $inputName /}
{param selectedItems: $selectedItems /}
{param selectedItemsInputName: $selectedItemsInputName /}
{param spritemap: $spritemap /}
{/call}
{/if}
Expand Down Expand Up @@ -205,13 +191,13 @@
{@param spritemap: string}
{@param? _handleCloseButtonClick: any}
{@param? contentRenderer: string}
{@param? selectedItemsInputName: string}
{@param? inputName: string}

{foreach $item in $selectedItems}
{if $selectedItemsInputName}
{if $inputName}
{let $inputAttributes kind="attributes"}
{if $selectedItemsInputName}
name="{$selectedItemsInputName}"
{if $inputName}
name="{$inputName}"
{/if}

type="hidden"
Expand Down
24 changes: 1 addition & 23 deletions packages/clay-multi-select/src/__tests__/ClayMultiSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,28 +69,6 @@ describe('ClayMultiSelect', function() {
expect(component).toMatchSnapshot();
});

it('should render a ClayMultiSelect with input name', () => {
component = new ClayMultiSelect({
dataSource,
helpText,
inputName: 'foo',
spritemap,
});

expect(component).toMatchSnapshot();
});

it('should render a ClayMultiSelect with input value', () => {
component = new ClayMultiSelect({
dataSource,
helpText,
inputValue: 'bar',
spritemap,
});

expect(component).toMatchSnapshot();
});

it('should render a ClayMultiSelect with label', () => {
component = new ClayMultiSelect({
dataSource,
Expand Down Expand Up @@ -127,7 +105,7 @@ describe('ClayMultiSelect', function() {
component = new ClayMultiSelect({
dataSource,
helpText,
selectedItemsInputName: 'foo',
inputName: 'foo',
spritemap,
});

Expand Down
42 changes: 2 additions & 40 deletions packages/clay-multi-select/src/__tests__/__snapshots__/ClayMultiSelect.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,25 +68,6 @@ exports[`ClayMultiSelect should render a ClayMultiSelect with id 1`] = `
</div>
`;
exports[`ClayMultiSelect should render a ClayMultiSelect with input name 1`] = `
<div class="from-group">
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="dropdown-full form-control form-control-tag-group">
<input class="form-control-inset" id="foo" name="foo" ref="input" type="text" value="">
<ul class="dropdown-menu" ref="dropdown"></ul>
</div>
<div class="form-feedback-group">
<div class="form-text">You can use a comma to enter tags</div>
</div>
</div>
<div class="input-group-item input-group-item-shrink">
<button class="btn btn-secondary" type="button">select</button>
</div>
</div>
</div>
`;
exports[`ClayMultiSelect should render a ClayMultiSelect with input name from selected items 1`] = `
<div class="from-group">
<div class="input-group input-group-stacked-sm-down">
Expand All @@ -106,32 +87,13 @@ exports[`ClayMultiSelect should render a ClayMultiSelect with input name from se
</div>
`;
exports[`ClayMultiSelect should render a ClayMultiSelect with input value 1`] = `
<div class="from-group">
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="dropdown-full form-control form-control-tag-group">
<input class="form-control-inset" ref="input" type="text" value="bar">
<ul class="dropdown-menu" ref="dropdown"></ul>
</div>
<div class="form-feedback-group">
<div class="form-text">You can use a comma to enter tags</div>
</div>
</div>
<div class="input-group-item input-group-item-shrink">
<button class="btn btn-secondary" type="button">select</button>
</div>
</div>
</div>
`;
exports[`ClayMultiSelect should render a ClayMultiSelect with label 1`] = `
<div class="from-group">
<label for="foo">Foo</label>
<label>Foo</label>
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="dropdown-full form-control form-control-tag-group">
<input class="form-control-inset" id="foo" name="foo" ref="input" type="text" value="">
<input class="form-control-inset" ref="input" type="text" value="">
<ul class="dropdown-menu" ref="dropdown"></ul>
</div>
<div class="form-feedback-group">
Expand Down

0 comments on commit b4cd661

Please sign in to comment.