@sap-ux/ui-components
Version:
SAP UI Components Library
2 lines (1 loc) • 3.94 kB
JavaScript
"use strict";(()=>{var V=Object.defineProperty,K=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var v=(u,n,e)=>n in u?V(u,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):u[n]=e,f=(u,n)=>{for(var e in n||(n={}))O.call(n,e)&&v(u,e,n[e]);if(g)for(var e of g(n))z.call(n,e)&&v(u,e,n[e]);return u},B=(u,n)=>K(u,M(n));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[530],{"./stories/UITranslationInput.story.tsx":function(u,n,e){var S=this&&this.__importDefault||function(s){return s&&s.__esModule?s:{default:s}};Object.defineProperty(n,"__esModule",{value:!0}),n.translationInput=void 0;const t=S(e("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),T=e("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),y=e("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),d=e("./src/components/UITranslationInput/index.tsx"),D=e("./src/components/Icons.tsx"),U=e("./src/components/UITable/index.tsx"),C=e("./src/components/UIButton/index.tsx"),p=e("./src/components/UICheckbox/index.tsx");n.default={title:"Basic Inputs/Input"};const h={childrenGap:60},I="ui-components-i18n-bundle",w=()=>{let s={};try{s=JSON.parse(window.localStorage.getItem(I)||"")}catch(r){s={}}return s},k=s=>{window.localStorage.setItem(I,JSON.stringify(s))},N=()=>{const[s,r]=t.default.useState("Content"),[m,x]=t.default.useState(!1),[i,c]=t.default.useState(!1),[a,E]=t.default.useState(w()),_=(o,l)=>{r(l||"")},j=o=>{a[o.key.value]||(a[o.key.value]=[B(f({},o),{dummyPath:"dddd"})],k(a),E(f({},a)))},W=o=>{const l=document.querySelector(`div[data-i18n-key="${o.key.value}"]`);(l==null?void 0:l.parentElement).focus(),(0,T.setFocusVisibility)(!0,l==null?void 0:l.parentElement)},F=o=>{a[o]&&(delete a[o],k(a),E(f({},a)))},b=[];for(const o in a){const l=a[o];for(const R of l)b.push({key:o,value:R.value.value})}return t.default.createElement(y.Stack,{tokens:h,style:{width:"100%",height:"100%"}},t.default.createElement(y.Stack,{horizontal:!0,tokens:h},t.default.createElement(p.UICheckbox,{label:"Disabled",checked:m,onChange:(o,l)=>{x(l)}}),t.default.createElement(p.UICheckbox,{label:"Busy",checked:i,onChange:(o,l)=>{c(l)}})),t.default.createElement(y.Stack,{style:{width:"300px"}},t.default.createElement(d.UITranslationInput,{entries:a,id:"test",i18nPrefix:"i18n",allowedI18nPrefixes:["i18n","@i18n"],allowedPatterns:[d.TranslationTextPattern.SingleBracketBinding,d.TranslationTextPattern.DoubleBracketReplace],defaultPattern:d.TranslationTextPattern.SingleBracketBinding,value:s,onChange:_,onCreateNewEntry:j,onShowExistingEntry:W,disabled:m,busy:i?{busy:i,useMinWaitingTime:!0}:void 0})," "),t.default.createElement(P,{tableData:b,onDelete:F}))};n.translationInput=N;function P(s){const r=Array.from({length:3}).map((x,i)=>{const c={key:"test"+(i+1),name:"",fieldName:"",minWidth:100,maxWidth:300};return i===0?(c.name="Key",c.fieldName="key",c.onRender=a=>t.default.createElement("div",{"data-i18n-key":a.key},a.key)):i===1?(c.name="Value",c.fieldName="value"):i===2&&(c.name="Delete",c.minWidth=50,c.maxWidth=50,c.onRender=a=>t.default.createElement(C.UIIconButton,{onClick:()=>{s.onDelete(a.key)},iconProps:{iconName:D.UiIcons.TrashCan}})),c}),m=".ms-Fabric--isFocusVisible .ms-DetailsList .ms-DetailsRow-cell:focus::after { z-index: -1; }";return t.default.createElement(t.default.Fragment,null,t.default.createElement("style",null,m),t.default.createElement("div",{style:{position:"relative",height:"100%"}},t.default.createElement(U.UITable,{dataSetKey:"datasetkey",items:s.tableData,columns:r})))}}}]);})();