preact-material-components/Select/index.js

preact wrapper for "Material Components for the web"

"use strict";

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

var _preact = require("preact");

var _MaterialComponent = _interopRequireDefault(require("../MaterialComponent"));

var _select = require("@material/select/");

var _List = _interopRequireDefault(require("../List"));

var _Menu = _interopRequireDefault(require("../Menu"));

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

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

class Select extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'select';
    this._mdcProps = ['disabled', 'box', 'outlined'];
    this._changed = this._changed.bind(this);
  }

  _changed(e) {
    e = e || {};
    e.selectedIndex = e.selectedIndex || this.MDComponent.selectedIndex;
    e.selectedOptions = e.selectedOptions || this.MDComponent.selectedOptions;

    if (this.props.onChange) {
      this.props.onChange(e);
    }
  }

  componentDidMount() {
    this.MDComponent = new _select.MDCSelect(this.base);
    this.MDComponent.listen('MDCSelect:change', this._changed);
    this.updateSelection();
  }

  componentWillUnmount() {
    this.MDComponent.unlisten('MDCSelect:change', this._changed);
    this.MDComponent.destroy && this.MDComponent.destroy();
  }

  updateSelection() {
    if ('selectedIndex' in this.props) {
      const selectedIndex = typeof this.props.selectedIndex === 'number' ? this.props.selectedIndex : 0;
      this.MDComponent.selectedIndex = selectedIndex;
    }

    const selectedIndex = this.MDComponent.selectedIndex;

    if (selectedIndex === 0) {
      if (this._labelRef) {
        this._labelRef.classList.remove('mdc-floating-label--float-above');
      }
    } else {
      if (this._labelRef) {
        this._labelRef.classList.add('mdc-floating-label--float-above');
      }
    }
  }

  componentDidUpdate() {
    this.updateSelection();
  }

  materialDom(allprops) {
    const outlined = allprops.outlined,
          props = _objectWithoutProperties(allprops, ["outlined"]);

    return (0, _preact.h)("div", props, (0, _preact.h)("select", {
      "class": "mdc-select__native-control"
    }, props.hintText && (0, _preact.h)("option", {
      value: "",
      disabled: true,
      selected: true
    }), props.children), props.hintText && (0, _preact.h)("div", {
      "class": "mdc-floating-label",
      ref: _ref => {
        this._labelRef = _ref;
      }
    }, props.hintText), !outlined && (0, _preact.h)("div", {
      "class": "mdc-line-ripple"
    }), outlined && (0, _preact.h)("div", {
      "class": "mdc-notched-outline"
    }, (0, _preact.h)("svg", null, (0, _preact.h)("path", {
      "class": "mdc-notched-outline__path"
    }))), outlined && (0, _preact.h)("div", {
      "class": "mdc-notched-outline__idle"
    }));
  }

}

class SelectOption extends _List.default.Item {
  materialDom(props) {
    return (0, _preact.h)("option", props, props.children);
  }

}

Select.Item = SelectOption;
var _default = Select;
exports.default = _default;