I'm using Semantic UI in React, and I have two dropdown forms. The first dropdown has options Yes and No, and the second dropdown has the options A and B. If the first form has the option "Yes" selected (or if it is cleared), then I want the second dropdown to be cleared and disabled.
Currently, I have it such that the second dropdown is disabled as described, but I cannot figure out how to also clear the selected option (if there is one). I cannot do it in the same way that I disabled the dropdown (by saving a state variable), because Dropdown has the property clearable, not cleared.
Alternatively, could I set the second dropdown to some other third option C that is only set when it is disabled (and not accessible as an option)?
I've put below a Minimum Reproducible Example that demonstrates the disabling, but obviously not the clearing.
Thanks!
import React, { useState } from 'react';
import { Dropdown, Form} from "semantic-ui-react"
const firstDropdownOptions= [
{
key: 'Yes',
text: 'Yes',
value: 'Yes',
},
{
key: 'No',
text: 'No',
value: 'No',
},
]
const secondDropdownOptions= [
{
key: 'A',
text: 'A',
value: 'A',
},
{
key: 'B',
text: 'B',
value: 'B',
},
]
export const InputForm = () => {
const [firstVal, setFirstVal] = useState('')
const [secondVal, setSecondVal] = useState('')
const [condition, setCondition] = useState(false)
return (
<Form>
<Dropdown
placeholder='First Value'
selection
clearable
options={firstDropdownOptions}
onChange={(_, data) => {setFirstVal(data.value)};
if(data.value=="No"){setCondition(true)}
else{setCondition(false)};
}
/>
<Dropdown
placeholder='Second Value'
selection
clearable
disabled={condition}
options={secondDropdownOptions}
onChange={(_, data) => setSecondVal(data.value)}
/>
</Form>
)}
Dropdown should have value prop. But when clearing existing value in the second Dropdown, make sure to follow this instruction: https://github.com/Semantic-Org/Semantic-UI-React/issues/3625#issuecomment-654199235
Related
I am new to unit testing and trying to write test cases for checking the "text" dropdown options.
my code:
const options = [
{
key: 'Select',
text: 'value1',
},
<Dropdown
placeholder="dropdown value"
options={options[0]}
disabled={true}
className="style"
/>
my test file is:
let wrapper = shallow(<App />)
it('selected option text', () => {
const dropdown= shallow(<Dropdown options={options[0]} />)
const value= dropdown.find(Dropdown);
expect(value.children()).toEqual('value1');
How can I pass the options text into children? or is there any better way to do?
I found custom select for ember
https://gist.github.com/pixelhandler/6320922 . It's based on components and works well.
But I have one trouble. Data source for select is shared between all instances of it.
And I want to set default value as the first element of the data set but when I change value in one select it changes everywhere. Can you help me with it? Here is example: http://emberjs.jsbin.com/guhobutafado/19/edit
In your example, your select boxes all refer to the same data set with binding, so, of course, when one changes, all of them do... That's the principle of data-binding.
Then you have to use different data sets for your problem, to save the modifications on each select. Without this, you can't access to the data on each one, because they point to the same thing.
You can use multiple arrays like this:
App.IndexController = Ember.Route.extend({
name: 'one',
className: 'dropdown',
choices1: [
{ choice: 'Choose One' },
{ choice: 'First' },
{ choice: 'Last' }
],
choices2: [
{ choice: 'Choose One' },
{ choice: 'First' },
{ choice: 'Last' }
],
choices3: [
{ choice: 'Choose One' },
{ choice: 'First' },
{ choice: 'Last' }
]
});
Then call your faux-select components with each independent array:
{{faux-select name=name className=model.className
choices=choices1 selected=choices1.[0].choice}}
{{faux-select name=name className=model.className
choices=choices2 selected=choices2.[0].choice}}
{{faux-select name=name className=model.className
choices=choices3 selected=choices3.[0].choice}}
Here's a JSBin with this philosophy in action.
I have a large list of items. Each item has it's own details.
In my main view/partial, I simply display a large list list of the item names.
When the user clicks on an item, I want the page to go to a partial which works as a "template", displaying information based on which list item is clicked, and hence possibly what the URL looks like. E.g. /listItem1/
This diagram below hopefully sums up what I want to achieve pretty clearly.
How can I do this?
Right now, I have a pretty standard set up in which I have all the information for each list item in an array of object literals, which is contained in a controller injected into the main app module. Like so:
var app = angular.module('app', [/*nodependencies*/]);
var controllers = {};
app.controller(controllers);
controllers.listController = function ($scope){
$scope.list = [
{name: 'List Item 1 Name', detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 2 Name', detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 3 Name', detail1: 'blahblah1', detail2: 'blahblah2'}
..... and so on
I know how to create basic views/partials as well. But what would be my next steps?
You can do what you want, using the built-in router which ships with AngularJS.
var app = angular.module('app', [/*nodependencies*/])
.config(function($routeProvider) {
$routeProvider
.when('/:itemId', {
templateUrl: '/path/to/partial',
controller : function($scope, $routeParams) {
$scope.item = $routeParams.itemId;
}
})
});
Basically, what the above means, is that if you browse to pdf/item/1
Then you will have access in your controller to $routeParams.itemId which will be equal to 1. You can then do whatever logic is necessary with this information on your partial to show the information you want.
Hope this helps.
Update
Please look at the controller, this is how you would get the param you passed via the URL, you would then do whatever it is you need to do with that param in the controller, and pass the data back to the view.
You can create a small directive that will use the multi-use partial to display each item on the list
Take a look at this working example (http://plnkr.co/edit/0jNVxRg6g3p8uxpustzz?p=preview)
var myApp = angular.module('myApp', []);
myApp.controller('listController', ['$scope', function ($scope) {
$scope.list = [
{
name: 'List Item 1 Name',
url: 'pdfs/item1.pdf',
detail: 'blahblah'
},
{
name: 'List Item 2 Name',
url: 'pdfs/item2.pdf',
detail: 'blahblah'
},
{
name: 'List Item 3 Name',
url: 'pdfs/item3.pdf',
detail: 'blahblah'
}
];
$scope.selectItem = function(item){
$scope.selected = item;
}
}]);
myApp.directive('listItem', [function () {
return {
restrict: 'A',
scope: {
item: '='
},
templateUrl: 'multiple-partial.html',
link: function (scope, element, iAttrs) {
}
};
}])
I've been trying to create an object to use in a jtable as the options (for a select list).
I don't seem to have the format correct. The jtable.org website says it will take an array:
From the jtable.org website:
http://jtable.org/ApiReference#fopt-options
PhoneType: {
title: 'Phone type',
options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office phone' }, { Value: '2', DisplayText: 'Cell phone' }]
}
However, when I create an object like that:
var optionsObject = [];
optionsObject.push({Value: i, DisplayText: 'Hello' + i});
and then use it as a variable for the options in my jtable:
key: true,
options: optionsObject,
I don't get the items in the select list drop down. I do get something in the select list, but that looks like '[object Object]' instead of the actual items.
I'm not really sure what I'm doing wrong.
If I send an object that looks like this:
object.push('hello' + i);
I will get an item in the select list that looks like this 'hello0', as expected, but then the display text is also used as the value. I need to have an object with separate display texts and values.
Has anybody had any success with doing this?
After much trial and error, and debugger stops in the jtable scripting files, I learned that in order to use an object for the 'options' property of a field in jtable, the object must be in the following format
var optionsObject = new Object();
optionsObject[Value] = DisplayText;
I'm new to Sencha Touch and the Ext JS logic. Actually, I'm displaying a list of items containing two fields (title, type) grouped by default alphabetically by first character of the title and I added a button to a toolbar that I want it to switch the grouping to be by type. I tried to programmatically set the getGroupString function in the buton handler in this way :
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [{
text: 'By type',
handler: function() {
MyApp.MyStore.getGroupString = function(record) {
return record.get('type');
};
MyApp.itemsList.update();
}
}]
});
But that seems just to not work. Any help ?
Thanks
Just wanted to close the question as I have already answered it
MyApp.itemsList.refresh();