I'm having trouble binding the minDate and maxDate of two date pickers ("begin" and "end) using ExtReact 6.5.2. Here is the code sample:
import React, { Component } from 'react';
import { Container, DatePickerField, FormPanel, TextField } from '#extjs/ext-react';
export default class MyExample extends Component {
constructor(props) {
super(props);
this.state = {
beginPickerValue: null,
endPickerValue: null
};
}
render() {
return (
<Container layout="center">
<FormPanel
defaults={{ clearable: true, editable: false }}
shadow
>
<DatePickerField
label="Begin"
onChange={(datePicker, newValue) => this.setState({beginPickerValue: newValue})}
maxValue={this.state.endPickerValue}
/>
<DatePickerField
label="End"
onChange={(datePicker, newValue) => this.setState({beginPickerValue: newValue})}
minValue={this.state.endPickerValue}
/>
</FormPanel>
</Container>
)
}
}
In my setup, using Chrome, I get the following error:
Uncaught Error: Date object or string in dateFormat required
at new Ext.Error (ext.js:5817)
at Function.raise (ext.js:5843)
at Object.Ext.raise (ext.js:5860)
at constructor.applyMaxDate (ext.js:59619)
at constructor.setter [as setMaxDate] (ext.js:8892)
at Ext.Configurator.configure (ext.js:9171)
at constructor.initConfig (ext.js:9771)
at constructor (ext.js:13108)
at constructor (ext.js:23660)
at constructor.callParent (ext.js:9746)
I've used the exact code above in Sencha's "Examples" section for DatePickerField (see below links). The code runs and the fields are rendered, but the max and min bindings do not appear to be observed when setting dates.
Please note that as of this writing, in order to demo you'll have to use Sencha's "Examples" code block within the ExtReact 6.5.1 docs to replicate. When using the DatePickerField example code block for versions 6.5.2 or 6.5.3, you get the following error even when attempting to run Sencha's default sample code:
Uncaught ReferenceError: Ext is not defined
at app.js:1
I would provide a fiddle using Sencha's own ExtReact fiddler, but that too, seems to have problems running its own sample code. :/
As I understand it, there should be no need for additional functions or need to trigger from an event. Within React, the changes to state should appropriately reconfigure the maxDate and minDate configurations for the DateFieldPicker.
Any help is greatly appreciated...
The functionality of the minDate and maxDate apparently ceased to work properly in 6.5.1 (was working in 6.5.0) as reported to Sencha.
Apparently, the minDate and maxDate properties were then removed from the DatePickerField component in version 6.5.2 of ExtReact and remain missing in version 6.5.3. The associated getters and setters were also removed.
Related
I'm using ag-grid to render a table in my angular 7.2.1 app. The custom cell renderer is just to render an edit button in the rows that will redirect to a different page.
I've done this before in a different app on a different Angular version a while ago, but for some reason the same code in this Angular 7 app is resulting in this. I think I may be missing something really simple.
I've created a minimalist reproduction of the error I'm seeing in this stackblitz - https://stackblitz.com/edit/angular-v98mjs
If you click on the Edit button, you will see this error in the console.
ERROR Error: Cannot read property 'navigate' of undefined
ag-grid versions:-
I'm using the following version for ag-grid:-
"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",
Please look at the stackblitz code in the link above for the code.
You needed to define onEdit with Arrow Function
onEdit = (row): void => {
console.log('row is being edited', {row})
this.router.navigate(['/new-url', { id: row.incidentId }], {
relativeTo: this.route.parent
});
};
More example such thing: ag-grid server side infinite scrolling accessing props
Have a look at the updated plunk: https://stackblitz.com/edit/angular-oppxte
Without arrow function, inside onEdit function of AppComponent was not able to get reference of this.router, and hence, you were getting the error.
Cannot read property 'navigate' of undefined
I have also introduced RootComponent and NewComponent for better modularity in the example. Hope it will be clear with that.
Currently, I'm working with this setup (simplified for readability):
react_on_rails 11.1.4
Layout Controller (index method):
redux_store('appStore', props: { foo: 'bar' })
Layout:
<%= redux_store_hydration_data %> (before close of body tag)
View:
<%= react_component('FooBar') %>
Component (FooBar):
ReactOnRails.getStore('appStore');
JavaScript (main.js):
ReactOnRails.registerStore({ appStore });
If I inspect the source, the data and the component appear to be present:
<div id="FooBar-react-component-fb8d03cb-b3d3-4247-8b4b-3e5a2ad52f84"></div>
<script type="application/json" class="js-react-on-rails-component" data-component-name="FooBar" data-trace="true" data-dom-id="FooBar-react-component-fb8d03cb-b3d3-4247-8b4b-3e5a2ad52f84">{}</script>
<script src="/main.js"></script>
<script type="application/json" data-js-react-on-rails-store="appStore">{"foo":"bar"}</script>
However, the component itself isn't rendering due to these fatal errors:
Uncaught Error: There are no stores hydrated and you are requesting the store appStore...`
Uncaught Error: Could not find store registered with name 'appStore'. Registered store names include...
So far as I can tell, the setup is inline with what's been outlined in the documentation, so I'm wondering if this is a bug of some sort. I've tried putting the call to redux_store in both the controller and the view, moving the other calls into other files and locations, etc. to no avail.
Any help is much appreciated, thanks in advance!
I had the exact same problem. This is how I solved it. Initially, I had this
const appStore = ReactOnRails.getStore("myStore");
const HelloWorldApp = (appStore) => (
<Provider store={appStore}>
<HelloWorldContainer />
</Provider>
);
export default HelloWorldApp;
But it was failing to register the store here
const appStore = ReactOnRails.getStore("myStore");
So I changed it to this
import React from 'react';
import { Provider } from 'react-redux';
import HelloWorldContainer from './HelloWorldContainer';
const HelloWorldApp = (props) => (
<Provider store={ReactOnRails.getStore("myStore")}>
<HelloWorldContainer />
</Provider>
);
export default HelloWorldApp;
The "There are no stores hydrated" thing is a bit misleading. A "hydrated" store, is just a populated object. When you viewed your html you did have a hydrated store it just wasn't found by the JS. I believe by adding ReactOnRails.getStore in here
<Provider store={ReactOnRails.getStore("myStore")}>
helps with the load order. I believe the reason it wasn't initially working for me is because of the JS load order. I hope this helps someone.
I am trying create a storybook for my react-realy app, but i don't know how to set mockup data for that component. For simple a component it is ok, because i can use dummy UI component vs Container approach, but i can't use this for nested relay components, for example there is a UserList component, which i want add to storybook, i can split relay fragment part to container and UI part to the component, but what if UserList children are too relay component? I can't split their when they are a part of the composition of UserList?
Is there some solution for add relay components to the storybook?
I created a NPM package called use-relay-mock-environment, which is based on relay-test-utils which allows you to make Storybook stories out of your Relay components.
It allows nesting of Relay components, so you can actually make stories for full pages made out of Relay components. Here's an example:
// MyComponent.stories.(js | jsx | ts | tsx)
import React from 'react';
import { RelayEnvironmentProvider } from 'react-relay';
import createRelayMockEnvironmentHook from 'use-relay-mock-environment';
import MyComponent from './MyComponentQuery';
const useRelayMockEnvironment = createRelayMockEnvironmentHook({
// ...Add global options here (optional)
});
export default {
title: 'MyComponent',
component: MyComponent,
};
export const Default = () => {
const environment = useRelayMockEnvironment({
// ...Add story specific options here (optional)
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
export const Loading = () => {
const environment = useRelayMockEnvironment({
forceLoading: true
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
You can also add <RelayEnvironmentProvider /> as a decorator, but I recommend not doing that if you want to create multiple stories for different states/mock data. In the above example I show 2 stories, the Default one, and a Loading one.
Not only that, it requires minimal coding, where you don't need to add the #relay-test-operation directive to your query, and the mocked data is automatically generated for you using faker.js, allowing you to focus on what matters, which is building great UI.
Feel free to review the source code here if you want to implement something similar: https://github.com/richardguerre/use-relay-mock-environment.
Note: it's still in its early days, so some things might change, but would love some feedback!
I also created relay-butler, which is a CLI that takes in GraphQL fragments and outputs Relay components, including a auto-generated query component that wraps the fragment component, and Storybook stories (the Default and Loading ones by default) that wrap that query component. And literally within minutes, I can create beautiful Relay components that are "documented" within Storybook.
Would also love some feedback for it!
I am having trouble determining the type of a given jQueryUI widget instance.
The jQueryUI documentation for the Widget Factory suggests two techniques. From the "Instance" section:
The widget's instance can be retrieved from a given element using the
instance() method. [...]
If the instance() method is called on an element that is not
associated with the widget, undefined is returned.
the :data selector can also determine whether an element has a given
widget bound to it.
Based on their examples, let's say I initialize a datepicker and later code checks if it is a datepicker:
<p>Date: <input type="text" id="datepicker"> </p>
$(function() {
$("#datepicker").datepicker();
// ...
var i = $("#datepicker").progressbar("instance"); // i is undefined as expected
console.log(i);
var b = $("#datepicker").is(":data('ui-datepicker')"); // b = false, not sure why
console.log(b);
var i2 = $("#datepicker").datepicker("instance"); // this throws an exception
console.log(i2);
});
Based on the documentation I expected the .is call to return true, and the last line to return the instance (not throw an exception.)
JSFiddle is here. (You will need to open the browser's console to see the logged output.)
It turns out the techniques I listed above do work for many jQueryUI widgets, e.g. button, progressbar.
But datepicker is kind of weird. Looking at the DOM after a datepicker is initialized, I see the datepicker is inserted as a new element after the named element.
To get the datepicker widget instance I'd need to navigate the DOM starting from the named element. To check if the input field has a datepicker on it we can simply check the element for the class hasDatepicker:
var isDatePicker = $("#datepicker").is(".hasDatepicker");
This works with jQueryUI 1.11.2, and based on other SO questions it's been working since 2009. So I guess it's a reliable technique, but I'm not sure if its documented anywhere, or guaranteed for future versions.
In jQuery UI 1.7, I had successfully overridden the datepicker._generateHTML function running a script in the form:
jQuery.datepicker._generateHTML = function(inst) {
...revised code...
};
When I attempted to upgrade to version 1.8 using the same approach, I encountered a problem. Version 1.8 added a datepicker closure scope variable dpuuid, which is referenced in the new version of the '...revised code...'. datepicker._generateHTML now fails with a dpuuid is not defined' error.
I'm still new enough to Javascript to not understand all the subtle aspects of the language. So my first question is: 'Can a function which references a closure scope variable be overridden and still access the original closure scope?'
I found the answer in Thomas' answer for jQuery DatePicker how to disable auto day selection while browsing calendar?
Adding the following to the top of my '...revised code...':
if (!inst.dpuuid) {
for (attr in window) {
if(/^DP_jQuery_/.test(attr)) {
inst.dpuuid = attr.replace(/^DP_jQuery_([0-9]+)/, '$1');
}
}
}
var dpuuid = inst.dpuuid;
eliminated the dpuuid is not defined' error. I had seen in FireBug that the closure scope was visible from the window object, but had no idea how to extract values from it.
Thanks Thomas!!