zds-pickers 4.0.2 → 4.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +15 -32
- package/dist/index.es.js +4142 -10129
- package/dist/types/hooks/useComponentSize.d.ts +5 -0
- package/dist/types/hooks/useStateWithDynamicDefault.d.ts +2 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/main.d.ts +19 -0
- package/dist/types/midi/ccValues.d.ts +3 -0
- package/dist/types/midi/export.d.ts +22 -0
- package/dist/types/other/DefaultTooltip.d.ts +10 -0
- package/dist/types/other/OctavePlayer.d.ts +20 -0
- package/dist/types/other/SVGText.d.ts +17 -0
- package/dist/types/other/SoundFontProvider.d.ts +17 -0
- package/dist/types/pickers/CCPicker.d.ts +6 -0
- package/dist/types/pickers/ChannelMappingPicker.d.ts +13 -0
- package/dist/types/pickers/ChannelPicker.d.ts +6 -0
- package/dist/types/pickers/Knob.d.ts +12 -0
- package/dist/types/pickers/KnobPicker.d.ts +27 -0
- package/dist/types/pickers/LatchPicker.d.ts +6 -0
- package/dist/types/pickers/MappingPicker.d.ts +10 -0
- package/dist/types/pickers/NotePicker.d.ts +19 -0
- package/dist/types/pickers/PianoPicker.d.ts +9 -0
- package/dist/types/pickers/PolarityPicker.d.ts +12 -0
- package/dist/types/pickers/ResponseCurve.d.ts +31 -0
- package/dist/types/pickers/ResponseCurvePicker.d.ts +13 -0
- package/dist/types/pickers/Select.d.ts +29 -0
- package/dist/types/pickers/StatusPicker.d.ts +11 -0
- package/dist/types/pickers/ValuePicker.d.ts +14 -0
- package/dist/types/pickers/knobSkin10.d.ts +14 -0
- package/dist/types/rotaryKnob/InternalInput.d.ts +18 -0
- package/dist/types/rotaryKnob/Types.d.ts +5 -0
- package/dist/types/rotaryKnob/helpers/DrawCircle.d.ts +18 -0
- package/dist/types/rotaryKnob/helpers/DrawLine.d.ts +15 -0
- package/dist/types/rotaryKnob/helpers/HelpersOverlay.d.ts +11 -0
- package/dist/types/rotaryKnob/helpers/KnobVisualHelpers.d.ts +30 -0
- package/dist/types/rotaryKnob/index.d.ts +49 -0
- package/dist/types/rotaryKnob/knobdefaultskin.d.ts +6 -0
- package/dist/types/rotaryKnob/utils.d.ts +49 -0
- package/dist/types/utils.d.ts +9 -0
- package/package.json +6 -5
- package/dist/index.cjs.js.map +0 -1
- package/dist/index.es.js.map +0 -1
- /package/dist/{main.d.ts → index.d.ts} +0 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export { default as CCPicker } from './pickers/CCPicker';
|
|
2
|
+
export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker';
|
|
3
|
+
export { default as ChannelPicker } from './pickers/ChannelPicker';
|
|
4
|
+
export { default as Knob } from './pickers/Knob';
|
|
5
|
+
export { default as KnobPicker } from './pickers/KnobPicker';
|
|
6
|
+
export { default as LatchPicker } from './pickers/LatchPicker';
|
|
7
|
+
export { default as MappingPicker } from './pickers/MappingPicker';
|
|
8
|
+
export { default as NotePicker } from './pickers/NotePicker';
|
|
9
|
+
export { default as OctavePlayer } from './other/OctavePlayer';
|
|
10
|
+
export { default as PianoPicker } from './pickers/PianoPicker';
|
|
11
|
+
export { default as PolarityPicker } from './pickers/PolarityPicker';
|
|
12
|
+
export { default as ResponseCurvePicker } from './pickers/ResponseCurvePicker';
|
|
13
|
+
export { default as Select } from './pickers/Select';
|
|
14
|
+
export { default as StatusPicker } from './pickers/StatusPicker';
|
|
15
|
+
export { default as SVGText } from './other/SVGText';
|
|
16
|
+
export { default as ValuePicker } from './pickers/ValuePicker';
|
|
17
|
+
export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, Statuses, } from './midi/export';
|
|
18
|
+
export { default as ResponseCurve, RESPONSE_CURVES, } from './pickers/ResponseCurve';
|
|
19
|
+
export { default as ccValues } from './midi/ccValues';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { Option } from 'lib/pickers/Select';
|
|
2
|
+
declare const Statuses: {
|
|
3
|
+
noteOff: number;
|
|
4
|
+
noteOn: number;
|
|
5
|
+
aftertouch: number;
|
|
6
|
+
controlChange: number;
|
|
7
|
+
programChange: number;
|
|
8
|
+
channelPressure: number;
|
|
9
|
+
pitchWheel: number;
|
|
10
|
+
};
|
|
11
|
+
type Status = (typeof Statuses)[keyof typeof Statuses];
|
|
12
|
+
declare const MASK_CHANNEL = 15;
|
|
13
|
+
declare const MASK_STATUS = 240;
|
|
14
|
+
declare const statusOptions: Option<Status>[];
|
|
15
|
+
declare const getStatusLabel: (val: Status) => string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode>;
|
|
16
|
+
declare const combineStatusWithChannel: (channel: number, status: Status) => number;
|
|
17
|
+
declare const extractStatusAndChannel: (status: number) => {
|
|
18
|
+
status: Status;
|
|
19
|
+
channel: number;
|
|
20
|
+
};
|
|
21
|
+
export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, statusOptions, Statuses, };
|
|
22
|
+
export type { Status };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type TooltipProps = {
|
|
2
|
+
children?: React.ReactNode;
|
|
3
|
+
placement?: 'left' | 'right' | 'top' | 'bottom';
|
|
4
|
+
title: React.ReactNode;
|
|
5
|
+
};
|
|
6
|
+
declare const DefaultTooltip: ({ children }: React.PropsWithoutRef<TooltipProps>) => import("react").FunctionComponentElement<{
|
|
7
|
+
children?: import("react").ReactNode | undefined;
|
|
8
|
+
}>;
|
|
9
|
+
export default DefaultTooltip;
|
|
10
|
+
export type { TooltipProps };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type Soundfont from 'soundfont-player';
|
|
2
|
+
import type { TooltipProps } from './DefaultTooltip';
|
|
3
|
+
type WithProviderProps = {
|
|
4
|
+
format?: 'mp3' | 'ogg';
|
|
5
|
+
height: number;
|
|
6
|
+
hostname?: string;
|
|
7
|
+
instrumentName: Soundfont.InstrumentName;
|
|
8
|
+
octave?: number;
|
|
9
|
+
onChange?: (note: number) => void;
|
|
10
|
+
onClick?: (note: number) => void;
|
|
11
|
+
onDoubleClick?: (note: number) => void;
|
|
12
|
+
onKeyMouseEnter?: (note: number) => void;
|
|
13
|
+
onKeyMouseLeave?: (note: number) => void;
|
|
14
|
+
soundfont?: 'MusyngKite' | 'FluidR3_GM';
|
|
15
|
+
Tooltip?: TooltipProps;
|
|
16
|
+
width: number;
|
|
17
|
+
};
|
|
18
|
+
declare const WithProvider: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default WithProvider;
|
|
20
|
+
export type { WithProviderProps };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
declare const MEASUREMENT_ELEMENT_ID = "__react_svg_text_measurement_id";
|
|
2
|
+
type TextProps = Partial<HTMLOrSVGElement> & {
|
|
3
|
+
className?: string;
|
|
4
|
+
dx?: number;
|
|
5
|
+
dy?: number;
|
|
6
|
+
maxHeight?: number;
|
|
7
|
+
maxWidth?: number;
|
|
8
|
+
transform?: string;
|
|
9
|
+
text: string;
|
|
10
|
+
textAnchor?: React.CSSProperties['textAnchor'];
|
|
11
|
+
verticalAnchor?: 'start' | 'middle' | 'end';
|
|
12
|
+
x?: number;
|
|
13
|
+
y?: number;
|
|
14
|
+
};
|
|
15
|
+
declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export default Text;
|
|
17
|
+
export { MEASUREMENT_ELEMENT_ID };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import Soundfont from 'soundfont-player';
|
|
2
|
+
type SoundfontProviderProps = {
|
|
3
|
+
audioContext: AudioContext;
|
|
4
|
+
format?: 'mp3' | 'ogg';
|
|
5
|
+
hostname?: string;
|
|
6
|
+
instrumentName: Soundfont.InstrumentName;
|
|
7
|
+
onChange?: (midiNumber: number) => void;
|
|
8
|
+
render: (props: {
|
|
9
|
+
isLoading: boolean;
|
|
10
|
+
playNote: (midiNumber: number) => void;
|
|
11
|
+
stopNote: (midiNumber: number) => void;
|
|
12
|
+
stopAllNotes: () => void;
|
|
13
|
+
}) => React.ReactNode;
|
|
14
|
+
soundfont?: 'MusyngKite' | 'FluidR3_GM';
|
|
15
|
+
};
|
|
16
|
+
declare const SoundfontProvider: (props: SoundfontProviderProps) => import("react").ReactNode;
|
|
17
|
+
export default SoundfontProvider;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type CCPickerProps = SelectProps<number>;
|
|
4
|
+
declare const CCPicker: import("react").ForwardRefExoticComponent<CCPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
5
|
+
export default CCPicker;
|
|
6
|
+
export type { CCPickerProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type InternalValue = number | 'separator';
|
|
4
|
+
interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
|
|
5
|
+
channels: Option<number>[];
|
|
6
|
+
className?: string;
|
|
7
|
+
filterOptions?: (candidate: Option<InternalValue>, inputValue: string) => boolean;
|
|
8
|
+
value: number;
|
|
9
|
+
onChange: (value: InternalValue) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const ChannelMappingPicker: import("react").ForwardRefExoticComponent<ChannelMappingPickerProps & import("react").RefAttributes<SelectInstance<Option<InternalValue>, false, GroupBase<Option<InternalValue>>>>>;
|
|
12
|
+
export default ChannelMappingPicker;
|
|
13
|
+
export type { ChannelMappingPickerProps };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type ChannelPickerProps = SelectProps<number>;
|
|
4
|
+
declare const ChannelPicker: import("react").ForwardRefExoticComponent<ChannelPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
5
|
+
export default ChannelPicker;
|
|
6
|
+
export type { ChannelPickerProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type KnobProps = {
|
|
2
|
+
disabled?: boolean;
|
|
3
|
+
max?: number;
|
|
4
|
+
min?: number;
|
|
5
|
+
onChange?: (value: number) => void;
|
|
6
|
+
value?: number;
|
|
7
|
+
wheelEnabled?: boolean;
|
|
8
|
+
wheelSensitivity?: number;
|
|
9
|
+
};
|
|
10
|
+
declare const Knob: (props: KnobProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default Knob;
|
|
12
|
+
export type { KnobProps };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type KnobPickerProps = SelectProps<number> & {
|
|
4
|
+
highToLow?: boolean;
|
|
5
|
+
includeLabel?: boolean;
|
|
6
|
+
includePicker?: boolean;
|
|
7
|
+
knobProps?: Partial<KnobPickerProps>;
|
|
8
|
+
max?: number;
|
|
9
|
+
min?: number;
|
|
10
|
+
wheelEnabled?: boolean;
|
|
11
|
+
wheelSensitivity?: number;
|
|
12
|
+
value: number;
|
|
13
|
+
};
|
|
14
|
+
type KnobPickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
|
|
15
|
+
declare const KnobPicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
|
|
16
|
+
highToLow?: boolean;
|
|
17
|
+
includeLabel?: boolean;
|
|
18
|
+
includePicker?: boolean;
|
|
19
|
+
knobProps?: Partial<KnobPickerProps>;
|
|
20
|
+
max?: number;
|
|
21
|
+
min?: number;
|
|
22
|
+
wheelEnabled?: boolean;
|
|
23
|
+
wheelSensitivity?: number;
|
|
24
|
+
value: number;
|
|
25
|
+
} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
26
|
+
export default KnobPicker;
|
|
27
|
+
export type { KnobPickerProps, KnobPickerRef };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type LatchPickerProps = SelectProps<number>;
|
|
4
|
+
declare const LatchPicker: import("react").ForwardRefExoticComponent<LatchPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
5
|
+
export default LatchPicker;
|
|
6
|
+
export type { LatchPickerProps };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type MappingPickerProps = SelectProps<string> & {
|
|
4
|
+
allowClearing: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const MappingPicker: import("react").ForwardRefExoticComponent<SelectProps<string> & {
|
|
7
|
+
allowClearing: boolean;
|
|
8
|
+
} & import("react").RefAttributes<SelectInstance<Option<string>, false, GroupBase<Option<string>>>>>;
|
|
9
|
+
export default MappingPicker;
|
|
10
|
+
export type { MappingPickerProps };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import { type Mapping } from 'zds-mappings';
|
|
3
|
+
import type { Option, SelectProps } from './Select';
|
|
4
|
+
type NotePickerProps = SelectProps<number> & {
|
|
5
|
+
channel: number;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
isMelodicMode?: boolean;
|
|
8
|
+
mapping?: Mapping;
|
|
9
|
+
onChange: (value: number) => void;
|
|
10
|
+
};
|
|
11
|
+
declare const NotePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
|
|
12
|
+
channel: number;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
isMelodicMode?: boolean;
|
|
15
|
+
mapping?: Mapping;
|
|
16
|
+
onChange: (value: number) => void;
|
|
17
|
+
} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
18
|
+
export default NotePicker;
|
|
19
|
+
export type { NotePickerProps };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { WithProviderProps } from '../other/OctavePlayer';
|
|
2
|
+
type PianoProps = {
|
|
3
|
+
disabled: boolean;
|
|
4
|
+
height: number;
|
|
5
|
+
width: number;
|
|
6
|
+
};
|
|
7
|
+
declare const WithProvider: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }: WithProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default WithProvider;
|
|
9
|
+
export type { PianoProps };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type PolarityPickerProps = SelectProps<number> & {
|
|
4
|
+
labelOff?: string;
|
|
5
|
+
labelOn?: string;
|
|
6
|
+
};
|
|
7
|
+
declare const PolarityPicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
|
|
8
|
+
labelOff?: string;
|
|
9
|
+
labelOn?: string;
|
|
10
|
+
} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
11
|
+
export default PolarityPicker;
|
|
12
|
+
export type { PolarityPickerProps };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type TooltipProps } from '../other/DefaultTooltip';
|
|
2
|
+
import type { Option } from './Select';
|
|
3
|
+
type ResponseCurve = {
|
|
4
|
+
value: string | number;
|
|
5
|
+
label: React.ReactNode;
|
|
6
|
+
c1: number;
|
|
7
|
+
c2: number;
|
|
8
|
+
x1: number;
|
|
9
|
+
y1: number;
|
|
10
|
+
x2: number;
|
|
11
|
+
y2: number;
|
|
12
|
+
labelX: number;
|
|
13
|
+
labelY: number;
|
|
14
|
+
};
|
|
15
|
+
declare const RESPONSE_CURVES: Option<number>[];
|
|
16
|
+
type ResponseCurveProps = {
|
|
17
|
+
autosize: boolean;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
inverted: boolean;
|
|
20
|
+
onChange: (event: {
|
|
21
|
+
target: {
|
|
22
|
+
value: number;
|
|
23
|
+
};
|
|
24
|
+
}) => void;
|
|
25
|
+
Tooltip: React.FC<TooltipProps>;
|
|
26
|
+
value: number;
|
|
27
|
+
};
|
|
28
|
+
declare const ResponseCurve: (props: ResponseCurveProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export default ResponseCurve;
|
|
30
|
+
export { RESPONSE_CURVES };
|
|
31
|
+
export type { ResponseCurveProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import { type TooltipProps } from '../other/DefaultTooltip';
|
|
3
|
+
import type { Option, SelectProps } from './Select';
|
|
4
|
+
type ResponseCurvePickerProps = SelectProps<number> & {
|
|
5
|
+
inverted?: boolean;
|
|
6
|
+
Tooltip?: React.FC<TooltipProps>;
|
|
7
|
+
};
|
|
8
|
+
declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
|
|
9
|
+
inverted?: boolean;
|
|
10
|
+
Tooltip?: React.FC<TooltipProps>;
|
|
11
|
+
} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
12
|
+
export default ResponseCurvePicker;
|
|
13
|
+
export type { ResponseCurvePickerProps };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type JSX } from 'react';
|
|
2
|
+
import { type GroupBase, type SelectInstance } from 'react-select';
|
|
3
|
+
type Option<T> = {
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
value: T;
|
|
6
|
+
};
|
|
7
|
+
type SelectProps<T> = {
|
|
8
|
+
className?: string;
|
|
9
|
+
components?: object;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
filterOptions?: (candidate: Option<T>, inputValue: string) => boolean;
|
|
12
|
+
formatOptionLabel?: (option: Option<unknown>, { context }: {
|
|
13
|
+
context: 'menu' | 'value';
|
|
14
|
+
}) => React.ReactNode;
|
|
15
|
+
isSearchable?: boolean;
|
|
16
|
+
label?: string;
|
|
17
|
+
onChange: (value: Option<T>['value']) => void;
|
|
18
|
+
options: Option<T>[] | {
|
|
19
|
+
entries: Option<T>[];
|
|
20
|
+
}[];
|
|
21
|
+
preserveMenuWidth?: boolean;
|
|
22
|
+
shrinkLabel?: boolean;
|
|
23
|
+
value: Option<T>['value'];
|
|
24
|
+
};
|
|
25
|
+
declare const Select: <T>(props: SelectProps<T> & {
|
|
26
|
+
ref?: React.ForwardedRef<SelectInstance<Option<T>, false, GroupBase<Option<T>>>>;
|
|
27
|
+
}) => JSX.Element;
|
|
28
|
+
export default Select;
|
|
29
|
+
export type { Option, SelectProps };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Status } from 'lib/midi/export';
|
|
2
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
3
|
+
import type { Option, SelectProps } from './Select';
|
|
4
|
+
type StatusPickerProps = SelectProps<Status> & {
|
|
5
|
+
statuses: Option<Status>[];
|
|
6
|
+
};
|
|
7
|
+
declare const StatusPicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
|
|
8
|
+
statuses: Option<Status>[];
|
|
9
|
+
} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
10
|
+
export default StatusPicker;
|
|
11
|
+
export type { StatusPickerProps };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { GroupBase, SelectInstance } from 'react-select';
|
|
2
|
+
import type { Option, SelectProps } from './Select';
|
|
3
|
+
type ValuePickerProps = SelectProps<number> & {
|
|
4
|
+
highToLow?: boolean;
|
|
5
|
+
max?: number;
|
|
6
|
+
min?: number;
|
|
7
|
+
};
|
|
8
|
+
declare const ValuePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
|
|
9
|
+
highToLow?: boolean;
|
|
10
|
+
max?: number;
|
|
11
|
+
min?: number;
|
|
12
|
+
} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
|
|
13
|
+
export default ValuePicker;
|
|
14
|
+
export type { ValuePickerProps };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
declare const knobSkin10: {
|
|
2
|
+
knobX: number;
|
|
3
|
+
knobY: number;
|
|
4
|
+
svg: string;
|
|
5
|
+
updateAttributes: {
|
|
6
|
+
element: string;
|
|
7
|
+
content: (_props: React.CSSProperties, value: number) => string;
|
|
8
|
+
attrs: {
|
|
9
|
+
name: string;
|
|
10
|
+
value: () => string;
|
|
11
|
+
}[];
|
|
12
|
+
}[];
|
|
13
|
+
};
|
|
14
|
+
export default knobSkin10;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type InternalInputProps = {
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
min: number;
|
|
5
|
+
max: number;
|
|
6
|
+
value: number;
|
|
7
|
+
step?: number;
|
|
8
|
+
inputRef: React.RefObject<HTMLInputElement>;
|
|
9
|
+
onChange: (val: number) => void;
|
|
10
|
+
style?: React.CSSProperties;
|
|
11
|
+
};
|
|
12
|
+
declare class InternalInput extends React.Component<InternalInputProps> {
|
|
13
|
+
static defaultProps: {
|
|
14
|
+
step: number;
|
|
15
|
+
};
|
|
16
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
}
|
|
18
|
+
export default InternalInput;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Draws a circle with radius = r
|
|
4
|
+
* position must be handled by parent
|
|
5
|
+
*/
|
|
6
|
+
type DrawCircleProps = React.SVGProps<SVGCircleElement> & {
|
|
7
|
+
r: number;
|
|
8
|
+
borderColor?: string;
|
|
9
|
+
fillColor?: string;
|
|
10
|
+
borderWidth?: number;
|
|
11
|
+
fillOpacity: number;
|
|
12
|
+
cx: number;
|
|
13
|
+
cy: number;
|
|
14
|
+
};
|
|
15
|
+
declare class DrawCircle extends React.Component<DrawCircleProps> {
|
|
16
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
}
|
|
18
|
+
export default DrawCircle;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Point } from '../Types';
|
|
3
|
+
/**
|
|
4
|
+
* Draws a line from p1 to p2
|
|
5
|
+
*/
|
|
6
|
+
type DrawLineProps = React.SVGProps<SVGLineElement> & {
|
|
7
|
+
width?: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
p1: Point;
|
|
10
|
+
p2: Point;
|
|
11
|
+
};
|
|
12
|
+
declare class DrawLine extends React.Component<DrawLineProps> {
|
|
13
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
}
|
|
15
|
+
export default DrawLine;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type HelpersOverlayProps = React.PropsWithChildren & {
|
|
3
|
+
overlayStyle?: React.CSSProperties;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Draws the overlay and the children
|
|
7
|
+
*/
|
|
8
|
+
declare class HelpersOverlay extends React.Component<HelpersOverlayProps> {
|
|
9
|
+
render(): React.ReactPortal;
|
|
10
|
+
}
|
|
11
|
+
export default HelpersOverlay;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Point } from '../Types';
|
|
3
|
+
/** Precision visual helpers */
|
|
4
|
+
/**
|
|
5
|
+
* Precision mode visual helpers
|
|
6
|
+
*/
|
|
7
|
+
type KnobVisualHelpersProps = {
|
|
8
|
+
svgRef?: SVGSVGElement;
|
|
9
|
+
radius: number;
|
|
10
|
+
minimumDragDistance: number;
|
|
11
|
+
valueAngle: number;
|
|
12
|
+
mousePos: Point;
|
|
13
|
+
};
|
|
14
|
+
type KnobVisualHelpersState = {
|
|
15
|
+
centerX: number;
|
|
16
|
+
centerY: number;
|
|
17
|
+
valueMarkerX: number;
|
|
18
|
+
valueMarkerY: number;
|
|
19
|
+
};
|
|
20
|
+
declare class KnobVisualHelpers extends React.Component<KnobVisualHelpersProps, KnobVisualHelpersState> {
|
|
21
|
+
state: {
|
|
22
|
+
centerX: number;
|
|
23
|
+
centerY: number;
|
|
24
|
+
valueMarkerX: number;
|
|
25
|
+
valueMarkerY: number;
|
|
26
|
+
};
|
|
27
|
+
static getDerivedStateFromProps(props: KnobVisualHelpersProps, state: KnobVisualHelpersState): KnobVisualHelpersState;
|
|
28
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
}
|
|
30
|
+
export { KnobVisualHelpers };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Show the rotation circle and marker
|
|
3
|
+
* dispatches drag events
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* type definition for the skin system attribute modification element
|
|
7
|
+
*/
|
|
8
|
+
type AttributeSetValue = {
|
|
9
|
+
name: string;
|
|
10
|
+
value: (props: unknown, value: unknown) => string;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Type definition for the skin element manipulation block
|
|
14
|
+
*/
|
|
15
|
+
interface UpdateElement {
|
|
16
|
+
element: string;
|
|
17
|
+
content: (_props: React.CSSProperties, value: number) => string;
|
|
18
|
+
attrs: AttributeSetValue[];
|
|
19
|
+
}
|
|
20
|
+
interface Skin {
|
|
21
|
+
svg: string;
|
|
22
|
+
knobX: number;
|
|
23
|
+
knobY: number;
|
|
24
|
+
updateAttributes: UpdateElement[];
|
|
25
|
+
}
|
|
26
|
+
type KnobProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
|
|
27
|
+
clampMax?: number;
|
|
28
|
+
clampMin?: number;
|
|
29
|
+
defaultValue?: number;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
format?: (val: number) => string;
|
|
32
|
+
max?: number;
|
|
33
|
+
min?: number;
|
|
34
|
+
onChange?: (val: number) => void;
|
|
35
|
+
onEnd?: () => void;
|
|
36
|
+
onStart?: () => void;
|
|
37
|
+
preciseMode?: boolean;
|
|
38
|
+
rotateDegrees?: number;
|
|
39
|
+
skin?: Skin;
|
|
40
|
+
step?: number;
|
|
41
|
+
style: React.CSSProperties;
|
|
42
|
+
unlockDistance?: number;
|
|
43
|
+
value?: number;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Generic knob component
|
|
47
|
+
*/
|
|
48
|
+
declare const RotaryKnob: (props: KnobProps) => import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export default RotaryKnob;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/** Note on viewbox/width
|
|
2
|
+
* This methods only work when the pixels match the svg units.
|
|
3
|
+
* when the viewbox is changed, or width is set they won't return
|
|
4
|
+
* the correct results
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Returns the global coordinates of a position given
|
|
8
|
+
* for a specific coordinate system
|
|
9
|
+
* @param {*} svgdoc
|
|
10
|
+
* @param {*} elem
|
|
11
|
+
* @param {*} x
|
|
12
|
+
* @param {*} y
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Converts a global position to a local one
|
|
16
|
+
* @param {*} svgdoc
|
|
17
|
+
* @param {*} elem
|
|
18
|
+
* @param {*} x
|
|
19
|
+
* @param {*} y
|
|
20
|
+
*/
|
|
21
|
+
declare function toRadians(angle: number): number;
|
|
22
|
+
declare function getQuadrant(x: number, y: number): 1 | 2 | 3 | 4;
|
|
23
|
+
/**
|
|
24
|
+
* Returns the angle (degrees) given a point.
|
|
25
|
+
* Assumes 0,0 as the center of the circle
|
|
26
|
+
* @param {number} x
|
|
27
|
+
* @param {number} y
|
|
28
|
+
*/
|
|
29
|
+
declare function getAngleForPoint(x: number, y: number): number;
|
|
30
|
+
/**
|
|
31
|
+
* Transforms the top/left variables of the rectangle
|
|
32
|
+
* returned by getBoundingClientRect to document based coordinates
|
|
33
|
+
* without the scroll.
|
|
34
|
+
* UPDATE
|
|
35
|
+
* @param {Rect} box
|
|
36
|
+
*/
|
|
37
|
+
declare function transformBoundingClientRectToDocument(box: DOMRect): {
|
|
38
|
+
top: number;
|
|
39
|
+
left: number;
|
|
40
|
+
width: number;
|
|
41
|
+
height: number;
|
|
42
|
+
};
|
|
43
|
+
declare const _default: {
|
|
44
|
+
toRadians: typeof toRadians;
|
|
45
|
+
getQuadrant: typeof getQuadrant;
|
|
46
|
+
getAngleForPoint: typeof getAngleForPoint;
|
|
47
|
+
transformBoundingClientRectToDocument: typeof transformBoundingClientRectToDocument;
|
|
48
|
+
};
|
|
49
|
+
export default _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare const arraySequence: (numberOfElements: number) => number[];
|
|
2
|
+
declare const assertRange: (value: number | string, max?: number, min?: number) => number;
|
|
3
|
+
declare const findObj: <T>(key: keyof T, value: T[keyof T]) => (arr: T[]) => T | undefined;
|
|
4
|
+
declare const omit: <T extends Record<string, unknown>>(...keys: string[]) => (obj: T) => {};
|
|
5
|
+
declare const pick: <T extends object>(...keys: (keyof T)[]) => (obj: T) => {};
|
|
6
|
+
declare const set: <T>(key: keyof T, value: T[keyof T]) => (obj: T) => T & {
|
|
7
|
+
[x: string]: T[keyof T];
|
|
8
|
+
};
|
|
9
|
+
export { arraySequence, assertRange, findObj, omit, pick, set };
|
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zds-pickers",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.5",
|
|
4
4
|
"main": "./dist/index.cjs.js",
|
|
5
5
|
"module": "./dist/index.es.js",
|
|
6
|
-
"types": "
|
|
6
|
+
"types": "dist/types/index.d.ts",
|
|
7
7
|
"files": [
|
|
8
|
-
"dist"
|
|
8
|
+
"dist",
|
|
9
|
+
"dist/types"
|
|
9
10
|
],
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
12
|
-
"types": "./dist/
|
|
13
|
+
"types": "./dist/types/index.d.ts",
|
|
13
14
|
"import": "./dist/index.es.js",
|
|
14
15
|
"require": "./dist/index.cjs.js"
|
|
15
16
|
}
|
|
@@ -33,7 +34,7 @@
|
|
|
33
34
|
},
|
|
34
35
|
"scripts": {
|
|
35
36
|
"dev": "vite",
|
|
36
|
-
"build": "
|
|
37
|
+
"build": "vite build && tsc --emitDeclarationOnly",
|
|
37
38
|
"build-storybook": "storybook build",
|
|
38
39
|
"lint": "biome check --write",
|
|
39
40
|
"preview": "vite preview",
|