@react-md/form/lib/FormThemeProvider.js

This package is for creating all the different form input types.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormThemeProvider = exports.useFormTheme = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var context = (0, react_1.createContext)({
    theme: "outline",
    underlineDirection: "left",
});
/**
 * Gets the current theme values for a form component by inheriting the current
 * form theme via context. If you provide an object of theme props, the returned
 * value will use any defined values from the theme props and fallback to the
 * context value.
 *
 * Example:
 * ```ts
 * // everything is inherited
 * const formTheme = useFormTheme();
 *
 * // theme will be set to "underline" while the others will be inherited
 * const formTheme = useFormTheme({ theme: "underline" });
 * ```
 */
function useFormTheme(options) {
    if (options === void 0) { options = {}; }
    var formTheme = (0, react_1.useContext)(context);
    var theme = options.theme, underlineDirection = options.underlineDirection;
    theme = theme !== null && theme !== void 0 ? theme : formTheme.theme;
    underlineDirection = underlineDirection !== null && underlineDirection !== void 0 ? underlineDirection : formTheme.underlineDirection;
    return {
        theme: theme,
        underlineDirection: underlineDirection,
    };
}
exports.useFormTheme = useFormTheme;
var Provider = context.Provider;
/**
 * Since you'll normally want all of your form components to use the same theme,
 * this is a simple way to provide the same theme to all components without
 * needing all the prop-drilling/copying.
 */
function FormThemeProvider(_a) {
    var _b = _a.theme, theme = _b === void 0 ? "outline" : _b, _c = _a.underlineDirection, underlineDirection = _c === void 0 ? "left" : _c, children = _a.children;
    var value = (0, react_1.useMemo)(function () { return ({ theme: theme, underlineDirection: underlineDirection }); }, [theme, underlineDirection]);
    return (0, jsx_runtime_1.jsx)(Provider, __assign({ value: value }, { children: children }));
}
exports.FormThemeProvider = FormThemeProvider;
//# sourceMappingURL=FormThemeProvider.js.map