Skip to content

Commit 2704a32

Browse files
wamujlbliorheber
wamujlb
authored and
liorheber
committed
Added new prop: selectedItemHeight (#130)
* Added new prop: selectedItemHeight * added selectedItemHeight to the tests
1 parent 3f00ad7 commit 2704a32

5 files changed

Lines changed: 351 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ class Example extends Component {
8989
| `wrapperClassName` | `String` | '' | wrapper class name - Used for customizing the style.
9090
| `height` | `number` | 400 | available items list height.
9191
| `itemHeight` | `number` | 40 | the height of an item in the list.
92+
| `selectedItemHeight` | `number` | `itemHeight` | the height of the selected item in the list.
9293
| `selectAllHeight` | `number` | `itemHeight` | the height of the selectAll component, by default will use the value of the itemHeight.
9394
| `maxSelectedItems` | `number` | | defines the maximum items that can be selected, overrides showSelectAll.
9495
| `filterFunction` | `function` | based on label | The function used to filter items based on the search query.

‎src/components/multi_select.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export class MultiSelect extends PureComponent {
3232
selectedItemRenderer: PropTypes.func,
3333
height: PropTypes.number,
3434
itemHeight: PropTypes.number,
35+
selectedItemHeight: PropTypes.number,
3536
selectAllHeight: PropTypes.number,
3637
loaderRenderer: PropTypes.any,
3738
maxSelectedItems: PropTypes.number,
@@ -76,6 +77,7 @@ export class MultiSelect extends PureComponent {
7677
showSearch,
7778
height,
7879
itemHeight,
80+
selectedItemHeight,
7981
selectAllHeight,
8082
showSelectAll,
8183
showSelectedItems,
@@ -149,7 +151,7 @@ export class MultiSelect extends PureComponent {
149151
clearAll={clearAll}
150152
messages={messages}
151153
selectedItems={selectedItems}
152-
itemHeight={itemHeight}
154+
itemHeight={selectedItemHeight || itemHeight}
153155
height={height}
154156
unselectItems={unselectItems}
155157
selectedItemRenderer={selectedItemRenderer}

‎stories/multi-select.stories.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ storiesOf("React Multi Select", module)
265265
itemRenderer={ListRendererItem}
266266
selectAllHeight={40}
267267
itemHeight={300}
268+
selectedItemHeight={40}
268269
items={utils.images}
269270
loading={boolean("Loading", false)}
270271
onChange={action("onChange")}

‎tests/components/__snapshots__/multi_select.spec.js.snap‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3959,6 +3959,338 @@ exports[`MultiSelect will pass selectAllHeight without itemHeight 1`] = `
39593959
</JssProvider>
39603960
`;
39613961

3962+
exports[`MultiSelect will pass selectedItemHeight 1`] = `
3963+
<JssProvider
3964+
generateClassName={[Function]}
3965+
jss={
3966+
Jss {
3967+
"generateClassName": [Function],
3968+
"id": 3,
3969+
"options": Object {
3970+
"Renderer": [Function],
3971+
"createGenerateClassName": [Function],
3972+
"plugins": Array [
3973+
Object {
3974+
"onCreateRule": [Function],
3975+
},
3976+
Object {
3977+
"onCreateRule": [Function],
3978+
},
3979+
Object {
3980+
"onCreateRule": [Function],
3981+
},
3982+
Object {
3983+
"onCreateRule": [Function],
3984+
},
3985+
Object {
3986+
"onCreateRule": [Function],
3987+
},
3988+
Object {
3989+
"onCreateRule": [Function],
3990+
},
3991+
Object {
3992+
"onCreateRule": [Function],
3993+
},
3994+
Object {
3995+
"onCreateRule": [Function],
3996+
},
3997+
Object {
3998+
"onCreateRule": [Function],
3999+
},
4000+
Object {
4001+
"onCreateRule": [Function],
4002+
"onProcessRule": [Function],
4003+
},
4004+
Object {
4005+
"onCreateRule": [Function],
4006+
"onProcessStyle": [Function],
4007+
"onUpdate": [Function],
4008+
},
4009+
Object {
4010+
"onCreateRule": [Function],
4011+
"onProcessRule": [Function],
4012+
},
4013+
Object {
4014+
"onProcessStyle": [Function],
4015+
},
4016+
Object {
4017+
"onChangeValue": [Function],
4018+
"onProcessStyle": [Function],
4019+
},
4020+
Object {
4021+
"onChangeValue": [Function],
4022+
"onProcessStyle": [Function],
4023+
},
4024+
Object {
4025+
"onChangeValue": [Function],
4026+
"onProcessRule": [Function],
4027+
"onProcessStyle": [Function],
4028+
},
4029+
Object {
4030+
"onProcessStyle": [Function],
4031+
},
4032+
],
4033+
},
4034+
"plugins": PluginsRegistry {
4035+
"hooks": Object {
4036+
"onChangeValue": Array [
4037+
[Function],
4038+
[Function],
4039+
[Function],
4040+
],
4041+
"onCreateRule": Array [
4042+
[Function],
4043+
[Function],
4044+
[Function],
4045+
[Function],
4046+
[Function],
4047+
[Function],
4048+
[Function],
4049+
[Function],
4050+
[Function],
4051+
[Function],
4052+
[Function],
4053+
[Function],
4054+
],
4055+
"onProcessRule": Array [
4056+
[Function],
4057+
[Function],
4058+
[Function],
4059+
],
4060+
"onProcessSheet": Array [],
4061+
"onProcessStyle": Array [
4062+
[Function],
4063+
[Function],
4064+
[Function],
4065+
[Function],
4066+
[Function],
4067+
[Function],
4068+
],
4069+
"onUpdate": Array [
4070+
[Function],
4071+
],
4072+
},
4073+
},
4074+
"version": "9.8.7",
4075+
}
4076+
}
4077+
>
4078+
<div
4079+
className="wrapper"
4080+
style={
4081+
Object {
4082+
"height": 400,
4083+
}
4084+
}
4085+
>
4086+
<SourceList
4087+
calculatedHeight={315}
4088+
disabled={false}
4089+
filterItems={undefined}
4090+
filteredItems={Array []}
4091+
getList={undefined}
4092+
isAllSelected={false}
4093+
itemHeight={40}
4094+
itemRenderer={[Function]}
4095+
listRenderer={[Function]}
4096+
messages={Object {}}
4097+
noItemsRenderer={[Function]}
4098+
searchIcon={undefined}
4099+
searchRenderer={[Function]}
4100+
searchValue={undefined}
4101+
selectAllHeight={undefined}
4102+
selectAllItems={undefined}
4103+
selectAllRenderer={[Function]}
4104+
selectItem={undefined}
4105+
selectedIds={Array []}
4106+
showSearch={true}
4107+
showSelectAll={true}
4108+
withGrouping={false}
4109+
/>
4110+
<DestinationList
4111+
clearAll={undefined}
4112+
height={400}
4113+
itemHeight={60}
4114+
listRenderer={[Function]}
4115+
messages={Object {}}
4116+
noItemsRenderer={[Function]}
4117+
selectedIds={Array []}
4118+
selectedItemRenderer={[Function]}
4119+
selectedItems={Array []}
4120+
selectionStatusRenderer={[Function]}
4121+
unselectItems={undefined}
4122+
withGrouping={false}
4123+
/>
4124+
</div>
4125+
</JssProvider>
4126+
`;
4127+
4128+
exports[`MultiSelect will pass selectedItemHeight 2`] = `
4129+
<JssProvider
4130+
generateClassName={[Function]}
4131+
jss={
4132+
Jss {
4133+
"generateClassName": [Function],
4134+
"id": 3,
4135+
"options": Object {
4136+
"Renderer": [Function],
4137+
"createGenerateClassName": [Function],
4138+
"plugins": Array [
4139+
Object {
4140+
"onCreateRule": [Function],
4141+
},
4142+
Object {
4143+
"onCreateRule": [Function],
4144+
},
4145+
Object {
4146+
"onCreateRule": [Function],
4147+
},
4148+
Object {
4149+
"onCreateRule": [Function],
4150+
},
4151+
Object {
4152+
"onCreateRule": [Function],
4153+
},
4154+
Object {
4155+
"onCreateRule": [Function],
4156+
},
4157+
Object {
4158+
"onCreateRule": [Function],
4159+
},
4160+
Object {
4161+
"onCreateRule": [Function],
4162+
},
4163+
Object {
4164+
"onCreateRule": [Function],
4165+
},
4166+
Object {
4167+
"onCreateRule": [Function],
4168+
"onProcessRule": [Function],
4169+
},
4170+
Object {
4171+
"onCreateRule": [Function],
4172+
"onProcessStyle": [Function],
4173+
"onUpdate": [Function],
4174+
},
4175+
Object {
4176+
"onCreateRule": [Function],
4177+
"onProcessRule": [Function],
4178+
},
4179+
Object {
4180+
"onProcessStyle": [Function],
4181+
},
4182+
Object {
4183+
"onChangeValue": [Function],
4184+
"onProcessStyle": [Function],
4185+
},
4186+
Object {
4187+
"onChangeValue": [Function],
4188+
"onProcessStyle": [Function],
4189+
},
4190+
Object {
4191+
"onChangeValue": [Function],
4192+
"onProcessRule": [Function],
4193+
"onProcessStyle": [Function],
4194+
},
4195+
Object {
4196+
"onProcessStyle": [Function],
4197+
},
4198+
],
4199+
},
4200+
"plugins": PluginsRegistry {
4201+
"hooks": Object {
4202+
"onChangeValue": Array [
4203+
[Function],
4204+
[Function],
4205+
[Function],
4206+
],
4207+
"onCreateRule": Array [
4208+
[Function],
4209+
[Function],
4210+
[Function],
4211+
[Function],
4212+
[Function],
4213+
[Function],
4214+
[Function],
4215+
[Function],
4216+
[Function],
4217+
[Function],
4218+
[Function],
4219+
[Function],
4220+
],
4221+
"onProcessRule": Array [
4222+
[Function],
4223+
[Function],
4224+
[Function],
4225+
],
4226+
"onProcessSheet": Array [],
4227+
"onProcessStyle": Array [
4228+
[Function],
4229+
[Function],
4230+
[Function],
4231+
[Function],
4232+
[Function],
4233+
[Function],
4234+
],
4235+
"onUpdate": Array [
4236+
[Function],
4237+
],
4238+
},
4239+
},
4240+
"version": "9.8.7",
4241+
}
4242+
}
4243+
>
4244+
<div
4245+
className="wrapper"
4246+
style={
4247+
Object {
4248+
"height": 400,
4249+
}
4250+
}
4251+
>
4252+
<SourceList
4253+
calculatedHeight={315}
4254+
disabled={false}
4255+
filterItems={undefined}
4256+
filteredItems={Array []}
4257+
getList={undefined}
4258+
isAllSelected={false}
4259+
itemHeight={40}
4260+
itemRenderer={[Function]}
4261+
listRenderer={[Function]}
4262+
messages={Object {}}
4263+
noItemsRenderer={[Function]}
4264+
searchIcon={undefined}
4265+
searchRenderer={[Function]}
4266+
searchValue={undefined}
4267+
selectAllHeight={undefined}
4268+
selectAllItems={undefined}
4269+
selectAllRenderer={[Function]}
4270+
selectItem={undefined}
4271+
selectedIds={Array []}
4272+
showSearch={true}
4273+
showSelectAll={true}
4274+
withGrouping={false}
4275+
/>
4276+
<DestinationList
4277+
clearAll={undefined}
4278+
height={400}
4279+
itemHeight={60}
4280+
listRenderer={[Function]}
4281+
messages={Object {}}
4282+
noItemsRenderer={[Function]}
4283+
selectedIds={Array []}
4284+
selectedItemRenderer={[Function]}
4285+
selectedItems={Array []}
4286+
selectionStatusRenderer={[Function]}
4287+
unselectItems={undefined}
4288+
withGrouping={false}
4289+
/>
4290+
</div>
4291+
</JssProvider>
4292+
`;
4293+
39624294
exports[`MultiSelect with generateClassName 1`] = `
39634295
<JssProvider
39644296
generateClassName={[Function]}

0 commit comments

Comments
 (0)