Add Clip component (#116)

* Add Clip component

* Clip hook and browser support

* Add clip example description

Author: maddie927

docs/App.jsx

@@ -116,9 +116,14 @@ const componentLoaders = [
   "Wizard"
 ].map(fromComponentPath);
 
-const componentv2Loaders = ["Box", "Button", "ButtonGroup", "Link", "Slat"].map(
-  fromComponentPathv2
-);
+const componentv2Loaders = [
+  "Box",
+  "Button",
+  "ButtonGroup",
+  "Clip",
+  "Link",
+  "Slat"
+].map(fromComponentPathv2);
 
 const App = () => {
   const [menuOpen, setMenuOpen] = useState(false);

docs/Examples2/Clip.example.purs

@@ -0,0 +1,25 @@
+module Lumi.Components2.Examples.Clip where
+
+import Prelude
+import Lumi.Components (lumiElement)
+import Lumi.Components.Example (example)
+import Lumi.Components.Spacing (Space(..), vspace)
+import Lumi.Components.Text (body_, p_)
+import Lumi.Components2.Box (box)
+import Lumi.Components2.Clip (clip)
+import React.Basic (JSX)
+
+docs :: JSX
+docs =
+  lumiElement box
+    _
+      { content =
+        [ p_ "The Clip component wraps the provided content with a grey border and a \"Copy\" button, which copies the text content into the system clipboard."
+        , p_ "If clipboard access is not allowed or not supported the text will be left highlighted, allowing the user to press ctrl+c manually. Only the plain text content is copied, not the HTML."
+        , vspace S24
+        , example
+            $ lumiElement clip
+            $ _ { content = [ body_ "[email protected]" ] }
+        , p_ "The Clip behavior is also available as a React hook."
+        ]
+      }

src/Lumi/Components2/Clip.js

@@ -0,0 +1,35 @@
+"use strict";
+
+const selectNodeContents = node => {
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  var sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+  return sel;
+};
+
+exports.copyNodeContents = (success, failure, node) => {
+  try {
+    const sel = selectNodeContents(node);
+    if (window.navigator.clipboard != null) {
+      window.navigator.clipboard
+        .writeText(sel.toString())
+        .then(() => {
+          sel.removeAllRanges();
+        })
+        .then(success, failure);
+      return;
+    } else {
+      const copyResult = window.document.execCommand("copy");
+      if (copyResult) {
+        sel.removeAllRanges();
+        return success();
+      } else {
+        return failure(new Error("Failed to copy"));
+      }
+    }
+  } catch (e) {
+    failure(e);
+  }
+};

src/Lumi/Components2/Clip.purs

@@ -0,0 +1,112 @@
+module Lumi.Components2.Clip where
+
+import Prelude
+import Data.Foldable (for_)
+import Data.Monoid (guard)
+import Data.Newtype (class Newtype)
+import Data.Nullable (Nullable)
+import Data.Nullable as Nullable
+import Effect (Effect)
+import Effect.Aff (Error, Milliseconds(..), delay, message)
+import Effect.Class (liftEffect)
+import Effect.Console as Console
+import Effect.Uncurried (EffectFn1, EffectFn3, mkEffectFn1, runEffectFn3)
+import Effect.Unsafe (unsafePerformEffect)
+import Lumi.Components (LumiComponent, lumiComponent, lumiElement)
+import Lumi.Components.Spacing (Space(..))
+import Lumi.Components2.Box (box)
+import Lumi.Components2.Button (_linkStyle, button)
+import Lumi.Styles (styleModifier_, toCSS)
+import Lumi.Styles.Box (FlexAlign(..), _justify)
+import Lumi.Styles.Box as Styles.Box
+import Lumi.Styles.Clip as Styles.Clip
+import Lumi.Styles.Theme (LumiTheme(..), useTheme)
+import React.Basic.DOM as R
+import React.Basic.Emotion as E
+import React.Basic.Hooks (Hook, JSX, Ref, UseState, coerceHook, readRefMaybe, useRef, useState, (/\), type (/\))
+import React.Basic.Hooks as React
+import React.Basic.Hooks.Aff (UseAff, useAff)
+import React.Basic.Hooks.ResetToken (ResetToken, UseResetToken, useResetToken)
+import Web.DOM (Node)
+
+type ClipProps
+  = ( content :: Array JSX
+    )
+
+clip :: LumiComponent ClipProps
+clip =
+  unsafePerformEffect do
+    lumiComponent "Clip" defaults \props -> React.do
+      theme@(LumiTheme { colors }) <- useTheme
+      ref <- useRef Nullable.null
+      { copied, copy } <- useClip ref
+      let
+        copyButton =
+          lumiElement button
+            $ _linkStyle
+            $ styleModifier_
+                ( E.merge
+                    [ E.css
+                        { marginLeft: E.prop S16
+                        , lineHeight: E.str "12px"
+                        }
+                    , guard copied do
+                        E.css
+                          { color: E.color colors.black1
+                          , "&:hover": E.nested $ E.css { textDecoration: E.none }
+                          }
+                    ]
+                )
+            $ _
+                { content = [ R.text if copied then "Copied!" else "Copy" ]
+                , onPress = copy
+                }
+      pure
+        $ E.element R.div'
+            { className: props.className
+            , css: toCSS theme props Styles.Clip.clip
+            , children:
+              [ E.element R.div'
+                  { className: ""
+                  , css:
+                    toCSS theme props
+                      $ Styles.Box.box
+                      >>> Styles.Box._justify Center
+                  , ref
+                  , children: props.content
+                  }
+              , lumiElement box
+                  $ _justify Center
+                  $ _ { content = [ copyButton ] }
+              ]
+            }
+  where
+  defaults = { content: [] }
+
+newtype UseClip hooks
+  = UseClip (UseAff (ResetToken /\ Boolean) Unit (UseState Boolean (UseResetToken hooks)))
+
+derive instance ntUseClip :: Newtype (UseClip hooks) _
+
+useClip :: Ref (Nullable Node) -> Hook UseClip { copied :: Boolean, copy :: Effect Unit }
+useClip nodeRef =
+  coerceHook React.do
+    token /\ resetToken <- useResetToken
+    copied /\ setCopied <- useState false
+    let
+      copy = do
+        node <- readRefMaybe nodeRef
+        for_ node
+          $ runEffectFn3 copyNodeContents
+              ( do
+                  setCopied \_ -> true
+                  resetToken
+              )
+              (mkEffectFn1 $ Console.error <<< message)
+    useAff (token /\ copied) do
+      when copied do
+        delay $ Milliseconds 5000.0
+        liftEffect $ setCopied \_ -> false
+    pure { copied, copy }
+
+foreign import copyNodeContents :: EffectFn3 (Effect Unit) (EffectFn1 Error Unit) Node Unit

src/Lumi/Styles/Clip.purs

@@ -0,0 +1,21 @@
+module Lumi.Styles.Clip where
+
+import Prelude
+import Lumi.Components (PropsModifier)
+import Lumi.Styles (styleModifier)
+import Lumi.Styles.Border (_round, border)
+import Lumi.Styles.Box (FlexAlign(..), _justify, _row)
+import Lumi.Styles.Theme (LumiTheme(..))
+import React.Basic.Emotion (color, css)
+
+clip :: forall props. PropsModifier props
+clip =
+  border
+    >>> _round
+    >>> _row
+    >>> _justify SpaceBetween
+    >>> styleModifier \(LumiTheme { colors }) ->
+        css
+          { borderColor: color colors.black5
+          , backgroundColor: color colors.black5
+          }