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
56 lines (55 loc) • 2.32 kB
JavaScript
;
require("core-js/modules/es.object.assign.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ThemeProvider = ThemeProvider;
exports.useTheme = useTheme;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
const ThemeContext = /*#__PURE__*/(0, _react.createContext)(null);
function ThemeProvider(props) {
const [themes, setThemes] = (0, _react.useState)({
light: {
primary: '#6750A4',
surfaceVariant: 'rgba(231, 224, 236, 1)',
onSurfaceVariant: '#49454F',
onSurface: '#1C1B1F',
outline: '#79747E',
scrim: 'rgb(0,0,0,0.25)',
tertiaryContainer: '#FFD8E4',
onPrimary: '#ffffff',
errorContainer: '#F9DEDC',
primaryContainer: '#EADDFF',
onPrimaryContainer: '#21005D',
error: '#B3261E',
surface3: "linear-gradient(0deg, #FFFBFE, #FFFBFE)," + "linear-gradient(0deg, rgba(103, 80, 164, 0.11), rgba(103, 80, 164, 0.11))"
},
dark: {
primary: '#D0BCFF',
surfaceVariant: '#49454F',
onSurfaceVariant: '#CAC4D0',
onSurface: '#E6E1E5',
outline: '#79747E',
scrim: 'rgb(0,0,0,0.25)',
tertiaryContainer: '#633B48',
onPrimary: '#381E72',
errorContainer: '#8C1D18',
primaryContainer: '#4F378B',
onPrimaryContainer: '#EADDFF',
error: '#F2B8B5',
surface3: 'linear-gradient(0deg, #1C1B1F, #1C1B1F),' + ' linear-gradient(0deg, rgba(208, 188, 255, 0.11), rgba(208, 188, 255, 0.11))'
}
});
const [theme, setTheme] = (0, _react.useState)('dark');
let colors = theme === 'dark' ? themes.dark : themes.light;
return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({}, props, {
value: [colors, setTheme, setThemes]
}));
}
function useTheme() {
const context = (0, _react.useContext)(ThemeContext);
if (!context) throw new Error('Not inside the provider.');
return context; //returns [theme,updateTheme,updateColors]
}