Is there a way to close a slidable in flutter by tapping on the screen instead of sliding back? I just want the slidable to slide back automatically when there is any other interaction on the screen. Here is the section of my code where i added the slidable Widget.
Thank you in advance
Expanded(
child: ListView.builder(
//children: List.generate(todos.length, (index) => null),
itemCount: todos.length,
itemBuilder: (BuildContext context, int i){
return Slidable(
dismissal: SlidableDismissal(
child: SlidableDrawerDismissal(),
onDismissed: (actionType) {
setState(() {
todos.removeAt(i);
});
},
),
key: ValueKey(todos[i]),
actionPane: SlidableScrollActionPane(),
actionExtentRatio: 0.25,
child: ListTile(
onTap: (){
setState(() {
_isVisible= !_isVisible;
});
},
title: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: CustomCheckbox(
selectedColor: Color(0xFF005ef5)
),
),
SizedBox(
width: 5, // here put the desired space between the icon and the text
),
Flexible(
child: Text(
todos[i],
style: Theme.of(context).textTheme.bodyText1,
)
) // here we could use a column widget if we want to add a subtitle
],
),
),
actions: <Widget>[
IconSlideAction(
icon: Icons.close,
caption: 'Delete',
color: Theme.of(context).accentColor,
onTap: (){
setState(() {
todos.removeAt(i);
});
},
)
],
);
},
),
),
you can set the closeonTap:true inside IconSlideAction()
Related
I am trying to use shiny.fluent and implement one of the Nav examples from the Microsoft fluent UI documentation page. The example uses some JavaScript to apply a heading style to the group headings and I'm not sure how do apply the JavaScript in R.
Minimum example below:
library(shiny)
library(shiny.fluent)
navigation_styles <- list(
root = list(
height = "100%",
width = "30%",
boxSizing = "border-box",
border = "1px solid #eee",
overflowY = "auto"
)
)
link_groups <- list(
list(name = 'Pages',
links = list(
list(name = 'Activity'),
list(name = 'News'))),
list(name = 'More Pages',
links = list(
list(name = 'Settings'),
list(name = 'Notes')
)
)
)
shinyApp(
ui = fluidPage(
Nav(
groups = link_groups,
selectedKey = "key1",
styles = navigation_styles
)
),
server = function(input, output) {
}
)
And it looks like this. The group headings are collapsible menu items which is not what I want.
the example from Microsoft is the last example on this page. Their example code below:
import * as React from 'react';
import { Nav, INavLinkGroup } from '#fluentui/react/lib/Nav';
const navLinkGroups: INavLinkGroup[] = [
{
name: 'Pages',
links: [
{ name: 'Activity', url: 'http://msn.com', key: 'key1', target: '_blank' },
{ name: 'News', url: 'http://msn.com', key: 'key2', target: '_blank' },
],
},
{
name: 'More pages',
links: [
{ name: 'Settings', url: 'http://msn.com', key: 'key3', target: '_blank' },
{ name: 'Notes', url: 'http://msn.com', key: 'key4', target: '_blank' },
],
},
];
export const NavCustomGroupHeadersExample: React.FunctionComponent = () => {
return (
<Nav
onRenderGroupHeader={_onRenderGroupHeader}
ariaLabel="Nav example with custom group headers"
groups={navLinkGroups}
/>
);
};
function _onRenderGroupHeader(group: INavLinkGroup): JSX.Element {
return <h3>{group.name}</h3>;
}
It looks like this:
Can anyone help me implement this in shiny.fluent?
Thanks.
I created a custom block type called with the wp-cli, it's working, but when I add innerBlocks to it, the innerBlocks display, but don't save or adhere to any other attributes other than template, templateLock and allowedBlocks are all ignored. Also when I define wp.editor.InnerBlocks as a variable, it returns null, but if I include it in the block edit section, it works fine, still doesn't save. Full code:
( function( wp ) {
var registerBlockType = wp.blocks.registerBlockType,
__ = wp.i18n.__,
el = wp.element.createElement
;
registerBlockType( 'adventures/accommodations', {
title: __( 'Accommodations' ),
icon: 'admin-multisite',
category: 'layout',
supports: {
html: false,
align: true
},
attributes: {
align: {
type: 'string',
default: 'full'
},
},
edit: function( props ) {
var attributes = props.attributes;
return [
el( 'div', {className: props.className,},
el( 'h2', {className: 'sub-header'},
'Accommodations'
),
el( wp.editor.InnerBlocks, {
allowedBlocks: ['core/columns', 'core/column', 'core/paragraph', 'core/gallery'],
template: [
['core/columns', {},[
['core/column', {}, [
['core/gallery']
]],
['core/column', {},[
['core/paragraph', { placeholder: 'Enter short description...' }]
]]
]]
],
templateLock: 'all'
}),
)
]
},
save: function( props ) {
var attributes = props.attributes;
var InnerBlocks = props.innerBlocks
return [
el( 'div', {className: props.className,},
el( 'h2', {className: 'sub-header'},
'Accommodations'
),
el( InnerBlocks.Content ),
)
]
}
});
} )(
window.wp
);
Side note, also trying to make the block align full width without block alignment controls, but can't find any documentation on how to do that. Any help would be greatly appreciated, thanks!
I am trying to upload the file via Media Library from Inspect Control in Gutenberg. I am using this code currently in JS :
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
MediaUpload = wp.components.MediaUpload,
InspectorControls = wp.editor.InspectorControls;
And here I am registering the block type :
registerBlockType( 'myplugin/about-section', {
title: 'About Section',
icon: 'megaphone',
category: 'widgets',
edit: function( props ) {
return [
el( ServerSideRender, {
block: 'malinda/about-section',
attributes: props.attributes,
} ),
el( InspectorControls, {},
el( MediaUpload, {
label: 'Background Image',
value: props.attributes.bgimg,
// I think something need to be done here..
} ),
),
];
},
save: function() {
return null;
},
} );
But for some reason it's not working for me. In console it's giving me this error :
Error: Minified React error #130; visit
https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=
for the full message or use the non-minified dev environment for full
errors and additional helpful warnings.
and when I click on block it says :
The editor has encountered an unexpected error.
Can anyone please help me in that?
You need add attributes field for save image link. Then you need add MediaUpload element and add callback on click. And after save value. You can integrate my code in your
decision. I am add image select to inspector controls area.
( function( editor, components, i18n, element ) {
var el = element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.editor.InspectorControls;
var MediaUpload = wp.editor.MediaUpload;
registerBlockType( 'designa/image-block', {
title: 'Image block',
description: 'Image block.',
icon: 'video-alt3',
category: 'common',
attributes: {
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
}
},
edit: function( props ) {
var attributes = props.attributes;
var onSelectImage = function( media ) {
return props.setAttributes({
mediaURL: media.url
});
};
return [
el( InspectorControls, { key: 'inspector' },
el( components.PanelBody, {
title: 'Image block',
className: 'image-block',
initialOpen: true,
},
el( MediaUpload, {
onSelect: onSelectImage,
type: 'image',
render: function( obj ) {
return el( components.Button, {
className: 'components-icon-button image-block-btn is-button is-default is-large',
onClick: obj.open
},
el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' },
el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } )
),
el( 'span', {},
'Select image'
),
);
}
}),
),
)
];
},
save: function( props ) {
var attributes = props.attributes;
return (
el( 'div', {
className: props.className
},
el( 'img', {
src: attributes.mediaURL
})
)
);
},
} );
} )(
window.wp.editor,
window.wp.components,
window.wp.i18n,
window.wp.element,
);
I am trying to assign values to a multiselectable combo box in extjs property grid. When I assign some values to the field, the grid fails to render the field. How to resolve this ? Please find the code below.
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 400,
renderTo: Ext.getBody(),
source: {
name: "My Object",
created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
timeofday: "12:00 PM",
available: false,
version: 0.01,
description: Ext.encode({
product: 'Clorox',
tagline: 'The Shinyest White!'
}),
childAccounts:['john','mike']
},
customEditors: {
timeofday: Ext.create('Ext.form.TimeField', {selectOnFocus: true}),
description: {
xtype: 'customeditorfield'
},
childAccounts:Ext.create('Ext.form.ComboBox', {store: ['john', 'mike', 'harvey'],multiSelect:true}),
},
customRenderers: {
timeofday: function( v ) {
return Ext.isDate( v ) ? Ext.Date.format( v, 'g:i A' ) : v;
}
},
propertyNames: {
name: '(name)',
created: 'Created Date',
timeofday: 'Time of Day',
available: 'Available?',
version: 'Version',
description: 'Product Description',
childAccounts: 'Child Description'
},
listeners: {
beforeedit: function( editor, e, opts ) {
if( e.record.get( 'name' )=='name' || e.record.get( 'name' )=='version' ) {
return false;
}
}
}
});
By default, only "editable" values are supported by property grid, and Sencha does not count arrays as editable. You can try to override this if you want. The limitation is introduced in Ext.grid.property.Store.getReader, where there is a function isEditableValue:
isEditableValue: function(val){
return Ext.isPrimitive(val) || Ext.isDate(val) || val === null;
}
If you change this function to allow for arrays, it seems to work, but without warranty. I used the following code for quick test:
Ext.define('', {
override: 'Ext.grid.property.Store',
getReader: function() {
var newReader = !this.reader;
this.callParent(arguments);
if(newReader) this.reader.isEditableValue = function(val) {
return Ext.isPrimitive(val) || Ext.isDate(val) || Ext.isArray(val) || val === null;
}
return this.reader;
}
});
Fiddle (Without warranty, as always)
Solution:
Your "childAccounts" config is not correct. Try to replace:
childAccounts:['john','mike']
with:
childAccounts: 'john, mike'
Notes:
Tested with ExtJS 4.2.
I am using ckeditor , and I have added 1 dialog where on button click i want to check whether cursor is inside table in ckeditor dialog ?
this is dialog code where on click of button i need to check the above condition
CKEDITOR.dialog.add( 'NDFSRSDialog', function( editor ) {
return {
title: 'Formula Editor',
contents: [
{
id: 'tab-basic',
label: 'Basic condition',
elements: [
{
type: 'text',
id: 'NDFSRS',
label: 'FIELD',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" )
},
{
type: 'button',
id: 'title',
label: 'CONDITION',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" ),
onclick : function( )
{
alert(0);
}
}
]
}
],
onOk: function() {
var dialog = this;
dialog.getElement('tab-basic', 'NDFSRS' ).hide();
}
};
});
Like this ?
if($("#ckeditor").is(":focus")){
//do stuff here
}
$( '#save' ).on( 'click', function () {
var editor = CKEDITOR.instances.ficeditor,
sel = editor.getSelection(),tbchk;
tbchk = sel.getStartElement();
while(tbchk!=null){
if(tbchk!=null && tbchk.getName()=="table"){
console.log("inside table");
}
tbchk=tbchk.getParent();
}
});