@chayns/react-audio-editor/lib/components/editor/controlBar/controlItemSettings/ControlItemSettings.js

Tool to edit audio tracks.

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp; /* eslint-disable react/no-array-index-key */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

require('./ControlItemSettings.css');

var _Bubble = require('chayns-components/lib/react-chayns-bubble/component/Bubble');

var _Bubble2 = _interopRequireDefault(_Bubble);

var _Slider = require('chayns-components/lib/react-chayns-slider/component/Slider');

var _Slider2 = _interopRequireDefault(_Slider);

var _Checkbox = require('chayns-components/lib/react-chayns-checkbox/component/Checkbox');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

var _isChildren = require('../../../../utils/isChildren');

var _isChildren2 = _interopRequireDefault(_isChildren);

var _Track = require('../../../../utils/Track');

var _Track2 = _interopRequireDefault(_Track);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ControlItemSettings = (_temp = _class = function (_PureComponent) {
    (0, _inherits3.default)(ControlItemSettings, _PureComponent);

    function ControlItemSettings(props) {
        (0, _classCallCheck3.default)(this, ControlItemSettings);

        var _this = (0, _possibleConstructorReturn3.default)(this, (ControlItemSettings.__proto__ || (0, _getPrototypeOf2.default)(ControlItemSettings)).call(this, props));

        _this.hide = function () {
            _this.open = false;
            _this.bubbleRef.current.hide(); // hide bubble
        };

        _this.checkboxOnChange = function (value) {
            var track = _this.props.track;
            var filter = _this.state.filter;

            _this.setState({ checked: value });
            track.setFilter(filter.id, filter.type, 'enabled', value);
        };

        _this.show = function (coordinates, filter) {
            _this.open = true;
            _this.setState({ coordinates: coordinates, filter: filter }); // set bubble coordinates
            _this.bubbleRef.current.show(); // show bubble
            var listener = function listener(event) {
                // listener for hiding
                if (!(0, _isChildren2.default)(event.target, 'control-item-settings') && !event.target.classList.contains('volume')) {
                    // hide bubble if click was outside from the bubble
                    _this.hide();
                    document.removeEventListener('mousedown', listener);
                    document.removeEventListener('touchstart', listener);
                }
            };
            document.addEventListener('mousedown', listener);
            document.addEventListener('touchstart', listener);
        };

        _this.toggle = function (coordinates, filter) {
            if (_this.open) {
                _this.hide();
            } else {
                _this.show(coordinates, filter);
            }
        };

        _this.open = false;
        _this.bubbleRef = _react2.default.createRef();
        _this.state = {
            coordinates: {
                x: 0,
                y: 0
            },
            filter: {
                options: []
            },
            checked: false
        };
        return _this;
    }

    (0, _createClass3.default)(ControlItemSettings, [{
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            var track = this.props.track;
            var filter = this.state.filter;
            // eslint-disable-next-line react/no-did-update-set-state

            this.setState({ checked: track.getFilterValue(filter.id, 'enabled') }); // update filter setting value
        }
    }, {
        key: 'render',
        value: function render() {
            var track = this.props.track;
            var _state = this.state,
                coordinates = _state.coordinates,
                filter = _state.filter,
                checked = _state.checked;

            var vertical = filter.type === _Track2.default.filterTypes.GAIN;
            return _react2.default.createElement(
                _Bubble2.default,
                {
                    ref: this.bubbleRef,
                    coordinates: coordinates,
                    className: (0, _classnames2.default)('control-item-settings', { 'control-item-settings--vertical': vertical }),
                    position: vertical || chayns.env.isMobile ? _Bubble2.default.position.BOTTOM_CENTER : _Bubble2.default.position.BOTTOM_LEFT
                },
                filter.showName ? _react2.default.createElement(
                    'h5',
                    null,
                    filter.showName
                ) : null,
                vertical || filter.options.length === 0 // show filter enabler if it's not the vertical gain
                ? null : _react2.default.createElement(_Checkbox2.default, {
                    toggleButton: true,
                    checked: checked,
                    onChange: this.checkboxOnChange
                }),
                filter.options.map(function (option, index) {
                    return (// show all filter options
                        _react2.default.createElement(_Slider2.default, (0, _extends3.default)({}, option, {
                            key: filter.showName + index,
                            onChange: function onChange(value) {
                                // need to be an inline arrow function because of option
                                track.setFilter(filter.id, filter.type, option.argumentName, value);
                            },
                            vertical: vertical,
                            defaultValue: track.getFilterValue(filter.id, option.argumentName),
                            disabled: !checked
                        }))
                    );
                })
            );
        }
    }]);
    return ControlItemSettings;
}(_react.PureComponent), _class.propTypes = {
    track: _propTypes2.default.instanceOf(_Track2.default).isRequired
}, _class.defaultProps = {}, _temp);
exports.default = ControlItemSettings;
module.exports = exports.default;