@arcblock/ux 2.9.91 → 2.10.0

package/es/Earth/index.js

@@ -1,521 +0,0 @@
-/* eslint-disable consistent-return */
-import { useReducer, useRef, useEffect } from 'react';
-import useSpring from 'react-use/lib/useSpring';
-import PropTypes from 'prop-types';
-import * as d3 from 'd3-geo';
-import * as topojson from 'topojson-client';
-import versor from 'versor';
-import json from './countries.json';
-import util from './util';
-import { withDeprecated } from '../Util/deprecate';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
-const themes = {
-  light: {
-    ocean: '#EDF4F4',
-    graticule: '#EDF4F4',
-    land: '#CCEAEA',
-    activeLand: '#AFD3D3',
-    border: '#AFD3D3',
-    marker: '#4E6AF6',
-    activeMarker: '#4E6AF6'
-  },
-  dark: {
-    ocean: '#09233B',
-    graticule: '#09233B',
-    land: '#0D2344',
-    activeLand: '#173159',
-    border: '#89DDD9',
-    marker: '#ffffff',
-    activeMarker: '#FFD159'
-  }
-};
-function stateReducer(state, action) {
-  switch (action.type) {
-    case 'dragEnd':
-      return {
-        ...state,
-        isDragging: false
-      };
-    case 'dragStart':
-      return {
-        ...state,
-        isDragging: true,
-        animationDuration: 1,
-        mousePosition: action.payload.mousePosition
-      };
-    case 'tooltip':
-    case 'rotate':
-      return Object.assign({}, state, action.payload);
-    default:
-      return state;
-  }
-}
-function Earth({
-  theme,
-  width,
-  height,
-  enableRotation,
-  rotationSpeed,
-  markers,
-  activeMarkerId,
-  colors
-}) {
-  Object.assign(colors, themes[theme]);
-  const [state, dispatch] = useReducer(stateReducer, {
-    rotation: [0, 0, 0],
-    isDragging: false,
-    animateDuration: 1,
-    mousePosition: null,
-    tooltipIndex: -1
-  });
-  const svgRef = useRef(null);
-
-  // variables used to track drag and rotate
-  const dragRef = useRef({
-    v0: undefined,
-    r0: undefined,
-    q0: undefined
-  });
-
-  // variables used to track start and end position when there is active marker
-  const rotateRef = useRef({
-    p1: null,
-    p2: [0, 0],
-    r1: null,
-    r2: [0, 0, 0],
-    step: 0,
-    markerId: null,
-    iv: null
-  });
-
-  // console.log('renderGlobe', state, dragRef.current, rotateRef.current, geoJson);
-  const t = useSpring(state.animateDuration, 170, 26);
-  const isValid = activeMarkerId && rotateRef.current.markerId !== activeMarkerId && markers.some(x => x.id === activeMarkerId);
-
-  // Setup path for globe
-  const projection = d3.geoOrthographic().fitExtent([[30, 30], [width - 30, height - 30]], geoJson).rotate(t <= 1 || state.isDragging || !activeMarkerId ? state.rotation : rotateRef.current.iv(t / state.animateDuration));
-  const pathGenerator = d3.geoPath().projection(projection).pointRadius(2);
-  useEffect(() => {
-    // Rotate to active marker
-    if (isValid) {
-      // eslint-disable-next-line prefer-const
-      let {
-        p1,
-        p2,
-        r1,
-        r2,
-        markerId
-      } = rotateRef.current;
-      // We should only start new animation if the marker has changed
-      if (markerId !== activeMarkerId && !state.isDragging) {
-        const marker = markers.find(x => x.id === activeMarkerId);
-        p1 = p2;
-        p2 = [marker.longitude, marker.latitude];
-        r1 = r2;
-        r2 = [-p2[0], 20 - p2[1], projection.rotate()[2]];
-        const iv = util.interpolateAngles(r1, r2);
-        Object.assign(rotateRef.current, {
-          p1,
-          p2,
-          r1,
-          r2,
-          iv,
-          markerId: activeMarkerId
-        });
-        const duration = state.animateDuration * 2;
-        dispatch({
-          type: 'rotate',
-          payload: {
-            animateDuration: duration > 1e3 ? 2 : duration
-          }
-        });
-      }
-
-      // Enable auto rotation
-    } else if (enableRotation) {
-      const handler = window.requestAnimationFrame(() => {
-        const newRotation = [state.rotation[0] + 2 / rotationSpeed, state.rotation[1], state.rotation[2]];
-        dispatch({
-          type: 'rotate',
-          payload: {
-            rotation: newRotation
-          }
-        });
-      });
-      return function cleanup() {
-        window.cancelAnimationFrame(handler);
-      };
-    }
-  });
-  const getMousePosition = event => {
-    const node = svgRef.current;
-    const rect = node.getBoundingClientRect();
-    const mousePosition = [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
-    return mousePosition;
-  };
-  const onDragStart = event => {
-    const mousePosition = getMousePosition(event);
-    if (!mousePosition[0]) {
-      return;
-    }
-    dragRef.current.v0 = versor.cartesian(projection.invert(mousePosition));
-    dragRef.current.r0 = projection.rotate();
-    dragRef.current.q0 = versor(dragRef.current.r0);
-    dispatch({
-      type: 'dragStart',
-      payload: {
-        mousePosition
-      }
-    });
-  };
-  const onDrag = event => {
-    if (state.isDragging === false) {
-      return;
-    }
-    const mousePosition = getMousePosition(event);
-    const {
-      r0,
-      v0,
-      q0
-    } = dragRef.current;
-    const v1 = versor.cartesian(projection.rotate(r0).invert(mousePosition));
-    const q1 = versor.multiply(q0, versor.delta(v0, v1));
-    const r1 = versor.rotation(q1);
-    dispatch({
-      type: 'rotate',
-      payload: {
-        rotation: r1,
-        mousePosition
-      }
-    });
-  };
-  const onDragEnd = () => {
-    setTimeout(() => {
-      dispatch({
-        type: 'dragEnd',
-        payload: {}
-      });
-    }, 200);
-  };
-  const onShowTooltip = (event, i) => dispatch({
-    type: 'tooltip',
-    payload: {
-      tooltipIndex: i,
-      mousePosition: getMousePosition(event)
-    }
-  });
-  const onHideTooltip = () => dispatch({
-    type: 'tooltip',
-    payload: {
-      tooltipIndex: -1,
-      mousePosition: null
-    }
-  });
-  const renderMarkers = () => markers.map((x, i) => {
-    const areaCoords = [x.longitude, x.latitude];
-    const distance = d3.geoDistance(areaCoords, projection.invert([width / 2, height / 2]));
-    const sphereCoords = projection(areaCoords);
-    const isActive = activeMarkerId === x.id;
-    // eslint-disable-next-line no-nested-ternary
-    const fill = distance > 1.57 ? 'none' : isActive ? colors.activeMarker : colors.marker;
-    const radius = isActive ? 9 : 6;
-    return /*#__PURE__*/_jsxs("g", {
-      className: `marker ${isActive ? 'marker--active' : ''}`,
-      onFocus: event => onShowTooltip(event, i),
-      onBlur: onHideTooltip,
-      onMouseOver: event => onShowTooltip(event, i),
-      onMouseOut: onHideTooltip,
-      children: [/*#__PURE__*/_jsx("circle", {
-        className: "marker__inner",
-        r: radius,
-        cx: sphereCoords[0],
-        cy: sphereCoords[1],
-        fill: fill,
-        style: {
-          fillOpacity: isActive ? 1 : 0.5
-        }
-      }, "marker-inner"), /*#__PURE__*/_jsx("circle", {
-        className: "marker__outer",
-        r: radius * 2,
-        cx: sphereCoords[0],
-        cy: sphereCoords[1],
-        fill: fill,
-        style: {
-          animationDuration: isActive ? '800ms' : '1600ms',
-          animationDelay: `${i * 0.2}s`,
-          transformOrigin: `${sphereCoords[0]}px ${sphereCoords[1]}px`
-        }
-      }, "marker-outer")]
-    }, x.id);
-  });
-  const renderTooltip = () => {
-    if (state.tooltipIndex >= 0) {
-      const marker = markers[state.tooltipIndex];
-      return /*#__PURE__*/_jsxs(Tooltip, {
-        style: {
-          left: state.mousePosition[0],
-          top: state.mousePosition[1]
-        },
-        children: [/*#__PURE__*/_jsx("p", {
-          className: "title",
-          children: marker.title
-        }), /*#__PURE__*/_jsx("p", {
-          className: "description",
-          children: marker.description
-        }), /*#__PURE__*/_jsxs("p", {
-          className: "description",
-          children: ["ID: ", marker.id]
-        })]
-      });
-    }
-  };
-  let activeCountry = null;
-  if (activeMarkerId && markers.some(x => x.id === activeMarkerId)) {
-    const activeMarker = markers.find(x => x.id === activeMarkerId);
-    activeCountry = geoJson.features.findIndex(x => x.properties && x.properties.name && x.properties.name === activeMarker.country);
-  }
-  return /*#__PURE__*/_jsxs(Container, {
-    width: width,
-    height: height,
-    theme: theme,
-    colors: colors,
-    onMouseLeave: onDragEnd,
-    children: [renderTooltip(), /*#__PURE__*/_jsxs("svg", {
-      className: "earth",
-      width: width,
-      height: height,
-      onMouseDown: onDragStart,
-      onMouseMove: onDrag,
-      onMouseUp: onDragEnd,
-      ref: svgRef,
-      children: [/*#__PURE__*/_jsx("rect", {
-        className: "frame",
-        width: width,
-        height: height
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: width / 2,
-        cy: height / 2,
-        r: projection.scale(),
-        className: "globe",
-        filter: "url(#glow)"
-      }), /*#__PURE__*/_jsx("path", {
-        className: "graticule",
-        d: pathGenerator(d3.geoGraticule().step([10, 10])())
-      }), /*#__PURE__*/_jsx("g", {
-        className: "features",
-        children: geoJson.features.map((x, i) => /*#__PURE__*/_jsx("path", {
-          className: `country ${activeCountry === i ? 'country--active' : ''}`,
-          d: pathGenerator(x)
-        }, x.properties.name))
-      }), /*#__PURE__*/_jsx("g", {
-        className: "markers",
-        children: renderMarkers()
-      }), state.isDragging && state.mousePosition && /*#__PURE__*/_jsx("path", {
-        className: "point point-mouse",
-        d: pathGenerator({
-          type: 'Point',
-          coordinates: projection.invert(state.mousePosition)
-        })
-      })]
-    }), /*#__PURE__*/_jsx("svg", {
-      className: "defs",
-      children: /*#__PURE__*/_jsxs("defs", {
-        children: [/*#__PURE__*/_jsxs("linearGradient", {
-          id: "gradBlue",
-          x1: "0%",
-          y1: "0%",
-          x2: "100%",
-          y2: "0%",
-          children: [/*#__PURE__*/_jsx("stop", {
-            offset: "0%",
-            style: {
-              stopColor: '#005C99',
-              stopOpacity: 1
-            }
-          }), /*#__PURE__*/_jsx("stop", {
-            offset: "100%",
-            style: {
-              stopColor: '#0099FF',
-              stopOpacity: 1
-            }
-          })]
-        }), /*#__PURE__*/_jsxs("filter", {
-          id: "glow",
-          children: [/*#__PURE__*/_jsx("feColorMatrix", {
-            type: "matrix",
-            values: "0 0 0 0   0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1   0"
-          }), /*#__PURE__*/_jsx("feGaussianBlur", {
-            stdDeviation: "5.5",
-            result: "coloredBlur"
-          }), /*#__PURE__*/_jsxs("feMerge", {
-            children: [/*#__PURE__*/_jsx("feMergeNode", {
-              in: "coloredBlur"
-            }), /*#__PURE__*/_jsx("feMergeNode", {
-              in: "SourceGraphic"
-            })]
-          })]
-        })]
-      })
-    })]
-  });
-}
-Earth.propTypes = {
-  theme: PropTypes.oneOf(['light', 'dark']),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  enableRotation: PropTypes.bool,
-  rotationSpeed: PropTypes.number,
-  activeMarkerId: PropTypes.string,
-  markers: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    country: PropTypes.string.isRequired,
-    latitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    longitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-  })),
-  colors: PropTypes.shape({
-    ocean: PropTypes.string,
-    graticule: PropTypes.string,
-    land: PropTypes.string,
-    activeLand: PropTypes.string,
-    border: PropTypes.string,
-    marker: PropTypes.string,
-    activeMarker: PropTypes.string
-  })
-};
-Earth.defaultProps = {
-  theme: 'dark',
-  width: 1200,
-  height: 600,
-  enableRotation: false,
-  rotationSpeed: 5,
-  markers: [],
-  activeMarkerId: undefined,
-  colors: {}
-};
-export default withDeprecated(Earth, {
-  name: 'Earth'
-});
-const Container = styled('div')`
-  background-color: ${props => props.theme === 'light' ? '#f7f7f7' : '#222'};
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-  position: relative;
-  animation-name: zoomIn;
-  animation-duration: 1s;
-  animation-iteration-count: 1;
-  animation-timing-function: ease;
-  user-select: none;
-
-  .defs {
-    height: 0;
-    width: 0;
-  }
-
-  .frame {
-    fill: none;
-    pointer-events: all;
-  }
-
-  .country {
-    fill: ${props => props.colors.land};
-    stroke: ${props => props.colors.border};
-    stroke-width: 0.5px;
-    transition: fill 300ms ease;
-
-    &:hover {
-      fill: ${props => props.colors.activeLand};
-    }
-  }
-
-  .country--active {
-    fill: ${props => props.colors.activeLand};
-  }
-
-  .globe {
-    fill: ${props => props.colors.ocean};
-    stroke: rgba(255, 255, 255, 0.5);
-    stroke-width: 0.25px;
-  }
-
-  .graticule {
-    fill: none;
-    stroke: ${props => props.colors.graticule};
-  }
-
-  .star {
-    fill: #fff;
-    stroke: rgba(255, 255, 255, 0.5);
-    stroke-width: 0.25px;
-  }
-
-  .marker {
-    .marker__outer {
-      fill-opacity: 0;
-      animation: scaleIn 2s infinite ease-in-out;
-    }
-  }
-
-  @keyframes zoomIn {
-    from {
-      opacity: 0;
-      transform: scale3d(0.1, 0.1, 0.1);
-    }
-
-    50% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes scaleIn {
-    from {
-      fill-opacity: 0.3;
-      transform: scale3d(0.5, 0.5, 0.5);
-    }
-    to {
-      fill-opacity: 0;
-      transform: scale3d(1.5, 1.5, 1.5);
-    }
-  }
-`;
-const Tooltip = styled('div')`
-  position: absolute;
-  width: auto;
-  min-width: 90px;
-  max-width: 320px;
-  padding: 8px 12px;
-  font-size: 14px;
-  background-color: #4a4a4a;
-  border-radius: 2px;
-  animation-name: fadeIn;
-  animation-duration: 250ms;
-  animation-iteration-count: 1;
-  animation-timing-function: ease;
-
-  .title,
-  .description {
-    margin: 0;
-    font-size: 16px;
-    color: #fff;
-  }
-
-  .description {
-    margin-top: ${props => props.theme.spacing(1)}px;
-    color: #fff;
-    font-size: 12px;
-  }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-`;

package/es/Earth/util.js

@@ -1,51 +0,0 @@
-/* eslint-disable */
-// Code from: https://observablehq.com/@d3/world-tour
-export default class Util {
-  static fromAngles([l, p, g]) {
-    l *= Math.PI / 360;
-    p *= Math.PI / 360;
-    g *= Math.PI / 360;
-    const sl = Math.sin(l);
-    const cl = Math.cos(l);
-    const sp = Math.sin(p);
-    const cp = Math.cos(p);
-    const sg = Math.sin(g);
-    const cg = Math.cos(g);
-    return [cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg];
-  }
-  static toAngles([a, b, c, d]) {
-    return [Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI];
-  }
-  static interpolateAngles(a, b) {
-    const i = Util.interpolate(Util.fromAngles(a), Util.fromAngles(b));
-    return t => Util.toAngles(i(t));
-  }
-  static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) {
-    a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1;
-    const x = new Array(4);
-    return t => {
-      const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t);
-      x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l;
-      return x;
-    };
-  }
-  static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) {
-    let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2;
-    if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot;
-    if (dot > 0.9995) return Util.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]);
-    const theta0 = Math.acos(Math.max(-1, Math.min(1, dot)));
-    const x = new Array(4);
-    const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot);
-    a2 /= l, b2 /= l, c2 /= l, d2 /= l;
-    return t => {
-      const theta = theta0 * t;
-      const s = Math.sin(theta);
-      const c = Math.cos(theta);
-      x[0] = a1 * c + a2 * s;
-      x[1] = b1 * c + b2 * s;
-      x[2] = c1 * c + c2 * s;
-      x[3] = d1 * c + d2 * s;
-      return x;
-    };
-  }
-}

package/es/Empty/index.js

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled(Box)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 100%;
-  min-height: 100px;
-  color: #999;
-  .empty-icon {
-    margin: 10px 0;
-  }
-`;
-
-/**
- * Empty component to display empty state
- * @typedef {{
- *   color?: string;
- *   size?: number;
- *   children?: import('react').ReactNode;
- * } & import('react').ComponentPropsWithoutRef<"div"> } EmptyProps
- */
-
-/**
- * Empty state component
- * @param {EmptyProps} props
- * @returns {JSX.Element}
- */
-function Empty({
-  color,
-  size,
-  children,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    ...rest,
-    children: [/*#__PURE__*/_jsx(EmptyIcon, {
-      style: {
-        width: size,
-        height: size,
-        color
-      },
-      className: "empty-icon"
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "empty-content",
-      children: children
-    })]
-  });
-}
-Empty.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.number,
-  children: PropTypes.any
-};
-Empty.defaultProps = {
-  color: 'inherit',
-  size: 36,
-  children: null
-};
-export default Empty;

package/es/ErrorBoundary/fallback.js

@@ -1,73 +0,0 @@
-import PropTypes from 'prop-types';
-import { red } from '@mui/material/colors';
-import Button from '../Button';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function InternalErrorFallback({
-  title,
-  desc,
-  retryFunc
-}) {
-  return /*#__PURE__*/_jsxs(Root, {
-    role: "alert",
-    children: [/*#__PURE__*/_jsx("h3", {
-      children: title
-    }), /*#__PURE__*/_jsx("pre", {
-      children: desc
-    }), retryFunc && /*#__PURE__*/_jsx(Button, {
-      variant: "contained",
-      color: "error",
-      size: "small",
-      onClick: retryFunc,
-      children: "Try again"
-    })]
-  });
-}
-InternalErrorFallback.propTypes = {
-  title: PropTypes.string,
-  desc: PropTypes.string.isRequired,
-  retryFunc: PropTypes.func
-};
-InternalErrorFallback.defaultProps = {
-  title: 'Something went wrong...',
-  retryFunc: null
-};
-export function ErrorFallback({
-  error
-}) {
-  return /*#__PURE__*/_jsx(InternalErrorFallback, {
-    desc: error.message
-  });
-}
-ErrorFallback.propTypes = {
-  error: PropTypes.instanceOf(Error).isRequired
-};
-export function ErrorFallbackRetry({
-  error,
-  resetErrorBoundary
-}) {
-  return /*#__PURE__*/_jsx(InternalErrorFallback, {
-    desc: error.message,
-    retryFunc: resetErrorBoundary
-  });
-}
-ErrorFallbackRetry.propTypes = {
-  error: PropTypes.instanceOf(Error).isRequired,
-  resetErrorBoundary: PropTypes.func.isRequired
-};
-const Root = styled('div')`
-  padding: 16px;
-  border: 2px solid ${props => props.theme.palette.error.main};
-  border-radius: 4px;
-  color: ${props => props.theme.palette.error.main};
-  background-color: ${red[50]};
-  font-size: 14px;
-  h3 {
-    margin: 0;
-    font-size: 16px;
-  }
-  pre {
-    white-space: normal;
-  }
-`;

package/es/ErrorBoundary/index.js

@@ -1 +0,0 @@
-export * from './fallback';