I currently use (tried some others) for an project HTMLView (https://github.com/jsdf/react-native-htmlview) but its adds to much space between every element.
I just basicly need to render two types of tags P and H3 from a string. I also tried in my style to set margin and padding to 0 - but it hasnt any effect.
Any code suggestions? Or an easy function to run through the item.teaser and replace every P and H3 to a TEXT-Element with a specific class?
<HTMLView addLineBreaks={false} value={item.teaser} stylesheet={htmlStyles.teaser} />
You can try this:
value={"<div>"+item.teaser+"</div>"}
As seen here:
https://github.com/jsdf/react-native-htmlview/issues/202
Cheers :-)
This works const regex = /<br|\n|\r\s*\\?>/g; and then use replace data with regex
Example :
<HTMLView
value={symptom.text.trim().replace(regex, '')}
stylesheet={webViewStyle}
/>
Styles
const webViewStyle = StyleSheet.create({
font: {
color: '#7ab900',
},
});
I think the main issue will be the data which your passing to value param in HTMLView. There might be multiple tags in between and which are wrapped with parent tag. This library expects valid HTML, which means everything should be wrapped in a single top level tag. So wrap the value using main tag / parent tag.
Example: value={"<div>"+item+"</div>"}
This is the other method I found.
use variable which stores regex const regex = /<br|\n|\r\s*\\?>/g;
Then use this regex in replace function
<HTMLView
value={`<div>${symptom.text.trim().replace(regex, '')}</div>`}
stylesheet={webViewStyle}
/>
Related
I have a specific "doc" in the "docs" section, for which I need the max width to be bigger (because it contains 2 IFrames side by side).
I see that the guy specifying the max-width is: DocPageLayouMain:
But this component doesn't receive as param a specific page. It is the same for all pages. A child of it, DocItem knows the current page (which may communicate via metadata that it needs the bigger size.
However, it doesn't have the "power" to make the width bigger.
Any hints of how I could achieve this?
Thanks in advance :)
I achieved my goal w/ the following modifs. However, I don't like that I've swizzeled a component = DocItem/Layout marked as "unsafe".
import React from 'react';
import Layout from '#theme-original/DocItem/Layout';
import {useDoc} from '#docusaurus/theme-common/internal';
export default function LayoutWrapper(props) {
const doc = useDoc();
return (
<div class={doc.frontMatter.full_width ? "" : "container"}>
<Layout {...props} />
</div>
);
}
custom.css:
main > .container {
/*
We disable this on the "normal" container, i.e. DocPage/Layout/Main.
We want ONLY for this, hence we base our selector on the parent, which is a DOM element: <main>.
We want to reuse this class in DocItem/Layout.
*/
max-width: initial !important;
}
my-page-that-wants-full-width.mdx
---
description: Live demo
hide_table_of_contents: true
sidebar_position: 10
full_width: true
---
# Demo
...
Some of the react-dnd examples use a getHandlerId() method.
For example in the simple example of a sortable list, the Card.tsx function:
Collects a handlerId from the monitor object within the useDrop method
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
Returns that as an element of the "collected props"
const [{ handlerId }, drop] = useDrop<
Uses it to initialize an HTML attribute named data-handler-id
<div ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId}>
What is this Id and why is it used?
What uses the data-handler-id attribute?
I'd expect to see getHandlerId() described in the API documentation as a method of the DropTargetMonitor (but it isn't).
I didn't dive deep into it but for me this information was enough to continue using it:
If you remove this data-handler-id, everything continue working but with some issues (item sometimes flickers, it doesn't go to another place as smoothly as it does with data-handler-id)
Here is an open issue https://github.com/react-dnd/react-dnd/issues/2621 about low performance, and this comment suggests to use handler id: https://github.com/react-dnd/react-dnd/issues/2621#issuecomment-847316022
As you can see in code https://github.com/react-dnd/react-dnd/search?q=handlerId&type=code, handler id is using for proper definition of drop item so it seems better to use it even if you don't have a lot of elements.
I want to get the Attribute value and store in a variable how we can achieve this in cypress
In my case I want to get the complete class value and store it in variable.
This code just give me the attribute class value but how I can store the fetch value in variable
cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
I was trying to compare the style of one element with another to make sure they were equal. Here's the code that seems to work for me.
cy.get('.searchable-group-selector-card-image')
.eq(4)
.invoke('attr', 'style')
.then(($style1) => {
const style1 = $style1
})
A good way to solve this kind of scenario is to use the alias mechanism. One could leverage this functionality to enqueue multiple elements and then check all of them together by chaining the results. I've recently come to a case in an SPA where the assertion had to happen between elements that were spread across different angular routes (call them different pages).
In your use case, this would like:
cy.get('.searchable-group-selector-card-image')
.eq(4)
.invoke('attr', 'style')
.as('style_1')
cy.get('.another-element')
.invoke('attr', 'style')
.as('style_2')
// later on for example you could do
cy.get('#style_1').then(style_1 => {
cy.get('#style_2').then(style_2 => {
// Both values are available and any kind of assertion can be performed
expect(style_1).to.include(style_2)
});
});
This is described in Variables and Aliases section of the Cypress Documentation.
Here is how I got the value of for attribute in a label tag which had text "Eat" inside.
cy.contains('Eat').then(($label) => {
const id = $label.attr('for');
}
Most important thing is to get the selector right, so it exactly finds the value you are looking for. In this case you already found it. By using then() gives you the ability to store it in a variable.
cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
.then($growl-message => {
const message = $growl-message.text()
//do the checks with the variable message. For example:
cy.contains(message)
})
Note that the scope of the variable is within the curly brackets. Thus using the variable has to be within those curly brackets.
i'm using render with vue.js and iview, today when i use it, i find it doesn't work
{
title: 'title1',
key: 'order',
render:(h, params) => params.index + 1
}
then I try to use it in another way, it works.
{
title: 'title1',
key: 'order',
render:(h,params) => h('span', params.index + 1)
}
but the first way used to work days ago, i don't know why
how can i make the first way available?
The first parameter in the render function h which is nothing but a function usually called createElement which contains information describing to Vue what kind of node it should render on the page.
This createElement takes 3 arguments:
The HTML tag name. This is required.
An object contains the attributes you pass in normal template. This is optional.
Children nodes as an array or a simple text node as a string. This is optional.
You did not return the h function ,since the first argument is required and not provided in your first snippet of code, it did not work.
Reference - Render functions
To make your first snippet of code to work you to return the h function with the 1st argument any tag name like you are doing in the second snippet.
Just realized when I do the following code:
const styles = StyleSheet.create({style: someobj})
styles doesn't actually contain that obj, but an int id that I believe references to the stylesheet.
console.log(styles) // outputs {style: #}
Is there a way for me to dynamically retrieve the style obj after creating it?
You can use StyleSheet.flatten method.See StyleSheet doc
StyleSheet.flatten(styles.stylId)
buddy upstair is right, but not specific enough, I cant add a comment, so post an answer.
you should use flatten, like this:
var someobj = {backgroundColor: 'red', fontSize: 12};
const styletest = StyleSheet.flatten({style: someobj});
console.log(styletest);