storybook-addon-rtl-direction/dist/cjs/withGlobals.js

A Storybook tool add-on to toggle html dir attribute between LTR and RTL.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.withGlobals = void 0;

var _addons = require("@storybook/addons");

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var updateHtmlLang = function updateHtmlLang(locale, settings) {
  var lang = document.documentElement.getAttribute("lang");
  if (!locale || !settings) return lang;

  if (lang !== locale) {
    document.documentElement.setAttribute("lang", locale);
  }

  return locale;
};

var withGlobals = function withGlobals(StoryFn) {
  var _useGlobals = (0, _addons.useGlobals)(),
      _useGlobals2 = _slicedToArray(_useGlobals, 2),
      _useGlobals2$ = _useGlobals2[0],
      rtlDirection = _useGlobals2$.rtlDirection,
      locale = _useGlobals2$.locale,
      updateGlobals = _useGlobals2[1];

  var settings = (0, _addons.useParameter)("rtlDirection");

  var _useRef = (0, _addons.useRef)(updateHtmlLang(locale, settings)),
      htmlLang = _useRef.current;

  (0, _addons.useEffect)(function () {
    var direction = rtlDirection ? "rtl" : "ltr";
    document.documentElement.setAttribute("dir", direction);
  }, [rtlDirection]);
  (0, _addons.useEffect)(function () {
    // Check url and find
    var urlParams = new URLSearchParams(window.location.search);
    var globals = urlParams.get("globals");
    if (!globals) return;

    var _globals$split$map$fi = globals.split(";").map(function (params) {
      return params.indexOf("rtlDirection:") === 0 && params.split(":")[1];
    }).filter(Boolean),
        _globals$split$map$fi2 = _slicedToArray(_globals$split$map$fi, 1),
        dir = _globals$split$map$fi2[0];

    if (dir === "true") updateGlobals({
      rtlDirection: true
    });
  }, []);
  (0, _addons.useEffect)(function () {
    if (!locale || !settings || !settings.autoLocales || !settings.autoLocales.length) {
      return;
    }

    var autoLocales = settings.autoLocales,
        reload = settings.reload;
    var lang = locale.substring(0, 2);
    var isRtl = autoLocales.some(function (l) {
      return l.indexOf("-") === -1 ? l === lang : l === locale;
    });

    if (isRtl && !rtlDirection) {
      updateGlobals({
        rtlDirection: true
      });
    } else if (!isRtl && rtlDirection) {
      updateGlobals({
        rtlDirection: false
      });
    } // If reload is true and locale is different than html lang, refresh page


    if (reload && htmlLang !== locale) {
      // Add delay to make sure to update rtlDirection to global variables
      setTimeout(function () {
        window.location.reload();
      }, 50);
    }
  }, [locale]);
  return StoryFn();
};

exports.withGlobals = withGlobals;