@6thquake/react-material
Version:
React components that implement Google's Material Design.
264 lines (222 loc) • 6.84 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
var _classnames = _interopRequireDefault(require("classnames"));
var styles = function styles(theme) {
return {
root: {
width: '100%',
display: 'flex'
},
box: {
display: 'flex',
alignItems: 'center',
background: 'rgba(0,0,0,0.1)',
borderRadius: '1.3em',
transition: 'all 0.5s'
},
alignRight: {
justifyContent: 'flex-end'
},
input: (0, _extends2.default)({
padding: "".concat(theme.spacing(1), "px ").concat(theme.spacing(2), "px"),
flex: 1,
border: 'none',
background: 'transparent',
lineHeight: '2em',
color: 'rgba(255,255,255,0.8)',
outline: 'none',
'&::-webkit-input-placeholder': {
color: 'rgba(255,255,255,0.3)'
},
'&:-moz-placeholder': {
color: 'rgba(255,255,255,0.3)'
},
'&::-moz-placeholder': {
color: 'rgba(255,255,255,0.3)'
},
'&:-ms-input-placeholder': {
color: 'rgba(255,255,255,0.3)'
}
}, theme.typography.body1),
darkFont: {
color: 'rgba(0,0,0,0.8)',
'&::-webkit-input-placeholder': {
color: 'rgba(0,0,0,0.3)'
},
'&:-moz-placeholder': {
color: 'rgba(0,0,0,0.3)'
},
'&::-moz-placeholder': {
color: 'rgba(0,0,0,0.3)'
},
'&:-ms-input-placeholder': {
color: 'rgba(0,0,0,0.3)'
}
},
iconWrap: {
marginRight: theme.spacing(2),
display: 'flex',
alignItems: 'center'
},
icon: {
color: 'rgba(255,255,255,0.3)'
},
darkIcon: {
color: 'rgba(0,0,0,0.3)'
}
};
};
var Search =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(Search, _Component);
function Search() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, Search);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Search)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.state = {
focus: _this.props.autoFocus
};
_this.handleChange = function (e) {
var onChange = _this.props.onChange;
onChange(e);
};
_this.handleBlur = function (e) {
_this.setState({
focus: false
});
_this.props.onBlur(e);
};
_this.handleFocus = function (e) {
_this.setState({
focus: true
});
_this.props.onFocus(e);
};
return _this;
}
(0, _createClass2.default)(Search, [{
key: "render",
value: function render() {
var _this$props = this.props,
classes = _this$props.classes,
isDark = _this$props.isDark,
floatRight = _this$props.floatRight,
placeholder = _this$props.placeholder,
value = _this$props.value,
autoFocus = _this$props.autoFocus,
scale = _this$props.scale,
width = _this$props.width;
var focus = this.state.focus;
var boxWidth = focus ? '100%' : "".concat(String(100 * scale), "%");
var rootStyle = {
width: width
};
var boxStyle = {
width: boxWidth
};
return _react.default.createElement("div", {
style: rootStyle,
className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes.alignRight, floatRight))
}, _react.default.createElement("div", {
style: boxStyle,
className: classes.box
}, _react.default.createElement("input", {
autoFocus: autoFocus,
onBlur: this.handleBlur,
onFocus: this.handleFocus,
className: (0, _classnames.default)(classes.input, (0, _defineProperty2.default)({}, classes.darkFont, isDark)),
value: value,
onChange: this.handleChange,
placeholder: placeholder
}), _react.default.createElement("div", {
className: classes.iconWrap
}, _react.default.createElement(_Search.default, {
className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.darkIcon, isDark))
}))));
}
}]);
return Search;
}(_react.Component);
Search.propTypes = {
/**
* float right
*/
autoFocus: _propTypes.default.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object,
/**
* float right
*/
floatRight: _propTypes.default.bool,
/**
* dark theme for light background
*/
isDark: _propTypes.default.bool,
/**
* @ignore
*/
onBlur: _propTypes.default.func,
/**
* callback function for search value changed;
*/
onChange: _propTypes.default.func,
/**
* @ignore
*/
onFocus: _propTypes.default.func,
/**
* placeholder
*/
placeholder: _propTypes.default.string,
// 'dark'
/**
* the scale of input box
*/
scale: _propTypes.default.number,
/**
* value for search
*/
value: _propTypes.default.string,
/**
* the width of search, default is 100%
*/
width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
};
Search.defaultProps = {
floatRight: false,
isDark: false,
onChange: function onChange() {},
onBlur: function onBlur() {},
onFocus: function onFocus() {},
autoFocus: false,
scale: 0.5,
width: '100%'
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMSearch'
})(Search);
exports.default = _default;