Проверьте, установлена ​​ли минимальная ширина

Question

Я создаю адаптивный макет, используя Tachyons медиа-запросы:

render() {
  const { UI } = this.props.state

  const containerStyle = {
    //right: `${UI.isMenuOpened ? 0 : `calc(-16rem + 4rem)`}`, // if min-width is setted
    right: `${UI.isMenuOpened ? 0 : `calc(-40% + 4rem)`}`, // if min-width is not setted
  }

  return (
    <div
      className="bg-gray w-40 min-w5 h-100 absolute o-50 flex transition"
      style={containerStyle}
    >
     //...
    </div>
  )
}

Как видите, я хочу, чтобы ширина div менялась: 40% и min-width = w5 (16rem). Проблема в том, что я не знаю, как изменить значение right в containerStyle. В calc(A + B) есть A, который представляет ширину div, и B, который представляет отступ (всегда 4rem). Мне нужно изменить A: это будет 40%, если min-width не установлено, и w5, если установлено min-width.

Как я могу это сделать?

Answer 1

Поскольку значение по умолчанию для min-width равно 0, просто проверьте это с помощью принудительного приведения логического типа (0 == false):

right: `${UI.isMenuOpened ? 0 : `calc(${elem.style.minWidth ? "-40%" : "w5"} + 4rem)`}`