music InstrumentLengthForm.tsx

0% Statements 0/13

0% Branches 0/10

0% Functions 0/3

0% Lines 0/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import l10n from "shared/lib/lang/l10n";
import { CheckboxField } from "ui/form/CheckboxField";
import { FormRow } from "ui/form/layout/FormLayout";
import { SliderField } from "ui/form/SliderField";
 
interface InstrumentLengthFormProps {
  value: number | null;
  onChange: (value: number | null) => void;
  min?: number;
  max?: number;
}
 
export const InstrumentLengthForm = ({
  value,
  onChange,
  min = 1,
  max = 64,
}: InstrumentLengthFormProps) => {
  return (
    <>
      <FormRow>
        <CheckboxField
          label={l10n("FIELD_LENGTH")}
          name="length"
          checked={value !== null}
          onChange={(e) => {
            const value = e.target.checked;
            if (!value) {
              onChange(null);
            } else {
              onChange(32);
            }
          }}
        />
      </FormRow>
      <FormRow>
        <SliderField
          name="length"
          value={value || 0}
          min={value ? min : 0}
          max={max}
          onChange={(value) => {
            onChange(value || 0);
          }}
        />
      </FormRow>
    </>
  );
};