How to use reRender method in cavy

Best JavaScript code snippet using cavy

iterationArrayValueChange_ArrayFromAttribute_PassThroughValueTest.js

Source:iterationArrayValueChange_ArrayFromAttribute_PassThroughValueTest.js Github

copy

Full Screen

1/​*2 * Copyright (C) 2013 salesforce.com, inc.3 *4 * Licensed under the Apache License, Version 2.0 (the "License");5 * you may not use this file except in compliance with the License.6 * You may obtain a copy of the License at7 *8 * http:/​/​www.apache.org/​licenses/​LICENSE-2.09 *10 * Unless required by applicable law or agreed to in writing, software11 * distributed under the License is distributed on an "AS IS" BASIS,12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.13 * See the License for the specific language governing permissions and14 * limitations under the License.15 */​16({17 /​/​two tests for clear and replace the whole array. this one replace attribute, the one below replace directly iteration items.18 /​/​notice the difference in re-rendering count, as replacing attribute won't trigger re-render, it just destroy & replace the whole thing19 testClearAndReplaceWholeArrayInAttribute: {20 test: [function(cmp) {21 cmp.set("v.listdata",[]);22 }, function(cmp) {23 var expected = [];24 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();25 $A.test.assertEquals( expected.length, iterCmpEle.length, "number of element in iteration component is not expected after clear v.listdata." );26 27 cmp.set("v.listdata",[1,2,3,4,5]);28 }, function(cmp) {29 var expected = [30 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "1"},31 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "2"},32 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "3"},33 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "4"},34 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "5"}];35 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();36 $A.test.assertEquals( expected.length, iterCmpEle.length, "number of element in iteration component is not expected after replace v.listdata." );37 this.assertIterationCmpElements(expected, iterCmpEle);38 }39 ]40 },41 42 testClearAndReplaceWholeArrayInIteration: {43 test: [function(cmp) {44 var iter = cmp.find("iterationOnArrayAttributePassthrough");45 iter.set("v.items",[]);46 }, function(cmp) {47 var expected = [];48 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();49 $A.test.assertEquals( expected.length, iterCmpEle.length, "number of element in iteration component is not expected after clear v.items in iteration." );50 51 var iter = cmp.find("iterationOnArrayAttributePassthrough");52 iter.set("v.items",["1","2","3","4","5"]);53 }, function(cmp) {54 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();55 var expected = [56 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "1"},57 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "2"},58 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "3"},59 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "4"},60 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "5"}];61 $A.test.assertEquals( expected.length, iterCmpEle.length, "number of element in iteration component is not expected after replace v.items in iteration." );62 this.assertIterationCmpElements(expected, iterCmpEle);63 }64 ]65 },66 67 /​/​notice that changing start and end doesn't trigger rerender.68 testChangeStartAndEnd: {69 attributes: {start:0, end:5},70 test: [function(cmp) {71 cmp.set("v.start", 1);72 }, function(cmp) {73 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();74 var expected = [75 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "1"},76 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "2"},77 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "3"},78 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "4"}];79 this.assertIterationCmpElements(expected, iterCmpEle);80 }, function(cmp) {81 cmp.set("v.end", 4);82 }, function(cmp) {83 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();84 var expected = [85 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "1"},86 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "2"},87 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "3"}];88 this.assertIterationCmpElements(expected, iterCmpEle);89 }90 ]91 },92 93 /​/​check elements in iteration component 94 /​/​if we change the value in attribute directly, rerender doesn't happen to that iteration item, hence the count is 095 assertIterationCmpElements: function(expected, cmpElements) {96 $A.test.assertEquals( expected.length, cmpElements.length, "number of element in iteration component is not expected." );97 for(var i = 0; i< expected.length; i++) {98 var eleText = $A.test.getText(cmpElements[i]);99 var exp = expected[i];100 $A.test.assertTrue(eleText.indexOf("Passthrough String: "+exp.passthrough_string) > -1, "unexpected Passthrough String");101 $A.test.assertTrue(eleText.indexOf("render count: "+exp.render_count) > -1, "unexpected render count");102 $A.test.assertTrue(eleText.indexOf("rerender count: "+exp.rerender_count) > -1, "unexpected rerender count");103 $A.test.assertTrue(eleText.indexOf("unrender count: "+exp.unrender_count) > -1, "unexpected unrerender count");104 }105 },106 107 testSetItemsInIteration:{108 attributes:{ indexToChange:1 , newValueToChange:999 },109 test: [function(cmp){110 var index = parseInt(cmp.get("v.indexToChange"), 10);111 var newValue = cmp.get("v.newValueToChange");112 var iter = cmp.find("iterationOnArrayAttributePassthrough");113 var data = iter.get("v.items");114 data[index] = newValue; 115 iter.set("v.items", data);116 }, function(cmp) {117 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();118 var expected = 119 [{render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "0"},120 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "999"},121 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "2"},122 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "3"},123 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "4"}];124 125 this.assertIterationCmpElements(expected, iterCmpEle);126 127 var v_listdata = cmp.get("v.listdata");128 for(var i = 0; i < v_listdata.length; i++) {129 $A.test.assertEquals( expected[i].passthrough_string, v_listdata[i].toString(), "unexpected map data at index#"+i );130 }131 }]132 },133 134 135 testSetItemsInAttribute: {136 attributes:{ indexToChange:1 , newValueToChange:999 },137 test: [function(cmp){138 var index = parseInt(cmp.get("v.indexToChange"), 10);139 var newValue = cmp.get("v.newValueToChange");140 var data = cmp.get("v.listdata");141 data[index] = newValue; 142 cmp.set("v.listdata", data);143 }, function(cmp) {144 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();145 var expected = 146 [{render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "0"},147 {render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "999"},148 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "2"},149 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "3"},150 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "4"}];151 this.assertIterationCmpElements(expected, iterCmpEle);152 }]153 },154 155 testInsertItemsInIteration:{156 attributes:{ indexToInsert:0 , newValueToInsert:999 },157 test: [function(cmp){158 var index = parseInt(cmp.get("v.indexToInsert"), 10);159 var newValue = cmp.get("v.newValueToInsert");160 var iter = cmp.find("iterationOnArrayAttributePassthrough");161 var data = iter.get("v.items");162 data.splice ( index, 0, newValue); 163 iter.set("v.items", data);164 }, function(cmp) {165 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();166 var expected = 167 [{render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "999"},168 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "0"},169 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "1"},170 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "2"},171 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "3"},172 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "4"}];173 this.assertIterationCmpElements(expected, iterCmpEle);174 175 var v_listdata = cmp.get("v.listdata");176 for(var i = 0; i < v_listdata.length; i++) {177 $A.test.assertEquals( expected[i].passthrough_string, v_listdata[i].toString(), "unexpected map data at index#"+i );178 }179 }]180 },181 182 testInsertItemsInAttribute: {183 attributes:{ indexToChange:0 , newValueToInsert:999 },184 test: [function(cmp){185 var index = parseInt(cmp.get("v.indexToInsert"), 10);186 var newValue = cmp.get("v.newValueToInsert");187 var data = cmp.get("v.listdata");188 data.splice ( index, 0, newValue); 189 cmp.set("v.listdata", data);190 }, function(cmp) {191 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();192 var expected = 193 [{render_count: 1, rerender_count: 0, unrender_count:0, passthrough_string: "999"},194 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "0"},195 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "1"},196 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "2"},197 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "3"},198 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "4"}];199 this.assertIterationCmpElements(expected, iterCmpEle);200 }]201 },202 203 testDeleteItemsInIteration:{204 attributes:{ indexToDelete:0 },205 test: [function(cmp){206 var index = parseInt(cmp.get("v.indexToInsert"), 10);207 var iter = cmp.find("iterationOnArrayAttributePassthrough");208 var data = iter.get("v.items");209 data.splice ( index, 1); 210 iter.set("v.items", data);211 }, function(cmp) {212 var index = parseInt(cmp.get("v.indexToInsert"), 10);213 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();214 var expected = 215 [{render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "1"},216 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "2"},217 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "3"},218 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "4"}];219 this.assertIterationCmpElements(expected, iterCmpEle);220 221 222 var v_listdata = cmp.get("v.listdata");223 for(var i = 0; i < v_listdata.length; i++) {224 $A.test.assertEquals( expected[i].passthrough_string, v_listdata[i].toString(), "unexpected map data at index#"+i );225 }226 }]227 },228 229 testDeleteItemsInAttribute: {230 attributes:{ indexToDelete:0 },231 test: [function(cmp){232 var index = parseInt(cmp.get("v.indexToInsert"), 10);233 var data = cmp.get("v.listdata");234 data.splice ( index, 1); 235 cmp.set("v.listdata", data);236 }, function(cmp) {237 var index = parseInt(cmp.get("v.indexToInsert"), 10);238 var iterCmpEle = cmp.find("iterationOnArrayAttributePassthrough").getElements();239 var expected = 240 [{render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "1"},241 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "2"},242 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "3"},243 {render_count: 1, rerender_count: 1, unrender_count:0, passthrough_string: "4"}];244 this.assertIterationCmpElements(expected, iterCmpEle);245 }]246 }247 248 ...

Full Screen

Full Screen

av-grid-rerender-check.js

Source:av-grid-rerender-check.js Github

copy

Full Screen

1const range = (left, right) => Array.from({length: right - left + 1}, (_, i) => left + i);2const markStickyLeftDirty = (rerender, input) => range(0, input.stickyLeft - 1)3 .forEach(i => rerender.columns[i] = true);4const markStickyRightDirty = (rerender, input) => range(input.columnCount - input.stickyRight, input.columnCount - 1)5 .forEach(i => rerender.columns[i] = true);6const markStickyTopDirty = (rerender, input) => range(0, input.stickyTop - 1)7 .forEach(i => rerender.rows[i] = true);8const markStickyBottomDirty = (rerender, input) => range(1, input.stickyBottom)9 .forEach(i => rerender.rows[input.rowCount - i] = true);10const markStickyTopDiffDirty = (rerender, old, input) => 11 range(Math.min(old.input.stickyTop, input.stickyTop) + 1, Math.max(old.input.stickyTop, input.stickyTop))12 .forEach(i => rerender.rows[i - 1] = true);13const markStickyBottomDiffDirty = (rerender, old, input) => range(1, Math.max(old.input.stickyBottom, input.stickyBottom))14 .forEach(i => rerender.rows[input.rowCount - i] = true);15const markStickyLeftDiffDirty = (rerender, old, input) =>16 range(Math.min(old.input.stickyLeft, input.stickyLeft) + 1, Math.max(old.input.stickyLeft, input.stickyLeft))17 .forEach(i => rerender.columns[i - 1] = true);18const markStickyRightDiffDirty = (rerender, old, input) => range(1, Math.max(old.input.stickyRight, input.stickyRight))19 .forEach(i => rerender.columns[input.columnCount - i] = true);20function markVisibleColumnDirty(rerender, old, input){21 range(old.rendered.left, old.rendered.right).forEach(i => rerender.columns[i] = true);22 markStickyLeftDirty(rerender, input);23 markStickyRightDirty(rerender, input);24}25function markVisibleRowDirty(rerender, old, input){26 for (let i = old.rendered.top; i <= old.rendered.bottom; i++){27 rerender.rows[i] = true;28 }29 markStickyTopDirty(rerender, input);30 markStickyBottomDirty(rerender, input);31}32function markDirtyWidth(rerender, old, columnLength){33 let res = false;34 let dirtyIndex = old.columnLength.findIndex((oldLength, idx) => oldLength !== columnLength[idx]);35 if (dirtyIndex < 0){36 return false;37 }38 if (dirtyIndex < old.rendered.right){39 range(Math.max(dirtyIndex, old.rendered.left), old.rendered.right).forEach(i => rerender.columns[i] = true);40 res = true;41 }42 if (dirtyIndex < old.input.stickyLeft){43 markStickyLeftDirty(rerender, old.input);44 res = true;45 }46 if (old.input.stickyRight && dirtyIndex <= old.input.columnCount - old.input.stickyRight){47 markStickyRightDirty(rerender, old.input);48 res = true;49 }50 51 return res;52}53function markDirtyHeight(rerender, old, rowLength){54 let res = false;55 let dirtyIndex = old.rowLength.findIndex((oldLength, idx) => oldLength !== rowLength[idx]);56 if (dirtyIndex < 0){57 return false;58 }59 if (dirtyIndex < old.rendered.bottom){60 range(Math.max(dirtyIndex, old.rendered.top), old.rendered.bottom).forEach(i => rerender.rows[i] = true);61 res = true;62 }63 if (dirtyIndex < old.input.stickyTop){64 markStickyTopDirty(rerender, old.input);65 res = true;66 }67 if (old.input.stickyBottom && dirtyIndex <= old.input.rowCount - old.input.stickyBottom){68 markStickyBottomDirty(rerender, old.input);69 res = true;70 }71 72 return res;73}74export function prepareRerender(rerender, old, input, columnLength, rowLength){75 let res;76 let empty;77 if (!rerender){78 res = {79 rows: {},80 columns: {},81 cells: {}82 }83 empty = true;84 } else {85 const rows = (rerender.rows || []).filter(r => r >= old.rendered.top && r <= old.rendered.bottom);86 const columns = (rerender.columns || []).filter(c => c >= old.rendered.left && c <= old.rendered.right);87 const cells = (rerender.cells || [])88 .filter(({row, col}) => row >= old.rendered.top && row <= old.rendered.bottom &&89 col >= old.rendered.left && col <= old.rendered.right90 );91 empty = !(rows.length || columns.length || cells.length);92 res = {93 rows: rows.reduce((acc, r) => {acc[r] = true; return acc}, {}),94 columns: columns.reduce((acc, c) => {acc[c] = true; return acc}, {}),95 cells: cells.reduce((acum, {row, col}) => {96 acum[`${row}_${col}`] = true;97 return acum;98 }, {}),99 }100 }101 if (old.input.stickyTop !== input.stickyTop){102 markStickyTopDiffDirty(res, old, input);103 markStickyLeftDirty(res, input);104 markStickyRightDirty(res, input);105 empty = false;106 }107 if (old.input.stickyBottom !== input.stickyBottom){108 markStickyBottomDiffDirty(res, old, input);109 empty = false;110 }111 if (old.input.stickyLeft !== input.stickyLeft){112 markStickyLeftDiffDirty(res, old, input);113 empty = false;114 }115 if (old.input.stickyRight !== input.stickyRight){116 markStickyRightDiffDirty(res, old, input);117 empty = false;118 }119 if (old.input.rowCount !== input.rowCount){120 markStickyBottomDirty(res, old.input);121 markStickyBottomDirty(res, input);122 empty = false;123 }124 if (old.input.columnCount !== input.columnCount){125 markStickyRightDirty(res, old.input);126 markStickyRightDirty(res, input);127 empty = false;128 }129 if ( (typeof old.columnLength === 'number') ^ (typeof columnLength === 'number') ){130 markVisibleColumnDirty(res, old, input);131 empty = false;132 } else {133 if (typeof columnLength === 'number'){134 if (old.columnLength !== columnLength){135 markVisibleColumnDirty(res, old, input);136 empty = false;137 }138 } else {139 if (markDirtyWidth(res, old, columnLength)){140 empty = false;141 }142 } 143 }144 if ( (typeof old.rowLength === 'number') ^ (typeof rowLength === 'number') ){145 markVisibleRowDirty(res, old, input);146 empty = false;147 } else {148 if (typeof rowLength === 'number'){149 if (old.rowLength !== rowLength){150 markVisibleRowDirty(res, old, input);151 empty = false;152 }153 } else {154 if (markDirtyHeight(res, old, rowLength)){155 empty = false;156 }157 } 158 }159 160 if (empty){161 return null;162 }163 164 return res;...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

1/​/​2/​/​ I'm hotlinking to some SVG images from flaticon.com3/​/​ for use as the snowflakes. I hope that remains possible4/​/​ especially with the below attribution;5/​/​6/​/​ ❄ Icons made by Freepik from www.flaticon.com7/​/​ ❄ https:/​/​www.flaticon.com/​packs/​snowflakes8/​/​9let colorType = {10 type: 'multi',11};12let colors = {13 color1: 'rgba(255,255,255,1)',14 color2: 'rgba(142,217,222,1)',15 color3: 'rgba(232,248,255,1)',16 color4: 'rgba(135,143,145,1)',17};18let options = {19 alphaSpeed: 10,20 alphaVariance: 1,21 color: [colors.color1, colors.color2, colors.color3, colors.color4],22 composition: 'source-over',23 count: 350,24 direction: 161,25 float: 0.75,26 glow: 0,27 imageUrl: [28 'https:/​/​image.flaticon.com/​icons/​svg/​23/​23858.svg',29 'https:/​/​image.flaticon.com/​icons/​svg/​23/​23883.svg',30 'https:/​/​image.flaticon.com/​icons/​svg/​23/​23889.svg',31 'https:/​/​image.flaticon.com/​icons/​svg/​24/​24296.svg',32 'https:/​/​image.flaticon.com/​icons/​svg/​23/​23901.svg',33 'https:/​/​image.flaticon.com/​icons/​svg/​24/​24286.svg',34 ],35 maxAlpha: 2,36 maxSize: 22,37 minAlpha: -0.2,38 minSize: 4,39 parallax: 1.75,40 rotation: 0.5,41 shape: 'image',42 speed: 3,43 style: 'fill',44 twinkle: false,45 xVariance: 5,46 yVariance: 0,47};48window.onload = function () {49 initStats();50 initSparticles();51 initGui();52};53window.initSparticles = function () {54 var $main = document.querySelector('main');55 window.mySparticles = new Sparticles($main, options);56};57window.initStats = function () {58 var stats = new Stats();59 stats.domElement.classList.add('stats');60 document.body.appendChild(stats.domElement);61 function statsDisplay() {62 stats.begin();63 stats.end();64 requestAnimationFrame(statsDisplay);65 }66 requestAnimationFrame(statsDisplay);67};68window.initGui = function () {69 const s = window.mySparticles;70 const shapes = ['circle', 'square', 'triangle', 'diamond', 'line', 'image'];71 const styles = ['fill', 'stroke', 'both'];72 const colorOptions = ['single', 'multi', 'rainbow'];73 const composites = [74 'source-over',75 'source-in',76 'source-out',77 'source-atop',78 'destination-over',79 'destination-in',80 'destination-out',81 'destination-atop',82 'lighter',83 'copy',84 'xor',85 'multiply',86 'screen',87 'overlay',88 'darken',89 'color-dodge',90 'color-burn',91 'hard-light',92 'soft-light',93 'difference',94 'exclusion',95 'hue',96 'saturation',97 'color',98 'luminosity',99 ];100 const rerender = () => {101 s.createColorArray();102 s.createShapeArray();103 s.setupOffscreenCanvasses(function () {104 s.createSparticles();105 });106 };107 var rerenderColors = function (v) {108 if (colorType.type === 'rainbow') {109 s.settings.color = 'rainbow';110 } else if (colorType.type === 'single') {111 s.settings.color = colors.color1;112 } else {113 s.settings.color = Object.keys(colors).map((i) => {114 return colors[i];115 });116 }117 rerender();118 };119 const gui = new dat.GUI({ load: options });120 const part = gui.addFolder('Particles');121 part.open();122 part.add(s.settings, 'count', 1, 500, 1).onFinishChange(rerender);123 part.add(s.settings, 'shape', shapes).onFinishChange(rerender);124 part.add(s.settings, 'style', styles).onFinishChange(rerender);125 const image = part.addFolder('Image');126 /​/​ image.add(s.settings, "imageUrl").onFinishChange(rerender);127 part.add(s.settings, 'minSize', 1, 50, 1).onFinishChange(rerender);128 part.add(s.settings, 'maxSize', 1, 50, 1).onFinishChange(rerender);129 const anim = gui.addFolder('Animation');130 anim.add(s.settings, 'direction', 0, 360, 1).onFinishChange(rerender);131 anim.add(s.settings, 'speed', 0, 100, 0.1).onFinishChange(rerender);132 anim.add(s.settings, 'rotation', 0, 100, 0.1).onFinishChange(rerender);133 const move = anim.addFolder('Movement');134 move.add(s.settings, 'parallax', 0, 10, 0.1).onFinishChange(rerender);135 move.add(s.settings, 'float', 0, 10, 0.1).onFinishChange(rerender);136 move.add(s.settings, 'xVariance', 0, 10, 0.1).onFinishChange(rerender);137 move.add(s.settings, 'yVariance', 0, 10, 0.1).onFinishChange(rerender);138 const vis = gui.addFolder('Visual');139 vis.add(s.settings, 'glow', 0, 50).onFinishChange(rerender);140 vis.add(s.settings, 'composition', composites).onFinishChange(rerender);141 const alpha = vis.addFolder('Alpha');142 alpha.add(s.settings, 'twinkle').onFinishChange(rerender);143 alpha.add(s.settings, 'minAlpha', -2, 2, 0.1).onFinishChange(rerender);144 alpha.add(s.settings, 'maxAlpha', -2, 2, 0.1).onFinishChange(rerender);145 alpha.add(s.settings, 'alphaSpeed', 0, 50, 1).onFinishChange(rerender);146 alpha.add(s.settings, 'alphaVariance', 0, 20, 1).onFinishChange(rerender);147 const color = vis.addFolder('Color');148 color.open();149 color.add(colorType, 'type', colorOptions).onFinishChange(rerenderColors);150 color.addColor(colors, 'color1').onFinishChange(rerenderColors);151 color.addColor(colors, 'color2').onFinishChange(rerenderColors);152 color.addColor(colors, 'color3').onFinishChange(rerenderColors);153 color.addColor(colors, 'color4').onFinishChange(rerenderColors);154 const control = gui.addFolder('Controls');155 control.add(s, 'start');156 control.add(s, 'stop');...

Full Screen

Full Screen

App.js

Source:App.js Github

copy

Full Screen

1import React, {useState} from 'react';2import PersonalDetails from './​components/​personal_details';3import EducationalQual from './​components/​educational_quals';4import WorkExperience from './​components/​work_experience';5import SubmitCV from "./​components/​submit_cv";6import './​css/​personalStyles.css';7const App = () => {8 const [editMode, setEditMode] = useState(true);9 const [name, setName] = useState('');10 const [email, setEmail] = useState('');11 const [phone, setPhone] = useState('');12 const [city, setCity] = useState('');13 const [country, setCountry] = useState('');14 const [education, setEducation] = useState([]);15 const [work, setWork] = useState([]);16 const [rerender,setRerender] = useState(false)17 18 const handleSubmit = (e) => {19 let education_copy = education;20 for(let i=0; i < education_copy.length;i++) {21 education_copy[i].editing = false;22 }23 setEducation(education_copy)24 let work_copy = work;25 for(let i=0; i < work_copy.length;i++) {26 work_copy[i].editing = false;27 }28 setWork(work_copy)29 let new_state=(editMode)?false:true;30 setEditMode(new_state)31 }32 const handleInput = (target,value) => {33 let setOfVariables = {34 "name": setName,35 "email": setEmail,36 "phone": setPhone,37 "city": setCity,38 "country": setCountry39 }40 setOfVariables[target](value);41 }42 const handleEducationInput = (values) => {43 setEducation([...education,values])44 }45 const handleEducationDelete = (index) => {46 let education_copy = education;47 education_copy[index].deleted = true;48 setEducation(education_copy)49 let rerender_copy = rerender;50 rerender_copy = (rerender)? false : true;51 setRerender(rerender_copy)52 }53 const HandleEducationEdit = (index) => {54 let education_copy = education;55 education_copy[index].editing = (education_copy[index].editing)? false : true;56 setEducation(education_copy)57 let rerender_copy = rerender;58 rerender_copy = (rerender)? false : true;59 setRerender(rerender_copy)60 }61 const handleEducationUpdate = (index,values) => {62 let education_copy = education;63 education_copy[index].degree = values.degree;64 education_copy[index].uni = values.uni;65 education_copy[index].desc = values.desc;66 education_copy[index].start = values.start;67 education_copy[index].end = values.end;68 education_copy[index].ongoing = values.ongoing;69 education_copy[index].editing = false;70 setEducation(education_copy)71 let rerender_copy = rerender;72 rerender_copy = (rerender)? false : true;73 setRerender(rerender_copy)74 }75 const handleWorkInput = (values) => {76 setWork([...work,values])77 }78 const handleWorkDelete = (index) => {79 let work_copy = work;80 work_copy[index].deleted = true;81 setWork(work_copy)82 let rerender_copy = rerender;83 rerender_copy = (rerender)? false : true;84 setRerender(rerender_copy)85 }86 const handleWorkEdit = (index) => {87 let work_copy = work;88 work_copy[index].editing = (work_copy[index].editing)? false : true;89 setWork(work_copy)90 let rerender_copy = rerender;91 rerender_copy = (rerender)? false : true;92 setRerender(rerender_copy)93 }94 const handleWorkUpdate = (index,values) => {95 let work_copy = work;96 work_copy[index].designation = values.designation;97 work_copy[index].company = values.company;98 work_copy[index].rnr = values.rnr;99 work_copy[index].from = values.from;100 work_copy[index].to = values.to;101 work_copy[index].ongoing = values.ongoing;102 work_copy[index].editing = false;103 setWork(work_copy)104 let rerender_copy = rerender;105 rerender_copy = (rerender)? false : true;106 setRerender(rerender_copy)107 }108 return (109 <div className="App" className="cv_section">110 <PersonalDetails 111 onType={handleInput}112 editMode={editMode}113 name={name}114 email={email}115 phone={phone}116 city={city}117 country={country}118 /​>119 <EducationalQual120 editMode={editMode}121 education={education}122 onAdd={handleEducationInput}123 onDelete={handleEducationDelete}124 onEdit={HandleEducationEdit}125 onUpdate={handleEducationUpdate}126 /​>127 <WorkExperience128 editMode={editMode}129 work={work}130 onAdd={handleWorkInput}131 onDelete={handleWorkDelete}132 onEdit={handleWorkEdit}133 onUpdate={handleWorkUpdate}134 /​>135 <SubmitCV136 onSubmit={handleSubmit}137 editMode={editMode}138 /​>139 </​div>140 );141}...

Full Screen

Full Screen

rerender.js

Source:rerender.js Github

copy

Full Screen

1'use strict';2angular.module('showcase.rerender', ['datatables', 'ngResource'])3.controller('RerenderDefaultRendererCtrl', RerenderDefaultRendererCtrl)4.controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl)5.controller('RerenderPromiseRendererCtrl', RerenderPromiseRendererCtrl)6.controller('RerenderNGRendererCtrl', RerenderNGRendererCtrl);7function RerenderDefaultRendererCtrl(DTOptionsBuilder, DTColumnDefBuilder) {8 var vm = this;9 vm.dtOptions = DTOptionsBuilder.newOptions();10 vm.dtColumnDefs = [11 DTColumnDefBuilder.newColumnDef(0),12 DTColumnDefBuilder.newColumnDef(1).notVisible(),13 DTColumnDefBuilder.newColumnDef(2).notSortable()14 ];15 vm.dtInstance = {};16}17function RerenderAjaxRendererCtrl(DTOptionsBuilder, DTColumnBuilder) {18 var vm = this;19 vm.dtOptions = DTOptionsBuilder.fromSource('data.json');20 vm.dtColumns = [21 DTColumnBuilder.newColumn('id').withTitle('ID'),22 DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),23 DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()24 ];25 vm.dtInstance = {};26}27function RerenderPromiseRendererCtrl($resource, DTOptionsBuilder, DTColumnBuilder) {28 var vm = this;29 vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {30 return $resource('data.json').query().$promise;31 });32 vm.dtColumns = [33 DTColumnBuilder.newColumn('id').withTitle('ID'),34 DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),35 DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()36 ];37 vm.dtInstance = {};38}39function RerenderNGRendererCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {40 var vm = this;41 vm.persons = [];42 vm.dtOptions = DTOptionsBuilder.newOptions();43 vm.dtColumnDefs = [44 DTColumnDefBuilder.newColumnDef(0),45 DTColumnDefBuilder.newColumnDef(1).notVisible(),46 DTColumnDefBuilder.newColumnDef(2).notSortable()47 ];48 vm.dtInstance = {};49 $resource('data.json').query().$promise.then(function(persons) {50 vm.persons = persons;51 });...

Full Screen

Full Screen

topic_closing_view.js

Source:topic_closing_view.js Github

copy

Full Screen

1/​**2 This view is used for rendering the notification that a topic will3 automatically close.4 @class TopicClosingView5 @extends Discourse.View6 @namespace Discourse7 @module Discourse8**/​9Discourse.TopicClosingView = Discourse.View.extend({10 elementId: 'topic-closing-info',11 delayedRerender: null,12 shouldRerender: Discourse.View.renderIfChanged('topic.details.auto_close_at'),13 render: function(buffer) {14 if (!this.present('topic.details.auto_close_at')) return;15 var autoCloseAt = moment(this.get('topic.details.auto_close_at'));16 if (autoCloseAt < new Date()) return;17 var duration = moment.duration(autoCloseAt - moment());18 var timeLeftString, rerenderDelay, minutesLeft = duration.asMinutes();19 if (minutesLeft > 1410) {20 timeLeftString = I18n.t('in_n_days', {count: Math.round(duration.asDays())});21 if( minutesLeft > 2160 ) {22 rerenderDelay = 12 * 60 * 60000;23 } else {24 rerenderDelay = 60 * 60000;25 }26 } else if (minutesLeft > 90) {27 timeLeftString = I18n.t('in_n_hours', {count: Math.round(duration.asHours())});28 rerenderDelay = 30 * 60000;29 } else if (minutesLeft > 2) {30 timeLeftString = I18n.t('in_n_minutes', {count: Math.round(duration.asMinutes())});31 rerenderDelay = 60000;32 } else {33 timeLeftString = I18n.t('in_n_seconds', {count: Math.round(duration.asSeconds())});34 rerenderDelay = 1000;35 }36 buffer.push('<h3><i class="fa fa-clock-o"></​i> ');37 buffer.push( I18n.t('topic.auto_close_notice', {timeLeft: timeLeftString}) );38 buffer.push('</​h3>');39 /​/​ TODO Sam: concerned this can cause a heavy rerender loop40 this.set('delayedRerender', Em.run.later(this, this.rerender, rerenderDelay));41 },42 willDestroyElement: function() {43 if( this.delayedRerender ) {44 Em.run.cancel(this.get('delayedRerender'));45 }46 }...

Full Screen

Full Screen

topic-closing.js.es6

Source:topic-closing.js.es6 Github

copy

Full Screen

1import StringBuffer from 'discourse/​mixins/​string-buffer';2export default Ember.Component.extend(StringBuffer, {3 elementId: 'topic-closing-info',4 delayedRerender: null,5 rerenderTriggers: ['topic.closed',6 'topic.details.auto_close_at',7 'topic.details.auto_close_based_on_last_post',8 'topic.details.auto_close_hours'],9 renderString(buffer) {10 if (!!Ember.isEmpty(this.get('topic.details.auto_close_at'))) return;11 if (this.get("topic.closed")) return;12 var autoCloseAt = moment(this.get('topic.details.auto_close_at'));13 if (autoCloseAt < new Date()) return;14 var duration = moment.duration(autoCloseAt - moment());15 var minutesLeft = duration.asMinutes();16 var timeLeftString = duration.humanize(true);17 var rerenderDelay = 1000;18 if (minutesLeft > 2160) {19 rerenderDelay = 12 * 60 * 60000;20 } else if (minutesLeft > 1410) {21 rerenderDelay = 60 * 60000;22 } else if (minutesLeft > 90) {23 rerenderDelay = 30 * 60000;24 } else if (minutesLeft > 2) {25 rerenderDelay = 60000;26 }27 var basedOnLastPost = this.get("topic.details.auto_close_based_on_last_post");28 var key = basedOnLastPost ? 'topic.auto_close_notice_based_on_last_post' : 'topic.auto_close_notice';29 var autoCloseHours = this.get("topic.details.auto_close_hours") || 0;30 buffer.push('<h3><i class="fa fa-clock-o"></​i> ');31 buffer.push( I18n.t(key, { timeLeft: timeLeftString, duration: moment.duration(autoCloseHours, "hours").humanize() }) );32 buffer.push('</​h3>');33 /​/​ TODO Sam: concerned this can cause a heavy rerender loop34 this.set('delayedRerender', Em.run.later(this, this.rerender, rerenderDelay));35 },36 willDestroyElement() {37 if( this.delayedRerender ) {38 Em.run.cancel(this.get('delayedRerender'));39 }40 }...

Full Screen

Full Screen

useHasNotEqual.test.js

Source:useHasNotEqual.test.js Github

copy

Full Screen

1import { renderHook } from '@testing-library/​react-hooks'2import useHasNotEqual from '../​useHasNotEqual'3const _getHas = result => result.current;4const _rerender = (result, rerender, value, expectedResult ) => {5 rerender({ value })6 expect(_getHas(result)).toBe(expectedResult)7};8describe('useHasNotEqual', ()=>{9 test('should return false for initial render and for same value for next rerender', ()=>{10 const is = true11 , {12 result,13 rerender14 } = renderHook(({value}) => useHasNotEqual(value), {15 initialProps: { value: is }16 });17 expect(_getHas(result)).toBe(false)18 const _testRerender = _rerender.bind(null, result, rerender)19 /​/​ for bool20 _testRerender(is, false)21 _testRerender(false, true)22 _testRerender(!is, false)23 _testRerender(is, true)24 _testRerender(is, false)25 _testRerender(is, false)26 /​/​ for object27 const obj = {};28 _testRerender(obj, true)29 _testRerender(obj, false)30 _testRerender({}, true)31 _testRerender({}, true)32 _testRerender(obj, true)33 _testRerender(obj, false)34 _testRerender(obj, false)35 })...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { reRender } from 'cavy';2import { reRender } from 'cavy';3import { reRender } from 'cavy';4import { reRender } from 'cavy';5import { reRender } from 'cavy';6import { reRender } from 'cavy';7import { reRender } from 'cavy';8import { reRender } from 'cavy';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { reRender } from 'cavy';2const App = () => {3 useEffect(() => {4 reRender();5 }, []);6 return <View /​>;7};8export default App;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { reRender } from 'cavy';2reRender();3import { reRender } from 'cavy';4reRender();5import { reRender } from 'cavy';6reRender();7import { reRender }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { reRender } from 'cavy';2import App from './​App';3reRender(App);4import { spec, describe, it, expect } from 'cavy';5const spec = spec('App');6describe('My first feature', function() {7 it('should have a welcome message', async function() {8 await expect(spec.getElement('welcomeMessage')).toExist();9 });10});11export default spec;12"scripts": {13}14"scripts": {15}16"scripts": {17}18"scripts": {19}20"scripts": {21}22"scripts": {23}24"scripts": {25}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const testScope = (testComponent) => {2 const test = testComponent.test;3 const it = testComponent.it;4 const describe = testComponent.describe;5 const expect = testComponent.expect;6 const before = testComponent.before;7 const beforeEach = testComponent.beforeEach;8 const after = testComponent.after;9 const afterEach = testComponent.afterEach;10 describe('Test', () => {11 it('should render correctly', async () => {12 await test('should render correctly', async () => {13 await expect(element(by.id('test'))).toBeVisible();14 });15 });16 });17};18export default testScope;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { reRender } from 'cavy';2reRender();3### `findComponent(componentType, [options])`4### `findComponentWithRef(componentType, ref, [options])`5### `findComponentWithTestId(testID, [options])`6### `findComponentWithLabel(label, [options])`

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run cavy automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful