orbital-list
Advanced tools
orbital-list - npm Package Compare versions
Comparing version 0.1.9-rc.8 to 0.2.0
| export { default as Dial } from './components/Dial'; | ||
| export { default as DragRegion } from './components/DragRegion'; | ||
| export { default as DragRegion, IDragInfo } from './components/DragRegion'; | ||
| export { default as Hand } from './components/Hand'; | ||
@@ -10,2 +10,2 @@ export { default as Label } from './components/Label'; | ||
| export { default as OrbitalList } from './OrbitalList'; | ||
| export { default as TimezoneClock } from './TimezoneClock'; | ||
| export * from './utils'; |
@@ -1,884 +0,8 @@ | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
| var React = require('react'); | ||
| var React__default = _interopDefault(React); | ||
| 'use strict' | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| if (process.env.NODE_ENV === 'production') { | ||
| module.exports = require('./orbital-list.cjs.production.min.js') | ||
| } else { | ||
| module.exports = require('./orbital-list.cjs.development.js') | ||
| } | ||
| var pow = Math.pow; | ||
| function range(size, startAt) { | ||
| if (startAt === void 0) { | ||
| startAt = 0; | ||
| } | ||
| return Array.from(Array(size).keys()).map(function (i) { | ||
| return i + startAt; | ||
| }); | ||
| } | ||
| var lpad = function lpad(n, length) { | ||
| if (length === void 0) { | ||
| length = 2; | ||
| } | ||
| return ('' + n).padStart(length, '0'); | ||
| }; | ||
| var useDatetime = function useDatetime() { | ||
| var ref = React.useRef(); | ||
| var _useState = React.useState(new Date()), | ||
| datetime = _useState[0], | ||
| setDatetime = _useState[1]; | ||
| var ticker = React.useCallback(function () { | ||
| return setInterval(function () { | ||
| setDatetime(new Date()); | ||
| }, 1000); | ||
| }, []); | ||
| React.useEffect(function () { | ||
| if (!ref.current) { | ||
| ref.current = ticker(); | ||
| } | ||
| return function () { | ||
| return clearInterval(ref.current); | ||
| }; | ||
| }, []); | ||
| React.useLayoutEffect(function () { | ||
| setDatetime(new Date()); | ||
| }, []); | ||
| return datetime; | ||
| }; | ||
| function useEventListener(eventName, handler, ref) { | ||
| React.useEffect(function () { | ||
| var current = ref ? ref.current : window; | ||
| if (!current) { | ||
| console.warn('ref current not set!'); | ||
| return; | ||
| } | ||
| var isSupported = current.addEventListener; | ||
| if (!isSupported) { | ||
| throw new Error('event listener not supported'); | ||
| } | ||
| current.addEventListener(eventName, handler); | ||
| return function () { | ||
| current.removeEventListener(eventName, handler); | ||
| }; | ||
| }, [eventName, ref === null || ref === void 0 ? void 0 : ref.current, handler]); | ||
| } | ||
| var toDeg = function toDeg(radians) { | ||
| return radians * (180 / Math.PI); | ||
| }; | ||
| var easing = { | ||
| linear: function linear(n) { | ||
| return n; | ||
| }, | ||
| elastic: function elastic(n) { | ||
| return n * (33 * n * n * n * n - 106 * n * n * n + 126 * n * n - 67 * n + 15); | ||
| }, | ||
| inExpo: function inExpo(n) { | ||
| return Math.pow(2, 10 * (n - 1)); | ||
| }, | ||
| easeOutBack: function easeOutBack(n) { | ||
| var c1 = 1.70158; | ||
| var c3 = c1 + 1; | ||
| return 1 + c3 * pow(n - 1, 3) + c1 * pow(n - 1, 2); | ||
| }, | ||
| easeInOutBack: function easeInOutBack(x) { | ||
| var c1 = 1.70158; | ||
| var c2 = c1 * 1.525; | ||
| return x < 0.5 ? pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2; | ||
| }, | ||
| easeInOutQuart: function easeInOutQuart(x) { | ||
| return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2; | ||
| } | ||
| }; | ||
| var useEasedState = function useEasedState(value, duration, easingName) { | ||
| if (duration === void 0) { | ||
| duration = 500; | ||
| } | ||
| if (easingName === void 0) { | ||
| easingName = 'linear'; | ||
| } | ||
| var _useState2 = React.useState(value), | ||
| current = _useState2[0], | ||
| setCurrent = _useState2[1]; | ||
| var _useState3 = React.useState(null), | ||
| target = _useState3[0], | ||
| setTargetInternal = _useState3[1]; | ||
| var _useState4 = React.useState(0), | ||
| elapsed = _useState4[0], | ||
| setElapsed = _useState4[1]; | ||
| var n = Math.min(1, elapsed / duration); | ||
| var eased = easing[easingName](n); | ||
| var activeValue = current + (target ? eased * (target.value - current) : 0); | ||
| var reset = React.useCallback(function (value) { | ||
| setCurrent(value); | ||
| setTargetInternal(null); | ||
| setElapsed(0); | ||
| }, [setCurrent, setTargetInternal, setElapsed]); | ||
| var setTarget = React.useCallback(function (value) { | ||
| setCurrent(activeValue); | ||
| setTargetInternal({ | ||
| value: value, | ||
| at: performance.now() | ||
| }); | ||
| setElapsed(0); | ||
| }, [setTargetInternal, activeValue]); | ||
| React.useEffect(function () { | ||
| if (!target) { | ||
| return; | ||
| } | ||
| var raf = null; | ||
| var onFrame = function onFrame(time) { | ||
| if (!target) { | ||
| return; | ||
| } | ||
| var elapsed = time - target.at; | ||
| setElapsed(elapsed); | ||
| if (elapsed < duration) { | ||
| raf = requestAnimationFrame(onFrame); | ||
| } | ||
| }; | ||
| raf = requestAnimationFrame(onFrame); | ||
| return function () { | ||
| return cancelAnimationFrame(raf); | ||
| }; | ||
| }, [target, setElapsed, duration]); | ||
| return [activeValue, setTarget, reset]; | ||
| }; | ||
| var orbitalContext = React.createContext(null); | ||
| var OrbitalWrapper = function OrbitalWrapper(_ref) { | ||
| var children = _ref.children; | ||
| var ref = React.useRef(); | ||
| var _useState = React.useState({ | ||
| width: 0, | ||
| height: 0, | ||
| squareSize: 0 | ||
| }), | ||
| size = _useState[0], | ||
| setSize = _useState[1]; | ||
| var onResize = React.useCallback(function () { | ||
| if (!ref.current) { | ||
| return; | ||
| } | ||
| var width = ref.current.offsetWidth; | ||
| var height = ref.current.offsetHeight; | ||
| var squareSize = Math.min(width, height); | ||
| setSize({ | ||
| width: width, | ||
| height: height, | ||
| squareSize: squareSize | ||
| }); | ||
| }, [ref, ref.current, setSize]); | ||
| useEventListener('resize', onResize); | ||
| if (typeof window !== 'undefined') { | ||
| React.useLayoutEffect(onResize, [onResize]); | ||
| } | ||
| var squareSize = size.squareSize; | ||
| var context = { | ||
| radius: squareSize / 2, | ||
| centerX: squareSize / 2, | ||
| centerY: squareSize / 2 | ||
| }; | ||
| return React__default.createElement("div", { | ||
| style: { | ||
| width: '100%', | ||
| height: '100%' | ||
| }, | ||
| ref: ref | ||
| }, React__default.createElement("div", { | ||
| style: { | ||
| width: size.squareSize + "px", | ||
| height: size.squareSize + "px", | ||
| margin: 'auto', | ||
| position: 'relative', | ||
| overflow: 'hidden' | ||
| } | ||
| }, React__default.createElement("div", { | ||
| style: { | ||
| width: '100%', | ||
| height: '100%', | ||
| overflow: 'visible', | ||
| transform: 'translate(50%, 50%)' | ||
| } | ||
| }, React__default.createElement(orbitalContext.Provider, { | ||
| value: context | ||
| }, children)))); | ||
| }; | ||
| var Place = function Place(_ref) { | ||
| var angle = _ref.angle, | ||
| children = _ref.children, | ||
| distance = _ref.distance, | ||
| style = _ref.style, | ||
| className = _ref.className, | ||
| onHover = _ref.onHover, | ||
| onClick = _ref.onClick; | ||
| var context = React.useContext(orbitalContext); | ||
| if (!context) { | ||
| throw 'invalid context'; | ||
| } | ||
| var radius = context.radius; | ||
| var radAngle = angle * (Math.PI / 180); | ||
| var d = (distance || 0) * radius; | ||
| var x = d * Math.cos(radAngle); | ||
| var y = d * Math.sin(radAngle); | ||
| var params = className ? { | ||
| className: className | ||
| } : {}; | ||
| var onEnter = React.useCallback(function () { | ||
| if (onHover) { | ||
| onHover(true); | ||
| } | ||
| }, [onHover]); | ||
| var onLeave = React.useCallback(function () { | ||
| if (onHover) { | ||
| onHover(false); | ||
| } | ||
| }, [onHover]); | ||
| return React__default.createElement("div", Object.assign({}, params, { | ||
| onMouseEnter: onEnter, | ||
| onMouseLeave: onLeave, | ||
| style: _extends({}, style, { | ||
| position: 'absolute', | ||
| left: x, | ||
| top: y, | ||
| transform: 'translate(-50%, -50%)' | ||
| }), | ||
| onClick: onClick | ||
| }), children); | ||
| }; | ||
| var Planet = function Planet(props) { | ||
| var angle = props.angle, | ||
| children = props.children, | ||
| distance = props.distance, | ||
| radius = props.radius, | ||
| color = props.color, | ||
| className = props.className, | ||
| onHover = props.onHover, | ||
| onClick = props.onClick; | ||
| var context = React.useContext(orbitalContext); | ||
| if (!context) { | ||
| throw new Error('invalid context'); | ||
| } | ||
| var size = context.radius * radius * 2 + "px"; | ||
| var style = _extends({ | ||
| width: size, | ||
| height: size, | ||
| borderRadius: '50%' | ||
| }, color ? { | ||
| backgroundColor: color | ||
| } : {}, props.style); | ||
| var params = className ? { | ||
| className: className | ||
| } : {}; | ||
| return React__default.createElement(Place, Object.assign({}, params, { | ||
| angle: angle, | ||
| distance: distance || 0, | ||
| style: style, | ||
| onHover: onHover, | ||
| onClick: onClick | ||
| }), children); | ||
| }; | ||
| var Dial = function Dial(_ref) { | ||
| var style = _ref.style, | ||
| className = _ref.className, | ||
| color = _ref.color, | ||
| radius = _ref.radius; | ||
| var p = _extends({}, style ? { | ||
| style: style | ||
| } : {}, className ? { | ||
| className: className | ||
| } : {}, color ? { | ||
| color: color | ||
| } : {}); | ||
| return React__default.createElement(Planet, Object.assign({ | ||
| distance: 0, | ||
| angle: 0, | ||
| radius: radius || 1 | ||
| }, p)); | ||
| }; | ||
| var pullEventInfo = function pullEventInfo(e, inside, radius) { | ||
| var _inside$getBoundingCl = inside.getBoundingClientRect(), | ||
| left = _inside$getBoundingCl.left, | ||
| top = _inside$getBoundingCl.top; | ||
| var event = e.changedTouches ? e.changedTouches[0] : e; | ||
| var x = event.clientX - left - radius; | ||
| var y = event.clientY - top - radius; | ||
| return { | ||
| x: x, | ||
| y: y | ||
| }; | ||
| }; | ||
| var DragRegion = function DragRegion(props) { | ||
| var context = React.useContext(orbitalContext); | ||
| var ref = React.useRef(null); | ||
| if (!context) { | ||
| throw new Error('invalid context'); | ||
| } | ||
| var onDrag = React.useCallback(function (x) { | ||
| props.onDrag(x); | ||
| return x; | ||
| }, [props.onDrag]); | ||
| var _useState = React.useState({ | ||
| start: null, | ||
| current: null, | ||
| last: null | ||
| }), | ||
| dragInfo = _useState[0], | ||
| setDragInfo = _useState[1]; | ||
| var onMouseDown = React.useCallback(function (e) { | ||
| e.preventDefault(); | ||
| var coords = pullEventInfo(e, ref.current, context.radius); | ||
| setDragInfo(onDrag({ | ||
| start: coords, | ||
| current: coords, | ||
| last: null | ||
| })); | ||
| }, [setDragInfo, context.radius, onDrag]); | ||
| var onMouseMove = React.useCallback(function (e) { | ||
| if (dragInfo.start === null) { | ||
| return; | ||
| } | ||
| e.preventDefault(); | ||
| setDragInfo(function (before) { | ||
| return onDrag(_extends({}, before, { | ||
| current: pullEventInfo(e, ref.current, context.radius) | ||
| })); | ||
| }); | ||
| }, [setDragInfo, dragInfo, context.radius, onDrag]); | ||
| var onMouseUp = React.useCallback(function (e) { | ||
| if (dragInfo.start === null || dragInfo.current === null) { | ||
| return; | ||
| } | ||
| e.preventDefault(); | ||
| setDragInfo(function (before) { | ||
| return onDrag(_extends({}, before, { | ||
| start: null, | ||
| current: null, | ||
| last: pullEventInfo(e, ref.current, context.radius) | ||
| })); | ||
| }); | ||
| }, [setDragInfo, context.radius, onDrag]); | ||
| useEventListener('mousedown', onMouseDown, ref); | ||
| useEventListener('mouseup', onMouseUp); | ||
| useEventListener('mousemove', onMouseMove); | ||
| useEventListener('touchstart', onMouseDown, ref); | ||
| useEventListener('touchend', onMouseUp); | ||
| useEventListener('touchmove', onMouseMove); | ||
| if (!context) { | ||
| throw new Error('invalid context'); | ||
| } | ||
| return React__default.createElement("div", { | ||
| style: { | ||
| width: '100%', | ||
| height: '100%', | ||
| position: 'absolute', | ||
| left: 0, | ||
| top: 0, | ||
| transform: 'translate(-50%, -50%)', | ||
| borderRadius: '50%' | ||
| }, | ||
| ref: ref | ||
| }); | ||
| }; | ||
| var Hand = function Hand(props) { | ||
| var context = React.useContext(orbitalContext); | ||
| if (!context) { | ||
| throw 'invalid context'; | ||
| } | ||
| var angle = props.angle, | ||
| children = props.children, | ||
| color = props.color, | ||
| width = props.width; | ||
| var radius = context.radius; | ||
| var actualLength = 1; | ||
| var baseDistance = 0; | ||
| if (props.start !== undefined || props.end !== undefined) { | ||
| var start = props.start || 0; | ||
| var end = props.end || 1; | ||
| actualLength = radius * (end - start); | ||
| baseDistance = radius * start; | ||
| } else { | ||
| var length = props.length || 1; | ||
| actualLength = radius * length; | ||
| baseDistance = 0; | ||
| } | ||
| var style = _extends({}, color ? { | ||
| backgroundColor: color | ||
| } : {}, props.style, { | ||
| position: 'absolute', | ||
| transform: "rotate(" + angle + "deg) translate(" + baseDistance + "px, 0)", | ||
| transformOrigin: "center left", | ||
| left: 0, | ||
| top: 0, | ||
| width: actualLength, | ||
| height: width || 1 | ||
| }); | ||
| return React__default.createElement("div", { | ||
| className: (props.className || '') + " Hand", | ||
| style: _extends({}, style) | ||
| }, children); | ||
| }; | ||
| var Label = function Label(props) { | ||
| var distance = props.distance, | ||
| angle = props.angle, | ||
| children = props.children, | ||
| color = props.color; | ||
| var style = _extends({}, props.style, color ? { | ||
| color: color | ||
| } : {}); | ||
| return React__default.createElement(Place, { | ||
| angle: angle, | ||
| distance: distance || 1, | ||
| className: 'Label', | ||
| style: style | ||
| }, children); | ||
| }; | ||
| var Orbit = function Orbit(props) { | ||
| var style = props.style, | ||
| color = props.color, | ||
| width = props.width, | ||
| radius = props.radius; | ||
| return React__default.createElement(Planet, { | ||
| angle: 0, | ||
| distance: 0, | ||
| radius: radius || 1, | ||
| className: 'Orbit', | ||
| style: _extends({ | ||
| border: (width || 1) + "px solid " + color | ||
| }, style) | ||
| }); | ||
| }; | ||
| var Slice = function Slice(props) { | ||
| var context = React.useContext(orbitalContext); | ||
| if (!context) { | ||
| throw 'invalid context'; | ||
| } | ||
| var children = props.children, | ||
| color = props.color; | ||
| var angleStart = props.angleStart % 360; | ||
| var angleEnd = props.angleEnd % 360; | ||
| var angle = angleEnd - angleStart; | ||
| var radAngle = angle * (Math.PI / 180); | ||
| var radius = (props.length || 1) * context.radius; | ||
| var squareSize = radius * 2; | ||
| var middle = squareSize / 2 + "px"; | ||
| var left = '0px'; | ||
| var right = squareSize + "px"; | ||
| var top = '0px'; | ||
| var bottom = squareSize + "px"; | ||
| var at = function at(x, y) { | ||
| return x + " " + y; | ||
| }; | ||
| var points = [at(middle, middle), at(right, middle), at(right, bottom)]; | ||
| if (angle > 90) { | ||
| points.push(at(left, bottom)); | ||
| } | ||
| if (angle > 180) { | ||
| points.push(at(left, top)); | ||
| } | ||
| if (angle > 270) { | ||
| points.push(at(right, top)); | ||
| } | ||
| var x = radius + radius * Math.cos(radAngle); | ||
| var y = radius + radius * Math.sin(radAngle); | ||
| points.push(at(x + 'px', y + 'px')); | ||
| var clipPath = "polygon(" + points.join(',') + ")"; | ||
| var style = _extends({}, color ? { | ||
| backgroundColor: color | ||
| } : {}, props.style, { | ||
| position: 'absolute', | ||
| transform: "translate(-" + radius + "px, -" + radius + "px) rotate(" + angleStart + "deg)", | ||
| clipPath: clipPath, | ||
| WebkitClipPath: clipPath, | ||
| left: 0, | ||
| top: 0, | ||
| width: squareSize + "px", | ||
| height: squareSize + "px", | ||
| borderRadius: '50%' | ||
| }); | ||
| return React__default.createElement("div", { | ||
| className: (props.className || '') + " Slice", | ||
| style: _extends({}, style) | ||
| }, children); | ||
| }; | ||
| var OrbitalList = function OrbitalList(_ref) { | ||
| var children = _ref.children; | ||
| return React__default.createElement(OrbitalWrapper, null, children); | ||
| }; | ||
| var BIG_HOURS = new Set([0, 6, 12, 18]); | ||
| var HOURS = range(24); | ||
| var ANGLE_DELTA = 90; | ||
| var asAngle = function asAngle(hours, minutes) { | ||
| if (minutes === void 0) { | ||
| minutes = 0; | ||
| } | ||
| return hours / 24 * 360 + minutes / 60 * (360 / 24) + ANGLE_DELTA; | ||
| }; | ||
| var augmentItems = function augmentItems(time, items) { | ||
| var withHoursAndMinutes = items.map(function (item) { | ||
| var minutes = time.getUTCHours() * 60 + time.getUTCMinutes() - item.timezoneOffset + 24 * 60; | ||
| return _extends({}, item, { | ||
| hour: Math.floor(minutes / 60) % 24, | ||
| minute: minutes % 60 | ||
| }); | ||
| }); | ||
| var layerUsed = {}; | ||
| var use = function use(hour, distance) { | ||
| var H = hour + 24 % 24; | ||
| layerUsed[H] = Math.max(layerUsed[H] | 0, distance); | ||
| }; | ||
| var withLayer = withHoursAndMinutes.map(function (item) { | ||
| var hour = item.hour; | ||
| var layer = layerUsed[hour] !== undefined ? layerUsed[hour] + 1 : 0; | ||
| use(hour, layer); | ||
| use(hour + 1, layer); | ||
| use(hour - 1, layer); | ||
| return _extends({}, item, { | ||
| layer: layer | ||
| }); | ||
| }); | ||
| return withLayer; | ||
| }; | ||
| var Background = function Background() { | ||
| return React__default.createElement(React__default.Fragment, null, React__default.createElement(Dial, { | ||
| className: 'Dial', | ||
| radius: 1, | ||
| color: '#F3A712' | ||
| }), React__default.createElement(Slice, { | ||
| angleStart: asAngle(18), | ||
| angleEnd: asAngle(6), | ||
| color: '#133762' | ||
| }), React__default.createElement(Orbit, { | ||
| color: 'rgba(255, 255, 255, 0.4)', | ||
| width: 2, | ||
| radius: 0.7 | ||
| }), React__default.createElement(Orbit, { | ||
| color: 'rgba(255, 255, 255, 0.4)', | ||
| width: 2, | ||
| radius: 0.45 | ||
| }), React__default.createElement(Orbit, { | ||
| color: 'rgba(255, 255, 255, 0.4)', | ||
| width: 2, | ||
| radius: 0.2 | ||
| })); | ||
| }; | ||
| var TimeHand = function TimeHand(_ref) { | ||
| var hours = _ref.hours, | ||
| minutes = _ref.minutes; | ||
| return React__default.createElement(React__default.Fragment, null, React__default.createElement(Hand, { | ||
| angle: asAngle(hours, minutes), | ||
| color: '#DB2B39', | ||
| width: 7, | ||
| length: 0.51, | ||
| style: { | ||
| borderRadius: '0.3rem' | ||
| } | ||
| }), React__default.createElement(Hand, { | ||
| style: { | ||
| borderRadius: '0.3rem' | ||
| }, | ||
| angle: asAngle(hours, minutes) + 180, | ||
| color: '#DB2B39', | ||
| width: 7, | ||
| length: 0.15 | ||
| }), React__default.createElement(Dial, { | ||
| className: 'Dial', | ||
| radius: 0.08, | ||
| color: '#DB2B39' | ||
| })); | ||
| }; | ||
| var HoursSlice = function HoursSlice(_ref2) { | ||
| var active = _ref2.active; | ||
| return React__default.createElement(React__default.Fragment, null, HOURS.map(function (hour) { | ||
| return React__default.createElement(Slice, { | ||
| key: hour, | ||
| style: { | ||
| transition: 'background-color 0.6s ease' | ||
| }, | ||
| angleStart: asAngle(hour) + 0.5, | ||
| angleEnd: asAngle(hour + 1) - 0.5, | ||
| color: "rgba(255, 255, 255, " + (active.has(hour) ? '0.08' : '0') + ")" | ||
| }); | ||
| })); | ||
| }; | ||
| var Ticks = function Ticks(_ref3) { | ||
| var active = _ref3.active; | ||
| return React__default.createElement(React__default.Fragment, null, HOURS.map(function (hour) { | ||
| var opacity = BIG_HOURS.has(hour) ? '1' : active.has(hour) ? '0.7' : '0.1'; | ||
| var fontSize = BIG_HOURS.has(hour) ? '1.8rem' : '1.2rem'; | ||
| var color = "rgba(255, 255, 255, " + opacity + ")"; | ||
| return React__default.createElement(React__default.Fragment, { | ||
| key: hour | ||
| }, React__default.createElement(Label, { | ||
| angle: asAngle(hour), | ||
| distance: 0.89, | ||
| color: color, | ||
| style: { | ||
| fontSize: fontSize, | ||
| fontWeight: 'bold' | ||
| } | ||
| }, lpad(hour, 2)), React__default.createElement(Hand, { | ||
| start: 0.95, | ||
| end: 0.99, | ||
| color: color, | ||
| style: { | ||
| borderRadius: '0.2rem' | ||
| }, | ||
| angle: asAngle(hour), | ||
| width: 2 | ||
| })); | ||
| })); | ||
| }; | ||
| var HandSeconds = function HandSeconds(_ref4) { | ||
| var seconds = _ref4.seconds; | ||
| return React__default.createElement(Hand, { | ||
| style: { | ||
| borderRadius: '0.1rem' | ||
| }, | ||
| angle: seconds / 60 * 360 + ANGLE_DELTA, | ||
| color: 'rgba(255, 255, 255, 0.9)', | ||
| width: 2, | ||
| length: 0.73 | ||
| }); | ||
| }; | ||
| var BackgroundAndHands = function BackgroundAndHands(_ref5) { | ||
| var activeItemHours = _ref5.activeItemHours, | ||
| activeTickHours = _ref5.activeTickHours, | ||
| hours = _ref5.hours, | ||
| minutes = _ref5.minutes, | ||
| seconds = _ref5.seconds; | ||
| return React__default.createElement(React__default.Fragment, null, React__default.createElement(Background, null), React__default.createElement(HoursSlice, { | ||
| active: activeItemHours | ||
| }), React__default.createElement(Ticks, { | ||
| active: activeTickHours | ||
| }), React__default.createElement(HandSeconds, { | ||
| seconds: seconds | ||
| }), React__default.createElement(TimeHand, { | ||
| hours: hours, | ||
| minutes: minutes | ||
| })); | ||
| }; | ||
| var Peoples = function Peoples(_ref6) { | ||
| var items = _ref6.items, | ||
| distance = _ref6.distance; | ||
| return React__default.createElement(React__default.Fragment, null, items.map(function (_ref7) { | ||
| var id = _ref7.id, | ||
| color = _ref7.color, | ||
| hour = _ref7.hour, | ||
| minute = _ref7.minute, | ||
| layer = _ref7.layer, | ||
| style = _ref7.style, | ||
| children = _ref7.children, | ||
| onHover = _ref7.onHover, | ||
| onClick = _ref7.onClick; | ||
| return React__default.createElement(Planet, { | ||
| onHover: onHover, | ||
| onClick: onClick, | ||
| key: id, | ||
| style: _extends({ | ||
| backgroundColor: color | ||
| }, style), | ||
| angle: asAngle(hour, minute), | ||
| radius: 0.09, | ||
| distance: distance(layer) | ||
| }, children); | ||
| })); | ||
| }; | ||
| function useDebounce(value, delay) { | ||
| if (delay === void 0) { | ||
| delay = 500; | ||
| } | ||
| var _useState = React.useState(value), | ||
| debouncedValue = _useState[0], | ||
| setDebouncedValue = _useState[1]; | ||
| React.useEffect(function () { | ||
| var handler = setTimeout(function () { | ||
| setDebouncedValue(value); | ||
| }, delay); | ||
| return function () { | ||
| clearTimeout(handler); | ||
| }; | ||
| }, [value, delay]); | ||
| return debouncedValue; | ||
| } | ||
| var TimezoneClock = function TimezoneClock(props) { | ||
| var myTime = useDatetime(); | ||
| var _useEasedState = useEasedState(-80, 1000, 'easeInOutQuart'), | ||
| delta = _useEasedState[0], | ||
| setDelta = _useEasedState[1], | ||
| resetDelta = _useEasedState[2]; | ||
| var _useState2 = React.useState(myTime.getSeconds()), | ||
| setSeconds = _useState2[1]; | ||
| React.useEffect(function () { | ||
| setDelta(0); | ||
| }, []); | ||
| React.useEffect(function () { | ||
| setSeconds(myTime.getSeconds()); | ||
| }, [myTime.getSeconds()]); | ||
| var onDrag = React.useCallback(function (i) { | ||
| var start = i.start, | ||
| current = i.current, | ||
| last = i.last; | ||
| if (last && !start) { | ||
| setDelta(0); | ||
| return; | ||
| } | ||
| if (!start || !current) { | ||
| return; | ||
| } | ||
| var startAngle = Math.atan2(start.y, start.x); | ||
| var currentAngle = Math.atan2(current.y, current.x); | ||
| resetDelta(toDeg(currentAngle - startAngle) / 360 * 24 * 60); | ||
| }, [setDelta, resetDelta]); | ||
| var time = new Date(myTime); | ||
| time.setMinutes(time.getMinutes() + delta); | ||
| var debouncedTime = useDebounce(time, 1500); | ||
| React.useEffect(function () { | ||
| window.alert('hello'); | ||
| props.setCurrentTime ? props.setCurrentTime(debouncedTime) : null; | ||
| }, [debouncedTime, props.setCurrentTime]); | ||
| var items = augmentItems(time, props.items); | ||
| var itemsHours = items.map(function (x) { | ||
| return x.hour; | ||
| }); | ||
| var activeItemHours = new Set([].concat(itemsHours)); | ||
| var activeTickHours = new Set([].concat(itemsHours, [0, 6, 12, 18, time.getHours()])); | ||
| var maxLayer = Math.max.apply(Math, items.map(function (x) { | ||
| return x.layer; | ||
| })); | ||
| var layerCoeficient = maxLayer === 0 ? 1 : 1 / maxLayer; | ||
| var LAYER_MIN = 0.33; | ||
| var LAYER_MAX = 0.75; | ||
| var LAYER_RANGE = LAYER_MAX - LAYER_MIN; | ||
| var distance = function distance(layer) { | ||
| return LAYER_MAX - layer * layerCoeficient * LAYER_RANGE; | ||
| }; | ||
| return React__default.createElement(OrbitalList, null, React__default.createElement(BackgroundAndHands, { | ||
| activeItemHours: activeItemHours, | ||
| activeTickHours: activeTickHours, | ||
| hours: time.getHours(), | ||
| minutes: time.getMinutes(), | ||
| seconds: time.getSeconds() | ||
| }), React__default.createElement(DragRegion, { | ||
| onDrag: onDrag | ||
| }), React__default.createElement(Peoples, { | ||
| items: items, | ||
| distance: distance | ||
| })); | ||
| }; | ||
| exports.Dial = Dial; | ||
| exports.DragRegion = DragRegion; | ||
| exports.Hand = Hand; | ||
| exports.Label = Label; | ||
| exports.Orbit = Orbit; | ||
| exports.OrbitalList = OrbitalList; | ||
| exports.Place = Place; | ||
| exports.Planet = Planet; | ||
| exports.Slice = Slice; | ||
| exports.TimezoneClock = TimezoneClock; | ||
| //# sourceMappingURL=index.js.map |
@@ -9,2 +9,1 @@ /// <reference types="react" /> | ||
| export declare const toDeg: (radians: number) => number; | ||
| export declare const useEasedState: (value: number, duration?: number, easingName?: string) => [number, (x: number) => void, (x: number) => void]; |
| { | ||
| "name": "orbital-list", | ||
| "version": "0.1.9-rc.8", | ||
| "description": "A React library to display data using circles, orbits, and planets.", | ||
| "author": "lsenta", | ||
| "version": "0.2.0", | ||
| "license": "MIT", | ||
| "repository": "laurentsenta/orbital-list", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.modern.js", | ||
| "source": "src/index.tsx", | ||
| "typings": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist", | ||
| "src" | ||
| ], | ||
| "engines": { | ||
@@ -15,50 +14,50 @@ "node": ">=10" | ||
| "scripts": { | ||
| "build": "microbundle-crl --no-compress --format modern,cjs", | ||
| "start": "microbundle-crl watch --no-compress --format modern,cjs", | ||
| "prepublish": "run-s build", | ||
| "test": "run-s test:unit test:lint test:build", | ||
| "test:build": "run-s build", | ||
| "test:lint": "echo SKIPPED: eslint .", | ||
| "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", | ||
| "test:watch": "react-scripts test --env=jsdom", | ||
| "predeploy": "cd example && yarn install && rm -rf ../node_modules/react ../node_modules/react-dom && yarn run build", | ||
| "deploy": "gh-pages -d example/build" | ||
| "start": "tsdx watch", | ||
| "build": "tsdx build", | ||
| "test": "tsdx test --passWithNoTests", | ||
| "lint": "tsdx lint", | ||
| "prepare": "tsdx build", | ||
| "size": "size-limit", | ||
| "analyze": "size-limit --why" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1" | ||
| "react": ">=16" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/jest": "^25.1.4", | ||
| "@types/react": "^16.9.27", | ||
| "@typescript-eslint/eslint-plugin": "^2.26.0", | ||
| "@typescript-eslint/parser": "^2.26.0", | ||
| "babel-eslint": "^10.0.3", | ||
| "cross-env": "^7.0.2", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-prettier": "^6.7.0", | ||
| "eslint-config-standard": "^14.1.0", | ||
| "eslint-config-standard-react": "^9.2.0", | ||
| "eslint-plugin-import": "^2.18.2", | ||
| "eslint-plugin-node": "^11.0.0", | ||
| "eslint-plugin-prettier": "^3.1.1", | ||
| "eslint-plugin-promise": "^4.2.1", | ||
| "eslint-plugin-react": "^7.17.0", | ||
| "eslint-plugin-standard": "^4.0.1", | ||
| "gh-pages": "^2.2.0", | ||
| "husky": "^4.2.5", | ||
| "microbundle-crl": "^0.13.8", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "2.0.5", | ||
| "pretty-quick": "^2.0.1", | ||
| "react-scripts": "^3.4.1" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "pretty-quick --staged" | ||
| "pre-commit": "tsdx lint" | ||
| } | ||
| } | ||
| }, | ||
| "prettier": { | ||
| "printWidth": 80, | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "trailingComma": "es5" | ||
| }, | ||
| "name": "orbital-list", | ||
| "author": "laurentsenta", | ||
| "module": "dist/orbital-list.esm.js", | ||
| "size-limit": [ | ||
| { | ||
| "path": "dist/orbital-list.cjs.production.min.js", | ||
| "limit": "10 KB" | ||
| }, | ||
| { | ||
| "path": "dist/orbital-list.esm.js", | ||
| "limit": "10 KB" | ||
| } | ||
| ], | ||
| "devDependencies": { | ||
| "@size-limit/preset-small-lib": "^4.9.1", | ||
| "@types/react": "^17.0.0", | ||
| "@types/react-dom": "^17.0.0", | ||
| "husky": "^4.3.7", | ||
| "react": "^17.0.1", | ||
| "react-dom": "^17.0.1", | ||
| "size-limit": "^4.9.1", | ||
| "tsdx": "^0.14.1", | ||
| "tslib": "^2.1.0", | ||
| "typescript": "^3.9.5" | ||
| }, | ||
| "dependencies": {} | ||
| } |
@@ -1,14 +0,14 @@ | ||
|  | ||
|  | ||
| # orbital-list | ||
| A React library to display data using circles, orbits, and planets. | ||
| A React library to create interfaces using circles, orbits, and planets. | ||
| [](https://www.npmjs.com/package/orbital-list) [](https://standardjs.com) | ||
| [](https://www.npmjs.com/package/orbital-list) | ||
|  | ||
|  | ||
| Visit [laurentsenta.com/orbital-list](http://www.laurentsenta.com/orbital-list/) for an interactive example. | ||
| Visit [orbital-list.laurentsenta.com](https://orbital-list.laurentsenta.com/) for an interactive example. | ||
| Or even check out [whena.re](https://whena.re/), it's built with the library and helps you and your team dealing with timezones. | ||
| Check it out in production: **[whena.re](https://whena.re/)** is built with the library and helps you and your team to deal with timezones. | ||
@@ -33,2 +33,5 @@ ## Install | ||
| Check the example to see the code behind the [demo](https://orbital-list.laurentsenta.com/). | ||
| ```tsx | ||
@@ -35,0 +38,0 @@ import React, { Component } from 'react' |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-50%
1
- Dev dependency count
- decreased by-56.52%
10
- Number of package files
- increased by71.43%
36
- Lines of code
- increased by7.12%
1851
- Number of lines in readme file
- increased by3.45%
90
Worsened metrics
- Total package byte prevSize
- decreased by-8.32%
151836
- Number of low quality alerts
- increased by50%
3
- Number of low supply chain risk alerts
- increased by100%
2
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes