rmwc
Version:
A thin React wrapper for Material Design (Web) Components
283 lines (230 loc) • 11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextField = exports.TextFieldIcon = exports.TextFieldHelperText = exports.NotchedOutlineIdle = exports.NotchedOutlinePath = exports.NotchedOutline = exports.TextFieldTextarea = exports.TextFieldInput = exports.TextFieldRoot = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
var _react = require('react');
var React = _interopRequireWildcard(_react);
var _mdc = require('@material/textfield/dist/mdc.textfield');
var _Base = require('../Base');
var _Icon = require('../Icon');
var _LineRipple = require('../LineRipple');
var _FloatingLabel = require('../FloatingLabel');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var TextFieldRoot = exports.TextFieldRoot = (0, _Base.simpleTag)({
displayName: 'TextFieldRoot',
classNames: function classNames(props) {
return ['mdc-text-field', 'mdc-text-field--upgraded', {
'mdc-text-field--textarea': props.textarea,
'mdc-text-field--fullwidth': props.fullwidth,
'mdc-text-field--box': props.box,
'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.withLeadingIcon,
'mdc-text-field--with-trailing-icon': props.withTrailingIcon
}];
},
consumeProps: ['textarea', 'box', 'fullwidth', 'outlined', 'dense', 'invalid', 'disabled', 'withLeadingIcon', 'withTrailingIcon']
});
var TextFieldInput = exports.TextFieldInput = (0, _Base.simpleTag)({
displayName: 'TextFieldInput',
tag: 'input',
classNames: 'mdc-text-field__input',
defaultProps: {
type: 'text'
}
});
var TextFieldTextarea = exports.TextFieldTextarea = (0, _Base.simpleTag)({
displayName: 'TextFieldTextarea',
tag: 'textarea',
classNames: 'mdc-text-field__input'
});
var NotchedOutline = function NotchedOutline(_ref) {
var children = _ref.children,
rest = _objectWithoutProperties(_ref, ['children']);
return React.createElement(
'div',
Object.assign({}, rest, { className: 'mdc-notched-outline' }),
React.createElement(
'svg',
null,
children
)
);
};
exports.NotchedOutline = NotchedOutline;
var NotchedOutlinePath = function NotchedOutlinePath(_ref2) {
var rest = _objectWithoutProperties(_ref2, []);
return React.createElement('path', Object.assign({}, rest, { className: 'mdc-notched-outline__path' }));
};
exports.NotchedOutlinePath = NotchedOutlinePath;
var NotchedOutlineIdle = function NotchedOutlineIdle(_ref3) {
var rest = _objectWithoutProperties(_ref3, []);
return React.createElement('div', Object.assign({}, rest, { className: 'mdc-notched-outline__idle' }));
};
exports.NotchedOutlineIdle = NotchedOutlineIdle;
/**
* A help text component
*/
var TextFieldHelperText = exports.TextFieldHelperText = function (_simpleTag) {
_inherits(TextFieldHelperText, _simpleTag);
function TextFieldHelperText() {
_classCallCheck(this, TextFieldHelperText);
return _possibleConstructorReturn(this, (TextFieldHelperText.__proto__ || Object.getPrototypeOf(TextFieldHelperText)).apply(this, arguments));
}
_createClass(TextFieldHelperText, [{
key: 'render',
value: function render() {
return _get(TextFieldHelperText.prototype.__proto__ || Object.getPrototypeOf(TextFieldHelperText.prototype), 'render', this).call(this);
}
}]);
return TextFieldHelperText;
}((0, _Base.simpleTag)({
displayName: 'TextFieldHelperText',
tag: 'p',
classNames: function classNames(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']
}));
/**
* An Icon in a TextField
*/
var TextFieldIcon = exports.TextFieldIcon = function (_simpleTag2) {
_inherits(TextFieldIcon, _simpleTag2);
function TextFieldIcon() {
_classCallCheck(this, TextFieldIcon);
return _possibleConstructorReturn(this, (TextFieldIcon.__proto__ || Object.getPrototypeOf(TextFieldIcon)).apply(this, arguments));
}
_createClass(TextFieldIcon, [{
key: 'render',
value: function render() {
return _get(TextFieldIcon.prototype.__proto__ || Object.getPrototypeOf(TextFieldIcon.prototype), 'render', this).call(this);
}
}]);
return TextFieldIcon;
}((0, _Base.simpleTag)({
tag: _Icon.Icon,
classNames: 'mdc-text-field__icon'
}));
Object.defineProperty(TextFieldIcon, 'displayName', {
enumerable: true,
writable: true,
value: 'TextFieldIcon'
});
var TextField = exports.TextField = function (_withFoundation) {
_inherits(TextField, _withFoundation);
function TextField() {
_classCallCheck(this, TextField);
return _possibleConstructorReturn(this, (TextField.__proto__ || Object.getPrototypeOf(TextField)).apply(this, arguments));
}
_createClass(TextField, [{
key: 'syncWithProps',
value: function syncWithProps(nextProps) {
var _this4 = this;
// invalid | valid
(0, _Base.syncFoundationProp)(nextProps.invalid, !this.valid, function () {
return _this4.valid = !nextProps.invalid;
});
// value
(0, _Base.syncFoundationProp)(nextProps.value, !this.value, function () {
_this4.value = nextProps.value;
});
// disabled
(0, _Base.syncFoundationProp)(nextProps.disabled, this.disabled, function () {
return _this4.disabled = !!nextProps.disabled;
});
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
_props$label = _props.label,
label = _props$label === undefined ? '' : _props$label,
className = _props.className,
inputRef = _props.inputRef,
box = _props.box,
outlined = _props.outlined,
fullwidth = _props.fullwidth,
dense = _props.dense,
invalid = _props.invalid,
disabled = _props.disabled,
withLeadingIcon = _props.withLeadingIcon,
withTrailingIcon = _props.withTrailingIcon,
children = _props.children,
textarea = _props.textarea,
_props$rootProps = _props.rootProps,
rootProps = _props$rootProps === undefined ? {} : _props$rootProps,
apiRef = _props.apiRef,
rest = _objectWithoutProperties(_props, ['label', 'className', 'inputRef', 'box', 'outlined', 'fullwidth', 'dense', 'invalid', 'disabled', 'withLeadingIcon', 'withTrailingIcon', 'children', 'textarea', 'rootProps', 'apiRef']);
var root_ = this.foundationRefs.root_;
var tagProps = Object.assign({}, rest, {
disabled: disabled,
elementRef: inputRef,
id: rest.id || (0, _Base.randomId)('text-field')
});
var tag = textarea ? React.createElement(TextFieldTextarea, tagProps) : React.createElement(TextFieldInput, tagProps);
// handle leading and trailing icons
var renderIcon = function renderIcon(iconNode) {
if (iconNode && typeof iconNode === 'string' ||
//$FlowFixMe
iconNode.type && iconNode.type.displayName !== TextFieldIcon.displayName) {
return React.createElement(TextFieldIcon, { use: iconNode });
}
return iconNode;
};
return React.createElement(
TextFieldRoot,
Object.assign({}, rootProps, {
invalid: invalid,
withLeadingIcon: !!withLeadingIcon,
withTrailingIcon: !!withTrailingIcon,
textarea: textarea,
box: box,
dense: dense,
disabled: disabled,
outlined: outlined,
fullwidth: fullwidth,
elementRef: root_,
className: className
}),
!!withLeadingIcon && renderIcon(withLeadingIcon),
children,
tag,
!!label && React.createElement(
_FloatingLabel.FloatingLabel,
{ htmlFor: tagProps.id },
label
),
!!withTrailingIcon && renderIcon(withTrailingIcon),
outlined && React.createElement(
NotchedOutline,
null,
React.createElement(NotchedOutlinePath, null)
),
outlined ? React.createElement(NotchedOutlineIdle, null) : React.createElement(_LineRipple.LineRipple, null)
);
}
}]);
return TextField;
}((0, _Base.withFoundation)({
constructor: _mdc.MDCTextField,
adapter: {}
}));
Object.defineProperty(TextField, 'displayName', {
enumerable: true,
writable: true,
value: 'TextField'
});
exports.default = TextField;