From 8aef6e100e408a66ee57520def1ee0ba299287c8 Mon Sep 17 00:00:00 2001 From: czernous-devexpress Date: Thu, 4 Mar 2021 13:02:49 +0300 Subject: [PATCH 1/3] update code snippets --- angular/src/app/app.component.html | 20 ++++++----- angular/src/app/app.component.ts | 33 ++++++++++-------- jquery/index.js | 43 ++++++++++++----------- react/src/App.js | 55 ++++++++++++++++-------------- vue/src/App.vue | 6 +++- 5 files changed, 86 insertions(+), 71 deletions(-) diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 38e4701..8d57e3c 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -1,10 +1,12 @@ - \ No newline at end of file + text="Sandra Johnson" + icon="user" + [items]="actions" + keyExpr="id" + displayExpr="text" + (onItemClick)="logAction($event)" + [splitButton]="true" + (onButtonClick)="logButtonClick()" + [dropDownOptions]="dropDownOptions" +> + diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index 7e8665c..8296549 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -1,23 +1,26 @@ import { Component } from '@angular/core'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], }) export class AppComponent { - actions: Array<{id: Number, text: String, icon: String}> = [ -     { id: 1, text: "My profile", icon: "user" }, -     { id: 2, text: "Messages", icon: "email" }, -     { id: 3, text: "Contacts", icon: "group" }, -     { id: 4, text: "Log out", icon: "runner" } - ]; + actions: Array<{ id: Number; text: String; icon: String }> = [ + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' }, + ]; + dropDownOptions = { + height: 150, + }; - logAction(e) { - console.log(e.itemData.text + " was clicked"); - } + logAction(e) { + console.log(e.itemData.text + ' was clicked'); + } - logButtonClick() { - console.log("Main button was clicked"); - } + logButtonClick() { + console.log('Main button was clicked'); + } } diff --git a/jquery/index.js b/jquery/index.js index 276a269..cd7f196 100644 --- a/jquery/index.js +++ b/jquery/index.js @@ -1,23 +1,26 @@ const actions = [ -    { id: 1, text: "My profile", icon: "user" }, -    { id: 2, text: "Messages", icon: "email" }, -    { id: 3, text: "Contacts", icon: "group" }, -    { id: 4, text: "Log out", icon: "runner" } + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' }, ]; -$(function() { - $("#myDropDownButton").dxDropDownButton({ - text: "Sandra Johnson", - icon: "user", - displayExpr: "text", - items: actions, - keyExpr: "id", - onItemClick: function(e) { - console.log(e.itemData.text + " was clicked"); - }, - splitButton: true, - onButtonClick: function() { - console.log("Main button was clicked"); - } - }); -}); \ No newline at end of file +$(function () { + $('#myDropDownButton').dxDropDownButton({ + text: 'Sandra Johnson', + icon: 'user', + displayExpr: 'text', + items: actions, + keyExpr: 'id', + onItemClick: function (e) { + console.log(e.itemData.text + ' was clicked'); + }, + splitButton: true, + onButtonClick: function () { + console.log('Main button was clicked'); + }, + dropDownOptions: { + height: 150, + }, + }); +}); diff --git a/react/src/App.js b/react/src/App.js index 0c36b42..4d4359e 100644 --- a/react/src/App.js +++ b/react/src/App.js @@ -6,34 +6,37 @@ import 'devextreme/dist/css/dx.light.css'; import DropDownButton from 'devextreme-react/drop-down-button'; const actions = [ - { id: 1, text: "My profile", icon: "user" }, - { id: 2, text: "Messages", icon: "email" }, - { id: 3, text: "Contacts", icon: "group" }, - { id: 4, text: "Log out", icon: "runner" } + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' }, ]; - +const dropDownOptions = { + height: 150, +}; class App extends React.Component { - logAction(e) { - console.log(e.itemData.text + " was clicked"); - } + logAction(e) { + console.log(e.itemData.text + ' was clicked'); + } - logButtonClick() { - console.log("Main button was clicked"); - } + logButtonClick() { + console.log('Main button was clicked'); + } - render() { - return ( - - ); - } + render() { + return ( + + ); + } } -export default App; \ No newline at end of file +export default App; diff --git a/vue/src/App.vue b/vue/src/App.vue index 87d499b..48c9097 100644 --- a/vue/src/App.vue +++ b/vue/src/App.vue @@ -8,6 +8,7 @@ @item-click="logAction" :split-button="true" @button-click="logButtonClick" + :drop-down-options="dropDownOptions" /> @@ -27,7 +28,10 @@ export default { }, data() { return { - actions + actions, + dropDownOptions: { + height: 150, + } } }, methods: { From 553de03714528804cb050d453cbc8d4465bb8452 Mon Sep 17 00:00:00 2001 From: czernous-devexpress Date: Thu, 4 Mar 2021 14:10:09 +0300 Subject: [PATCH 2/3] update formatting --- angular/src/app/app.component.html | 18 +++++------ angular/src/app/app.component.ts | 36 ++++++++++----------- jquery/index.js | 42 ++++++++++++------------ react/src/App.js | 52 +++++++++++++++--------------- vue/src/App.vue | 20 ++++++------ 5 files changed, 84 insertions(+), 84 deletions(-) diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 8d57e3c..289352e 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -1,12 +1,12 @@ diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index 8296549..a1f59fe 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -1,26 +1,26 @@ import { Component } from '@angular/core'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] }) export class AppComponent { - actions: Array<{ id: Number; text: String; icon: String }> = [ - { id: 1, text: 'My profile', icon: 'user' }, - { id: 2, text: 'Messages', icon: 'email' }, - { id: 3, text: 'Contacts', icon: 'group' }, - { id: 4, text: 'Log out', icon: 'runner' }, - ]; - dropDownOptions = { - height: 150, - }; + actions: Array<{ id: Number; text: String; icon: String }> = [ + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' } + ]; + dropDownOptions = { + height: 150 + }; - logAction(e) { - console.log(e.itemData.text + ' was clicked'); - } + logAction(e) { + console.log(e.itemData.text + ' was clicked'); + } - logButtonClick() { - console.log('Main button was clicked'); - } + logButtonClick() { + console.log('Main button was clicked'); + } } diff --git a/jquery/index.js b/jquery/index.js index cd7f196..31d8368 100644 --- a/jquery/index.js +++ b/jquery/index.js @@ -1,26 +1,26 @@ const actions = [ - { id: 1, text: 'My profile', icon: 'user' }, - { id: 2, text: 'Messages', icon: 'email' }, - { id: 3, text: 'Contacts', icon: 'group' }, - { id: 4, text: 'Log out', icon: 'runner' }, + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' } ]; $(function () { - $('#myDropDownButton').dxDropDownButton({ - text: 'Sandra Johnson', - icon: 'user', - displayExpr: 'text', - items: actions, - keyExpr: 'id', - onItemClick: function (e) { - console.log(e.itemData.text + ' was clicked'); - }, - splitButton: true, - onButtonClick: function () { - console.log('Main button was clicked'); - }, - dropDownOptions: { - height: 150, - }, - }); + $('#myDropDownButton').dxDropDownButton({ + text: 'Sandra Johnson', + icon: 'user', + displayExpr: 'text', + items: actions, + keyExpr: 'id', + onItemClick: function (e) { + console.log(e.itemData.text + ' was clicked'); + }, + splitButton: true, + onButtonClick: function () { + console.log('Main button was clicked'); + }, + dropDownOptions: { + height: 150 + } + }); }); diff --git a/react/src/App.js b/react/src/App.js index 4d4359e..fcdd60e 100644 --- a/react/src/App.js +++ b/react/src/App.js @@ -6,37 +6,37 @@ import 'devextreme/dist/css/dx.light.css'; import DropDownButton from 'devextreme-react/drop-down-button'; const actions = [ - { id: 1, text: 'My profile', icon: 'user' }, - { id: 2, text: 'Messages', icon: 'email' }, - { id: 3, text: 'Contacts', icon: 'group' }, - { id: 4, text: 'Log out', icon: 'runner' }, + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' } ]; const dropDownOptions = { - height: 150, + height: 150 }; class App extends React.Component { - logAction(e) { - console.log(e.itemData.text + ' was clicked'); - } + logAction(e) { + console.log(e.itemData.text + ' was clicked'); + } - logButtonClick() { - console.log('Main button was clicked'); - } + logButtonClick() { + console.log('Main button was clicked'); + } - render() { - return ( - - ); - } + render() { + return ( + + ); + } } export default App; diff --git a/vue/src/App.vue b/vue/src/App.vue index 48c9097..2fc0041 100644 --- a/vue/src/App.vue +++ b/vue/src/App.vue @@ -16,10 +16,10 @@ import DxDropDownButton from 'devextreme-vue/drop-down-button'; const actions = [ - { id: 1, text: "My profile", icon: "user" }, - { id: 2, text: "Messages", icon: "email" }, - { id: 3, text: "Contacts", icon: "group" }, - { id: 4, text: "Log out", icon: "runner" } + { id: 1, text: 'My profile', icon: 'user' }, + { id: 2, text: 'Messages', icon: 'email' }, + { id: 3, text: 'Contacts', icon: 'group' }, + { id: 4, text: 'Log out', icon: 'runner' } ]; export default { @@ -30,17 +30,17 @@ export default { return { actions, dropDownOptions: { - height: 150, + height: 150 } - } + }; }, methods: { logAction(e) { - console.log(e.itemData.text + " was clicked"); + console.log(e.itemData.text + ' was clicked'); }, logButtonClick() { - console.log("Main button was clicked"); + console.log('Main button was clicked'); } } -} - \ No newline at end of file +}; + From 341febb87832ebb620fbc3a1ae3c52113c36e9b2 Mon Sep 17 00:00:00 2001 From: Anton Chernous <74176530+czernous-devexpress@users.noreply.github.com> Date: Thu, 4 Mar 2021 14:55:36 +0300 Subject: [PATCH 3/3] Update angular/src/app/app.component.html Co-authored-by: RomanTsukanov --- angular/src/app/app.component.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 289352e..74fbbd6 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -7,6 +7,5 @@ (onItemClick)="logAction($event)" [splitButton]="true" (onButtonClick)="logButtonClick()" - [dropDownOptions]="dropDownOptions" -> + [dropDownOptions]="dropDownOptions">