@akinon/ui-button 0.7.0 → 1.0.1
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/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +54 -9
- package/dist/cjs/types.d.ts +26 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +54 -9
- package/dist/esm/types.d.ts +26 -1
- package/package.json +7 -6
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0J/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Button = void 0;
|
|
4
4
|
const icons_1 = require("@akinon/icons");
|
|
5
5
|
const ui_theme_1 = require("@akinon/ui-theme");
|
|
6
|
+
const ui_tooltip_1 = require("@akinon/ui-tooltip");
|
|
6
7
|
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
7
8
|
const antd_1 = require("antd");
|
|
8
9
|
const react_1 = require("react");
|
|
@@ -21,22 +22,24 @@ const Button = (buttonProps) => {
|
|
|
21
22
|
const { getPrefixCls, theme } = react_1.default.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
22
23
|
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
23
24
|
const buttonToken = token.Button;
|
|
25
|
+
const customTokens = theme.CustomTokens || {};
|
|
24
26
|
const useStyle = (0, cssinjs_1.useStyleRegister)({
|
|
25
27
|
token: token,
|
|
26
28
|
path: ['Button'],
|
|
27
29
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
28
30
|
theme: theme
|
|
29
31
|
}, () => {
|
|
30
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
32
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
31
33
|
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
|
|
34
|
+
const iconPrefixCls = `.${getPrefixCls()}-btn`;
|
|
32
35
|
// MARK: - Disabled
|
|
33
36
|
const disabledStyles = {
|
|
34
37
|
'&:disabled, &-disabled': {
|
|
35
38
|
backgroundColor: (_a = buttonToken.colorBgContainerDisabled) !== null && _a !== void 0 ? _a : token.colorBgContainerDisabled,
|
|
36
39
|
color: (_b = buttonToken.colorTextDisabled) !== null && _b !== void 0 ? _b : token.colorTextDisabled,
|
|
37
40
|
borderColor: buttonToken.borderColorDisabled,
|
|
38
|
-
cursor:
|
|
39
|
-
boxShadow:
|
|
41
|
+
cursor: customTokens.others.cursorNotAllowed,
|
|
42
|
+
boxShadow: customTokens.layout.displayNone
|
|
40
43
|
}
|
|
41
44
|
};
|
|
42
45
|
// END: Disabled
|
|
@@ -44,7 +47,10 @@ const Button = (buttonProps) => {
|
|
|
44
47
|
// MARK: - All
|
|
45
48
|
[`${prefixCls}`]: {
|
|
46
49
|
['> *']: {
|
|
47
|
-
verticalAlign:
|
|
50
|
+
verticalAlign: customTokens.others.verticalAlignMiddle
|
|
51
|
+
},
|
|
52
|
+
['> span']: {
|
|
53
|
+
alignSelf: `${customTokens.layout.flexCenter} !important`
|
|
48
54
|
}
|
|
49
55
|
},
|
|
50
56
|
// END: All
|
|
@@ -53,10 +59,10 @@ const Button = (buttonProps) => {
|
|
|
53
59
|
[`&:not(:disabled)${prefixCls}-sm`]: {
|
|
54
60
|
backgroundColor: buttonToken.defaultBgSm,
|
|
55
61
|
color: buttonToken.colorText,
|
|
56
|
-
borderColor:
|
|
62
|
+
borderColor: customTokens.others.colorTransparent,
|
|
57
63
|
'&:hover': {
|
|
58
64
|
backgroundColor: buttonToken.defaultBgSmHover,
|
|
59
|
-
borderColor:
|
|
65
|
+
borderColor: customTokens.others.colorTransparent,
|
|
60
66
|
color: buttonToken.colorTextHover
|
|
61
67
|
},
|
|
62
68
|
[`&${prefixCls}-dangerous`]: {
|
|
@@ -65,6 +71,9 @@ const Button = (buttonProps) => {
|
|
|
65
71
|
color: buttonToken.colorErrorSMHover,
|
|
66
72
|
backgroundColor: buttonToken.colorErrorBgSMHover
|
|
67
73
|
}
|
|
74
|
+
},
|
|
75
|
+
['span']: {
|
|
76
|
+
lineHeight: 'normal !important'
|
|
68
77
|
}
|
|
69
78
|
}
|
|
70
79
|
},
|
|
@@ -78,11 +87,47 @@ const Button = (buttonProps) => {
|
|
|
78
87
|
[`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
|
|
79
88
|
backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
|
|
80
89
|
borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
|
|
81
|
-
} }, disabledStyles)
|
|
90
|
+
} }, disabledStyles),
|
|
82
91
|
// END: Warning
|
|
92
|
+
// MARK: Icon
|
|
93
|
+
[`${prefixCls}-icon`]: {
|
|
94
|
+
['> *']: {
|
|
95
|
+
backgroundColor: customTokens.others.colorTransparent,
|
|
96
|
+
// Since this button is transparent, we are using success bg color for the icon.
|
|
97
|
+
color: (_j = buttonToken.colorSuccessBg) !== null && _j !== void 0 ? _j : token.colorSuccessBg,
|
|
98
|
+
verticalAlign: customTokens.others.verticalAlignMiddle,
|
|
99
|
+
'&:hover:not(:disabled)': {
|
|
100
|
+
color: (_k = buttonToken.colorSuccessBg) !== null && _k !== void 0 ? _k : token.colorSuccessBg
|
|
101
|
+
},
|
|
102
|
+
'&:active': {
|
|
103
|
+
boxShadow: customTokens.layout.displayNone
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
'&:disabled': {
|
|
107
|
+
opacity: 0.4
|
|
108
|
+
},
|
|
109
|
+
[`&${iconPrefixCls}-dangerous > *`]: {
|
|
110
|
+
color: 'red',
|
|
111
|
+
'&:hover:not(:disabled)': {
|
|
112
|
+
color: (_l = buttonToken.colorErrorHover) !== null && _l !== void 0 ? _l : token.colorErrorHover
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
// END: Icon
|
|
83
117
|
};
|
|
84
118
|
});
|
|
85
|
-
|
|
86
|
-
|
|
119
|
+
const renderButton = () => {
|
|
120
|
+
var _a;
|
|
121
|
+
return (react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
|
|
122
|
+
};
|
|
123
|
+
// If tooltip prop is provided, wrap the button with Tooltip
|
|
124
|
+
if (buttonProps.tooltip) {
|
|
125
|
+
const tooltipProps = typeof buttonProps.tooltip === 'string'
|
|
126
|
+
? { title: buttonProps.tooltip }
|
|
127
|
+
: buttonProps.tooltip;
|
|
128
|
+
return useStyle(react_1.default.createElement(ui_tooltip_1.Tooltip, Object.assign({}, tooltipProps), renderButton()));
|
|
129
|
+
}
|
|
130
|
+
// If no tooltip, return the button as is
|
|
131
|
+
return useStyle(renderButton());
|
|
87
132
|
};
|
|
88
133
|
exports.Button = Button;
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { IconName } from '@akinon/icons';
|
|
2
2
|
import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
|
|
3
|
+
import { TooltipProps } from '@akinon/ui-tooltip';
|
|
3
4
|
|
|
4
5
|
// TODO: contribute antd to extend the types properly
|
|
5
6
|
export type TButtonType =
|
|
@@ -8,7 +9,8 @@ export type TButtonType =
|
|
|
8
9
|
| 'text'
|
|
9
10
|
| 'link'
|
|
10
11
|
| 'success'
|
|
11
|
-
| 'warning'
|
|
12
|
+
| 'warning'
|
|
13
|
+
| 'icon';
|
|
12
14
|
|
|
13
15
|
type TMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
|
|
14
16
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
@@ -25,42 +27,55 @@ export interface IButtonProps extends TMergedHTMLAttributes {
|
|
|
25
27
|
* @default default
|
|
26
28
|
*/
|
|
27
29
|
type?: TButtonType;
|
|
30
|
+
|
|
28
31
|
/**
|
|
29
32
|
* The href of the button. If provided, the button will be rendered as an anchor (`<a>`) tag.
|
|
30
33
|
*/
|
|
31
34
|
href?: string;
|
|
35
|
+
|
|
32
36
|
/**
|
|
33
37
|
* The HTML type of the button. Note that this is different from the `type`.
|
|
34
38
|
* See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
|
|
35
39
|
*/
|
|
36
40
|
htmlType?: HTMLButtonElement['type'];
|
|
41
|
+
|
|
37
42
|
/**
|
|
38
43
|
* The size of the button. `middle` is strongly recommended due to the Akinon design system.
|
|
39
44
|
* Do not use this prop except for special cases.
|
|
40
45
|
* @default middle
|
|
41
46
|
*/
|
|
42
47
|
size?: 'middle' | 'small';
|
|
48
|
+
|
|
43
49
|
/**
|
|
44
50
|
* onClick handler.
|
|
45
51
|
* @param event
|
|
46
52
|
* @returns
|
|
47
53
|
*/
|
|
48
54
|
onClick?: (event: React.MouseEvent) => void;
|
|
55
|
+
|
|
49
56
|
/**
|
|
50
57
|
* The icon name of the button. Only icons from `akinon/icons` are supported.
|
|
51
58
|
* If there is no icon which you want to use, please open an issue.
|
|
52
59
|
*/
|
|
53
60
|
icon?: IconName;
|
|
61
|
+
|
|
54
62
|
/**
|
|
55
63
|
* The position of the icon. Only applicable when icon is defined.
|
|
56
64
|
* @default start
|
|
57
65
|
*/
|
|
58
66
|
iconPosition?: icon extends IconName ? 'start' | 'end' : never;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* The size of the icon. Only applicable when icon is defined.
|
|
70
|
+
* @default 12
|
|
71
|
+
*/
|
|
72
|
+
iconSize?: number;
|
|
59
73
|
/**
|
|
60
74
|
* Whether the button is in disabled state.
|
|
61
75
|
* @default false
|
|
62
76
|
*/
|
|
63
77
|
disabled?: boolean;
|
|
78
|
+
|
|
64
79
|
/**
|
|
65
80
|
* Whether the button is in loading state. If delay is provided, the loading state will be shown after the delay in ms.
|
|
66
81
|
* @default false
|
|
@@ -70,33 +85,43 @@ export interface IButtonProps extends TMergedHTMLAttributes {
|
|
|
70
85
|
| {
|
|
71
86
|
delay?: number;
|
|
72
87
|
};
|
|
88
|
+
|
|
73
89
|
/**
|
|
74
90
|
* Whether the button is ghost.
|
|
75
91
|
* Recommended for use with `icon` prop without text due to the Akinon design system.
|
|
76
92
|
* @default false
|
|
77
93
|
*/
|
|
78
94
|
ghost?: boolean;
|
|
95
|
+
|
|
79
96
|
/**
|
|
80
97
|
* Whether the button is danger.
|
|
81
98
|
* @default false
|
|
82
99
|
*/
|
|
83
100
|
danger?: boolean;
|
|
101
|
+
|
|
84
102
|
/**
|
|
85
103
|
* Whether the button is block which means it will take the full width of its container.
|
|
86
104
|
* @default false
|
|
87
105
|
*/
|
|
88
106
|
block?: boolean;
|
|
107
|
+
|
|
89
108
|
/**
|
|
90
109
|
* The children of the button. `string` is strongly recommended due to the Akinon design system.
|
|
91
110
|
*/
|
|
92
111
|
children?: React.ReactNode;
|
|
112
|
+
|
|
93
113
|
/**
|
|
94
114
|
* The data attributes of the button.
|
|
95
115
|
*/
|
|
96
116
|
[key: `data-${string}`]: string;
|
|
117
|
+
|
|
97
118
|
/**
|
|
98
119
|
* Never use this prop. Akinon design system does not allow custom styles.
|
|
99
120
|
* @ignore
|
|
100
121
|
*/
|
|
101
122
|
style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
|
|
123
|
+
/**
|
|
124
|
+
* The tooltip of the button.
|
|
125
|
+
*/
|
|
126
|
+
tooltip?: string | TooltipProps;
|
|
102
127
|
}
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0J/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Icon } from '@akinon/icons';
|
|
2
2
|
import { useToken } from '@akinon/ui-theme';
|
|
3
|
+
import { Tooltip } from '@akinon/ui-tooltip';
|
|
3
4
|
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
4
5
|
import { Button as AntButton, ConfigProvider } from 'antd';
|
|
5
6
|
import React from 'react';
|
|
@@ -18,22 +19,24 @@ export const Button = (buttonProps) => {
|
|
|
18
19
|
const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
|
|
19
20
|
const { token, hashId } = useToken();
|
|
20
21
|
const buttonToken = token.Button;
|
|
22
|
+
const customTokens = theme.CustomTokens || {};
|
|
21
23
|
const useStyle = useStyleRegister({
|
|
22
24
|
token: token,
|
|
23
25
|
path: ['Button'],
|
|
24
26
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
27
|
theme: theme
|
|
26
28
|
}, () => {
|
|
27
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
29
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
28
30
|
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
|
|
31
|
+
const iconPrefixCls = `.${getPrefixCls()}-btn`;
|
|
29
32
|
// MARK: - Disabled
|
|
30
33
|
const disabledStyles = {
|
|
31
34
|
'&:disabled, &-disabled': {
|
|
32
35
|
backgroundColor: (_a = buttonToken.colorBgContainerDisabled) !== null && _a !== void 0 ? _a : token.colorBgContainerDisabled,
|
|
33
36
|
color: (_b = buttonToken.colorTextDisabled) !== null && _b !== void 0 ? _b : token.colorTextDisabled,
|
|
34
37
|
borderColor: buttonToken.borderColorDisabled,
|
|
35
|
-
cursor:
|
|
36
|
-
boxShadow:
|
|
38
|
+
cursor: customTokens.others.cursorNotAllowed,
|
|
39
|
+
boxShadow: customTokens.layout.displayNone
|
|
37
40
|
}
|
|
38
41
|
};
|
|
39
42
|
// END: Disabled
|
|
@@ -41,7 +44,10 @@ export const Button = (buttonProps) => {
|
|
|
41
44
|
// MARK: - All
|
|
42
45
|
[`${prefixCls}`]: {
|
|
43
46
|
['> *']: {
|
|
44
|
-
verticalAlign:
|
|
47
|
+
verticalAlign: customTokens.others.verticalAlignMiddle
|
|
48
|
+
},
|
|
49
|
+
['> span']: {
|
|
50
|
+
alignSelf: `${customTokens.layout.flexCenter} !important`
|
|
45
51
|
}
|
|
46
52
|
},
|
|
47
53
|
// END: All
|
|
@@ -50,10 +56,10 @@ export const Button = (buttonProps) => {
|
|
|
50
56
|
[`&:not(:disabled)${prefixCls}-sm`]: {
|
|
51
57
|
backgroundColor: buttonToken.defaultBgSm,
|
|
52
58
|
color: buttonToken.colorText,
|
|
53
|
-
borderColor:
|
|
59
|
+
borderColor: customTokens.others.colorTransparent,
|
|
54
60
|
'&:hover': {
|
|
55
61
|
backgroundColor: buttonToken.defaultBgSmHover,
|
|
56
|
-
borderColor:
|
|
62
|
+
borderColor: customTokens.others.colorTransparent,
|
|
57
63
|
color: buttonToken.colorTextHover
|
|
58
64
|
},
|
|
59
65
|
[`&${prefixCls}-dangerous`]: {
|
|
@@ -62,6 +68,9 @@ export const Button = (buttonProps) => {
|
|
|
62
68
|
color: buttonToken.colorErrorSMHover,
|
|
63
69
|
backgroundColor: buttonToken.colorErrorBgSMHover
|
|
64
70
|
}
|
|
71
|
+
},
|
|
72
|
+
['span']: {
|
|
73
|
+
lineHeight: 'normal !important'
|
|
65
74
|
}
|
|
66
75
|
}
|
|
67
76
|
},
|
|
@@ -75,10 +84,46 @@ export const Button = (buttonProps) => {
|
|
|
75
84
|
[`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
|
|
76
85
|
backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
|
|
77
86
|
borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
|
|
78
|
-
} }, disabledStyles)
|
|
87
|
+
} }, disabledStyles),
|
|
79
88
|
// END: Warning
|
|
89
|
+
// MARK: Icon
|
|
90
|
+
[`${prefixCls}-icon`]: {
|
|
91
|
+
['> *']: {
|
|
92
|
+
backgroundColor: customTokens.others.colorTransparent,
|
|
93
|
+
// Since this button is transparent, we are using success bg color for the icon.
|
|
94
|
+
color: (_j = buttonToken.colorSuccessBg) !== null && _j !== void 0 ? _j : token.colorSuccessBg,
|
|
95
|
+
verticalAlign: customTokens.others.verticalAlignMiddle,
|
|
96
|
+
'&:hover:not(:disabled)': {
|
|
97
|
+
color: (_k = buttonToken.colorSuccessBg) !== null && _k !== void 0 ? _k : token.colorSuccessBg
|
|
98
|
+
},
|
|
99
|
+
'&:active': {
|
|
100
|
+
boxShadow: customTokens.layout.displayNone
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
'&:disabled': {
|
|
104
|
+
opacity: 0.4
|
|
105
|
+
},
|
|
106
|
+
[`&${iconPrefixCls}-dangerous > *`]: {
|
|
107
|
+
color: 'red',
|
|
108
|
+
'&:hover:not(:disabled)': {
|
|
109
|
+
color: (_l = buttonToken.colorErrorHover) !== null && _l !== void 0 ? _l : token.colorErrorHover
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
// END: Icon
|
|
80
114
|
};
|
|
81
115
|
});
|
|
82
|
-
|
|
83
|
-
|
|
116
|
+
const renderButton = () => {
|
|
117
|
+
var _a;
|
|
118
|
+
return (React.createElement(AntButton, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (React.createElement(Icon, { icon: buttonProps.icon, size: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
|
|
119
|
+
};
|
|
120
|
+
// If tooltip prop is provided, wrap the button with Tooltip
|
|
121
|
+
if (buttonProps.tooltip) {
|
|
122
|
+
const tooltipProps = typeof buttonProps.tooltip === 'string'
|
|
123
|
+
? { title: buttonProps.tooltip }
|
|
124
|
+
: buttonProps.tooltip;
|
|
125
|
+
return useStyle(React.createElement(Tooltip, Object.assign({}, tooltipProps), renderButton()));
|
|
126
|
+
}
|
|
127
|
+
// If no tooltip, return the button as is
|
|
128
|
+
return useStyle(renderButton());
|
|
84
129
|
};
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { IconName } from '@akinon/icons';
|
|
2
2
|
import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
|
|
3
|
+
import { TooltipProps } from '@akinon/ui-tooltip';
|
|
3
4
|
|
|
4
5
|
// TODO: contribute antd to extend the types properly
|
|
5
6
|
export type TButtonType =
|
|
@@ -8,7 +9,8 @@ export type TButtonType =
|
|
|
8
9
|
| 'text'
|
|
9
10
|
| 'link'
|
|
10
11
|
| 'success'
|
|
11
|
-
| 'warning'
|
|
12
|
+
| 'warning'
|
|
13
|
+
| 'icon';
|
|
12
14
|
|
|
13
15
|
type TMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
|
|
14
16
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
@@ -25,42 +27,55 @@ export interface IButtonProps extends TMergedHTMLAttributes {
|
|
|
25
27
|
* @default default
|
|
26
28
|
*/
|
|
27
29
|
type?: TButtonType;
|
|
30
|
+
|
|
28
31
|
/**
|
|
29
32
|
* The href of the button. If provided, the button will be rendered as an anchor (`<a>`) tag.
|
|
30
33
|
*/
|
|
31
34
|
href?: string;
|
|
35
|
+
|
|
32
36
|
/**
|
|
33
37
|
* The HTML type of the button. Note that this is different from the `type`.
|
|
34
38
|
* See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
|
|
35
39
|
*/
|
|
36
40
|
htmlType?: HTMLButtonElement['type'];
|
|
41
|
+
|
|
37
42
|
/**
|
|
38
43
|
* The size of the button. `middle` is strongly recommended due to the Akinon design system.
|
|
39
44
|
* Do not use this prop except for special cases.
|
|
40
45
|
* @default middle
|
|
41
46
|
*/
|
|
42
47
|
size?: 'middle' | 'small';
|
|
48
|
+
|
|
43
49
|
/**
|
|
44
50
|
* onClick handler.
|
|
45
51
|
* @param event
|
|
46
52
|
* @returns
|
|
47
53
|
*/
|
|
48
54
|
onClick?: (event: React.MouseEvent) => void;
|
|
55
|
+
|
|
49
56
|
/**
|
|
50
57
|
* The icon name of the button. Only icons from `akinon/icons` are supported.
|
|
51
58
|
* If there is no icon which you want to use, please open an issue.
|
|
52
59
|
*/
|
|
53
60
|
icon?: IconName;
|
|
61
|
+
|
|
54
62
|
/**
|
|
55
63
|
* The position of the icon. Only applicable when icon is defined.
|
|
56
64
|
* @default start
|
|
57
65
|
*/
|
|
58
66
|
iconPosition?: icon extends IconName ? 'start' | 'end' : never;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* The size of the icon. Only applicable when icon is defined.
|
|
70
|
+
* @default 12
|
|
71
|
+
*/
|
|
72
|
+
iconSize?: number;
|
|
59
73
|
/**
|
|
60
74
|
* Whether the button is in disabled state.
|
|
61
75
|
* @default false
|
|
62
76
|
*/
|
|
63
77
|
disabled?: boolean;
|
|
78
|
+
|
|
64
79
|
/**
|
|
65
80
|
* Whether the button is in loading state. If delay is provided, the loading state will be shown after the delay in ms.
|
|
66
81
|
* @default false
|
|
@@ -70,33 +85,43 @@ export interface IButtonProps extends TMergedHTMLAttributes {
|
|
|
70
85
|
| {
|
|
71
86
|
delay?: number;
|
|
72
87
|
};
|
|
88
|
+
|
|
73
89
|
/**
|
|
74
90
|
* Whether the button is ghost.
|
|
75
91
|
* Recommended for use with `icon` prop without text due to the Akinon design system.
|
|
76
92
|
* @default false
|
|
77
93
|
*/
|
|
78
94
|
ghost?: boolean;
|
|
95
|
+
|
|
79
96
|
/**
|
|
80
97
|
* Whether the button is danger.
|
|
81
98
|
* @default false
|
|
82
99
|
*/
|
|
83
100
|
danger?: boolean;
|
|
101
|
+
|
|
84
102
|
/**
|
|
85
103
|
* Whether the button is block which means it will take the full width of its container.
|
|
86
104
|
* @default false
|
|
87
105
|
*/
|
|
88
106
|
block?: boolean;
|
|
107
|
+
|
|
89
108
|
/**
|
|
90
109
|
* The children of the button. `string` is strongly recommended due to the Akinon design system.
|
|
91
110
|
*/
|
|
92
111
|
children?: React.ReactNode;
|
|
112
|
+
|
|
93
113
|
/**
|
|
94
114
|
* The data attributes of the button.
|
|
95
115
|
*/
|
|
96
116
|
[key: `data-${string}`]: string;
|
|
117
|
+
|
|
97
118
|
/**
|
|
98
119
|
* Never use this prop. Akinon design system does not allow custom styles.
|
|
99
120
|
* @ignore
|
|
100
121
|
*/
|
|
101
122
|
style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
|
|
123
|
+
/**
|
|
124
|
+
* The tooltip of the button.
|
|
125
|
+
*/
|
|
126
|
+
tooltip?: string | TooltipProps;
|
|
102
127
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A basic button react component.",
|
|
6
6
|
"type": "module",
|
|
@@ -10,16 +10,17 @@
|
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"antd": "5.
|
|
14
|
-
"@akinon/icons": "0.
|
|
15
|
-
"@akinon/ui-
|
|
13
|
+
"antd": "5.22.6",
|
|
14
|
+
"@akinon/icons": "1.0.1",
|
|
15
|
+
"@akinon/ui-tooltip": "1.0.1",
|
|
16
|
+
"@akinon/ui-theme": "1.0.1"
|
|
16
17
|
},
|
|
17
18
|
"devDependencies": {
|
|
18
19
|
"clean-package": "2.2.0",
|
|
19
20
|
"copyfiles": "^2.4.1",
|
|
20
21
|
"rimraf": "^5.0.5",
|
|
21
|
-
"typescript": "
|
|
22
|
-
"@akinon/typescript-config": "0.
|
|
22
|
+
"typescript": "*",
|
|
23
|
+
"@akinon/typescript-config": "1.0.1"
|
|
23
24
|
},
|
|
24
25
|
"peerDependencies": {
|
|
25
26
|
"react": ">=18",
|