We Keep Coding

Ant design - How to adjust table column width by dragging?

Is there any way to let users to adjust column width of Ant Design Table by drag and drop?
I found some examples that about is for column sorting, but not for column resizing.
Please help, thanks!
UPDATED # 2018-11-13
There is an official example of resizing table column now:
https://ant.design/components/table/#components-table-demo-resizable-column

I have made a working sample - its far from perfect and needs a lot of optimization. Basically you need to use the onHeaderCell and capture onMouseDown, onMouseUp and onMouseMove.
onMouseMove we call setState and basically trigger a re-render with the new column width.
https://codesandbox.io/s/j2zw9nn5w9
onHeaderCell: column => {
let colw = this.state.columnWidth;
return {
onMouseDown: e => {
this.mouseDownX = e.clientX;
this.beginDrag = true;
},
onMouseUp: () => {
this.beginDrag = false;
},
onMouseMove: e => {
if(this.beginDrag === true) {
this.updateColumnWidth(colw +
Math.round((e.clientX - this.mouseDownX)*.05));
}
}
};
}

Access element whose parent is hidden - cypress.io

The question is as given in the title, ie, to access element whose parent is hidden. The problem is that, as per the cypress.io docs :
An element is considered hidden if:
Its width or height is 0.
Its CSS property (or ancestors) is visibility: hidden.
Its CSS property (or ancestors) is display: none.
Its CSS property is position: fixed and it’s offscreen or covered up.
But the code that I am working with requires me to click on an element whose parent is hidden, while the element itself is visible.
So each time I try to click on the element, it throws up an error reading :
CypressError: Timed out retrying: expected
'< mdc-select-item#mdc-select-item-4.mdc-list-item>' to be 'visible'
This element '< mdc-select-item#mdc-select-item-4.mdc-list-item>' is
not visible because its parent
'< mdc-select-menu.mdc-simple-menu.mdc-select__menu>' has CSS property:
'display: none'
The element I am working with is a dropdown item, which is written in pug. The element is a component defined in angular-mdc-web, which uses the mdc-select for the dropdown menu and mdc-select-item for its elements (items) which is what I have to access.
A sample code of similar structure :
//pug
mdc-select(placeholder="installation type"
'[closeOnScroll]'="true")
mdc-select-item(value="false") ITEM1
mdc-select-item(value="true") ITEM2
In the above, ITEM1 is the element I have to access. This I do in cypress.io as follows :
//cypress.io
// click on the dropdown menu to show the dropdown (items)
cy.get("mdc-select").contains("installation type").click();
// try to access ITEM1
cy.get('mdc-select-item').contains("ITEM1").should('be.visible').click();
Have tried with {force:true} to force the item click, but no luck. Have tried to select the items using {enter} keypress on the parent mdc-select, but again no luck as it throws :
CypressError: cy.type() can only be called on textarea or :text. Your
subject is a: < mdc-select-label
class="mdc-select__selected-text">Select ...< /mdc-select-label>
Also tried using the select command, but its not possible because the Cypress engine is not able to identify the element as a select element (because its not, inner workings are different). It throws :
CypressError: cy.select() can only be called on a . Your
subject is a: < mdc-select-label
class="mdc-select__selected-text">Select ...< /mdc-select-label>
The problem is that the mdc-select-menu that is the parent for the mdc-select-item has a property of display:none by some internal computations upon opening of the drop-down items.
This property is overwritten to display:flex, but this does not help.
All out of ideas. This works in Selenium, but does not with cypress.io. Any clue what might be a possible hack for the situation other than shifting to other frameworks, or changing the UI code?

After much nashing-of-teeth, I think I have an answer.
I think the root cause is that mdc-select-item has display:flex, which allows it to exceed the bounds of it's parents (strictly speaking, this feels like the wrong application of display flex, if I remember the tutorial correctly, however...).
Cypress does a lot of parent checking when determining visibilty, see visibility.coffee,
## WARNING:
## developer beware. visibility is a sink hole
## that leads to sheer madness. you should
## avoid this file before its too late.
...
when $parent = parentHasDisplayNone($el.parent())
parentNode = $elements.stringify($parent, "short")
"This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'display: none'"
...
when $parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden($el.parent())
parentNode = $elements.stringify($parent, "short")
width = elOffsetWidth($parent)
height = elOffsetHeight($parent)
"This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'overflow: hidden' and an effective width and height of: '#{width} x #{height}' pixels."
But, when using .should('be.visible'), we are stuck with parent properties failing child visibility check, even though we can actually see the child.
We need an alternate test.
The work-around
Ref jquery.js, this is one definition for visibility of the element itself (ignoring parent properties).
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}
so we might use that as the basis for an alternative.
describe('Testing select options', function() {
// Change this function if other criteria are required.
const isVisible = (elem) => !!(
elem.offsetWidth ||
elem.offsetHeight ||
elem.getClientRects().length
)
it('checks select option is visible', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
//cy.get('mdc-select-item').contains("ITEM1").should('be.visible') //this will fail
cy.get('mdc-select-item').contains("ITEM1").then (item1 => {
expect(isVisible(item1[0])).to.be.true
});
});
it('checks select option is not visible', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
cy.document().then(function(document) {
const item1 = document.querySelectorAll('mdc-select-item')[0]
item1.style.display = 'none'
cy.get('mdc-select-item').contains("ITEM1").then (item => {
expect(isVisible(item[0])).to.be.false
})
})
});
it('checks select option is clickable', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
//cy.get('mdc-select-item').contains("ITEM1").click() // this will fail
cy.get('mdc-select-item').contains("ITEM1").then (item1 => {
cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
expect(isVisible(item2[0])).to.be.true //visible when list is first dropped
});
item1.click();
cy.wait(500)
cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
expect(isVisible(item2[0])).to.be.false // not visible after item1 selected
});
});
})
Footnote - Use of 'then' (or 'each')
The way you normally use assertion in cypress is via command chains, which basically wraps the elements being tested and handles things like retry and waiting for DOM changes.
However, in this case we have a contradiction between the standard visibility assertion .should('be.visible') and the framework used to build the page, so we use then(fn) (ref) to get access to the unwrapped DOM. We can then apply our own version of the visibility test using stand jasmine expect syntax.
It turns out you can also use a function with .should(fn), this works as well
it('checks select option is visible - 2', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
cy.get('mdc-select-item').contains("ITEM1").should(item1 => {
expect(isVisible(item1[0])).to.be.true
});
});
Using should instead of then makes no difference in the visibility test, but note the should version can retry the function multiple times, so it can't be used with click test (for example).
From the docs,
What’s the difference between .then() and .should()/.and()?
Using .then() simply allows you to use the yielded subject in a callback function and should be used when you need to manipulate some values or do some actions.
When using a callback function with .should() or .and(), on the other hand, there is special logic to rerun the callback function until no assertions throw within it. You should be careful of side affects in a .should() or .and() callback function that you would not want performed multiple times.
You can also solve the problem by extending chai assertions, but the documentation for this isn't extensive, so potentially it's more work.

For convenience and reusability I had to mix the answer of Richard Matsen and Josef Biehler.
Define the command
// Access element whose parent is hidden
Cypress.Commands.add('isVisible', {
prevSubject: true
}, (subject) => {
const isVisible = (elem) => !!(
elem.offsetWidth ||
elem.offsetHeight ||
elem.getClientRects().length
)
expect(isVisible(subject[0])).to.be.true
})
You can now chain it from contains
describe('Testing select options', function() {
it('checks select option is visible', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
//cy.get('mdc-select-item').contains("ITEM1").should('be.visible') // this will fail
cy.get('mdc-select-item').contains("ITEM1").isVisible()
});
});

I came across this topic but was not able to run your example. So I tried a bit and my final solution is this. maybe someone other also needs this. Please note that I use typescript.
First: Define a custom command
Cypress.Commands.add("isVisible", { prevSubject: true}, (p1: string) => {
cy.get(p1).should((jq: JQuery<HTMLElement>) => {
if (!jq || jq.length === 0) {
//assert.fail(); seems that we must not assetr.fail() otherwise cypress will exit immediately
return;
}
const elem: HTMLElement = jq[0];
const doc: HTMLElement = document.documentElement;
const pageLeft: number = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
const pageTop: number = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
let elementLeft: number;
let elementTop: number;
let elementHeight: number;
let elementWidth: number;
const length: number = elem.getClientRects().length;
if (length > 0) {
// TODO: select correct border box!!
elementLeft = elem.getClientRects()[length - 1].left;
elementTop = elem.getClientRects()[length - 1].top;
elementWidth = elem.getClientRects()[length - 1].width;
elementHeight = elem.getClientRects()[length - 1].height;
}
const val: boolean = !!(
elementHeight > 0 &&
elementWidth > 0 &&
elem.getClientRects().length > 0 &&
elementLeft >= pageLeft &&
elementLeft <= window.outerWidth &&
elementTop >= pageTop &&
elementTop <= window.outerHeight
);
assert.isTrue(val);
});
});
Please note the TODO. In my case I was targeting a button which has two border boxes. The first with height and width 0. So i must select the second one. Please adjust this to your needs.
Second: Use it
cy.wrap("#some_id_or_other_locator").isVisible();

I could solve it by calling scrollIntoView after getting an element. See this answer.

A related problem:
Cypress was unable to find a tab element because it had a style of display: none (even though it was visible on the page)
My workaround:
Cypress could target the tab by matching text and clicking
cy.get("[data-cy=parent-element]").contains("target text").click();

To expand a bit the answer of BTL, if anyone faced an error - Property 'isVisible' does not exist on type 'Chainable<JQuery<HTMLElement>> in Typescript, following is what I added at the top of commands.ts in cypress to get away with it -
declare global {
namespace Cypress {
interface Chainable {
isVisible;
}
}
}
And may be replacing expect(isVisible(subject[0])).to.be.true with assert.True(isVisible(subject[0])); if you see any chai assertion error with expect and don't want to import it - as in Josef Biehler answer..

I was facing the same error that parent is hidden so Cypress is unable to click the child element, I handled this by handling the visibility of parent from hidden to visible by this code
cy.get('div.MuiDrawer-root.MuiDrawer-docked').invoke('css', 'overflow-x', 'visible').should('have.css', 'overflow-x', 'visible')
Note: You can apply any css you want in the invoke function like I have

Remove the flex and try. If it is solved then use the flex standard way

What's the React way to manipulate multiple elements according to event of another element?

I am confused about this for a long time.
Here is the case:
1, I create a table with multiple rows, in this way:
tableRow(basicInfoArray) {
return basicInfoArray.map((basicInfo, index) => (
<tr
key={basicInfo._id}
className={index % 2 === 0 ? 'alt' : null}
onClick={event => this.props.showDetail(basicInfo._id, event)}
>
<td>{basicInfo.mentee_id}</td>
<td>{`${basicInfo.firstname} ${basicInfo.lastname}`}</td>
<td>{basicInfo.othername}</td>
<td>{basicInfo.location}</td>
</tr>
));
}
As you can see, I bind a onClick event to each row. If the row is clicked, it will highlight, and there will be a drilldown to show detail information.
The question is here, after clicked on the backdrop(which bind a onClick event), the drilldown hide and I should remove the highlight effect from the row. Currently I use this way:
const highLightRows = document.getElementsByClassName('highLight');
for (let i = 0; i < highLightRows.length; i += 1) {
highLightRows[i].classList.toggle('highLight');
}
As the documents of React.js says that it's not a good practice to manipulate the dom directly, the UI change should be caused by the props/state change. Obviously it's not a good idea to bind a state for each row of the table because of the quantity. What's the best practice to do this?

It's important to keep in mind that react renders whatever you have in memory, in this case you have an array of items that you want to display in a table, when clicking any of those items you want to highlight the selected, right?
Well, for that you could define a property in each element of the array called selected, this property will be true/false depending on the user selection, then when rendering the row you will check for this property and if it's there you will assign thehighLight class or not. With this approach you will only need to worry to change the value of this property on memory and it will automatically get highlighted on the DOM.
Here's an example:
renderRow(info, index) {
const styles = [
index % 2 === 0 ? 'alt' : '',
info.selected = 'highLight' : '',
];
return (
<tr
key={info._id}
className={styles.join(' ')}
onClick={event => this.props.showDetail(info, event)}
>
<td>{basicInfo.mentee_id}</td>
<td>{`${info.firstname} ${info.lastname}`}</td>
<td>{info.othername}</td>
<td>{info.location}</td>
</tr>
);
}
renderContent(basicInfoArray) {
return basicInfoArray.map((basicInfo, index) => this.rendeRow(basicInfo, index));
}
Just make sure to set to true the selected property on showDetail function, and then set to false when you need to hide and remove the highLight class.
Good luck!

Update value of input type time (rerender) and focus on element again with React

In the spec for my app it says (developerified translation): When tabbing to a time element, it should update with the current time before you can change it.
So I have:
<input type="time" ref="myTimeEl" onFocus={this.handleTimeFocus.bind(null, 'myTimeEl')} name="myTimeEl" value={this.model.myTimeEl} id="myTimeEl" onChange={this.changes} />
Also relevant
changes(evt) {
let ch = {};
ch[evt.target.name] = evt.target.value;
this.model.set(ch);
},
handleTimeFocus(elName, event)
{
if (this.model[elName].length === 0) {
let set = {};
set[elName] = moment().format('HH:mm');
this.model.set(set);
}
},
The component will update when the model changes. This works well, except that the input loses focus when tabbing to it (because it gets rerendered).
Please note, if I would use an input type="text" this works out of the box. However I MUST use type="time".
So far I have tried a number of tricks trying to focus back on the element after the re-render but nothing seems to work.
I'm on react 0.14.6
Please help.

For this to work, you would need to:
Add a focusedElement parameter to the components state
In getInitialState(): set this parameter to null
In handleTimeFocus(): set focusElement to 'timeElem` or similar
Add a componentDidUpdate() lifecycle method, where you check if state has focusedElement set, and if so, focus the element - by applying a standard javascript focus() command.
That way, whenever your component updates (this is not needed in initial render), react checks if the element needs focus (by checking state), and if so, gives the element focus.

A solution for savages, but I would rather not
handleTimeFocus(elName, event)
{
if (this.model[elName].length === 0) {
let set = {};
set[elName] = moment().format('HH:mm');
this.model.set(set);
this.forceUpdate(function(){
event.target.select();
});
}
},

try using autoFocus attrribute.
follow the first 3 steps mention by wintvelt.
then in render function check if the element was focused, based on that set the autoFocus attribute to true or false.
example:
render(){
var isTimeFocused = this.state.focusedElement === 'timeElem' ? true : false;
return(
<input type="time" ref="myTimeEl" onFocus={this.handleTimeFocus.bind(null, 'myTimeEl')} name="myTimeEl" value={this.model.myTimeEl} id="myTimeEl" onChange={this.changes} autoFocus={isTimeFocused} />
);
}

Sort(a,b) does not work in Dojo.dnd.source

I try to sort the data after user drop an element on target container, here is the sorting event
......
var elements_container= dojo.dnd.Source("elements_container");
dojo.byId("elements_container").innerHTML = '';
... // add elements into container...
function sortDnD(){
// actually full class name is ".element dojoDndItem" to query
dojo.query(".element", dojo.byId("elements_container")).sort(
function( a,b ) {
// fire bug debugging cursor skip this section
var divs_a = dojo.query('> div.sequence', a)
var diValue_a = divs_a[0].innerHTML;
var divs_b = dojo.query('> div.sequence', b)
var diValue_b = divs_b[0].innerHTML;
return (divs_a == divs_b ? 0 : (a.divs_a > b.divs_b ? 1 : -1));
}
).forEach(// fire bug debugging cursor move to this section
function(a, idx) {
dojo.byId("element_container").insertBefore(a, dojo.byId("elements_container").childNodes[idx]);
});
}
dojo.byId("elements_container") is the dojo dnd source. I can guarantee that there are several elements in the containers...
I am using dojo1.6, interestingly when I debug by firebug, it looks the body inside of
function( a,b ) {
....
}
never executed, nor get any error message; the debug cursor move to .forEach just after function( a,b ) but the body of .forEach method runs without any problem. It looks the sort function give no response at all.
UPDATE
here is the code to invoke above sorting function
dojo.connect( source_container, "onDndDrop", function( source, nodes, copy, target ) {
nodes.forEach(function(node) {
sortDnD();
});
});
UPDATE2
After I change
dojo.query(".element", dojo.byId("elements_container")).sort(
to
dojo.query(".element", elements_container).sort(
Dojo gives:
TypeError: root.getElementsByClassName is not a function
...ag){var ret=_201(0,arr),te,x=0;var tret=root.getElementsByClassName(_235);while(...
and here is the dom data for elements_container
node: div#elements_container.container.dnd-list.dojoDndContainer.dojoDndSource.dojoDndTarget
childrenNodes: NodeList[div#dojoUnique23.element.dojoDndItem, div#dojoUnique24.element.dojoDndItem, .....

The reason why the callback in the sort is not being called is because your query selector returns an empty array (therefore you have nothing to sort on).
Use the following instead :
dojo.query(".element.dojoDndItem", "elements_container").sort(
Note that initially your selector was ".element .dojoDndItem" which means "find all nodes with class dojoDndItem that are children of nodes with class element". Here, both classes are in the same nodes, so you need to remove the space and make the selector be ".element.dojoDndItem".