react-material-time-picker
Version:
TimePicker is a user interface component that allows the user to easily select a specific time. It provides an analog clock interface that is easy to use and intuitive. TimePicker can be easily integrated into other user interface components, making it a
54 lines (53 loc) • 2.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Input = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _ThemeContext = require("../../ThemeContext.js");
(function () {
const styles = ".inps-container {\n text-align: left;\n box-sizing: border-box;\n}\n.inps-container input {\n box-sizing: border-box;\n font-family: inherit;\n font-size: 45px;\n font-weight: 400;\n line-height: 52px;\n letter-spacing: 0;\n text-align: center;\n width: 96px;\n height: 72px;\n border-radius: 0.5rem;\n padding: 9px 16px;\n border: none;\n}\n.inps-container input:focus {\n outline: none;\n}\n.inps-container .labels {\n padding-top: 1px;\n}";
const fileName = "Input_input";
const element = document.querySelector("style[data-sass-component='Input_input']");
if (!element) {
const styleBlock = document.createElement("style");
styleBlock.innerHTML = styles;
styleBlock.setAttribute("data-sass-component", fileName);
document.head.appendChild(styleBlock);
} else {
element.innerHTML = styles;
}
})();
const Input = props => {
const [colors] = (0, _ThemeContext.useTheme)();
const styles = {
default: {
backgroundColor: colors.surfaceVariant,
outline: 'none',
color: colors.onSurface
},
warning: {
border: "2px solid ".concat(colors.error),
backgroundColor: colors.errorContainer
},
focused: {
backgroundColor: colors.primaryContainer,
color: colors.onPrimaryContainer,
border: "2px solid ".concat(colors.primary)
}
};
const currentStyle = props.active ? props.error ? styles.warning : styles.focused : styles.default;
return /*#__PURE__*/React.createElement("input", {
value: props.value,
onChange: props.onChange,
onBlur: props.onBlur,
onClick: props.onClick,
max: props.max || '',
min: props.min || '',
className: props.className,
type: props.type || '',
placeholder: props.placeholder || '',
style: currentStyle
});
};
exports.Input = Input;