Keep getting
show.self-a51f3f9200fc591428c13c03c87192475aa12504d581675df08c22f4a3799533.js?body=1:97366 Uncaught TypeError: custom is not a function
this.getStyles = function (key, props) {
var base = _styles.defaultStyles[key](props);
base.boxSizing = 'border-box';
var custom = _this7.props.styles[key];
return custom ? **custom(base, props)** : base;
};
when trying to use react-select 2.1.2 with React 15.5.4, React-dom 15.5.4
(react-scripts not used)
Is it supposed to work?
Related
I am currently working on a Vuejs3 application with the fabricjs library added.
Now I am trying to add an external library called fabricPublisherTools in the application. But the method/function "_registerSnaps" that is being called is somehow "undefined".
The external library gives me the following working example.
<script type="module">
import {fabricAddSnapper,fabricAddSmartGuides} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
fabricAddSnapper();
fabricAddSmartGuides();
var canvas = new fabric.Canvas('c4');
var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
rect.doesSnap();
rect2.doesSnap();
rect3.doesSnap();
canvas.add(rect,rect2,rect3);
</script>
The way I implemented in Vuejs3 is as follows:
<script setup>
import { onMounted } from "vue"
import { fabric } from 'fabric';
import {fabricAddSmartGuides,fabricAddSnapper,fabricAddUndoRedo} from 'https://cdn.jsdelivr.net/gh/mtrudw/fabricPublisherTools/dist/fabricPublisherTools.min.js';
let canvas;
const setupEditor = () => {
fabricAddSnapper();
fabricAddSmartGuides();
canvas = new fabric.Canvas('canvas');
canvas.setHeight(500);
canvas.setWidth(500);
canvas.backgroundColor = "#f00";
canvas.setDimensions({width: 500, height: 500});
var rect = new fabric.Rect({left: 100,top:100,width:150,height:100,fill:'blue'});
var rect2 = new fabric.Rect({left: 500,top:500,width:150,height:100,fill:'green'});
var rect3 = new fabric.Rect({left: 400,top:200,width:150,height:100,fill:'yellow'});
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
rect.doesSnap();
rect2.doesSnap();
rect3.doesSnap();
canvas.add(rect,rect2,rect3);
canvas.renderAll();
}
onMounted(() => {
setupEditor()
})
</script>
It gives me the following error when I try to run it:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'bind')
And its about this line:
canvas._registerSnaps(canvas._getSmartGuides.bind(canvas));
When I console log "_registerSnaps" I see it's undefined which means something has not been appended/added by the library.
I just don't know if I did something wrong when I imported the library that caused the problem.
What exactly am I doing wrong?
Thank you in advance.
If bind is what's undefined, have you checked if your problem is with _getSmartGuides since that is what calls the bind() function?
You'll need to call fabricAddSmartGuides();
purely from reading the (fabricPublisherTools) source: _getSmartGuides is created in fabricAddSmartGuides(). Do you / where do you call fabricAddSmartGuides ?
I've been porting a react-admin 3.19 project for a while now, and the only behavior left to implement on 4.x is to focus the first field that fails validation, in react-admin 3.19 that was achieved with something like:
import createDecorator from 'final-form-focus';
const focusOnErrors = createDecorator();
...
<Edit>
<SimpleForm
decorators={[focusOnErrors]}>
But on 4.x final-form-focus was replaced with react-hook-form, which I found how to focus on the first field with errors, but I'm not sure how to implement that on react-admin or if it will work with react-admin, the code should be something like:
const {
setFocus,
formState: { errors },
} = useForm();
useEffect(() => {
const firstError = Object.keys(errors).reduce(
(field, a) => (errors[field] ? field : a),
null,
);
if (firstError) {
setFocus(firstError);
}
}, [errors, setFocus]);
How can I make react-admin focus on the first field that fails validation?
I am attempting to set imageContent into an <Image source={imageContent}/> by getting content using require(props.imageUrl). Strangely (to me at least), the code works if I set image explicitly but fails on using props.imageUrl when equating them returns true.
export const SomeComponent: React.FC<Props> = (props: Props) => {
if (props.imageUrl != null) {
const imageUrl = '../../assets/images/profile_avatar.png'; //hardcode
const imageUrlFromProps = props.imageUrl; //from Props
console.log(imageUrl === imageUrlFromProps); //true
//SectionImage = require(imageUrl); //Works
//SectionImage = require(imageUrlFromProps); //Err: Invalid Call
}
...
<Image source={SectionImage}/>
Ciao, for what I know, require doesn't work with dynamic value. According to this discussion, the reason of this problem is how require is loaded. Seems that require is loaded before runtime and if it doesn't find a resource at this time, it doesn't work .
If you really need to assign dynamic resource to require, what I always do is create an array of require like:
var resources = {
res1: require("res1.png"),
res2: require("res2.png"),
...
}
and then when I need to load one of these at runtime:
if (condition) {
SectionImage = resources.res1;
}
else SectionImage = resources.res2;
As Giovanni has suggested, require can't be dynamic. It expects static strings only (Imagine how would all static bundling would have worked if they were dynamic). The only reason I didn't vote that as the answer is because I wanted to make the component more generic. So instead of applying condition in component, I imported image from the parent component and passed into this component (which I directly set to Source).
From Parent:
import Avatar from '../../assets/images/profile_avatar.png'
...
<SomeComponent image={Avatar}/>
and in Somecomponent:
let sectionImage = props.image || null;
...
<Image source={sectionImage}/>
i had upgraded RN to 0.59.1 and updated native base to 2.13.5.
getting error
"undefined frames.endCoordinates.height"
when i try for textinput.
Native-Base Content is internally using
react-native-keyboard-aware-scroll-view
this is function from KeyboardAwareHOC of react-native-keyboard-aware-scroll-view
_updateKeyboardSpace = (frames: Object) => {
if (this.props.enableAutomaticScroll) {
let keyboardSpace: number =
frames.endCoordinates.height + this.props.extraScrollHeight
if (this.props.viewIsInsideTabBar) {
keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT
}
I can't grasp your intentions with your question. But what you want to do seems like this.
<KeyboardAwareScrollView
onKeyboardWillShow={(frames: Object) => {
console.log('Keyboard event', frames)
}}>
Is this right? You just saw the code in which the 'react-native-keyboard-aware-scroll-view' module was made.
I am trying to create a 3D model in React-Native using Three.js, for that I have to use an image for texture but TextureLoader() function using 'document' and 'canvas' object creation logic, which can't be used in react-native.
so, how can I use an image as texture in react-native using three.js ?
Short summary: the Textureloader didnt work because it required an imageloader which required the inaccesible DOM.
Apparantly there's a THREE.Texture function which i used like this:
let texture = new THREE.Texture(
url //URL = a base 64 JPEG string in this case
);
var img = new Image(128, 128);
img.src = url;
texture.normal = img;
As you can see i used an Image constructor, this is from React Native and is imported like this:
import { Image } from 'react-native';
In the react native documentation it will explain how it can be used, it supports base64 encoded JPEG.
and finally map the texture to the material:
material.map = texture;
Note: i havent tried to show the end result in my webglview yet, but in the element inspector it seems to show proper THREEjs objects.
(Note: this is not the answer)
EDIT: made the code a bit shorter and use DOMParser, still doesnt work because:
"image.addEventListener is not a function"
Which implies the image object which is created in this method doesnt seem to be able to be used in THREEjs,..
var DOMParser = require('react-native-html-parser').DOMParser;
var myDomParser = new DOMParser();
window.document = {};
window.document.createElementNS = (x,y) => {
if (y === "img") {
let doc = myDomParser.parseFromString("<html><head></head><body><img class='image' src=''></img></body></html>");
return doc.getElementsByAttribute("class", "image")[0];
}
}
Edit: be careful with this, because it also overrides the other createElemensNS variants in which they create canvas or other things.