@arcblock/ux 2.6.8 → 2.7.0

package/es/Earth/index.js

@@ -0,0 +1,521 @@
+/* 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

@@ -0,0 +1,51 @@
+/* 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

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+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('div')`
+  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("div", {
+      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

@@ -0,0 +1,73 @@
+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

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