react-floating-input
Version:
Customizable floating label input for react. Compatiable with redux-form. Feel free to create pull requests or contact the developer mayerlench1314@gmail.com for issues
230 lines (198 loc) • 11.4 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".styles_float-group__bCv9q {\r\n position: relative;\r\n margin-top: 5px;\r\n margin-left: 5px;\r\n width: 100%;\r\n}\r\n\r\n.styles_float-control__3VqtH {\r\n display: block;\r\n height: 36px;\r\n width: 100%;\r\n border: none;\r\n border-radius: 0 !important;\r\n font-size: 15px;\r\n font-weight: 300;\r\n padding: 0;\r\n background-color: transparent !important;\r\n box-shadow: none;\r\n}\r\n\r\n.styles_float-group__bCv9q .styles_float-control__3VqtH {\r\n position: relative;\r\n z-index: inherit;\r\n float: inherit;\r\n width: 100%;\r\n margin-bottom: 0;\r\n}\r\n\r\n.styles_float-control__3VqtH:focus {\r\n border-color: #757575;\r\n outline: none;\r\n box-shadow: none;\r\n}\r\n\r\n/* -- label styles ---------------------------------- */\r\n\r\n.styles_label__12rJO {\r\n color: #999;\r\n font-size: 14px;\r\n pointer-events: none;\r\n position: absolute;\r\n font-weight: 300;\r\n left: 5px;\r\n top: 5px;\r\n transition: 0.2s ease all;\r\n -moz-transition: 0.2s ease all;\r\n -webkit-transition: 0.2s ease all;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .styles_form-horizontal__2pB5W .styles_control-label__1p7El {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n.styles_float-label__J3W3V {\r\n left: 0;\r\n top: 12px;\r\n font-size: 14px;\r\n pointer-events: none;\r\n}\r\n\r\n.styles_float-active__3QC-c {\r\n top: -12px;\r\n font-size: 12px;\r\n left: 0px;\r\n}\r\n\r\n/* -- bar styles -------------------------------------- */\r\n\r\n.styles_form-bar__1FG3q {\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.styles_form-bar__1FG3q::before, .styles_form-bar__1FG3q::after {\r\n content: '';\r\n height: 1px;\r\n width: 0;\r\n bottom: 0;\r\n position: absolute;\r\n transition: 0.3s ease all;\r\n -moz-transition: 0.3s ease all;\r\n -webkit-transition: 0.3s ease all;\r\n}\r\n\r\n/* active state */\r\n\r\n.styles_float-control__3VqtH:focus~.styles_form-bar__1FG3q::before, .styles_float-control__3VqtH:focus~.styles_form-bar__1FG3q::after {\r\n width: 100%;\r\n}\r\n\r\n/* -- highlighter styles ------------------------------ */\r\n\r\n.styles_form-highlight__tKITV {\r\n position: absolute;\r\n height: 50%;\r\n width: 100%;\r\n top: 30%;\r\n left: 0;\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n\r\n/* active state */\r\n\r\n.styles_float-control__3VqtH:focus~.styles_form-highlight__tKITV {\r\n -webkit-animation: styles_inputHighlighter__3G3h1 0.3s ease;\r\n -moz-animation: styles_inputHighlighter__3G3h1 0.3s ease;\r\n animation: styles_inputHighlighter__3G3h1 0.3s ease;\r\n}\r\n\r\n/* -- highlighter animation --------------------------- */\r\n\r\n@-webkit-keyframes styles_inputHighlighter__3G3h1 {\r\n from {\r\n background: #5264AE;\r\n }\r\n to {\r\n width: 0;\r\n background: transparent;\r\n }\r\n}\r\n\r\n@-moz-keyframes styles_inputHighlighter__3G3h1 {\r\n from {\r\n background: #5264AE;\r\n }\r\n to {\r\n width: 0;\r\n background: transparent;\r\n }\r\n}\r\n\r\n@keyframes styles_inputHighlighter__3G3h1 {\r\n from {\r\n background: #5264AE;\r\n }\r\n to {\r\n width: 0;\r\n background: transparent;\r\n }\r\n}";
var styles = { "float-group": "styles_float-group__bCv9q", "float-control": "styles_float-control__3VqtH", "label": "styles_label__12rJO", "form-horizontal": "styles_form-horizontal__2pB5W", "control-label": "styles_control-label__1p7El", "float-label": "styles_float-label__J3W3V", "float-active": "styles_float-active__3QC-c", "form-bar": "styles_form-bar__1FG3q", "form-highlight": "styles_form-highlight__tKITV", "inputHighlighter": "styles_inputHighlighter__3G3h1" };
styleInject(css);
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
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 _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;
};
var inherits = function (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;
};
var possibleConstructorReturn = function (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;
};
var ExampleComponent = function (_Component) {
inherits(ExampleComponent, _Component);
function ExampleComponent() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, ExampleComponent);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ExampleComponent.__proto__ || Object.getPrototypeOf(ExampleComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
focused: false
}, _this.toggleFocused = function () {
_this.setState({ focused: !_this.state.focused });
}, _this.inputStyle = function () {
var _this$props = _this.props,
_this$props$activeCol = _this$props.activeColor,
activeColor = _this$props$activeCol === undefined ? '#007BFF' : _this$props$activeCol,
_this$props$color = _this$props.color,
color = _this$props$color === undefined ? '#999' : _this$props$color,
hideBar = _this$props.hideBar,
disabled = _this$props.disabled;
var focused = _this.state.focused;
var borderWidth = focused ? 2 : 1;
if (hideBar || disabled) return {};
return {
borderBottom: (!focused ? color : activeColor) + ' ' + borderWidth + 'px solid'
};
}, _this.renderLabel = function (inputValue) {
var _this$props2 = _this.props,
labelZoom = _this$props2.labelZoom,
staticLabel = _this$props2.staticLabel,
placeholder = _this$props2.placeholder,
_this$props2$activeCo = _this$props2.activeColor,
activeColor = _this$props2$activeCo === undefined ? '#007BFF' : _this$props2$activeCo,
_this$props2$color = _this$props2.color,
color = _this$props2$color === undefined ? '#999' : _this$props2$color;
var focused = _this.state.focused;
var labelZoomObj = labelZoom && !inputValue ? { fontSize: '19px', top: '7px' } : {};
if (!staticLabel) {
return React.createElement(
'label',
{
style: focused ? _extends({ color: activeColor }, labelZoomObj) : { color: color },
className: styles['float-label'] + ' ' + styles['label'] + ' ' + (inputValue && styles['float-active'])
},
' ',
placeholder
);
}
return React.createElement(
'label',
{ className: styles['float-label'] + ' ' + styles['float-active'] + ' ' + styles['label'], style: focused ? { color: activeColor } : { color: color } },
placeholder
);
}, _temp), possibleConstructorReturn(_this, _ret);
}
createClass(ExampleComponent, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props$props$input = _extends({}, this.props, this.props.input),
options = _props$props$input.options,
onKeyPress = _props$props$input.onKeyPress,
onChange = _props$props$input.onChange,
_onBlur = _props$props$input.onBlur,
_onFocus = _props$props$input.onFocus,
_props$props$input$ty = _props$props$input.type,
type = _props$props$input$ty === undefined ? 'text' : _props$props$input$ty,
_props$props$input$va = _props$props$input.value,
value = _props$props$input$va === undefined ? '' : _props$props$input$va,
name = _props$props$input.name,
disabled = _props$props$input.disabled,
autoComplete = _props$props$input.autoComplete;
return React.createElement(
'div',
{ className: styles['float-group'] },
React.createElement('input', _extends({}, options, {
autoComplete: autoComplete,
disabled: disabled,
className: styles['float-control'],
onKeyPress: onKeyPress,
onFocus: function onFocus() {
_this2.toggleFocused();
if (_onFocus) _onFocus();
},
onBlur: function onBlur() {
_this2.toggleFocused();
if (_onBlur) _onBlur();
},
onChange: onChange,
type: type,
name: name,
value: value,
style: this.inputStyle()
})),
React.createElement('span', { className: styles['form-highlight'] }),
this.renderLabel(value)
);
}
}]);
return ExampleComponent;
}(Component);
ExampleComponent.propTypes = {
onChange: PropTypes.func,
onKeyPress: PropTypes.func,
autoComplete: PropTypes.string,
name: PropTypes.string,
type: PropTypes.string,
value: PropTypes.string,
hideBar: PropTypes.bool,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
color: PropTypes.string,
activeColor: PropTypes.string,
staticLabel: PropTypes.bool,
labelZoom: PropTypes.bool
};
export default ExampleComponent;
//# sourceMappingURL=index.es.js.map