From e84ae1487804c53fd83ebc1eda17215eeb5b5838 Mon Sep 17 00:00:00 2001 From: Arthur Xavier Date: Thu, 30 Apr 2020 11:11:11 -0300 Subject: [PATCH] Change direction of composition in propsModifier --- docs/Examples2/QRCode.example.purs | 8 ++++---- src/Lumi/Components.purs | 8 +++++++- src/Lumi/Components2/Clip.purs | 2 +- src/Lumi/Components2/Slat.purs | 6 +++--- src/Lumi/Styles/Border.purs | 6 +++--- src/Lumi/Styles/Button.purs | 24 ++++++++++++------------ src/Lumi/Styles/Clip.purs | 8 ++++---- src/Lumi/Styles/Link.purs | 2 +- src/Lumi/Styles/QRCode.purs | 2 +- src/Lumi/Styles/Slat.purs | 8 ++++---- 10 files changed, 40 insertions(+), 34 deletions(-) diff --git a/docs/Examples2/QRCode.example.purs b/docs/Examples2/QRCode.example.purs index c333ac49..9f7885b7 100644 --- a/docs/Examples2/QRCode.example.purs +++ b/docs/Examples2/QRCode.example.purs @@ -48,13 +48,13 @@ qrcodeExample = { qrcode, url } <- useQRCode ECLLow props.value pure $ box - <<< Box._align Center + $ Box._align Center $ _ { content = [ qrcode - <<< Border.border - >>> Border._round - >>> S.styleModifier_ + $ Border.border + $ Border._round + $ S.styleModifier_ ( S.css { padding: S.int 16 , width: S.int 140 diff --git a/src/Lumi/Components.purs b/src/Lumi/Components.purs index 5371e37b..db154228 100644 --- a/src/Lumi/Components.purs +++ b/src/Lumi/Components.purs @@ -40,8 +40,14 @@ type PropsModifier props (LumiProps props -> LumiProps props) -- | Lift a `props -> props` function for composition with other `PropsModifier` functions. +-- | +-- | The composition of `PropsModifier`s should be read like that of an optic, +-- | that is, from left to right. As an example, if you have props modifiers +-- | `a` and `b`, where both modify the same property, their composition +-- | `a <<< b` favours the modifications in `b`, as it first applies `a`, and +-- | then `b`. propsModifier :: forall props. (LumiProps props -> LumiProps props) -> PropsModifier props -propsModifier = (>>>) +propsModifier = (<<<) -- | Create a `LumiComponent` from a name, set of defaults, and a render function. -- | The render function behaves the same as in the [hooks API](https://github.com/spicydonuts/purescript-react-basic-hooks/blob/master/examples/counter/src/Counter.purs#L12). diff --git a/src/Lumi/Components2/Clip.purs b/src/Lumi/Components2/Clip.purs index e8e186fc..fbfe0e8b 100644 --- a/src/Lumi/Components2/Clip.purs +++ b/src/Lumi/Components2/Clip.purs @@ -72,7 +72,7 @@ clip = , css: toCSS theme props $ Styles.Box.box - >>> Styles.Box._justify Center + <<< Styles.Box._justify Center , ref , children: props.content } diff --git a/src/Lumi/Components2/Slat.purs b/src/Lumi/Components2/Slat.purs index 3c1a7ba0..e8b12d87 100644 --- a/src/Lumi/Components2/Slat.purs +++ b/src/Lumi/Components2/Slat.purs @@ -72,11 +72,11 @@ slat = slatStyle = Styles.Slat.Hidden.slat - >>> styleModifier_ (E.css { appearance: E.none }) + <<< styleModifier_ (E.css { appearance: E.none }) slatStyleInteractive = slatStyle - >>> Styles.Slat.Hidden._interactive + <<< Styles.Slat.Hidden._interactive _interactive :: SlatInteraction -> PropsModifier SlatProps _interactive interaction = @@ -91,7 +91,7 @@ _interactiveBackground interaction = _ { interaction = Just interaction } - >>> styleModifier \(LumiTheme theme) -> + <<< styleModifier \(LumiTheme theme) -> E.css { "&:hover": E.nested diff --git a/src/Lumi/Styles/Border.purs b/src/Lumi/Styles/Border.purs index c01f77fd..239f7362 100644 --- a/src/Lumi/Styles/Border.purs +++ b/src/Lumi/Styles/Border.purs @@ -13,7 +13,7 @@ import React.Basic.Emotion (color, css, int, nested, none, prop, str) border :: forall props. PropsModifier props border = box - >>> styleModifier \(LumiTheme theme) -> + <<< styleModifier \(LumiTheme theme) -> css { label: str "border" , borderWidth: int 1 @@ -44,8 +44,8 @@ _topBottom = _interactive :: forall props. PropsModifier props _interactive = Box._interactive - >>> Box._focusable - >>> styleModifier \(LumiTheme theme) -> + <<< Box._focusable + <<< styleModifier \(LumiTheme theme) -> css { "&:hover": nested diff --git a/src/Lumi/Styles/Button.purs b/src/Lumi/Styles/Button.purs index f05edc1f..ac916bda 100644 --- a/src/Lumi/Styles/Button.purs +++ b/src/Lumi/Styles/Button.purs @@ -34,7 +34,7 @@ button :: button colo kind state size = case kind of Primary -> buttonStyle - >>> styleModifier \theme@(LumiTheme { colors }) -> + <<< styleModifier \theme@(LumiTheme { colors }) -> let { hue, hueDarker, hueDarkest, hueDisabled, white } = makeColorShades @@ -79,7 +79,7 @@ button colo kind state size = case kind of ] Secondary -> buttonStyle - >>> styleModifier \theme@(LumiTheme { colors }) -> + <<< styleModifier \theme@(LumiTheme { colors }) -> let { hueDarker, hueDarkest, grey1, grey2, white, black } = makeColorShades @@ -126,7 +126,7 @@ button colo kind state size = case kind of ] Link -> Link.link - >>> styleModifier \(LumiTheme { colors }) -> + <<< styleModifier \(LumiTheme { colors }) -> let { hueDisabled } = makeColorShades @@ -163,14 +163,14 @@ button colo kind state size = case kind of where buttonStyle = box - >>> _row - >>> _align Center - >>> _justify Center - >>> case state of + <<< _row + <<< _align Center + <<< _justify Center + <<< case state of Disabled -> identity Loading -> identity - Enabled -> _interactive >>> _focusable - >>> styleModifier_ + Enabled -> _interactive <<< _focusable + <<< styleModifier_ ( css { label: str "button" , appearance: none @@ -274,9 +274,9 @@ button colo kind state size = case kind of buttonGroup :: forall props. Boolean -> PropsModifier props buttonGroup joined = box - >>> _row - >>> styleModifier_ (css { label: str "buttonGroup" }) - >>> styleModifier_ + <<< _row + <<< styleModifier_ (css { label: str "buttonGroup" }) + <<< styleModifier_ if not joined then css { label: str "notJoined" diff --git a/src/Lumi/Styles/Clip.purs b/src/Lumi/Styles/Clip.purs index 6fc9f908..cea9a7d9 100644 --- a/src/Lumi/Styles/Clip.purs +++ b/src/Lumi/Styles/Clip.purs @@ -11,10 +11,10 @@ import React.Basic.Emotion (color, css) clip :: forall props. PropsModifier props clip = border - >>> _round - >>> _row - >>> _justify SpaceBetween - >>> styleModifier \(LumiTheme { colors }) -> + <<< _round + <<< _row + <<< _justify SpaceBetween + <<< styleModifier \(LumiTheme { colors }) -> css { borderColor: color colors.black5 , backgroundColor: color colors.black5 diff --git a/src/Lumi/Styles/Link.purs b/src/Lumi/Styles/Link.purs index 22b7f313..1d3bb197 100644 --- a/src/Lumi/Styles/Link.purs +++ b/src/Lumi/Styles/Link.purs @@ -10,7 +10,7 @@ import React.Basic.Emotion (css) link :: forall props. PropsModifier props link = box - >>> styleModifier \(LumiTheme theme) -> + <<< styleModifier \(LumiTheme theme) -> css { color: color theme.colors.primary , textDecoration: none diff --git a/src/Lumi/Styles/QRCode.purs b/src/Lumi/Styles/QRCode.purs index 3d8176be..8a066f3e 100644 --- a/src/Lumi/Styles/QRCode.purs +++ b/src/Lumi/Styles/QRCode.purs @@ -9,7 +9,7 @@ import React.Basic.Emotion (css, str) qrcode :: forall props. PropsModifier props qrcode = box - >>> styleModifier_ + <<< styleModifier_ ( css { label: str "qrcode" } diff --git a/src/Lumi/Styles/Slat.purs b/src/Lumi/Styles/Slat.purs index 0e9a01b2..d5ad42a5 100644 --- a/src/Lumi/Styles/Slat.purs +++ b/src/Lumi/Styles/Slat.purs @@ -15,10 +15,10 @@ import React.Basic.Emotion (css, str, unset) slat :: forall props. PropsModifier props slat = border - >>> _row - >>> _align Center - >>> _justify SpaceBetween - >>> styleModifier_ + <<< _row + <<< _align Center + <<< _justify SpaceBetween + <<< styleModifier_ ( css { label: str "slat" , flex: str "0 0 content"