azure-devops-ui/Core/Observable.min.js

React components for building web UI in Azure DevOps

import*as React from"react";class Observable{constructor(){this.observers={},this.subscriberCount=0}notify(s,t,e){var r=(e,s,t)=>{try{e(s,t)}catch(e){console.warn(e),e&&"function"==typeof ErrorEvent&&window.dispatchEvent(new ErrorEvent("error",{error:e,filename:"Observable.ts",message:e.message}))}};if(this.observers[t]){var i=this.observers[t].slice();for(let e=0;e<i.length;e++)r(i[e],s,t)}if(this.observers[""]){var n=this.observers[""].slice();for(let e=0;e<n.length;e++)r(n[e],s,t)}e&&(this.events||(this.events=[]),this.events.push({action:t,value:s}))}subscribe(e,s){if(this.observers[s=s||""]||(this.observers[s]=[]),this.observers[s].push(e),this.subscriberCount++,this.events)for(const t of this.events)s&&t.action!==s||e(t.value,t.action);return e}unsubscribe(e,s){this.observers[s=s||""]&&0<=(e=this.observers[s].indexOf(e))&&(this.observers[s].splice(e,1),this.subscriberCount--)}}var ObservableLike;!function(e){function r(e){return e&&"function"==typeof e.subscribe}e.isObservable=r,e.getValue=function(e){return r(e)?e.value:e},e.subscribe=function(e,s,t){return r(e)?e.subscribe(s,t):()=>{}},e.unsubscribe=function(e,s,t){r(e)&&e.unsubscribe(s,t)}}(ObservableLike=ObservableLike||{});class ObservableValue extends Observable{constructor(e){super(),this.v=e}get value(){return this.v}set value(e){this.v=e,this.notify(this.v,"set")}}class ObservableObject extends Observable{constructor(){super(...arguments),this.objects={}}add(e,s){this.objects.hasOwnProperty(e)||(this.objects[e]=s,this.notify({key:e,value:s},"add"))}get(e){return this.objects[e]}set(e,s){this.objects.hasOwnProperty(e)?(this.objects[e]=s,this.notify({key:e,value:s},"replace")):this.add(e,s)}keys(){return Object.keys(this.objects)}}class ObservableArray extends Observable{constructor(e=[]){super(),this.internalItems=e||[]}change(e,...s){return this.internalItems.splice(e,s.length,...s),this.notify({index:e,changedItems:s},"change"),s.length}changeOrderedBatch(e){var s=[];for(const t of e)void 0!==t.items&&t.items.length&&(this.internalItems.splice(t.start,t.items.length,...t.items),s.push(...t.items));return this.notify({index:this.getMinItemIndexByBatch(e),changedItems:s},"change"),e.reduce((e,s)=>e+(s.items?s.items.length:0),0)}get length(){return this.internalItems.length}push(...e){var s;return e.length&&(s=this.internalItems.length,this.internalItems.push(...e),this.notify({addedItems:e,index:s},"push")),e.length}pop(){var e=this.internalItems.pop();return void 0!==e&&this.notify({index:this.internalItems.length,removedItems:[e]},"pop"),e}removeAll(e){var s=[],t=[];for(const r of this.internalItems)(!e||e(r)?s:t).push(r);if(0<s.length){this.internalItems.splice(0,this.internalItems.length);for(const i of t)this.internalItems.push(i);this.notify({index:0,removedItems:s},"removeAll")}return s}splice(e,s,...t){s=this.internalItems.splice(e,s,...t);return this.notify({addedItems:t,index:e,removedItems:s},"splice"),s}spliceOrderedBatch(e){var s=[],t=[];for(const r of e){let e;void 0!==r.itemsToAdd&&r.itemsToAdd.length?(e=this.internalItems.splice(r.start,r.deleteCount,...r.itemsToAdd),s.push(...r.itemsToAdd)):e=this.internalItems.splice(r.start,r.deleteCount),t.push(...e)}return this.notify({addedItems:s,index:this.getMinItemIndexByBatch(e),removedItems:t},"splice"),t}get value(){return this.internalItems}set value(e){let s;if(e===this.internalItems)s=this.internalItems;else if(s=this.internalItems.slice(),this.internalItems.length=0,e.length)for(const t of e)this.internalItems.push(t);this.notify({addedItems:e,index:0,removedItems:s},"splice")}getMinItemIndexByBatch(e){return e.reduce((e,s)=>s.start<e.start?s:e).start}}class ObservableCollection extends Observable{constructor(){super(...arguments),this.collections=[],this.items=[]}get length(){return this.subscriberCount||this.recalculateItems(),this.items.length}get value(){return this.subscriberCount||this.recalculateItems(),this.items}push(e,s){let t,r;var i;if(ObservableLike.isObservable(e)?(n=e,i=this.getSubscriber(this.collections.length,s),t={observable:n,subscriber:i,transformItems:s,items:[]},r=n.value,this.subscriberCount&&ObservableLike.subscribe(t.observable,i)):e.length&&(r=e,t={items:this.transformItems(r,s)}),t&&(this.collections.push(t),this.subscriberCount)&&r.length){var n=this.transformItems(r,s);for(const a of n)this.items.push(a);this.notify({addedItems:n,index:this.items.length-n.length},"push")}}subscribe(e,s){e=super.subscribe(e,s);if(1===this.subscriberCount){this.recalculateItems();for(const t of this.collections)t.subscriber&&t.observable.subscribe(t.subscriber)}return e}unsubscribe(e,s){if(super.unsubscribe(e,s),0===this.subscriberCount)for(const t of this.collections)t.subscriber&&t.observable.unsubscribe(t.subscriber)}recalculateItems(){this.items.length=0;for(const e of this.collections){e.observable&&(e.items=this.transformItems(e.observable.value,e.transformItems));for(const s of e.items)this.items.push(s)}}transformItems(e,s){let t;if(e)if(s){t=[];for(const i of e){var r=s(i);void 0!==r&&t.push(r)}}else t=e;else t=[];return t}getSubscriber(a,l){return e=>{let s=e.index;for(let e=0;e<a;e++)s+=this.collections[e].items.length;if(e.changedItems){var t=this.transformItems(e.changedItems,l);this.items.splice(s,e.changedItems.length,...t),this.notify({changedItems:t,index:s},"change")}else{var t=this.transformItems(e.removedItems,l),e=this.transformItems(e.addedItems,l),r=(this.items.splice(s,t.length),this.items.splice(s));for(const i of e)this.items.push(i);for(const n of r)this.items.push(n);this.notify({removedItems:t,addedItems:e,index:s},"splice")}}}}class ReadyableObservableArray extends ObservableArray{constructor(e=[],s=!1){super(e),this.ready=new ObservableValue(s)}}class ReadyableObservableValue extends ObservableValue{constructor(e,s=!1){super(e),this.ready=new ObservableValue(s)}}function useObservable(e){const[s]=React.useState(e),[t]=React.useState(()=>new ObservableValue(s));return[t,e=>{t.value="function"==typeof e?e(t.value):e}]}function useObservableArray(e){var[e]=React.useState(e);const s=React.useState(new ObservableArray(e));return[s[0],e=>{s[0].value="function"==typeof e?e(s[0].value):e}]}function useDerivedObservable(e,s,t){const[r,i]=useObservable(s(e.value)),n=React.useCallback(s,t);return useSubscription(e,e=>{e=n(e);i(e)},t),r}function useSubscription(s,e,t=[]){const r=React.useRef(!1),i=React.useCallback(e,t);React.useEffect(()=>{r.current?i(s.value):r.current=!0},[s]),React.useEffect(()=>{const e=()=>i(s.value);return s.subscribe(e),()=>s.unsubscribe(e)},[s,i])}function useDebouncedSubscription(e,s,t,r=[]){const i=React.useRef(null);useSubscription(e,e=>{i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{t(e),i.current=null},s)},[s,...r])}export{Observable,ObservableLike,ObservableValue,ObservableObject,ObservableArray,ObservableCollection,ReadyableObservableArray,ReadyableObservableValue,useObservable,useObservableArray,useDerivedObservable,useSubscription,useDebouncedSubscription};