@semcore/button 17.0.0-prerelease.30 → 17.0.0-prerelease.34
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/CHANGELOG.md +1 -1
- package/lib/cjs/component/Button/Button.js +117 -13
- package/lib/cjs/component/Button/Button.js.map +1 -1
- package/lib/cjs/component/Button/Button.type.js.map +1 -1
- package/lib/cjs/component/Button/SpinButton.js.map +1 -0
- package/lib/cjs/component/ButtonLink/ButtonLink.js +28 -53
- package/lib/cjs/component/ButtonLink/ButtonLink.js.map +1 -1
- package/lib/cjs/component/ButtonLink/ButtonLink.type.js.map +1 -1
- package/lib/cjs/component/ButtonLink/buttonLink.shadow.css +10 -140
- package/lib/cjs/index.js +3 -4
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/component/Button/Button.js +119 -15
- package/lib/es6/component/Button/Button.js.map +1 -1
- package/lib/es6/component/Button/Button.type.js.map +1 -1
- package/lib/es6/component/Button/SpinButton.js.map +1 -0
- package/lib/es6/component/ButtonLink/ButtonLink.js +29 -55
- package/lib/es6/component/ButtonLink/ButtonLink.js.map +1 -1
- package/lib/es6/component/ButtonLink/ButtonLink.type.js.map +1 -1
- package/lib/es6/component/ButtonLink/buttonLink.shadow.css +10 -140
- package/lib/es6/index.js +1 -2
- package/lib/es6/index.js.map +1 -1
- package/lib/esm/component/Button/Button.mjs +117 -12
- package/lib/esm/component/ButtonLink/ButtonLink.mjs +29 -53
- package/lib/esm/component/ButtonLink/buttonLink.shadow.css +10 -140
- package/lib/esm/index.mjs +1 -2
- package/lib/types/component/Button/Button.d.ts +28 -1
- package/lib/types/component/Button/Button.type.d.ts +39 -19
- package/lib/types/component/ButtonLink/ButtonLink.type.d.ts +14 -16
- package/lib/types/index.d.ts +1 -2
- package/package.json +7 -7
- package/src/component/Button/Button.tsx +144 -7
- package/src/component/Button/Button.type.ts +45 -30
- package/src/component/ButtonLink/ButtonLink.tsx +22 -27
- package/src/component/ButtonLink/ButtonLink.type.ts +14 -22
- package/src/component/ButtonLink/buttonLink.shadow.css +10 -140
- package/src/index.ts +1 -2
- package/lib/cjs/component/AbstractButton/AbstractButton.js +0 -136
- package/lib/cjs/component/AbstractButton/AbstractButton.js.map +0 -1
- package/lib/cjs/component/AbstractButton/AbstractButton.type.js +0 -2
- package/lib/cjs/component/AbstractButton/AbstractButton.type.js.map +0 -1
- package/lib/cjs/component/AbstractButton/SpinButton.js.map +0 -1
- package/lib/es6/component/AbstractButton/AbstractButton.js +0 -129
- package/lib/es6/component/AbstractButton/AbstractButton.js.map +0 -1
- package/lib/es6/component/AbstractButton/AbstractButton.type.js +0 -2
- package/lib/es6/component/AbstractButton/AbstractButton.type.js.map +0 -1
- package/lib/es6/component/AbstractButton/SpinButton.js.map +0 -1
- package/lib/esm/component/AbstractButton/AbstractButton.mjs +0 -129
- package/lib/types/component/AbstractButton/AbstractButton.d.ts +0 -21
- package/lib/types/component/AbstractButton/AbstractButton.type.d.ts +0 -37
- package/src/component/AbstractButton/AbstractButton.tsx +0 -171
- package/src/component/AbstractButton/AbstractButton.type.ts +0 -43
- /package/lib/cjs/component/{AbstractButton → Button}/SpinButton.js +0 -0
- /package/lib/es6/component/{AbstractButton → Button}/SpinButton.js +0 -0
- /package/lib/esm/component/{AbstractButton → Button}/SpinButton.mjs +0 -0
- /package/lib/types/component/{AbstractButton → Button}/SpinButton.d.ts +0 -0
- /package/src/component/{AbstractButton → Button}/SpinButton.tsx +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractButton.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_hasLabels","_logger","_react","_SpinButton","MAP_USE_DEFAULT_THEME","exports","primary","secondary","tertiary","AbstractButton","Component","constructor","args","_defineProperty2","default","React","createRef","ariaLabelledByContent","getTextProps","props","size","asProps","textProps","triggerRef","containerRef","hintProps","getAddonProps","componentDidMount","process","env","NODE_ENV","logger","warn","current","hasLabels","title","displayName","theme","ariaLabelledby","setTimeout","setState","document","getElementById","textContent","render","_ref","styles","use","loading","disabled","neighborLocation","children","ariaLabel","Children","addonLeft","AddonLeft","addonRight","AddonRight","hintPlacement","SButton","Box","Button","CORE_INSTANCE","useTheme","SInner","SSpin","buttonAriaLabel","state","showHint","undefined","createElement","NeighborLocation","Detect","_ref2","sstyled","Fragment","cn","assignProps","getTextColor","Addon","addonTextChildren","Text","Hint"],"sources":["../../../../src/component/AbstractButton/AbstractButton.tsx"],"sourcesContent":["import { NeighborLocation, Box, Hint } from '@semcore/base-components';\nimport { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport React from 'react';\n\nimport type { AbstractButtonProps, AbstractButtonTextProps } from './AbstractButton.type';\nimport SpinButton from './SpinButton';\n\nexport const MAP_USE_DEFAULT_THEME: Record<string, string> = {\n primary: 'info',\n secondary: 'muted',\n tertiary: 'info',\n};\n\ntype Props = AbstractButtonProps<any, any, any>;\n\ntype State = {\n ariaLabelledByContent: null | string;\n};\n\nexport abstract class AbstractButton extends Component<Props, [], never, {}, State> {\n static displayName = 'AbstractButton';\n\n containerRef = React.createRef<HTMLButtonElement>();\n\n state: State = {\n ariaLabelledByContent: null,\n };\n\n protected abstract getTextColor(): string | undefined;\n\n getTextProps(props: AbstractButtonTextProps<any>) {\n const { size } = this.asProps;\n\n // `any` because we don't have typings for `use:PROPS`.\n const textProps: any = {\n size,\n 'use:hintProps': {\n triggerRef: this.containerRef,\n },\n };\n\n if ('hintProps' in props) {\n textProps['use:hintProps'] = { triggerRef: this.containerRef, ...props.hintProps };\n }\n\n return textProps;\n }\n\n getAddonProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title,\n `'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`,\n this.asProps['data-ui-name'] || AbstractButton.displayName,\n );\n\n logger.warn(\n this.asProps.theme === 'warning',\n 'Warning theme is deprecated and will be removed in the next major release.',\n this.asProps['data-ui-name'] || AbstractButton.displayName,\n );\n }\n\n const ariaLabelledby = this.asProps['aria-labelledby'];\n\n if (ariaLabelledby) {\n setTimeout(() => {\n this.setState({\n ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? '',\n });\n }, 0);\n }\n }\n\n render() {\n const {\n styles,\n use,\n theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n loading,\n disabled = loading,\n size,\n neighborLocation,\n children,\n title,\n ['aria-label']: ariaLabel,\n Children,\n addonLeft: AddonLeft,\n addonRight: AddonRight,\n hintPlacement,\n } = this.asProps;\n const SButton = Root;\n // @ts-ignore\n const Button = this[CORE_INSTANCE];\n const useTheme = use && theme ? `${use}-${theme}` : false;\n const SInner = Box;\n const SSpin = Box;\n const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';\n\n const showHint = (children === undefined || title);\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) => {\n return sstyled(styles)(\n <>\n <SButton\n render={Box}\n invertOutline={theme === 'invert'}\n type='button'\n tag='button'\n tabIndex={0}\n disabled={disabled}\n use:theme={useTheme}\n ref={this.containerRef}\n text-color={this.getTextColor()}\n aria-busy={loading}\n __excludeProps={['title']}\n aria-label={showHint ? buttonAriaLabel : undefined}\n neighborLocation={neighborLocation}\n >\n {/* @ts-ignore */}\n <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>\n {AddonLeft\n ? (\n <Button.Addon>\n <AddonLeft />\n </Button.Addon>\n )\n : null}\n {addonTextChildren(Children, Button.Text, Button.Addon)}\n {AddonRight\n ? (\n <Button.Addon>\n <AddonRight />\n </Button.Addon>\n )\n : null}\n </SInner>\n {loading && (\n <SSpin tag='span'>\n <SpinButton centered size={size} theme={useTheme} />\n </SSpin>\n )}\n </SButton>\n {showHint && (\n <Hint\n triggerRef={this.containerRef}\n timeout={[250, 50]}\n placement={hintPlacement}\n >\n {buttonAriaLabel}\n </Hint>\n )}\n </>,\n );\n }}\n </NeighborLocation.Detect>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractButton.type.js","names":[],"sources":["../../../../src/component/AbstractButton/AbstractButton.type.ts"],"sourcesContent":["import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';\nimport type { PropGetterFn } from '@semcore/core';\nimport type { TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type AbstractButtonProps<S, U, T> = BoxProps &\n NeighborItemProps & {\n /** Button activity state */\n active?: boolean;\n /** Disabled button state */\n disabled?: boolean;\n /** Loading button state */\n loading?: boolean;\n /** Tag for the left Addon */\n addonLeft?: React.ElementType;\n /** Tag for the right Addon */\n addonRight?: React.ElementType;\n /**\n * Placement for hint\n * @default top\n */\n hintPlacement?: SimpleHintPopperProps['placement'];\n\n /** Button size. Defined in Button.type or ButtonLink.type */\n size?: S;\n /** Button usage. Defined in Button.type or ButtonLink.type */\n use?: U;\n /** Button theme. Defined in Button.type or ButtonLink.type */\n theme?: T;\n };\n\nexport type AbstractButtonAddonProps<S> = BoxProps & {\n size?: S;\n};\n\nexport type AbstractButtonTextProps<S> = TextProps & {\n size?: S;\n};\n\nexport type AbstractButtonContext = {\n getTextProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SpinButton.js","names":["_spin","_interopRequireDefault","require","_react","SPIN_SIZE_MAP","exports","xl","l","m","s","SpinButton","theme","size","others","default","createElement","_extends2"],"sources":["../../../../src/component/AbstractButton/SpinButton.tsx"],"sourcesContent":["import Spin from '@semcore/spin';\nimport React from 'react';\n\nexport const SPIN_SIZE_MAP: Record<string, string> = {\n xl: 'm',\n l: 's',\n m: 'xs',\n s: 'xxs',\n};\n\nexport default function SpinButton({ theme, size, ...others }: any) {\n return (\n <Spin\n size={typeof size === 'string' ? SPIN_SIZE_MAP[size] : size}\n theme='currentColor'\n {...others}\n />\n );\n}\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEO,MAAME,aAAqC,GAAAC,OAAA,CAAAD,aAAA,GAAG;EACnDE,EAAE,EAAE,GAAG;EACPC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,IAAI;EACPC,CAAC,EAAE;AACL,CAAC;AAEc,SAASC,UAAUA,CAAC;EAAEC,KAAK;EAAEC,IAAI;EAAE,GAAGC;AAAY,CAAC,EAAE;EAClE,oBACEV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACf,KAAA,CAAAc,OAAI,MAAAE,SAAA,CAAAF,OAAA;IACHF,IAAI,EAAE,OAAOA,IAAI,KAAK,QAAQ,GAAGR,aAAa,CAACQ,IAAI,CAAC,GAAGA,IAAK;IAC5DD,KAAK,EAAC;EAAc,GAChBE,MAAM,CACX,CAAC;AAEN","ignoreList":[]}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
import { assignProps as _assignProps } from "@semcore/core";
|
|
3
|
-
import { NeighborLocation, Box, Hint } from '@semcore/base-components';
|
|
4
|
-
import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
|
|
5
|
-
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
6
|
-
import hasLabels from '@semcore/core/lib/utils/hasLabels';
|
|
7
|
-
import logger from '@semcore/core/lib/utils/logger';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
import SpinButton from './SpinButton';
|
|
10
|
-
export const MAP_USE_DEFAULT_THEME = {
|
|
11
|
-
primary: 'info',
|
|
12
|
-
secondary: 'muted',
|
|
13
|
-
tertiary: 'info'
|
|
14
|
-
};
|
|
15
|
-
export class AbstractButton extends Component {
|
|
16
|
-
constructor(...args) {
|
|
17
|
-
super(...args);
|
|
18
|
-
_defineProperty(this, "containerRef", /*#__PURE__*/React.createRef());
|
|
19
|
-
_defineProperty(this, "state", {
|
|
20
|
-
ariaLabelledByContent: null
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
getTextProps(props) {
|
|
24
|
-
const {
|
|
25
|
-
size
|
|
26
|
-
} = this.asProps;
|
|
27
|
-
|
|
28
|
-
// `any` because we don't have typings for `use:PROPS`.
|
|
29
|
-
const textProps = {
|
|
30
|
-
size,
|
|
31
|
-
'use:hintProps': {
|
|
32
|
-
triggerRef: this.containerRef
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
if ('hintProps' in props) {
|
|
36
|
-
textProps['use:hintProps'] = {
|
|
37
|
-
triggerRef: this.containerRef,
|
|
38
|
-
...props.hintProps
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
return textProps;
|
|
42
|
-
}
|
|
43
|
-
getAddonProps() {
|
|
44
|
-
const {
|
|
45
|
-
size
|
|
46
|
-
} = this.asProps;
|
|
47
|
-
return {
|
|
48
|
-
size
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
componentDidMount() {
|
|
52
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
53
|
-
logger.warn(this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title, `'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`, this.asProps['data-ui-name'] || AbstractButton.displayName);
|
|
54
|
-
logger.warn(this.asProps.theme === 'warning', 'Warning theme is deprecated and will be removed in the next major release.', this.asProps['data-ui-name'] || AbstractButton.displayName);
|
|
55
|
-
}
|
|
56
|
-
const ariaLabelledby = this.asProps['aria-labelledby'];
|
|
57
|
-
if (ariaLabelledby) {
|
|
58
|
-
setTimeout(() => {
|
|
59
|
-
this.setState({
|
|
60
|
-
ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? ''
|
|
61
|
-
});
|
|
62
|
-
}, 0);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
render() {
|
|
66
|
-
var _ref = this.asProps;
|
|
67
|
-
const {
|
|
68
|
-
styles,
|
|
69
|
-
use,
|
|
70
|
-
theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
|
|
71
|
-
loading,
|
|
72
|
-
disabled = loading,
|
|
73
|
-
size,
|
|
74
|
-
neighborLocation,
|
|
75
|
-
children,
|
|
76
|
-
title,
|
|
77
|
-
['aria-label']: ariaLabel,
|
|
78
|
-
Children,
|
|
79
|
-
addonLeft: AddonLeft,
|
|
80
|
-
addonRight: AddonRight,
|
|
81
|
-
hintPlacement
|
|
82
|
-
} = this.asProps;
|
|
83
|
-
const SButton = Box;
|
|
84
|
-
// @ts-ignore
|
|
85
|
-
const Button = this[CORE_INSTANCE];
|
|
86
|
-
const useTheme = use && theme ? `${use}-${theme}` : false;
|
|
87
|
-
const SInner = Box;
|
|
88
|
-
const SSpin = Box;
|
|
89
|
-
const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
|
|
90
|
-
const showHint = children === undefined || title;
|
|
91
|
-
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
92
|
-
neighborLocation: neighborLocation
|
|
93
|
-
}, neighborLocation => {
|
|
94
|
-
var _ref2;
|
|
95
|
-
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SButton, _ref2.cn("SButton", {
|
|
96
|
-
..._assignProps({
|
|
97
|
-
"invertOutline": theme === 'invert',
|
|
98
|
-
"type": 'button',
|
|
99
|
-
"tag": 'button',
|
|
100
|
-
"tabIndex": 0,
|
|
101
|
-
"disabled": disabled,
|
|
102
|
-
"use:theme": useTheme,
|
|
103
|
-
"ref": this.containerRef,
|
|
104
|
-
"text-color": this.getTextColor(),
|
|
105
|
-
"aria-busy": loading,
|
|
106
|
-
"__excludeProps": ['title'],
|
|
107
|
-
"aria-label": showHint ? buttonAriaLabel : undefined,
|
|
108
|
-
"neighborLocation": neighborLocation
|
|
109
|
-
}, _ref)
|
|
110
|
-
}), /*#__PURE__*/React.createElement(SInner, _ref2.cn("SInner", {
|
|
111
|
-
"tag": 'span',
|
|
112
|
-
"loading": loading,
|
|
113
|
-
"data-ui-name": `${this.asProps['data-ui-name']}.InnerWrapper`
|
|
114
|
-
}), AddonLeft ? /*#__PURE__*/React.createElement(Button.Addon, null, /*#__PURE__*/React.createElement(AddonLeft, _ref2.cn("AddonLeft", {}))) : null, addonTextChildren(Children, Button.Text, Button.Addon), AddonRight ? /*#__PURE__*/React.createElement(Button.Addon, null, /*#__PURE__*/React.createElement(AddonRight, _ref2.cn("AddonRight", {}))) : null), loading && /*#__PURE__*/React.createElement(SSpin, _ref2.cn("SSpin", {
|
|
115
|
-
"tag": 'span'
|
|
116
|
-
}), /*#__PURE__*/React.createElement(SpinButton, _ref2.cn("SpinButton", {
|
|
117
|
-
"centered": true,
|
|
118
|
-
"size": size,
|
|
119
|
-
"theme": useTheme
|
|
120
|
-
})))), showHint && /*#__PURE__*/React.createElement(Hint, _ref2.cn("Hint", {
|
|
121
|
-
"triggerRef": this.containerRef,
|
|
122
|
-
"timeout": [250, 50],
|
|
123
|
-
"placement": hintPlacement
|
|
124
|
-
}), buttonAriaLabel));
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
_defineProperty(AbstractButton, "displayName", 'AbstractButton');
|
|
129
|
-
//# sourceMappingURL=AbstractButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractButton.js","names":["NeighborLocation","Box","Hint","Component","CORE_INSTANCE","Root","sstyled","addonTextChildren","hasLabels","logger","React","SpinButton","MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","AbstractButton","constructor","args","_defineProperty","createRef","ariaLabelledByContent","getTextProps","props","size","asProps","textProps","triggerRef","containerRef","hintProps","getAddonProps","componentDidMount","process","env","NODE_ENV","warn","current","title","displayName","theme","ariaLabelledby","setTimeout","setState","document","getElementById","textContent","render","_ref","styles","use","loading","disabled","neighborLocation","children","ariaLabel","Children","addonLeft","AddonLeft","addonRight","AddonRight","hintPlacement","SButton","Button","useTheme","SInner","SSpin","buttonAriaLabel","state","showHint","undefined","createElement","Detect","_ref2","Fragment","cn","_assignProps","getTextColor","Addon","Text"],"sources":["../../../../src/component/AbstractButton/AbstractButton.tsx"],"sourcesContent":["import { NeighborLocation, Box, Hint } from '@semcore/base-components';\nimport { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport React from 'react';\n\nimport type { AbstractButtonProps, AbstractButtonTextProps } from './AbstractButton.type';\nimport SpinButton from './SpinButton';\n\nexport const MAP_USE_DEFAULT_THEME: Record<string, string> = {\n primary: 'info',\n secondary: 'muted',\n tertiary: 'info',\n};\n\ntype Props = AbstractButtonProps<any, any, any>;\n\ntype State = {\n ariaLabelledByContent: null | string;\n};\n\nexport abstract class AbstractButton extends Component<Props, [], never, {}, State> {\n static displayName = 'AbstractButton';\n\n containerRef = React.createRef<HTMLButtonElement>();\n\n state: State = {\n ariaLabelledByContent: null,\n };\n\n protected abstract getTextColor(): string | undefined;\n\n getTextProps(props: AbstractButtonTextProps<any>) {\n const { size } = this.asProps;\n\n // `any` because we don't have typings for `use:PROPS`.\n const textProps: any = {\n size,\n 'use:hintProps': {\n triggerRef: this.containerRef,\n },\n };\n\n if ('hintProps' in props) {\n textProps['use:hintProps'] = { triggerRef: this.containerRef, ...props.hintProps };\n }\n\n return textProps;\n }\n\n getAddonProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title,\n `'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`,\n this.asProps['data-ui-name'] || AbstractButton.displayName,\n );\n\n logger.warn(\n this.asProps.theme === 'warning',\n 'Warning theme is deprecated and will be removed in the next major release.',\n this.asProps['data-ui-name'] || AbstractButton.displayName,\n );\n }\n\n const ariaLabelledby = this.asProps['aria-labelledby'];\n\n if (ariaLabelledby) {\n setTimeout(() => {\n this.setState({\n ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? '',\n });\n }, 0);\n }\n }\n\n render() {\n const {\n styles,\n use,\n theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n loading,\n disabled = loading,\n size,\n neighborLocation,\n children,\n title,\n ['aria-label']: ariaLabel,\n Children,\n addonLeft: AddonLeft,\n addonRight: AddonRight,\n hintPlacement,\n } = this.asProps;\n const SButton = Root;\n // @ts-ignore\n const Button = this[CORE_INSTANCE];\n const useTheme = use && theme ? `${use}-${theme}` : false;\n const SInner = Box;\n const SSpin = Box;\n const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';\n\n const showHint = (children === undefined || title);\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) => {\n return sstyled(styles)(\n <>\n <SButton\n render={Box}\n invertOutline={theme === 'invert'}\n type='button'\n tag='button'\n tabIndex={0}\n disabled={disabled}\n use:theme={useTheme}\n ref={this.containerRef}\n text-color={this.getTextColor()}\n aria-busy={loading}\n __excludeProps={['title']}\n aria-label={showHint ? buttonAriaLabel : undefined}\n neighborLocation={neighborLocation}\n >\n {/* @ts-ignore */}\n <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>\n {AddonLeft\n ? (\n <Button.Addon>\n <AddonLeft />\n </Button.Addon>\n )\n : null}\n {addonTextChildren(Children, Button.Text, Button.Addon)}\n {AddonRight\n ? (\n <Button.Addon>\n <AddonRight />\n </Button.Addon>\n )\n : null}\n </SInner>\n {loading && (\n <SSpin tag='span'>\n <SpinButton centered size={size} theme={useTheme} />\n </SSpin>\n )}\n </SButton>\n {showHint && (\n <Hint\n triggerRef={this.containerRef}\n timeout={[250, 50]}\n placement={hintPlacement}\n >\n {buttonAriaLabel}\n </Hint>\n )}\n </>,\n );\n }}\n </NeighborLocation.Detect>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractButton.type.js","names":[],"sources":["../../../../src/component/AbstractButton/AbstractButton.type.ts"],"sourcesContent":["import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';\nimport type { PropGetterFn } from '@semcore/core';\nimport type { TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type AbstractButtonProps<S, U, T> = BoxProps &\n NeighborItemProps & {\n /** Button activity state */\n active?: boolean;\n /** Disabled button state */\n disabled?: boolean;\n /** Loading button state */\n loading?: boolean;\n /** Tag for the left Addon */\n addonLeft?: React.ElementType;\n /** Tag for the right Addon */\n addonRight?: React.ElementType;\n /**\n * Placement for hint\n * @default top\n */\n hintPlacement?: SimpleHintPopperProps['placement'];\n\n /** Button size. Defined in Button.type or ButtonLink.type */\n size?: S;\n /** Button usage. Defined in Button.type or ButtonLink.type */\n use?: U;\n /** Button theme. Defined in Button.type or ButtonLink.type */\n theme?: T;\n };\n\nexport type AbstractButtonAddonProps<S> = BoxProps & {\n size?: S;\n};\n\nexport type AbstractButtonTextProps<S> = TextProps & {\n size?: S;\n};\n\nexport type AbstractButtonContext = {\n getTextProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SpinButton.js","names":["Spin","React","SPIN_SIZE_MAP","xl","l","m","s","SpinButton","theme","size","others","createElement","_extends"],"sources":["../../../../src/component/AbstractButton/SpinButton.tsx"],"sourcesContent":["import Spin from '@semcore/spin';\nimport React from 'react';\n\nexport const SPIN_SIZE_MAP: Record<string, string> = {\n xl: 'm',\n l: 's',\n m: 'xs',\n s: 'xxs',\n};\n\nexport default function SpinButton({ theme, size, ...others }: any) {\n return (\n <Spin\n size={typeof size === 'string' ? SPIN_SIZE_MAP[size] : size}\n theme='currentColor'\n {...others}\n />\n );\n}\n"],"mappings":";AAAA,OAAOA,IAAI,MAAM,eAAe;AAChC,OAAOC,KAAK,MAAM,OAAO;AAEzB,OAAO,MAAMC,aAAqC,GAAG;EACnDC,EAAE,EAAE,GAAG;EACPC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,IAAI;EACPC,CAAC,EAAE;AACL,CAAC;AAED,eAAe,SAASC,UAAUA,CAAC;EAAEC,KAAK;EAAEC,IAAI;EAAE,GAAGC;AAAY,CAAC,EAAE;EAClE,oBACET,KAAA,CAAAU,aAAA,CAACX,IAAI,EAAAY,QAAA;IACHH,IAAI,EAAE,OAAOA,IAAI,KAAK,QAAQ,GAAGP,aAAa,CAACO,IAAI,CAAC,GAAGA,IAAK;IAC5DD,KAAK,EAAC;EAAc,GAChBE,MAAM,CACX,CAAC;AAEN","ignoreList":[]}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { Component, CORE_INSTANCE, sstyled, assignProps } from "@semcore/core";
|
|
3
|
-
import { NeighborLocation, Box, Hint } from "@semcore/base-components";
|
|
4
|
-
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
5
|
-
import hasLabels from "@semcore/core/lib/utils/hasLabels";
|
|
6
|
-
import logger from "@semcore/core/lib/utils/logger";
|
|
7
|
-
import React from "react";
|
|
8
|
-
import SpinButton from "./SpinButton.mjs";
|
|
9
|
-
const MAP_USE_DEFAULT_THEME = {
|
|
10
|
-
primary: "info",
|
|
11
|
-
secondary: "muted",
|
|
12
|
-
tertiary: "info"
|
|
13
|
-
};
|
|
14
|
-
class AbstractButton extends Component {
|
|
15
|
-
constructor(...args) {
|
|
16
|
-
super(...args);
|
|
17
|
-
_defineProperty(this, "containerRef", /* @__PURE__ */ React.createRef());
|
|
18
|
-
_defineProperty(this, "state", {
|
|
19
|
-
ariaLabelledByContent: null
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
getTextProps(props) {
|
|
23
|
-
const {
|
|
24
|
-
size
|
|
25
|
-
} = this.asProps;
|
|
26
|
-
const textProps = {
|
|
27
|
-
size,
|
|
28
|
-
"use:hintProps": {
|
|
29
|
-
triggerRef: this.containerRef
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
if ("hintProps" in props) {
|
|
33
|
-
textProps["use:hintProps"] = {
|
|
34
|
-
triggerRef: this.containerRef,
|
|
35
|
-
...props.hintProps
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
return textProps;
|
|
39
|
-
}
|
|
40
|
-
getAddonProps() {
|
|
41
|
-
const {
|
|
42
|
-
size
|
|
43
|
-
} = this.asProps;
|
|
44
|
-
return {
|
|
45
|
-
size
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
componentDidMount() {
|
|
49
|
-
if (process.env.NODE_ENV !== "production") {
|
|
50
|
-
logger.warn(this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title, `'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`, this.asProps["data-ui-name"] || AbstractButton.displayName);
|
|
51
|
-
logger.warn(this.asProps.theme === "warning", "Warning theme is deprecated and will be removed in the next major release.", this.asProps["data-ui-name"] || AbstractButton.displayName);
|
|
52
|
-
}
|
|
53
|
-
const ariaLabelledby = this.asProps["aria-labelledby"];
|
|
54
|
-
if (ariaLabelledby) {
|
|
55
|
-
setTimeout(() => {
|
|
56
|
-
var _a;
|
|
57
|
-
this.setState({
|
|
58
|
-
ariaLabelledByContent: ((_a = document.getElementById(ariaLabelledby)) == null ? void 0 : _a.textContent) ?? ""
|
|
59
|
-
});
|
|
60
|
-
}, 0);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
render() {
|
|
64
|
-
var _ref = this.asProps;
|
|
65
|
-
const {
|
|
66
|
-
styles,
|
|
67
|
-
use,
|
|
68
|
-
theme = typeof use === "string" && MAP_USE_DEFAULT_THEME[use],
|
|
69
|
-
loading,
|
|
70
|
-
disabled = loading,
|
|
71
|
-
size,
|
|
72
|
-
neighborLocation,
|
|
73
|
-
children,
|
|
74
|
-
title,
|
|
75
|
-
["aria-label"]: ariaLabel,
|
|
76
|
-
Children,
|
|
77
|
-
addonLeft: AddonLeft,
|
|
78
|
-
addonRight: AddonRight,
|
|
79
|
-
hintPlacement
|
|
80
|
-
} = this.asProps;
|
|
81
|
-
const SButton = Box;
|
|
82
|
-
const Button = this[CORE_INSTANCE];
|
|
83
|
-
const useTheme = use && theme ? `${use}-${theme}` : false;
|
|
84
|
-
const SInner = Box;
|
|
85
|
-
const SSpin = Box;
|
|
86
|
-
const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? "";
|
|
87
|
-
const showHint = children === void 0 || title;
|
|
88
|
-
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
89
|
-
neighborLocation
|
|
90
|
-
}, (neighborLocation2) => {
|
|
91
|
-
var _ref2;
|
|
92
|
-
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SButton, _ref2.cn("SButton", {
|
|
93
|
-
...assignProps({
|
|
94
|
-
"invertOutline": theme === "invert",
|
|
95
|
-
"type": "button",
|
|
96
|
-
"tag": "button",
|
|
97
|
-
"tabIndex": 0,
|
|
98
|
-
"disabled": disabled,
|
|
99
|
-
"use:theme": useTheme,
|
|
100
|
-
"ref": this.containerRef,
|
|
101
|
-
"text-color": this.getTextColor(),
|
|
102
|
-
"aria-busy": loading,
|
|
103
|
-
"__excludeProps": ["title"],
|
|
104
|
-
"aria-label": showHint ? buttonAriaLabel : void 0,
|
|
105
|
-
"neighborLocation": neighborLocation2
|
|
106
|
-
}, _ref)
|
|
107
|
-
}), /* @__PURE__ */ React.createElement(SInner, _ref2.cn("SInner", {
|
|
108
|
-
"tag": "span",
|
|
109
|
-
"loading": loading,
|
|
110
|
-
"data-ui-name": `${this.asProps["data-ui-name"]}.InnerWrapper`
|
|
111
|
-
}), AddonLeft ? /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(AddonLeft, _ref2.cn("AddonLeft", {}))) : null, addonTextChildren(Children, Button.Text, Button.Addon), AddonRight ? /* @__PURE__ */ React.createElement(Button.Addon, null, /* @__PURE__ */ React.createElement(AddonRight, _ref2.cn("AddonRight", {}))) : null), loading && /* @__PURE__ */ React.createElement(SSpin, _ref2.cn("SSpin", {
|
|
112
|
-
"tag": "span"
|
|
113
|
-
}), /* @__PURE__ */ React.createElement(SpinButton, _ref2.cn("SpinButton", {
|
|
114
|
-
"centered": true,
|
|
115
|
-
"size": size,
|
|
116
|
-
"theme": useTheme
|
|
117
|
-
})))), showHint && /* @__PURE__ */ React.createElement(Hint, _ref2.cn("Hint", {
|
|
118
|
-
"triggerRef": this.containerRef,
|
|
119
|
-
"timeout": [250, 50],
|
|
120
|
-
"placement": hintPlacement
|
|
121
|
-
}), buttonAriaLabel));
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
_defineProperty(AbstractButton, "displayName", "AbstractButton");
|
|
126
|
-
export {
|
|
127
|
-
AbstractButton,
|
|
128
|
-
MAP_USE_DEFAULT_THEME
|
|
129
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { Component } from '@semcore/core';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { AbstractButtonProps, AbstractButtonTextProps } from './AbstractButton.type';
|
|
4
|
-
export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
|
|
5
|
-
type Props = AbstractButtonProps<any, any, any>;
|
|
6
|
-
type State = {
|
|
7
|
-
ariaLabelledByContent: null | string;
|
|
8
|
-
};
|
|
9
|
-
export declare abstract class AbstractButton extends Component<Props, [], never, {}, State> {
|
|
10
|
-
static displayName: string;
|
|
11
|
-
containerRef: React.RefObject<HTMLButtonElement>;
|
|
12
|
-
state: State;
|
|
13
|
-
protected abstract getTextColor(): string | undefined;
|
|
14
|
-
getTextProps(props: AbstractButtonTextProps<any>): any;
|
|
15
|
-
getAddonProps(): {
|
|
16
|
-
size: any;
|
|
17
|
-
};
|
|
18
|
-
componentDidMount(): void;
|
|
19
|
-
render(): React.JSX.Element;
|
|
20
|
-
}
|
|
21
|
-
export {};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
|
|
2
|
-
import type { PropGetterFn } from '@semcore/core';
|
|
3
|
-
import type { TextProps } from '@semcore/typography';
|
|
4
|
-
import type React from 'react';
|
|
5
|
-
export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & {
|
|
6
|
-
/** Button activity state */
|
|
7
|
-
active?: boolean;
|
|
8
|
-
/** Disabled button state */
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
/** Loading button state */
|
|
11
|
-
loading?: boolean;
|
|
12
|
-
/** Tag for the left Addon */
|
|
13
|
-
addonLeft?: React.ElementType;
|
|
14
|
-
/** Tag for the right Addon */
|
|
15
|
-
addonRight?: React.ElementType;
|
|
16
|
-
/**
|
|
17
|
-
* Placement for hint
|
|
18
|
-
* @default top
|
|
19
|
-
*/
|
|
20
|
-
hintPlacement?: SimpleHintPopperProps['placement'];
|
|
21
|
-
/** Button size. Defined in Button.type or ButtonLink.type */
|
|
22
|
-
size?: S;
|
|
23
|
-
/** Button usage. Defined in Button.type or ButtonLink.type */
|
|
24
|
-
use?: U;
|
|
25
|
-
/** Button theme. Defined in Button.type or ButtonLink.type */
|
|
26
|
-
theme?: T;
|
|
27
|
-
};
|
|
28
|
-
export type AbstractButtonAddonProps<S> = BoxProps & {
|
|
29
|
-
size?: S;
|
|
30
|
-
};
|
|
31
|
-
export type AbstractButtonTextProps<S> = TextProps & {
|
|
32
|
-
size?: S;
|
|
33
|
-
};
|
|
34
|
-
export type AbstractButtonContext = {
|
|
35
|
-
getTextProps: PropGetterFn;
|
|
36
|
-
getAddonProps: PropGetterFn;
|
|
37
|
-
};
|
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
import { NeighborLocation, Box, Hint } from '@semcore/base-components';
|
|
2
|
-
import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
|
|
3
|
-
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
4
|
-
import hasLabels from '@semcore/core/lib/utils/hasLabels';
|
|
5
|
-
import logger from '@semcore/core/lib/utils/logger';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
|
|
8
|
-
import type { AbstractButtonProps, AbstractButtonTextProps } from './AbstractButton.type';
|
|
9
|
-
import SpinButton from './SpinButton';
|
|
10
|
-
|
|
11
|
-
export const MAP_USE_DEFAULT_THEME: Record<string, string> = {
|
|
12
|
-
primary: 'info',
|
|
13
|
-
secondary: 'muted',
|
|
14
|
-
tertiary: 'info',
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
type Props = AbstractButtonProps<any, any, any>;
|
|
18
|
-
|
|
19
|
-
type State = {
|
|
20
|
-
ariaLabelledByContent: null | string;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export abstract class AbstractButton extends Component<Props, [], never, {}, State> {
|
|
24
|
-
static displayName = 'AbstractButton';
|
|
25
|
-
|
|
26
|
-
containerRef = React.createRef<HTMLButtonElement>();
|
|
27
|
-
|
|
28
|
-
state: State = {
|
|
29
|
-
ariaLabelledByContent: null,
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
protected abstract getTextColor(): string | undefined;
|
|
33
|
-
|
|
34
|
-
getTextProps(props: AbstractButtonTextProps<any>) {
|
|
35
|
-
const { size } = this.asProps;
|
|
36
|
-
|
|
37
|
-
// `any` because we don't have typings for `use:PROPS`.
|
|
38
|
-
const textProps: any = {
|
|
39
|
-
size,
|
|
40
|
-
'use:hintProps': {
|
|
41
|
-
triggerRef: this.containerRef,
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
if ('hintProps' in props) {
|
|
46
|
-
textProps['use:hintProps'] = { triggerRef: this.containerRef, ...props.hintProps };
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return textProps;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
getAddonProps() {
|
|
53
|
-
const { size } = this.asProps;
|
|
54
|
-
return {
|
|
55
|
-
size,
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
componentDidMount() {
|
|
60
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
61
|
-
logger.warn(
|
|
62
|
-
this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title,
|
|
63
|
-
`'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`,
|
|
64
|
-
this.asProps['data-ui-name'] || AbstractButton.displayName,
|
|
65
|
-
);
|
|
66
|
-
|
|
67
|
-
logger.warn(
|
|
68
|
-
this.asProps.theme === 'warning',
|
|
69
|
-
'Warning theme is deprecated and will be removed in the next major release.',
|
|
70
|
-
this.asProps['data-ui-name'] || AbstractButton.displayName,
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const ariaLabelledby = this.asProps['aria-labelledby'];
|
|
75
|
-
|
|
76
|
-
if (ariaLabelledby) {
|
|
77
|
-
setTimeout(() => {
|
|
78
|
-
this.setState({
|
|
79
|
-
ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? '',
|
|
80
|
-
});
|
|
81
|
-
}, 0);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
render() {
|
|
86
|
-
const {
|
|
87
|
-
styles,
|
|
88
|
-
use,
|
|
89
|
-
theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
|
|
90
|
-
loading,
|
|
91
|
-
disabled = loading,
|
|
92
|
-
size,
|
|
93
|
-
neighborLocation,
|
|
94
|
-
children,
|
|
95
|
-
title,
|
|
96
|
-
['aria-label']: ariaLabel,
|
|
97
|
-
Children,
|
|
98
|
-
addonLeft: AddonLeft,
|
|
99
|
-
addonRight: AddonRight,
|
|
100
|
-
hintPlacement,
|
|
101
|
-
} = this.asProps;
|
|
102
|
-
const SButton = Root;
|
|
103
|
-
// @ts-ignore
|
|
104
|
-
const Button = this[CORE_INSTANCE];
|
|
105
|
-
const useTheme = use && theme ? `${use}-${theme}` : false;
|
|
106
|
-
const SInner = Box;
|
|
107
|
-
const SSpin = Box;
|
|
108
|
-
const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
|
|
109
|
-
|
|
110
|
-
const showHint = (children === undefined || title);
|
|
111
|
-
|
|
112
|
-
return (
|
|
113
|
-
<NeighborLocation.Detect neighborLocation={neighborLocation}>
|
|
114
|
-
{(neighborLocation) => {
|
|
115
|
-
return sstyled(styles)(
|
|
116
|
-
<>
|
|
117
|
-
<SButton
|
|
118
|
-
render={Box}
|
|
119
|
-
invertOutline={theme === 'invert'}
|
|
120
|
-
type='button'
|
|
121
|
-
tag='button'
|
|
122
|
-
tabIndex={0}
|
|
123
|
-
disabled={disabled}
|
|
124
|
-
use:theme={useTheme}
|
|
125
|
-
ref={this.containerRef}
|
|
126
|
-
text-color={this.getTextColor()}
|
|
127
|
-
aria-busy={loading}
|
|
128
|
-
__excludeProps={['title']}
|
|
129
|
-
aria-label={showHint ? buttonAriaLabel : undefined}
|
|
130
|
-
neighborLocation={neighborLocation}
|
|
131
|
-
>
|
|
132
|
-
{/* @ts-ignore */}
|
|
133
|
-
<SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>
|
|
134
|
-
{AddonLeft
|
|
135
|
-
? (
|
|
136
|
-
<Button.Addon>
|
|
137
|
-
<AddonLeft />
|
|
138
|
-
</Button.Addon>
|
|
139
|
-
)
|
|
140
|
-
: null}
|
|
141
|
-
{addonTextChildren(Children, Button.Text, Button.Addon)}
|
|
142
|
-
{AddonRight
|
|
143
|
-
? (
|
|
144
|
-
<Button.Addon>
|
|
145
|
-
<AddonRight />
|
|
146
|
-
</Button.Addon>
|
|
147
|
-
)
|
|
148
|
-
: null}
|
|
149
|
-
</SInner>
|
|
150
|
-
{loading && (
|
|
151
|
-
<SSpin tag='span'>
|
|
152
|
-
<SpinButton centered size={size} theme={useTheme} />
|
|
153
|
-
</SSpin>
|
|
154
|
-
)}
|
|
155
|
-
</SButton>
|
|
156
|
-
{showHint && (
|
|
157
|
-
<Hint
|
|
158
|
-
triggerRef={this.containerRef}
|
|
159
|
-
timeout={[250, 50]}
|
|
160
|
-
placement={hintPlacement}
|
|
161
|
-
>
|
|
162
|
-
{buttonAriaLabel}
|
|
163
|
-
</Hint>
|
|
164
|
-
)}
|
|
165
|
-
</>,
|
|
166
|
-
);
|
|
167
|
-
}}
|
|
168
|
-
</NeighborLocation.Detect>
|
|
169
|
-
);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
|
|
2
|
-
import type { PropGetterFn } from '@semcore/core';
|
|
3
|
-
import type { TextProps } from '@semcore/typography';
|
|
4
|
-
import type React from 'react';
|
|
5
|
-
|
|
6
|
-
export type AbstractButtonProps<S, U, T> = BoxProps &
|
|
7
|
-
NeighborItemProps & {
|
|
8
|
-
/** Button activity state */
|
|
9
|
-
active?: boolean;
|
|
10
|
-
/** Disabled button state */
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
/** Loading button state */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** Tag for the left Addon */
|
|
15
|
-
addonLeft?: React.ElementType;
|
|
16
|
-
/** Tag for the right Addon */
|
|
17
|
-
addonRight?: React.ElementType;
|
|
18
|
-
/**
|
|
19
|
-
* Placement for hint
|
|
20
|
-
* @default top
|
|
21
|
-
*/
|
|
22
|
-
hintPlacement?: SimpleHintPopperProps['placement'];
|
|
23
|
-
|
|
24
|
-
/** Button size. Defined in Button.type or ButtonLink.type */
|
|
25
|
-
size?: S;
|
|
26
|
-
/** Button usage. Defined in Button.type or ButtonLink.type */
|
|
27
|
-
use?: U;
|
|
28
|
-
/** Button theme. Defined in Button.type or ButtonLink.type */
|
|
29
|
-
theme?: T;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export type AbstractButtonAddonProps<S> = BoxProps & {
|
|
33
|
-
size?: S;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export type AbstractButtonTextProps<S> = TextProps & {
|
|
37
|
-
size?: S;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export type AbstractButtonContext = {
|
|
41
|
-
getTextProps: PropGetterFn;
|
|
42
|
-
getAddonProps: PropGetterFn;
|
|
43
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|