@6thquake/react-material
Version:
React components that implement Google's Material Design.
141 lines (114 loc) • 4.08 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _compose = _interopRequireDefault(require("recompose/compose"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _yellow = _interopRequireDefault(require("../colors/yellow"));
var _pickers = require("@material-ui/pickers");
var _LocaleProvider = require("../LocaleProvider");
/**
* @ignore - do not document.
*/
var style = function style(theme) {
return {
root: {},
// input: {}
label: {
color: theme.palette.grey[300],
'&$labelForcus': {
// color: `${theme.palette.common.white}`
color: "".concat(_yellow.default[500])
}
},
labelForcus: {
color: "".concat(_yellow.default[500], " !important")
},
inputText: {
color: theme.palette.common.white,
'&$disabled': {
color: theme.palette.grey[200]
}
},
underline: {
'&:after': {
borderBottomColor: _yellow.default[500]
},
'&:before': {
borderBottomColor: theme.palette.grey[300]
} // '&$disabled:before': {
// borderBottomColor: theme.palette.grey[200],
// },
// '&:hover:not($disabled):not($focused):not($error):before': {
// borderBottomColor: 'red',
// },
}
};
};
var TimePickerWrapper =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(TimePickerWrapper, _Component);
function TimePickerWrapper(props) {
var _this;
(0, _classCallCheck2.default)(this, TimePickerWrapper);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TimePickerWrapper).call(this, props));
_this.state = {};
return _this;
}
(0, _createClass2.default)(TimePickerWrapper, [{
key: "render",
value: function render() {
var _this$props = this.props,
classes = _this$props.classes,
isDark = _this$props.isDark,
others = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "isDark"]);
var inputProps = isDark ? {
InputProps: {
classes: {
root: classes.inputText,
underline: classes.underline
}
},
InputLabelProps: {
classes: {
root: classes.label,
focused: classes.labelForcus
}
}
} : {};
return _react.default.createElement(_pickers.TimePicker, (0, _extends2.default)({}, inputProps, others));
}
}]);
return TimePickerWrapper;
}(_react.Component);
TimePickerWrapper.propTypes = {
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* background is dark
*/
isDark: _propTypes.default.bool
};
TimePickerWrapper.defaultProps = {
isDark: false
};
var _default = (0, _compose.default)((0, _LocaleProvider.withLocale)({
name: 'TimePicker'
}), (0, _withStyles.default)(style))(TimePickerWrapper);
exports.default = _default;