UNPKG

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