Skip to content

Commit 095f8b9

Browse files
sebinsuasebinsua
committed
fix: render prop should be passed in
1 parent fb592ad commit 095f8b9

File tree

4 files changed

+188
-3
lines changed

4 files changed

+188
-3
lines changed

‎src/withLogic.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,11 @@ function withLogic(Template = ChoicesDisplay) {
144144
typeof this.props.render === 'function' ||
145145
typeof this.props.children === 'function'
146146
) {
147-
children = withRenderProp(templateProps)
147+
children = withRenderProp({
148+
...templateProps,
149+
render: this.props.render,
150+
children: this.props.children
151+
})
148152
} else if (Template) {
149153
children = <Template {...templateProps} />
150154
}

‎stories/index.js

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from 'react'
22
import { storiesOf } from '@storybook/react'
33
import { action } from '@storybook/addon-actions'
44

5+
import cx from 'classnames-es'
56
import Choices from '..'
67

7-
import './styles.css'
8+
import './styles/basic.css'
9+
import './styles/slider-like.css'
810

911
const choices = storiesOf('Choices', module)
1012

@@ -13,7 +15,7 @@ choices.add('with default template', () => (
1315
<input type="text" name="thing_1" value="unrelated" />
1416
<input type="text" name="thing_2" value="fields" />
1517
<Choices
16-
name="speed"
18+
name="basic_speed"
1719
availableStates={[
1820
{ value: '<S', settable: false },
1921
{ value: 'S' },
@@ -27,3 +29,67 @@ choices.add('with default template', () => (
2729
/>
2830
</div>
2931
))
32+
33+
choices.add('with slider-like template', () => (
34+
<div className="choices__container">
35+
<input type="text" name="thing_1" value="unrelated" />
36+
<input type="text" name="thing_2" value="fields" />
37+
<Choices
38+
name="slider_like_speed"
39+
availableStates={[
40+
{ value: '<S', settable: false },
41+
{ value: 'S' },
42+
{ value: 'S<M', settable: false },
43+
{ value: 'M' },
44+
{ value: 'M<F', settable: false },
45+
{ value: 'F' },
46+
{ value: '>F', settable: false }
47+
]}
48+
defaultValue="M"
49+
>
50+
{({
51+
states,
52+
defaultValue,
53+
focusedValue,
54+
hoveredValue,
55+
selectedValue,
56+
setValue,
57+
hoverValue,
58+
previousValue,
59+
nextValue
60+
}) => (
61+
<div className="speed-choices-container">
62+
<div className="speed-choices">
63+
{states.map((state, idx) => (
64+
<div
65+
key={`choice-${idx}`}
66+
id={`choice-${state.value}`}
67+
onMouseOver={hoverValue.bind(null, state.value)}
68+
onClick={setValue.bind(null, state.value)}
69+
className={cx('speed-choice', {
70+
'speed-choice__not-settable': state.settable === false,
71+
'speed-choice__focused': state.value === focusedValue,
72+
'speed-choice__hovered': state.value === hoveredValue,
73+
'speed-choice__selected':
74+
state.value === (selectedValue || defaultValue)
75+
})}
76+
>
77+
<div className="speed-choice__input-container">
78+
<button
79+
tabIndex={state.value === selectedValue ? 0 : -1}
80+
className={cx('speed-choice__input', state.inputClassName)}
81+
>
82+
<span className="speed-choice__label">{state.value}</span>
83+
</button>
84+
</div>
85+
</div>
86+
))}
87+
</div>
88+
<div className="speed-choices-background">
89+
<div className="speed-choices-horizontal-bar" />
90+
</div>
91+
</div>
92+
)}
93+
</Choices>
94+
</div>
95+
))

‎stories/styles.css renamed to ‎stories/styles/basic.css

File renamed without changes.

‎stories/styles/slider-like.css

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
.speed-choices-container {
2+
position: relative;
3+
width: 120px;
4+
5+
padding: 5px; /* TODO: This is temporary... */
6+
}
7+
.speed-choices-background {
8+
position: absolute;
9+
10+
display: flex;
11+
z-index: -1;
12+
13+
height: 14px;
14+
width: 100%;
15+
}
16+
.speed-choices-horizontal-bar {
17+
align-self: center;
18+
background-color: lightgrey;
19+
display: block;
20+
z-index: -1;
21+
height: 2px;
22+
width: 100%;
23+
}
24+
25+
.speed-choices {
26+
position: absolute;
27+
display: flex;
28+
justify-content: space-between;
29+
width: 100%;
30+
}
31+
.speed-choice {
32+
display: flex;
33+
flex-direction: column;
34+
align-self: center;
35+
height: 100%;
36+
flex: 1 0 10%;
37+
38+
cursor: pointer;
39+
}
40+
.speed-choice__not-settable {
41+
visibility: hidden;
42+
cursor: default;
43+
}
44+
.speed-choice__input-container {
45+
display: flex;
46+
flex-direction: column;
47+
justify-content: center;
48+
}
49+
.speed-choice__input {
50+
align-self: center;
51+
background-color: #beccdc;
52+
border: none;
53+
border-radius: 4px;
54+
outline: none;
55+
padding: 0;
56+
cursor: pointer;
57+
58+
height: 4px;
59+
width: 4px;
60+
61+
margin-left: -2px;
62+
}
63+
.speed-choice__input:active {
64+
padding: 0;
65+
}
66+
.speed-choice:first-child {
67+
flex: 0 0 4px;
68+
}
69+
.speed-choice:first-child .speed-choice__input {
70+
align-self: flex-start;
71+
}
72+
.speed-choice:last-child {
73+
flex: 0 0 4px;
74+
}
75+
.speed-choice:last-child .speed-choice__input {
76+
align-self: flex-end;
77+
}
78+
79+
.speed-choice__label {
80+
display: none;
81+
}
82+
.speed-choice__hovered .speed-choice__input {
83+
border: 2px solid lightblue;
84+
border-radius: 8px;
85+
86+
height: 8px;
87+
width: 8px;
88+
89+
margin-left: -4px;
90+
}
91+
92+
.speed-choice__focused .speed-choice__input {
93+
display: inline-block;
94+
border: 2px solid lightgreen;
95+
}
96+
.speed-choice__input::-moz-focus-inner {
97+
border: 0;
98+
outline: none;
99+
}
100+
101+
.speed-choice__selected .speed-choice__input {
102+
background-color: red;
103+
border-radius: 14px;
104+
color: white;
105+
106+
height: 14px;
107+
width: 14px;
108+
109+
margin-left: -7px;
110+
}
111+
.speed-choice__selected .speed-choice__label {
112+
display: block;
113+
color: white;
114+
font-size: 8px;
115+
}

0 commit comments

Comments
 (0)