@onesy/style-react/string.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 = string;
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _style = _interopRequireDefault(require("./style"));
// May be TValue or a string  as a string value literal
const responses = {};
function string(value_, ...args) {
  const valueString = value_.reduce((result, item, index) => result += `${item}${args[index] || ''}`, '');
  const valueStringMethod = () => {
    const rule = {};
    valueString.trim().split('\n').filter(Boolean).map(item => item.trim()).forEach(item => {
      if (item) {
        const items = item.split(':');
        let value__ = items[1];
        const property = items[0];
        value__ = value__ && value__.trim().replace(';', '');
        if (property && value__) rule[property] = (0, _utils.castParam)(value__, {
          decode: false
        });
      }
    });
    return rule;
  };
  const value = {
    a: valueStringMethod()
  };
  const name = (0, _utils.hash)(value.a);
  if (!responses[name]) responses[name] = [];
  const useStyle = _react.default.useState(() => (0, _style.default)(value, {
    name
  }, responses[name]))[0];
  const values = useStyle();

  // Update on value update
  _react.default.useEffect(() => {
    const response = responses[name][0];
    if (response) response.update(value);
  }, [valueString]);
  return values.class || '';
}