manager.mjs 2.9 KB

1234567891011
  1. import { addons, types, useChannel } from '@storybook/manager-api';
  2. import { STORY_RENDERED } from '@storybook/core-events';
  3. import o, { useState } from 'react';
  4. import { IconButton } from '@storybook/components';
  5. import { useTheme } from '@storybook/theming';
  6. var n="storybook/rtl",d=`${n}/rtl-tool`,i=`${n}/rtl-update`;function p(t){let r=t.getQueryParam("direction"),e=window.getComputedStyle(document.documentElement).direction.toLowerCase();return r||e||"ltr"}var D=({direction:t})=>{let r=useTheme();return o.createElement("div",{"aria-label":t==="ltr"?"Switch direction to right-to-left.":"Switch Direction to left-to-right",style:{width:"20px",height:"20px",position:"relative"}},o.createElement("div",{style:{marginBottom:"-45%",top:0,display:"flex",justifyContent:"center",backgroundColor:"transparent",width:"100%",transition:"transform 0.3s",transform:t==="rtl"?"scale(0.5) translate(0, -35%)":"scale(1)"}},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",style:{transition:"fill 0.3s",fill:t==="ltr"?r.barSelectedColor:r.barTextColor,height:"100%",width:"80%"}},o.createElement("path",{d:"M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z"}))),o.createElement("div",{style:{display:"flex",justifyContent:"center",backgroundColor:"transparent",width:"100%",scale:t==="rtl"?1:.5,transition:"transform 0.3s",transform:t==="ltr"?"scale(0.5) translate(0, -1px)":"scale(1) translate(0, -20%)"}},o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",style:{transition:"fill 0.3s",fill:t==="rtl"?r.barSelectedColor:r.barTextColor,transform:"rotate(180deg)",height:"100%",width:"80%"}},o.createElement("path",{d:"M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z"}))))};var f=()=>{let[t,r]=useState({direction:"ltr"}),e=useChannel({[i]:l=>{r({direction:l.direction});}});return o.createElement(o.Fragment,null,o.createElement(IconButton,{placeholder:"Text Direction",onClick:()=>{e(i,{direction:t.direction==="rtl"?"ltr":"rtl",userInteraction:!0});}},o.createElement(D,{direction:t.direction})))};addons.register(n,t=>{w(t),addons.add(d,{id:"rtl-tool",hidden:!0,type:types.TOOL,title:"RTL",disabled:!0,match:({viewMode:r})=>r==="story",render:f});});function w(t){let r=addons.getChannel(),e;r.on(STORY_RENDERED,()=>{let l=r.last(i)?.[0];e=l?.userInteraction?l.direction:e;let m=t.getCurrentParameter("direction"),s;m?s=m:e?s=e:s=p(t),r.emit(i,{direction:s,userInteraction:!1});});}
  7. export { w as setDirectionOnStoryChange };
  8. //# sourceMappingURL=out.js.map
  9. //# sourceMappingURL=manager.mjs.map