mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Improve range
This commit is contained in:
parent
e3df4432ca
commit
9e7a86c2c5
@ -145,5 +145,5 @@ var purescript = function (hljs) {
|
||||
]
|
||||
}
|
||||
}
|
||||
Light.registerLanguage("puresscript", purescript)
|
||||
Light.registerLanguage("purescript", purescript)
|
||||
export const syntaxHighlighter = Light
|
||||
|
@ -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"
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
]
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user