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