diff --git a/components/icon/package.json b/components/icon/package.json index 9372a377c60..a5731a4c5b9 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@ring-ui/icon", - "version": "1.0.1", + "version": "1.0.2", "main": "index.js", "scripts": { "prepublish": "node generate-exports" diff --git a/components/popup/popup.test.js b/components/popup/popup.test.js index 7ccf01b5c05..2af9baef677 100644 --- a/components/popup/popup.test.js +++ b/components/popup/popup.test.js @@ -67,8 +67,7 @@ describe('Popup', () => { it('should be closed by click outside the element after show', () => { const onCloseAttempt = sandbox.stub(); const wrapper = mountPopup({ - onCloseAttempt, - ...this.state + onCloseAttempt }); wrapper.setProps({hidden: false}, () => { diff --git a/components/query-assist/query-assist.css b/components/query-assist/query-assist.css index 1fb63d5cc7d..f48e772dd7b 100644 --- a/components/query-assist/query-assist.css +++ b/components/query-assist/query-assist.css @@ -2,6 +2,7 @@ @value unit from "../global/global.css"; @value overInputZIndex: 2; +@value inputGap: calc(unit * 3); .light { &.queryAssist { @@ -209,11 +210,15 @@ } &.inputGap { - border-right-width: calc(unit * 3); + border-right-width: inputGap; + } + + &.inputGap2 { + border-right-width: calc(2 * inputGap); } &.inputLeftGap { - border-left-width: calc(unit * 3); + border-left-width: inputGap; } &.inputDisabled { @@ -258,6 +263,13 @@ display: inline; } +.actions { + position: absolute; + z-index: overInputZIndex; + top: 2px; + right: 1px; +} + .icon { position: absolute; z-index: overInputZIndex; @@ -274,6 +286,11 @@ & svg { vertical-align: baseline; } + + @nest .actions & { + position: relative; + top: auto; + } } .loaderOnTheRight { @@ -282,10 +299,6 @@ left: auto; } -.iconClear { - right: 1px; -} - .iconGlass { left: 1px; } diff --git a/components/query-assist/query-assist.examples.html b/components/query-assist/query-assist.examples.html index 8e91c6a6632..f68e3c56951 100644 --- a/components/query-assist/query-assist.examples.html +++ b/components/query-assist/query-assist.examples.html @@ -285,3 +285,70 @@ ); + + + +
+
+ +
+
+ + + + import React from 'react'; + import {render} from 'react-dom'; + import hubConfig from '@ring-ui/docs/components/hub-config'; + import { PermissionIcon } from '@jetbrains/ring-ui/components/icon'; + + import QueryAssist from '@jetbrains/ring-ui/components/query-assist/query-assist'; + import Auth from '@jetbrains/ring-ui/components/auth/auth'; + import HTTP from '@jetbrains/ring-ui/components/http/http'; + + const log = obj => { + const div = document.createElement('div'); + div.innerHTML = JSON.stringify(obj); + document.getElementById('example').appendChild(div); + }; + + const auth = new Auth(hubConfig); + const http = new HTTP(auth, auth.getAPIPath()); + + const dataSource = props => { + const params = { + query: { + ...props, + fields: 'query,caret,styleRanges' + (props.omitSuggestions ? '' : ',suggestions') + } + } + + return http.get('users/queryAssist', params); + } + + const actions = [ + , + ]; + auth.init().then(() => { + render( + , + document.getElementById('example') + ); + }); + + diff --git a/components/query-assist/query-assist.js b/components/query-assist/query-assist.js index 23ef44f4605..33f8a799601 100644 --- a/components/query-assist/query-assist.js +++ b/components/query-assist/query-assist.js @@ -129,6 +129,7 @@ export default class QueryAssist extends Component { query: PropTypes.string, useCustomItemRender: PropTypes.bool, translations: PropTypes.object, + actions: PropTypes.array, 'data-test': PropTypes.string }; @@ -760,17 +761,39 @@ export default class QueryAssist extends Component { end: noop }; + renderActions() { + const actions = [].concat(this.props.actions || []); + const renderClear = this.props.clear && !!this.state.query; + + if (renderClear) { + actions.push( + + ); + } + + return actions; + } + render() { const {theme, glass, 'data-test': dataTest, useCustomItemRender} = this.props; const renderPlaceholder = !!this.props.placeholder && this.state.placeholderEnabled; - const renderClear = this.props.clear && !!this.state.query; const renderLoader = this.props.loader !== false && this.state.loading; const renderGlass = glass && !renderLoader; const renderUnderline = theme === Theme.DARK; + const actions = this.renderActions(); const inputClasses = classNames({ [`${styles.input} ring-js-shortcuts`]: true, - [styles.inputGap]: renderClear, + [styles.inputGap]: actions.length, + [styles.inputGap2]: actions.length === 2, // TODO: replace with flex-box layout [styles.inputLeftGap]: this.isRenderingGlassOrLoader(), [styles.inputDisabled]: this.props.disabled }); @@ -846,16 +869,7 @@ export default class QueryAssist extends Component { )} {renderUnderline &&
} - {renderClear && ( - - )} + {actions &&
{actions}
}