From 3e26ccffbfe83acde9714afde0af8245e7b83c3b Mon Sep 17 00:00:00 2001 From: Viktor Podzigun Date: Tue, 13 Aug 2019 13:13:36 +0200 Subject: [PATCH] Updated YesNoPopup, YesNoCancelPopup to the latest react features --- .../client/ui/popup/YesNoCancelPopup.scala | 82 ++++++++----------- .../scommons/client/ui/popup/YesNoPopup.scala | 78 ++++++++---------- .../ui/popup/YesNoCancelPopupSpec.scala | 23 ------ .../client/ui/popup/YesNoPopupSpec.scala | 23 ------ 4 files changed, 68 insertions(+), 138 deletions(-) diff --git a/ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala index a883fb5..09962be 100644 --- a/ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala +++ b/ui/src/main/scala/scommons/client/ui/popup/YesNoCancelPopup.scala @@ -1,12 +1,10 @@ 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, @@ -14,50 +12,40 @@ case class YesNoCancelPopupProps(show: Boolean, 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) ) - } - ) + ) + } } diff --git a/ui/src/main/scala/scommons/client/ui/popup/YesNoPopup.scala b/ui/src/main/scala/scommons/client/ui/popup/YesNoPopup.scala index 5d3bb93..069a13c 100644 --- a/ui/src/main/scala/scommons/client/ui/popup/YesNoPopup.scala +++ b/ui/src/main/scala/scommons/client/ui/popup/YesNoPopup.scala @@ -1,12 +1,10 @@ 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, @@ -14,49 +12,39 @@ case class YesNoPopupProps(show: Boolean, 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) ) - } - ) + ) + } } diff --git a/ui/src/test/scala/scommons/client/ui/popup/YesNoCancelPopupSpec.scala b/ui/src/test/scala/scommons/client/ui/popup/YesNoCancelPopupSpec.scala index 9922bcd..988eb61 100644 --- a/ui/src/test/scala/scommons/client/ui/popup/YesNoCancelPopupSpec.scala +++ b/ui/src/test/scala/scommons/client/ui/popup/YesNoCancelPopupSpec.scala @@ -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, diff --git a/ui/src/test/scala/scommons/client/ui/popup/YesNoPopupSpec.scala b/ui/src/test/scala/scommons/client/ui/popup/YesNoPopupSpec.scala index ec2c187..5b4b1af 100644 --- a/ui/src/test/scala/scommons/client/ui/popup/YesNoPopupSpec.scala +++ b/ui/src/test/scala/scommons/client/ui/popup/YesNoPopupSpec.scala @@ -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,