zds-pickers 4.0.3 → 4.0.6

package/lib/pickers/ResponseCurve.tsx

@@ -0,0 +1,304 @@
+import { useRef } from 'react'
+import useComponentSize from '../hooks/useComponentSize'
+import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
+import SVGText from '../other/SVGText'
+import type { Option } from './Select'
+
+const RESPONSE_CURVE_0 = 0
+const RESPONSE_CURVE_1 = 1
+const RESPONSE_CURVE_2 = 2
+const RESPONSE_CURVE_3 = 3
+const RESPONSE_CURVE_4 = 4
+const RESPONSE_CURVE_5 = 5
+const RESPONSE_CURVE_6 = 6
+const RESPONSE_CURVE_7 = 7
+
+type Curve =
+  | typeof RESPONSE_CURVE_0
+  | typeof RESPONSE_CURVE_1
+  | typeof RESPONSE_CURVE_2
+  | typeof RESPONSE_CURVE_3
+  | typeof RESPONSE_CURVE_4
+  | typeof RESPONSE_CURVE_5
+  | typeof RESPONSE_CURVE_6
+  | typeof RESPONSE_CURVE_7
+
+type ResponseCurve = {
+  value: Curve
+  label: React.ReactNode
+  c1: number
+  c2: number
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+  labelX: number
+  labelY: number
+}
+
+const RESPONSE_CURVES: Option<Curve>[] = [
+  {
+    value: RESPONSE_CURVE_7,
+    label: 'Always maxed out.',
+  },
+  {
+    value: RESPONSE_CURVE_6,
+    label: 'Most sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_5,
+    label: 'Moderately sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_4,
+    label: 'A little sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_0,
+    label: 'Linear, no change.',
+  },
+  {
+    value: RESPONSE_CURVE_1,
+    label: 'A little less sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_2,
+    label: 'Even less sensitive.',
+  },
+  {
+    value: RESPONSE_CURVE_3,
+    label: 'Least sensitive.',
+  },
+]
+
+// const width = 218
+// const height = 150
+const axisOffset = 20
+const buttonSize = 15
+
+const axisX1 = axisOffset
+const axisY1 = axisOffset
+
+type ResponseCurveProps = {
+  autosize: boolean
+  disabled?: boolean
+  inverted: boolean
+  onChange: (event: { target: { value: Curve } }) => void
+  Tooltip: React.FC<TooltipProps>
+  value: Curve
+}
+
+const ResponseCurve = (props: ResponseCurveProps) => {
+  const {
+    Tooltip = DefaultTooltip,
+    autosize,
+    disabled,
+    inverted,
+    onChange,
+    value: responseCurve,
+  } = props
+
+  const ref = useRef(null)
+  const svgRef = useRef(null)
+  const { height: ourHeight, width: ourWidth } = useComponentSize(ref)
+
+  const width = autosize ? ourWidth || 218 : 218
+  const height = autosize ? ourHeight || 150 : 150
+
+  const axisX2 = width - axisOffset
+  const axisY2 = height - axisOffset
+
+  const xMid = width / 2
+  const yMid = height / 2
+
+  const svgProps = { ref: svgRef }
+
+  const responseCurves = RESPONSE_CURVES.map(
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
+    ({ value, label }): ResponseCurve => {
+      let c1 = 0
+      let c2 = 0
+      let x1 = axisX1
+      let y1 = inverted ? axisY1 : axisY2
+      let x2 = axisX2
+      let y2 = inverted ? axisY2 : axisY1
+      let labelX = xMid
+      let labelY = yMid
+      switch (value) {
+        case RESPONSE_CURVE_0:
+          c1 = xMid
+          c2 = yMid
+          labelY += 3
+
+          break
+        case RESPONSE_CURVE_1:
+          c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13
+          c2 = yMid - height * 0.13
+          labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1
+          labelY = yMid - height * 0.09
+          break
+
+        case RESPONSE_CURVE_2:
+          c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25
+          c2 = yMid - height * 0.25
+          labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2
+          labelY = yMid - height * 0.17
+          break
+
+        case RESPONSE_CURVE_3:
+          c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35
+          c2 = yMid - height * 0.35
+          labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28
+          labelY = yMid - height * 0.25
+          break
+
+        case RESPONSE_CURVE_4:
+          c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13
+          c2 = yMid + height * 0.13
+          labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1
+          labelY = yMid + height * 0.1
+          break
+
+        case RESPONSE_CURVE_5:
+          c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25
+          c2 = yMid + height * 0.25
+          labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2
+          labelY = yMid + height * 0.18
+          break
+
+        case RESPONSE_CURVE_6:
+          c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35
+          c2 = yMid + height * 0.35
+          labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28
+          labelY = yMid + height * 0.25
+          break
+
+        case RESPONSE_CURVE_7:
+          x1 = inverted ? axisX1 : axisX2
+          y1 = axisY1
+          x2 = x1
+          y2 = axisY2
+          c1 = x1
+          c2 = yMid
+          labelX = x1 - 5
+          labelY = height - 30
+          break
+
+        default:
+          break
+      }
+      return {
+        value,
+        label,
+        c1,
+        c2,
+        x1,
+        y1,
+        x2,
+        y2,
+        labelX,
+        labelY,
+      }
+    },
+  )
+
+  return (
+    <div
+      className="response-curve-picker"
+      ref={ref}>
+      <svg {...svgProps}>
+        <rect
+          className="container"
+          height={height}
+          rx={3}
+          ry={3}
+          width={width}
+          x={0}
+          y={0}
+        />
+
+        <SVGText
+          className="axis"
+          textAnchor="middle"
+          transform={`translate(${axisX1 - 14} ${height / 2}) rotate(90)`}
+          x={0}
+          y={0}
+          text="Applied force"
+        />
+
+        <SVGText
+          className="axis"
+          textAnchor="middle"
+          transform={`translate(${width / 2} ${axisY2 + 13})`}
+          x={0}
+          y={0}
+          text="Output (velocity)"
+        />
+
+        <line
+          className="axis"
+          x1={axisX1}
+          x2={axisX1}
+          y1={axisY1}
+          y2={axisY2}
+        />
+        <line
+          className="axis"
+          x1={axisX1}
+          x2={axisX2}
+          y1={axisY2}
+          y2={axisY2}
+        />
+
+        {responseCurves.map(
+          ({ value, label, x1, y1, x2, y2, c1, c2, labelX, labelY }) => (
+            <g key={value}>
+              <path
+                className={value === responseCurve ? 'curve-selected' : 'curve'}
+                d={`M${x1} ${y1} C ${c1} ${c2}, ${c1} ${c2}, ${x2} ${y2}`}
+              />
+
+              <Tooltip
+                placement="left"
+                title={label}>
+                <rect
+                  className={
+                    value === responseCurve ? 'button-selected' : 'button'
+                  }
+                  height={buttonSize}
+                  onClick={
+                    disabled
+                      ? f => f
+                      : () =>
+                          onChange({
+                            target: {
+                              value: Number.parseInt(String(value)) as Curve,
+                            },
+                          })
+                  }
+                  transform={`translate(${labelX + 3} ${labelY - buttonSize / 1.05}) rotate(45)`}
+                  width={buttonSize}
+                />
+              </Tooltip>
+
+              <text
+                className={
+                  value === responseCurve ? 'button-selected' : 'button'
+                }
+                transform={`translate(${labelX} ${labelY})`}>
+                {value}
+                <title>{label}</title>
+              </text>
+            </g>
+          ),
+        )}
+      </svg>
+    </div>
+  )
+}
+
+export default ResponseCurve
+
+export { RESPONSE_CURVES }
+
+export type { Curve, ResponseCurve, ResponseCurveProps }

package/lib/pickers/ResponseCurvePicker.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useCallback } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
+import { findObj } from '../utils'
+import ResponseCurve, { type Curve, RESPONSE_CURVES } from './ResponseCurve'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type ResponseCurvePickerProps = SelectProps<Curve> & {
+  inverted?: boolean
+  Tooltip?: React.FC<TooltipProps>
+}
+
+type ResponseCurvePickerRef = SelectInstance<
+  Option<Curve>,
+  false,
+  GroupBase<Option<Curve>>
+>
+
+const ResponseCurvePicker = forwardRef<
+  SelectInstance<Option<Curve>, false, GroupBase<Option<Curve>>>,
+  ResponseCurvePickerProps
+>((props, ref) => {
+  const {
+    Tooltip = DefaultTooltip,
+    inverted = false,
+    onChange,
+    value,
+    ...rest
+  } = props
+
+  const Placeholder = useCallback(
+    () => (
+      <div className="singleValue">
+        {(findObj('value', value)(RESPONSE_CURVES) as Option<Curve>)?.label}
+      </div>
+    ),
+    [value],
+  )
+
+  const MenuList = useCallback(
+    ({ setValue }: { setValue: (v: Curve) => void }) => (
+      <ResponseCurve
+        autosize
+        inverted={inverted}
+        onChange={({ target: { value: v } }) => {
+          setValue(v)
+          onChange(v)
+        }}
+        Tooltip={Tooltip}
+        value={Number.parseInt(String(value)) as Curve}
+      />
+    ),
+    [Tooltip, inverted, onChange, value],
+  )
+
+  return (
+    <Select
+      {...rest}
+      components={{
+        Placeholder,
+        MenuList,
+      }}
+      isSearchable={false}
+      onChange={f => f}
+      ref={ref}
+      value={value}
+    />
+  )
+})
+
+export default ResponseCurvePicker
+
+export type { ResponseCurvePickerProps, ResponseCurvePickerRef }

package/lib/pickers/Select.tsx

@@ -0,0 +1,248 @@
+import {
+  Children,
+  type JSX,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useMemo,
+} from 'react'
+import ReactSelect, {
+  type GroupBase,
+  type IndicatorsContainerProps,
+  components as originalComponents,
+  type PlaceholderProps,
+  type SelectInstance,
+  type SingleValue,
+  type StylesConfig,
+  type ValueContainerProps,
+} from 'react-select'
+import { omit } from '../utils'
+
+const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents
+
+type Option<T> = {
+  label: React.ReactNode
+  value: T
+}
+
+interface CustomIndicatorsContainerProps<T>
+  extends Omit<IndicatorsContainerProps<Option<T>, false>, 'selectProps'> {
+  children: React.ReactNode
+  selectProps: IndicatorsContainerProps<Option<T>, false>['selectProps'] & {
+    actionButton?: React.ReactNode
+    inputValue?: string
+    placeholder?: React.ReactNode
+  }
+}
+
+const CustomIndicatorsContainer = <T,>({
+  children,
+  ...rest
+}: CustomIndicatorsContainerProps<T>) => {
+  const actionButton = rest.selectProps?.actionButton
+
+  return (
+    <IndicatorsContainer {...rest}>
+      <div
+        onMouseDown={e => {
+          e.stopPropagation()
+          e.preventDefault()
+        }}
+        style={{ display: 'flex' }}>
+        {actionButton}
+        {children}
+      </div>
+    </IndicatorsContainer>
+  )
+}
+
+type CustomValueContainerProps<T> = (
+  | ValueContainerProps<Option<T>, false>
+  | PlaceholderProps<Option<T>, false>
+) & {
+  children: React.ReactNode
+  hasValue?: boolean
+  isFocused?: boolean
+}
+
+const CustomValueContainer = <T,>({
+  children,
+  ...props
+}: CustomValueContainerProps<T>) => (
+  <ValueContainer {...props}>
+    <Placeholder
+      {...props}
+      innerProps={props.innerProps || {}}
+      className={props.hasValue || props.selectProps.inputValue ? 'shrunk' : ''}
+      isFocused={props.isFocused ?? false}>
+      {props.selectProps.placeholder}
+    </Placeholder>
+    {Children.map(children, child =>
+      isValidElement(child) && child.type !== Placeholder ? child : null,
+    )}
+  </ValueContainer>
+)
+
+type SelectProps<T> = {
+  className?: string
+  components?: object
+  disabled?: boolean
+  filterOptions?: (candidate: Option<T>, inputValue: string) => boolean
+  formatOptionLabel?: (
+    option: Option<unknown>,
+    { context }: { context: 'menu' | 'value' },
+  ) => React.ReactNode
+  isSearchable?: boolean
+  label?: string
+  onChange: (value: Option<T>['value']) => void
+  options: Option<T>[] | { entries: Option<T>[] }[]
+  preserveMenuWidth?: boolean
+  shrinkLabel?: boolean
+  value: Option<T>['value']
+}
+
+const Select = forwardRef(
+  <T,>(
+    props: SelectProps<T>,
+    ref: React.ForwardedRef<
+      SelectInstance<Option<T>, false, GroupBase<Option<T>>>
+    >,
+  ) => {
+    const {
+      components,
+      disabled,
+      label,
+      onChange,
+      options = [],
+      preserveMenuWidth,
+      shrinkLabel,
+      value,
+      ...rest
+    } = props
+
+    const handleChange = useCallback(
+      (option: SingleValue<Option<unknown>>) => {
+        if (option) {
+          onChange((option as Option<T>).value)
+        }
+      },
+      [onChange],
+    )
+
+    const flatOptionsList = options.reduce<Option<T>[]>((acc, entry) => {
+      if ('entries' in entry) {
+        return acc.concat(entry.entries)
+      }
+      return acc.concat(entry)
+    }, [])
+
+    const selectedOption =
+      flatOptionsList.find(option => value === option.value) || undefined
+
+    const styles: unknown = useMemo(() => {
+      const base = preserveMenuWidth
+        ? {
+            menu: (base: Record<string, unknown>) => omit('width')(base),
+            menuList: (base: object) => ({
+              ...base,
+              overflowX: 'hidden',
+            }),
+            option: (base: object) => ({
+              ...base,
+              whiteSpace: 'nowrap',
+              paddingRight: 10,
+            }),
+          }
+        : {}
+
+      return shrinkLabel
+        ? {
+            ...base,
+            container: (provided: object /* , state */) => ({
+              ...provided,
+              marginTop: 10,
+            }),
+            placeholder: (
+              _provided: object,
+              state: PlaceholderProps<Option<T>, false>,
+            ) => ({
+              position: 'absolute',
+              left: state.hasValue || state.selectProps.inputValue ? -2 : '4%',
+              top: state.hasValue || state.selectProps.inputValue ? -12 : '50%',
+              transition: 'top 0.1s, font-size 0.1s, color 0.1s',
+              fontSize: (state.hasValue || state.selectProps.inputValue) && 13,
+            }),
+            valueContainer: (provided: object /* , state */) => ({
+              ...provided,
+              overflow: 'visible',
+            }),
+          }
+        : {
+            ...base,
+          }
+    }, [preserveMenuWidth, shrinkLabel])
+
+    return shrinkLabel ? (
+      <div className="zds-pickers__container">
+        <ReactSelect
+          {...rest}
+          classNamePrefix="zds-pickers"
+          components={{
+            IndicatorsContainer: CustomIndicatorsContainer,
+            ValueContainer: CustomValueContainer,
+            ...components,
+          }}
+          isDisabled={disabled}
+          onChange={handleChange}
+          options={flatOptionsList}
+          placeholder={label}
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          ref={ref as React.Ref<any>}
+          styles={
+            styles as StylesConfig<
+              Option<unknown>,
+              false,
+              GroupBase<Option<unknown>>
+            >
+          }
+          value={selectedOption}
+        />
+      </div>
+    ) : (
+      <div className="zds-pickers__container">
+        {Boolean(label) && <span className="zds-pickers__label">{label}</span>}
+        <ReactSelect
+          {...rest}
+          classNamePrefix="zds-pickers"
+          components={{
+            IndicatorsContainer: CustomIndicatorsContainer,
+            ...components,
+          }}
+          isDisabled={disabled}
+          onChange={handleChange}
+          options={flatOptionsList}
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          ref={ref as React.Ref<any>}
+          styles={
+            styles as StylesConfig<
+              Option<unknown>,
+              false,
+              GroupBase<Option<unknown>>
+            >
+          }
+          value={selectedOption}
+        />
+      </div>
+    )
+  },
+) as <T>(
+  props: SelectProps<T> & {
+    ref?: React.ForwardedRef<
+      SelectInstance<Option<T>, false, GroupBase<Option<T>>>
+    >
+  },
+) => JSX.Element
+
+export default Select
+
+export type { Option, SelectProps }

package/lib/pickers/StatusPicker.tsx

@@ -0,0 +1,28 @@
+import type { Status } from 'lib/midi/export'
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type StatusPickerProps = SelectProps<Status> & { statuses: Option<Status>[] }
+
+type StatusPickerRef = SelectInstance<
+  Option<Status>,
+  false,
+  GroupBase<Option<Status>>
+>
+
+const StatusPicker = forwardRef<
+  SelectInstance<Option<Status>, false, GroupBase<Option<Status>>>,
+  StatusPickerProps
+>(({ statuses, ...rest }, ref) => (
+  <Select<Status>
+    {...rest}
+    options={statuses}
+    ref={ref}
+  />
+))
+
+export default StatusPicker
+
+export type { StatusPickerProps, StatusPickerRef }

package/lib/pickers/ValuePicker.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, useCallback, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
+import { arraySequence, assertRange } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type ValuePickerProps = SelectProps<number> & {
+  highToLow?: boolean
+  max?: number
+  min?: number
+}
+
+type ValuePickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const ValuePicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  ValuePickerProps
+>((props, ref) => {
+  const {
+    disabled,
+    highToLow,
+    max = 127,
+    min = 0,
+    onChange,
+    value: initialValue = 0,
+    ...rest
+  } = props
+  const options = useMemo(() => {
+    const result = arraySequence(max - min + 1)
+      .map(i => min + i)
+      .map(value => ({ value, label: value }))
+    return (highToLow
+      ? result.reverse()
+      : result) as unknown as Option<number>[]
+  }, [highToLow, max, min])
+
+  const [value, setValue] = useStateWithDynamicDefault(initialValue)
+
+  const handleChange = useCallback(
+    (v: number | string) => {
+      onChange(assertRange(v, max, min))
+
+      setValue(Number.parseInt(String(v), 10))
+    },
+    [max, min, onChange, setValue],
+  )
+
+  return (
+    <Select
+      {...rest}
+      disabled={disabled}
+      onChange={handleChange}
+      options={options}
+      ref={ref}
+      value={value}
+    />
+  )
+})
+
+export default ValuePicker
+
+export type { ValuePickerProps, ValuePickerRef }