Skip to content
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

The Transfer's lists style could be controlled respectively #11119

Open
JackieLs opened this issue Jul 2, 2018 · 3 comments

Comments

@JackieLs
Copy link
Contributor

commented Jul 2, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

We have a case like this: after the onChange event emit, we will validate the targetKeys , if the validation has error, we hope there will be a red border at the outside of the targetKeys list, and the error message under the targetKeys list, just like the form error style.

What does the proposed API look like?

Maybe the listStyle prop could be an array within two items: [ leftTransferListStyleObject: React.CSSProperties, rightTransferListStyleObject: React.CSSProperties ] or [ leftTransferListClassName: String, rightTransferListClassName: String ]

@JandersonConstantino

This comment has been minimized.

Copy link

commented Aug 21, 2019

Hi,
I'm trying to create a type like as:

type ListStyle = {
  leftTransferListStyleObject: React.CSSProperties;
  rightTransferListStyleObject: React.CSSProperties;
}

export interface TransferProps {
  ...
  listStyle?: ListStyle | React.CSSProperties;
  ...
}

but when I read the listStyle props happens an error in typescript:

  const rightListStyle = listStyle && listStyle.rightTransferListStyleObject
          ? listStyle.rightTransferListStyleObject
          : listStyle

image

Someone know why this happens?

@darcien

This comment has been minimized.

Copy link

commented Aug 28, 2019

image

Someone know why this happens?

The error says it, "Property 'leftTransferListStyleObject' does not exist on type 'CSSProperties'."

Since listStyle could be React.CSSProperties, and React.CSSProperties doesn't have the leftTransferListStyleObject property, TS throws an error.

I think you can fix the error by refining the type of listType before accessing it's property.
e.g. using in instead of accessing the property directly

const rightListStyle = listStyle && 'rightTransferListStyleObject' in listStyle
    ? listStyle.rightTransferListStyleObject
    : listStyle
@JandersonConstantino

This comment has been minimized.

Copy link

commented Aug 29, 2019

@darcien Thank you, this fixes my error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.