All files / src/components/music/form OctaveOffsetSelectButton.tsx

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC } from "react";
import styled from "styled-components";
import { OctaveOffsetSelect } from "components/music/form/OctaveOffsetSelect";
import { StyledButton } from "ui/buttons/style";
import { ClefIcon } from "ui/icons/Icons";
import { MIN_OCTAVE } from "consts";
import { selectMenuStyleProps } from "ui/form/Select";
import {
  SelectButton,
  SelectButtonRenderButtonProps,
} from "ui/form/SelectButton";
import { Button } from "ui/buttons/Button";
 
interface OctaveOffsetSelectButtonProps {
  name: string;
  value?: number;
  onChange?: (newId: number) => void;
}
 
const Wrapper = styled.div`
  position: relative;
 
  ${StyledButton} {
    width: auto;
  }
 
  && svg {
    width: auto;
    height: 42px;
    max-width: none;
    max-height: none;
    position: absolute;
    top: -3px;
    left: -5px;
    user-select: none;
  }
`;
 
const LabelWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 21px;
  padding-right: 5px;
  font-size: 15px;
  font-weight: bold;
`;
 
const TriggerButton = React.forwardRef<
  HTMLButtonElement,
  Omit<SelectButtonRenderButtonProps, "ref"> & {
    name: string;
    value?: number;
  }
>(({ name, value, ...props }, ref) => {
  return (
    <Button id={name} variant="transparent" ref={ref} {...props}>
      <ClefIcon />
      <LabelWrapper>{(value ?? 0) + MIN_OCTAVE}</LabelWrapper>
    </Button>
  );
});
 
export const OctaveOffsetSelectButton: FC<OctaveOffsetSelectButtonProps> = ({
  name,
  value,
  onChange,
}) => {
  return (
    <Wrapper>
      <SelectButton
        pin="top-left"
        offsetTop="100%"
        offsetLeft="0%"
        renderButton={(buttonProps) => (
          <TriggerButton {...buttonProps} name={name} value={value} />
        )}
        renderMenu={({ closeMenu }) => (
          <OctaveOffsetSelect
            name={name}
            value={value}
            onChange={(newValue) => {
              closeMenu();
              onChange?.(newValue);
            }}
            onBlur={closeMenu}
            {...selectMenuStyleProps}
          />
        )}
      />
    </Wrapper>
  );
};