I need to use a single v-template in my custom component like
<FlexboxLayout class="ticker-col" ref="tickercol">
<v-template name="charttemplate">
<Chart :chartData="chartData" />
</v-template>
</FlexboxLayout>
As mentioned on official docs (link), it says I have to use registerTemplate method. And I have to use a scopedSlot render function as 3rd parameter of this function. But I couldn't find out how to do this. My Chart component is still invisible.
mounted() {
const tickercol = this.$refs.tickercol;
tickercol.$templates.registerTemplate("charttemplate", null, 'what should be here?');
I'm not sure that I'm on the right way. Can anybody help?
Thanks in advance.
Related
So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.
I'm new to React hooks here, I've a sidebar I want to update the selecetedIndex to the index selected for that ListItem i.e., when I select an item I want to update selectedIdx to index to show it selected. I'm doing something wrong.
<ListItem button key={index}
selected={selectedIdx===index} // to show selected need to update
onclick={setSelectedIdx(index)}
>
<ListItemIcon>{v.icon}</ListItemIcon>
<ListItemText primary={v.text} />
</ListItem>
let [selectedIdx,setSelectedIdx]=React.useState(0);
This way second try I did but not results:
<ListItem button key={index}
selected={selectedIdx===index}
onclick={handleSelectedIdx(index)}
>
<ListItemIcon>{v.icon}</ListItemIcon>
<ListItemText primary={v.text} />
</ListItem>
function handleSelectedIdx(i){
setSelectedIdx(i)}
I'm new I don't know how do we do this.setState in hooks. Both the ways it failed can anyone please let me know were I'm going wrong. Any help appreciated.
Updates: here I don't use:
{()=>{handleDrawerToggle}}
Still the following works why is that so? Can you please let us know?
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
/>
function handleDrawerToggle() {
setMobileOpen(!mobileOpen); }
const [mobileOpen, setMobileOpen] = React.useState(false);
The problem in you code is that you are not passing a function to onClick, rather a value returned by handleSelectedIdx/setSelectedIdx and since you set a state a re-render is triggered causing the function to execute again on the next render. React internally prevents this loop and warns you.
The solution is to write your onclick like
onClick={() => handleSelectedIdx(index)}
or even
onClick={() => setSelectedIdx(index)}
I'm trying to display image taken from camera plus plugin right below the screen.
For that I'm trying the event named 'photo Captured Event' and realized that the event itself was not triggered. I just put an alert message inside it and confirmed that it is not working. Sample snippet is below, for full workaround, go to this link
https://play.nativescript.org/?template=play-js&id=nvIlTl&v=3
CameraPlus.on(nativescript_camera_plus.CameraPlus.photoCapturedEvent, args => {
fromAsset(args.data).then(result => {
pic.src = result;
alert(result);
});
});
<GridLayout rows="*,auto" class="home-panel">
<Cam:CameraPlus row="0" id="camPlus" saveToGallery="true"
showCaptureIcon="true" showGalleryIcon="true" showToggleIcon="true"
showFlashIcon="true" debug="true">
</Cam:CameraPlus>
<Image row="1" height="150" id="img_taken_id" src="{{ img_taken }}" />
</GridLayout>
First, I need to know why the alert message was not coming?
Secondly, I need to display image taken without storing in local?
Important note: I'm trying this for 'android' not IOS
It's because you are not pointing to the right method. It should be,
let ImageSourceModule = require('tns-core-modules/image-source');
.....
.....
ImageSourceModule.fromAsset(args.data).then(result => {
pic.src = result;
alert(result);
});
In my React Native project using NativeBase I'd like to generate a series of Buttons or TouchableOpacities.
That means I don't want each to have a separate onPress handler but one shared one.
But when I look at what is passed to the onPress callback there doesn't seem to be any kind of ID or reference to the component that caused the press, nor can I find such a thing documented.
Am I missing something obvious? Is there another method everybody uses to achieve the same goal? Or is this actually missing functionality?
You can use your function as below:
_onPressButton = (id) = () => {
// do something with id
}
_keyExtractor = (item, index) => index;
_renderItem = ({item}) => (
<Button onPress={this._onPressButton(item.d)}>
...
</Button>
);
return (
<FlatList
data={data_array}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
You can try to use ref to identify a component
<Button ref={'loginButton'} onPress={this.onButtonPress()}>
Then you access it using this.refs['loginButton']
Hope it helps.
I am trying to convert my java-app for Android to a Flex/Air app with Flashbuilder.
I am nearly there (thanks to sample code on Adobe) but have problems with passing data between views.
I have 3 views. The first have a list of items and an event handler that choose one of this list items and pass this to the next view:
<s:List id="list" left="0" top="0" bottom="0" width="768"
change="navigator.pushView(Intro, list.selectedItem)" dataProvide "{data}">
This works fine and I can use the values stored in {data}.
e.g.
<s:Label text="{data.title}"/>
Now I want to pass the same data on a button click to the next view, spelaView.
Something like this:
<s:Button id="backBtn" label="Spela"
click="navigator.pushView(SpelaSaga, dataObj)" />
Sorry to say, I do not know how I transform the data-object {data} (with three items: data.title, data.description, data.audio) to dataObj in a form that the next view are abel to use.
Hope someone is kind enough to give me some help on this.
I just solved it.
Defined this function and could then get the data in the next view
protected function spelaSaga():void{
var dataObj:Object=
{
titel:data.title bild:data.description, audio:data.audio
};
navigator.pushView(views.SpelaSaga, dataObj);
}