mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
refactor: migrate to icons for searchinput icons (#15533)
* initial commit * fix test * fix lint
This commit is contained in:
parent
b20293d1b1
commit
fb322b5bab
@ -17,7 +17,8 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { mount } from 'enzyme';
|
||||||
|
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
|
||||||
|
|
||||||
import SearchInput from 'src/components/SearchInput';
|
import SearchInput from 'src/components/SearchInput';
|
||||||
|
|
||||||
@ -31,7 +32,11 @@ describe('SearchInput', () => {
|
|||||||
|
|
||||||
const factory = overrideProps => {
|
const factory = overrideProps => {
|
||||||
const props = { ...defaultProps, ...(overrideProps || {}) };
|
const props = { ...defaultProps, ...(overrideProps || {}) };
|
||||||
return shallow(<SearchInput {...props} />);
|
return mount(
|
||||||
|
<ThemeProvider theme={supersetTheme}>
|
||||||
|
<SearchInput {...props} />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
let wrapper;
|
let wrapper;
|
||||||
@ -53,6 +58,7 @@ describe('SearchInput', () => {
|
|||||||
const typeSearchInput = value => {
|
const typeSearchInput = value => {
|
||||||
wrapper
|
wrapper
|
||||||
.find('[data-test="search-input"]')
|
.find('[data-test="search-input"]')
|
||||||
|
.first()
|
||||||
.props()
|
.props()
|
||||||
.onChange({ currentTarget: { value } });
|
.onChange({ currentTarget: { value } });
|
||||||
};
|
};
|
||||||
@ -62,6 +68,7 @@ describe('SearchInput', () => {
|
|||||||
|
|
||||||
wrapper
|
wrapper
|
||||||
.find('[data-test="search-input"]')
|
.find('[data-test="search-input"]')
|
||||||
|
.first()
|
||||||
.props()
|
.props()
|
||||||
.onKeyDown({ key: 'Enter' });
|
.onKeyDown({ key: 'Enter' });
|
||||||
|
|
||||||
@ -72,14 +79,14 @@ describe('SearchInput', () => {
|
|||||||
it('submits on search icon click', () => {
|
it('submits on search icon click', () => {
|
||||||
typeSearchInput('bar');
|
typeSearchInput('bar');
|
||||||
|
|
||||||
wrapper.find('[data-test="search-submit"]').props().onClick();
|
wrapper.find('[data-test="search-submit"]').first().props().onClick();
|
||||||
|
|
||||||
expect(defaultProps.onSubmit).toHaveBeenCalled();
|
expect(defaultProps.onSubmit).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('clears on clear icon click', () => {
|
it('clears on clear icon click', () => {
|
||||||
const wrapper2 = factory({ value: 'fizz' });
|
const wrapper2 = factory({ value: 'fizz' });
|
||||||
wrapper2.find('[data-test="search-clear"]').props().onClick();
|
wrapper2.find('[data-test="search-clear"]').first().props().onClick();
|
||||||
|
|
||||||
expect(defaultProps.onClear).toHaveBeenCalled();
|
expect(defaultProps.onClear).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
@ -16,9 +16,9 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import { styled } from '@superset-ui/core';
|
import { styled, useTheme } from '@superset-ui/core';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Icon from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
|
|
||||||
export interface SearchInputProps {
|
export interface SearchInputProps {
|
||||||
onSubmit: () => void;
|
onSubmit: () => void;
|
||||||
@ -53,13 +53,13 @@ const commonStyles = `
|
|||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`;
|
`;
|
||||||
const SearchIcon = styled(Icon)`
|
const SearchIcon = styled(Icons.Search)`
|
||||||
${commonStyles};
|
${commonStyles};
|
||||||
top: 4px;
|
top: 4px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ClearIcon = styled(Icon)`
|
const ClearIcon = styled(Icons.CancelX)`
|
||||||
${commonStyles};
|
${commonStyles};
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
@ -73,12 +73,13 @@ export default function SearchInput({
|
|||||||
name,
|
name,
|
||||||
value,
|
value,
|
||||||
}: SearchInputProps) {
|
}: SearchInputProps) {
|
||||||
|
const theme = useTheme();
|
||||||
return (
|
return (
|
||||||
<SearchInputWrapper>
|
<SearchInputWrapper>
|
||||||
<SearchIcon
|
<SearchIcon
|
||||||
|
iconColor={theme.colors.grayscale.base}
|
||||||
data-test="search-submit"
|
data-test="search-submit"
|
||||||
role="button"
|
role="button"
|
||||||
name="search"
|
|
||||||
onClick={() => onSubmit()}
|
onClick={() => onSubmit()}
|
||||||
/>
|
/>
|
||||||
<StyledInput
|
<StyledInput
|
||||||
@ -98,7 +99,7 @@ export default function SearchInput({
|
|||||||
<ClearIcon
|
<ClearIcon
|
||||||
data-test="search-clear"
|
data-test="search-clear"
|
||||||
role="button"
|
role="button"
|
||||||
name="cancel-x"
|
iconColor={theme.colors.grayscale.base}
|
||||||
onClick={() => onClear()}
|
onClick={() => onClear()}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user