haya-select 1.0.25 → 1.0.27

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/select/index.jsx +50 -47
  3. package/src/select/style.scss +24 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "haya-select",
3
- "version": "1.0.25",
3
+ "version": "1.0.27",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/select/index.jsx CHANGED
@@ -166,6 +166,8 @@ export default class HayaSelect extends React.PureComponent {
166
166
  <div
167
167
  className={classNames("haya-select", className)}
168
168
  data-id={idForComponent(this)}
169
+ data-opened={opened}
170
+ data-options-placement={optionsPlacement}
169
171
  data-toggles={Boolean(toggleOptions)}
170
172
  {...restProps}
171
173
  >
@@ -174,52 +176,52 @@ export default class HayaSelect extends React.PureComponent {
174
176
  {this.optionsContainer()}
175
177
  </BodyPortal>
176
178
  }
177
- <div
178
- className="haya-select-current-selected"
179
- data-opened={opened}
180
- data-options-placement={optionsPlacement}
181
- onClick={onSelectClicked}
182
- ref={currentSelectedRef}
183
- >
184
- {opened &&
185
- <input
186
- className="haya-select-search-text-input"
187
- onChange={onSearchTextInputChangedDebounced}
188
- placeholder={I18n.t("haya_select.search_dot_dot_dot")} type="text"
189
- ref={this.t.searchTextInputRef}
190
- />
191
- }
192
- {!opened &&
193
- <>
194
- {currentOptions.length == 0 &&
195
- <div style={{color: "grey"}}>
196
- {placeholder || I18n.t("haya_select.nothing_selected")}
197
- </div>
198
- }
199
- {currentOptions.map((currentOption) =>
200
- <div className="current-option" key={currentOption.key || `current-value-${currentOption.value}`}>
201
- {currentOption.type == "group" &&
202
- <div style={{fontWeight: "bold"}}>
203
- {currentOption.text}
204
- </div>
205
- }
206
- {currentOption.type != "group" &&
207
- <>
208
- {nameForComponentWithMultiple(this) &&
209
- <input
210
- id={idForComponent(this)}
211
- name={nameForComponentWithMultiple(this)}
212
- type="hidden"
213
- value={digg(currentOption, "value")}
214
- />
215
- }
216
- {this.presentOption(currentOption)}
217
- </>
218
- }
219
- </div>
220
- )}
221
- </>
222
- }
179
+ <div className="haya-select-container" onClick={onSelectClicked}>
180
+ <div
181
+ className="haya-select-current-selected"
182
+ ref={currentSelectedRef}
183
+ >
184
+ {opened &&
185
+ <input
186
+ className="haya-select-search-text-input"
187
+ onChange={onSearchTextInputChangedDebounced}
188
+ placeholder={I18n.t("haya_select.search_dot_dot_dot")}
189
+ type="text"
190
+ ref={this.t.searchTextInputRef}
191
+ />
192
+ }
193
+ {!opened &&
194
+ <>
195
+ {currentOptions.length == 0 &&
196
+ <div style={{color: "grey"}}>
197
+ {placeholder || I18n.t("haya_select.nothing_selected")}
198
+ </div>
199
+ }
200
+ {currentOptions.map((currentOption) =>
201
+ <div className="current-option" key={currentOption.key || `current-value-${currentOption.value}`}>
202
+ {currentOption.type == "group" &&
203
+ <div style={{fontWeight: "bold"}}>
204
+ {currentOption.text}
205
+ </div>
206
+ }
207
+ {currentOption.type != "group" &&
208
+ <>
209
+ {nameForComponentWithMultiple(this) &&
210
+ <input
211
+ id={idForComponent(this)}
212
+ name={nameForComponentWithMultiple(this)}
213
+ type="hidden"
214
+ value={digg(currentOption, "value")}
215
+ />
216
+ }
217
+ {this.presentOption(currentOption)}
218
+ </>
219
+ }
220
+ </div>
221
+ )}
222
+ </>
223
+ }
224
+ </div>
223
225
  <div className="haya-select-chevron-down-container">
224
226
  <i className="fa fa-chevron-down" />
225
227
  </div>
@@ -554,7 +556,8 @@ export default class HayaSelect extends React.PureComponent {
554
556
  {toggleOptions && (currentValue.value in toggled) &&
555
557
  <i className={`fa fa-fw fa-${icon}`} />
556
558
  }
557
- {currentValue.text}
559
+ {currentValue.content}
560
+ {!currentValue.content && currentValue.text}
558
561
  {("html" in currentValue) &&
559
562
  <div dangerouslySetInnerHTML={{__html: digg(currentValue, "html")}} />
560
563
  }
package/src/select/style.scss CHANGED
@@ -3,6 +3,15 @@
3
3
  display: flex;
4
4
  flex-wrap: wrap;
5
5
  position: relative;
6
+
7
+ .current-option {
8
+ margin-right: 6px;
9
+ }
10
+ }
11
+
12
+ .haya-select-container {
13
+ display: flex;
14
+ align-items: center;
6
15
  background-color: #fff;
7
16
  border: 1px solid #999;
8
17
  color: #000;
@@ -10,36 +19,32 @@
10
19
  padding-top: 5px;
11
20
  padding-bottom: 5px;
12
21
  padding-left: 5px;
13
-
14
- &[data-opened="false"] {
15
- border-radius: 4px;
16
- }
17
-
18
- &[data-opened="true"][data-options-placement="above"] {
19
- border-radius: 0 0 4px 4px;
20
- }
21
-
22
- &[data-opened="true"][data-options-placement="below"] {
23
- border-radius: 4px 4px 0 0;
24
- }
25
-
26
- .current-option {
27
- margin-right: 6px;
28
- }
29
22
  }
30
23
 
31
24
  .haya-select-chevron-down-container {
32
25
  display: flex;
33
26
  align-items: center;
34
27
  justify-content: center;
28
+ height: 100%;
29
+ margin-right: 8px;
30
+ margin-left: auto;
31
+ }
32
+
33
+ &[data-opened="false"] .haya-select-container {
34
+ border-radius: 4px;
35
+ }
36
+
37
+ &[data-opened="true"][data-options-placement="above"] .haya-select-container {
38
+ border-radius: 0 0 4px 4px;
39
+ }
35
40
 
36
- position: absolute;
37
- right: 20px;
38
- height: calc(100% - 33px);
41
+ &[data-opened="true"][data-options-placement="below"] .haya-select-container {
42
+ border-radius: 4px 4px 0 0;
39
43
  }
40
44
  }
41
45
 
42
46
  .haya-select-search-text-input {
47
+ width: 100%;
43
48
  border: 0;
44
49
  outline: none;
45
50
  padding: 0;