@autoguru/overdrive 4.7.3 → 4.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/Button.d.ts +1 -0
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +17 -2
- package/dist/components/Button/stories.js +24 -11
- package/dist/components/SimplePagination/SimplePagination.d.ts.map +1 -1
- package/dist/components/SimplePagination/SimplePagination.js +2 -2
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +3 -10
- package/dist/components/Switch/stories.js +40 -2
- package/dist/components/Tabs/TabList.d.ts.map +1 -1
- package/dist/components/Tabs/TabList.js +2 -2
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ export interface Props extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' |
|
|
|
14
14
|
rounded?: boolean;
|
|
15
15
|
size?: keyof typeof styles.size;
|
|
16
16
|
variant?: keyof typeof styles.variant;
|
|
17
|
+
withDoubleClicks?: boolean;
|
|
17
18
|
}
|
|
18
19
|
export declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
|
|
19
20
|
export default Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAIX,YAAY,EAKZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqBD,eAAO,MAAM,MAAM,iFA+KlB,CAAC;AAqCF,eAAe,MAAM,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { cloneElement, createElement, forwardRef, isValidElement, useMemo, } from 'react';
|
|
3
|
+
import { cloneElement, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
|
|
4
4
|
import { Box, useBoxStyles } from '../Box';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
6
|
import { ProgressSpinner } from '../ProgressSpinner';
|
|
7
7
|
import { useTextStyles } from '../Text';
|
|
8
8
|
import * as styles from './Button.css';
|
|
9
|
+
const DOUBLE_CLICK_DETECTION_PERIOD = 700;
|
|
9
10
|
const getSpinnerColour = (variant, minimal) => minimal || variant === 'secondary' ? 'secondary' : 'light';
|
|
10
11
|
const getBorderRadius = (rounded) => rounded ? 'pill' : '1';
|
|
11
12
|
const getPadding = (size, loading) => {
|
|
@@ -13,7 +14,7 @@ const getPadding = (size, loading) => {
|
|
|
13
14
|
return 'none';
|
|
14
15
|
return size === 'small' ? '3' : '4';
|
|
15
16
|
};
|
|
16
|
-
export const Button = forwardRef(({ children, className = '', disabled = false, id, is: Component = 'button', isLoading = false, isFullWidth = false, minimal = false, onClick, rounded = false, size = 'medium', type = 'button', variant = 'secondary', 'aria-label': ariaLabel, }, ref) => {
|
|
17
|
+
export const Button = forwardRef(({ children, className = '', disabled = false, id, is: Component = 'button', withDoubleClicks = false, isLoading = false, isFullWidth = false, minimal = false, onClick: incomingOnClick, rounded = false, size = 'medium', type = 'button', variant = 'secondary', 'aria-label': ariaLabel, }, ref) => {
|
|
17
18
|
const { isSingleIconChild, props: maybeIconProps } = useMemo(() => {
|
|
18
19
|
const maybeIcon = isValidElement(children) && children.type === Icon;
|
|
19
20
|
const maybeProps = children;
|
|
@@ -24,6 +25,13 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
|
|
|
24
25
|
}
|
|
25
26
|
: { isSingleIconChild: false };
|
|
26
27
|
}, [children]);
|
|
28
|
+
const [functionallyDisabled, setFunctionallyDisabled] = useState(false);
|
|
29
|
+
const onClick = useCallback((event) => {
|
|
30
|
+
if (!withDoubleClicks)
|
|
31
|
+
setFunctionallyDisabled(true);
|
|
32
|
+
if (typeof incomingOnClick === 'function')
|
|
33
|
+
incomingOnClick(event);
|
|
34
|
+
}, [withDoubleClicks, incomingOnClick]);
|
|
27
35
|
const props = {
|
|
28
36
|
type: Component === 'button' ? type : undefined,
|
|
29
37
|
id,
|
|
@@ -40,6 +48,7 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
|
|
|
40
48
|
paddingY: 'none',
|
|
41
49
|
paddingX: getPadding(size, isLoading),
|
|
42
50
|
width: isFullWidth ? 'full' : void 0,
|
|
51
|
+
pointerEvents: functionallyDisabled ? 'none' : void 0,
|
|
43
52
|
}), useTextStyles({
|
|
44
53
|
colour: 'white',
|
|
45
54
|
fontWeight: 'semiBold',
|
|
@@ -54,6 +63,12 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
|
|
|
54
63
|
const buttonContents = useMemo(() => (React.createElement(React.Fragment, null, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
|
|
55
64
|
? 'small'
|
|
56
65
|
: 'medium', ...maybeIconProps })) : (children))), [maybeIconProps, isSingleIconChild, children, size]);
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
let timeout;
|
|
68
|
+
if (functionallyDisabled)
|
|
69
|
+
timeout = setTimeout(() => setFunctionallyDisabled(false), DOUBLE_CLICK_DETECTION_PERIOD);
|
|
70
|
+
return () => (timeout ? clearTimeout(timeout) : void 0);
|
|
71
|
+
}, [functionallyDisabled]);
|
|
57
72
|
const child = isLoading ? (React.createElement(Box, { display: "flex", justifyContent: "center", position: "relative", alignItems: "center", width: "full", height: "full" },
|
|
58
73
|
React.createElement(Box, { position: "absolute", alignItems: "center", justifyContent: "center", display: "flex", width: "full", height: "full" },
|
|
59
74
|
React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })),
|
|
@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
8
|
|
|
9
9
|
import { AccountBoxIcon } from '@autoguru/icons';
|
|
10
|
+
import { action } from '@storybook/addon-actions';
|
|
10
11
|
import * as React from 'react';
|
|
11
12
|
import { Column, Columns } from "../Columns/index.js";
|
|
12
13
|
import { Icon } from "../Icon/index.js";
|
|
@@ -14,6 +15,7 @@ import { Button } from "./index.js";
|
|
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
17
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
18
|
+
const onClick = action('onClick');
|
|
17
19
|
export default {
|
|
18
20
|
title: 'Components/Buttons',
|
|
19
21
|
component: Button,
|
|
@@ -204,67 +206,78 @@ const standardProps = {
|
|
|
204
206
|
isFullWidth: void 0,
|
|
205
207
|
size: void 0,
|
|
206
208
|
variant: void 0,
|
|
207
|
-
children: 'Login'
|
|
209
|
+
children: 'Login',
|
|
210
|
+
onClick
|
|
208
211
|
};
|
|
209
212
|
export const standard = Template.bind(standardProps);
|
|
210
213
|
standard.args = standardProps;
|
|
211
214
|
const primarySmallProps = {
|
|
212
215
|
size: 'small',
|
|
213
|
-
variant: 'primary'
|
|
216
|
+
variant: 'primary',
|
|
217
|
+
onClick
|
|
214
218
|
};
|
|
215
219
|
export const primarySmall = TemplateMulti.bind(primarySmallProps);
|
|
216
220
|
primarySmall.args = primarySmallProps;
|
|
217
221
|
const primaryMediumProps = {
|
|
218
222
|
size: 'medium',
|
|
219
|
-
variant: 'primary'
|
|
223
|
+
variant: 'primary',
|
|
224
|
+
onClick
|
|
220
225
|
};
|
|
221
226
|
export const primaryMedium = TemplateMulti.bind(primaryMediumProps);
|
|
222
227
|
primaryMedium.args = primaryMediumProps;
|
|
223
228
|
const secondarySmallProps = {
|
|
224
229
|
size: 'small',
|
|
225
|
-
variant: 'secondary'
|
|
230
|
+
variant: 'secondary',
|
|
231
|
+
onClick
|
|
226
232
|
};
|
|
227
233
|
export const secondarySmall = TemplateMulti.bind(secondarySmallProps);
|
|
228
234
|
secondarySmall.args = secondarySmallProps;
|
|
229
235
|
const secondaryMediumProps = {
|
|
230
236
|
size: 'medium',
|
|
231
|
-
variant: 'secondary'
|
|
237
|
+
variant: 'secondary',
|
|
238
|
+
onClick
|
|
232
239
|
};
|
|
233
240
|
export const secondaryMedium = TemplateMulti.bind(secondaryMediumProps);
|
|
234
241
|
secondaryMedium.args = secondaryMediumProps;
|
|
235
242
|
const informationSmallProps = {
|
|
236
243
|
size: 'small',
|
|
237
|
-
variant: 'information'
|
|
244
|
+
variant: 'information',
|
|
245
|
+
onClick
|
|
238
246
|
};
|
|
239
247
|
export const informationSmall = TemplateMulti.bind(informationSmallProps);
|
|
240
248
|
informationSmall.args = informationSmallProps;
|
|
241
249
|
const informationMediumProps = {
|
|
242
250
|
size: 'medium',
|
|
243
|
-
variant: 'information'
|
|
251
|
+
variant: 'information',
|
|
252
|
+
onClick
|
|
244
253
|
};
|
|
245
254
|
export const informationMedium = TemplateMulti.bind(informationMediumProps);
|
|
246
255
|
informationMedium.args = informationMediumProps;
|
|
247
256
|
const warningSmallProps = {
|
|
248
257
|
size: 'small',
|
|
249
|
-
variant: 'warning'
|
|
258
|
+
variant: 'warning',
|
|
259
|
+
onClick
|
|
250
260
|
};
|
|
251
261
|
export const warningSmall = TemplateMulti.bind(warningSmallProps);
|
|
252
262
|
warningSmall.args = warningSmallProps;
|
|
253
263
|
const warningMediumProps = {
|
|
254
264
|
size: 'medium',
|
|
255
|
-
variant: 'warning'
|
|
265
|
+
variant: 'warning',
|
|
266
|
+
onClick
|
|
256
267
|
};
|
|
257
268
|
export const warningMedium = TemplateMulti.bind(warningMediumProps);
|
|
258
269
|
warningMedium.args = warningMediumProps;
|
|
259
270
|
const successSmallProps = {
|
|
260
271
|
size: 'small',
|
|
261
|
-
variant: 'success'
|
|
272
|
+
variant: 'success',
|
|
273
|
+
onClick
|
|
262
274
|
};
|
|
263
275
|
export const successSmall = TemplateMulti.bind(successSmallProps);
|
|
264
276
|
successSmall.args = successSmallProps;
|
|
265
277
|
const successMediumProps = {
|
|
266
278
|
size: 'medium',
|
|
267
|
-
variant: 'success'
|
|
279
|
+
variant: 'success',
|
|
280
|
+
onClick
|
|
268
281
|
};
|
|
269
282
|
export const successMedium = TemplateMulti.bind(successMediumProps);
|
|
270
283
|
successMedium.args = successMediumProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimplePagination.d.ts","sourceRoot":"","sources":["../../../lib/components/SimplePagination/SimplePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,oBAAY,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,IAAI,SAAS;CACb;AAED,aAAK,qBAAqB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"SimplePagination.d.ts","sourceRoot":"","sources":["../../../lib/components/SimplePagination/SimplePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,oBAAY,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,IAAI,SAAS;CACb;AAED,aAAK,qBAAqB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAyCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -14,9 +14,9 @@ export const SimplePagination = ({ hasNext = false, hasPrevious = false, onChang
|
|
|
14
14
|
onChange(direction);
|
|
15
15
|
};
|
|
16
16
|
return (React.createElement(Inline, { is: "nav", space: "6", "aria-label": "pagination", alignX: "center", alignY: "center" },
|
|
17
|
-
React.createElement(Button, { rounded: true, disabled: !hasPrevious, size: "small", variant: "secondary", "aria-label": "previous page", onClick: handleClick(EChangeDirection.Previous) },
|
|
17
|
+
React.createElement(Button, { rounded: true, withDoubleClicks: true, disabled: !hasPrevious, size: "small", variant: "secondary", "aria-label": "previous page", onClick: handleClick(EChangeDirection.Previous) },
|
|
18
18
|
React.createElement(Icon, { size: "medium", icon: ChevronLeftIcon })),
|
|
19
|
-
React.createElement(Button, { rounded: true, disabled: !hasNext, size: "small", variant: "secondary", "aria-label": "next page", onClick: handleClick(EChangeDirection.Next) },
|
|
19
|
+
React.createElement(Button, { rounded: true, withDoubleClicks: true, disabled: !hasNext, size: "small", variant: "secondary", "aria-label": "next page", onClick: handleClick(EChangeDirection.Next) },
|
|
20
20
|
React.createElement(Icon, { size: "medium", icon: ChevronRightIcon }))));
|
|
21
21
|
};
|
|
22
22
|
export default SimplePagination;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAOvD,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAqD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { useCallback
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
4
|
import { Box, useBoxStyles } from '../Box';
|
|
5
5
|
import { useTextStyles } from '../Text';
|
|
6
6
|
import * as styles from './Switch.css';
|
|
7
|
-
export const Switch = ({ className = '', disabled = false, toggled
|
|
8
|
-
const [toggled, setToggled] = useState(incomingToggled);
|
|
9
|
-
const [prevValue, setPrevValue] = useState(incomingToggled);
|
|
7
|
+
export const Switch = ({ className = '', disabled = false, toggled = false, onChange, }) => {
|
|
10
8
|
const onToggle = useCallback(() => {
|
|
11
9
|
if (disabled) {
|
|
12
10
|
return;
|
|
@@ -14,12 +12,7 @@ export const Switch = ({ className = '', disabled = false, toggled: incomingTogg
|
|
|
14
12
|
if (typeof onChange === 'function') {
|
|
15
13
|
onChange(!toggled);
|
|
16
14
|
}
|
|
17
|
-
|
|
18
|
-
}, [incomingToggled, disabled, toggled]);
|
|
19
|
-
if (prevValue !== incomingToggled) {
|
|
20
|
-
setToggled(incomingToggled);
|
|
21
|
-
setPrevValue(incomingToggled);
|
|
22
|
-
}
|
|
15
|
+
}, [disabled, toggled]);
|
|
23
16
|
return (React.createElement(Box, { is: "button", className: clsx(styles.root, useTextStyles({ size: '5' }), {
|
|
24
17
|
[styles.toggled]: toggled,
|
|
25
18
|
[styles.disabled.default]: disabled,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
+
const _excluded = ["onChange", "value"];
|
|
4
6
|
|
|
5
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
8
|
|
|
@@ -15,7 +17,21 @@ export default {
|
|
|
15
17
|
component: Switch
|
|
16
18
|
};
|
|
17
19
|
|
|
18
|
-
const Template =
|
|
20
|
+
const Template = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
onChange: incomingOnChange,
|
|
23
|
+
value
|
|
24
|
+
} = _ref,
|
|
25
|
+
args = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
+
|
|
27
|
+
return _jsx(Switch, _objectSpread({
|
|
28
|
+
onChange: stepValue => {
|
|
29
|
+
setValue(stepValue);
|
|
30
|
+
incomingOnChange(stepValue);
|
|
31
|
+
},
|
|
32
|
+
value: value
|
|
33
|
+
}, args));
|
|
34
|
+
};
|
|
19
35
|
|
|
20
36
|
const standardProps = {
|
|
21
37
|
disabled: false,
|
|
@@ -23,4 +39,26 @@ const standardProps = {
|
|
|
23
39
|
onChange: action('onChange')
|
|
24
40
|
};
|
|
25
41
|
export const untoggled = Template.bind(standardProps);
|
|
26
|
-
untoggled.args = standardProps;
|
|
42
|
+
untoggled.args = standardProps;
|
|
43
|
+
|
|
44
|
+
const untoggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
|
|
45
|
+
disabled: true
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
export const untoggledDisabled = Template.bind(untoggledDisabledProps);
|
|
49
|
+
untoggledDisabled.args = untoggledDisabledProps;
|
|
50
|
+
|
|
51
|
+
const toggledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
|
|
52
|
+
toggled: true
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
export const toggled = Template.bind(toggledProps);
|
|
56
|
+
toggled.args = toggledProps;
|
|
57
|
+
|
|
58
|
+
const toggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
|
|
59
|
+
toggled: true,
|
|
60
|
+
disabled: true
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
export const toggledDisabled = Template.bind(toggledDisabledProps);
|
|
64
|
+
toggledDisabled.args = toggledDisabledProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIN,SAAS,EAKT,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,uBAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIN,SAAS,EAKT,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,uBAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAuI5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -66,11 +66,11 @@ export const TabList = ({ children, stretch = false, scrollable = false, }) => {
|
|
|
66
66
|
styles.root.default,
|
|
67
67
|
shouldShowScrollButtons && styles.root.scroll,
|
|
68
68
|
] },
|
|
69
|
-
shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, size: "small", disabled: !displayScroll.start, onClick: handleStartButton },
|
|
69
|
+
shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, withDoubleClicks: true, size: "small", disabled: !displayScroll.start, onClick: handleStartButton },
|
|
70
70
|
React.createElement(Icon, { icon: ArrowLeftIcon }))) : null,
|
|
71
71
|
React.createElement(Box, { ref: wrapperRef, className: [scrollable && styles.listWrapperScroll], onScroll: handleOnScroll },
|
|
72
72
|
React.createElement(Box, { ref: innerRef, display: stretch ? 'flex' : 'block', flexWrap: "nowrap", width: "full", role: "tablist", "aria-orientation": "horizontal", className: useTextStyles({ noWrap: true }) }, tabs)),
|
|
73
|
-
shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, size: "small", disabled: !displayScroll.end, onClick: handleEndButton },
|
|
73
|
+
shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, withDoubleClicks: true, size: "small", disabled: !displayScroll.end, onClick: handleEndButton },
|
|
74
74
|
React.createElement(Icon, { icon: ArrowRightIcon }))) : null));
|
|
75
75
|
};
|
|
76
76
|
export default TabList;
|