I have some figma designs which I have converted to react code with the help of aws-amplify. Now, the problem is, they are predifined components built with #aws-amplify/ui-react.
For Example:
/***************************************************************************
* The contents of this file were generated with Amplify Studio. *
* Please refrain from making any modifications to this file. *
* Any changes to this file will be overwritten when running amplify pull. *
**************************************************************************/
/* eslint-disable */
import React from "react";
import { getOverrideProps } from "#aws-amplify/ui-react/internal";
import { Button, Text, View } from "#aws-amplify/ui-react";
export default function DataAbc(props) {
const { overrides, ...rest } = props;
return (
<View
width="868px"
height="220px"
display="block"
gap="unset"
alignItems="unset"
justifyContent="unset"
{...rest}
{...getOverrideProps(overrides, "DataAbc")}
>
<Text
direction="column"
justifyContent="unset"
width="unset"
height="unset"
gap="unset"
alignItems="unset"
position="absolute"
top="72px"
left="34px"
children="Upload files"
{...getOverrideProps(overrides, "Upload files")}
></Text>
<Text
width="unset"
height="unset"
gap="unset"
alignItems="unset"
position="absolute"
top="98px"
left="34px"
padding="0px 0px 0px 0px"
whiteSpace="pre-wrap"
children="pqr"
{...getOverrideProps(
overrides,
"pqr"
)}
></Text>
<Button
display="flex"
gap="0"
direction="row"
width="180px"
height="unset"
justifyContent="center"
variation="primary"
children="Choose files"
{...getOverrideProps(overrides, "Button")}
></Button>
</View>
);
}
Inside the "DataAbc" component after the "Button", I want to populate some components like <p>,<h1>,etc dynamically from data fetched from the server.
Is there any way of doing it ?
I tried doing this:
<DataAbc>`<p>Hello</p>`<DataAbc/>
and I have also tried something like this:
<DataAbc>`{React.createElement('p',{},'Hello'}`</DataAbc>
I also tried to change DataAbc with overrides property.
But nothing seems to work.
Related
I want to use http://tabulator.info/ with ember. I don't understand the documentation nor can I find any guides on configuration for ember. How can I start by creating a simple table?
Looking at the examples on the site, http://tabulator.info/, it seems that tabulator only needs an element to work (and some config).
So, our end goal is going to be to use a modifier with the ability to pass the tabulator config to it.
So, this is what we'll end up with:
<div {{tabulator someConfig}}></div>
Now, unfortunately, it looks like tabulator only accepts an id in its constructor. so we'll need to dynamically add that in to appears tabulator.
First thing you'll want to do is install https://github.com/ember-modifier/ember-modifier (be sure to read the docs as this is fun stuff)
Then, create a file in your app, app/modifiers/tabulator.js
and use these contents:
import Modifier from 'ember-modifier';
import Tabulator from 'tabulator';
import { guidFor } from '#ember/object/internals';
export default class TabulatorModifier extends Modifier {
id = guidFor(this);
get config() {
return this.args.positional[0];
}
didInstall() {
this.element.id = this.id;
let config = th
this.tabulator = new Tabulator(`#${this.id}`, this.config);
}
}
And then maybe in a component or controller or something, you'd have something like:
export default class MyComponent extends Component {
get myConfig() {
return { ... };
}
}
<div {{tabulator this.myConfig}}></div>
and that should be it.
You'll want to import the CSS in your app.css
I would like to assign a template on my PageLayoutView preview in order to avoid writing HTML on my PHP files and better maintain it. How can i achieve that using TYPO3 10?
I would like to use it for example on the textmedia content element and add the subheader in.
In order to achieve that, you will have to use the Standalone view. I would write a function which i can call it whenever i want to use it. Normally i would include the function on a Helper Class but for the sake of this answer i will put it on the same class. So lets say we have the textmedia content element and we want to add fields on the backend Preview.
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Fluid\View\StandaloneView;
/**
* Contains a preview rendering for the page module of CType="textmedia"
*/
class TextMediaPreviewRenderer implements PageLayoutViewDrawItemHookInterface
{
/**
* Preprocesses the preview rendering of a content element of type "textmedia"
*
* #param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object
* #param bool $drawItem Whether to draw the item using the default functionality
* #param string $headerContent Header content
* #param string $subheaderContent Subheader content
* #param string $itemContent Item content
* #param array $row Record row of tt_content
*/
public function preProcess(
PageLayoutView &$parentObject,
&$drawItem,
&$headerContent,
&$subheaderContent,
&$itemContent,
array &$row
) {
if ($row['CType'] === 'textmedia') {
$standaloneView = $this->getStandAloneConfig();
/*Disable TYPO3's default backend view configuration */
$drawItem = false;
/*Assign all the results to the backend */
$standaloneView->assignMultiple([
'title' => $parentObject->CType_labels[$row['CType']],
'type' => $row['CType'],
'content' => $row,
]);
$itemContent .= $standaloneView->render();
}
}
public function getStandAloneConfig()
{
$standaloneView = GeneralUtility::makeInstance(StandaloneView::class);
$standaloneView->setLayoutRootPaths([10,'EXT:your_extension/Resources/Private/Backend/Layouts/']);
$standaloneView->setTemplateRootPaths([10,'EXT:your_extension/Resources/Private/Backend/Templates/']);
$standaloneView->setPartialRootPaths([10,'EXT:your_extension/Resources/Private/Backend/Partials/']);
$standaloneView->setFormat('html');
$standaloneView->setTemplate('PageLayoutView.html');
return $standaloneView;
}
What is happening is the following
First, we get the StandAlone configuration. In this configuration (getStandAloneConfig()) we set the path to where our templates, partials and layouts are. Then we assign the type (html) and then the name of the template where our preview is going to be built on (PageLayoutView.html).
After that we reset everything that TYPO3 writes on the Preview ($drawItem = false;) so we can write our own.
Last and not least we assign the variables which we are going to use on the HTML file.
Under your_extension/Resources/Private/Backend/Templates/PageLayoutView.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:switch expression="{type}">
<f:case value="textmedia">
<f:render partial="Textmedia" arguments="{_all}"/>
</f:case>
<f:case value="text">
<f:render partial="Text" arguments="{_all}"/>
</f:case>
<f:defaultCase>
<f:render partial="Header" arguments="{_all}"/>
</f:defaultCase>
</f:switch>
</html>
I personally use the PageLayoutView.html as a controller which decides, which partial should be rendered. So i assign the variable {type} and i render the partial based on its value.
Under your_extension/Resources/Private/Backend/Partials/Textmedia.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<p><strong class="element_title">{title}</strong></p>
<table class="element_table">
<tbody>
<tr>
<th>Subheader</th>
<td>{content.subheader}</td>
</tr>
</tbody>
</table>
</html>
Now you can look what is inside the {content} variable and render it on your HTML.
If you want to style your Preview you can do the following: Under your ext_tables.php add the following line:
$GLOBALS['TBE_STYLES']['stylesheet'] = 'EXT:your_extension/Resources/Public/Css/Backend/page-layout-view.css';
There's a pretty easy way. Just set an alternative path for the preview templates.
\TYPO3\CMS\Backend\View\PageLayoutView::tt_content_drawItem():
// If the previous hook did not render something,
// then check if a Fluid-based preview template was defined for this CType
// and render it via Fluid. Possible option:
// mod.web_layout.tt_content.preview.media = EXT:site_mysite/Resources/Private/Templates/Preview/Media.html
if ($drawItem) {
$fluidPreview = $this->renderContentElementPreviewFromFluidTemplate($row);
if ($fluidPreview !== null) {
$out .= $fluidPreview;
$drawItem = false;
}
}
Help me please...
I have a React Native custom Button component that receives an onPress prop and passes that onPress to a TouchableNativeFeedback. I make a unit testing with #testing-library/react-native. I try to spy on onPress, to check if it is triggered when the TouchableNativeFeedback is touched. Somehow the spy function is not called when I simulate press event on the Button. Is there any mistake in my implementation?
FI: This behavior only occurs in TouchableNativeFeedback, but working perfectly with Button
Here is my implementation:
Button.js
const Button = ({onPress, label}) => (
<TouchableNativeFeedback onPress={onPress} testID="button">
<View style={someStyling}>
<Text>{label}</Text>
</View>
</TouchableNativeFeedback>
)
export default Button
Button.test.js
it("Fire onPress props when button pressed", () => {
const mockFn = jest.fn();
const { getByTestId } = render(<Button onPress={mockFn} />);
const button = getByTestId("button");
fireEvent.press(button);
expect(mockFn).toHaveBeenCalled();
});
I had the same issue in a component using <TouchableNativeFeedback/>. My test case failed with a message saying No instances found on the getByText call.
After few attempts, I used following snippet for debugging:
const { debug } = render(<Tag onPress={handler}>Press me</Tag>);
debug();
Along with some other details, following message popped up in console:
TouchableNativeFeedback is not supported on this platform!
At this moment, there is a related thread regarding Touchable* components on react-native-testing-library GH issues where they explain details and provide some workarounds.
I ended up using platform detection in my component, as that's what I wanted to do anyway:
const TouchComponent =
Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
return (
<TouchComponent onPress={onPress}>
...
</TouchComponent>
);
I had the same issue.
What solved it for me was that fact that my TouchableXXX component was imported fromreact-native-gesture-handler. This library probably was imported as dependency by one of my dependecies. I guess when I wrote TouchableXXX it was imported automatically from there by my IDE.
After changing the import statement to import from react-native - everything worked for me in tests.
So eventually my change was from this:
import { TouchableHighlight } from 'react-native-gesture-handler'
to this
import { TouchableOpacity } from 'react-native'
I am using this tutorial to install React for the front with an API built in Django.
https://sweetcode.io/how-use-djang-react-ap/
My repository for this projects so far is here:
https://github.com/AlexMercedCoder/DjangoReactCRM
When I npm run dev I get a syntax error in App.js, I've played with it and can't seem to figure it out. The error I get is.
ERROR in ./frontend/src/components/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError:
C:\Users\alexm\projects\DjangoReactCRM\drcrm\frontend\src
\components\App.js: Unexpected token, expected "," (29:6)
27 |
28 | wrapper ? ReactDOM.render(<app>, wrapper) : null;
> 29 | </app>
App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
state = {
data: ''
};
componentDidMount() {
fetch("/api")
.then(response => {
return response.json();
})
.then(data => this.setState({ data: JSON.stringify(data)}));
}
render(){
return (
<p>Jason data = {this.state.data}</p>
)
}
}
wrapper ? ReactDOM.render(<app>, wrapper) : null;
</app>
First, the <app> component is closed outside the ternary operator, so you'd have to use <app></ app> or even simpler <app />.
wrapper ? ReactDOM.render(<app></app>, wrapper) : null;
or
wrapper ? ReactDOM.render(<app/>, wrapper) : null;
Then, all React components must start with a capital letter
to differentiate default DOM component from those created with React, so you have to use this notation.
wrapper ? ReactDOM.render(<App />, wrapper) : null;
Finally, I do not see the utility of the ternary operator at the end of your code. Normally, the second argument when we call reactDOM.render(X, Y) must represent the DOM element in which we will render our main React component (in this case, <App />).
By default, when we create a React project with create-react-app, we don't have to deal with these settings and the DOM element is automatically defined as <div id='root'></div> (check inside the <body> in public/index.html inside your project root).
So call document.getElementById('root') to get the DOM element and simply put the result as second argument.
ReactDOM.render(<App />, document.getElementById('root'));
If it persist, I suggest you to simply create another React project with create-react-app and copy/paste only the code you need.
To get more informations: Click here
I hope it can help you.
** I apologize if my explanations are not clear or if I made some mistakes.
There are three problems in your component.
I'm guessing wrapper was supposed to be document.getElementById("root") ? Even then the ternary condition doesn't make sense. It should be something like:
ReactDOM.render(
<App />,
document.getElementById("root")
)
You defined the component as App, yet in ReactDOM.render you are using app
You have </app> at the end of the file. It doesn't do anything in this case.
Is there a global loading flag available anywhere for react-apollo client? I have a “page wrapper” component that i’d like to apply ui effects to after all the child components have received their data.
I have set up apollo with redux so have ready access to the store (http://dev.apollodata.com/react/redux.html)
I could quite easily dispatch state changes from each component that receives data from apollo but I'd like this page wrapper component to not have any knowledge of its children nor their queries.
I have investigated using withApollo - http://dev.apollodata.com/react/higher-order-components.html#withApollo -
but don't see an api for a global is loading.
I've just released a library that solves this for Apollo 2: react-apollo-network-status.
The gist is:
import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';
import {ApolloClient} from 'apollo-client';
import {createNetworkStatusNotifier} from 'react-apollo-network-status';
import {createHttpLink} from 'apollo-link-http';
const {
NetworkStatusNotifier,
link: networkStatusNotifierLink
} = createNetworkStatusNotifier();
const client = new ApolloClient({
link: networkStatusNotifierLink.concat(createHttpLink())
});
// Render the notifier along with the app. The
// `NetworkStatusNotifier` can be placed anywhere.
const element = (
<Fragment>
<NetworkStatusNotifier render={({loading, error}) => (
<div>
{loading && <p>Loading …</p>}
{error && <p>Error: {JSON.stringify(error)}</p>}
</div>
)} />
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</Fragment>
);
const node = document.getElementById('root');
ReactDOM.render(element, node);
You can achieve this in two ways:
One way is to use the middleware/afterware of Apollo's network interface.
The other way is to wrap Apollo's network interface to include your custom logic. Specifically you would wrap the query method.