zds-pickers 4.1.0 → 4.1.3

package/lib/pickers/knobSkin10.tsx

@@ -1,112 +0,0 @@
-const knobSkin10 = {
-  knobX: 71.44,
-  knobY: 71.44,
-  svg: `
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="207px" height="207px" viewBox="0 0 207 207" version="1.1">
-  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
-  <desc>Created with Sketch.</desc>
-  <defs>
-      <linearGradient x1="50%" y1="50%" x2="50%" y2="100%" id="27c61b0f-392f-962d-de12-cb9da898274b">
-          <stop stop-color="#444040" stop-opacity="0.51098279" offset="0%"/>
-          <stop stop-color="#131111" stop-opacity="0.893200861" offset="100%"/>
-      </linearGradient>
-      <circle id="e966567b-3869-4bcd-76b6-2cf084e45390" cx="100.497487" cy="100.497487" r="99.4974874"/>
-      <filter x="-3.3%" y="-3.3%" width="106.5%" height="106.5%" filterUnits="objectBoundingBox" id="e2e6829f-0086-96b2-e92a-6f3809b8ac61">
-          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
-          <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
-          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
-          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
-          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
-      </filter>
-      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="0facd5c9-8e04-e83f-4842-8ba16f949942">
-          <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="0%"/>
-          <stop stop-color="#000000" stop-opacity="0.5" offset="100%"/>
-      </linearGradient>
-      <circle id="c54189ed-7ea3-956c-f040-f0207548b268" cx="100.432161" cy="100.432161" r="86.4321608"/>
-      <filter x="-4.0%" y="-3.5%" width="108.1%" height="108.1%" filterUnits="objectBoundingBox" id="dedf2e7e-f008-c315-f682-e424d670f210">
-          <feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
-          <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
-          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
-          <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
-          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"/>
-      </filter>
-
-      <filter x="-5.3%" y="-11.3%" width="110.7%" height="122.6%" filterUnits="objectBoundingBox" id="12f618f7-e258-b597-3ed6-242484ddad8f">
-          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
-          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
-          <feColorMatrix values="0 0 0 0 0.915577168   0 0 0 0 0.797591325   0 0 0 0 0.601479722  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"/>
-      </filter>
-      <pattern id="3cc0e5b8-1f0a-886b-f635-8fcb19212870" width="8.04411765" height="8.04411765" x="21.9558824" y="21.9558824" patternUnits="userSpaceOnUse">
-          <use xlink:href="#2b8719c1-286b-ebf8-a488-ac66a6598fc5" transform="scale(0.167585784,0.167585784)"/>
-      </pattern>
-      <image id="2b8719c1-286b-ebf8-a488-ac66a6598fc5" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC"/>
-  </defs>
-  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g id="s10" transform="translate(3.000000, 3.000000)">
-          <g id="container">
-              <g id="Oval-2">
-                  <use fill="black" fill-opacity="1" filter="url(#e2e6829f-0086-96b2-e92a-6f3809b8ac61)" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
-                  <use stroke="#979797" stroke-width="1" fill="url(#27c61b0f-392f-962d-de12-cb9da898274b)" fill-rule="evenodd" xlink:href="#e966567b-3869-4bcd-76b6-2cf084e45390"/>
-              </g>
-              <g id="Oval-2">
-                  <use fill="black" fill-opacity="1" filter="url(#dedf2e7e-f008-c315-f682-e424d670f210)" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
-                  <use fill="" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
-                  <use stroke="#4A4A4A" stroke-width="1" fill="url(#0facd5c9-8e04-e83f-4842-8ba16f949942)" fill-rule="evenodd" xlink:href="#c54189ed-7ea3-956c-f040-f0207548b268"/>
-              </g>
-              <g id="knob" transform="translate(28.574244, 28.574244)">
-                  <circle id="Oval-5" fill="#322E2E" cx="71.4356094" cy="71.4356094" r="71.4356094"/>
-
-                  <!-- Rotating indicator (existing) -->
-                  <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
-              </g>
-
-              <!-- Fixed position marks (outside the rotating knob group) -->
-              <!-- 12:00 position mark (more prominent) -->
-              <line x1="100.0098534" y1="15" x2="100.0098534" y2="35" stroke="#CCCCCC" stroke-width="4" opacity="0.9"/>
-
-              <!-- Arc fill between end position marks -->
-             <!-- <path d="M 35 165 A 65 65 0 0 1 165 165" stroke="#666666" stroke-width="8" fill="none" opacity="0.3"/> -->
-
-              <!-- End position marks (0 and 127) -->
-              <!-- 0 position mark (40 degrees from top, clockwise) - at outer radius beyond knob edge -->
-              <!-- This should be at the bottom-left where the value indicator points when at 0 -->
-              <line x1="36" y1="164" x2="44" y2="156" stroke="#DDDDDD" stroke-width="4"/>
-
-              <!-- 127 position mark (320 degrees from top, clockwise) - at outer radius beyond knob edge -->
-              <!-- This should be at the bottom-right where the value indicator points when at 127 -->
-              <line x1="164" y1="164" x2="156" y2="156" stroke="#DDDDDD" stroke-width="4"/>
-              <g id="label">
-                  <g id="labeltext" fill-opacity="1" fill="#E6D7D7">
-                      <text id="534f4e02-5541-3607-0966-af0b025d80e0" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7" filter="url(#12f618f7-e258-b597-3ed6-242484ddad8f)">
-          <tspan x="45.3246625" y="117.884225">10.10</tspan>
-      </text>
-                      <text id="92ebe866-c281-70c7-7b0e-a373cee013a9" font-family="Helvetica" font-size="44" font-weight="normal" fill="#E6D7D7" class="text-7">
-          <tspan x="45.3246625" y="117.884225">10.10</tspan>
-      </text>
-                  </g>
-                  <circle id="Oval-6" stroke="#979797" fill-opacity="0.730000019" fill="url(#3cc0e5b8-1f0a-886b-f635-8fcb19212870)" transform="translate(100.351759, 100.351759) rotate(-45.000000) translate(-100.351759, -100.351759) " cx="100.351759" cy="100.351759" r="70.3517588"/>
-              </g>
-          </g>
-      </g>
-  </g>
-</svg>
-`,
-  updateAttributes: [
-    {
-      element: '#labeltext text tspan',
-      content: (_props: React.CSSProperties, value: number) => value.toFixed(0),
-      attrs: [
-        {
-          name: 'text-anchor',
-          value: (/* props, value */) => 'middle',
-        },
-        {
-          name: 'x',
-          value: (/* props, value */) => '100',
-        },
-      ],
-    },
-  ],
-}
-
-export { knobSkin10 }

package/lib/rotaryKnob/InternalInput.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-type InternalInputProps = {
-  disabled?: boolean
-  min: number
-  max: number
-  value: number
-  step?: number
-  inputRef: React.RefObject<HTMLInputElement>
-  onChange: (val: number) => void
-  style?: React.CSSProperties
-}
-
-class InternalInput extends React.Component<InternalInputProps> {
-  static defaultProps = {
-    step: 1,
-  }
-  render() {
-    const props = this.props
-    const hideStyle = {}
-
-    function onValChange(event: React.ChangeEvent<HTMLInputElement>) {
-      props.onChange(Number(event.target.value))
-    }
-
-    const { value, min, max, step, onChange, inputRef, ...rest } = props
-    return (
-      <input
-        ref={inputRef}
-        value={value}
-        step={step}
-        onChange={onValChange}
-        style={hideStyle}
-        type="range"
-        min={min}
-        max={max}
-        {...rest}
-      />
-    )
-  }
-}
-
-export { InternalInput }

package/lib/rotaryKnob/Types.ts

@@ -1,6 +0,0 @@
-type Point = {
-  x: number
-  y: number
-}
-
-export type { Point }

package/lib/rotaryKnob/helpers/DrawCircle.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-
-/**
- * Draws a circle with radius = r
- * position must be handled by parent
- */
-
-type DrawCircleProps = React.SVGProps<SVGCircleElement> & {
-  r: number
-  borderColor?: string
-  fillColor?: string
-  borderWidth?: number
-  fillOpacity: number
-  cx: number
-  cy: number
-}
-
-class DrawCircle extends React.Component<DrawCircleProps> {
-  render() {
-    const {
-      r,
-      borderColor = 'black',
-      fillColor = 'transparent',
-      borderWidth = 2,
-      fillOpacity = 1,
-      ...rest
-    } = this.props
-
-    return (
-      <circle
-        stroke={borderColor}
-        fill={fillColor}
-        fillOpacity={fillOpacity}
-        r={r}
-        {...rest}
-      />
-    )
-  }
-}
-
-export { DrawCircle }

package/lib/rotaryKnob/helpers/DrawLine.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import type { Point } from '../Types'
-
-/**
- * Draws a line from p1 to p2
- */
-
-type DrawLineProps = React.SVGProps<SVGLineElement> & {
-  width?: number
-  color?: string
-  p1: Point
-  p2: Point
-}
-
-class DrawLine extends React.Component<DrawLineProps> {
-  render() {
-    const { width = 2, color = 'black', p1, p2, ...rest } = this.props
-    return (
-      <line
-        {...rest}
-        stroke={color}
-        strokeWidth={width}
-        x1={p1.x}
-        y1={p1.y}
-        x2={p2.x}
-        y2={p2.y}
-      />
-    )
-  }
-}
-
-export { DrawLine }

package/lib/rotaryKnob/helpers/HelpersOverlay.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-type HelpersOverlayProps = React.PropsWithChildren & {
-  overlayStyle?: React.CSSProperties
-}
-
-/**
- * Draws the overlay and the children
- */
-class HelpersOverlay extends React.Component<HelpersOverlayProps> {
-  render() {
-    const { children, ...rest } = this.props
-
-    const styles = {
-      overlay: Object.assign(
-        {
-          width: '100%',
-          height: '100vh',
-          top: 0,
-          left: 0,
-          zIndex: 2147483647,
-          margin: '0',
-          padding: '0',
-          boxSizing: 'border-box',
-          position: 'fixed',
-        },
-        this.props.overlayStyle,
-      ),
-    }
-
-    return ReactDOM.createPortal(
-      <div
-        style={styles.overlay}
-        {...rest}>
-        {children}
-      </div>,
-      document.body,
-    )
-  }
-}
-
-export { HelpersOverlay }

package/lib/rotaryKnob/helpers/KnobVisualHelpers.tsx

@@ -1,138 +0,0 @@
-import React from 'react'
-import type { Point } from '../Types'
-import { toRadians } from '../utils'
-import { DrawCircle } from './DrawCircle'
-import { DrawLine } from './DrawLine'
-import { HelpersOverlay } from './HelpersOverlay'
-
-/** Precision visual helpers */
-
-/**
- * Precision mode visual helpers
- */
-type KnobVisualHelpersProps = {
-  svgRef?: SVGSVGElement
-  radius: number
-  minimumDragDistance: number
-  valueAngle: number
-  mousePos: Point
-}
-
-type KnobVisualHelpersState = {
-  centerX: number
-  centerY: number
-  valueMarkerX: number
-  valueMarkerY: number
-}
-
-class KnobVisualHelpers extends React.Component<
-  KnobVisualHelpersProps,
-  KnobVisualHelpersState
-> {
-  state = {
-    centerX: 0,
-    centerY: 0,
-    valueMarkerX: 0,
-    valueMarkerY: 0,
-  }
-
-  static getDerivedStateFromProps(
-    props: KnobVisualHelpersProps,
-    state: KnobVisualHelpersState,
-  ) {
-    //Calculate position
-    if (!props.svgRef) return state
-
-    const vbox = props.svgRef.getBoundingClientRect()
-    const halfWidth = vbox.width / 2
-
-    //Calculate current angle segment end point
-    //Note: Not sure why we need to subtract 90 here
-    const valueMarkerX =
-      props.radius * Math.cos(toRadians(props.valueAngle - 90))
-    const valueMarkerY =
-      props.radius * Math.sin(toRadians(props.valueAngle - 90))
-
-    return {
-      ...state,
-      centerX: vbox.left + halfWidth,
-      centerY: vbox.top + halfWidth,
-      valueMarkerX,
-      valueMarkerY,
-    }
-  }
-
-  render() {
-    const markCircleColor =
-      this.props.minimumDragDistance <= this.props.radius ? 'green' : 'grey'
-    const fillColor =
-      this.props.minimumDragDistance <= this.props.radius
-        ? '#88E22D'
-        : '#D8D8D8'
-    const minDistanceCueVisible =
-      this.props.minimumDragDistance >= this.props.radius
-
-    return (
-      <HelpersOverlay>
-        <svg
-          style={{ position: 'absolute', top: '0', left: '0' }}
-          width="100%"
-          height="100%">
-          <defs>
-            <marker
-              id="Triangle"
-              viewBox="0 0 10 10"
-              refX="1"
-              refY="5"
-              markerWidth="6"
-              markerHeight="6"
-              orient="auto">
-              <path d="M 0 0 L 10 5 L 0 10 z" />
-            </marker>
-          </defs>
-
-          {/* Current drag distance */}
-          <DrawCircle
-            borderColor={markCircleColor}
-            fillColor={fillColor}
-            fillOpacity={0.02}
-            r={this.props.radius}
-            cx={this.state.centerX}
-            cy={this.state.centerY}
-          />
-          {/* Minimum drag distance marker */}
-          {minDistanceCueVisible && (
-            <DrawCircle
-              borderColor={markCircleColor}
-              fillColor={fillColor}
-              fillOpacity={0}
-              r={this.props.minimumDragDistance}
-              cx={this.state.centerX}
-              cy={this.state.centerY}
-              //strokeDasharray="5, 5"
-            />
-          )}
-
-          {/* Line to mouse position */}
-          {/* <DrawLine
-            p1={{ x: this.state.centerX, y: this.state.centerY }}
-            p2={{ x: this.props.mousePos.x, y: this.props.mousePos.y }}
-            opacity={0.4}
-            strokeDasharray="5, 5"
-          /> */}
-          {/* Line to current value */}
-          <DrawLine
-            p1={{ x: this.state.centerX, y: this.state.centerY }}
-            p2={{
-              x: this.state.valueMarkerX + this.state.centerX,
-              y: this.state.valueMarkerY + this.state.centerY,
-            }}
-            markerEnd="url(#Triangle)"
-          />
-        </svg>
-      </HelpersOverlay>
-    )
-  }
-}
-
-export { KnobVisualHelpers }