@arcblock/ux 2.6.8 → 2.7.0

package/es/ContactForm/index.js

@@ -0,0 +1,230 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/static-property-placement */
+import React from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import { mergeProps } from '../Util';
+import { warn as deprecatedWarn } from '../Util/deprecate';
+import Button from '../Button';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function submitContactForm({
+  formId,
+  portalId
+}, fields, context) {
+  const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
+  return axios.post(url, {
+    submittedAt: Date.now(),
+    fields: Object.keys(fields).map(x => ({
+      name: x.replace(/\s+/, '').toLowerCase(),
+      value: fields[x]
+    })),
+    context,
+    skipValidation: false
+  }).then(res => res.data.inlineMessage).catch(res => res.data ? res.data.message : 'Form Submit Failed');
+}
+export default class ContactForm extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onSubmit", async e => {
+      e.preventDefault();
+      this.setState({
+        loading: true
+      });
+      try {
+        const message = await submitContactForm({
+          formId: this.props.formId,
+          portalId: this.props.portalId
+        }, this.fields.reduce((obj, x) => {
+          obj[x] = this.state[x];
+          return obj;
+        }, {}), {
+          pageUri: window.location.href,
+          pageName: window.location.title
+        });
+        this.setState({
+          loading: false,
+          successMessage: message || this.props.successMessage
+        });
+      } catch (err) {
+        this.setState({
+          loading: false,
+          errorMessage: err ? err.message : 'Form submit failed'
+        });
+      }
+    });
+    _defineProperty(this, "getInputHandler", (name, state = {}) => e => {
+      this.setState(Object.assign(state, {
+        [name]: e.target.value
+      }));
+    });
+    if (typeof props.fields === 'string') {
+      this.fields = props.fields.split(',').map(x => x.trim());
+    } else {
+      this.fields = props.fields;
+    }
+    this.state = {
+      loading: false,
+      errorMessage: '',
+      successMessage: ''
+    };
+    this.fields.forEach(x => {
+      this.state[x] = '';
+    });
+    deprecatedWarn('ContactForm');
+  }
+  deriveProps() {
+    const newProps = mergeProps(this.props, ContactForm);
+    if (typeof newProps.title === 'undefined') {
+      newProps.title = 'Signup for our news letter';
+    }
+    if (!newProps.button) {
+      newProps.button = 'Subscribe';
+    }
+    return newProps;
+  }
+  render() {
+    const {
+      className,
+      style,
+      title,
+      button,
+      layout
+    } = this.deriveProps();
+    const {
+      loading,
+      errorMessage,
+      successMessage
+    } = this.state;
+    return /*#__PURE__*/_jsxs(Form, {
+      onSubmit: this.onSubmit,
+      className: className,
+      style: style,
+      layout: layout,
+      fieldCount: this.fields.length,
+      name: "subscribe",
+      children: [!!title && /*#__PURE__*/_jsx(Typography, {
+        component: "p",
+        className: "title",
+        children: title
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "form-controls",
+        children: [this.fields.map(x => /*#__PURE__*/_jsx("input", {
+          required: true,
+          type: "text",
+          value: this.state[x],
+          onChange: this.getInputHandler(x),
+          className: "input",
+          placeholder: x
+        }, x)), /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          type: "submit",
+          color: "inherit",
+          size: "large",
+          disabled: loading,
+          className: "subscribe-btn-empty",
+          children: loading ? /*#__PURE__*/_jsx(CircularProgress, {
+            size: 28
+          }) : button
+        })]
+      }), !!errorMessage && /*#__PURE__*/_jsx(Typography, {
+        component: "p",
+        variant: "body1",
+        className: "error",
+        color: "secondary",
+        dangerouslySetInnerHTML: {
+          __html: errorMessage
+        }
+      }), !!successMessage && /*#__PURE__*/_jsx(Typography, {
+        component: "p",
+        variant: "body1",
+        className: "success",
+        color: "primary",
+        dangerouslySetInnerHTML: {
+          __html: successMessage
+        }
+      })]
+    });
+  }
+}
+
+// prettier-ignore
+_defineProperty(ContactForm, "propTypes", {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  portalId: PropTypes.string,
+  formId: PropTypes.string,
+  title: PropTypes.string,
+  button: PropTypes.string,
+  successMessage: PropTypes.string,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  fields: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+});
+_defineProperty(ContactForm, "defaultProps", {
+  style: {},
+  className: '',
+  portalId: '4796488',
+  formId: '929a510f-34f4-4251-98b3-34175200aebd',
+  title: undefined,
+  button: '',
+  layout: 'vertical',
+  successMessage: 'Form Submit Success',
+  fields: ['Email', 'First Name', 'Last Name']
+});
+const getInputWidth = props => props.layout === 'vertical' ? '100%' : `${Math.max(95 / (props.fieldCount + 1), 20)}%`;
+const Form = styled('form')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    width: 100% !important;
+  }
+  max-width: 800px;
+  margin: 0px auto;
+
+  .title {
+    font-size: 30px;
+    text-align: center;
+    color: ${props => props.theme.typography.color.main};
+  }
+
+  .form-controls {
+    width: 100%;
+    flex-direction: ${props => props.layout === 'vertical' ? 'column' : 'row'};
+    justify-content: space-between;
+    align-items: center;
+
+    .input {
+      width: ${props => getInputWidth(props)};
+      height: 50px;
+      border: none;
+      border-bottom: 1px solid ${props => props.theme.typography.color.main};
+      font-size: 16px;
+      letter-spacing: 1.8px;
+      outline: none;
+      margin: ${props => props.layout === 'vertical' ? '12px 0' : '12px'};
+      background: transparent;
+
+      &:first-of-type {
+        margin-top: 40px;
+      }
+    }
+
+    .subscribe-btn-empty {
+      margin-top: ${props => props.layout === 'vertical' ? '40px' : '0'};
+      width: ${props => props.layout === 'vertical' ? '100%' : 'auto'};
+    }
+  }
+
+  .error,
+  .success {
+    margin-top: 20px;
+  }
+`;

package/es/CookieConsent/index.js

@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { resetCookieConsentValue };
+const translations = {
+  en: {
+    content: 'We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content, to analyze our website traffic, and to understand where our visitors are coming from.',
+    agree: 'I Understand'
+  },
+  zh: {
+    content: '我们使用 cookies 和其他跟踪技术来改善您在我们网站上的浏览体验，向您展示个性化的内容，分析我们的网站流量，并了解我们的访问者来自哪里。',
+    agree: '我知道了'
+  }
+};
+function inIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+function AcceptButton(props) {
+  return /*#__PURE__*/_jsx(Button, {
+    variant: "contained",
+    ...props
+  });
+}
+
+/**
+ * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
+ * - 默认内容
+ * - 默认配置/样式
+ */
+export default function DefaultCookieConsent({
+  children,
+  locale,
+  style,
+  displayInIframe,
+  ...rest
+}) {
+  if (!displayInIframe && inIframe()) {
+    return null;
+  }
+  if (locale && !translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+  return /*#__PURE__*/_jsx(Wrapper, {
+    style: style,
+    children: /*#__PURE__*/_jsx(CookieConsent, {
+      disableStyles: true,
+      disableButtonStyles: true,
+      ButtonComponent: AcceptButton,
+      buttonText: translations[locale].agree,
+      buttonStyle: {
+        marginTop: 16,
+        padding: '6px 16px'
+      },
+      ...rest,
+      children: children || /*#__PURE__*/_jsx("p", {
+        style: {
+          margin: 0
+        },
+        children: translations[locale].content
+      })
+    })
+  });
+}
+DefaultCookieConsent.propTypes = {
+  children: PropTypes.any,
+  style: PropTypes.object,
+  locale: PropTypes.string,
+  displayInIframe: PropTypes.bool
+};
+DefaultCookieConsent.defaultProps = {
+  children: null,
+  style: {},
+  locale: 'en',
+  displayInIframe: false
+};
+const Wrapper = styled('div')`
+  box-sizing: border-box;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 999;
+  max-width: 440px;
+  padding: 16px 24px;
+  font-size: 16px;
+  color: #666;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
+  &:empty {
+    display: none;
+  }
+  button {
+    min-width: 200px;
+  }
+
+  @media screen and (max-width: 480px) {
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+    width: auto;
+    button {
+      display: block;
+      width: 100%;
+    }
+  }
+`;

package/es/CountDown/index.js

@@ -0,0 +1,178 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getColor, mergeProps } from '../Util';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SECONDS_OF_MINUTE = 60;
+const SECONDS_OF_HOUR = 60 * SECONDS_OF_MINUTE;
+const SECONDS_OF_DAY = 24 * SECONDS_OF_HOUR;
+function getRemaining(endTime) {
+  const now = new Date().getTime();
+  const diff = Math.round((endTime - now) / 1000);
+  const days = Math.floor(diff / SECONDS_OF_DAY);
+  const hours = Math.floor(diff % SECONDS_OF_DAY / SECONDS_OF_HOUR);
+  const minutes = Math.floor(diff % SECONDS_OF_DAY % SECONDS_OF_HOUR / SECONDS_OF_MINUTE);
+  const seconds = Math.round(diff % SECONDS_OF_DAY % SECONDS_OF_HOUR % SECONDS_OF_MINUTE);
+  return {
+    days,
+    hours,
+    minutes,
+    seconds,
+    done: diff <= 0
+  };
+}
+
+// eslint-disable-next-line react/prop-types
+function FixWidthNumber({
+  number,
+  label,
+  length = 2
+}) {
+  let str = number.toString();
+  while (str.length < length) {
+    str = `0${str}`;
+  }
+  const numbers = str.split('');
+  return /*#__PURE__*/_jsxs("span", {
+    className: "num-group",
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "num-items",
+      children: numbers.map((x, i) =>
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _jsx("strong", {
+        className: "num-item",
+        children: x
+      }, `num-${i}`))
+    }), /*#__PURE__*/_jsx("span", {
+      className: "num-label",
+      children: label
+    })]
+  });
+}
+export default class CountDown extends Component {
+  constructor(props) {
+    super(props);
+    const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
+    this.state = getRemaining(newProps.endTime);
+    this.timer = null;
+  }
+  componentDidMount() {
+    this.timer = setInterval(() => {
+      const remaining = getRemaining(this.props.endTime);
+      if (remaining.done) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+      this.setState(remaining);
+    }, 1000);
+  }
+  componentWillUnmount() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+  render() {
+    const {
+      dark,
+      endTime,
+      ...rest
+    } = this.props;
+    const {
+      days,
+      hours,
+      minutes,
+      seconds
+    } = this.state;
+    return /*#__PURE__*/_jsxs(Container, {
+      dark: dark,
+      ...rest,
+      children: [/*#__PURE__*/_jsx(FixWidthNumber, {
+        number: days,
+        label: "D"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "num-sep",
+        children: ":"
+      }), /*#__PURE__*/_jsx(FixWidthNumber, {
+        number: hours,
+        label: "H"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "num-sep",
+        children: ":"
+      }), /*#__PURE__*/_jsx(FixWidthNumber, {
+        number: minutes,
+        label: "M"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "num-sep",
+        children: ":"
+      }), /*#__PURE__*/_jsx(FixWidthNumber, {
+        number: seconds,
+        label: "S"
+      })]
+    });
+  }
+}
+CountDown.propTypes = {
+  endTime: PropTypes.number.isRequired,
+  // endTime should be UTC
+  dark: PropTypes.bool,
+  style: PropTypes.object
+};
+CountDown.defaultProps = {
+  dark: true,
+  style: {}
+};
+const textBackground = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`;
+const Container = styled('div')`
+  color: ${props => getColor(props)};
+  font-size: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+
+  .num-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 60px;
+
+    @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+      margin: 0 20px;
+    }
+    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+      margin: 0;
+    }
+
+    .num-items {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .num-item {
+      display: inline-block;
+      width: 40px;
+      height: 60px;
+      line-height: 60px;
+      background-image: ${props => props.dark ? textBackground : 'none'};
+      text-align: center;
+
+      &:first-of-type {
+        margin-right: 10px;
+        @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+          margin: 0;
+        }
+      }
+    }
+
+    .num-label {
+      margin-top: 20px;
+      font-size: 24px;
+      color: ${props => getColor(props)};
+    }
+  }
+`;

package/es/DID/index.js

@@ -0,0 +1,105 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
+import Address from '../Address';
+import Avatar from '../Avatar';
+import { isEthereumDid, getFontSize } from '../Util';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DIDPropTypes = {
+  did: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  component: PropTypes.string,
+  copyable: PropTypes.bool,
+  responsive: PropTypes.bool,
+  showCopyButtonInTooltip: PropTypes.bool,
+  inline: PropTypes.bool,
+  append: PropTypes.any,
+  compact: PropTypes.bool,
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  locale: PropTypes.oneOf(['en', 'zh'])
+};
+const getFontColor = (did, didMotifInfo, isEthDid) => {
+  if (isEthDid) {
+    const index = Uint8Array.from(did.slice(2).match(/.{1,2}/g).map(pair => parseInt(pair, 16))).slice(0, 8).reduce((acc, val) => acc + val, 0) % colors.length;
+    return colors[index];
+  }
+  return didMotifInfo.color;
+};
+const isSquareMotif = roleType => {
+  const roles = {
+    0: true,
+    // ACCOUNT
+    6: true,
+    // ASSET
+    17: true // TOKEN
+  };
+
+  return !roles[roleType];
+};
+const getAvatarSize = (didMotifInfo, isEthDid, size) => {
+  if (isEthDid) {
+    return size * 0.75;
+  }
+  if (isSquareMotif(didMotifInfo.roleType)) {
+    return size * 0.75;
+  }
+  return size;
+};
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
+ */
+const DID = /*#__PURE__*/forwardRef(({
+  did,
+  ...rest
+}, ref) => {
+  const isEthDid = isEthereumDid(did);
+  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
+  const fontSize = getFontSize(rest.size);
+  const prepend = [/*#__PURE__*/_jsx("span", {
+    style: {
+      fontSize,
+      color: getFontColor(did, didMotifInfo, isEthDid)
+    },
+    children: "DID:"
+  }, "prefix-did"), /*#__PURE__*/_jsx("span", {
+    className: "did-address-text",
+    style: {
+      fontSize
+    },
+    children: "ABT:"
+  }, "prefix-abt"), /*#__PURE__*/_jsx(Avatar, {
+    did: did,
+    size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      marginLeft: 2,
+      marginRight: 4
+    },
+    blockiesPadding: false,
+    className: "did-address-avatar"
+  }, "avatar")];
+  return /*#__PURE__*/_jsx(Address, {
+    ref: ref,
+    ...rest,
+    prepend: prepend,
+    children: did
+  });
+});
+export default DID;
+DID.propTypes = DIDPropTypes;
+DID.defaultProps = {
+  size: 0,
+  component: 'span',
+  copyable: true,
+  responsive: true,
+  showCopyButtonInTooltip: false,
+  inline: false,
+  append: null,
+  compact: false,
+  startChars: 6,
+  endChars: 6,
+  locale: 'en'
+};