-
-
Notifications
You must be signed in to change notification settings - Fork 130
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WIP] fix(Column): minResizeWidth
#535
base: master
Are you sure you want to change the base?
Conversation
Keep API consistent without breaking changes by allowing `minResizeWidth` to take a number (in px) or a string (like the `width` property) instead of just a number (in px).
id: 'ember-light-table.classes.Column' | ||
}); | ||
} | ||
this.set('_minResizeWidth', Number(quantity)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return this.set('_minResizeWidth', Number(quantity));
I wrote a unit test for the work, but I am unsatisfied with it because I had to do
col.get('_minResizeWidth')
and notcol.get('minResizeWidth')
because the latter was returning undefined. Any idea why that could be?
This is why. When using the computed({ get(k) { ... }, set(k , v) { ... } })
form, the setter method needs to return a value as well, as per the API docs:
The
set
function should accept two parameters,key
andvalue
. The value returned fromset
will be the new value of the property.
By prepending return
to this.set(k, v)
you return the value passed to it, since this.set(k, v)
returns v
.
} | ||
this.set('_minResizeWidth', Number(quantity)); | ||
} else { | ||
this.set('_minResizeWidth', value); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
return this.set('_minResizeWidth', value);
Also, what about other non-string values? What if I pass NaN
, {}
, false
, null
, ...? I think we should handle these cases a bit more explicitly and maybe even throw assertions / TypeError
s for some scenarios.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@buschtoens The only concern I have about throwing assertions for TypeError
s is that it could cause people who are incorrectly using minResizeWidth
currently to start receiving an exception when they did not before, and depending on how well they handle errors in their app, this could cause them problems. Now you can argue that since they are already using it incorrectly, this is actually better, but it is something to think about.
I plan on making the suggested changes this upcoming week.
*/ | ||
minResizeWidth: 0, | ||
minResizeWidth: computed({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing dependent key _minResizeWidth
.
In practice this won't cause any problems yet, since _minResizeWidth
is private API and exclusively managed by the minResizeWidth
computed property. However, that could possibly change in the future and the developer making that change then might not remember to add that key.
return this.get('_minResizeWidth'); | ||
}, | ||
set(key, value) { | ||
if (typeOf(value) === 'string') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
typeof value === 'string'
is a bit faster. The only advantage of typeOf(item)
is that it correctly detects String
object instances as string
, i.e. typeOf(new String('foo')) === 'string'
.
Personally idc a lot about this scenario, but that just might be because this has never bitten me yet. Keep this line whatever you feel the most comfortable with. 😉
if (units !== 'px') { | ||
warn('`value` attribute is interpreted as px regardless of provided units', { | ||
id: 'ember-light-table.classes.Column' | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const [, quantity, units] = value.match(/^\s*(\d+)([a-z]+|%)?\s*$/) || [];
assert(
`'minResizeWidth' can only interpret px unit values. You passed '${quantity}${unit}'.`,
isEmpty(units) || units === 'px'
);
Being more restrictive here can help prevent subtle bugs. We should throw an assertion here, since 1rem
would be interpreted as 1px
in the original code, which does not make sense.
It really nags me, that we can't get other units to work... 🙁 But at least supporting |
Closes #534. I made the change on the
Column
class rather than in thelt-column-resizer
component. I wrote a unit test for the work, but I am unsatisfied with it because I had to docol.get('_minResizeWidth')
and notcol.get('minResizeWidth')
because the latter was returning undefined. Any idea why that could be?