zds-pickers 4.0.5 → 4.0.7

package/lib/pickers/knobSkin10.tsx

@@ -0,0 +1,94 @@
+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"/>
+                  <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>
+              <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 default knobSkin10

package/lib/rotaryKnob/InternalInput.tsx

@@ -0,0 +1,43 @@
+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 default InternalInput

package/lib/rotaryKnob/Types.ts

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

package/lib/rotaryKnob/helpers/DrawCircle.tsx

@@ -0,0 +1,41 @@
+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 default DrawCircle

package/lib/rotaryKnob/helpers/DrawLine.tsx

@@ -0,0 +1,32 @@
+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 default DrawLine

package/lib/rotaryKnob/helpers/HelpersOverlay.tsx

@@ -0,0 +1,43 @@
+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 default HelpersOverlay

package/lib/rotaryKnob/helpers/KnobVisualHelpers.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+import type { Point } from '../Types'
+import utils 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(utils.toRadians(props.valueAngle - 90))
+    const valueMarkerY =
+      props.radius * Math.sin(utils.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 }