https://developers.google.com/glass/v1/reference/timeline#menuItems.action specifies menuItems[].values[] as being a list.
I understand that the first element of this list contains {displayName, iconUrl} for the DEFAULT state.
The description says "For CUSTOM items, a list of values controlling the appearance of the menu item in each of its states. A value for the DEFAULT state must be provided. If the PENDING or CONFIRMED states are missing, they will not be shown."
Should I assume that value[1] contains {displayName, iconUrl} for the PENDING state and value[2] contains {displayName, iconUrl} for the CONFIRMED state.
The menuItems[].values[] resource has 3 properties:
displayName: text that will be displayed.
iconUrl: link to an icon that will be displayed along side the displayName.
state: the state for this value; allowed values are DEFAULT, PENDING and CONFIRMED and defaults to DEFAULT.
What happens for a user is as followed:
Menu item is displayed with the displayName and iconUrl of the value that has the state DEFAULT.
User taps on it: Glass displays the displayName and iconUrl of the value that has the state PENDING with a progress bar; this is the time when the user still has the ability to cancel the action.
Progress bar finishes: Glass displays the displayName and iconUrl of the value that has the state CONFIRMED; the action has been processed by Glass and a notification will be sent to the Glassware on the next sync.
More information about the state property can be found in our reference guide.
Related
Basically I have a component that is a list of rooms that a user has joined. On top of this component there is a search section, and aside of the search input there are some options about the search, like search by "Room Name" , search by "Organization name " etc. I keep this options in objects inside of an array alongside the id of the option. Then I map this array to show all the options.
Now I can display those options but I cant find a way to know which of those options the user has selected. The user has to select only one option and then the option is highlighted
This is the component
This is my code
You need to use react state hook for the same.
Whenever one of them is selected update the state with the selected ones name or id, or any selector you need.
This example code should help
https://blog.logrocket.com/how-to-build-tab-component-react/
I keep this options in objects inside of an array alongside the id of the option. Then I map this array to show all the options.
For this problem, you have to place your array of objects in a useState hook.
docs: https://reactjs.org/docs/hooks-state.html
In your individual search option objects, add a boolean property named isSelected and set the default values to false (no search options selected yet).
sample object structure
{ id: 1, optionName: 'Room Name', isSelected: false}
then, create an onClick function to set the isSelected property to true of the selected option & to set the new state of the array of objects. Hope this helped! Goodluck brother
I have the below input field below set up with Autocomplete here:
https://material-ui.com/demos/autocomplete/
(first react-autosuggest example)
So when you type 002 these options come up. Though the problem is when you click on one of the options, I get undefined error. Below are settings for the Textfield I have on the page:
value: AccountNumber,
onChange: this.updateAccountNumber,
onBlur: this.updateAccountNumber,
So somehow when you click, value for this field ends up being undefined
i have a working Autosuggest CodeSandbox set up here with console.logs I added for testing here:https://codesandbox.io/s/m35z5l98ox
As you see as you type it prints one letter less (possibly consolelog kicks in before state update) which is fine but when you select an item from the list, it doesn't trigger an onChange event (which it should since value in the field is changing)... So if you click the field, you will get the full value you selected from the list ( which I don't quite know how that list value gets pasted into the field)...
To clarify: This Account Number field is set up with Redux, so what you type gets saved thru onChange to Redux Store. Once the suggestions gets displayed and you select one from the list, at that moment, value of the input field gets to be undefined and autosuggest fails to put what you clicked on, in the suggest list to inside the field.
I am thinking suggestions is wiping out the field to write down the value I clicked on into the field and failing to do that job, but can't figure why it's failing and how to fix it...
I am using Office Fabric React in an spfx web part and within a MarqueeSelection /DetailsList in each row have a checkbox to represent a boolean value, On click the default callback function writes out to log whether the isChecked value is true/false.
How can I correctly wire up my component so that it correctly updates the value of the line data on click?
I have been unable to overload the bound function to pass an identifier value to update the value.
the component output is :
the function binding is:
this._onCheckboxChange = this._onCheckboxChange.bind(this);
the callback function is:
private _onCheckboxChange(ev: React.FormEvent, isChecked: boolean): void {
console.log(The option has been changed to ${isChecked}.);
}
I have been unable to overload the bound function to pass an identifier value to update the value.
I have also tried to wrap it in a span tag and fire an event on click
The end result should ideally update the 'Displayed' value of the associated object in the array of data to reflect the change in boolean value.
This issue was related to the use of a react checkbox from office react so please ignore the question
I have a panel on the left hand side of my app.
On the right side, the admin can select a 'User Name'. Once the User Name is selected, i need to get categories of the selected user. From the displayed categories, I can chose one for which it will display all the items.
User Name > categories > items
I also want my url to change accordingly like localhost/users/categories/items
The left side will not change at all in this process, hence I do not want to re-render it. At present I have three pages, with the navigation configured.
Actually I want to place some animations on the right side as an option is clicked. The alternative i found was to define onClick and change the component with some animation - but this kind of does not allow me to change the url.
What is the best way to handle this?
I am using next-js in my react application.
The alternative i found was to define onClick and change the component with some animation...
That's a correct approach.
...but this kind of does not allow me to change the url.
You can user browser's history to manipulate url without page reload.
For instance
const state = {};
const pageTitle = 'My Item';
const url = 'users/categories/items';
history.pushState(state, pageTitle, url);
If you have <a href's /> in your page, you might want to override their behaviour too, otherwise they'll trigger a page reload as well.
To learn react + flux, I am building a simple compose box where the paragraph is broken down into multiple tweets and then by clicking a button you can tweet the series of tweets. The high level app has the following components:
<div>
<ComposeBox tweetParaText={this.state.tweetParaText} ref='composeBox' />
<DisplayTweets tweetCollection={this.state.tweetCollection} ref='displayTweets' />
<TweetButton signedInSignature={this.state.signedInSignature} ref='tweetButton' />
</div>
Once you are done composing the text, you click on the TweetButton. The TweetButton has 4 UI states:
Ready (Show the Tweet Button)
Tweeting (in which case I show a
loading gif as well as change the text from "Tweet" to "Tweeting..")
Tweeted Succesfully (In which case I want to revert text of the button to "Tweet", hide the ajax laoder gif and show a message "Tweets sent successfully!" for a duration of 7 seconds.)
Error (In which case I want to revert text of the button to "Tweet", hide the ajax loader gif and show an error message)
These states are unique to the tweet button and are different from the application state which I am storing in the store.
The onclick of the TweetButton component is as follows:
_onClick:function(){
this.setState({buttonState:tweeting});
ActionCreator.tweet(this.props.tweetCollection,this.props.signedInSignature);
}
On changing the state here, the UI changes for this state happen, as that is how the component has been written. However, I am a bit stumped after this.
The flow of data being unidirectional, the action upon completion dispatches an event to the store which updates its state and thus the state of the ComposeBox component. But how and where do I set the state of the TweetButton component? Should I write a different store for this? Or is there a better way of achieving this?
I use the same store for the status/state of the call.
Lets say the result of your call will be stored in _Tweets = {}; inside the TweetStore object.
I register the results uniquely (not mandatory I guess) inside the store like this
_Tweets["someresultid/tag"] = {
data: result.data,
status: result.status
}
TweetStore is listening for 2 events : case : "Loading" and case : "ReceiveResults/answer/wtv"
When the user initiate the call you'll dispatch "loading" at the same time than your call. Then when it receive the answer you dispatch "answer".
Your view is listening for any change of your store, when a change occurs the callback will check the status and rerender accordingly (lording,error or result).
I hope it helps