@progress/kendo-react-buttons
Version:
All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package
9 lines (8 loc) • 4.95 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),Y=require("../util.js"),Z=require("./tools/ToolbarScrollable.js"),ee=require("./tools/ToolbarOverflowSection.js");function te(l){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const a in l)if(a!=="default"){const y=Object.getOwnPropertyDescriptor(l,a);Object.defineProperty(b,a,y.get?y:{enumerable:!0,get:()=>l[a]})}}return b.default=l,Object.freeze(b)}const t=te(X),E=t.forwardRef((l,b)=>{const{children:a,className:y,id:N,ariaLabel:A,keyboardNavigation:R,role:x,onResize:B,style:D,tabIndex:P=d.tabIndex,size:h=d.size,fillMode:I=d.fillMode,overflow:u,scrollButtons:m=d.scrollButtons,scrollButtonsPosition:_=d.scrollButtonsPosition,buttonScrollSpeed:$=d.buttonScrollSpeed,prevButton:F,nextButton:G}=l,T=t.useRef(!1),r=t.useRef(null),S=t.useRef(null),g=t.useRef(0),v=t.useRef(0),c=t.useRef([]),p=t.useRef({element:null,props:l}),[J,Q]=t.useState(!1),[z,M]=t.useState(!0),[W,K]=t.useState(!1),k=i.useDir(r,l.dir),w=t.useMemo(()=>l.buttons||Y.toolbarButtons,[l.buttons]),U=t.useMemo(()=>w.map(e=>e+":focus").join(","),[w]),q=()=>{const e=r.current&&r.current.querySelector(U);return Math.max(0,c.current.findIndex(s=>s===e))};t.useImperativeHandle(p,()=>({element:r.current,props:l})),t.useImperativeHandle(b,()=>p.current),t.useEffect(()=>(window.addEventListener("resize",H),r.current&&(v.current=r.current.offsetWidth,g.current=r.current.offsetHeight,R!==!1&&(c.current=Array.from(r.current.querySelectorAll(w.join(","))),j(0))),()=>{window.removeEventListener("resize",H),c.current.length=0}),[]),t.useEffect(()=>{if(T.current){if(!r.current||R===!1)return;c.current=Array.from(r.current.querySelectorAll(w.join(","))),j(q()),L()}else T.current=!0});const j=e=>{c.current.forEach((s,o)=>{s.tabIndex=o===e?P:-1})},V=e=>{const s=e.keyCode===i.Keys.left||e.keyCode===i.Keys.right||e.keyCode===i.Keys.home||e.keyCode===i.Keys.end,o=q();!s||e.defaultPrevented||c.current.findIndex(f=>f===e.target)===-1||(e.keyCode===i.Keys.left?O(o,o===0?c.current.length-1:o-1):O(o,o===c.current.length-1?0:o+1),e.keyCode===i.Keys.home&&O(o,0),e.keyCode===i.Keys.end&&O(o,c.current.length-1))},O=(e,s)=>{const o=c.current[s];if(o){o.tabIndex=P,o.focus();const f=c.current[e];f&&(f.tabIndex=-1)}},H=e=>{if(!r.current)return;const s=r.current.offsetWidth,o=r.current.offsetHeight;if(v.current!==s||g.current!==o){v.current=s,g.current=o;const f={offsetWidth:v.current,offsetHeight:g.current};B&&B.call(void 0,{target:p.current,...f,nativeEvent:e})}L()},L=t.useCallback(()=>{const e=S.current;e&&Q(e.scrollWidth>e.clientWidth||e.scrollHeight>e.clientHeight)},[]),C=t.useCallback(()=>{const e=S.current;if(e){const s=e.scrollLeft===0,o=k!=="rtl"?e.scrollLeft+e.clientWidth===e.scrollWidth:e.clientWidth-e.scrollLeft===e.scrollWidth;s&&M(!0),o&&K(!0),!s&&!o&&(M(!1),K(!1))}},[k]);return t.useEffect(()=>{const e=S.current;if(e)return e.addEventListener("scroll",C),()=>{e.removeEventListener("scroll",C)}},[C]),t.createElement("div",{id:N,"aria-label":A,className:i.classNames("k-toolbar",{[`k-toolbar-${i.kendoThemeMaps.sizeMap[h]||h}`]:h,[`k-toolbar-${I}`]:I,"k-toolbar-scrollable":u==="scroll","k-toolbar-scrollable-overlay":u==="scroll"&&(m==="hidden"||m===void 0),"k-toolbar-scrollable-start":u==="scroll"&&m==="hidden"&&z,"k-toolbar-scrollable-end":u==="scroll"&&m==="hidden"&&W,"k-toolbar-section":l.overflow&&u==="section"},y),style:D,role:x!==void 0?x||void 0:"toolbar",dir:k,ref:r,onKeyDown:R!==!1?V:void 0},u==="scroll"&&t.createElement(Z.ToolbarScrollable,{scrollButtons:m,scrollButtonsPosition:_,prevButton:F,nextButton:G,isOverflowing:J,scrollContentRef:S,buttonScrollSpeed:$,dir:k,isScrollStartPosition:z,isScrollEndPosition:W,children:a}),u==="section"&&t.createElement(ee.ToolbarOverflowSection,{toolbarRef:r,fillMode:I,size:h},a),(u==="none"||u===void 0)&&a)}),d={tabIndex:0,size:"medium",fillMode:"solid",scrollButtons:"auto",scrollButtonsPosition:"split",buttonScrollSpeed:100};E.displayName="KendoReactToolbar";E.propTypes={tabIndex:n.number,dir:n.string,keyboardNavigation:n.bool,style:n.object,className:n.string,role:n.string,onResize:n.func,buttons:n.arrayOf(n.string.isRequired),size:n.oneOf([null,"small","medium","large"]),fillMode:n.oneOf([null,"solid","flat","outline"]),overflow:n.oneOf(["none","section","scroll"]),scrollButtons:n.oneOf(["hidden","visible","auto"]),scrollButtonsPosition:n.oneOf(["start","end","split"]),buttonScrollSpeed:n.number};exports.Toolbar=E;