@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/rmwc/textfield/code/index.js

@@ -1,571 +0,0 @@
-/* eslint-disable */
-"use strict";
-var __extends =
-    (this && this.__extends) ||
-    (function () {
-        var extendStatics = function (d, b) {
-            extendStatics =
-                Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array &&
-                    function (d, b) {
-                        d.__proto__ = b;
-                    }) ||
-                function (d, b) {
-                    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-                };
-            return extendStatics(d, b);
-        };
-        return function (d, b) {
-            extendStatics(d, b);
-            function __() {
-                this.constructor = d;
-            }
-            d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
-        };
-    })();
-var __assign =
-    (this && this.__assign) ||
-    function () {
-        __assign =
-            Object.assign ||
-            function (t) {
-                for (var s, i = 1, n = arguments.length; i < n; i++) {
-                    s = arguments[i];
-                    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-                }
-                return t;
-            };
-        return __assign.apply(this, arguments);
-    };
-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;
-    };
-var __importStar =
-    (this && this.__importStar) ||
-    function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-        result["default"] = mod;
-        return result;
-    };
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var textfield_1 = require("@material/textfield");
-var base_1 = require("@rmwc/base");
-var icon_1 = require("@rmwc/icon");
-var line_ripple_1 = require("@rmwc/line-ripple");
-var floating_label_1 = require("@rmwc/floating-label");
-var notched_outline_1 = require("@rmwc/notched-outline");
-var ripple_1 = require("@rmwc/ripple");
-var TextFieldRoot = ripple_1.withRipple()(
-    base_1.componentFactory({
-        displayName: "TextFieldRoot",
-        deprecate: {
-            box: ""
-        },
-        classNames: function (props) {
-            return [
-                "mdc-text-field",
-                "mdc-text-field--upgraded",
-                {
-                    "mdc-text-field--textarea": props.textarea,
-                    "mdc-text-field--fullwidth": props.fullwidth,
-                    "mdc-text-field--outlined": props.outlined,
-                    "mdc-text-field--dense": props.dense,
-                    "mdc-text-field--invalid": props.invalid,
-                    "mdc-text-field--disabled": props.disabled,
-                    "mdc-text-field--with-leading-icon": !!props.icon,
-                    "mdc-text-field--with-trailing-icon": !!props.trailingIcon,
-                    "mdc-text-field--no-label": !props.label
-                }
-            ];
-        },
-        consumeProps: [
-            "textarea",
-            "fullwidth",
-            "outlined",
-            "dense",
-            "invalid",
-            "disabled",
-            "icon",
-            "trailingIcon",
-            "label"
-        ]
-    })
-);
-var TextFieldInput = base_1.componentFactory({
-    displayName: "TextFieldInput",
-    defaultProps: {
-        type: "text"
-    },
-    tag: "input",
-    classNames: ["mdc-text-field__input"]
-});
-var TextFieldTextarea = base_1.componentFactory({
-    displayName: "TextFieldTextarea",
-    tag: "textarea",
-    classNames: ["mdc-text-field__input"]
-});
-/** A TextField component for accepting text input from a user. */
-var TextField = /** @class */ (function (_super) {
-    __extends(TextField, _super);
-    function TextField(props) {
-        var _this = _super.call(this, props) || this;
-        _this.generatedId = base_1.randomId("textfield");
-        _this.root = _this.createElement("root");
-        _this.input = _this.createElement("input");
-        _this.label = _this.createElement("label");
-        _this.lineRipple = _this.createElement("lineRipple");
-        _this.characterCounter = null;
-        _this.leadingIcon = null;
-        _this.trailingIcon = null;
-        _this.valueNeedsUpdate = false;
-        _this.handleOnChange = _this.handleOnChange.bind(_this);
-        return _this;
-    }
-    TextField.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        return new textfield_1.MDCTextFieldFoundation(
-            __assign(
-                {
-                    addClass: function (className) {
-                        return _this.root.addClass(className);
-                    },
-                    removeClass: function (className) {
-                        return _this.root.removeClass(className);
-                    },
-                    hasClass: function (className) {
-                        return _this.root.hasClass(className);
-                    },
-                    registerTextFieldInteractionHandler: function (evtType, handler) {
-                        return _this.root.addEventListener(evtType, handler);
-                    },
-                    deregisterTextFieldInteractionHandler: function (evtType, handler) {
-                        return _this.root.removeEventListener(evtType, handler);
-                    },
-                    registerValidationAttributeChangeHandler: function (handler) {
-                        var getAttributesList = function (mutationsList) {
-                            return mutationsList.map(function (mutation) {
-                                return mutation.attributeName;
-                            });
-                        };
-                        if (_this.input.ref) {
-                            var observer = new MutationObserver(function (mutationsList) {
-                                return handler(getAttributesList(mutationsList));
-                            });
-                            var targetNode = _this.input.ref;
-                            var config = { attributes: true };
-                            targetNode && observer.observe(targetNode, config);
-                            return observer;
-                        }
-                        return {};
-                    },
-                    deregisterValidationAttributeChangeHandler: function (observer) {
-                        observer && observer.disconnect();
-                    },
-                    isFocused: function () {
-                        return document.activeElement === _this.input.ref;
-                    }
-                },
-                this.getInputAdapterMethods(),
-                this.getLabelAdapterMethods(),
-                this.getLineRippleAdapterMethods(),
-                this.getOutlineAdapterMethods()
-            ),
-            this.getFoundationMap()
-        );
-    };
-    TextField.prototype.getLabelAdapterMethods = function () {
-        var _this = this;
-        return {
-            shakeLabel: function (shouldShake) {
-                return _this.label.setProp("shake", shouldShake);
-            },
-            floatLabel: function (shouldFloat) {
-                return _this.label.setProp("float", shouldFloat);
-            },
-            hasLabel: function () {
-                return !!_this.props.label;
-            },
-            getLabelWidth: function () {
-                return _this.label.ref ? _this.label.ref.getWidth() : 0;
-            }
-        };
-    };
-    TextField.prototype.getLineRippleAdapterMethods = function () {
-        var _this = this;
-        return {
-            activateLineRipple: function () {
-                if (_this.lineRipple) {
-                    _this.lineRipple.setProp("active", true);
-                }
-            },
-            deactivateLineRipple: function () {
-                if (_this.lineRipple) {
-                    _this.lineRipple.setProp("active", false);
-                }
-            },
-            setLineRippleTransformOrigin: function (normalizedX) {
-                if (_this.lineRipple) {
-                    _this.lineRipple.setProp("center", normalizedX);
-                }
-            }
-        };
-    };
-    TextField.prototype.getOutlineAdapterMethods = function () {
-        var _this = this;
-        return {
-            notchOutline: function (labelWidth) {
-                !!_this.outline && _this.outline.notch(labelWidth);
-            },
-            closeOutline: function () {
-                return _this.outline && _this.outline.closeNotch();
-            },
-            hasOutline: function () {
-                return !!_this.outline;
-            }
-        };
-    };
-    TextField.prototype.getInputAdapterMethods = function () {
-        var _this = this;
-        return {
-            registerInputInteractionHandler: function (evtType, handler) {
-                return _this.input.addEventListener(evtType, handler);
-            },
-            deregisterInputInteractionHandler: function (evtType, handler) {
-                return _this.input.removeEventListener(evtType, handler);
-            },
-            getNativeInput: function () {
-                return _this.input.ref;
-            }
-        };
-    };
-    TextField.prototype.getFoundationMap = function () {
-        return {
-            characterCounter: this.characterCounter ? this.characterCounter.foundation : undefined,
-            helperText: undefined,
-            leadingIcon: this.leadingIcon ? this.leadingIcon.foundation : undefined,
-            trailingIcon: this.trailingIcon ? this.trailingIcon.foundation : undefined
-        };
-    };
-    // handle leading and trailing icons
-    TextField.prototype.renderIcon = function (icon, leadOrTrail) {
-        var _this = this;
-        return React.createElement(TextFieldIcon, {
-            ref: function (ref) {
-                if (leadOrTrail === "leadingIcon") {
-                    _this.leadingIcon = ref;
-                } else {
-                    _this.trailingIcon = ref;
-                }
-            },
-            tabIndex: leadOrTrail === "trailingIcon" ? 0 : undefined,
-            icon: icon
-        });
-    };
-    TextField.prototype.sync = function (props) {
-        // Bug #362
-        // see comments below in render function
-        if (this.valueNeedsUpdate) {
-            this.foundation.setValue(String(props.value));
-            this.valueNeedsUpdate = false;
-        }
-    };
-    TextField.prototype.handleOnChange = function (evt) {
-        // this.props.onChange && this.props.onChange(evt);
-        // this.setState({});
-    };
-    TextField.prototype.renderHelpText = function (renderedCharacterCounter) {
-        var _a = this.props,
-            helpText = _a.helpText,
-            characterCount = _a.characterCount,
-            textarea = _a.textarea;
-        var shouldRender = !!helpText || (characterCount && !textarea);
-        if (!shouldRender) {
-            return null;
-        }
-        var shouldSpread = typeof helpText === "object" && !React.isValidElement(helpText);
-        return React.createElement(
-            "div",
-            { className: "mdc-text-field-helper-line" },
-            helpText && shouldSpread
-                ? React.createElement(exports.TextFieldHelperText, __assign({}, helpText))
-                : React.createElement(exports.TextFieldHelperText, null, helpText),
-            !textarea && renderedCharacterCounter
-        );
-    };
-    TextField.prototype.render = function () {
-        var _this = this;
-        var _a = this.props,
-            label = _a.label,
-            className = _a.className,
-            style = _a.style,
-            outlined = _a.outlined,
-            fullwidth = _a.fullwidth,
-            dense = _a.dense,
-            invalid = _a.invalid,
-            disabled = _a.disabled,
-            helpText = _a.helpText,
-            children = _a.children,
-            textarea = _a.textarea,
-            inputRef = _a.inputRef,
-            characterCount = _a.characterCount,
-            _icon = _a.icon,
-            _trailingIcon = _a.trailingIcon,
-            _withLeadingIcon = _a.withLeadingIcon,
-            _withTrailingIcon = _a.withTrailingIcon,
-            _b = _a.rootProps,
-            rootProps = _b === void 0 ? {} : _b,
-            rest = __rest(_a, [
-                "label",
-                "className",
-                "style",
-                "outlined",
-                "fullwidth",
-                "dense",
-                "invalid",
-                "disabled",
-                "helpText",
-                "children",
-                "textarea",
-                "inputRef",
-                "characterCount",
-                "icon",
-                "trailingIcon",
-                "withLeadingIcon",
-                "withTrailingIcon",
-                "rootProps"
-            ]);
-        var _c = this.props,
-            icon = _c.icon,
-            trailingIcon = _c.trailingIcon,
-            withLeadingIcon = _c.withLeadingIcon,
-            withTrailingIcon = _c.withTrailingIcon;
-        if (dense !== undefined) {
-            base_1.deprecationWarning(
-                "Textfield prop 'dense' is being removed in a future release by material-components-web."
-            );
-        }
-        if (withLeadingIcon !== undefined) {
-            base_1.deprecationWarning("Textfield prop 'withLeadingIcon' is now 'icon'.");
-            icon = withLeadingIcon;
-        }
-        if (withTrailingIcon !== undefined) {
-            base_1.deprecationWarning("Textfield prop 'withTrailingIcon' is now 'trailingIcon'.");
-            trailingIcon = withTrailingIcon;
-        }
-        // Fixes bug #362
-        // MDC breaks Reacts unidirectional data flow...
-        // we cant set the value on render, but we need to
-        // to create the side effects for the UI when we dynamically update the field
-        // Flag that it needs to be set so that we can call the foundation
-        // on componentDidUpdate
-        if (
-            this.props.value !== undefined &&
-            this.foundation &&
-            this.props.value !== this.foundation.getValue()
-        ) {
-            this.valueNeedsUpdate = true;
-        }
-        var tagProps = __assign({}, this.input.props(rest), {
-            disabled: disabled,
-            ref: function (ref) {
-                _this.input.setRef(ref);
-                if (typeof inputRef === "function") {
-                    inputRef && inputRef(ref);
-                } else if (typeof inputRef === "object") {
-                    inputRef.current = ref;
-                }
-            },
-            id: rest.id || this.generatedId
-        });
-        var renderedTag = textarea
-            ? React.createElement(TextFieldTextarea, __assign({}, tagProps))
-            : React.createElement(TextFieldInput, __assign({}, tagProps));
-        var renderedLabel = label
-            ? React.createElement(
-                  floating_label_1.FloatingLabel,
-                  __assign({}, this.label.props({}), {
-                      ref: this.label.setRef,
-                      htmlFor: tagProps.id
-                  }),
-                  label
-              )
-            : null;
-        var renderedCharacterCounter = characterCount
-            ? React.createElement(
-                  TextFieldCharacterCount,
-                  {
-                      ref: function (el) {
-                          _this.characterCounter = el;
-                      }
-                  },
-                  "F"
-              )
-            : null;
-        return React.createElement(
-            React.Fragment,
-            null,
-            React.createElement(
-                TextFieldRoot,
-                __assign(
-                    {},
-                    this.root.props(
-                        __assign({}, rootProps, { className: className, style: style })
-                    ),
-                    {
-                        label: label,
-                        invalid: invalid,
-                        icon: !!icon,
-                        trailingIcon: !!trailingIcon,
-                        textarea: textarea,
-                        dense: dense,
-                        disabled: disabled,
-                        outlined: outlined,
-                        fullwidth: fullwidth,
-                        ref: this.root.setRef
-                    }
-                ),
-                !!icon && this.renderIcon(icon, "leadingIcon"),
-                children,
-                !!textarea && renderedCharacterCounter,
-                renderedTag,
-                !!outlined
-                    ? React.createElement(
-                          React.Fragment,
-                          null,
-                          React.createElement(
-                              notched_outline_1.NotchedOutline,
-                              {
-                                  ref: function (ref) {
-                                      return (_this.outline = ref && ref.foundation);
-                                  }
-                              },
-                              renderedLabel
-                          ),
-                          !!trailingIcon && this.renderIcon(trailingIcon, "trailingIcon")
-                      )
-                    : React.createElement(
-                          React.Fragment,
-                          null,
-                          renderedLabel,
-                          !!trailingIcon && this.renderIcon(trailingIcon, "trailingIcon"),
-                          React.createElement(
-                              line_ripple_1.LineRipple,
-                              __assign({}, this.lineRipple.props({}))
-                          )
-                      )
-            ),
-            this.renderHelpText(renderedCharacterCounter)
-        );
-    };
-    TextField.displayName = "TextField";
-    return TextField;
-})(base_1.FoundationComponent);
-exports.TextField = TextField;
-var TextFieldCharacterCount = /** @class */ (function (_super) {
-    __extends(TextFieldCharacterCount, _super);
-    function TextFieldCharacterCount() {
-        var _this = (_super !== null && _super.apply(this, arguments)) || this;
-        _this.state = {
-            content: ""
-        };
-        return _this;
-    }
-    TextFieldCharacterCount.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        return new textfield_1.MDCTextFieldCharacterCounterFoundation({
-            setContent: function (content) {
-                _this.setState({ content: content });
-            }
-        });
-    };
-    TextFieldCharacterCount.prototype.render = function () {
-        return React.createElement(
-            "div",
-            { className: "mdc-text-field-character-counter" },
-            this.state.content
-        );
-    };
-    TextFieldCharacterCount.displayName = "TextFieldCharacterCount";
-    return TextFieldCharacterCount;
-})(base_1.FoundationComponent);
-/** A help text component */
-exports.TextFieldHelperText = base_1.componentFactory({
-    displayName: "TextFieldHelperText",
-    classNames: function (props) {
-        return [
-            "mdc-text-field-helper-text",
-            {
-                "mdc-text-field-helper-text--persistent": props.persistent,
-                "mdc-text-field-helper-text--validation-msg": props.validationMsg
-            }
-        ];
-    },
-    consumeProps: ["persistent", "validationMsg"]
-});
-/*********************************************************************
- * Icon
- *********************************************************************/
-/**
- * An Icon in a TextField
- */
-var TextFieldIcon = /** @class */ (function (_super) {
-    __extends(TextFieldIcon, _super);
-    function TextFieldIcon() {
-        var _this = (_super !== null && _super.apply(this, arguments)) || this;
-        _this.root = _this.createElement("root");
-        return _this;
-    }
-    TextFieldIcon.prototype.getDefaultFoundation = function () {
-        var _this = this;
-        return new textfield_1.MDCTextFieldIconFoundation({
-            getAttr: function (attr) {
-                return _this.root.getProp(attr);
-            },
-            setAttr: function (attr, value) {
-                return _this.root.setProp(attr, value);
-            },
-            removeAttr: function (attr) {
-                return _this.root.removeProp(attr);
-            },
-            setContent: function (content) {
-                // @ts-ignore
-                _this.root.setProp("icon", content);
-            },
-            registerInteractionHandler: function (evtType, handler) {
-                return _this.root.addEventListener(evtType, handler);
-            },
-            deregisterInteractionHandler: function (evtType, handler) {
-                return _this.root.removeEventListener(evtType, handler);
-            },
-            notifyIconAction: function () {
-                return _this.emit("onClick", {}, true);
-            }
-        });
-    };
-    TextFieldIcon.prototype.render = function () {
-        return React.createElement(
-            icon_1.Icon,
-            __assign(
-                {},
-                this.root.props(__assign({}, this.props, { className: "mdc-text-field__icon" }))
-            )
-        );
-    };
-    TextFieldIcon.displayName = "TextFieldIcon";
-    return TextFieldIcon;
-})(base_1.FoundationComponent);
-exports.TextFieldIcon = TextFieldIcon;