@rescui/button 0.14.1 → 0.15.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/lib/button.js +3 -7
- package/lib/button.p.module.css.js +29 -31
- package/lib/index.css +453 -762
- package/lib/public-api.p.css +305 -0
- package/lib/public-api.pcss +305 -0
- package/package.json +9 -9
package/lib/button.js
CHANGED
|
@@ -19,7 +19,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
|
|
|
19
19
|
import React, { useState, cloneElement, useRef, useEffect } from 'react';
|
|
20
20
|
import cn from 'classnames';
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
|
-
import {
|
|
22
|
+
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
23
23
|
import { LoadingIcon } from '@rescui/icons';
|
|
24
24
|
import { useResizeObserver } from '@rescui/use-resize-observer';
|
|
25
25
|
import styles from './button.p.module.css.js';
|
|
@@ -41,10 +41,6 @@ var SIZE_STYLES = {
|
|
|
41
41
|
m: styles.sizeM,
|
|
42
42
|
l: styles.sizeL
|
|
43
43
|
};
|
|
44
|
-
var ICON_POSITION_STYLES = {
|
|
45
|
-
left: styles.alignIconLeft,
|
|
46
|
-
right: styles.alignIconRight
|
|
47
|
-
};
|
|
48
44
|
|
|
49
45
|
var useForwardedRef = function useForwardedRef(ref) {
|
|
50
46
|
var innerRef = useRef(null);
|
|
@@ -104,7 +100,7 @@ function (_ref, forwardedRef) {
|
|
|
104
100
|
var singleLineBlockSize = parseInt(targetStyles.lineHeight, 10);
|
|
105
101
|
setMultiline(height > singleLineBlockSize);
|
|
106
102
|
});
|
|
107
|
-
var theme =
|
|
103
|
+
var theme = useThemeWithUndefined(themeFromProps);
|
|
108
104
|
var shiftedLeft = calculateShifted(shifted, 'left');
|
|
109
105
|
var shiftedRight = calculateShifted(shifted, 'right');
|
|
110
106
|
var shiftedTop = calculateShifted(shifted, 'top');
|
|
@@ -127,7 +123,7 @@ function (_ref, forwardedRef) {
|
|
|
127
123
|
var buttonSharedProps = {
|
|
128
124
|
href: href,
|
|
129
125
|
disabled: disabled,
|
|
130
|
-
className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size],
|
|
126
|
+
className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], (_cn = {}, _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.flatLeft, flat === 'left'), _defineProperty(_cn, styles.flatRight, flat === 'right'), _defineProperty(_cn, styles.highlighted, highlighted), _defineProperty(_cn, styles.withIcon, !!icon), _defineProperty(_cn, styles.withoutText, isWithoutText), _defineProperty(_cn, styles.shiftedLeft, shiftedLeft), _defineProperty(_cn, styles.shiftedRight, shiftedRight), _defineProperty(_cn, styles.shiftedTop, shiftedTop), _defineProperty(_cn, styles.shiftedBottom, shiftedBottom), _defineProperty(_cn, styles.multiline, multiline), _defineProperty(_cn, styles.allowMultiline, allowMultiline), _defineProperty(_cn, styles.busy, busy), _defineProperty(_cn, styles.busyOverlay, showBusyOverlay), _cn), className)
|
|
131
127
|
}; // Google Translate replaces TextNodes on page which is leading to a React error on manipulating buttonChildren e.g. when switching to the busy state.
|
|
132
128
|
// To prevent this we wrap text node in a span element which itself will not be replaced by Google Translate.
|
|
133
129
|
// More info here: https://github.com/facebook/react/issues/11538
|
|
@@ -1,34 +1,32 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"shiftedBottom": "_shiftedBottom_16uj6pb_568",
|
|
32
|
-
"icon": "_icon_16uj6pb_570"
|
|
2
|
+
"light": "_light_eycov8_6",
|
|
3
|
+
"dark": "_dark_eycov8_9",
|
|
4
|
+
"flatRight": "_flatRight_eycov8_13",
|
|
5
|
+
"flatLeft": "_flatLeft_eycov8_16",
|
|
6
|
+
"sizeXs": "_sizeXs_eycov8_20",
|
|
7
|
+
"sizeS": "_sizeS_eycov8_23",
|
|
8
|
+
"sizeM": "_sizeM_eycov8_26",
|
|
9
|
+
"sizeL": "_sizeL_eycov8_29",
|
|
10
|
+
"modeClassic": "_modeClassic_eycov8_33",
|
|
11
|
+
"modeRock": "_modeRock_eycov8_36",
|
|
12
|
+
"modeTransparent": "_modeTransparent_eycov8_39",
|
|
13
|
+
"modeOutline": "_modeOutline_eycov8_42",
|
|
14
|
+
"modeClear": "_modeClear_eycov8_45",
|
|
15
|
+
"alignIconLeft": "_alignIconLeft_eycov8_49",
|
|
16
|
+
"alignIconRight": "_alignIconRight_eycov8_52",
|
|
17
|
+
"main": "_main_eycov8_56",
|
|
18
|
+
"disabled": "_disabled_eycov8_141",
|
|
19
|
+
"busy": "_busy_eycov8_148",
|
|
20
|
+
"busyOverlay": "_busyOverlay_eycov8_152",
|
|
21
|
+
"allowMultiline": "_allowMultiline_eycov8_173",
|
|
22
|
+
"multiline": "_multiline_eycov8_177",
|
|
23
|
+
"withoutText": "_withoutText_eycov8_181",
|
|
24
|
+
"withIcon": "_withIcon_eycov8_197",
|
|
25
|
+
"icon": "_icon_eycov8_203",
|
|
26
|
+
"busyIcon": "_busyIcon_eycov8_217",
|
|
27
|
+
"shiftedLeft": "_shiftedLeft_eycov8_234",
|
|
28
|
+
"shiftedRight": "_shiftedRight_eycov8_237",
|
|
29
|
+
"shiftedTop": "_shiftedTop_eycov8_240",
|
|
30
|
+
"shiftedBottom": "_shiftedBottom_eycov8_243"
|
|
33
31
|
};
|
|
34
32
|
export { styles as default };
|