Skip to content

Commit

Permalink
Updated YesNoPopup, YesNoCancelPopup to the latest react features
Browse files Browse the repository at this point in the history
  • Loading branch information
@viktor-podzigun
viktor-podzigun committed Aug 13, 2019
1 parent 5d67bfb commit 3e26ccf
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 138 deletions.
82 changes: 35 additions & 47 deletions ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,51 @@
package scommons.client.ui.popup

import io.github.shogowada.scalajs.reactjs.React
import io.github.shogowada.scalajs.reactjs.VirtualDOM._
import io.github.shogowada.scalajs.reactjs.classes.ReactClass
import scommons.client.ui.{Buttons, SimpleButtonData}
import scommons.client.ui.popup.YesNoCancelOption._
import scommons.client.ui.{Buttons, SimpleButtonData}
import scommons.client.util.ActionsData
import scommons.react.UiComponent
import scommons.react._
import scommons.react.hooks._

case class YesNoCancelPopupProps(show: Boolean,
message: String,
onSelect: YesNoCancelOption => Unit,
selected: YesNoCancelOption = Yes,
image: Option[String] = None)

object YesNoCancelPopup extends UiComponent[YesNoCancelPopupProps] {
object YesNoCancelPopup extends FunctionComponent[YesNoCancelPopupProps] {

private case class YesNoCancelPopupState(opened: Boolean = false)
protected def render(compProps: Props): ReactElement = {
val (opened, setOpened) = useState(false)

val props = compProps.wrapped

protected def create(): ReactClass = React.createClass[PropsType, YesNoCancelPopupState](
getInitialState = { _ =>
YesNoCancelPopupState()
},
componentWillReceiveProps = { (self, nextProps) =>
val props = nextProps.wrapped
if (self.props.wrapped != props) {
self.setState(_.copy(opened = false))
<(Modal())(^.wrapped := ModalProps(
show = props.show,
header = None,
buttons = List(
SimpleButtonData(Yes.command, "Yes", props.selected == Yes),
SimpleButtonData(No.command, "No", props.selected == No),
Buttons.CANCEL.copy(command = Cancel.command, primary = props.selected == Cancel)
),
actions = ActionsData(Set(Yes.command, No.command, Cancel.command), _ => {
case Yes.command => props.onSelect(Yes)
case No.command => props.onSelect(No)
case _ => props.onSelect(Cancel)
},
if (opened) Some(props.selected.command)
else None
),
onClose = () => props.onSelect(Cancel),
onOpen = { () =>
setOpened(true)
}
},
render = { self =>
val props = self.props.wrapped

<(Modal())(^.wrapped := ModalProps(props.show,
None,
List(
SimpleButtonData(Yes.command, "Yes", props.selected == Yes),
SimpleButtonData(No.command, "No", props.selected == No),
Buttons.CANCEL.copy(command = Cancel.command, primary = props.selected == Cancel)
),
ActionsData(Set(Yes.command, No.command, Cancel.command), _ => {
case Yes.command => props.onSelect(Yes)
case No.command => props.onSelect(No)
case _ => props.onSelect(Cancel)
},
if (self.state.opened) Some(props.selected.command)
else None
),
onClose = () => props.onSelect(Cancel),
onOpen = { () =>
self.setState(_.copy(opened = true))
}
))(
<.div(^.className := "row-fluid")(
props.image.map { image =>
<.img(^.className := image, ^.src := "")()
},
<.p()(props.message)
)
))(
<.div(^.className := "row-fluid")(
props.image.map { image =>
<.img(^.className := image, ^.src := "")()
},
<.p()(props.message)
)
}
)
)
}
}
78 changes: 33 additions & 45 deletions ui/src/main/scala/scommons/client/ui/popup/YesNoPopup.scala
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,50 @@
package scommons.client.ui.popup

import io.github.shogowada.scalajs.reactjs.React
import io.github.shogowada.scalajs.reactjs.VirtualDOM._
import io.github.shogowada.scalajs.reactjs.classes.ReactClass
import scommons.client.ui.SimpleButtonData
import scommons.client.ui.popup.YesNoCancelOption._
import scommons.client.util.ActionsData
import scommons.react.UiComponent
import scommons.react._
import scommons.react.hooks._

case class YesNoPopupProps(show: Boolean,
message: String,
onSelect: YesNoCancelOption => Unit,
selected: YesNoCancelOption = Yes,
image: Option[String] = None)

object YesNoPopup extends UiComponent[YesNoPopupProps] {
object YesNoPopup extends FunctionComponent[YesNoPopupProps] {

private case class YesNoPopupState(opened: Boolean = false)
protected def render(compProps: Props): ReactElement = {
val (opened, setOpened) = useState(false)

val props = compProps.wrapped

protected def create(): ReactClass = React.createClass[PropsType, YesNoPopupState](
getInitialState = { _ =>
YesNoPopupState()
},
componentWillReceiveProps = { (self, nextProps) =>
val props = nextProps.wrapped
if (self.props.wrapped != props) {
self.setState(_.copy(opened = false))
<(Modal())(^.wrapped := ModalProps(
show = props.show,
header = None,
buttons = List(
SimpleButtonData(Yes.command, "Yes", props.selected == Yes),
SimpleButtonData(No.command, "No", props.selected == No)
),
actions = ActionsData(Set(Yes.command, No.command), _ => {
case Yes.command => props.onSelect(Yes)
case No.command => props.onSelect(No)
},
if (opened) Some(props.selected.command)
else None
),
onClose = () => (),
closable = false,
onOpen = { () =>
setOpened(true)
}
},
render = { self =>
val props = self.props.wrapped

<(Modal())(^.wrapped := ModalProps(props.show,
None,
List(
SimpleButtonData(Yes.command, "Yes", props.selected == Yes),
SimpleButtonData(No.command, "No", props.selected == No)
),
ActionsData(Set(Yes.command, No.command), _ => {
case Yes.command => props.onSelect(Yes)
case No.command => props.onSelect(No)
},
if (self.state.opened) Some(props.selected.command)
else None
),
onClose = () => (),
closable = false,
onOpen = { () =>
self.setState(_.copy(opened = true))
}
))(
<.div(^.className := "row-fluid")(
props.image.map { image =>
<.img(^.className := image, ^.src := "")()
},
<.p()(props.message)
)
))(
<.div(^.className := "row-fluid")(
props.image.map { image =>
<.img(^.className := image, ^.src := "")()
},
<.p()(props.message)
)
}
)
)
}
}
23 changes: 0 additions & 23 deletions ui/src/test/scala/scommons/client/ui/popup/YesNoCancelPopupSpec.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,29 +107,6 @@ class YesNoCancelPopupSpec extends TestSpec with ShallowRendererUtils {
updatedModalProps.actions.focusedCommand shouldBe Some(props.selected.command)
}

it should "reset focusedCommand when componentWillReceiveProps" in {
//given
val prevProps = getYesNoCancelPopupProps("Test message")
val renderer = createRenderer()
renderer.render(<(YesNoCancelPopup())(^.wrapped := prevProps)())
val comp = renderer.getRenderOutput()
val modalProps = findComponentProps(comp, Modal)
modalProps.actions.focusedCommand shouldBe None
modalProps.onOpen()
val compV2 = renderer.getRenderOutput()
val modalPropsV2 = findComponentProps(compV2, Modal)
modalPropsV2.actions.focusedCommand shouldBe Some(prevProps.selected.command)
val props = getYesNoCancelPopupProps("New message")

//when
renderer.render(<(YesNoCancelPopup())(^.wrapped := props)())

//then
val compV3 = renderer.getRenderOutput()
val modalPropsV3 = findComponentProps(compV3, Modal)
modalPropsV3.actions.focusedCommand shouldBe None
}

private def getYesNoCancelPopupProps(message: String,
onSelect: YesNoCancelOption => Unit = _ => (),
selected: YesNoCancelOption = Yes,
Expand Down
23 changes: 0 additions & 23 deletions ui/src/test/scala/scommons/client/ui/popup/YesNoPopupSpec.scala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,29 +79,6 @@ class YesNoPopupSpec extends TestSpec with ShallowRendererUtils {
updatedModalProps.actions.focusedCommand shouldBe Some(props.selected.command)
}

it should "reset focusedCommand when componentWillReceiveProps" in {
//given
val prevProps = getYesNoPopupProps("Test message")
val renderer = createRenderer()
renderer.render(<(YesNoPopup())(^.wrapped := prevProps)())
val comp = renderer.getRenderOutput()
val modalProps = findComponentProps(comp, Modal)
modalProps.actions.focusedCommand shouldBe None
modalProps.onOpen()
val compV2 = renderer.getRenderOutput()
val modalPropsV2 = findComponentProps(compV2, Modal)
modalPropsV2.actions.focusedCommand shouldBe Some(prevProps.selected.command)
val props = getYesNoPopupProps("New message")

//when
renderer.render(<(YesNoPopup())(^.wrapped := props)())

//then
val compV3 = renderer.getRenderOutput()
val modalPropsV3 = findComponentProps(compV3, Modal)
modalPropsV3.actions.focusedCommand shouldBe None
}

private def getYesNoPopupProps(message: String,
onSelect: YesNoCancelOption => Unit = _ => (),
selected: YesNoCancelOption = Yes,
Expand Down

0 comments on commit 3e26ccf

Please sign in to comment.