preact-material-components
Version:
preact wrapper for "Material Components for the web"
167 lines • 6.75 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { MDCTextField } from '@material/textfield';
import { Component, h } from 'preact';
import MaterialComponent from '../Base/MaterialComponent';
import Icon from '../Icon';
export class HelperText extends MaterialComponent {
constructor() {
super(...arguments);
this.componentName = 'text-field-helper-text';
this.mdcProps = ['persistent', 'validation-msg'];
}
materialDom(props) {
return (h("p", Object.assign({}, props, { "aria-hidden": "true" }), props.children));
}
}
export class Label extends MaterialComponent {
constructor() {
super(...arguments);
this.componentName = 'floating-label';
this.mdcProps = [];
}
materialDom(props) {
return h("label", Object.assign({}, props), props.children);
}
}
export class TextFieldInput extends MaterialComponent {
constructor() {
super(...arguments);
this.state = {
jsComponentAttached: false
};
this.componentName = 'text-field';
this.mdcProps = [
'fullwidth',
'textarea',
'dense',
'disabled',
'box',
'outlined'
];
this.mdcNotifyProps = ['valid', 'disabled'];
}
componentDidMount() {
super.componentDidMount();
this.setState({
jsComponentAttached: true
}, () => {
if (this.control) {
this.MDComponent = new MDCTextField(this.control);
if (this.props.onInit) {
this.props.onInit(this.MDComponent);
}
if (this.props.value) {
this.MDComponent.value = this.props.value;
}
}
this.afterComponentDidMount();
});
}
componentWillReceiveProps(nextProps) {
super.componentWillReceiveProps(nextProps);
if (this.MDComponent &&
nextProps.value &&
this.props.value !== nextProps.value &&
this.MDComponent.value !== nextProps.value) {
this.MDComponent.value = nextProps.value;
}
}
componentWillUnmount() {
super.componentWillUnmount();
if (this.MDComponent) {
this.MDComponent.destroy();
}
}
getValue() {
return this.MDComponent ? this.MDComponent.value : null;
}
materialDom(allprops) {
let { className, outerStyle, outlined } = allprops, props = __rest(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.jsComponentAttached) {
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.');
}
// noinspection RequiredAttributes
return (h("div", { className: className, ref: this.setControlRef, style: outerStyle },
props.leadingIcon ? (h(Icon, { className: "mdc-text-field__icon" }, props.leadingIcon)) : null,
props.textarea ? (h("textarea", Object.assign({ className: "mdc-text-field__input" }, props))) : (h("input", Object.assign({ type: props.type || 'text', className: "mdc-text-field__input", placeholder: this.state.jsComponentAttached
? undefined
: props.label + this.props.required
? '*'
: '' }, props))),
props.label && this.state.jsComponentAttached && (h(Label, { for: props.id }, props.label)),
props.trailingIcon ? (h(Icon, { className: "mdc-text-field__icon" }, props.trailingIcon)) : null,
props.textarea || outlined ? null : h("div", { class: "mdc-line-ripple" }),
outlined ? (h("div", { class: "mdc-notched-outline" },
h("svg", null,
h("path", { className: "mdc-notched-outline__path" })))) : null,
outlined ? h("div", { className: "mdc-notched-outline__idle" }) : null));
}
buildClassName(props) {
let cn = super.buildClassName(props);
if (this.MDComponent) {
cn += ' mdc-text-field--upgraded';
}
return cn;
}
}
TextFieldInput.defaultProps = {
valid: true
};
export class TextField extends Component {
constructor() {
super(...arguments);
this.id = TextField.uid();
}
static uid() {
return ++this.uidCounter;
}
componentDidMount() {
this.setState({
jsComponentAttached: true
});
}
render(allprops) {
const { className, outerStyle, helperTextPersistent, helperTextValidationMsg } = allprops, props = __rest(allprops, ["className", "outerStyle", "helperTextPersistent", "helperTextValidationMsg"]);
const showDiv = props.helperText;
if ((props.helperText || props.label) && !props.id) {
props.id = `tf-${this.id}`;
}
// Helper text
const helperTextProps = {
persistent: helperTextPersistent,
'validation-msg': helperTextValidationMsg
};
return showDiv ? (h("div", { className: className, style: outerStyle },
h(TextFieldInput, Object.assign({}, props, { onInit: MDComponent => {
this.MDComponent = MDComponent;
}, "aria-controls": props.helperText && `${props.id}-helper-text` })),
props.helperText && (h(HelperText, Object.assign({ id: `${props.id}-helper-text` }, helperTextProps), props.helperText)))) : (h(TextFieldInput, Object.assign({}, props, { className: className, outerStyle: outerStyle, onInit: MDComponent => {
this.MDComponent = MDComponent;
} })));
}
}
TextField.uidCounter = 0;
export default class default_1 extends TextField {
}
default_1.HelperText = HelperText;
//# sourceMappingURL=index.js.map