@fluentui/react-theme-provider
Version:
Fluent UI React theme provider component, hook, and theme related utilities.
42 lines • 1.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var applyClasses_1 = require("./applyClasses");
var makeStyles_1 = require("./makeStyles");
/**
* The `makeClasses` helper encapsulates `makeStyles`, and given a style map which follows
* a specific naming convention, produces a hook function which takes in the component
* draft state and auto distributes classes into the draft state. This removes a lot of
* boilerplate code using `classnames` helpers to manage distributing classnames manually.
*
* Usage:
*
* ```tsx
* const useButtonClasses makeClasses(theme => {
* root: { ... },
* _primary: { ... },
* _size_small: { ... }
* });
* ```
*
* The class naming convention is broken down as follows:
*
* * No underscores - a slot class name. (E.g. "root", "icon", etc)
* * Prefixed with underscore - a modifier. (E.g. "_primary", "_fluid")
* * Contains 2 underscores - a name/value matcher. (E.g. "_size_small")
*
* Modifier classnames are added to the root className when the state contains a truthy value
* of the same name. For example, when the primary flag is present, the "_primary" modifier
* class will be appended to the root className prop.
*
* Enum classnames are also added to the root className when teh state contains an enum value
* which matches the value in the className. for example, when the `size` enum value is `small`,
* the "_size_small" enum class will be appended to the root className prop.
*/
exports.makeClasses = function (styleOrFunction) {
var useStyles = makeStyles_1.makeStyles(styleOrFunction);
return function (state, options) {
var classes = useStyles(options);
applyClasses_1.applyClasses(state, classes);
};
};
//# sourceMappingURL=makeClasses.js.map