@steroidsjs/bootstrap 3.0.15 → 3.0.16

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.
Files changed (4) hide show
  1. package/form/AutoCompleteField/AutoCompleteFieldView.js +12 -6
  2. package/form/AutoCompleteField/AutoCompleteFieldView.scss +51 -4
  3. package/form/InputField/InputFieldView.js +1 -1
  4. package/package.json +2 -2
package/form/AutoCompleteField/AutoCompleteFieldView.js CHANGED
@@ -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("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onClick: function (e) {
100
- e.preventDefault();
101
- props.onOpen();
102
- }, onChange: function (e) { return props.inputProps.onChange(e.target.value); }, placeholder: props.placeholder, disabled: props.disabled, required: props.required })),
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"], { type: 'textSm', content: __('Nothing was found'), className: bem.element('nothing') })))))));
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;
package/form/AutoCompleteField/AutoCompleteFieldView.scss CHANGED
@@ -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
  }
package/form/InputField/InputFieldView.js CHANGED
@@ -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: "cross_8x8", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
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.15",
3
+ "version": "3.0.16",
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.21",
38
+ "@steroidsjs/core": "3.0.23",
39
39
  "@steroidsjs/eslint-config": "^2.1.6",
40
40
  "@types/enzyme": "^3.10.8",
41
41
  "@types/googlemaps": "^3.43.3",