zds-pickers 3.11.2 → 4.0.0

package/dist/pickers/KnobPicker.js

@@ -1,101 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["disabled", "highToLow", "includeLabel", "includePicker", "knobProps", "label", "max", "min", "onChange", "shrinkLabel", "value", "wheelEnabled", "wheelSensitivity"];function ownKeys(e, r) {var t = Object.keys(e);if (Object.getOwnPropertySymbols) {var o = Object.getOwnPropertySymbols(e);r && (o = o.filter(function (r) {return Object.getOwnPropertyDescriptor(e, r).enumerable;})), t.push.apply(t, o);}return t;}function _objectSpread(e) {for (var r = 1; r < arguments.length; r++) {var t = null != arguments[r] ? arguments[r] : {};r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {_defineProperty(e, r, t[r]);}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));});}return e;}import React, { forwardRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { arraySequence } from '../utils';
-import Select from './Select';
-import Knob from './Knob';
-
-var KnobPicker = /*#__PURE__*/forwardRef(function (props, ref) {
-  var
-    disabled =
-
-
-
-
-
-
-
-
-
-
-
-
-
-    props.disabled,highToLow = props.highToLow,includeLabel = props.includeLabel,includePicker = props.includePicker,knobProps = props.knobProps,label = props.label,max = props.max,min = props.min,onChange = props.onChange,shrinkLabel = props.shrinkLabel,value = props.value,wheelEnabled = props.wheelEnabled,wheelSensitivity = props.wheelSensitivity,rest = _objectWithoutProperties(props, _excluded);
-
-  var options = useMemo(
-    function () {
-      var result = arraySequence(max - min + 1).
-      map(function (i) {return min + i;}).
-      map(function (i) {return { value: i, label: i };});
-      return highToLow ? result.reverse() : result;
-    },
-    [highToLow, max, min]
-  );
-
-  return /*#__PURE__*/(
-    React.createElement("div", { className: "zds-pickers__container" },
-    Boolean(!shrinkLabel && Boolean(label)) && /*#__PURE__*/React.createElement("span", { className: "zds-pickers__label" }, label), /*#__PURE__*/
-    React.createElement("div", { style: { display: 'inline-flex', gap: 10, alignItems: 'center' } },
-    Boolean(includePicker) && /*#__PURE__*/
-    React.createElement(Select, _objectSpread(_objectSpread({},
-
-    rest), {}, {
-      disabled: disabled,
-      isDisabled: disabled,
-      onChange: onChange,
-      options: options,
-      ref: ref,
-      value: value })
-
-    ), /*#__PURE__*/
-
-
-    React.createElement(Knob, _objectSpread({
-
-      disabled: disabled,
-      max: max,
-      min: min,
-      onChange: onChange,
-      value: value,
-      wheelEnabled: wheelEnabled,
-      wheelSensitivity: wheelSensitivity },
-    knobProps)
-
-    )
-    )
-    ));
-
-});
-
-KnobPicker.propTypes = {
-  disabled: PropTypes.bool,
-  highToLow: PropTypes.bool,
-  includeLabel: PropTypes.bool,
-  includePicker: PropTypes.bool,
-  knobProps: PropTypes.object,
-  label: PropTypes.string,
-  max: PropTypes.number,
-  min: PropTypes.number,
-  onChange: PropTypes.func.isRequired,
-  shrinkLabel: PropTypes.bool,
-  value: PropTypes.number,
-  wheelEnabled: PropTypes.bool,
-  wheelSensitivity: PropTypes.number
-};
-
-KnobPicker.defaultProps = {
-  disabled: false,
-  highToLow: false,
-  includeLabel: true,
-  includePicker: false,
-  knobProps: undefined,
-  label: undefined,
-  max: 127,
-  min: 0,
-  shrinkLabel: false,
-  value: 0,
-  wheelEnabled: false,
-  wheelSensitivity: 0.1
-};
-
-export default KnobPicker;

package/dist/pickers/LatchPicker.js

@@ -1,23 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import Select from './Select';
-
-var options = [
-{ value: 0, label: 'Momentary' },
-{ value: 1, label: 'Latching' }];
-
-
-var LatchPicker = /*#__PURE__*/forwardRef(function (props, ref) {return /*#__PURE__*/(
-    React.createElement(Select, _extends({},
-    props, {
-      options: options,
-      ref: ref })
-    ));}
-);
-
-LatchPicker.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.number.isRequired
-};
-
-export default LatchPicker;

package/dist/pickers/MappingPicker.js

@@ -1,61 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["allowClearing"];import React, { forwardRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { getStockNames, getUserMappingNames } from 'zds-mappings';
-import Select from './Select';
-
-var MappingPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {var allowClearing = _ref.allowClearing,rest = _objectWithoutProperties(_ref, _excluded);
-  var stockMappings = getStockNames();
-  var userMappings = getUserMappingNames();
-
-  var options = useMemo(function () {
-    var result = allowClearing ?
-    [{
-      value: 'No Mapping',
-      label: /*#__PURE__*/React.createElement("span", { className: "zds-mappings-clear-mapping" }, "No Mapping")
-    }] :
-    [];
-
-    return [].concat(
-      result, [
-
-      {
-        label: allowClearing ? /*#__PURE__*/React.createElement("hr", null) : '',
-        options: userMappings.map(function (label) {return {
-            value: label,
-            label: /*#__PURE__*/React.createElement("span", { className: "zds-mappings-user-mapping" }, label)
-          };})
-      },
-
-      {
-        label: userMappings.length ? /*#__PURE__*/
-        React.createElement("hr", null) :
-        allowClearing ? /*#__PURE__*/React.createElement("hr", null) : '',
-        options: stockMappings.map(function (label) {return {
-            label: label,
-            value: label
-          };})
-      }]);
-
-  }, [allowClearing, stockMappings, userMappings]);
-
-  return /*#__PURE__*/(
-    React.createElement(Select, _extends({},
-    rest, {
-      options: options,
-      ref: ref })
-    ));
-
-});
-
-MappingPicker.propTypes = {
-  allowClearing: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string
-};
-
-MappingPicker.defaultProps = {
-  allowClearing: true,
-  value: 'General MIDI'
-};
-
-export default MappingPicker;

package/dist/pickers/NotePicker.js

@@ -1,83 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["channel", "disabled", "isMelodicMode", "mapping", "onChange", "value"];import React, { forwardRef, useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { emptyMapping } from 'zds-mappings';
-import { Midi } from 'tonal';
-import { mappingShape } from '../shapes';
-import { assertRange } from '../utils';
-import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
-import Select from './Select';
-
-var midiToNoteName = Midi.midiToNoteName;
-
-var formattedMapEntry = function formattedMapEntry(_ref) {var note = _ref.note,name = _ref.name;return "".concat(note, " ").concat(name.length ? '-' : '', " ").concat(name);};
-var formattedListEntry = function formattedListEntry(label, idx) {return { label: label, value: idx + 1 };};
-
-var NotePicker = /*#__PURE__*/forwardRef(function (props, ref) {
-  var
-    channel =
-
-
-
-
-
-
-    props.channel,disabled = props.disabled,isMelodicMode = props.isMelodicMode,mapping = props.mapping,onChange = props.onChange,initialValue = props.value,rest = _objectWithoutProperties(props, _excluded);
-
-  var options = useMemo(function () {
-    if (isMelodicMode) {
-      return emptyMapping().
-      map(function (_ref2) {var note = _ref2.note;
-        var midiNoteName = midiToNoteName(note, { sharps: false }).
-        replace('b', '♭').
-        replace('#', '♯');
-        return "".concat(midiNoteName, " (#").concat(note, ")");
-      }).
-      map(formattedListEntry);
-    }
-
-    return (mapping || emptyMapping()).
-    map(formattedMapEntry).
-    map(formattedListEntry);
-  }, [isMelodicMode, mapping]);
-
-  var _useStateWithDynamicD = useStateWithDynamicDefault(initialValue),_useStateWithDynamicD2 = _slicedToArray(_useStateWithDynamicD, 2),value = _useStateWithDynamicD2[0],setValue = _useStateWithDynamicD2[1];
-
-  var handleChange = useCallback(function (v) {
-    var possibleNoteNumber = assertRange(v, 128, 0);
-
-    if (possibleNoteNumber > 0) {
-      onChange(possibleNoteNumber);
-    }
-    setValue(v);
-  }, [onChange, setValue]);
-
-  return /*#__PURE__*/(
-    React.createElement(Select, _extends({},
-    rest, {
-      disabled: disabled,
-      isDisabled: disabled,
-      onChange: handleChange,
-      options: options,
-      ref: ref,
-      value: value })
-    ));
-
-});
-
-NotePicker.propTypes = {
-  channel: PropTypes.number.isRequired,
-  disabled: PropTypes.bool,
-  isMelodicMode: PropTypes.bool,
-  mapping: PropTypes.arrayOf(mappingShape),
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.number
-};
-
-NotePicker.defaultProps = {
-  disabled: false,
-  isMelodicMode: false,
-  mapping: undefined,
-  value: undefined
-};
-
-export default NotePicker;

package/dist/pickers/PianoPicker.js

@@ -1,104 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["height", "width"];import React from 'react';
-import PropTypes from 'prop-types';
-import { Piano as ReactPiano } from 'zds-react-piano';
-import SoundfontProvider from '../other/SoundFontProvider';
-import DefaultTooltip from '../other/DefaultTooltip';
-
-var firstNote = 21;
-var lastNote = 108;
-var numNotes = lastNote - firstNote - 1;
-
-var whiteNotes = numNotes * 0.7; // approx
-
-var audioContext = new (window.AudioContext || window.webkitAudioContext)();
-
-var PianoPicker = function PianoPicker(_ref) {var height = _ref.height,width = _ref.width,rest = _objectWithoutProperties(_ref, _excluded);
-  var keyWidth = width / whiteNotes + 2;
-  var keyWidthToHeight = keyWidth / height;
-
-  return /*#__PURE__*/(
-    React.createElement("div", null, /*#__PURE__*/
-    React.createElement(ReactPiano, _extends({
-      keyWidthToHeight: keyWidthToHeight,
-      noteRange: { first: firstNote, last: lastNote },
-      width: width },
-    rest)
-    )
-    ));
-
-};
-
-var WithProvider = function WithProvider(_ref2) {var
-    format = _ref2.format,
-    height = _ref2.height,
-    hostname = _ref2.hostname,
-    instrumentName = _ref2.instrumentName,
-    onChange = _ref2.onChange,
-    onClick = _ref2.onClick,
-    onDoubleClick = _ref2.onDoubleClick,
-    onKeyMouseEnter = _ref2.onKeyMouseEnter,
-    onKeyMouseLeave = _ref2.onKeyMouseLeave,
-    soundfont = _ref2.soundfont,
-    width = _ref2.width;return /*#__PURE__*/(
-
-    React.createElement(SoundfontProvider, {
-
-      audioContext: audioContext,
-      format: format,
-      hostname: hostname,
-      instrumentName: instrumentName,
-      onChange: onChange,
-      soundfont: soundfont,
-
-      render: function render(_ref3) {var isLoading = _ref3.isLoading,playNote = _ref3.playNote,stopNote = _ref3.stopNote;return /*#__PURE__*/(
-          React.createElement(PianoPicker, {
-            disabled: isLoading,
-
-            height: height,
-            onClick: onClick,
-            onDoubleClick: onDoubleClick,
-            onKeyMouseEnter: onKeyMouseEnter,
-            onKeyMouseLeave: onKeyMouseLeave,
-            playNote: playNote,
-            stopNote: stopNote,
-            width: width }
-
-          ));} }
-
-    ));};
-
-
-PianoPicker.propTypes = {
-  height: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
-};
-
-WithProvider.propTypes = {
-  format: PropTypes.oneOf(['mp3', 'ogg']),
-  height: PropTypes.number.isRequired,
-  hostname: PropTypes.string,
-  instrumentName: PropTypes.string,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  onKeyMouseEnter: PropTypes.func,
-  onKeyMouseLeave: PropTypes.func,
-  soundfont: PropTypes.oneOf(['MusyngKite', 'FluidR3_GM']),
-  Tooltip: PropTypes.elementType,
-  width: PropTypes.number.isRequired
-};
-
-WithProvider.defaultProps = {
-  format: undefined, // 'mp3',
-  hostname: undefined,
-  instrumentName: undefined,
-  onChange: undefined,
-  onClick: undefined,
-  onDoubleClick: undefined,
-  onKeyMouseEnter: undefined,
-  onKeyMouseLeave: undefined,
-  soundfont: undefined, // 'MusyngKite',
-  Tooltip: DefaultTooltip
-};
-
-export default WithProvider;

package/dist/pickers/PolarityPicker.js

@@ -1,32 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["labelOff", "labelOn"];import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import Select from './Select';
-
-var PolarityPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {var labelOff = _ref.labelOff,labelOn = _ref.labelOn,rest = _objectWithoutProperties(_ref, _excluded);
-  var options = [
-  { value: 0, label: labelOff },
-  { value: 1, label: labelOn }];
-
-
-  return /*#__PURE__*/(
-    React.createElement(Select, _extends({},
-    rest, {
-      options: options,
-      ref: ref })
-    ));
-
-});
-
-PolarityPicker.propTypes = {
-  labelOff: PropTypes.string,
-  labelOn: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.number.isRequired
-};
-
-PolarityPicker.defaultProps = {
-  labelOn: 'Normally On',
-  labelOff: 'Normally Off'
-};
-
-export default PolarityPicker;

package/dist/pickers/ResponseCurve.js

@@ -1,263 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import useComponentSize from '../hooks/useComponentSize';
-import SVGText from '../other/SVGText';
-import DefaultTooltip from '../other/DefaultTooltip';
-
-var RESPONSE_CURVE_0 = 0;
-var RESPONSE_CURVE_1 = 1;
-var RESPONSE_CURVE_2 = 2;
-var RESPONSE_CURVE_3 = 3;
-var RESPONSE_CURVE_4 = 4;
-var RESPONSE_CURVE_5 = 5;
-var RESPONSE_CURVE_6 = 6;
-var RESPONSE_CURVE_7 = 7;
-
-export var RESPONSE_CURVES = [
-{
-  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
-var axisOffset = 20;
-var buttonSize = 15;
-
-var axisX1 = axisOffset;
-var axisY1 = axisOffset;
-
-var ResponseCurve = function ResponseCurve(props) {
-  var Tooltip = props.Tooltip,autosize = props.autosize,disabled = props.disabled,inverted = props.inverted,onChange = props.onChange,responseCurve = props.value;
-
-  var ref = useRef(null);
-  var svgRef = useRef(null);
-  var _useComponentSize = useComponentSize(ref),ourHeight = _useComponentSize.height,ourWidth = _useComponentSize.width;
-
-  var width = autosize ? ourWidth || 218 : 218;
-  var height = autosize ? ourHeight || 150 : 150;
-
-  var axisX2 = width - axisOffset;
-  var axisY2 = height - axisOffset;
-
-  var xMid = width / 2;
-  var yMid = height / 2;
-
-  var svgProps = { ref: svgRef };
-
-  var responseCurves = RESPONSE_CURVES.map(function (_ref) {var value = _ref.value,label = _ref.label;
-    var c1;
-    var c2;
-    var x1 = axisX1;
-    var y1 = inverted ? axisY1 : axisY2;
-    var x2 = axisX2;
-    var y2 = inverted ? axisY2 : axisY1;
-    var labelX = xMid;
-    var 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: value,
-      label: label,
-      c1: c1,
-      c2: c2,
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2,
-      labelX: labelX,
-      labelY: labelY
-    };
-  });
-
-  return /*#__PURE__*/(
-    React.createElement("div", {
-      className: "response-curve-picker",
-      ref: ref }, /*#__PURE__*/
-
-    React.createElement("svg", svgProps, /*#__PURE__*/
-    React.createElement("rect", {
-      className: "container",
-      height: height,
-      rx: 3,
-      ry: 3,
-      width: width,
-      x: 0,
-      y: 0 }
-    ), /*#__PURE__*/
-
-    React.createElement(SVGText, {
-      className: "axis",
-      textAnchor: "middle",
-      transform: "translate(".concat(axisX1 - 14, " ").concat(height / 2, ") rotate(90)"),
-      x: 0,
-      y: 0 },
-    "Applied force"
-
-    ), /*#__PURE__*/
-    React.createElement(SVGText, {
-      className: "axis",
-      textAnchor: "middle",
-      transform: "translate(".concat(width / 2, " ").concat(axisY2 + 13, ")"),
-      x: 0,
-      y: 0 },
-    "Output (velocity)"
-
-    ), /*#__PURE__*/
-
-    React.createElement("line", {
-      className: "axis",
-      x1: axisX1,
-      x2: axisX1,
-      y1: axisY1,
-      y2: axisY2 }
-    ), /*#__PURE__*/
-    React.createElement("line", {
-      className: "axis",
-      x1: axisX1,
-      x2: axisX2,
-      y1: axisY2,
-      y2: axisY2 }
-    ),
-
-    responseCurves.map(function (_ref2) {var value = _ref2.value,label = _ref2.label,x1 = _ref2.x1,y1 = _ref2.y1,x2 = _ref2.x2,y2 = _ref2.y2,c1 = _ref2.c1,c2 = _ref2.c2,labelX = _ref2.labelX,labelY = _ref2.labelY;return /*#__PURE__*/(
-        React.createElement("g", { key: value }, /*#__PURE__*/
-        React.createElement("path", {
-          className: value === responseCurve ? 'curve-selected' : 'curve',
-          d: "M".concat(x1, " ").concat(y1, " C ").concat(c1, " ").concat(c2, ", ").concat(c1, " ").concat(c2, ", ").concat(x2, " ").concat(y2) }
-        ), /*#__PURE__*/
-
-        React.createElement(Tooltip, {
-          placement: "left",
-          title: label }, /*#__PURE__*/
-
-        React.createElement("rect", {
-          className: value === responseCurve ? 'button-selected' : 'button',
-          height: buttonSize,
-          onClick: disabled ? null : function () {return onChange({ target: { value: value } });},
-          transform: "translate(".concat(labelX + 3, " ").concat(labelY - buttonSize / 1.05, ") rotate(45)"),
-          width: buttonSize }
-        )
-        ), /*#__PURE__*/
-
-        React.createElement("text", {
-          className: value === responseCurve ? 'button-selected' : 'button',
-          transform: "translate(".concat(labelX, " ").concat(labelY, ")") },
-
-        value, /*#__PURE__*/
-        React.createElement("title", null, label)
-        )
-        ));}
-    )
-    )
-    ));
-
-};
-
-ResponseCurve.propTypes = {
-  autosize: PropTypes.bool,
-  disabled: PropTypes.bool,
-  inverted: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  Tooltip: PropTypes.elementType,
-  value: PropTypes.number.isRequired
-};
-
-ResponseCurve.defaultProps = {
-  autosize: false,
-  disabled: false,
-  inverted: false,
-  Tooltip: DefaultTooltip
-};
-
-export default ResponseCurve;