so We're building a lot of Org level components and using MUI to enhance and build on top of it. All the Other Components seem to work fine, however when I try to createOrgDatePicker like this:
<MuiPickersUtilsProvider utils={MomentUtils}>
<KeyboardDateTimePicker
key={`dateTime-${tz}`}
className={classes.dateTimePicker}
label="Start Time"
value={date}
format="YYYY-MM-DD hh:mm A"
onChange={handleDateTimeChange}
showTodayButton
/>
</MuiPickersUtilsProvider>
It works fine as long as I use this as a component, but when I do the build and try to import it from the Component Library I have been working with it throws the error:
TypeError: Cannot read properties of undefined (reading 'isRequired')
Do I always have to use MuiPickersUtilsProvider as a Higher Order Component even at the place where I am importing my components or is there any better workaround for the same?
Ideally what I would want to do is:
import OrgDatePicker,{IDatePickerProps} from '#OrgUtils/OrgDatePicker';
const result = (props:IDatePickerProps) => <OrgDatePicker {...props} />
instead of:
import OrgDatePicker,{IDatePickerProps} from '#OrgUtils/OrgDatePicker';
const result = (props:IDatePickerProps) => <React.Fragment>
<MuiPickersUtilsProvider utils={MomentUtils}>
<OrgDatePicker {...props} />
</MuiPickersUtilsProvider>
</React.Fragment>
Related
This previous SO question shows how we can use a Vue2 component as the content of a LeafletJS popup. I've been unable to get this working with Vue3.
Extracting the relevant section of my code, I have:
<script setup lang="ts">
import { ref } from 'vue'
import L, { type Content } from 'leaflet'
import type { FeatureCollection, Feature } from 'geojson'
import LeafletPopup from '#/components/LeafletPopup.vue'
// This ref will be matched by Vue to the element with the same ref name
const popupDialogElement = ref(null)
function addFeaturePopup(feature:Feature, layer:L.GeoJSON) {
if (popupDialogElement?.value !== null) {
const content:Content = popupDialogElement.value as HTMLElement
layer.bindPopup(() => content.$el)
}
}
</script>
<template>
<div class="map-container">
<section id="map">
</section>
<leaflet-popup ref="popupDialogElement" v-show="false">
</leaflet-popup>
</div>
</template>
This does produce a popup when I click on the map, but it has no content.
If, instead, I change line 14 to:
layer.bindPopup(() => content.$el.innerHTML)
then I do get a popup with the HTML markup I expect, but unsurprisingly I lose all of the Vue behaviours I need (event handling, etc).
Inspecting the addFeaturePopup function in the JS debugger, the content does seem to be an instance of HTMLElement, so I'm not sure why it's not working to pass it to Leaflet's bindPopup method. I assume this has something to do with how Vue3 handles references, but as yet I can't see a way around it.
Update 2022-06-09
As requested, here's the console.log output: I've put it in a gist as it's quite long
So just to document the solution I ended up using, I needed to add an additional style rule in addition to the general skeleton outlined in the question:
<style>
.leaflet-popup-content >* {
display: block !important;
}
</style>
This overrides the display:none that is attached to the DOM node by v-show=false. It would be nice not to need the !important, but I wasn't able to make the rule selective enough in my experiments.
is it possible to pass react native components to a swift component? I was referring to this tut https://shopify.engineering/creating-native-components-accept-react-native-subviews but it only shows android support.
Something like this:
const MyNativeModule = requireNativeComponent('MyNativeModule');
return (
<View>
<MyNativeModule icon={<Image ... />}>
<View />
</MyNativeModule>
</View>
)
I am working on a AutoComplete Field in redux-form and found this solution. Thought this will help someone using material-ui or redux-form-material-ui and looking to get rid of muiTheme errors. For my case I found it simple using react-select.
{/* Libraries you need */}
import {AutoComplete as MUIAutoComplete} from 'material-ui'
import { AutoComplete } from 'redux-form-material-ui'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import { reduxForm, Field, Fields, formValueSelector, change } from 'redux-form'
{/* redux-form Field component for Text Input using AutoComplete */}
<MuiThemeProvider>
<Field
name="searchByText"
label="Search Suggestions"
component={AutoComplete}
floatingLabelText="Search By Suggestions"
openOnFocus
filter={MUIAutoComplete.fuzzyFilter}
dataSource={searchSuggestionList} //array list of suggestions
onChange={this.handleSearchByTextChange} //handle the onChange event by handleSearchByTextChange func
onBlur={() => {}}
/>
</MuiThemeProvider>
I'm using redux-form-material-ui for the forms. I have simple form with two text fields. This form will show the initalValues passed to it and user can also update the values of TextField. These TextFields working fine with validations and all but I'm facing problem while re-rendering. On route change, I'm passing the different intialValues to that form component but even though proper values passed to it, TextFields are not getting updated. It just shows the first time passed initialValues.
Here is my code:
From parent component:
<ReduxForm {...initialValues} />
ReduxForm component:
class ReduxForm extends React.Component {
render () {
return (
<div>
<form onSubmit={() => console.log('Submitted')} >
<Field
className='input-field'
name='name'
component={TextField}
floatingLabelText='Full Name'
/>
<Field
className='input-field'
name='email'
component={TextField}
floatingLabelText='Email'
/>
</form>
</div>
)
}
}
export default reduxForm({
form: 'test-form',
validate
})(ReduxForm)
I Know that, this is the same problem with defaultValue in material-ui's TextField. Is this expected behavior in redux-form-material-ui also? If so, is there way I can solve this issue without setting the state and all?
Thank you!
Haven't used redux-form-material-ui but try adding enableReinitialize: true to your reduxForm decorator
export default reduxForm({
form: 'test-form',
validate,
enableReinitialize: true
})(ReduxForm);
And see if that works.
I am new to Titanium, so excuse my lack of understanding.
Even though I am using sdk version 3.2 (have sdk-version: 3.2.0.v20130801162445 in my tiapp.xml) when I try and have a view that uses the xml above I get this error:
[ERROR][V8Exception( 615)] Exception occurred at alloy/controllers/feed.js:22: Uncaught TypeError: Object # has no method 'createTemplates'
I cut down all my code so that the feed.js file is just:
function loadMoreBtnClicked(_event) {
alert('not implemented yet');
}
function createListView(_data) {
// this is pretty straight forward, assigning the values to the specific
// properties in the template we defined above
var items = [];
for (var i in _data) {
// add items to an array
items.push({
template : "template1", // set the template
textLabel : {
text : _data[i].name // assign the values from the data
},
pic : {
image : _data[i].pic_square // assign the values from the data
}
});
}
// add the array, items, to the section defined in the feed.xml file
$.section.setItems(items);
}
alert('feed loaded');
The XML is in feed.xml and looks like this:
<Alloy>
<Window class="container" formFactor="handheld">
<ListView id="list" defaultItemTemplate="template1">
<Templates>
<ItemTemplate name="buttonItem" height="Ti.UI.SIZE">
<!-- will use this in the next blog post -->
<Button id="loadMoreBtn" onClick="loadMoreBtnClicked">Load More</Button>
</ItemTemplate>
<!-- main template for displaying the list items -->
<ItemTemplate id="template1" name="template1" class="template1">
<ImageView id="pic" bindId="pic" class="imageThumb"/>
<View id="textContainer">
<Label id="textLabel" bindId="textLabel" class="title"/>
</View>
</ItemTemplate>
</Templates>
<!-- we only have one section and the items are contstucted using template1 -->
<ListSection id="section" >
<ListItem template="template1" />
</ListSection>
</ListView>
</Window>
</Alloy>
I still get the error (just using the XML with no actual controller code other than the alert running). If I pull the ListView XML out of the feed.xml file the alert fires, when I put the ListView XML back in I get the Error above.
I am trying to use code from this example:
https://gist.github.com/aaronksaunders/5896390
but cant really tell what I am missing?
Thanks!
-James
found out what the issue was, my problem had to do with not having the updated version of alloy that is needed to support the ListView Templates in XML. I needed to run this at the command line in Windows: "npm install -g alloy#1.2.0-alpha" (without quotes). After that I was able to use ListView templates in XML as shown above.