zds-pickers 3.10.0 → 3.11.1

package/dist/pickers/ChannelMappingPicker.js

@@ -1,14 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["channels", "className"];import React, { forwardRef, useCallback } from 'react';
+import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";var _excluded = ["channels", "className"];import React, { forwardRef, useCallback, useMemo } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
 import { arraySequence } from '../utils';
 import Select from './Select';
 
-var options = arraySequence(16).map(function (value) {return { value: value, label: value };});
+var defaultOptions = arraySequence(16).map(function (value) {return { value: value, label: value };});
 
 var ChannelMappingPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {var channels = _ref.channels,className = _ref.className,rest = _objectWithoutProperties(_ref, _excluded);
   var formatOptionLabel = useCallback(
-    function (_ref2, _ref3) {var value = _ref2.value;var context = _ref3.context;
+    function (_ref2, _ref3) {var value = _ref2.value,label = _ref2.label;var context = _ref3.context;
+      if (value === 'separator') {
+        return /*#__PURE__*/React.createElement("span", { className: "zds-mappings-user-mapping" }, label);
+      }
+
       var mapping = channels[value];
 
       return mapping ? /*#__PURE__*/
@@ -32,6 +36,29 @@ var ChannelMappingPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {var cha
     [channels]
   );
 
+  var options = useMemo(function () {
+    var result = defaultOptions.sort(function (a, b) {
+      if (channels[a.value] && !channels[b.value]) {
+        return -1;
+      }
+
+      if (!channels[a.value] && channels[b.value]) {
+        return 1;
+      }
+
+      return a.value - b.value;
+    });
+
+    var numFilled = result.filter(function (_ref4) {var value = _ref4.value;return !!channels[value];}).length;
+
+    if (numFilled && numFilled < 16) {
+      // insert a separator after the count of filled items
+      result.splice(numFilled, 0, { label: /*#__PURE__*/React.createElement("hr", null), value: 'separator' });
+    }
+
+    return result;
+  }, [channels]);
+
   return /*#__PURE__*/(
     React.createElement(Select, _extends({},
     rest, {

package/dist/pickers/NotePicker.js

@@ -1,17 +1,45 @@
-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", "mapping", "onChange", "value"];import React, { forwardRef, useCallback } from 'react';
+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,mapping = props.mapping,onChange = props.onChange,initialValue = props.value,rest = _objectWithoutProperties(props, _excluded);
-  var options = (mapping || emptyMapping()).map(formattedMapEntry).map(formattedListEntry);
+  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) {
@@ -37,15 +65,17 @@ var NotePicker = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 
 NotePicker.propTypes = {
+  channel: PropTypes.number.isRequired,
+  disabled: PropTypes.bool,
+  isMelodicMode: PropTypes.bool,
   mapping: PropTypes.arrayOf(mappingShape),
   onChange: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  value: PropTypes.number,
-  channel: PropTypes.number.isRequired
+  value: PropTypes.number
 };
 
 NotePicker.defaultProps = {
   disabled: false,
+  isMelodicMode: false,
   mapping: undefined,
   value: undefined
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "3.10.0",
+  "version": "3.11.1",
   "homepage": "https://github.com/dkadrios/zds-pickers#readme",
   "license": "MIT",
   "main": "dist/index.js",