wix-style-react/dist/src/LabelledElement/LabelledElement.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _LabelledElementSt = require("./LabelledElement.st.css");
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _generateId = require("../utils/generateId");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/LabelledElement/LabelledElement.js";
class LabelledElement extends _react.default.Component {
  constructor() {
    super(...arguments);
    this.state = {
      hasFocus: false,
      inputId: "labelled-element-".concat((0, _generateId.generateID)()),
      value: undefined
    };
    this._isInputEmpty = () => {
      return this._isInputControlled() ? !this.props.value : !this.state.value;
    };
    this._isInputControlled = () => typeof this.props.value !== 'undefined';
    this._handleFocus = event => {
      this.setState({
        hasFocus: true
      });
    };
    this._handleBlur = event => {
      this.setState({
        hasFocus: false
      });
    };
    this._handleOnChange = event => {
      if (!this._isInputControlled()) {
        this.setState({
          value: event.target.value
        });
      }
    };
    this._placeLabelOnTop = () => this.state.hasFocus || !this._isInputEmpty();
    this._getPlaceholder = placeholder => this._placeLabelOnTop() ? placeholder : '';
  }
  render() {
    var {
      inputId
    } = this.state;
    var {
      dataHook,
      label,
      children,
      disabled
    } = this.props;
    var labelTop = this._placeLabelOnTop();
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _LabelledElementSt.classes.root,
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 64,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("label", {
      "data-hook": _dataHooks.default.label,
      "data-top": labelTop,
      htmlFor: inputId,
      className: (0, _LabelledElementSt.st)(_LabelledElementSt.classes.label, {
        labelTop,
        topLabelGray: this.props.topLabelGray,
        disabled
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 65,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
      size: "medium",
      light: !labelTop,
      secondary: !labelTop,
      weight: "thin",
      className: _LabelledElementSt.classes.labelText,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 11
      }
    }, label)), children && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _dataHooks.default.childrenWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 86,
        columnNumber: 11
      }
    }, children({
      id: inputId,
      onFocus: this._handleFocus,
      onBlur: this._handleBlur,
      onChange: this._handleOnChange,
      /** should have a different height than regular large input */
      className: _LabelledElementSt.classes.inputContainer,
      getPlaceholder: placeholder => this._getPlaceholder(placeholder)
    })));
  }
}
LabelledElement.displayName = 'LabelledElement';
LabelledElement.propTypes = {
  /** Specifies a data-hook for tests */
  dataHook: _propTypes.default.string,
  /** Sets the field label. */
  label: _propTypes.default.string,
  /** Specifies the value of rendered child input. */
  value: _propTypes.default.string,
  /** Specifies the top label color */
  topLabelGray: _propTypes.default.bool,
  /** Specifies if the field is disabled */
  disabled: _propTypes.default.bool
};
var _default = exports.default = LabelledElement;
//# sourceMappingURL=LabelledElement.js.map