Skip to content
This repository was archived by the owner on May 15, 2022. It is now read-only.

Commit ffca55f

Browse files
clausclaus
committed
make form controls children of label to get rid of label for="id"
1 parent 9d6b075 commit ffca55f

File tree

6 files changed

+213
-174
lines changed

6 files changed

+213
-174
lines changed

‎src/Dat.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ class Dat extends React.Component {
1111
children: PropTypes.node.isRequired,
1212
onUpdate: PropTypes.func.isRequired,
1313
liveUpdate: PropTypes.bool,
14+
labelWidth: PropTypes.number,
1415
className: PropTypes.string,
1516
style: PropTypes.object,
16-
labelWidth: PropTypes.number,
1717
};
1818

1919
static defaultProps = {
2020
liveUpdate: true,
21+
labelWidth: 40,
2122
};
2223

23-
2424
constructor(props, context) {
2525
super(props, context);
2626
this.handleUpdateValue = this.handleUpdateValue.bind(this);
@@ -33,14 +33,15 @@ class Dat extends React.Component {
3333
}
3434

3535
renderChildren() {
36-
const { children, data, labelWidth } = this.props;
36+
const { children, data } = this.props;
3737
return React.Children.toArray(children).map((child, i) => {
3838
const liveUpdate = isUndefined(child.props.liveUpdate) ? this.props.liveUpdate : child.props.liveUpdate;
39+
const labelWidth = isUndefined(child.props.labelWidth) ? this.props.labelWidth : child.props.labelWidth;
3940
return cloneElement(child, {
4041
key: i,
4142
data,
4243
liveUpdate,
43-
_labelWidth: labelWidth,
44+
labelWidth,
4445
_onUpdateValue: this.handleUpdateValue,
4546
});
4647
});

‎src/Dat.scss

Lines changed: 71 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ $border-left-size: 5px;
4040
overflow: auto;
4141

4242
&.main {
43-
background: $background-color;
43+
background: $border-color;
4444

4545
&::-webkit-scrollbar {
4646
width: 5px;
@@ -60,48 +60,36 @@ $border-left-size: 5px;
6060
}
6161

6262
.cr {
63-
display: flex;
64-
border-bottom: 1px solid $border-color;
63+
display: block;
64+
background-color: $background-color;
6565
user-select: none;
6666

67+
&:not(:last-child) {
68+
margin-bottom: 1px;
69+
}
70+
6771
&.number {
6872
border-left: $border-left-size solid $number-color;
6973

74+
input[type=text] {
75+
color: $number-color;
76+
}
77+
7078
.slider {
71-
display: none;
79+
display: block;
7280
position: relative;
73-
width: 40%;
7481
border: 3px solid $background-color;
7582
border-right-width: 1px;
7683
background-color: $input-color;
77-
user-select: none;
84+
background-image: linear-gradient(90deg, $number-color, $number-color);
85+
background-size: 0% 100%;
86+
background-repeat: no-repeat;
7887
cursor: ew-resize;
7988

80-
&:hover, &.is-active {
81-
background-color: lighten($input-color, $hover-lighten);
82-
}
83-
84-
.slider-bar {
85-
position: absolute;
86-
top: 0;
87-
left: 0;
88-
width: 100%;
89-
height: 100%;
90-
background-color: $number-color;
91-
}
92-
}
93-
94-
input[type=text] {
95-
width: 60%;
96-
color: $number-color;
97-
}
98-
99-
&.has-slider {
100-
.slider {
89+
&:before {
90+
content: '\A0';
10191
display: block;
102-
}
103-
input[type=text] {
104-
width: 20%;
92+
padding: 2px;
10593
}
10694
}
10795
}
@@ -110,63 +98,60 @@ $border-left-size: 5px;
11098
border-left: $border-left-size solid $string-color;
11199

112100
input[type=text] {
113-
width: 60%;
114101
color: $string-color;
115102
}
116103
}
117104

118105
&.boolean {
106+
position: relative;
119107
border-left: $border-left-size solid $boolean-color;
120108

121-
label {
122-
width: calc(100% - 1.2em - 10px);
109+
.label-text {
110+
display: block;
111+
padding: 5px 0;
123112
}
124113

125-
.checkbox-wrapper {
126-
position: relative;
127-
width: calc(1.2em + 10px);
128-
129-
.checkbox,
130-
input[type=checkbox] {
131-
position: absolute;
132-
top: 0;
133-
left: 0;
134-
width: 100%;
135-
height: 100%;
136-
}
114+
.checkbox,
115+
input[type=checkbox] {
116+
position: absolute;
117+
top: 2px;
118+
right: 2px;
119+
bottom: 2px;
120+
width: 2.2em;
121+
}
137122

138-
.checkbox {
139-
display: flex;
140-
align-items: center;
141-
justify-content: center;
142-
border: 3px solid $background-color;
143-
background: $input-color;
144-
z-index: 0;
145-
left: auto;
146-
right: 0;
147-
148-
> .checkmark {
149-
display: none;
150-
width: 0.6em;
151-
height: 0.6em;
152-
stroke-width: 7px;
153-
stroke: lighten($boolean-color, 20%);
154-
}
123+
.checkbox {
124+
display: flex;
125+
align-items: center;
126+
justify-content: center;
127+
border: 3px solid $background-color;
128+
background: $input-color;
129+
z-index: 0;
130+
131+
> .checkmark {
132+
display: none;
133+
width: 0.7em;
134+
height: 0.7em;
135+
stroke-width: 7px;
136+
stroke: lighten($boolean-color, 20%);
155137
}
138+
}
156139

157-
input[type=checkbox] {
158-
margin: 0;
159-
opacity: 0;
160-
z-index: 1;
161-
}
140+
input[type=checkbox] {
141+
height: calc(100% - 4px);
142+
margin: 0;
143+
opacity: 0;
144+
z-index: 1;
145+
}
162146

163-
input[type=checkbox]:checked ~ .checkbox > .checkmark {
164-
display: block;
165-
}
147+
input[type=checkbox]:hover ~ .checkbox {
148+
background-color: lighten($input-color, $hover-lighten);
149+
}
166150

167-
input[type=checkbox]:hover ~ .checkbox {
168-
background-color: lighten($input-color, $hover-lighten);
169-
}
151+
input[type=checkbox]:checked ~ .checkbox {
152+
> .checkmark {
153+
display: block;
154+
}
170155
}
171156
}
172157

@@ -177,18 +162,25 @@ $border-left-size: 5px;
177162
background: #111;
178163
}
179164

180-
span {
165+
.label-text {
166+
display: block;
181167
width: 100%;
168+
padding: 7px 2px 7px 8px;
182169
cursor: pointer;
183170
}
184171
}
185172

186-
label, span {
187-
display: inline-block;
188-
align-items: center;
189-
min-width: 0;
173+
label {
174+
display: flex;
175+
align-items: baseline;
176+
justify-content: flex-start;
177+
width: 100%;
178+
padding: 2px 2px 2px 8px;
179+
}
180+
181+
.label-text {
190182
width: 40%;
191-
padding: 5px;
183+
min-width: 0;
192184
white-space: nowrap;
193185
overflow: hidden;
194186
text-overflow: ellipsis;

‎src/components/DatBoolean.jsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import result from 'lodash.result';
2-
import isFinite from 'lodash.isfinite';
32
import isString from 'lodash.isstring';
43
import React, { PropTypes } from 'react';
5-
import { createId } from '../utils';
64

75
class DatBoolean extends React.Component {
86

@@ -21,7 +19,6 @@ class DatBoolean extends React.Component {
2119

2220
componentWillMount() {
2321
this.setState({
24-
id: createId(),
2522
value: this.getValue()
2623
});
2724
}
@@ -49,23 +46,22 @@ class DatBoolean extends React.Component {
4946
}
5047

5148
render() {
52-
const { value, id } = this.state;
53-
const label = isString(this.props.label) ? this.props.label : this.props.path;
49+
const { path, label } = this.props;
50+
const labelText = isString(label) ? label : path;
5451
return (
5552
<li className="cr boolean">
56-
<label htmlFor={id}>{label}</label>
57-
<div className="checkbox-wrapper">
53+
<label>
54+
<span className="label-text">{labelText}</span>
5855
<input
5956
type="checkbox"
60-
id={id}
61-
checked={value}
57+
checked={this.state.value}
6258
onChange={this.handleChange} />
6359
<div className="checkbox">
6460
<svg className="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
6561
<path d="M0,0L50,50M50,0L0,50Z" />
6662
</svg>
6763
</div>
68-
</div>
64+
</label>
6965
</li>
7066
);
7167
}

‎src/components/DatButton.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { PropTypes } from 'react';
22

33
const DatButton = ({ label, onClick }) => (
4-
<li className="cr button">
5-
<span onClick={onClick}>{label}</span>
4+
<li className="cr button" onClick={onClick}>
5+
<span className="label-text">{label}</span>
66
</li>
77
);
88

0 commit comments

Comments
 (0)