@arcblock/ux 1.16.0 → 1.16.4

package/src/NFTDisplay/loading.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function Loading() {
+  return <Root className="nft-display__loading">loading...</Root>;
+}
+
+const Root = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: #ccc;
+  background-color: #eee;
+`;

package/src/NFTDisplay/svg-embedder/img.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InlineSvgEmbedder from './inline-svg';
+
+const svgToImgUrl = svg => {
+  // fix: #225, https://stackoverflow.com/a/52135328)
+  const blob = new Blob([svg], { type: 'image/svg+xml' });
+  return URL.createObjectURL(blob);
+};
+
+/**
+ * 基于 <img> 嵌入 svg
+ */
+function ImgEmbedder({ svg, alt, fallback, ...rest }) {
+  // 包含 foreignObject 的 svg, fallback 到 shadow dom
+  if (fallback && svg.indexOf('</foreignObject>') > -1) {
+    return <InlineSvgEmbedder svg={svg} />;
+  }
+
+  const url = svgToImgUrl(svg);
+  return <img src={url} onLoad={() => URL.revokeObjectURL(url)} alt={alt} {...rest} />;
+}
+
+ImgEmbedder.propTypes = {
+  svg: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  // 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM
+  fallback: PropTypes.bool,
+};
+
+ImgEmbedder.defaultProps = {
+  alt: '',
+  fallback: true,
+};
+
+export default ImgEmbedder;

package/src/NFTDisplay/svg-embedder/inline-svg.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import root from 'react-shadow/styled-components';
+
+/**
+ * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
+ */
+function InlineSvg({ svg, ...rest }) {
+  return (
+    <Root {...rest}>
+      <Inner dangerouslySetInnerHTML={{ __html: svg }} />
+    </Root>
+  );
+}
+
+InlineSvg.propTypes = {
+  svg: PropTypes.string.isRequired,
+};
+
+const Root = styled(root.span)`
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+
+const Inner = styled.div`
+  &,
+  & > svg {
+    height: 100%;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+`;
+
+export default InlineSvg;

package/src/PageScroller/index.js

@@ -0,0 +1,342 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import isNil from 'lodash/isNil';
+import isNull from 'lodash/isNull';
+
+import usePrevious from './usePrevValue';
+
+const Events = {
+  TOUCHMOVE: 'touchmove',
+  KEYDOWN: 'keydown',
+};
+
+const DEFAULT_ANIMATION_TIMER = 500;
+const DEFAULT_ANIMATION = 'ease-in-out';
+const DEFAULT_CONTAINER_HEIGHT = '100vh';
+const DEFAULT_CONTAINER_WIDTH = '100vw';
+const DEFAULT_COMPONENT_INDEX = 0;
+const DEFAULT_COMPONENTS_TO_RENDER_LENGTH = 0;
+
+const ANIMATION_TIMER_BUFFER = 100;
+const KEY_UP = 38;
+const KEY_DOWN = 40;
+const DISABLED_CLASS_NAME = 'rps-scroll--disabled';
+
+let previousTouchMove = null;
+let isScrolling = false;
+let isMounted = false;
+let isBodyScrollEnabled = true;
+let isTransitionAfterComponentsToRenderChanged = false;
+const containers = [];
+
+const PageScroller = ({
+  animationTimer,
+  blockScrollDown,
+  blockScrollUp,
+  children,
+  height,
+  width,
+  customPageNumber,
+  onScrollUnavailable,
+  onChange,
+  renderAllPagesOnFirstRender,
+  transitionTimingFunction,
+}) => {
+  const [componentIndex, setComponentIndex] = useState(DEFAULT_COMPONENT_INDEX);
+  const [componentsToRenderLength, setComponentsToRenderLength] = useState(
+    DEFAULT_COMPONENTS_TO_RENDER_LENGTH
+  );
+  const prevComponentIndex = usePrevious(componentIndex);
+  const pageContainer = useRef(null);
+
+  const addNextComponent = useCallback(
+    componentsToRenderOnMountLength => {
+      let tempComponentsToRenderLength = 0;
+
+      if (!isNil(componentsToRenderOnMountLength)) {
+        tempComponentsToRenderLength = componentsToRenderOnMountLength;
+      }
+
+      tempComponentsToRenderLength = Math.max(
+        tempComponentsToRenderLength,
+        componentsToRenderLength
+      );
+
+      if (tempComponentsToRenderLength <= componentIndex + 1) {
+        if (!isNil(children[componentIndex + 1])) {
+          tempComponentsToRenderLength++;
+        }
+      }
+
+      setComponentsToRenderLength(tempComponentsToRenderLength);
+    },
+    [children, componentIndex, componentsToRenderLength]
+  );
+
+  const checkRenderOnMount = useCallback(() => {
+    if (renderAllPagesOnFirstRender) {
+      setComponentsToRenderLength(React.Children.count(children));
+    } else if (!isNil(children[DEFAULT_COMPONENT_INDEX + 1])) {
+      addNextComponent(DEFAULT_COMPONENTS_TO_RENDER_LENGTH + 1);
+    }
+  }, [addNextComponent, children, renderAllPagesOnFirstRender]);
+
+  const disableScroll = useCallback(() => {
+    if (isBodyScrollEnabled) {
+      isBodyScrollEnabled = false;
+      window.scrollTo({
+        left: 0,
+        top: 0,
+        behavior: 'smooth',
+      });
+      document.body.classList.add(DISABLED_CLASS_NAME);
+      document.documentElement.classList.add(DISABLED_CLASS_NAME);
+    }
+  }, []);
+
+  const enableDocumentScroll = useCallback(() => {
+    if (!isBodyScrollEnabled) {
+      isBodyScrollEnabled = true;
+      document.body.classList.remove(DISABLED_CLASS_NAME);
+      document.documentElement.classList.remove(DISABLED_CLASS_NAME);
+    }
+  }, []);
+
+  const setRenderComponents = useCallback(() => {
+    const newComponentsToRender = [];
+
+    let i = 0;
+
+    while (i < componentsToRenderLength && !isNil(children[i])) {
+      containers[i] = true;
+      newComponentsToRender.push(
+        <div key={i} style={{ height: '100%', width: '100%' }}>
+          {React.cloneElement(children[i], { ...children[i].props })}
+        </div>
+      );
+      i++;
+    }
+
+    return newComponentsToRender;
+  }, [children, componentsToRenderLength]);
+
+  const scrollWindowDown = useCallback(() => {
+    if (!isScrolling && !blockScrollDown) {
+      if (!isNil(containers[componentIndex + 1])) {
+        disableScroll();
+        isScrolling = true;
+        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
+
+        setTimeout(() => {
+          if (isMounted) {
+            setComponentIndex(prevState => prevState + 1);
+          }
+        }, animationTimer + ANIMATION_TIMER_BUFFER);
+      } else {
+        enableDocumentScroll();
+        if (onScrollUnavailable) {
+          onScrollUnavailable();
+        }
+      }
+    }
+  }, [
+    animationTimer,
+    blockScrollDown,
+    componentIndex,
+    disableScroll,
+    enableDocumentScroll,
+    onScrollUnavailable,
+  ]);
+
+  const scrollWindowUp = useCallback(() => {
+    if (!isScrolling && !blockScrollUp) {
+      if (!isNil(containers[componentIndex - 1])) {
+        disableScroll();
+        isScrolling = true;
+        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
+
+        setTimeout(() => {
+          if (isMounted) {
+            setComponentIndex(prevState => prevState - 1);
+          }
+        }, animationTimer + ANIMATION_TIMER_BUFFER);
+      } else {
+        enableDocumentScroll();
+        if (onScrollUnavailable) {
+          onScrollUnavailable();
+        }
+      }
+    }
+  }, [
+    animationTimer,
+    blockScrollUp,
+    componentIndex,
+    disableScroll,
+    enableDocumentScroll,
+    onScrollUnavailable,
+  ]);
+
+  const touchMove = useCallback(
+    event => {
+      if (!isNull(previousTouchMove)) {
+        if (event.touches[0].clientY > previousTouchMove) {
+          scrollWindowUp();
+        } else {
+          scrollWindowDown();
+        }
+      } else {
+        previousTouchMove = event.touches[0].clientY;
+      }
+    },
+    [scrollWindowDown, scrollWindowUp]
+  );
+
+  const wheelScroll = useCallback(
+    event => {
+      if (event.deltaY < 0) {
+        scrollWindowUp();
+      } else {
+        scrollWindowDown();
+      }
+    },
+    [scrollWindowDown, scrollWindowUp]
+  );
+
+  const keyPress = useCallback(
+    event => {
+      if (isEqual(event.keyCode, KEY_UP)) {
+        scrollWindowUp();
+      }
+      if (isEqual(event.keyCode, KEY_DOWN)) {
+        scrollWindowDown();
+      }
+    },
+    [scrollWindowDown, scrollWindowUp]
+  );
+
+  useEffect(() => {
+    pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
+    pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
+    return () => {
+      pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
+      pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+    };
+  }, [touchMove, keyPress]);
+
+  useEffect(() => {
+    isMounted = true;
+
+    checkRenderOnMount();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    isScrolling = false;
+    previousTouchMove = null;
+    if (componentIndex > prevComponentIndex) {
+      addNextComponent();
+    }
+  }, [addNextComponent, componentIndex, prevComponentIndex]);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(componentIndex);
+    }
+  }, [onChange, componentIndex]);
+
+  useEffect(() => {
+    if (!isNil(customPageNumber) && !isEqual(customPageNumber, componentIndex)) {
+      let newComponentsToRenderLength = componentsToRenderLength;
+
+      if (!isEqual(componentIndex, customPageNumber)) {
+        if (!isNil(containers[customPageNumber]) && !isScrolling) {
+          isScrolling = true;
+          pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
+
+          if (isNil(containers[customPageNumber]) && !isNil(children[customPageNumber])) {
+            newComponentsToRenderLength++;
+          }
+
+          setTimeout(() => {
+            setComponentIndex(customPageNumber);
+            setComponentsToRenderLength(newComponentsToRenderLength);
+          }, animationTimer + ANIMATION_TIMER_BUFFER);
+        } else if (!isScrolling && !isNil(children[customPageNumber])) {
+          for (let i = componentsToRenderLength; i <= customPageNumber; i++) {
+            newComponentsToRenderLength++;
+          }
+
+          if (!isNil(children[customPageNumber])) {
+            newComponentsToRenderLength++;
+          }
+
+          isScrolling = true;
+          isTransitionAfterComponentsToRenderChanged = true;
+          setComponentsToRenderLength(newComponentsToRenderLength);
+        }
+      }
+    }
+  }, [customPageNumber]);
+
+  useEffect(() => {
+    if (isTransitionAfterComponentsToRenderChanged) {
+      isTransitionAfterComponentsToRenderChanged = false;
+
+      pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
+
+      setTimeout(() => {
+        setComponentIndex(customPageNumber);
+      }, animationTimer + ANIMATION_TIMER_BUFFER);
+    }
+  }, [animationTimer, componentsToRenderLength, customPageNumber]);
+
+  return (
+    <div style={{ height, width, overflow: 'hidden' }}>
+      <div
+        ref={pageContainer}
+        onWheel={wheelScroll}
+        style={{
+          height: '100%',
+          width: '100%',
+          transition: `transform ${animationTimer}ms ${transitionTimingFunction}`,
+          outline: 'none',
+        }}
+        tabIndex={0}>
+        {setRenderComponents()}
+      </div>
+    </div>
+  );
+};
+
+PageScroller.propTypes = {
+  animationTimer: PropTypes.number,
+  blockScrollDown: PropTypes.bool,
+  blockScrollUp: PropTypes.bool,
+  children: PropTypes.any.isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  customPageNumber: PropTypes.number,
+  onScrollUnavailable: PropTypes.func,
+  onChange: PropTypes.func,
+  renderAllPagesOnFirstRender: PropTypes.bool,
+  transitionTimingFunction: PropTypes.string,
+};
+
+PageScroller.defaultProps = {
+  animationTimer: DEFAULT_ANIMATION_TIMER,
+  transitionTimingFunction: DEFAULT_ANIMATION,
+  height: DEFAULT_CONTAINER_HEIGHT,
+  width: DEFAULT_CONTAINER_WIDTH,
+  onChange: undefined,
+  onScrollUnavailable: undefined,
+  blockScrollUp: false,
+  blockScrollDown: false,
+  renderAllPagesOnFirstRender: false,
+  customPageNumber: undefined,
+};
+
+export default PageScroller;

package/src/PageScroller/usePrevValue.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect, useRef } from 'react';
+
+export default function usePrevious(value) {
+  const ref = useRef({});
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

package/src/PricingTable/PricingPlan.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Card from '@material-ui/core/Card';
+import Button from '@material-ui/core/Button';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+
+const PricingPlan = ({ plan }) => (
+  <PlanCard shadow>
+    <div className="card-header">
+      <div className="title">{plan.name}</div>
+    </div>
+    <CardContent className="card-content">
+      <div className="plan-content">
+        <div className="plan-pricing">
+          <Typography component="h2" variant="h5" className="price-number">
+            {plan.price}
+          </Typography>
+        </div>
+        <div className="plan-services">
+          {plan.featureList.map(line => (
+            <Typography component="p" variant="body1" align="center" key={line}>
+              {line}
+            </Typography>
+          ))}
+        </div>
+      </div>
+      <div className="plan-actions">
+        {plan.showButton && (
+          <Button fullWidth variant="outlined" color="primary" component="a" href={plan.buttonLink}>
+            {plan.buttonText}
+          </Button>
+        )}
+      </div>
+    </CardContent>
+  </PlanCard>
+);
+
+export default PricingPlan;
+
+PricingPlan.propTypes = {
+  plan: PropTypes.object.isRequired,
+};
+
+const PlanCard = styled(Card)`
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  @media (max-width: 320px) {
+    margin-top: 20px;
+  }
+
+  && {
+    ${props => (props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
+  }
+
+  .card-header {
+    height: 80px;
+    background-color: #f1fbfb;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      text-align: center;
+      color: #404040;
+      margin: 0;
+    }
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  .plan-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .plan-pricing {
+      display: flex;
+      justify-content: center;
+      align-items: baseline;
+      margin-bottom: 12px;
+      color: #4e6af6;
+      text-align: center;
+    }
+
+    .price-number {
+      font-size: 30px;
+      font-weight: 600;
+      color: #4e6af6;
+    }
+
+    .plan-services strong {
+      color: #4e6af6;
+      font-weight: 500;
+    }
+  }
+
+  .plan-actions {
+    width: 100%;
+  }
+`;

package/src/PricingTable/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+
+import PricingPlan from './PricingPlan';
+
+const PricingTable = ({ plans }) => {
+  if (plans && plans.length > 0) {
+    return (
+      <Div variant="even">
+        <Grid container spacing={2} justify="center">
+          {plans.map(x => (
+            <Grid item className="plan-item" key={x.id} xs={12} sm={6} md={3}>
+              <PricingPlan plan={x} />
+            </Grid>
+          ))}
+        </Grid>
+      </Div>
+    );
+  }
+  return null;
+};
+
+export default PricingTable;
+
+PricingTable.propTypes = {
+  plans: PropTypes.array.isRequired,
+};
+
+const Div = styled.div`
+  padding: 100px 0;
+  text-align: center;
+  background-color: ${props => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};
+  @media (max-width: 320px) {
+    padding: 50px 0;
+  }
+  .plan-item {
+    @media (max-width: 320px) {
+      margin-bottom: 30px;
+    }
+  }
+`;