@ucam/design-system
Version:
University of Cambridge Design System
41 lines (38 loc) • 6.86 kB
JavaScript
import React, { useState } from 'react';
import { unstable_useEnhancedEffect, NoSsr, FormControl, Select, MenuItem } from '@material-ui/core';
import { useTheme } from '../useTheme/useTheme.js';
import { useThemeRegister } from '../useThemeRegister/useThemeRegister.js';
import PropTypes from 'prop-types';
/**
* A dropdown picker to select a theme.
* Must be used inside a `<ThemeProvider />`.
*/
const ThemeChanger = (props) => {
// The user might be deliberately trying to set the initial value to undefined so need to use hasOwnProperty
const hasInitialValue = Object.prototype.hasOwnProperty.call(props, 'initialValue');
const [needsInitialValue, setNeedsInitialValue] = useState(hasInitialValue);
const { requestedThemeName, setTheme } = useTheme();
const [themes] = useThemeRegister();
const handleChange = (event) => {
const selectedTheme = (event.target.value || undefined);
setTheme(selectedTheme);
};
unstable_useEnhancedEffect(() => {
// We'll only run this on the first pass
if (needsInitialValue) {
setNeedsInitialValue(false);
setTheme(props.initialValue);
}
}, [needsInitialValue, props.initialValue]);
const themeName = requestedThemeName !== undefined && themes.has(requestedThemeName) ? requestedThemeName : '';
return (React.createElement(NoSsr, null,
React.createElement(FormControl, null,
React.createElement(Select, { value: { value: themeName }, onChange: handleChange, displayEmpty: true, "aria-label": "Theme", name: "theme", defaultValue: { value: '' } },
React.createElement(MenuItem, { value: "" }, "Browser Preference"),
Array.from(themes.keys()).map((theme) => (React.createElement(MenuItem, { value: theme, key: theme }, theme)))))));
};
ThemeChanger.propTypes = {
initialValue: PropTypes.string
};
export { ThemeChanger as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGhlbWVDaGFuZ2VyLmpzIiwic291cmNlcyI6WyIvQHVjYW0vZGVzaWduLXN5c3RlbS9zcmMvdGhlbWUvVGhlbWVDaGFuZ2VyL1RoZW1lQ2hhbmdlci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZDLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7XG4gIEZvcm1Db250cm9sLFxuICBNZW51SXRlbSxcbiAgTm9Tc3IsXG4gIFNlbGVjdCxcbiAgdW5zdGFibGVfdXNlRW5oYW5jZWRFZmZlY3QsXG4gIFNlbGVjdENoYW5nZUV2ZW50XG59IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlJztcbmltcG9ydCB1c2VUaGVtZSBmcm9tICcuLi91c2VUaGVtZSc7XG5pbXBvcnQgdXNlVGhlbWVSZWdpc3RlciBmcm9tICcuLi91c2VUaGVtZVJlZ2lzdGVyJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmludGVyZmFjZSBUaGVtZUNoYW5nZXJQcm9wcyB7XG4gIC8qKlxuICAgKiBJZiBzZXQsIHRoZW4gdGhlIFRoZW1lQ2hhbmdlciB3aWxsIHNldCBhIHRoZW1lIHRoZSBmaXJzdCB0aW1lIGl0IHJ1bnNcbiAgICovXG4gIGluaXRpYWxWYWx1ZT86IHN0cmluZztcbn1cblxuLyoqXG4gKiBBIGRyb3Bkb3duIHBpY2tlciB0byBzZWxlY3QgYSB0aGVtZS5cbiAqIE11c3QgYmUgdXNlZCBpbnNpZGUgYSBgPFRoZW1lUHJvdmlkZXIgLz5gLlxuICovXG5jb25zdCBUaGVtZUNoYW5nZXI6IEZDPFRoZW1lQ2hhbmdlclByb3BzPiA9IChwcm9wcykgPT4ge1xuICAvLyBUaGUgdXNlciBtaWdodCBiZSBkZWxpYmVyYXRlbHkgdHJ5aW5nIHRvIHNldCB0aGUgaW5pdGlhbCB2YWx1ZSB0byB1bmRlZmluZWQgc28gbmVlZCB0byB1c2UgaGFzT3duUHJvcGVydHlcbiAgY29uc3QgaGFzSW5pdGlhbFZhbHVlID0gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKHByb3BzLCAnaW5pdGlhbFZhbHVlJyk7XG4gIGNvbnN0IFtuZWVkc0luaXRpYWxWYWx1ZSwgc2V0TmVlZHNJbml0aWFsVmFsdWVdID0gdXNlU3RhdGUoaGFzSW5pdGlhbFZhbHVlKTtcblxuICBjb25zdCB7IHJlcXVlc3RlZFRoZW1lTmFtZSwgc2V0VGhlbWUgfSA9IHVzZVRoZW1lKCk7XG4gIGNvbnN0IFt0aGVtZXNdID0gdXNlVGhlbWVSZWdpc3RlcigpO1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChldmVudDogU2VsZWN0Q2hhbmdlRXZlbnQ8eyB2YWx1ZTogdW5rbm93biB9PikgPT4ge1xuICAgIGNvbnN0IHNlbGVjdGVkVGhlbWUgPSAoZXZlbnQudGFyZ2V0LnZhbHVlIHx8IHVuZGVmaW5lZCkgYXMgc3RyaW5nIHwgdW5kZWZpbmVkO1xuICAgIHNldFRoZW1lKHNlbGVjdGVkVGhlbWUpO1xuICB9O1xuXG4gIHVuc3RhYmxlX3VzZUVuaGFuY2VkRWZmZWN0KCgpID0+IHtcbiAgICAvLyBXZSdsbCBvbmx5IHJ1biB0aGlzIG9uIHRoZSBmaXJzdCBwYXNzXG4gICAgaWYgKG5lZWRzSW5pdGlhbFZhbHVlKSB7XG4gICAgICBzZXROZWVkc0luaXRpYWxWYWx1ZShmYWxzZSk7XG4gICAgICBzZXRUaGVtZShwcm9wcy5pbml0aWFsVmFsdWUpO1xuICAgIH1cbiAgfSwgW25lZWRzSW5pdGlhbFZhbHVlLCBwcm9wcy5pbml0aWFsVmFsdWVdKTtcblxuICBjb25zdCB0aGVtZU5hbWUgPVxuICAgIHJlcXVlc3RlZFRoZW1lTmFtZSAhPT0gdW5kZWZpbmVkICYmIHRoZW1lcy5oYXMocmVxdWVzdGVkVGhlbWVOYW1lKSA/IHJlcXVlc3RlZFRoZW1lTmFtZSA6ICcnO1xuXG4gIHJldHVybiAoXG4gICAgPE5vU3NyPlxuICAgICAgPEZvcm1Db250cm9sPlxuICAgICAgICA8U2VsZWN0XG4gICAgICAgICAgdmFsdWU9e3sgdmFsdWU6IHRoZW1lTmFtZSB9fVxuICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgICAgZGlzcGxheUVtcHR5XG4gICAgICAgICAgYXJpYS1sYWJlbD1cIlRoZW1lXCJcbiAgICAgICAgICBuYW1lPVwidGhlbWVcIlxuICAgICAgICAgIGRlZmF1bHRWYWx1ZT17eyB2YWx1ZTogJycgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxNZW51SXRlbSB2YWx1ZT1cIlwiPkJyb3dzZXIgUHJlZmVyZW5jZTwvTWVudUl0ZW0+XG4gICAgICAgICAge0FycmF5LmZyb20odGhlbWVzLmtleXMoKSkubWFwKCh0aGVtZSkgPT4gKFxuICAgICAgICAgICAgPE1lbnVJdGVtIHZhbHVlPXt0aGVtZX0ga2V5PXt0aGVtZX0+XG4gICAgICAgICAgICAgIHt0aGVtZX1cbiAgICAgICAgICAgIDwvTWVudUl0ZW0+XG4gICAgICAgICAgKSl9XG4gICAgICAgIDwvU2VsZWN0PlxuICAgICAgPC9Gb3JtQ29udHJvbD5cbiAgICA8L05vU3NyPlxuICApO1xufTtcblxuVGhlbWVDaGFuZ2VyLnByb3BUeXBlcyA9IHtcbiAgaW5pdGlhbFZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nXG59O1xuXG5leHBvcnQgZGVmYXVsdCBUaGVtZUNoYW5nZXI7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBb0JBOzs7O01BSU0sWUFBWSxHQUEwQixDQUFDLEtBQUs7O0lBRWhELE1BQU0sZUFBZSxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsY0FBYyxDQUFDLENBQUM7SUFDcEYsTUFBTSxDQUFDLGlCQUFpQixFQUFFLG9CQUFvQixDQUFDLEdBQUcsUUFBUSxDQUFDLGVBQWUsQ0FBQyxDQUFDO0lBRTVFLE1BQU0sRUFBRSxrQkFBa0IsRUFBRSxRQUFRLEVBQUUsR0FBRyxRQUFRLEVBQUUsQ0FBQztJQUNwRCxNQUFNLENBQUMsTUFBTSxDQUFDLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztJQUVwQyxNQUFNLFlBQVksR0FBRyxDQUFDLEtBQTRDO1FBQ2hFLE1BQU0sYUFBYSxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxJQUFJLFNBQVMsQ0FBdUIsQ0FBQztRQUM5RSxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUM7S0FDekIsQ0FBQztJQUVGLDBCQUEwQixDQUFDOztRQUV6QixJQUFJLGlCQUFpQixFQUFFO1lBQ3JCLG9CQUFvQixDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQzVCLFFBQVEsQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7U0FDOUI7S0FDRixFQUFFLENBQUMsaUJBQWlCLEVBQUUsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUM7SUFFNUMsTUFBTSxTQUFTLEdBQ2Isa0JBQWtCLEtBQUssU0FBUyxJQUFJLE1BQU0sQ0FBQyxHQUFHLENBQUMsa0JBQWtCLENBQUMsR0FBRyxrQkFBa0IsR0FBRyxFQUFFLENBQUM7SUFFL0YsUUFDRSxvQkFBQyxLQUFLO1FBQ0osb0JBQUMsV0FBVztZQUNWLG9CQUFDLE1BQU0sSUFDTCxLQUFLLEVBQUUsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLEVBQzNCLFFBQVEsRUFBRSxZQUFZLEVBQ3RCLFlBQVksc0JBQ0QsT0FBTyxFQUNsQixJQUFJLEVBQUMsT0FBTyxFQUNaLFlBQVksRUFBRSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUU7Z0JBRTNCLG9CQUFDLFFBQVEsSUFBQyxLQUFLLEVBQUMsRUFBRSx5QkFBOEI7Z0JBQy9DLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxNQUNuQyxvQkFBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxHQUFHLEVBQUUsS0FBSyxJQUMvQixLQUFLLENBQ0csQ0FDWixDQUFDLENBQ0ssQ0FDRyxDQUNSLEVBQ1I7QUFDSixFQUFFO0FBRUYsWUFBWSxDQUFDLFNBQVMsR0FBRztJQUN2QixZQUFZLEVBQUUsU0FBUyxDQUFDLE1BQU07Q0FDL0I7Ozs7In0=