I have an app which pretty much looks like this:
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
tags: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Pears" }
],
suggestions: [
{ id: 3, name: "Bananas" },
{ id: 4, name: "Mangos" },
{ id: 5, name: "Lemons" },
{ id: 6, name: "Apricots" }
]
}
}
handleDelete (i) {
const tags = this.state.tags.slice(0)
tags.splice(i, 1)
this.setState({ tags })
}
handleAddition (tag) {
const tags = [].concat(this.state.tags, tag)
this.setState({ tags })
}
render () {
return (
<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleDelete={this.handleDelete.bind(this)}
handleAddition={this.handleAddition.bind(this)} />
)
}
}
It's based on this npm module.
I am not sure if I am missing something, but when I type in a tag, whilst I do see the suggestions pop up, I would also like to be able to press the TAB key and autocomplete the rest of the tag, whenever there is only one option left. Similar to the stackoverflow tag functionality.
My main question is this: How could I use a package like this, installed via npm, and extend its functionality? What would I do to make this my own, change things around etc.? I do not want to fiddle around in my npm modules folder!
You can fork the plugin and install it in your project as below
npm i {github_project_link}
If you want to contribute to the community. You can raise PR to the origin repo.
Related
While automating a website, I have a requirement to run a test case(it block) multiple times with different set of testdata in cypress.
Please consider the below example :
it('example test', () => {
//first run
getOnDefaultForm.typeUserName('Name1');
getOnDefaultForm.typePassword('Pass1');
getOnDefaultForm.clickSubmit();
//second run
getOnDefaultForm.typeUserName('Name2');
getOnDefaultForm.typePassword('Pass2');
getOnDefaultForm.clickSubmit();
//third run
getOnDefaultForm.typeUserName('Name3');
getOnDefaultForm.typePassword('Pass3');
getOnDefaultForm.clickSubmit();
});
How can I achieve this in Cypress?
I think you need to have a look as this repo: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__dynamic-tests Or just search this site, this is not the first time someone has asked this very question.
In general, you can wrap your it in a loop. In practice, it'd look e.g. like this:
const testData = [
{
name: 'Name1',
password: 'Pass1'
},
{
name: 'Name2',
password: 'Pass2'
},
{
name: 'Name3',
password: 'Pass3'
}
]
testData.forEach((credentials) => {
it('example test', () => {
getOnDefaultForm.typeUserName(credentials.name);
getOnDefaultForm.typePassword(credentials.password);
getOnDefaultForm.clickSubmit();
})
});
It is also possible to put the data in a json file in the fixtures folder, and import it at the top of the spec file.
This methodology is still working in Cypress version 12.5.0.
fixture
[
{ "name": 'Name1', "password": 'Pass1' },
{ "name": 'Name2', "password": 'Pass2' },
{ "name": 'Name3', "password": 'Pass3' }
]
test
const testData = require('../fixtures/test-data.json')
testData.forEach((credentials) => {
it('example test for ' + credentials.name, () => {
getOnDefaultForm.typeUserName(credentials.name);
getOnDefaultForm.typePassword(credentials.password);
getOnDefaultForm.clickSubmit();
})
})
I am developing a CLI using Enquirer. I want user of the CLI to write javascript on a json.
So, i want something like this :
Create a Rule on the the data
const model = {
reviews: {
'5': [
{
customerId: 'A2OKPZ5S9F78PD',
rating: '5',
asin: 'asin2',
reviewStatus: 'APPROVED',
reviewId: 'R379DKACZQRXME',
},
],
'4': [
{
customerId: 'A2OKPZ5S9F78PD',
rating: '4',
asin: 'asin2',
reviewStatus: 'APPROVED',
reviewId: 'R379DKACZQRXME',
},
],
},
entityType: 'LIVE_EVENT',
entityId: 'event2',
};
Then user writes the rule.
Object.values(model.reviews).forEach(reviews =>
(reviews as any).forEach(review => {
if (parseInt(review.rating) < 3 && attributes.reviewId.Value.includes(review.reviewId)) {
output.push({
exceptionName: `Customer ${review.customerId} left a review ${review.reviewId} with rating ${review.rating}`,
});
}
})
);
While writing this rule, Since it is on the above json model, I want to provide autocomplete options on javascript and validate if it is correct javascript.
Is there a way to do this ?
If I'm understanding your question correctly, it sounds like you want to take the model object and write it to a JSON file.
If this is your goal, simply do the following:
import { writeFileSync } from "fs";
// Define the model
const model: any = { foo: bar };
// Transform the model object to JSON
const modelJSON: string = JSON.stringify(model, null, 4); // Indents the JSON 4-spaces
// Write the modelJSON to `model.json`
writeFileSync("./model.json", modelJSON);
The above is TypeScript, but the standard JavaScript version is basically the same. Make sure you add #types/node to your package.json file if you're using TypeScript - hope this helps!
I am trying to create a dendrogram using a D3 JavaScript component I found on Github. Here's the link: https://www.npmjs.com/package/react-d3-tree
I am fairly new to this whole thing, so I am having difficulty figuring out how to use this to create a web application that I can actually run, like what's shown in the demo (https://bkrem.github.io/react-d3-tree-demo/)
Ideally I would like to import my own .json data, but once I have it running I'm sure I can figure that out fairly easily.
Any advice would be greatly appreciated, thank you.
Attempted running the application by finding the directory in Windows command prompt and using the command npm start.
I think that I don't have the proper scripts for executing a program that will display on my localhost server.
I tried running the code from the Example given on www.npmjs.com/package/react-d3-tree on Codesandbox.io. It worked Perfectly as expected. I am sure it will work on localhost as well.
Here is the Code
import React from 'react';
import Tree from 'react-d3-tree';
//Static JSON you can always use json from a different file
const myTreeData = [
{
name: 'Top Level',
attributes: {
keyA: 'val A',
keyB: 'val B',
keyC: 'val C',
},
children: [
{
name: 'Level 2: A',
attributes: {
keyA: 'val A',
keyB: 'val B',
keyC: 'val C',
},
},
{
name: 'Level 2: B',
},
],
},
];
export default class MyTree extends React.Component {
render() {
return (
//Wrapper
<div id="treeWrapper" style={{width: '50em', height: '20em'}}>
//Calling the actual library with json as a prop
<Tree data={myTreeData} />
</div>
);
}
}
I am currently developing a website with Nuxt. A certain javascript file should be editable after building to change the content of a table. Does anyone have an idea how I can do this?
Up to now I tried to include the javascript file as plugin without success. Furthermore, I also failed the attempt to swap the script as follows:
<!-- my-component.vue -->
<template>
<div>This is a Text!</div>
</template>
<script src="./my-outsourced-script.js"></script>
Currently my Code looks like this:
Bootstrap-Vue table:
<b-table
borderless
striped
hover
responsive
:sticky-header="stickyHeader"
:items="folderPermissions"
:fields="folderGroups"
>
</b-table>
Content to be swapped out:
export default {
data() {
return {
stickyHeader: true,
keyword: '',
sortBy: 'xxx',
sortDesc: false,
folderGroups: [
{
key: 'drive',
stickyColumn: true,
label: ' ',
isRowHeader: true
},
...
],
folderPermissions: [
{
drive: 'Some Text',
id: 0,
a: 1
},
...
]
}
}
}
My wish would be to have folderGroups and folderPermissions in the code shown above in an outsourced javascript file to easily modify them and see the changes on the website.
Like you do, or if you try to import your js file with your data like import { folderGroups, folderPermissions} from './my-outsourced-script.js, you cannot change the file without rebuild your nuxt app.
Try to build with your file as below:
{
"folderGroups": [
your datas
],
"folderPermissions": [
your datas
]
}
And dynamic import in your component:
data() {
folderGroups: [],
folderPermissions: []
},
mounted() {
this.$http.get('/js/my-outsourced-script.json').then((response) => { // no need `assets`
console.log(response.body)
this.folderGroups = response.body.folderGroups
this.folderPermissions = response.body.folderPermissions
}, function (error) {
console.log(error.statusText)
})
}
I'm having a strange issue that I can't pin down with React (I'm using CoffeeScript as well, but I highly doubt this is a factor). Basically, I'm following along with a tutorial in which a message feed is built using a Feed component (the parent), FeedList component (child), and a FeedItem (grandchild)...sorry if my terminology is incorrect. The relevant code is:
Feed.cjsx
getInitialState: ->
FEED_ITEMS = [
{ key: 1, title: 'Realtime data!', description: 'Firebase is cool', voteCount: 49 }
{ key: 2, title: 'JavaScript is fun', description: 'Lexical scoping FTW', voteCount: 34 }
{ key: 3, title: 'Coffee makes you awake', description: 'Drink responsibly', voteCount: 15 }
]
{
items: FEED_ITEMS
formDisplayed: false
}
...
render: ->
...
<FeedList items={#state.items} onVote={#onVote} />
FeedList.cjsx
render: ->
feedItems = #props.items.map ((item) ->
<FeedItem key={item.key} ... />
).bind(#)
<ul className='list-group container'>
{feedItems}
</ul>
FeedItem.cjsx
render: ->
<li key={#props.key} className='list-group-item'>
...
</li>
If I console.log "#props.key" in the render method for FeedItem, I get undefined. But if I log "item.key" from inside the map function of FeedList's render method, I get 1, 2, 3, as I should. So it seems to me that, for whatever reason, React doesn't want to pass the "key" prop to the FeedItem. Any thoughts?
For anyone else stumbling across this, react only has a few reserved props but they are worth noting. key, ref, __self and __source.
var RESERVED_PROPS = {
key: true,
ref: true,
__self: true,
__source: true
};
^^ Taken from the react source.
Also worth noting __self={this} is really useful if you're receiving invariant violation errors and would like to be able to debug them down to a component level.
Since react treats key as a special attribute (http://facebook.github.io/react/docs/special-non-dom-attributes.html), it cannot be accessed via the props. The react documentation also warns against setting keys within plain html tags (http://facebook.github.io/react/docs/multiple-components.html#dynamic-children), and suggests wrapping multiple components in a react component.
If you rename key to something non-reserved, it should work:
Feed.cjsx:
FEED_ITEMS = [
{ itemId: 1, title: 'Realtime data!', description: 'Firebase is cool', voteCount: 49 }
{ itemId: 2, title: 'JavaScript is fun', description: 'Lexical scoping FTW', voteCount: 34 }
{ itemId: 3, title: 'Coffee makes you awake', description: 'Drink responsibly', voteCount: 15 }
]
then you can access the itemId via #props.itemId in the child component (FeedList).
FeedList:
feedItems = #props.items.map ((item) ->
<FeedItem key={item.itemId} ... />
).bind(#)
Note that the keys for each component need to be unique for each component, or node in the DOM, which is why it makes sense that keys cannot be inherited, as setting both parent and child to the same key would not allow react to identify them as separate entities when rendering the DOM.