Browse code

from input to range

Cinan Rakosnik authored on 29/04/2018 at 15:31:53
Showing 1 changed files
... ...
@@ -54,7 +54,7 @@ class Form extends React.PureComponent {
54 54
 
55 55
   addWorker = (setFieldValue, rows, allJobs) => {
56 56
     const jobs = [{
57
-      id: uuid(), name: allJobs[0], t: '', d: '', w: '', anc: []
57
+      id: uuid(), name: allJobs[0], t: '', d: '', w: 1, anc: []
58 58
     }];
59 59
 
60 60
     const updatedRows = [...rows, { id: uuid(), name: nextWorkerName(rows), jobs } ];
... ...
@@ -248,8 +248,25 @@ const SortableJob = SortableElement(
248 248
               </Box>
249 249
               <Box flexBasis="30%">
250 250
                 <label>
251
-                  Váha: (1-10) <br />
252
-                  <Field type="number" min={1} max={10} step={1} name={`${prefix}.w`} style={{ width: '100%' }} />
251
+                  Váha: <br />
252
+                  <Field type="range" min={1} max={10} step={1} name={`${prefix}.w`} style={{ width: '100%' }} list="tickmarks" />
253
+                  <Box flexDirection="row" justifyContent="space-between">
254
+                    <Box marginLeft={5}>1</Box>
255
+                    <Box marginLeft={-15}>5</Box>
256
+                    <div>10</div>
257
+                  </Box>
258
+                  <datalist id="tickmarks">
259
+                    <option value="1" />
260
+                    <option value="2" />
261
+                    <option value="3" />
262
+                    <option value="4" />
263
+                    <option value="5" />
264
+                    <option value="6" />
265
+                    <option value="7" />
266
+                    <option value="8" />
267
+                    <option value="9" />
268
+                    <option value="10" />
269
+                  </datalist>
253 270
                 </label>
254 271
               </Box>
255 272
             </Box>
... ...
@@ -337,7 +354,7 @@ class Row extends React.PureComponent {
337 337
     const { index } = this.props;
338 338
     const { formik: { setFieldValue, values: { rows, allJobs } } } = this.context;
339 339
     const newJob = {
340
-      id: uuid(), name: allJobs[0], t: '', d: '', w: '', anc: []
340
+      id: uuid(), name: allJobs[0], t: '', d: '', w: 1, anc: []
341 341
     };
342 342
 
343 343
     const jobs = [...rows[index].jobs, newJob];