@onesy/style-react/inline.js

Onesy CSS in JS styling solution for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = inline;
var _react = _interopRequireDefault(require("react"));
var _hash = _interopRequireDefault(require("@onesy/utils/hash"));
var _merge = _interopRequireDefault(require("@onesy/utils/merge"));
var _style = require("@onesy/style");
var _ = require(".");
function inline(value_, props, options_ = {
  response: 'json'
}) {
  const [value, setValue] = _react.default.useState(undefined);
  const onesyStyle = (0, _.useOnesyStyle)();
  const onesyTheme = (0, _.useOnesyTheme)();
  const update = (update_ = true) => {
    const options = (0, _merge.default)(options_, {
      onesy_style: {
        value: onesyStyle
      },
      onesy_theme: {
        value: onesyTheme
      }
    }, {
      copy: true
    });

    // Options response value
    options.response = 'json';
    const valueNew = (0, _style.inline)(value_, props, options);
    if (update_) setValue(valueNew);
    return valueNew;
  };

  // Update
  _react.default.useEffect(() => {
    update();
    if (onesyTheme) onesyTheme.subscriptions.update.subscribe(update);

    // Clean up
    return () => {
      // Unsubscribe
      if (onesyTheme) onesyTheme.subscriptions.update.unsubscribe(update);
    };
  }, []);

  // Update props
  _react.default.useEffect(() => {
    update();
  }, [(0, _hash.default)(props)]);

  // Important for ssr value
  const value__ = value || update(false);
  return value__;
}