rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-09-11 21:38:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve range

Browse Source
This commit is contained in:
Mark Eibes 2022-07-11 15:10:20 +02:00
parent e3df4432ca
commit 9e7a86c2c5
6 changed files with 58 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/React/Basic/SyntaxHighlighter/Component.js
View File

@ -145,5 +145,5 @@ var purescript = function (hljs) {
]
}
}
Light.registerLanguage("puresscript", purescript)
Light.registerLanguage("purescript", purescript)
export const syntaxHighlighter = Light

16
src/Yoga/Block/Atom/Range/Style.purs
View File

@ -4,13 +4,13 @@ import Yoga.Prelude.Style
import Data.Interpolate (i)
import Yoga.Block.Container.Style (colour)
type Props :: forall k. (Type -> k) -> Row k -> Row k
type Props ∷ ∀ k. (Type → k) → Row k → Row k
type Props f r =
( css ∷ f Style
| r
)
range ∷ ∀ p. { | Props OptionalProp p } -> Style
range ∷ ∀ p. { | Props OptionalProp p } → Style
range props = styles <>? props.css
where
styles =
@ -41,7 +41,13 @@ container =
}
, "input[type=range]::-webkit-slider-thumb": nested thumbStyle
, "input[type=range]::-moz-range-thumb": nested thumbStyle
, boxSizing: borderBox
, "input[type=range]:focus-visible":
nest
{ "&::-webkit-slider-thumb": nest
{ border: str $ i "3px solid " colour.highlight
, boxSizing: contentBox
}
}
}
thumbStyle ∷ Style
@ -54,7 +60,7 @@ thumbStyle =
, borderRadius: 50.0 # percent
, background: str "white"
, boxShadow: str "0 calc(var(--s-4)/2) var(--s-3) rgba(70,70,70,0.6)"
, boxSizing: borderBox
, transform: str "translateY(-1px)"
}
inputDisabled ∷ Style
@ -81,7 +87,7 @@ focusCircle =
, border: str $ i "3px solid " colour.highlight
, boxShadow: str $ i "0 0 var(--s-3) " <> colour.highlight
, position: absolute
, transform: str "scale(1.4)"
, transform: str "scale(1.2)"
, zIndex: str "12"
}

41
src/Yoga/Block/Atom/Range/View.purs
View File

@ -1,6 +1,7 @@
module Yoga.Block.Atom.Range.View (component, Props, PropsF) where
import Yoga.Prelude.View
import Data.Int as Int
import Foreign.Object as Object
import React.Basic.DOM (css)
@ -22,33 +23,41 @@ type Props =
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component ∷ ∀ p p_. Union p p_ Props ⇒ ReactComponent { | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent (Record p)
rawComponent =
mkForwardRefComponent "Range" do
\(props ∷ { | PropsOptional }) ref -> React.do
\(props ∷ { | PropsOptional }) ref → React.do
let min = props.min ?|| 0
let max = props.max ?|| 100
let v = props.value ?|| min
let disabled = props.disabled ?|| false
fallbackValue /\ setFallbackValue <- useState' v
fallbackValue /\ setFallbackValue ← useState' v
let value = props.value ?|| fallbackValue
hasFocus /\ setHasFocus <- useState' false
hasFocus /\ setHasFocus ← useState' false
pure
$ div
</* { className: "ry-range"
, css: Style.container <> guard disabled Style.inputDisabled <>? props.css
</*
{ className: "ry-range"
, css: Style.container <> guard disabled Style.inputDisabled <>?
props.css
, onFocus: handler_ $ setHasFocus true
, onBlur: handler_ $ setHasFocus false
, style: fold props.style <> css { "--val": value - min, "--max": max - min }
, style: fold props.style <> css
{ "--val": value - min, "--max": max - min }
, _data: Object.singleton "testid" "range-testid"
}
/> [ div </*> { className: "ry-range-filled", css: Style.filled <> guard disabled Style.disabled }
, div </*> { className: "ry-range-not-filled", css: Style.notFilled <> guard disabled Style.disabled }
, guard hasFocus do
div </*> { className: "ry-range-focus-circle", css: Style.focusCircle }
/>
[ div </*>
{ className: "ry-range-filled"
, css: Style.filled <> guard disabled Style.disabled
}
, div </*>
{ className: "ry-range-not-filled"
, css: Style.notFilled <> guard disabled Style.disabled
}
, emotionInput
ref
( props
@ -60,9 +69,11 @@ rawComponent =
{ className: "ry-range-thumb " <>? props.className
, css: Style.range props <> guard disabled Style.inputDisabled
, type: "range"
, onChange:
composeHandler
(handler Event.targetValue ((_ >>= Int.fromString) >>> (foldMap setFallbackValue)))
props.onChange
, onChange:
composeHandler
( handler Event.targetValue
((_ >>= Int.fromString) >>> (foldMap setFallbackValue))
)
props.onChange
}
]

16
src/Yoga/Block/Container/Style.purs
View File

@ -275,10 +275,10 @@ defaultColours =
, success
, successText
, text: text
, textPaler1: text # lighten 0.1
, textPaler2: text # lighten 0.2
, textPaler3: text # lighten 0.3
, textPaler4: text # lighten 0.4
, textPaler1: text # lighten 0.1 # desaturate 0.04
, textPaler2: text # lighten 0.2 # desaturate 0.08
, textPaler3: text # lighten 0.3 # desaturate 0.12
, textPaler4: text # lighten 0.4 # desaturate 0.16
, textInverted: lightBg
, textInvertedPaler1: textDark # darken 0.1 # desaturate 0.02
, textInvertedPaler2: textDark # darken 0.2 # desaturate 0.04
@ -345,10 +345,10 @@ defaultColours =
, textPaler3: textDark # darken 0.3 # desaturate 0.06
, textPaler4: textDark # darken 0.4 # desaturate 0.08
, textInverted: darkBg
, textInvertedPaler1: darkBg # lighten 0.1
, textInvertedPaler2: darkBg # lighten 0.2
, textInvertedPaler3: darkBg # lighten 0.3
, textInvertedPaler4: darkBg # lighten 0.4
, textInvertedPaler1: darkBg # lighten 0.1 # desaturate 0.02
, textInvertedPaler2: darkBg # lighten 0.2 # desaturate 0.04
, textInvertedPaler3: darkBg # lighten 0.3 # desaturate 0.06
, textInvertedPaler4: darkBg # lighten 0.4 # desaturate 0.08
, boxShadow: boxShadowDark
}
}

49
src/Yoga/Block/Container/View.purs
View File

@ -2,8 +2,6 @@ module Yoga.Block.Container.View
( Props
, PropsF
, component
, modalContainerId
, tooltipContainerId
) where
import Yoga.Prelude.View
@ -44,7 +42,7 @@ mkPrefersLight = matchMedia "(prefers-color-scheme: light)" =<< window
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Container" do
\(props@{ children } ∷ { | PropsF OptionalProp }) ref -> React.do
\(props@{ children } ∷ { | PropsF OptionalProp }) _ref -> React.do
let propsThemeVariant = props.themeVariant # opToMaybe # join
let notifySystemThemeChanged = props.onPreferredSystemThemeChange ?|| mempty
systemThemeVariant /\ setSystemThemeVariant <- React.useState' Nothing
@ -81,38 +79,15 @@ rawComponent =
removeEventListener Event.change lightModeListener true (MediaQueryList.toEventTarget prefersLightMediaQuery)
pure
$ fragment
[ R.div' </ { ref }
/> Array.cons
( element E.global
{ styles: F.globalStyles <> (_ <>? props.globalStyles)
case propsThemeVariant, systemThemeVariant of
Nothing, Nothing -> Styles.global
Just Styles.DarkMode, _ -> Styles.darkMode
Just Styles.LightMode, _ -> Styles.lightMode
Nothing, Just DarkMode -> Styles.darkMode
Nothing, Just LightMode -> Styles.lightMode
}
)
children
, R.div { id: modalContainerId }
, E.element R.div'
{ id: tooltipContainerId
, className: tooltipContainerId
, css:
E.css
{ width: 100.0 # E.vw
, height: 100.0 # E.vh
, position: E.fixed
, top: E.str "0"
, left: E.str "0"
, pointerEvents: E.none
, zIndex: E.str "9999"
}
$ Array.cons
( element E.global
{ styles: F.globalStyles <> (_ <>? props.globalStyles)
case propsThemeVariant, systemThemeVariant of
Nothing, Nothing -> Styles.global
Just Styles.DarkMode, _ -> Styles.darkMode
Just Styles.LightMode, _ -> Styles.lightMode
Nothing, Just DarkMode -> Styles.darkMode
Nothing, Just LightMode -> Styles.lightMode
}
]
modalContainerId ∷ String
modalContainerId = "ry-modal-container"
tooltipContainerId ∷ String
tooltipContainerId = "ry-tooltip-container"
)
children

1
src/Yoga/Block/Molecule/Sheet/View.purs
View File

@ -3,7 +3,6 @@ module Yoga.Block.Molecule.Sheet.View (component, Props) where
import Yoga.Prelude.View
import Data.Int as Int
import Data.Nullable as Nullable
import Data.Number (pow)
import Effect.Class.Console (log)
import Effect.Unsafe (unsafePerformEffect)