@progress/kendo-react-indicators
Version:
React Indicators offer an interface to represent a visual indication for their UI elements. KendoReact Indicators package
16 lines (15 loc) • 6.11 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactIndicators={},e.React,e.PropTypes,e.KendoReactCommon)}(this,function(e,o,r,t){"use strict";function n(e){var o=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),o.default=e,Object.freeze(o)}var s=n(o);const a=s.forwardRef((e,o)=>{const{cutoutBorder:r=l.cutoutBorder,position:n=l.position,align:a=l.align,children:i,className:c,style:d}=e,u=s.useRef(null),m=s.useCallback(()=>{u.current&&u.current.focus()},[]);s.useImperativeHandle(o,()=>({element:u.current,focus:m}));const p=t.useDir(u,e.dir),f=s.useMemo(()=>e.size||l.size,[e.size]),g=s.useMemo(()=>e.fillMode||l.fillMode,[e.fillMode]),k=s.useMemo(()=>e.themeColor||l.themeColor,[e.themeColor]),y=s.useMemo(()=>e.rounded?t.kendoThemeMaps.roundedMap[e.rounded]:void 0,[e.rounded]),b=s.useMemo(()=>t.classNames("k-badge",{"k-badge-sm":"small"===f,"k-badge-md":"medium"===f,"k-badge-lg":"large"===f,[`k-badge-${g}`]:g,[`k-badge-${k}`]:k,"k-badge-border-cutout":r,[`k-badge-${n}`]:n,"k-top-start":"top"===a.vertical&&"start"===a.horizontal,"k-top-end":"top"===a.vertical&&"end"===a.horizontal,"k-bottom-start":"bottom"===a.vertical&&"start"===a.horizontal,"k-bottom-end":"bottom"===a.vertical&&"end"===a.horizontal,[`k-rounded-${y}`]:y},c),[f,g,k,y,r,a,n,c]);return s.createElement("span",{className:b,style:d,dir:p},i)});a.propTypes={className:r.string,dir:r.string,style:r.object,align:r.shape({vertical:r.oneOf(["top","bottom"]),horizontal:r.oneOf(["start","end"])}),size:r.oneOf(["small","medium","large"]),fillMode:r.oneOf(["solid","outline"]),themeColor:r.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse","inherit"]),rounded:r.oneOf(["small","medium","large","full","none"]),position:r.oneOf(["edge","outside","inside"]),cutoutBorder:r.bool};const l={size:void 0,fillMode:void 0,themeColor:void 0,position:"edge",align:{vertical:"top",horizontal:"end"},cutoutBorder:!1};a.displayName="KendoBadge";const i=s.forwardRef((e,o)=>{const{children:r,className:n,style:a}=e,l=s.useRef(null),i=s.useCallback(()=>{l.current&&l.current.focus()},[]);s.useImperativeHandle(o,()=>({element:l.current,focus:i}));const c=t.useDir(l,e.dir),d=s.useMemo(()=>t.classNames("k-badge-container",n),[n]),u=s.useMemo(()=>({display:"inline-block",...a}),[a]);return s.createElement("span",{className:d,style:u,dir:c},r)});i.propTypes={className:r.string,dir:r.string,style:r.object},i.displayName="KendoBadgeContainer";const c={pulsing:2,"infinite-spinner":3,"converging-spinner":4},d={pulsing:"k-loader-pulsing-2","infinite-spinner":"k-loader-spinner-3","converging-spinner":"k-loader-spinner-4"},u=s.forwardRef((e,o)=>{const{className:r,style:n}=e,a=s.useRef(null),l=s.useCallback(()=>{a.current&&a.current.focus()},[]);s.useImperativeHandle(o,()=>({element:a.current,focus:l}));const i=s.useMemo(()=>e.size||m.size,[e.size]),u=s.useMemo(()=>e.themeColor||m.themeColor,[e.themeColor]),p=s.useMemo(()=>e.type||m.type,[e.type]),f=s.useMemo(()=>t.classNames("k-loader",{"k-loader-sm":"small"===i,"k-loader-md":"medium"===i,"k-loader-lg":"large"===i,"k-loader-primary":"primary"===u,"k-loader-secondary":"secondary"===u,"k-loader-tertiary":"tertiary"===u,"k-loader-info":"info"===u,"k-loader-success":"success"===u,"k-loader-warning":"warning"===u,"k-loader-error":"error"===u,"k-loader-dark":"dark"===u,"k-loader-light":"light"===u,"k-loader-inverse":"inverse"===u},r,d[p]),[i,u,r,p]),g=new Array(c[p]);return g.fill(0,0,c[p]),s.createElement("div",{className:f,style:n},s.createElement("div",{className:"k-loader-canvas"},g.map((e,o)=>s.createElement("span",{key:o,className:"k-loader-segment"}))))});u.propTypes={className:r.string,style:r.object,type:r.oneOf(["pulsing","infinite-spinner","converging-spinner"]),size:r.oneOf(["small","medium","large"]),themeColor:r.oneOf(["primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};const m={size:void 0,themeColor:void 0,type:"pulsing"};u.displayName="KendoLoader";const p=s.forwardRef((e,o)=>{const{className:r,style:n}=e,a=s.useRef(null),l=s.useCallback(()=>{a.current&&a.current.focus()},[]);s.useImperativeHandle(o,()=>({element:a.current,focus:l}));const i=s.useMemo(()=>e.shape||f.shape,[e.shape]),c=s.useMemo(()=>!1!==e.animation&&(e.animation||f.animation),[e.animation]),d=s.useMemo(()=>t.classNames("k-skeleton",{"k-skeleton-circle":"circle"===i,"k-skeleton-rect":"rectangle"===i,"k-skeleton-text":"text"===i,"k-skeleton-pulse":"object"==typeof c&&"pulse"===c.type,"k-skeleton-wave":"object"==typeof c&&"wave"===c.type||!0===c},r),[i,c,r]);return s.createElement("span",{ref:a,className:d,style:n})});p.propTypes={className:r.string,style:r.object,animation:r.shape({type:r.oneOf(["wave","pulse"])}),shape:r.oneOf(["circle","rectangle","text"])};const f={shape:"text",animation:{type:"pulse"}};p.displayName="KendoSkeleton",e.Badge=a,e.BadgeContainer=i,e.Loader=u,e.Skeleton=p});