.icon-checkbox {
display: inline-block;
vertical-align: top;
- padding: 2px;
+ padding: 1px 2px;
box-sizing: border-box;
}
height: 10px;
border: 1px solid var(--darkBlue);
border-radius: 2px;
- transition: all 0.2s ease;
+ transition-property: border-color, background-color, background-image;
+ transition-duration: 0.2s;
+ transition-timing-function: ease;
}
.icon-checkbox-checked:before {
border-color: var(--blue);
}
-.ie9 .icon-checkbox-checked:before {
- background-position: -3px 0;
-}
-
.icon-checkbox-checked.icon-checkbox-single:before {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M10%204.698C10%204.312%209.688%204%209.302%204H4.698C4.312%204%204%204.312%204%204.698v4.604c0%20.386.312.698.698.698h4.604c.386%200%20.698-.312.698-.698V4.698z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
}
};
renderContent() {
- if (this.state.loading) {
- return <DeferredSpinner />;
- }
-
if (this.state.notFound) {
return <NotFound withContainer={false} />;
}
<div className="layout-page-main">
<div className="layout-page-main-inner documentation-layout-inner">
- {this.renderContent()}
+ <DeferredSpinner loading={this.state.loading}>{this.renderContent()}</DeferredSpinner>;
</div>
</div>
</div>
checked={this.props.selected}
className={classNames('select-list-list-checkbox', { active: this.props.active })}
disabled={this.props.disabled}
+ loading={this.state.loading}
onCheck={this.handleCheck}>
<span className="little-spacer-left">{this.props.renderElement(this.props.element)}</span>
</Checkbox>
<Checkbox
checked={false}
className="select-list-list-checkbox"
+ loading={false}
onCheck={[Function]}
thirdState={false}
>
<Checkbox
checked={false}
className="select-list-list-checkbox"
+ loading={false}
onCheck={[Function]}
thirdState={false}
>
this.props.customSpinner || <i className={classNames('spinner', this.props.className)} />
);
}
- return (this.props.children as JSX.Element) || null;
+ return this.props.children || null;
}
}
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2018 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
-// @flow
-import React from 'react';
-import { mount } from 'enzyme';
-import DeferredSpinner from '../DeferredSpinner';
-
-jest.useFakeTimers();
-
-it('renders spinner after timeout', () => {
- const spinner = mount(<DeferredSpinner />);
- expect(spinner).toMatchSnapshot();
- jest.runAllTimers();
- spinner.update();
- expect(spinner).toMatchSnapshot();
-});
-
-it('add custom className', () => {
- const spinner = mount(<DeferredSpinner className="foo" />);
- jest.runAllTimers();
- spinner.update();
- expect(spinner).toMatchSnapshot();
-});
-
-it('renders children before timeout', () => {
- const spinner = mount(
- <DeferredSpinner>
- <div>foo</div>
- </DeferredSpinner>
- );
- expect(spinner).toMatchSnapshot();
- jest.runAllTimers();
- spinner.update();
- expect(spinner).toMatchSnapshot();
-});
-
-it('is controlled by loading prop', () => {
- const spinner = mount(
- <DeferredSpinner loading={false}>
- <div>foo</div>
- </DeferredSpinner>
- );
- expect(spinner).toMatchSnapshot();
- spinner.setProps({ loading: true });
- expect(spinner).toMatchSnapshot();
- jest.runAllTimers();
- spinner.update();
- expect(spinner).toMatchSnapshot();
- spinner.setProps({ loading: false });
- expect(spinner).toMatchSnapshot();
-});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import * as React from 'react';
+import { mount } from 'enzyme';
+import DeferredSpinner from '../DeferredSpinner';
+
+jest.useFakeTimers();
+
+it('renders spinner after timeout', () => {
+ const spinner = mount(<DeferredSpinner />);
+ expect(spinner).toMatchSnapshot();
+ jest.runAllTimers();
+ spinner.update();
+ expect(spinner).toMatchSnapshot();
+});
+
+it('add custom className', () => {
+ const spinner = mount(<DeferredSpinner className="foo" />);
+ jest.runAllTimers();
+ spinner.update();
+ expect(spinner).toMatchSnapshot();
+});
+
+it('renders children before timeout', () => {
+ const spinner = mount(
+ <DeferredSpinner>
+ <div>foo</div>
+ </DeferredSpinner>
+ );
+ expect(spinner).toMatchSnapshot();
+ jest.runAllTimers();
+ spinner.update();
+ expect(spinner).toMatchSnapshot();
+});
+
+it('is controlled by loading prop', () => {
+ const spinner = mount(
+ <DeferredSpinner loading={false}>
+ <div>foo</div>
+ </DeferredSpinner>
+ );
+ expect(spinner).toMatchSnapshot();
+ spinner.setProps({ loading: true });
+ expect(spinner).toMatchSnapshot();
+ jest.runAllTimers();
+ spinner.update();
+ expect(spinner).toMatchSnapshot();
+ spinner.setProps({ loading: false });
+ expect(spinner).toMatchSnapshot();
+});
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`add custom className 1`] = `
-<DeferredSpinner
- className="foo"
- timeout={100}
->
- <i
- className="spinner foo"
- />
-</DeferredSpinner>
-`;
-
-exports[`is controlled by loading prop 1`] = `
-<DeferredSpinner
- loading={false}
- timeout={100}
->
- <div>
- foo
- </div>
-</DeferredSpinner>
-`;
-
-exports[`is controlled by loading prop 2`] = `
-<DeferredSpinner
- loading={true}
- timeout={100}
->
- <div>
- foo
- </div>
-</DeferredSpinner>
-`;
-
-exports[`is controlled by loading prop 3`] = `
-<DeferredSpinner
- loading={true}
- timeout={100}
->
- <i
- className="spinner"
- />
-</DeferredSpinner>
-`;
-
-exports[`is controlled by loading prop 4`] = `
-<DeferredSpinner
- loading={false}
- timeout={100}
->
- <div>
- foo
- </div>
-</DeferredSpinner>
-`;
-
-exports[`renders children before timeout 1`] = `
-<DeferredSpinner
- timeout={100}
->
- <div>
- foo
- </div>
-</DeferredSpinner>
-`;
-
-exports[`renders children before timeout 2`] = `
-<DeferredSpinner
- timeout={100}
->
- <i
- className="spinner"
- />
-</DeferredSpinner>
-`;
-
-exports[`renders spinner after timeout 1`] = `
-<DeferredSpinner
- timeout={100}
-/>
-`;
-
-exports[`renders spinner after timeout 2`] = `
-<DeferredSpinner
- timeout={100}
->
- <i
- className="spinner"
- />
-</DeferredSpinner>
-`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`add custom className 1`] = `
+<DeferredSpinner
+ className="foo"
+ timeout={100}
+>
+ <i
+ className="spinner foo"
+ />
+</DeferredSpinner>
+`;
+
+exports[`is controlled by loading prop 1`] = `
+<DeferredSpinner
+ loading={false}
+ timeout={100}
+>
+ <div>
+ foo
+ </div>
+</DeferredSpinner>
+`;
+
+exports[`is controlled by loading prop 2`] = `
+<DeferredSpinner
+ loading={true}
+ timeout={100}
+>
+ <div>
+ foo
+ </div>
+</DeferredSpinner>
+`;
+
+exports[`is controlled by loading prop 3`] = `
+<DeferredSpinner
+ loading={true}
+ timeout={100}
+>
+ <i
+ className="spinner"
+ />
+</DeferredSpinner>
+`;
+
+exports[`is controlled by loading prop 4`] = `
+<DeferredSpinner
+ loading={false}
+ timeout={100}
+>
+ <div>
+ foo
+ </div>
+</DeferredSpinner>
+`;
+
+exports[`renders children before timeout 1`] = `
+<DeferredSpinner
+ timeout={100}
+>
+ <div>
+ foo
+ </div>
+</DeferredSpinner>
+`;
+
+exports[`renders children before timeout 2`] = `
+<DeferredSpinner
+ timeout={100}
+>
+ <i
+ className="spinner"
+ />
+</DeferredSpinner>
+`;
+
+exports[`renders spinner after timeout 1`] = `
+<DeferredSpinner
+ timeout={100}
+/>
+`;
+
+exports[`renders spinner after timeout 2`] = `
+<DeferredSpinner
+ timeout={100}
+>
+ <i
+ className="spinner"
+ />
+</DeferredSpinner>
+`;
*/
import * as React from 'react';
import * as classNames from 'classnames';
+import DeferredSpinner from '../common/DeferredSpinner';
interface Props {
checked: boolean;
children?: React.ReactNode;
className?: string;
id?: string;
+ loading?: boolean;
onCheck: (checked: boolean, id?: string) => void;
thirdState?: boolean;
}
href="#"
id={this.props.id}
onClick={this.handleClick}>
- <i className={className} />
+ <DeferredSpinner loading={Boolean(this.props.loading)}>
+ <i className={className} />
+ </DeferredSpinner>
{this.props.children}
</a>
);
}
+ if (this.props.loading) {
+ return <DeferredSpinner />;
+ }
+
return (
<a
className={classNames(className, this.props.className)}
it('should render unchecked', () => {
const checkbox = shallow(<Checkbox checked={false} onCheck={() => true} />);
- expect(checkbox.is('.icon-checkbox-checked')).toBe(false);
+ expect(checkbox.is('.icon-checkbox-checked')).toBeFalsy();
});
it('should render checked', () => {
const checkbox = shallow(<Checkbox checked={true} onCheck={() => true} />);
- expect(checkbox.is('.icon-checkbox-checked')).toBe(true);
+ expect(checkbox.is('.icon-checkbox-checked')).toBeTruthy();
});
it('should render disabled', () => {
const checkbox = shallow(<Checkbox checked={true} disabled={true} onCheck={() => true} />);
- expect(checkbox.is('.icon-checkbox-disabled')).toBe(true);
+ expect(checkbox.is('.icon-checkbox-disabled')).toBeTruthy();
});
it('should render unchecked third state', () => {
const checkbox = shallow(<Checkbox checked={false} onCheck={() => true} thirdState={true} />);
- expect(checkbox.is('.icon-checkbox-single')).toBe(true);
- expect(checkbox.is('.icon-checkbox-checked')).toBe(false);
+ expect(checkbox.is('.icon-checkbox-single')).toBeTruthy();
+ expect(checkbox.is('.icon-checkbox-checked')).toBeFalsy();
});
it('should render checked third state', () => {
const checkbox = shallow(<Checkbox checked={true} onCheck={() => true} thirdState={true} />);
- expect(checkbox.is('.icon-checkbox-single')).toBe(true);
- expect(checkbox.is('.icon-checkbox-checked')).toBe(true);
+ expect(checkbox.is('.icon-checkbox-single')).toBeTruthy();
+ expect(checkbox.is('.icon-checkbox-checked')).toBeTruthy();
+});
+
+it('should render with a spinner', () => {
+ const checkbox = shallow(<Checkbox checked={false} loading={true} onCheck={() => true} />);
+ expect(checkbox.find('DeferredSpinner')).toBeTruthy();
});
it('should render children', () => {
</Checkbox>
);
expect(checkbox.hasClass('link-checkbox')).toBeTruthy();
- expect(checkbox.find('span')).toHaveLength(1);
+ expect(checkbox.find('span').exists()).toBeTruthy();
+});
+
+it('should render children with a spinner', () => {
+ const checkbox = shallow(
+ <Checkbox checked={false} loading={true} onCheck={() => true}>
+ <span>foo</span>
+ </Checkbox>
+ );
+ expect(checkbox.hasClass('link-checkbox')).toBeTruthy();
+ expect(checkbox.find('span').exists()).toBeTruthy();
+ expect(checkbox.find('DeferredSpinner').exists()).toBeTruthy();
});
it('should call onCheck', () => {
const checkbox = shallow(
<Checkbox checked={true} className="customclass" onCheck={() => true} />
);
- expect(checkbox.is('.customclass')).toBe(true);
+ expect(checkbox.is('.customclass')).toBeTruthy();
});
projects / sonarqube.git / commitdiff