mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: spelling - ui (#24435)
This commit is contained in:
Josh Soref
GitHub
parent
b5b1b9d64e
commit
eb734a2f6e
@ -108,7 +108,7 @@ onCreateOption={(customValue) => {
|
||||
|
||||
- **@grafana/ui**: Create Icon component and replace icons. [#23402](https://github.com/grafana/grafana/pull/23402), [@ivanahuckova](https://github.com/ivanahuckova)
|
||||
- **@grafana/ui**: Create slider component. [#22275](https://github.com/grafana/grafana/pull/22275), [@ivanahuckova](https://github.com/ivanahuckova)
|
||||
- **@grafana/ui**: Remove ColorPallete component. [#23592](https://github.com/grafana/grafana/pull/23592), [@ivanahuckova](https://github.com/ivanahuckova)
|
||||
- **@grafana/ui**: Remove ColorPalette component. [#23592](https://github.com/grafana/grafana/pull/23592), [@ivanahuckova](https://github.com/ivanahuckova)
|
||||
- **Components**: IconButton. [#23510](https://github.com/grafana/grafana/pull/23510), [@torkelo](https://github.com/torkelo)
|
||||
- **Docs**: Adding API reference documentation support for the packages libraries. [#21931](https://github.com/grafana/grafana/pull/21931), [@mckn](https://github.com/mckn)
|
||||
- **Migration**: Add old Input to legacy namespace. [#23286](https://github.com/grafana/grafana/pull/23286), [@tskarhed](https://github.com/tskarhed)
|
||||
|
||||
@ -14,7 +14,7 @@ import {
|
||||
FieldColorMode,
|
||||
} from '@grafana/data';
|
||||
|
||||
// Compontents
|
||||
// Components
|
||||
import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
|
||||
|
||||
// Utils
|
||||
|
||||
@ -364,7 +364,7 @@ export class StackedWithChartLayout extends BigValueLayout {
|
||||
// make title fontsize it's a bit smaller than valueFontSize
|
||||
this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
|
||||
|
||||
// make chart take up onused space
|
||||
// make chart take up unused space
|
||||
this.chartHeight = height - this.titleFontSize * LINE_HEIGHT - this.valueFontSize * LINE_HEIGHT;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import { css } from 'emotion';
|
||||
import { onChangeCascader } from './optionMappings';
|
||||
|
||||
interface CascaderProps {
|
||||
/** The seperator between levels in the search */
|
||||
/** The separator between levels in the search */
|
||||
separator?: string;
|
||||
placeholder?: string;
|
||||
options: CascaderOption[];
|
||||
|
||||
@ -10,7 +10,7 @@ export type TooltipMode = 'single' | 'multi';
|
||||
// Describes active dimensions user interacts with
|
||||
// It's a key-value pair where:
|
||||
// - key is the name of the dimension
|
||||
// - value is a tuple addresing which column and row from given dimension is active.
|
||||
// - value is a tuple addressing which column and row from given dimension is active.
|
||||
// If row is undefined, it means that we are not hovering over a datapoint
|
||||
export type ActiveDimensions<T extends Dimensions = any> = { [key in keyof T]: [number, number | undefined] | null };
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import { ColorPicker } from './ColorPicker';
|
||||
|
||||
The `ColorPicker` component group consists of several building blocks that are combined in Grafana to create the `ColorPicker`: popover, pickers and palettes. There are different combinations of these building blocks depending on where the `ColorPicker` is used in Grafana.
|
||||
|
||||
The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are opimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.
|
||||
The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are optimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.
|
||||
|
||||
The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`.
|
||||
|
||||
|
||||
@ -85,5 +85,5 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
|
||||
}
|
||||
}
|
||||
|
||||
// This component is to enable SeriecColorPickerPopover usage via series-color-picker-popover directive
|
||||
// This component is to enable SeriesColorPickerPopover usage via series-color-picker-popover directive
|
||||
export const SeriesColorPickerPopoverWithTheme = withTheme(SeriesColorPickerPopover);
|
||||
|
||||
@ -8,14 +8,14 @@ interface WithContextMenuProps {
|
||||
|
||||
export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, getContextMenuItems }) => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [menuPosition, setMenuPositon] = useState({ x: 0, y: 0 });
|
||||
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
|
||||
|
||||
return (
|
||||
<>
|
||||
{children({
|
||||
openMenu: e => {
|
||||
setIsMenuOpen(true);
|
||||
setMenuPositon({
|
||||
setMenuPosition({
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
});
|
||||
|
||||
@ -45,7 +45,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
}
|
||||
`,
|
||||
// Wrapper with child selector needed.
|
||||
// When classnames are appplied to the same element as the wrapper, it causes the suggestions to stop working
|
||||
// When classnames are applied to the same element as the wrapper, it causes the suggestions to stop working
|
||||
wrapperOverrides: css`
|
||||
width: 100%;
|
||||
> .slate-query-field__wrapper {
|
||||
|
||||
@ -29,7 +29,7 @@ export interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean) => {
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean) => {
|
||||
return {
|
||||
drawer: css`
|
||||
.drawer-content {
|
||||
@ -61,7 +61,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
|
||||
content: css`
|
||||
padding: ${theme.spacing.md};
|
||||
flex-grow: 1;
|
||||
overflow: ${!scollableContent ? 'hidden' : 'auto'};
|
||||
overflow: ${!scrollableContent ? 'hidden' : 'auto'};
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
`,
|
||||
|
||||
@ -7,12 +7,12 @@ export default {
|
||||
};
|
||||
|
||||
export const simple = () => {
|
||||
return <Label description="Opton description">Option name</Label>;
|
||||
return <Label description="Option description">Option name</Label>;
|
||||
};
|
||||
|
||||
export const categorised = () => {
|
||||
return (
|
||||
<Label category={['Category', 'Nested category']} description="Opton description">
|
||||
<Label category={['Category', 'Nested category']} description="Option description">
|
||||
Option name
|
||||
</Label>
|
||||
);
|
||||
|
||||
@ -13,10 +13,10 @@ export default {
|
||||
};
|
||||
|
||||
export const basic = () => {
|
||||
const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
|
||||
const value = object<SelectableValue<string>>('Selected Value:', intialState);
|
||||
const initialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
|
||||
const value = object<SelectableValue<string>>('Selected Value:', initialState);
|
||||
const options = object<Array<SelectableValue<string>>>('Options:', [
|
||||
intialState,
|
||||
initialState,
|
||||
{ label: 'Another label', value: 'Another value' },
|
||||
]);
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '../../../Icon/Icon';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
// @ts-ignore
|
||||
|
||||
@ -12,10 +12,10 @@ export default {
|
||||
decorators: [withCenteredStory, withKnobs],
|
||||
};
|
||||
|
||||
const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
|
||||
const initialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
|
||||
|
||||
const options = object<Array<SelectableValue<string>>>('Options:', [
|
||||
intialState,
|
||||
initialState,
|
||||
{ label: 'Another label', value: 'Another value 1' },
|
||||
{ label: 'Another label', value: 'Another value 2' },
|
||||
{ label: 'Another label', value: 'Another value 3' },
|
||||
@ -25,7 +25,7 @@ const options = object<Array<SelectableValue<string>>>('Options:', [
|
||||
]);
|
||||
|
||||
export const basic = () => {
|
||||
const value = object<SelectableValue<string>>('Selected Value:', intialState);
|
||||
const value = object<SelectableValue<string>>('Selected Value:', initialState);
|
||||
|
||||
return (
|
||||
<UseState initialState={value}>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { default as ReactSelect } from '@torkelo/react-select';
|
||||
// @ts-ignore
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '../../../Icon/Icon';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { OptionProps } from 'react-select';
|
||||
|
||||
@ -134,7 +134,7 @@ describe('Graph', () => {
|
||||
});
|
||||
|
||||
describe('in All Series mode', () => {
|
||||
it('it renders all series summary regardles of mouse position', () => {
|
||||
it('it renders all series summary regardless of mouse position', () => {
|
||||
// Given
|
||||
const graphWithTooltip = (
|
||||
<Graph {...mockGraphProps(true)}>
|
||||
|
||||
@ -9,7 +9,7 @@ import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend';
|
||||
export default {
|
||||
title: 'Visualizations/Graph/GraphLegend',
|
||||
component: GraphLegend,
|
||||
decororators: [withHorizontallyCenteredStory],
|
||||
decorators: [withHorizontallyCenteredStory],
|
||||
};
|
||||
|
||||
const getStoriesKnobs = (isList = false) => {
|
||||
|
||||
@ -60,9 +60,9 @@ describe('MultiModeGraphTooltip', () => {
|
||||
// We rendered two series rows
|
||||
const rows = container.find('SeriesTableRow');
|
||||
|
||||
// We expect A-series(1st row) to be higlighted
|
||||
// We expect A-series(1st row) to be highlighted
|
||||
expect(rows.get(0).props.isActive).toBeTruthy();
|
||||
// We expect B-series(2nd row) not to be higlighted
|
||||
// We expect B-series(2nd row) not to be highlighted
|
||||
expect(rows.get(1).props.isActive).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -85,9 +85,9 @@ describe('MultiModeGraphTooltip', () => {
|
||||
// We rendered two series rows
|
||||
const rows = container.find('SeriesTableRow');
|
||||
|
||||
// We expect A-series(1st row) not to be higlighted
|
||||
// We expect A-series(1st row) not to be highlighted
|
||||
expect(rows.get(0).props.isActive).toBeFalsy();
|
||||
// We expect B-series(2nd row) not to be higlighted
|
||||
// We expect B-series(2nd row) not to be highlighted
|
||||
expect(rows.get(1).props.isActive).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -47,7 +47,7 @@ export const basic = () => {
|
||||
The database user should only be granted SELECT permissions on the specified database & tables you want to
|
||||
query. Grafana does not validate that queries are safe so queries can contain any SQL statement. For example,
|
||||
statements like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect
|
||||
against this we <strong>Highly</strong> recommmend you create a specific MySQL user with restricted
|
||||
against this we <strong>Highly</strong> recommend you create a specific MySQL user with restricted
|
||||
permissions.
|
||||
</p>
|
||||
</InfoBox>
|
||||
|
||||
@ -9,7 +9,7 @@ const DATE_STRING_REGEX = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?
|
||||
const PARTIAL_DATE_REGEX = /\d{2}:\d{2}:\d{2} GMT-\d{4}/;
|
||||
const JSON_DATE_REGEX = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
|
||||
|
||||
// When toggleing, don't animated removal or addition of more than a few items
|
||||
// When toggling, don't animated removal or addition of more than a few items
|
||||
const MAX_ANIMATED_TOGGLE_ITEMS = 10;
|
||||
|
||||
const requestAnimationFrame =
|
||||
|
||||
@ -33,7 +33,7 @@ const getStoriesKnobs = (table = false) => {
|
||||
|
||||
const typeSpecificRenderer = table
|
||||
? {
|
||||
'Custom renderer(GraphLegendTablerow)': 'custom-tabe',
|
||||
'Custom renderer(GraphLegendTablerow)': 'custom-table',
|
||||
}
|
||||
: {
|
||||
'Custom renderer(GraphLegendListItem)': 'custom-list',
|
||||
|
||||
@ -14,7 +14,7 @@ describe('<LogLabels />', () => {
|
||||
expect(wrapper.text()).toContain('bar');
|
||||
expect(wrapper.text()).toContain('42');
|
||||
});
|
||||
it('exlcudes labels with certain names or labels starting with underscore', () => {
|
||||
it('excludes labels with certain names or labels starting with underscore', () => {
|
||||
const wrapper = shallow(<LogLabels labels={{ foo: 'bar', level: '42', _private: '13' }} theme={getTheme()} />);
|
||||
expect(wrapper.text()).toContain('bar');
|
||||
expect(wrapper.text()).not.toContain('42');
|
||||
|
||||
@ -123,17 +123,17 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
|
||||
children,
|
||||
}) => {
|
||||
// React Hook that creates a number state value called limit to component state and a setter function called setLimit
|
||||
// The intial value for limit is 10
|
||||
// The initial value for limit is 10
|
||||
// Used for the number of rows to retrieve from backend from a specific point in time
|
||||
const [limit, setLimit] = useState(10);
|
||||
|
||||
// React Hook that creates an object state value called result to component state and a setter function called setResult
|
||||
// The intial value for result is null
|
||||
// The initial value for result is null
|
||||
// Used for sorting the response from backend
|
||||
const [result, setResult] = useState<ResultType>((null as any) as ResultType);
|
||||
|
||||
// React Hook that creates an object state value called hasMoreContextRows to component state and a setter function called setHasMoreContextRows
|
||||
// The intial value for hasMoreContextRows is {before: true, after: true}
|
||||
// The initial value for hasMoreContextRows is {before: true, after: true}
|
||||
// Used for indicating in UI if there are more rows to load in a given direction
|
||||
const [hasMoreContextRows, setHasMoreContextRows] = useState({
|
||||
before: true,
|
||||
|
||||
@ -72,7 +72,7 @@ describe('<QueryField />', () => {
|
||||
expect(wrapper.instance().editor).toBeFalsy();
|
||||
expect(spyOnChange).not.toBeCalled();
|
||||
});
|
||||
it('should not re-render the editor twice once syntax is fully lodaded', () => {
|
||||
it('should not re-render the editor twice once syntax is fully loaded', () => {
|
||||
const wrapper: any = shallow(<QueryField query="my query" portalOrigin="mock-origin" />);
|
||||
const spyOnChange = jest.spyOn(wrapper.instance(), 'onChange').mockImplementation(jest.fn());
|
||||
wrapper.instance().editor = { insertText: () => ({ deleteBackward: () => ({ value: 'fooo' }) }) };
|
||||
|
||||
@ -70,7 +70,7 @@ export const InputWithAutoFocus = () => {
|
||||
return (
|
||||
<SegmentFrame>
|
||||
{inputComponents.map((InputComponent: any) => (
|
||||
<InputComponent intitialValue="test"></InputComponent>
|
||||
<InputComponent initialValue="test"></InputComponent>
|
||||
))}
|
||||
<a
|
||||
className="gf-form-label query-part"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { css, cx } from 'emotion';
|
||||
|
||||
// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
|
||||
// Ignoring because I couldn't get @types/react-select work with Torkel's fork
|
||||
// @ts-ignore
|
||||
import { components } from '@torkelo/react-select';
|
||||
import { useDelayedSwitch } from '../../utils/useDelayedSwitch';
|
||||
|
||||
@ -37,7 +37,7 @@ export class SetInterval extends PureComponent<Props> {
|
||||
// switchMap creates a new observables based on the input stream,
|
||||
// which becomes part of the propsSubject stream
|
||||
switchMap(props => {
|
||||
// If the query is live, empty value is emited. `of` creates single value,
|
||||
// If the query is live, empty value is emitted. `of` creates single value,
|
||||
// which is merged to propsSubject stream
|
||||
if (RefreshPicker.isLive(props.interval)) {
|
||||
return of({});
|
||||
@ -45,13 +45,13 @@ export class SetInterval extends PureComponent<Props> {
|
||||
|
||||
// When query is loading, a new stream is merged. But it's a stream that emits no values(NEVER),
|
||||
// hence next call of this function will happen when query changes, and new props are passed into this component
|
||||
// When query is NOT loading, a new value is emited, this time it's an interval value,
|
||||
// When query is NOT loading, a new value is emitted, this time it's an interval value,
|
||||
// which makes tap function below execute on that interval basis.
|
||||
return props.loading ? NEVER : interval(stringToMs(props.interval));
|
||||
}),
|
||||
// tap will execute function passed via func prop
|
||||
// * on value from `of` stream merged if query is live
|
||||
// * on specified interval (triggered by values emited by interval)
|
||||
// * on specified interval (triggered by values emitted by interval)
|
||||
tap(() => this.props.func())
|
||||
)
|
||||
.subscribe();
|
||||
@ -67,7 +67,7 @@ export class SetInterval extends PureComponent<Props> {
|
||||
) {
|
||||
return;
|
||||
}
|
||||
// if props changed, a new value is emited from propsSubject
|
||||
// if props changed, a new value is emitted from propsSubject
|
||||
this.propsSubject.next(this.props);
|
||||
}
|
||||
|
||||
|
||||
@ -384,7 +384,7 @@ $panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%);
|
||||
$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80};
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-2;
|
||||
$logs-color-unknown: $gray-2;
|
||||
|
||||
// toggle-group
|
||||
$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
|
||||
|
||||
@ -377,7 +377,7 @@ $panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%);
|
||||
$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95};
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-5;
|
||||
$logs-color-unknown: $gray-5;
|
||||
|
||||
// toggle-group
|
||||
$button-toggle-group-btn-active-bg: $brand-primary;
|
||||
|
||||
@ -7,6 +7,6 @@ export * from './scrollbar';
|
||||
export * from './measureText';
|
||||
export { default as ansicolor } from './ansicolor';
|
||||
|
||||
import * as DOMUtil from './dom'; // includes Element.closest polyfil
|
||||
import * as DOMUtil from './dom'; // includes Element.closest polyfill
|
||||
export { DOMUtil };
|
||||
export { renderOrCallToRender } from './renderOrCallToRender';
|
||||
|
||||
@ -34,6 +34,6 @@ export function calculateFontSize(text: string, width: number, height: number, l
|
||||
const fontSizeBasedOnHeight = height / lineHeight;
|
||||
|
||||
// final fontSize
|
||||
const optimialSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
|
||||
return Math.min(optimialSize, maxSize ?? optimialSize);
|
||||
const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
|
||||
return Math.min(optimalSize, maxSize ?? optimalSize);
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ export const withStoryContainer = (story: RenderFunction) => {
|
||||
const CONTAINER_GROUP = 'Container options';
|
||||
// ---
|
||||
const containerBoundary = boolean('Show container boundary', false, CONTAINER_GROUP);
|
||||
const fullWidthContainter = boolean('Full width container', false, CONTAINER_GROUP);
|
||||
const fullWidthContainer = boolean('Full width container', false, CONTAINER_GROUP);
|
||||
const containerWidth = number(
|
||||
'Container width',
|
||||
300,
|
||||
@ -72,7 +72,7 @@ export const withStoryContainer = (story: RenderFunction) => {
|
||||
);
|
||||
return (
|
||||
<StoryContainer
|
||||
width={fullWidthContainter ? undefined : containerWidth}
|
||||
width={fullWidthContainer ? undefined : containerWidth}
|
||||
height={containerHeight}
|
||||
showBoundaries={containerBoundary}
|
||||
>
|
||||
|
||||
@ -6,7 +6,7 @@ import { RenderFunction } from '../../types';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
|
||||
type SassThemeChangeHandler = (theme: GrafanaThemeType) => void;
|
||||
const ThemableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
|
||||
const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
|
||||
children,
|
||||
handleSassThemeChange,
|
||||
}) => {
|
||||
@ -33,5 +33,5 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
|
||||
};
|
||||
|
||||
export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) => (
|
||||
<ThemableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemableStory>
|
||||
<ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>
|
||||
);
|
||||
|
||||
@ -24,7 +24,7 @@ export function useDelayedSwitch(value: boolean, options: DelayOptions = {}): bo
|
||||
useEffect(() => {
|
||||
let timeout: number | undefined;
|
||||
if (value) {
|
||||
// If toggling to "on" state we always setTimout no matter how long we have been "off".
|
||||
// If toggling to "on" state we always setTimeout no matter how long we have been "off".
|
||||
timeout = setTimeout(() => {
|
||||
onStartTime.current = new Date();
|
||||
setDelayedValue(value);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user