From bf2410b10016c11a12b313fc9e102cee78bfd4a0 Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Mon, 28 Jan 2019 13:10:22 +0200 Subject: [PATCH 1/6] disable item in datalist --- packages/components/src/Datalist/Datalist.component.js | 4 ++++ .../components/src/Typeahead/Typeahead.component.renderers.js | 3 ++- packages/components/src/Typeahead/Typeahead.scss | 4 ++++ packages/components/stories/Datalist.js | 2 +- 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Datalist/Datalist.component.js b/packages/components/src/Datalist/Datalist.component.js index dbcaec72fe2..f2107a0657e 100644 --- a/packages/components/src/Datalist/Datalist.component.js +++ b/packages/components/src/Datalist/Datalist.component.js @@ -170,6 +170,10 @@ class Datalist extends Component { if (this.props.multiSection) { newValue = this.state.suggestions[sectionIndex].suggestions[itemIndex]; } + if (newValue.disabled) { + event.preventDefault(); + return; + } this.updateValue(event, newValue, true); } diff --git a/packages/components/src/Typeahead/Typeahead.component.renderers.js b/packages/components/src/Typeahead/Typeahead.component.renderers.js index ffe4cb85581..e19041f44f4 100644 --- a/packages/components/src/Typeahead/Typeahead.component.renderers.js +++ b/packages/components/src/Typeahead/Typeahead.component.renderers.js @@ -138,8 +138,9 @@ export function renderItem(item, { value }) { title = (item.title || item.name || '').trim(); description = item.description; } + return ( -
+
diff --git a/packages/components/src/Typeahead/Typeahead.scss b/packages/components/src/Typeahead/Typeahead.scss index 3a1894b718b..92383498bcf 100644 --- a/packages/components/src/Typeahead/Typeahead.scss +++ b/packages/components/src/Typeahead/Typeahead.scss @@ -157,6 +157,10 @@ $tc-typeahead-items-font-size: 1.5rem !default; &-highlighted { background-color: $tc-typeahead-focused-item-background-color; } + + &.disabled { + opacity: .5; + } } .highlight-match { diff --git a/packages/components/stories/Datalist.js b/packages/components/stories/Datalist.js index acbc94bcf84..2183b9847ed 100644 --- a/packages/components/stories/Datalist.js +++ b/packages/components/stories/Datalist.js @@ -35,7 +35,7 @@ const singleSectionProps = { placeholder: 'search for something ...', readOnly: false, titleMap: [ - { name: 'My foo', value: 'foo', description: 'foo description' }, + { name: 'My foo', value: 'foo', description: 'foo description', disabled: true }, { name: 'My bar', value: 'bar' }, { name: 'My foobar', value: 'foobar', description: 'foobar description' }, { name: 'My lol', value: 'lol' }, From 2e9e2e0c00cec8741bd8e56e87e5d91d8ba32596 Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Mon, 28 Jan 2019 14:54:10 +0200 Subject: [PATCH 2/6] added story --- packages/components/src/Typeahead/Typeahead.scss | 6 +++++- packages/components/stories/Datalist.js | 13 ++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Typeahead/Typeahead.scss b/packages/components/src/Typeahead/Typeahead.scss index 92383498bcf..cfac87309c2 100644 --- a/packages/components/src/Typeahead/Typeahead.scss +++ b/packages/components/src/Typeahead/Typeahead.scss @@ -159,7 +159,11 @@ $tc-typeahead-items-font-size: 1.5rem !default; } &.disabled { - opacity: .5; + color: $silver-chalice; + + &:hover { + background: none; + } } } diff --git a/packages/components/stories/Datalist.js b/packages/components/stories/Datalist.js index 2183b9847ed..e38d07c7def 100644 --- a/packages/components/stories/Datalist.js +++ b/packages/components/stories/Datalist.js @@ -35,7 +35,7 @@ const singleSectionProps = { placeholder: 'search for something ...', readOnly: false, titleMap: [ - { name: 'My foo', value: 'foo', description: 'foo description', disabled: true }, + { name: 'My foo', value: 'foo', description: 'foo description' }, { name: 'My bar', value: 'bar' }, { name: 'My foobar', value: 'foobar', description: 'foobar description' }, { name: 'My lol', value: 'lol' }, @@ -45,11 +45,19 @@ const singleSectionProps = { onLiveChange: action('onLiveChange'), }; +const titleMapWithDisabledItems = [ + { name: 'My foo', value: 'foo', description: 'foo description', disabled: true }, + { name: 'My bar', value: 'bar' }, + { name: 'My lol', value: 'lol', disabled: true }, + { name: 'My foobar', value: 'foobar', description: 'foobar description' }, +]; + storiesOf('Datalist', module) .addDecorator(story =>
{story()}
) .add('default multiSection', () => { const restrictedValues = { ...propsMultiSection, restricted: true }; const defaultValue = { ...propsMultiSection, value: 'lol' }; + const disabledItems = { ...propsMultiSection, titleMap: titleMapWithDisabledItems }; return (
@@ -67,6 +75,7 @@ storiesOf('Datalist', module) .add('default single section', () => { const restrictedValues = { ...singleSectionProps, restricted: true }; const defaultValue = { ...singleSectionProps, value: 'lol' }; + const disabledItems = { ...singleSectionProps, titleMap: titleMapWithDisabledItems }; return ( @@ -80,6 +89,8 @@ storiesOf('Datalist', module)

Auto focused :

+

With disabled Items :

+

Insert custom elements via render props :

{(content, { isShown }) => ( From f4acaef6ceb4bf74da57cc7d25ef7694247a2fc6 Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Mon, 28 Jan 2019 15:08:09 +0200 Subject: [PATCH 3/6] remove unused variable --- packages/components/stories/Datalist.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/stories/Datalist.js b/packages/components/stories/Datalist.js index e38d07c7def..84047f48b06 100644 --- a/packages/components/stories/Datalist.js +++ b/packages/components/stories/Datalist.js @@ -57,7 +57,6 @@ storiesOf('Datalist', module) .add('default multiSection', () => { const restrictedValues = { ...propsMultiSection, restricted: true }; const defaultValue = { ...propsMultiSection, value: 'lol' }; - const disabledItems = { ...propsMultiSection, titleMap: titleMapWithDisabledItems }; return ( From 755ebf39e593a57d73fe6c39b7b542be458c762f Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Tue, 29 Jan 2019 13:16:18 +0200 Subject: [PATCH 4/6] pass aria-disabled prop --- packages/components/src/Typeahead/Typeahead.component.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Typeahead/Typeahead.component.js b/packages/components/src/Typeahead/Typeahead.component.js index a576ad65556..f49b1d970ed 100644 --- a/packages/components/src/Typeahead/Typeahead.component.js +++ b/packages/components/src/Typeahead/Typeahead.component.js @@ -113,10 +113,11 @@ function Typeahead({ onToggle, icon, position, docked, ...rest }) { ...themeProps, ...inputProps, items: rest.items || [], - itemProps: { + itemProps: ({ itemIndex }) => ({ onMouseDown: rest.onSelect, 'data-feature': rest['data-feature'], - }, + 'aria-disabled': rest.items[itemIndex] && rest.items[itemIndex].disabled, + }), }; return ; From 645715bb41c4c8535d0e085233b32259e4533669 Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Tue, 29 Jan 2019 19:45:28 +0200 Subject: [PATCH 5/6] fix bug with initial index selecting --- packages/components/src/Datalist/Datalist.component.js | 6 +++--- packages/components/src/Typeahead/Typeahead.scss | 1 + packages/components/stories/Datalist.js | 10 +++++----- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/components/src/Datalist/Datalist.component.js b/packages/components/src/Datalist/Datalist.component.js index f2107a0657e..2855d3ff3f9 100644 --- a/packages/components/src/Datalist/Datalist.component.js +++ b/packages/components/src/Datalist/Datalist.component.js @@ -224,7 +224,7 @@ class Datalist extends Component { const groups = this.props.titleMap; for (let sectionIndex = 0; sectionIndex < groups.length; sectionIndex += 1) { const focusedIndex = groups[sectionIndex].suggestions.findIndex( - item => item.name === value, + item => item.value === value, ); if (focusedIndex > -1) { this.setState({ @@ -235,9 +235,9 @@ class Datalist extends Component { } } } else { - const index = this.props.titleMap.findIndex(item => item.name === value); + const index = this.props.titleMap.findIndex(item => item.value === value); this.setState({ - focusedItemIndex: index, + focusedItemIndex: index === -1 ? null : index, }); } } diff --git a/packages/components/src/Typeahead/Typeahead.scss b/packages/components/src/Typeahead/Typeahead.scss index cfac87309c2..8b9b556baf7 100644 --- a/packages/components/src/Typeahead/Typeahead.scss +++ b/packages/components/src/Typeahead/Typeahead.scss @@ -160,6 +160,7 @@ $tc-typeahead-items-font-size: 1.5rem !default; &.disabled { color: $silver-chalice; + cursor: not-allowed; &:hover { background: none; diff --git a/packages/components/stories/Datalist.js b/packages/components/stories/Datalist.js index 84047f48b06..786ecd37010 100644 --- a/packages/components/stories/Datalist.js +++ b/packages/components/stories/Datalist.js @@ -13,16 +13,16 @@ const propsMultiSection = { { title: 'cat 1', suggestions: [ - { name: 'foo', value: 'foo', description: 'foo description' }, - { name: 'faa', value: 'faa' }, + { name: 'My foo', value: 'foo', description: 'foo description' }, + { name: 'My faa', value: 'faa' }, ], }, - { title: 'cat 2', suggestions: [{ name: 'bar', value: 'bar' }] }, + { title: 'cat 2', suggestions: [{ name: 'My bar', value: 'bar' }] }, { title: 'cat 3', - suggestions: [{ name: 'foobar', value: 'foobar', description: 'foobar description' }], + suggestions: [{ name: 'My foobar', value: 'foobar', description: 'foobar description' }], }, - { title: 'cat 4', suggestions: [{ name: 'lol', value: 'lol' }] }, + { title: 'cat 4', suggestions: [{ name: 'My lol', value: 'lol' }] }, ], onFinish: action('onFinish'), onChange: action('onChange'), From 1835c97c47840991abd33fad3d0e5f6e7595470e Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Wed, 30 Jan 2019 11:50:02 +0200 Subject: [PATCH 6/6] revert lines --- packages/components/src/Datalist/Datalist.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Datalist/Datalist.component.js b/packages/components/src/Datalist/Datalist.component.js index 2855d3ff3f9..9b8d6ec86f8 100644 --- a/packages/components/src/Datalist/Datalist.component.js +++ b/packages/components/src/Datalist/Datalist.component.js @@ -224,7 +224,7 @@ class Datalist extends Component { const groups = this.props.titleMap; for (let sectionIndex = 0; sectionIndex < groups.length; sectionIndex += 1) { const focusedIndex = groups[sectionIndex].suggestions.findIndex( - item => item.value === value, + item => item.name === value, ); if (focusedIndex > -1) { this.setState({ @@ -235,7 +235,7 @@ class Datalist extends Component { } } } else { - const index = this.props.titleMap.findIndex(item => item.value === value); + const index = this.props.titleMap.findIndex(item => item.name === value); this.setState({ focusedItemIndex: index === -1 ? null : index, });