@steroidsjs/bootstrap 3.0.15 → 3.0.17
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.
|
@@ -77,6 +77,7 @@ var renderItem = function (item, props, bem) {
|
|
|
77
77
|
hasAdditionalText && (React.createElement("span", { className: bem.element('item-additional-text') }, item.additional.text))))));
|
|
78
78
|
};
|
|
79
79
|
function AutoCompleteFieldView(props) {
|
|
80
|
+
var _a;
|
|
80
81
|
var bem = (0, hooks_1.useBem)('AutoCompleteFieldView');
|
|
81
82
|
var renderItems = React.useCallback(function () {
|
|
82
83
|
if (!(0, isEmpty_1["default"])(props.categories)) {
|
|
@@ -94,15 +95,20 @@ function AutoCompleteFieldView(props) {
|
|
|
94
95
|
}, [bem, props]);
|
|
95
96
|
return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({
|
|
96
97
|
size: props.size,
|
|
97
|
-
opened: props.isOpened
|
|
98
|
+
opened: props.isOpened,
|
|
99
|
+
hasClearIcon: props.showClear && !props.disabled,
|
|
100
|
+
filled: !!props.inputProps.value,
|
|
101
|
+
disabled: props.disabled
|
|
98
102
|
}), props.className), style: props.style },
|
|
99
|
-
React.createElement("
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
+
React.createElement("div", { className: bem.element('input-wrapper') },
|
|
104
|
+
React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onClick: function (e) {
|
|
105
|
+
e.preventDefault();
|
|
106
|
+
props.onOpen();
|
|
107
|
+
}, onChange: function (e) { return props.inputProps.onChange(e.target.value); }, placeholder: props.placeholder, disabled: props.disabled, required: props.required })),
|
|
108
|
+
!props.disabled && props.showClear && !!props.inputProps.value && (React.createElement(content_1.Icon, { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
|
|
103
109
|
props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
|
|
104
110
|
React.createElement("div", { className: bem.element('list') }, !(0, isEmpty_1["default"])(props.items)
|
|
105
111
|
? renderItems()
|
|
106
|
-
: (React.createElement(Text_1["default"], {
|
|
112
|
+
: (React.createElement(Text_1["default"], { className: bem.element('nothing'), content: (_a = props.empty) !== null && _a !== void 0 ? _a : __('Ничего не найдено'), type: 'text' })))))));
|
|
107
113
|
}
|
|
108
114
|
exports["default"] = AutoCompleteFieldView;
|
|
@@ -22,8 +22,29 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
|
|
|
22
22
|
|
|
23
23
|
position: relative;
|
|
24
24
|
|
|
25
|
+
&__input-wrapper {
|
|
26
|
+
position: relative;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&_hasClearIcon {
|
|
32
|
+
#{$root}__input {
|
|
33
|
+
padding-right: 40px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&_filled {
|
|
38
|
+
#{$root}__icon-clear {
|
|
39
|
+
opacity: 1;
|
|
40
|
+
pointer-events: all;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
25
45
|
&__input {
|
|
26
46
|
width: 100%;
|
|
47
|
+
padding: 0 8px;
|
|
27
48
|
border: 1px solid variables.$element-border-color;
|
|
28
49
|
background-color: variables.$element-field-background-color;
|
|
29
50
|
color: variables.$text-color;
|
|
@@ -38,6 +59,36 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
|
|
|
38
59
|
}
|
|
39
60
|
}
|
|
40
61
|
|
|
62
|
+
&_disabled {
|
|
63
|
+
#{$root}__input {
|
|
64
|
+
background-color: variables.$element-background-color-disabled;
|
|
65
|
+
border-color: transparent;
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&__icon-clear {
|
|
71
|
+
svg > * {
|
|
72
|
+
stroke: variables.$text-color
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
width: 24px;
|
|
76
|
+
height: 24px;
|
|
77
|
+
position: absolute;
|
|
78
|
+
top: 50%;
|
|
79
|
+
right: 8px;
|
|
80
|
+
transform: translateY(-50%);
|
|
81
|
+
|
|
82
|
+
opacity: 0;
|
|
83
|
+
transition: opacity 150ms ease-in-out;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
|
|
86
|
+
&:focus {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
pointer-events: all;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
41
92
|
&__drop-down {
|
|
42
93
|
width: 100%;
|
|
43
94
|
top: 100%;
|
|
@@ -139,7 +190,6 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
|
|
|
139
190
|
line-height: variables.$line-height-lg;
|
|
140
191
|
|
|
141
192
|
#{$root}__input {
|
|
142
|
-
padding: 16px 8px;
|
|
143
193
|
height: variables.$input-height-lg;
|
|
144
194
|
border-radius: variables.$radius-large;
|
|
145
195
|
}
|
|
@@ -153,7 +203,6 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
|
|
|
153
203
|
padding: 16px 24px;
|
|
154
204
|
}
|
|
155
205
|
|
|
156
|
-
|
|
157
206
|
&__label {
|
|
158
207
|
font-size: variables.$font-size-base;
|
|
159
208
|
line-height: variables.$line-height-base;
|
|
@@ -166,7 +215,6 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
|
|
|
166
215
|
line-height: variables.$line-height-lg;
|
|
167
216
|
|
|
168
217
|
#{$root}__input {
|
|
169
|
-
padding: 11px 8px;
|
|
170
218
|
height: variables.$input-height-md;
|
|
171
219
|
border-radius: variables.$radius-large;
|
|
172
220
|
}
|
|
@@ -192,7 +240,6 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
|
|
|
192
240
|
line-height: variables.$line-height-lg;
|
|
193
241
|
|
|
194
242
|
#{$root}__input {
|
|
195
|
-
padding: 5px 8px;
|
|
196
243
|
height: variables.$input-height-sm;
|
|
197
244
|
border-radius: variables.$radius-small;
|
|
198
245
|
}
|
|
@@ -39,13 +39,16 @@ function FileFieldItemView(props) {
|
|
|
39
39
|
: props.title)); }, [bem, props.title, props.error, props.item.url, isWall]);
|
|
40
40
|
var renderProgressBar = React.useCallback(function () { return (React.createElement("div", { className: bem.element('progress-track') },
|
|
41
41
|
React.createElement("div", { className: bem.element('progress-bar'), style: { width: "".concat(props.progress.percent, "%") } }))); }, [bem, props.progress]);
|
|
42
|
-
var renderLoadingState = React.useCallback(function () {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
42
|
+
var renderLoadingState = React.useCallback(function () {
|
|
43
|
+
var _a;
|
|
44
|
+
return (React.createElement("div", { className: bem.element('left') },
|
|
45
|
+
React.createElement("div", { className: bem.element('icon-wrapper', 'loading') },
|
|
46
|
+
React.createElement(Icon_1["default"], { className: bem.element('icon-loading'), name: 'loading_default' })),
|
|
47
|
+
React.createElement("div", { className: bem.element('content') },
|
|
48
|
+
React.createElement("span", { className: bem.element('title', 'loading') }, props.title),
|
|
49
|
+
renderProgressBar(),
|
|
50
|
+
React.createElement("span", { className: bem.element('loading-text') }, (_a = props.loadingText) !== null && _a !== void 0 ? _a : __('Uploading...')))));
|
|
51
|
+
}, [bem, props.loadingText, props.title, renderProgressBar]);
|
|
49
52
|
var renderFileItem = React.useCallback(function () { return (React.createElement("div", { className: bem.element('left') },
|
|
50
53
|
props.image
|
|
51
54
|
? (React.createElement("div", { className: bem.element('image'), style: { backgroundImage: "url(".concat(props.image.url, ")") } }))
|
|
@@ -51,6 +51,6 @@ function FileFieldView(props) {
|
|
|
51
51
|
'is-invalid': !!props.errors
|
|
52
52
|
}), props.className) },
|
|
53
53
|
React.createElement(ButtonView, __assign({ className: bem.element('button', { isWall: isWall }), icon: isWall ? 'add' : 'export' }, props.buttonProps)),
|
|
54
|
-
React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid, filesLayout: props.filesLayout, imagesOnly: props.imagesOnly, customRemoveIcon: props.customRemoveIcon }, item, props.itemProps))); }))));
|
|
54
|
+
React.createElement("div", { className: bem(bem.element('files')) }, props.items.map(function (item) { return (React.createElement(FileItemView, __assign({ key: item.uid, filesLayout: props.filesLayout, imagesOnly: props.imagesOnly, customRemoveIcon: props.customRemoveIcon, loadingText: props.loadingText }, item, props.itemProps))); }))));
|
|
55
55
|
}
|
|
56
56
|
exports["default"] = FileFieldView;
|
|
@@ -72,7 +72,7 @@ function InputFieldView(props) {
|
|
|
72
72
|
: (React.createElement("input", __assign({ className: bem(bem.element('input', {
|
|
73
73
|
size: props.size
|
|
74
74
|
})) }, props.inputProps, { type: props.inputProps.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
|
|
75
|
-
!props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name:
|
|
75
|
+
!props.disabled && props.showClear && !props.maskProps && !!props.inputProps.value && (React.createElement(Icon_1["default"], { name: 'cross_8x8', className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
|
|
76
76
|
props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
|
|
77
77
|
props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));
|
|
78
78
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steroidsjs/bootstrap",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.17",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "Vladimir Kozhin <hello@kozhindev.com>",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react-use": "^17.4.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@steroidsjs/core": "3.0.
|
|
38
|
+
"@steroidsjs/core": "3.0.24",
|
|
39
39
|
"@steroidsjs/eslint-config": "^2.1.6",
|
|
40
40
|
"@types/enzyme": "^3.10.8",
|
|
41
41
|
"@types/googlemaps": "^3.43.3",
|