{"action":"created","comment":{"url":"https://api.github.com/repos/Microsoft/angular-react/pulls/comments/234254795","pull_request_review_id":175863986,"id":234254795,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIzNDI1NDc5NQ==","diff_hunk":"@@ -0,0 +1,85 @@\n+// Copyright (c) Microsoft Corporation. All rights reserved.\n+// Licensed under the MIT License.\n+\n+import { EventEmitter, QueryList } from '@angular/core';\n+import { Subscription } from 'rxjs';\n+\n+import { TypedChanges } from '../../../declarations/angular/typed-changes';\n+import { ItemChangedPayload } from '../../core/declarative/item-changed.payload';\n+import { ChangeableItemDirective } from './changeable-item.directive';\n+\n+/**\n+ * Helper class for single changeable item\n+ */\n+export class ChangeableItemHelper<TItem> {\n+  readonly onItemChanged = new EventEmitter<ItemChangedPayload<string, TItem>>();\n+\n+  constructor(private readonly key: string) {}\n+\n+  onChanges(changes: TypedChanges<TItem>) {\n+    this.onItemChanged.emit({ key: this.key, changes });\n+  }\n+}\n+\n+/**\n+ * Parent class for wrapper directive for multiple ChangeableItemDirectives\n+ */\n+export class ChangeableItemsHelper<TItem> {\n+  readonly onChildItemChanged = new EventEmitter<ItemChangedPayload<string, TItem>>();\n+  readonly onItemsChanged = new EventEmitter<QueryList<ChangeableItemDirective<TItem>>>();\n+\n+  private readonly _subscriptionsMap: { [key: string]: Subscription } = {};\n+  private _changeSubscription: Subscription;\n+\n+  constructor(\n+    private directiveItems: QueryList<ChangeableItemDirective<TItem>>,\n+    private self?: IChangeableItemsContainer<TItem>,\n+    private nonSelfHandler?: (nonSelfDirectives: ChangeableItemDirective<TItem>[]) => void\n+  ) {}\n+\n+  afterContentInit() {\n+    this._subscribeNewDirectives();\n+    this._changeSubscription = this.directiveItems.changes.subscribe(newValues => {\n+      this.onItemsChanged.emit(newValues);\n+      this._subscribeNewDirectives();\n+    });\n+  }\n+\n+  onDestroy() {\n+    Object.keys(this._subscriptionsMap).forEach(key => this._subscriptionsMap[key].unsubscribe());\n+    this._changeSubscription.unsubscribe();\n+  }\n+\n+  private _subscribeNewDirectives() {\n+    const nonSelfDirectives = this._handleNonSelfDirectives();\n+    nonSelfDirectives.forEach(directiveItem => {\n+      if (this._subscriptionsMap[directiveItem.key]) {\n+        this._subscriptionsMap[directiveItem.key].unsubscribe();\n+      }\n+      this._subscriptionsMap[directiveItem.key] = directiveItem.onItemChanged.subscribe(changes => {\n+        this._handleNonSelfDirectives();\n+        this.onChildItemChanged.emit(changes);\n+        if (this.self && this.self.onItemChanged) {\n+          this.self.onItemChanged.emit(changes);\n+        }\n+      });\n+    });\n+  }\n+\n+  private _handleNonSelfDirectives() {\n+    const nonSelfDirectives = this.directiveItems.filter(directiveItem => directiveItem !== (this.self as any));","path":"libs/fabric/src/lib/components/core/shared/changeable-helper.ts","position":70,"original_position":70,"commit_id":"107c37cd626de7205de0b212a78796116ede05c3","original_commit_id":"107c37cd626de7205de0b212a78796116ede05c3","user":{"login":"xjerwa","id":41396986,"node_id":"MDQ6VXNlcjQxMzk2OTg2","avatar_url":"https://avatars2.githubusercontent.com/u/41396986?v=4","gravatar_id":"","url":"https://api.github.com/users/xjerwa","html_url":"https://github.com/xjerwa","followers_url":"https://api.github.com/users/xjerwa/followers","following_url":"https://api.github.com/users/xjerwa/following{/other_user}","gists_url":"https://api.github.com/users/xjerwa/gists{/gist_id}","starred_url":"https://api.github.com/users/xjerwa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xjerwa/subscriptions","organizations_url":"https://api.github.com/users/xjerwa/orgs","repos_url":"https://api.github.com/users/xjerwa/repos","events_url":"https://api.github.com/users/xjerwa/events{/privacy}","received_events_url":"https://api.github.com/users/xjerwa/received_events","type":"User","site_admin":false},"body":"VSC was giving me a warning since `directiveItem` is ChangeableItemDirective while `this.self` is IChangeableItemsContainer. The comparison should still be valid since when directives contain children of its own type, it will both extend ChangeableItemDirective and also implement IChangeableItemsContainer. The `as any` was mainly to get rid of the red underline in VSC.\r\n\r\n![image](https://user-images.githubusercontent.com/41396986/48632097-e7d87180-e974-11e8-9ec3-64eeb4a42578.png)\r\n","created_at":"2018-11-16T15:55:57Z","updated_at":"2018-11-16T15:55:57Z","html_url":"https://github.com/Microsoft/angular-react/pull/37#discussion_r234254795","pull_request_url":"https://api.github.com/repos/Microsoft/angular-react/pulls/37","author_association":"NONE","_links":{"self":{"href":"https://api.github.com/repos/Microsoft/angular-react/pulls/comments/234254795"},"html":{"href":"https://github.com/Microsoft/angular-react/pull/37#discussion_r234254795"},"pull_request":{"href":"https://api.github.com/repos/Microsoft/angular-react/pulls/37"}},"in_reply_to_id":234167788},"pull_request":{"url":"https://api.github.com/repos/Microsoft/angular-react/pulls/37","id":230572238,"node_id":"MDExOlB1bGxSZXF1ZXN0MjMwNTcyMjM4","html_url":"https://github.com/Microsoft/angular-react/pull/37","diff_url":"https://github.com/Microsoft/angular-react/pull/37.diff","patch_url":"https://github.com/Microsoft/angular-react/pull/37.patch","issue_url":"https://api.github.com/repos/Microsoft/angular-react/issues/37","number":37,"state":"open","locked":false,"title":"[Fabric] Add DetailsList, GroupItem, and MarqueeSelection components (#37)","user":{"login":"xjerwa","id":41396986,"node_id":"MDQ6VXNlcjQxMzk2OTg2","avatar_url":"https://avatars2.githubusercontent.com/u/41396986?v=4","gravatar_id":"","url":"https://api.github.com/users/xjerwa","html_url":"https://github.com/xjerwa","followers_url":"https://api.github.com/users/xjerwa/followers","following_url":"https://api.github.com/users/xjerwa/following{/other_user}","gists_url":"https://api.github.com/users/xjerwa/gists{/gist_id}","starred_url":"https://api.github.com/users/xjerwa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xjerwa/subscriptions","organizations_url":"https://api.github.com/users/xjerwa/orgs","repos_url":"https://api.github.com/users/xjerwa/repos","events_url":"https://api.github.com/users/xjerwa/events{/privacy}","received_events_url":"https://api.github.com/users/xjerwa/received_events","type":"User","site_admin":false},"body":"[Fabric] Add DetailsList, GroupItem, and MarqueeSelection components (#37)\r\nAlso created changeable-item and changeable-items for ease of adding directives in the future","created_at":"2018-11-13T18:00:55Z","updated_at":"2018-11-16T15:55:57Z","closed_at":null,"merged_at":null,"merge_commit_sha":"168ae0913217749883caf3c7a16e54ebc4923012","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Microsoft/angular-react/pulls/37/commits","review_comments_url":"https://api.github.com/repos/Microsoft/angular-react/pulls/37/comments","review_comment_url":"https://api.github.com/repos/Microsoft/angular-react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Microsoft/angular-react/issues/37/comments","statuses_url":"https://api.github.com/repos/Microsoft/angular-react/statuses/107c37cd626de7205de0b212a78796116ede05c3","head":{"label":"Microsoft:pr/37","ref":"pr/37","sha":"107c37cd626de7205de0b212a78796116ede05c3","user":{"login":"Microsoft","id":6154722,"node_id":"MDEyOk9yZ2FuaXphdGlvbjYxNTQ3MjI=","avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"repo":{"id":144321557,"node_id":"MDEwOlJlcG9zaXRvcnkxNDQzMjE1NTc=","name":"angular-react","full_name":"Microsoft/angular-react","private":false,"owner":{"login":"Microsoft","id":6154722,"node_id":"MDEyOk9yZ2FuaXphdGlvbjYxNTQ3MjI=","avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/Microsoft/angular-react","description":"Use React components inside Angular","fork":false,"url":"https://api.github.com/repos/Microsoft/angular-react","forks_url":"https://api.github.com/repos/Microsoft/angular-react/forks","keys_url":"https://api.github.com/repos/Microsoft/angular-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Microsoft/angular-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Microsoft/angular-react/teams","hooks_url":"https://api.github.com/repos/Microsoft/angular-react/hooks","issue_events_url":"https://api.github.com/repos/Microsoft/angular-react/issues/events{/number}","events_url":"https://api.github.com/repos/Microsoft/angular-react/events","assignees_url":"https://api.github.com/repos/Microsoft/angular-react/assignees{/user}","branches_url":"https://api.github.com/repos/Microsoft/angular-react/branches{/branch}","tags_url":"https://api.github.com/repos/Microsoft/angular-react/tags","blobs_url":"https://api.github.com/repos/Microsoft/angular-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Microsoft/angular-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Microsoft/angular-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/Microsoft/angular-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Microsoft/angular-react/statuses/{sha}","languages_url":"https://api.github.com/repos/Microsoft/angular-react/languages","stargazers_url":"https://api.github.com/repos/Microsoft/angular-react/stargazers","contributors_url":"https://api.github.com/repos/Microsoft/angular-react/contributors","subscribers_url":"https://api.github.com/repos/Microsoft/angular-react/subscribers","subscription_url":"https://api.github.com/repos/Microsoft/angular-react/subscription","commits_url":"https://api.github.com/repos/Microsoft/angular-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/Microsoft/angular-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/Microsoft/angular-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/Microsoft/angular-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/Microsoft/angular-react/contents/{+path}","compare_url":"https://api.github.com/repos/Microsoft/angular-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Microsoft/angular-react/merges","archive_url":"https://api.github.com/repos/Microsoft/angular-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Microsoft/angular-react/downloads","issues_url":"https://api.github.com/repos/Microsoft/angular-react/issues{/number}","pulls_url":"https://api.github.com/repos/Microsoft/angular-react/pulls{/number}","milestones_url":"https://api.github.com/repos/Microsoft/angular-react/milestones{/number}","notifications_url":"https://api.github.com/repos/Microsoft/angular-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Microsoft/angular-react/labels{/name}","releases_url":"https://api.github.com/repos/Microsoft/angular-react/releases{/id}","deployments_url":"https://api.github.com/repos/Microsoft/angular-react/deployments","created_at":"2018-08-10T18:48:01Z","updated_at":"2018-11-01T11:11:14Z","pushed_at":"2018-11-16T13:45:02Z","git_url":"git://github.com/Microsoft/angular-react.git","ssh_url":"git@github.com:Microsoft/angular-react.git","clone_url":"https://github.com/Microsoft/angular-react.git","svn_url":"https://github.com/Microsoft/angular-react","homepage":"https://microsoft.github.io/angular-react/","size":3714,"stargazers_count":25,"watchers_count":25,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":5,"mirror_url":null,"archived":false,"open_issues_count":5,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":5,"open_issues":5,"watchers":25,"default_branch":"master"}},"base":{"label":"Microsoft:master","ref":"master","sha":"2b7b9a913daf147aa30308d19d5522d7da47e0a7","user":{"login":"Microsoft","id":6154722,"node_id":"MDEyOk9yZ2FuaXphdGlvbjYxNTQ3MjI=","avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"repo":{"id":144321557,"node_id":"MDEwOlJlcG9zaXRvcnkxNDQzMjE1NTc=","name":"angular-react","full_name":"Microsoft/angular-react","private":false,"owner":{"login":"Microsoft","id":6154722,"node_id":"MDEyOk9yZ2FuaXphdGlvbjYxNTQ3MjI=","avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/Microsoft/angular-react","description":"Use React components inside Angular","fork":false,"url":"https://api.github.com/repos/Microsoft/angular-react","forks_url":"https://api.github.com/repos/Microsoft/angular-react/forks","keys_url":"https://api.github.com/repos/Microsoft/angular-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Microsoft/angular-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Microsoft/angular-react/teams","hooks_url":"https://api.github.com/repos/Microsoft/angular-react/hooks","issue_events_url":"https://api.github.com/repos/Microsoft/angular-react/issues/events{/number}","events_url":"https://api.github.com/repos/Microsoft/angular-react/events","assignees_url":"https://api.github.com/repos/Microsoft/angular-react/assignees{/user}","branches_url":"https://api.github.com/repos/Microsoft/angular-react/branches{/branch}","tags_url":"https://api.github.com/repos/Microsoft/angular-react/tags","blobs_url":"https://api.github.com/repos/Microsoft/angular-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Microsoft/angular-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Microsoft/angular-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/Microsoft/angular-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Microsoft/angular-react/statuses/{sha}","languages_url":"https://api.github.com/repos/Microsoft/angular-react/languages","stargazers_url":"https://api.github.com/repos/Microsoft/angular-react/stargazers","contributors_url":"https://api.github.com/repos/Microsoft/angular-react/contributors","subscribers_url":"https://api.github.com/repos/Microsoft/angular-react/subscribers","subscription_url":"https://api.github.com/repos/Microsoft/angular-react/subscription","commits_url":"https://api.github.com/repos/Microsoft/angular-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/Microsoft/angular-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/Microsoft/angular-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/Microsoft/angular-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/Microsoft/angular-react/contents/{+path}","compare_url":"https://api.github.com/repos/Microsoft/angular-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Microsoft/angular-react/merges","archive_url":"https://api.github.com/repos/Microsoft/angular-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Microsoft/angular-react/downloads","issues_url":"https://api.github.com/repos/Microsoft/angular-react/issues{/number}","pulls_url":"https://api.github.com/repos/Microsoft/angular-react/pulls{/number}","milestones_url":"https://api.github.com/repos/Microsoft/angular-react/milestones{/number}","notifications_url":"https://api.github.com/repos/Microsoft/angular-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Microsoft/angular-react/labels{/name}","releases_url":"https://api.github.com/repos/Microsoft/angular-react/releases{/id}","deployments_url":"https://api.github.com/repos/Microsoft/angular-react/deployments","created_at":"2018-08-10T18:48:01Z","updated_at":"2018-11-01T11:11:14Z","pushed_at":"2018-11-16T13:45:02Z","git_url":"git://github.com/Microsoft/angular-react.git","ssh_url":"git@github.com:Microsoft/angular-react.git","clone_url":"https://github.com/Microsoft/angular-react.git","svn_url":"https://github.com/Microsoft/angular-react","homepage":"https://microsoft.github.io/angular-react/","size":3714,"stargazers_count":25,"watchers_count":25,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":5,"mirror_url":null,"archived":false,"open_issues_count":5,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":5,"open_issues":5,"watchers":25,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Microsoft/angular-react/pulls/37"},"html":{"href":"https://github.com/Microsoft/angular-react/pull/37"},"issue":{"href":"https://api.github.com/repos/Microsoft/angular-react/issues/37"},"comments":{"href":"https://api.github.com/repos/Microsoft/angular-react/issues/37/comments"},"review_comments":{"href":"https://api.github.com/repos/Microsoft/angular-react/pulls/37/comments"},"review_comment":{"href":"https://api.github.com/repos/Microsoft/angular-react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Microsoft/angular-react/pulls/37/commits"},"statuses":{"href":"https://api.github.com/repos/Microsoft/angular-react/statuses/107c37cd626de7205de0b212a78796116ede05c3"}},"author_association":"NONE"}}
{"actor":{"display_login":"xjerwa"}}