0
\$\begingroup\$

I'm new to typescript and I'm trying to migrate this styled component from JS to TS but I'm stuck with types and calling of methods inside css helper.

JS File to be converted: https://gist.github.com/jhefreyzz/5862b34eaa293bd5d981802093392ef1

Converted File: https://gist.github.com/jhefreyzz/617f4d3dcebd130f85184370442fa3ee

There are no more compile errors due to hacky way of defining types.

I'm not sure for the TS version of the following lines.

const getVariantStyle = ({ variant, iconButton }) => {
  if (iconButton) {
    return null
  }
  const existVariant = variants.find(({ name }) => name === variant)
  return existVariant ? existVariant.style : null
}

const getSizeStyle = ({ size }) => {
  const existSize = sizes.find(({ name }) => name === size)
  return existSize ? existSize.style : null
}

const getIconButtonStyles = ({ iconButton }) => {
  if (!iconButton) {
    return null
  }

  return css`
    min-width: 32px;
    height: 32px;
    padding: ${ifNotProp('hasIconText', 0)};
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    &:hover,
    &:focus {
      background: rgba(255, 255, 255, 0.4);
    }
    &:active {
      background: rgba(255, 255, 255, 0.6);
      transition: background 0s ease;
    }
  `
}

const styles = css`
  border-radius: 3px;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease,
    color 0.3s ease;

  &[disabled] {
    pointer-events: none;
    color: #a5acb0;
    background: #f9f9f9;
    box-shadow: none;
    transition: all 50ms ease;
  }

  ${getVariantStyle};
  ${getSizeStyle};
  ${getIconButtonStyles};
`

const StyledButton = styled.button`
  ${styles};
`

I'm struggling on how to handle this typing issue.

\$\endgroup\$
  • \$\begingroup\$ You should include the code you want to be reviewed in the question. It's hard to find which TS code you actually want to review, the gist is rather large and does not syntax highlight Typescript (you should save it as .ts file, or change the syntax highlighting options if possible). \$\endgroup\$ – purple Dec 9 '19 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.