Hi guys I'm trying to figure out how to use these icons by Erik Flower in my React app. I am using openweather api to get the data and I am trying use these icons.
I am trying to implement this code in axios request.
But for some reason its not working.
req.then(function(resp) {
var prefix = 'wi wi-';
var code = resp.weather[0].id;
var icon = weatherIcons[code].icon;
// If we are not in the ranges mentioned above, add a day/night prefix.
if (!(code > 699 && code < 800) && !(code > 899 && code < 1000)) {
icon = 'day-' + icon;
}
// Finally tack on the prefix.
icon = prefix + icon;
});
can anyone help me out please?
Related
I'm wondering if the behavior I'm seeing is a bug and figured I'd ask here before submitting to github.
I need to be able to create, save, and edit saved email templates in the Quill editor. I also need to be able to use the output from Quill in an email, formatted how it was entered in the WYSIWYG editor, so I'm saving the HTML output with inline styles.
I have an issue with the indentation not rendering as it was entered when I load in a saved email template. I'm implementing the IndentAttributor like the following comment:
https://github.com/quilljs/quill/issues/1274#issuecomment-303619625
I dug into what Quill is doing and found in matchStyles() a tab character is getting inserted if textIndent is found.
Offending code in quill.js:
function matchStyles(node, delta) {
var formats = {};
var style = node.style || {};
if (style.fontStyle && computeStyle(node).fontStyle === 'italic') {
formats.italic = true;
}
if (style.fontWeight && (computeStyle(node).fontWeight.startsWith('bold') || parseInt(computeStyle(node).fontWeight) >= 700)) {
formats.bold = true;
}
if (Object.keys(formats).length > 0) {
delta = applyFormat(delta, formats);
}
if (parseFloat(style.textIndent || 0) > 0) {
// Could be 0.5in
delta = new _quillDelta2.default().insert('\t').concat(delta);
}
return delta;
}
I tested a change to the quill.js node_module to check for text-indent style. However, I'm not trying to hack the editor for a specific need and I'm not familiar enough with the editor to know whether or not this will have a negative impact on anything else.
function matchStyles(node, delta) {
console.log('in matchStyles()');
var formats = {};
var style = node.style || {};
if (style.fontStyle && computeStyle(node).fontStyle === 'italic') {
formats.italic = true;
}
if (style.fontWeight && (computeStyle(node).fontWeight.startsWith('bold') || parseInt(computeStyle(node).fontWeight) >= 700)) {
formats.bold = true;
}
if (Object.keys(formats).length > 0) {
delta = applyFormat(delta, formats);
}
if ((parseFloat(style.textIndent || 0) > 0) && !style.cssText.includes('text-indent')) { //fix to check for inline style
// Could be 0.5in
delta = new _quillDelta2.default().insert('\t').concat(delta); //problem here...
}
return delta;
}
Example project showing the issue:
https://stackblitz.com/edit/github-acpnmm
Highlight or inspect the initial text (coming from app.reducer.ts initial state) and you will see the tab character that was inserted.
Should Quill be recognizing the IndentAttributor and not insert the tab character?
I see you are using Quill in Angular project. I would suggest you to check this package: https://www.npmjs.com/package/ngx-quill. With this package you can choose the type of data (Text, HTML or Delta) that the Quill will process, and you can bind the Quill content to some variable. That way you can just store that value of that variable in the database. When you need to load the content again, fetch that value from the database, and again bind the Quill content to that value.
I am using pdf js express to draw highlight annotation in pdf. But when I couldn't delete the annotation from the pdf. I am using this code to create highlight:
const { Annotations, annotManager } = instance;
citations.forEach((citation) => {
if (citation.quads && isNumber(citation.page) && !isNaN(parseInt(citation.id))) {
const citationAuthor = citation.created_by && citation.created_by.user
? `${citation.created_by.user.first_name} ${citation.created_by.user.last_name}`.trim()
: author;
const highlight = new Annotations.TextHighlightAnnotation();
highlight.Author = citationAuthor;
highlight.Quads = citation.quads;
highlight.PageNumber = citation.page;
highlight.Id = citation.id.toString();
highlight.Locked = true;
highlight.Subject = 'Citation';
annotManager.addAnnotation(highlight, true);
annotManager.drawAnnotations(highlight.PageNumber);
}
});
I am not finding any way to delete highlight annotation which will basically remove the highlight from the pdf
You will have to get Annotations object first and then delete highlight annotation by using deleteAnnotation API . Try following :
highlight = annotManager.getAnnotationById( yourCitationId);
annotManager.deleteAnnotation(highlight)
Currently I am trying to fetch the github readme file and render it using ReactMarkdown. here is the screenshot of output/error.
there are some tag like
<p float="left"> <img src="https://github.com/username/project/blob/master/Screenshots/s1.png" width="300" hspace="40"/> </p>
So above tag does not render and gives CORB error.
My current code is
<ReactMarkdown
className="projectDetail__markdown"
escapeHtml={false}
transformImageUri={(uri) =>
uri.startsWith("https")
? uri
: `https://raw.githubusercontent.com/AlShevelev/WizardCamera/master/screenshots/5_2_small.webp`
}
source={markDown}
// astPlugins={[parseHtml]}
renderers={{ code: CodeBlock }}
</ReactMarkdown>
I have tried use plugin but no success.
Finally I founded the solution.
I saw CORB error in console I research about why this was happening and founded that in readme file url of images were not correct.
The readme url were https://github.com/username/project/blob/master/Screenshots/s1.png &&
required Url was: https://raw.githubusercontent.com/username/project/master/screenshots/s1.png
So the problem was that when we set the src for the image, we need to use a URL which points to an actual image and first url was not pointing to actual image.
this was the root cause and because of this images were not rendering.
So I write code to convert all the urls of img tags only of markdown response.
https://playcode.io/666242/ complete code.
// This function will find all the links in img tag.
function getImages(string) {
const imgRex = /<img.*?src="(.*?)"[^>]+>/g;
const images = [];
let img;
while ((img = imgRex.exec(string))) {
images.push(img[1]);
}
return images;
}
// This function convert the markdown text.
const convertImgInMarkdown = (markDown) => {
let mark = markDown;
let imageTags = getImages(mark);
let updatedImages = [];
imageTags.map((image) => {
let xx = image.split(".com");
let y = `https://raw.githubusercontent.com` + xx[1];
let z = y.replace("/blob", "");
updatedImages.push(z);
});
for (let i = 0; i < updatedImages.length; i++) {
mark = mark.replace(imageTags[i], updatedImages[i]);
}
return mark;
};
I have added a div and dropdwn, on each option I have uploaded geojson data using addDatatoMap in reactjs .
On each time I selected the option , this uploaded the respective layer ,
But I am not able to remove the previous layers,
So any code or example to reset / clear map layers
After so many research I found the solution , so posted it to save other's time
import KeplerGlSchema from 'kepler.gl/schemas';
import { visStateUpdaters } from 'kepler.gl/reducers';
// // Clear Uploaded Data
RemoveUploadedData() {
// // returns uploaded Data on map
const dataToSave =
KeplerGlSchema.getDatasetToSave(this.props.demo.keplerGl.map);
console.log('dataToSave', dataToSave);
// // returns uploaded layer config on map
const configToSave =
KeplerGlSchema.getConfigToSave(this.props.demo.keplerGl.map);
console.log('configToSave', configToSave);
var layerConfigs = configToSave.config.visState.layers;
// // Removed each uploaded layers
if (configToSave && layerConfigs.length > 0) {
for (var i = 0; i < layerConfigs.length; i++) {
this.props.demo.keplerGl.map.visState =
visStateUpdaters.removeDatasetUpdater(
this.props.demo.keplerGl.map.visState,
{ key: dataToSave[i].data.id }
)
}
}
}
I am looking at this file https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js, have read it several times. cant seem to find where are the following methods are being used:
immediatelyRefresh
_getReusableProps
_updateIndexProgress
updateProgress
updateProgress is the entry point for updateIndexProgress and getReusableProps, but i dont see anywhere in the file where its used.
These are all probably called from other components. For example, in Navigator.js (https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js):
_transitionBetween: function(fromIndex, toIndex, progress) {
this._transitionSceneStyle(fromIndex, toIndex, progress, fromIndex);
this._transitionSceneStyle(fromIndex, toIndex, progress, toIndex);
var navBar = this._navBar;
if (navBar && navBar.updateProgress && toIndex >= 0 && fromIndex >= 0) {
navBar.updateProgress(progress, fromIndex, toIndex);
}
},