zds-pickers 4.0.3 → 4.0.6

package/lib/pickers/ChannelMappingPicker.tsx

@@ -0,0 +1,135 @@
+import cl from 'classnames'
+import { forwardRef, useCallback, useEffect, useState } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { arraySequence } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type InternalValue = number | 'separator'
+// type ExternalValue = number
+
+type ChannelMappingOption = Option<InternalValue>
+
+const defaultOptions: ChannelMappingOption[] = arraySequence(16).map(value => ({
+  value,
+  label: value,
+}))
+
+interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
+  channels: Option<number>[]
+  className?: string
+  filterOptions?: (
+    candidate: Option<InternalValue>,
+    inputValue: string,
+  ) => boolean
+  value: number
+  onChange: (value: InternalValue) => void
+}
+
+type ChannelMappingPickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+type FormatOptionLabelFunction = NonNullable<
+  SelectProps<InternalValue>['formatOptionLabel']
+>
+
+const ChannelMappingPicker = forwardRef<
+  SelectInstance<
+    Option<InternalValue>,
+    false,
+    GroupBase<Option<InternalValue>>
+  >,
+  ChannelMappingPickerProps
+>(({ channels, className, ...rest }, ref) => {
+  const [options, setOptions] = useState<Option<InternalValue>[]>([])
+
+  const formatOptionLabel: FormatOptionLabelFunction = useCallback(
+    ({ value, label }, { context }) => {
+      if (value === 'separator') {
+        return <span className="zds-mappings-user-mapping">{label}</span>
+      }
+
+      if (typeof value !== 'number') return null
+
+      const mapping = channels[value]
+
+      return mapping ? (
+        <span className="mapping-entry">
+          <b>
+            {value + 1}
+            {context === 'value' && ' -'}
+          </b>
+          <span className="mapping-entry-label">{mapping.label}</span>
+        </span>
+      ) : (
+        <span className="mapping-entry empty-mapping-entry">
+          <b>
+            {value + 1}
+            {context === 'value' && ' -'}
+          </b>
+          <span className="mapping-entry-label">no mapping</span>
+        </span>
+      )
+    },
+    [channels],
+  )
+
+  useEffect(() => {
+    const result = defaultOptions.sort(
+      (a: ChannelMappingOption, b: ChannelMappingOption) => {
+        if (
+          typeof a.value === 'number' &&
+          typeof b.value === 'number' &&
+          channels[a.value] &&
+          !channels[b.value]
+        ) {
+          return -1
+        }
+
+        if (
+          typeof a.value === 'number' &&
+          typeof b.value === 'number' &&
+          !channels[a.value] &&
+          channels[b.value]
+        ) {
+          return 1
+        }
+
+        if (typeof a.value === 'number' && typeof b.value === 'number') {
+          return a.value - b.value
+        }
+        return 0
+      },
+    )
+
+    const numFilled = result.filter(
+      ({ value }) => typeof value === 'number' && !!channels[value],
+    ).length
+
+    const separatorExists = result.some(({ value }) => value === 'separator')
+
+    if (numFilled && numFilled < 16 && !separatorExists) {
+      // insert a separator after the count of filled items
+      result.splice(numFilled, 0, { label: <hr />, value: 'separator' })
+    }
+
+    setOptions(result)
+  }, [channels])
+
+  return (
+    <Select<InternalValue>
+      {...rest}
+      className={cl(className, 'channel-mapping-picker')}
+      formatOptionLabel={formatOptionLabel}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default ChannelMappingPicker
+
+export type { ChannelMappingPickerProps, ChannelMappingPickerRef }

package/lib/pickers/ChannelPicker.tsx

@@ -0,0 +1,76 @@
+import cl from 'classnames'
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { arraySequence } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type Channel =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+
+interface FormatOptionLabelContext {
+  context: 'menu' | 'value'
+}
+
+type ChannelPickerProps = SelectProps<Channel>
+
+type ChannelPickerRef = SelectInstance<
+  Option<Channel>,
+  false,
+  GroupBase<Option<Channel>>
+>
+
+const options: Option<Channel>[] = arraySequence(16).map(value => ({
+  value: value as Channel,
+  label: `Channel ${value + 1}`,
+}))
+
+const formatOptionLabel = (
+  option: Option<unknown>,
+  { context }: FormatOptionLabelContext,
+) =>
+  context === 'value' ? option.label : Number.parseInt(String(option.value)) + 1 // menu, e.g. the list of options
+
+const filterOptions = (option: Option<Channel>, input: string) => {
+  // console.log(option, input)
+
+  if (input) {
+    return String(option.label).toLowerCase().includes(input.toLowerCase())
+  }
+  return true
+}
+
+const ChannelPicker = forwardRef<
+  SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>,
+  ChannelPickerProps
+>(({ className, ...rest }, ref) => {
+  return (
+    <Select
+      {...rest}
+      className={cl(className, 'channel-picker')}
+      filterOptions={filterOptions}
+      formatOptionLabel={formatOptionLabel}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default ChannelPicker
+
+export type { Channel, ChannelPickerProps, ChannelPickerRef }

package/lib/pickers/Knob.tsx

@@ -0,0 +1,93 @@
+import { useCallback } from 'react'
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
+import RotaryKnob from '../rotaryKnob'
+import { assertRange } from '../utils'
+import knobSkin10 from './knobSkin10'
+
+type KnobProps = {
+  disabled?: boolean
+  max?: number
+  min?: number
+  onChange?: (value: number) => void
+  value?: number
+  wheelEnabled?: boolean
+  wheelSensitivity?: number
+}
+
+const Knob = (props: KnobProps) => {
+  const {
+    disabled = false,
+    max = 127,
+    min = 0,
+    onChange,
+    value: initialValue = 0,
+    wheelEnabled = false,
+    wheelSensitivity = 0.1,
+    ...rest
+  } = props
+
+  const [value, setValue] = useStateWithDynamicDefault(initialValue)
+
+  const handleChange = (val: number) => {
+    if (disabled) return
+
+    const newValue = assertRange(Number.parseInt(String(val), 10), max, min)
+    setValue(newValue)
+    if (onChange) {
+      onChange(newValue)
+    }
+  }
+
+  const handleWheel = useCallback(
+    (event: React.WheelEvent<HTMLDivElement>) => {
+      if (!wheelEnabled || disabled) return
+
+      event.preventDefault()
+      const delta = -event.deltaY * wheelSensitivity
+      const newValue = assertRange(value + delta, max, min)
+
+      setValue(newValue)
+      if (onChange) {
+        onChange(newValue)
+      }
+    },
+    [
+      wheelEnabled,
+      disabled,
+      wheelSensitivity,
+      value,
+      max,
+      min,
+      onChange,
+      setValue,
+    ],
+  )
+
+  return (
+    <RotaryKnob
+      clampMax={320}
+      clampMin={40}
+      className="zds-pickers__knob-container"
+      disabled={disabled}
+      onChange={handleChange}
+      onWheel={wheelEnabled ? handleWheel : undefined}
+      preciseMode={false}
+      rotateDegrees={180}
+      /**
+       * To see all skins:
+       * http://react-rotary-knob-skins-preview.surge.sh/
+       *
+       * NOTE: we've copied the one we use into this package because the skins
+       * pack package does not work in Electron.
+       */
+      skin={knobSkin10}
+      style={{ opacity: disabled ? 0.4 : 1 }}
+      unlockDistance={0}
+      {...{ defaultValue: value, max, min, value, ...rest }}
+    />
+  )
+}
+
+export default Knob
+
+export type { KnobProps }

package/lib/pickers/KnobPicker.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { arraySequence } from '../utils'
+import Knob from './Knob'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type KnobPickerProps = SelectProps<number> & {
+  highToLow?: boolean
+  includeLabel?: boolean
+  includePicker?: boolean
+  knobProps?: Partial<KnobPickerProps>
+  max?: number
+  min?: number
+  wheelEnabled?: boolean
+  wheelSensitivity?: number
+  value: number
+}
+
+type KnobPickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const KnobPicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  KnobPickerProps
+>((props, ref) => {
+  const {
+    disabled,
+    highToLow,
+    includeLabel,
+    includePicker,
+    knobProps,
+    label,
+    max = 127,
+    min = 0,
+    onChange,
+    shrinkLabel,
+    value = 0,
+    wheelEnabled,
+    wheelSensitivity = 0.1,
+    ...rest
+  } = props
+
+  const options = useMemo(() => {
+    const result = arraySequence(max - min + 1)
+      .map(i => min + i)
+      .map((i): Option<number> => ({ value: i, label: String(i) }))
+    return highToLow ? result.reverse() : result
+  }, [highToLow, max, min])
+
+  return (
+    <div className="zds-pickers__container">
+      {Boolean(!shrinkLabel && Boolean(label)) && (
+        <span className="zds-pickers__label">{label}</span>
+      )}
+      <div style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
+        {Boolean(includePicker) && (
+          <Select
+            {...{
+              ...rest,
+              disabled,
+              isDisabled: disabled,
+              onChange,
+              options,
+              ref,
+              value,
+            }}
+          />
+        )}
+
+        <Knob
+          {...{
+            disabled,
+            max,
+            min,
+            onChange,
+            value,
+            wheelEnabled,
+            wheelSensitivity,
+            ...knobProps,
+          }}
+        />
+      </div>
+    </div>
+  )
+})
+
+export default KnobPicker
+
+export type { KnobPickerProps, KnobPickerRef }

package/lib/pickers/LatchPicker.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import type { Polarity } from './PolarityPicker'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+const options: Option<Polarity>[] = [
+  { value: 0, label: 'Momentary' },
+  { value: 1, label: 'Latching' },
+]
+
+type LatchPickerProps = SelectProps<Polarity>
+
+type LatchPickerRef = SelectInstance<
+  Option<Polarity>,
+  false,
+  GroupBase<Option<Polarity>>
+>
+
+const LatchPicker = forwardRef<
+  SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>,
+  LatchPickerProps
+>((props, ref) => (
+  <Select
+    {...props}
+    options={options}
+    ref={ref}
+  />
+))
+
+export default LatchPicker
+
+export type { LatchPickerProps, LatchPickerRef }

package/lib/pickers/MappingPicker.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { getStockNames, getUserMappingNames } from 'zds-mappings'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type MappingPickerProps = SelectProps<string> & {
+  allowClearing: boolean
+}
+
+type MappingPickerRef = SelectInstance<
+  Option<string>,
+  false,
+  GroupBase<Option<string>>
+>
+
+const MappingPicker = forwardRef<
+  SelectInstance<Option<string>, false, GroupBase<Option<string>>>,
+  MappingPickerProps
+>(({ allowClearing, ...rest }, ref) => {
+  const stockMappings = getStockNames()
+  const userMappings = getUserMappingNames()
+
+  const options = useMemo(() => {
+    const result = allowClearing
+      ? [
+          {
+            value: 'No Mapping',
+            label: (
+              <span className="zds-mappings-clear-mapping">No Mapping</span>
+            ),
+          },
+        ]
+      : []
+
+    return [
+      ...result,
+
+      {
+        label: allowClearing ? <hr /> : '',
+        options: userMappings.map(label => ({
+          value: label,
+          label: <span className="zds-mappings-user-mapping">{label}</span>,
+        })),
+      },
+
+      {
+        label: userMappings.length ? <hr /> : allowClearing ? <hr /> : '',
+        options: stockMappings.map(label => ({
+          label,
+          value: label,
+        })),
+      },
+    ] as Option<string>[]
+  }, [allowClearing, stockMappings, userMappings])
+
+  return (
+    <Select
+      {...rest}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default MappingPicker
+
+export type { MappingPickerProps, MappingPickerRef }

package/lib/pickers/NotePicker.tsx

@@ -0,0 +1,95 @@
+import { forwardRef, useCallback, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { Midi } from 'tonal'
+import { type MapItem, type Mapping, emptyMapping } from 'zds-mappings'
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
+import { assertRange } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+const { midiToNoteName } = Midi
+
+const formattedMapEntry = ({ note, name }: MapItem) =>
+  `${note} ${name.length ? '-' : ''} ${name}`
+const formattedListEntry = (label: string, idx: number) => ({
+  label,
+  value: idx + 1,
+})
+
+type NotePickerProps = SelectProps<number> & {
+  channel: number
+  disabled?: boolean
+  isMelodicMode?: boolean
+  mapping?: Mapping
+  onChange: (value: number) => void
+}
+
+type NotePickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const NotePicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  NotePickerProps
+>((props, ref) => {
+  const {
+    channel,
+    disabled = false,
+    isMelodicMode = false,
+    mapping,
+    onChange,
+    value: initialValue,
+    ...rest
+  } = props
+
+  const options = useMemo(() => {
+    if (isMelodicMode) {
+      return emptyMapping()
+        .map(({ note }) => {
+          const midiNoteName = midiToNoteName(note, { sharps: false })
+            .replace('b', '♭')
+            .replace('#', '♯')
+          return `${midiNoteName} (#${note})`
+        })
+        .map(formattedListEntry)
+    }
+
+    return (mapping || emptyMapping())
+      .map(formattedMapEntry)
+      .map(formattedListEntry)
+  }, [isMelodicMode, mapping])
+
+  const [value, setValue] = useStateWithDynamicDefault(initialValue)
+
+  const handleChange = useCallback(
+    (v: number | string) => {
+      if (typeof v === 'string') return
+
+      const possibleNoteNumber = assertRange(v, 128, 0)
+
+      if (possibleNoteNumber > 0) {
+        onChange(possibleNoteNumber)
+      }
+      setValue(v)
+    },
+    [onChange, setValue],
+  )
+
+  return (
+    <Select
+      {...rest}
+      disabled={disabled}
+      // isDisabled={disabled}
+      onChange={handleChange}
+      options={options}
+      ref={ref}
+      value={value}
+    />
+  )
+})
+
+export default NotePicker
+
+export type { NotePickerProps, NotePickerRef }

package/lib/pickers/PianoPicker.tsx

@@ -0,0 +1,77 @@
+import { Piano as ReactPiano } from 'zds-react-piano'
+import type { WithProviderProps } from '../other/OctavePlayer'
+import SoundfontProvider from '../other/SoundFontProvider'
+
+const firstNote = 21
+const lastNote = 108
+const numNotes = lastNote - firstNote - 1
+
+const whiteNotes = numNotes * 0.7 // approx
+
+const audioContext = new window.AudioContext()
+
+type PianoProps = {
+  disabled: boolean
+  height: number
+  width: number
+}
+
+const PianoPicker = ({ height, width, ...rest }: PianoProps) => {
+  const keyWidth = width / whiteNotes + 2
+  const keyWidthToHeight = keyWidth / height
+
+  return (
+    <div>
+      <ReactPiano
+        keyWidthToHeight={keyWidthToHeight}
+        noteRange={{ first: firstNote, last: lastNote }}
+        width={width}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+const WithProvider = ({
+  format,
+  height,
+  hostname,
+  instrumentName,
+  onChange,
+  onClick,
+  onDoubleClick,
+  onKeyMouseEnter,
+  onKeyMouseLeave,
+  soundfont,
+  width,
+}: WithProviderProps) => (
+  <SoundfontProvider
+    {...{
+      audioContext,
+      format,
+      hostname,
+      instrumentName,
+      onChange,
+      soundfont,
+    }}
+    render={({ isLoading, playNote, stopNote }) => (
+      <PianoPicker
+        disabled={isLoading}
+        {...{
+          height,
+          onClick,
+          onDoubleClick,
+          onKeyMouseEnter,
+          onKeyMouseLeave,
+          playNote,
+          stopNote,
+          width,
+        }}
+      />
+    )}
+  />
+)
+
+export default WithProvider
+
+export type { PianoProps }

package/lib/pickers/PolarityPicker.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type Polarity = 0 | 1
+
+type PolarityPickerProps = SelectProps<Polarity> & {
+  labelOff?: string
+  labelOn?: string
+}
+
+type PolarityPickerRef = SelectInstance<
+  Option<Polarity>,
+  false,
+  GroupBase<Option<Polarity>>
+>
+
+const PolarityPicker = forwardRef<
+  SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>,
+  PolarityPickerProps
+>(({ labelOff = 'Normally Off', labelOn = 'Normally On', ...rest }, ref) => {
+  const options = [
+    { value: 0, label: labelOff },
+    { value: 1, label: labelOn },
+  ] as Option<Polarity>[]
+
+  return (
+    <Select
+      {...rest}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default PolarityPicker
+
+export type { Polarity, PolarityPickerProps, PolarityPickerRef }