How do I use styled-component attributes to set the selected property of my styled option so that the option is selected within the select element depending on whether or not the isSelected property is truthy?
Right now I have this:
export const MyOption = styled.option.attrs(props => ({
selected: {props.isSelected ? "selected" : ""}
})``;
What you've got there is actually almost exactly how you do it.
The only thing you need to change is that you are setting the attrs selected to an object using curly-brackets {} when you should be using normal brackets () to do the logic.
export const MyOption = styled.option.attrs(props => ({
selected: (props.isSelected ? "selected" : ""),
}))``;
Related
In Wix, I have a text field in a repeater that is used for navigating to other dynamic pages. The link works, but there are two problems with that. First, I have to click two times, not double click, for functioning the link. Second, I want to make the text field act as a button link, I mean be able to right click on that and choose 'open in new tab'. How can I fix these problems in my code?
Here is the code
// Navigating to related dynaic page
import wixLocation from 'wix-location';
export function ndText_click(event) {
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#nText").onClick((event) => {
let postTypeValue = itemData.pType
wixData.query("Collection1").eq("_id", itemData._id)
.find()
.then(results => {
let item = results.items[0];
let pIDValue = item.postId;
if (postTypeValue == "R") {
wixLocation.to('/re/' + postIDValue);
} else if (postTypeValue == "L") {
wixLocation.to('/lo/' + postIDValue);
}
})
});
})
}
I suggest trying to use a button instead of the text element. You can usually style the button so it looks the same as the text element you already have. Then instead of setting the onClick, try setting the button's link and target properties.
Text(
text = "Resend OTP",
fontSize = 20.sp,
color = Textfieldcolor,
style = TextStyle(textDecoration = TextDecoration.Underline)
)
//This is my code this text should be selectable once and then be disabled .
You can add the clickable modifier or can use the ClickableText:
var enabled by remember { mutableStateOf(true)}
ClickableText(
text = AnnotatedString(text) ,
onClick = {
if (enabled) {
enabled = false
text = "Disabled"
}
})
Like #Arpit mentioned it would be better to use a TextButton for this purpose.
But if you absolutely want to use Text, You can use following snippet.
#Composable
fun OneTimeClickableText(text : String, onClick : () -> Unit){
var enabled by rememberSaveable{ mutableStateOf(true)}
Text(
modifier = Modifier
.clickable(enabled = enabled) {
enabled = false
onClick()
},
text = text
)
}
That said I this code is strictly for one-time clickable text. I won't recommend using it for something like OTP button; as user won't be able to click it unless they restart your app. You can pull the enabled variable and manage it from outside(e.g. keeping it disabled for certain amount of time rather than permanently).
A site I'm working on has a complicated "mega menu" type navigation. I would like content editors to be able to group menu items by column in the markup. Normally if I want 6 columns I would register 6 menus and name them columns 1-6, however these are dynamic sub-menus that need to be a child of another navigation item inside another menu.
What I'd really like to do is create a new type of nav-menu item (Currently Pages, Links, Categories, as well as my other custom post types and custom taxonomies) where that item would be just for columns. (The fact that I'm using it for columns isn't important here. This could just as easily be dividers, or something else. I just need a new nav-menu item type that I can create special markup with when I'm building the menus.)
Is there a way to create a new nav-menu item type without having to create a custom post type or custom taxonomy that is used only for this purpose?
What I ended up doing for this, was adding a new post type that was hidden everywhere on the site except the nav menus. I then added just a single entry of that post type type, and hid some of the fields.
<?php
function navMenuColumns_init() {
register_post_type('menu_column',
array(
'labels' => array(
'name' => __('Menu Columns'),
'singular_name' => __('Menu Column')
),
'supports' => array('title'),
// Doesn't need to be listed most places as it's not a valid content item on it's own
'public' => false, // Base setting. More specific settings below
'exclude_from_search' => false,
'publicly_queryable' => false,
'show_ui' => false,
'show_in_menu' => false,
'show_in_nav_menus' => true, // The only thing this is used for
'show_in_admin_bar' => false,
'has_archive' => false,
)
);
$_version = (float)get_option('navMenuColumns_version', 0.0);
if ($_version < 1.0) {
navMenuColumns_install10();
}
add_action('admin_footer', 'navMenuColumns_adminFooter');
}
function navMenuColumns_install10() {
$navMenuPost = wp_insert_post(array(
'post_type' => 'menu_column',
'post_title' => 'Column',
'post_status' => 'publish'
), true);
if (!is_wp_error($navMenuPost)) {
update_option('navMenuColumns_version', 1.0);
}
}
function navMenuColumns_adminFooter() {
?><script>
jQuery(document).ready(function($) {
// Hides most of the fields when editing a Menu Column item.
$('#menu-to-edit').on('click', 'a.item-edit', function() {
var $li = $(this).parents('li.menu-item');
if ($li.find('.item-type').text() == 'Menu Column') {
$li.find('p.description').hide();
$li.find('p.link-to-original').hide();
$li.find('p.field-move').show();
}
});
});
</script><?php
}
add_action('init', 'navMenuColumns_init');
?>
This allows the user to add this as a normal menu item. This won't play well with functions that build the menu markup for you, but if you traverse the menu item and build the markup for you, you can target this post type with custom markup.
I need to programmatically set up a node reference field.
My module successfully creates a and associates a pair of 'CCK' fields to my nodes. One of these fields is a node_reference field. My code is a follows:
$field_ref_name = 'field_custom_reference';
$field = field_info_field($field_ref_name);
if (empty($field)) {
$field = array(
"field_name"=>$field_ref_name,
"label"=>"Custom Reference",
"type"=>"node_reference",
"cardinality"=>"1",
'locked' => TRUE,
);
field_create_field($field);
}
$instance = array(
"field_name"=>$field_ref_name,
"label"=>"Sequence Reference",
"type"=>"node_reference",
"widget"=>array(
"type"=>"node_reference_autocomplete"
),
"description" => "text describing purpose of this field",
);
$instance["entity_type"] = "node";
$instance["bundle"] = $type;
if( !in_array($type, $field['bundles']['node']) )
field_create_instance($instance);
Now, the code works but when I edit a node inputting a valid value into the node reference field and attempt to save, I get the following error:
...: this post can't be referenced.
I realized the reason for the error is because the node reference field settings does not have any selected nodes as "Content types that can be referenced".
How can I adjust my code to set referenceable content types?
The reference-able types is a field setting. So it should be put under a "settings" array in the field definition. Something like -
$field = array(
"field_name"=>$field_ref_name,
"label"=>"Custom Reference",
"type"=>"node_reference",
"cardinality"=>"1",
'locked' => TRUE,
'settings' => array(
'referenceable_types' => array('article'),
),
);
I am working on an issue i'm having with hooking a field, setting the default value, and making it hidden. The problem is that it is taking the default value, but only submitting the first character of the value to the database.
//Here is how I'm doing it
$form['field_sr_account'] = array( '#type' => 'hidden', '#value' => '45');
I suppose there is something wrong with the way that I have structured my array, but I can't seem to get it. I found a post, http://drupal.org/node/59660 , where someone found a solution to only the first character being submitted
//Here is the format of the solution to the post - but it's not hidden
$form['field_sr_account'][0]['#default_value']['value'] = '45';
How can I add the hidden attribute to this?
Have you tried using #default_value insted of #value?
Also if you're trying to pass some data to the submit that will not be changed in the form you should use http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html#value .
The answer was actually to set the value and the hidden attribute separately, then set the value again in the submit handler using the following format.
I'm not sure if it's all necessary, I suppose I probably don't need to assign it in the form alter, but it works, so I'm going to leave it alone...
$form['#field_sr_account'] = $club;
$form['field_sr_account'] = array( '#type' => 'hidden','#value' => $club);
}
}
/*in submit handler, restore the value in the proper format*/
$form_state['values']['field_sr_account'] = array('0' => array('value' => $form['#field_sr_account']));
An interesting solution from http://drupal.org/node/257431#comment-2057358
CCK Hidden Fields
/**
* Implementation of hook_form_alter().
*/
function YourModuleName_form_alter(&$form, $form_state, $form_id) {
if (isset($form['type']) && isset($form['#node'])) {
### Make a CCK field becoming a hidden type field.
// ### Use this check to match node edit form for a particular content type.
if ($form_id === 'YourContentTypeName_node_form') {
$form['#after_build'] = array('_test_set_cck_field_to_hidden');
}
}
}
function _test_set_cck_field_to_hidden($form, &$form_state) {
$form['field_NameToBeHidden'][0]['value']['#type'] = 'hidden';
$form['field_NameToBeHidden'][0]['#value']['value'] = 'testValue';
return $form;
}