preact-material-components/TextField/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 _Icon = _interopRequireDefault(require("../Icon"));

var _textfield = require("@material/textfield");

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

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; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/**
 * @prop persistent = false
 * @prop validation-msg = false
 */
class HelperText extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'text-field-helper-text';
    this._mdcProps = ['persistent', 'validation-msg'];
  }

  materialDom(props) {
    return (0, _preact.h)("p", _extends({}, props, {
      "aria-hidden": "true"
    }), props.children);
  }

}

class Label extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'floating-label';
  }

  materialDom(props) {
    return (0, _preact.h)("label", props, props.children);
  }

}

const defaultProps = {
  valid: true
};
/**
 * @prop fullwidth = false
 * @prop textarea = false
 * @prop dense = false
 * @prop disabled = false
 * @prop outlined = false
 * @prop box = false
 * @prop type = 'text'
 * @prop outerStyle = {[key: string]: string}
 * @prop value = ''
 * @prop label = ''
 */

class TextFieldInput extends _MaterialComponent.default {
  constructor() {
    super();
    this.componentName = 'text-field';
    this._mdcProps = ['fullwidth', 'textarea', 'dense', 'disabled', 'box', 'outlined'];
    this.state = {
      showFloatingLabel: false
    };
  }

  componentDidMount() {
    this.setState({
      showFloatingLabel: true
    }, () => {
      this.MDComponent = new _textfield.MDCTextField(this.control);
      this.props.onInit && this.props.onInit(this.MDComponent);
      setValid(defaultProps, this.props, this.MDComponent);
    });
  }

  componentWillUpdate(nextProps) {
    setValid(this.props, nextProps, this.MDComponent);
  }

  componentWillUnmount() {
    this.MDComponent && this.MDComponent.destroy && this.MDComponent.destroy();
  }

  getValue() {
    return this.MDComponent ? this.MDComponent.value : null;
  }

  materialDom(allprops) {
    let className = allprops.className,
        outerStyle = allprops.outerStyle,
        outlined = allprops.outlined,
        props = _objectWithoutProperties(allprops, ["className", "outerStyle", "outlined"]);

    className = className || '';

    if ('leadingIcon' in props) {
      className += ' mdc-text-field--box mdc-text-field--with-leading-icon';
    }

    if ('trailingIcon' in props) {
      className += ' mdc-text-field--box mdc-text-field--with-trailing-icon';
    }

    if ('value' in props && this.state.showFloatingLabel) {
      className = [className, 'mdc-text-field--upgraded'].join(' ');
    }

    if (props.label && props.fullwidth) {
      console.log('Passing a "label" prop is not supported when using a "fullwidth" text field.');
    }

    return (0, _preact.h)("div", {
      className: className,
      ref: this.setControlRef,
      style: outerStyle
    }, props.leadingIcon ? (0, _preact.h)(_Icon.default, {
      className: "mdc-text-field__icon"
    }, props.leadingIcon) : null, props.textarea ? (0, _preact.h)("textarea", _extends({
      className: "mdc-text-field__input"
    }, props)) : (0, _preact.h)("input", _extends({
      type: props.type || 'text',
      className: "mdc-text-field__input"
    }, props)), props.label && this.state.showFloatingLabel && (0, _preact.h)(Label, {
      "for": props.id
    }, props.label), props.trailingIcon ? (0, _preact.h)(_Icon.default, {
      className: "mdc-text-field__icon"
    }, props.trailingIcon) : null, props.textarea || outlined ? null : (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", {
      className: "mdc-notched-outline__path"
    }))) : null, outlined ? (0, _preact.h)("div", {
      className: "mdc-notched-outline__idle"
    }) : null);
  }

}
/**
 * @prop fullwidth = false
 * @prop textarea = false
 * @prop dense = false
 * @prop disabled = false
 * @prop outlined = false
 * @prop box = false
 * @prop type = 'text'
 * @prop outerStyle = {}
 * @prop value = ''
 * @prop label = ''
 * @prop helperText = ''
 * @prop helperTextPersistent = false
 * @prop helperTextValidationMsg = false
 */


class TextField extends _preact.Component {
  constructor() {
    super();
    this.id = TextField.uid();
    this.state = {
      showFloatingLabel: false
    };
  }

  componentDidMount() {
    this.setState({
      showFloatingLabel: true
    });
  }

  static uid() {
    if (!this.uidCounter) {
      this.uidCounter = 0;
    }

    return ++this.uidCounter;
  }

  render(allprops, {
    showFloatingLabel
  }) {
    const className = allprops.className,
          outerStyle = allprops.outerStyle,
          helperTextPersistent = allprops.helperTextPersistent,
          helperTextValidationMsg = allprops.helperTextValidationMsg,
          props = _objectWithoutProperties(allprops, ["className", "outerStyle", "helperTextPersistent", "helperTextValidationMsg"]);

    const showDiv = props.helperText || props.label && !showFloatingLabel;

    if ((props.helperText || props.label) && !props.id) {
      props.id = 'tf-' + this.id;
    } // Helper text


    const helperTextProps = {
      persistent: helperTextPersistent,
      'validation-msg': helperTextValidationMsg
    };
    return showDiv ? (0, _preact.h)("div", {
      className: className,
      style: outerStyle
    }, props.label && !showFloatingLabel && (0, _preact.h)("label", {
      "for": props.id
    }, props.cssLabel || `${props.label}: `), (0, _preact.h)(TextFieldInput, _extends({}, props, {
      onInit: MDComponent => {
        this.MDComponent = MDComponent;
      },
      "aria-controls": props.helperText && props.id + '-helper-text'
    })), props.helperText && (0, _preact.h)(HelperText, _extends({
      id: props.id + '-helper-text'
    }, helperTextProps), props.helperText)) : (0, _preact.h)(TextFieldInput, _extends({}, props, {
      className: className,
      outerStyle: outerStyle,
      onInit: MDComponent => {
        this.MDComponent = MDComponent;
      }
    }));
  }

}

TextField.defaultProps = {
  outerStyle: {}
};

function setValid(oldprops, newprops, textfield) {
  if ('valid' in oldprops && 'valid' in newprops && oldprops.valid !== newprops.valid) {
    textfield.valid = newprops.valid;
  }
}

TextField.Helptext = HelperText;
var _default = TextField;
exports.default = _default;