haya-select 1.0.24 → 1.0.26

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 +51 -46
  3. package/src/select/style.scss +28 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "haya-select",
3
- "version": "1.0.24",
3
+ "version": "1.0.26",
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,55 @@ 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>
225
+ <div className="haya-select-chevron-down-container">
226
+ <i className="fa fa-chevron-down" />
227
+ </div>
223
228
  </div>
224
229
  <div ref={endOfSelectRef} />
225
230
  </div>
package/src/select/style.scss CHANGED
@@ -2,6 +2,16 @@
2
2
  .haya-select-current-selected {
3
3
  display: flex;
4
4
  flex-wrap: wrap;
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;
5
15
  background-color: #fff;
6
16
  border: 1px solid #999;
7
17
  color: #000;
@@ -9,26 +19,32 @@
9
19
  padding-top: 5px;
10
20
  padding-bottom: 5px;
11
21
  padding-left: 5px;
22
+ }
12
23
 
13
- &[data-opened="false"] {
14
- border-radius: 4px;
15
- }
24
+ .haya-select-chevron-down-container {
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ height: 100%;
29
+ margin-right: 8px;
30
+ margin-left: auto;
31
+ }
16
32
 
17
- &[data-opened="true"][data-options-placement="above"] {
18
- border-radius: 0 0 4px 4px;
19
- }
33
+ &[data-opened="false"] .haya-select-container {
34
+ border-radius: 4px;
35
+ }
20
36
 
21
- &[data-opened="true"][data-options-placement="below"] {
22
- border-radius: 4px 4px 0 0;
23
- }
37
+ &[data-opened="true"][data-options-placement="above"] .haya-select-container {
38
+ border-radius: 0 0 4px 4px;
39
+ }
24
40
 
25
- .current-option {
26
- margin-right: 6px;
27
- }
41
+ &[data-opened="true"][data-options-placement="below"] .haya-select-container {
42
+ border-radius: 4px 4px 0 0;
28
43
  }
29
44
  }
30
45
 
31
46
  .haya-select-search-text-input {
47
+ width: 100%;
32
48
  border: 0;
33
49
  outline: none;
34
50
  padding: 0;