@tremolo-ui/react 0.0.6 → 0.0.8

package/src/components/Slider/Track.tsx

@@ -1,76 +1,65 @@
-import { css, CSSObject } from '@emotion/react'
-import { ReactElement } from 'react'
 import clsx from 'clsx'
-import { styleHelper } from '@tremolo-ui/functions'
-import { isHorizontal } from '@tremolo-ui/functions/Slider'
+import { CSSProperties, ReactElement } from 'react'
 
-import { Direction, gradientDirection } from './type'
+import { styleHelper, xor } from '@tremolo-ui/functions'
 
-interface SliderTrackProps {
+import { useDisabled, useReverse, useVertical } from './context'
+
+export const defaultLength = 140
+export const defaultThickness = 10
+
+export interface SliderTrackProps {
   length?: number | string
   thickness?: number | string
 
-  activeBg?: string
-  inactiveBg?: string
-  activeHoverBg?: string
-  inactiveHoverBg?: string
-
-  disabledActiveBg?: string
-  disabledInactiveBg?: string
-  disabledActiveHoverBg?: string
-  disabledInactiveHoverBg?: string
+  active?: string
+  inactive?: string
 
   className?: string
-  style?: CSSObject
+  style?: CSSProperties
   children?: ReactElement
 
-  /** inherit */
+  /** @internal */
   __thumb?: ReactElement
-  /** inherit */
-  __direction?: Direction
-  /** inherit */
-  __disabled?: boolean
-  /** internal */
+  /** @internal */
   __percent?: number
 }
 
 export function SliderTrack({
-  length = 140,
-  thickness = 10,
-  activeBg = '#7998ec',
-  inactiveBg = '#eee',
-  activeHoverBg = '#6387e9',
-  inactiveHoverBg = '#e0e0e0',
-  disabledActiveBg = '#858890',
-  disabledInactiveBg = '#ddd',
-  disabledActiveHoverBg = disabledActiveBg,
-  disabledInactiveHoverBg = disabledInactiveBg,
+  length = defaultLength,
+  thickness = defaultThickness,
+  active,
+  inactive,
   children,
   className,
   style,
   __thumb,
-  __direction,
-  __disabled,
   __percent,
 }: SliderTrackProps) {
-  const active = __disabled ? disabledActiveBg : activeBg
-  const inactive = __disabled ? disabledInactiveBg : inactiveBg
-  const activeHover = __disabled ? disabledActiveHoverBg : activeHoverBg
-  const inactiveHover = __disabled ? disabledInactiveHoverBg : inactiveHoverBg
+  const vertical = useVertical()
+  const reverse = useReverse()
+  const disabled = useDisabled()
+
+  const direction = vertical ? 'bottom' : 'right'
+  const colors = {
+    '--active': active,
+    '--inactive': inactive,
+  }
+
   return (
     <div
       className={clsx('tremolo-slider-track', className)}
-      css={css({
-        position: 'relative',
-        background: `linear-gradient(to ${gradientDirection(__direction!)}, ${active} ${__percent}%, ${inactive} ${__percent}%)`,
+      aria-disabled={disabled}
+      style={{
+        ...colors,
+        background: xor(vertical, reverse)
+          ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
+          : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`,
         borderRadius: styleHelper(thickness!, '/', 2),
-        width: isHorizontal(__direction!) ? length : thickness,
-        height: isHorizontal(__direction!) ? thickness : length,
-        ':hover': {
-          background: `linear-gradient(to ${gradientDirection(__direction!)}, ${activeHover} ${__percent}%, ${inactiveHover} ${__percent}%)`
-        },
-        ...style
-      })}
+        width: !vertical ? length : thickness,
+        height: vertical ? length : thickness,
+        ...style,
+      }}
     >
       {children}
       {__thumb}

package/src/components/Slider/context.tsx

@@ -0,0 +1,66 @@
+import { createContext, useState, useContext, ReactNode } from 'react'
+
+const minContext = createContext(0)
+const maxContext = createContext(0)
+const stepContext = createContext(0)
+const skewContext = createContext(0)
+const verticalContext = createContext(false)
+const reverseContext = createContext(false)
+const disabledContext = createContext(false)
+
+interface Props {
+  min: number
+  max: number
+  step: number
+  skew: number
+  vertical: boolean
+  reverse: boolean
+  disabled: boolean
+  children: ReactNode
+}
+
+export function SliderValuesProvider({
+  min: _min,
+  max: _max,
+  step: _step,
+  skew: _skew,
+  vertical: _vertical,
+  reverse: _reverse,
+  disabled: _disabled,
+  children,
+}: Props) {
+  const [min] = useState(_min)
+  const [max] = useState(_max)
+  const [step] = useState(_step)
+  const [skew] = useState(_skew)
+  const [vertical] = useState(_vertical)
+  const [reverse] = useState(_reverse)
+  const [disabled] = useState(_disabled)
+
+  return (
+    <minContext.Provider value={min}>
+      <maxContext.Provider value={max}>
+        <stepContext.Provider value={step}>
+          <skewContext.Provider value={skew}>
+            <verticalContext.Provider value={vertical}>
+              <reverseContext.Provider value={reverse}>
+                <disabledContext.Provider value={disabled}>
+                  {children}
+                </disabledContext.Provider>
+              </reverseContext.Provider>
+            </verticalContext.Provider>
+          </skewContext.Provider>
+        </stepContext.Provider>
+      </maxContext.Provider>
+    </minContext.Provider>
+  )
+}
+
+export const useMin = () => useContext(minContext)
+export const useMax = () => useContext(maxContext)
+export const useStep = () => useContext(stepContext)
+export const useSkew = () => useContext(skewContext)
+export const useVertical = () => useContext(verticalContext)
+// export const useSetVertical = () => useContext(setVerticalContext)
+export const useReverse = () => useContext(reverseContext)
+export const useDisabled = () => useContext(disabledContext)

package/src/components/Slider/index.css

@@ -0,0 +1,76 @@
+.tremolo-slider {
+  display: inline-block;
+  cursor: pointer;
+  outline: 0;
+  -webkit-tap-highlight-color: transparent;
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-slider-thumb-wrapper {
+  position: absolute;
+  translate: -50% -50%;
+  z-index: 100;
+}
+
+.tremolo-slider-thumb {
+  background: #4e76e6;
+  border-radius: 50%;
+  outline: none;
+
+  &[aria-disabled='true'] {
+    background: #5d6478;
+  }
+
+  &[aria-readonly='false']:focus {
+    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+  }
+}
+
+.tremolo-slider-track {
+  --active: #7998ec;
+  --inactive: #eee;
+
+  position: relative;
+
+  &:hover {
+    --active: #6387e9;
+    --inactive: #e0e0e0;
+  }
+
+  &[aria-disabled='true'] {
+    --active: #858890;
+    --inactive: #ddd;
+  }
+}
+
+.tremolo-slider-scale {
+  display: block;
+  position: relative;
+}
+
+.tremolo-slider-scale-option {
+  display: flex;
+  color: #222;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  translate: -50% 0;
+  z-index: 10;
+
+  &[data-vertical='true'] {
+    flex-direction: row;
+    translate: 0 -50%;
+  }
+}
+
+.tremolo-slider-scale-option-mark {
+  background-color: currentColor;
+}
+
+.tremolo-slider-scale-option-label {
+  text-align: right;
+}