@arcblock/ux 0.78.26 → 1.6.60

package/src/CodeBlock/index.js

@@ -0,0 +1,160 @@
+/* eslint-disable react/no-danger */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Copy from 'copy-to-clipboard';
+import Button from '@material-ui/core/IconButton';
+import useMountedState from 'react-use/lib/useMountedState';
+
+import hljs from 'highlight.js/lib/highlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import elixir from 'highlight.js/lib/languages/elixir';
+import java from 'highlight.js/lib/languages/java';
+import swift from 'highlight.js/lib/languages/swift';
+import objectivec from 'highlight.js/lib/languages/objectivec';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import protobuf from 'highlight.js/lib/languages/protobuf';
+import python from 'highlight.js/lib/languages/python';
+import yaml from 'highlight.js/lib/languages/yaml';
+import shell from 'highlight.js/lib/languages/shell';
+import diff from 'highlight.js/lib/languages/diff';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+
+import 'highlight.js/styles/atom-one-dark.css';
+
+import CopyIcon from '@material-ui/icons/FileCopy';
+import CheckIcon from '@material-ui/icons/Check';
+import colors from '../Colors';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('elixir', elixir);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('kt', kotlin);
+hljs.registerLanguage('protobuf', protobuf);
+hljs.registerLanguage('protobuffer', protobuf);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('py', python);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sh', shell);
+hljs.registerLanguage('plaintext', plaintext);
+hljs.registerLanguage('text', plaintext);
+hljs.registerLanguage('patch', diff);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('swift', swift);
+hljs.registerLanguage('objectivec', objectivec);
+hljs.registerLanguage('oc', objectivec);
+
+export default function CodeBlock({ code, language, children, ...rest }) {
+  const [copied, setCopied] = useState(false);
+  const isMounted = useMountedState();
+  const source = code || children;
+
+  const onCopy = () => {
+    Copy(source);
+    setCopied(true);
+    // 恢复 copied 状态
+    setTimeout(() => {
+      if (isMounted()) {
+        setCopied(false);
+      }
+    }, 1500);
+  };
+
+  return (
+    <Pre {...rest}>
+      <span className="codeblock__inner">
+        <code
+          className={`hljs ${language}`}
+          dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
+        />
+      </span>
+      <Button
+        className="copy-button"
+        onClick={onCopy}
+        tabIndex="-1"
+        color="primary"
+        disabled={copied}>
+        {!copied && <CopyIcon style={{ color: '#fff', fontSize: 16 }} />}
+        {copied && <CheckIcon style={{ color: '#fff', fontSize: 16 }} />}
+      </Button>
+    </Pre>
+  );
+}
+
+CodeBlock.propTypes = {
+  code: PropTypes.string,
+  language: PropTypes.string,
+  children: PropTypes.any,
+};
+
+CodeBlock.defaultProps = {
+  code: '',
+  language: 'text',
+  children: null,
+};
+
+const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
+const Pre = styled.pre`
+  font-family: ${fontFamily};
+  display: block;
+  font-size: 14px;
+  line-height: 1.42857143;
+  margin: 0 0 32px;
+  word-break: break-word;
+  word-wrap: break-word;
+  text-align: left;
+  border-radius: 5px;
+  border: 1px solid #dedede;
+  background: #222;
+  color: #fff;
+  position: relative;
+
+  .codeblock__inner {
+    display: block;
+    width: 100%;
+    max-height: 46.25rem;
+    overflow: scroll;
+  }
+
+  .copy-button {
+    display: none;
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    padding: 4px;
+    border-radius: 4px;
+
+    &,
+    &:hover,
+    &.Mui-disabled {
+      background: ${colors.primary.main};
+    }
+  }
+
+  &:hover {
+    .copy-button {
+      display: block;
+    }
+  }
+
+  code {
+    counter-reset: line;
+    counter-increment: line;
+    padding: 16px;
+    font-family: ${fontFamily};
+    color: #fff;
+    * {
+      font-family: ${fontFamily};
+    }
+  }
+
+  .hljs * {
+    white-space: normal; // autowrap
+  }
+`;

package/src/Colors/index.js

@@ -0,0 +1 @@
+export { default } from './themes/default';

package/src/Colors/themes/default.js

@@ -0,0 +1,54 @@
+/**
+ * 默认 colors, ABT 系列
+ *
+ * - colors object 结构是在 mui theme#palette object 基础上调整后的结构
+ * - 色值在 mui default theme 基础上将 figma 中常用的 colors 进行覆盖
+ * - 扩展一些常用色值 (如 DID 系列)
+ * - figma: https://www.figma.com/file/1qHyMF137EXOQpSFVByszG/UX-Library?node-id=295%3A1518
+ */
+const colors = {
+  common: {
+    black: '#000',
+    white: '#fff',
+  },
+  primary: { main: '#3773F2', contrastText: '#fff' }, // override
+  secondary: { main: '#16CED1', contrastText: '#fff' }, // override
+  error: { main: '#F16E6E', contrastText: '#fff' }, // override
+  warning: { main: '#DE9E37', contrastText: '#fff' }, // override
+  info: { main: '#0775F8', contrastText: '#fff' }, // override
+  success: { main: '#34BE74', contrastText: '#fff' }, // override
+  grey: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#eeeeee',
+    300: '#e0e0e0',
+    400: '#bdbdbd',
+    500: '#9e9e9e',
+    600: '#757575',
+    700: '#616161',
+    800: '#424242',
+    900: '#212121',
+    A100: '#d5d5d5',
+    A200: '#aaaaaa',
+    A400: '#303030',
+    A700: '#616161',
+  },
+  text: {
+    primary: 'rgba(0, 0, 0, 0.87)',
+    secondary: 'rgba(0, 0, 0, 0.54)',
+    disabled: 'rgba(0, 0, 0, 0.38)',
+    hint: 'rgba(0, 0, 0, 0.38)',
+  },
+  divider: 'rgba(0, 0, 0, 0.12)',
+  background: {
+    default: '#fff',
+  },
+  // 扩展色值, 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
+  did: {
+    primary: '#4598FA',
+    secondary: '#49C3AD',
+  },
+  // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
+};
+
+export default colors;

package/src/ContactForm/index.js

@@ -0,0 +1,240 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/static-property-placement */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import axios from 'axios';
+
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { mergeProps } from '../Util';
+import Button from '../Button';
+
+export async 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 {
+  static 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]),
+  };
+
+  static 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'],
+  };
+
+  constructor(props) {
+    super(props);
+
+    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] = '';
+    });
+  }
+
+  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 (
+      <Form
+        onSubmit={this.onSubmit}
+        className={className}
+        style={style}
+        layout={layout}
+        fieldCount={this.fields.length}
+        name="subscribe">
+        {!!title && (
+          <Typography component="p" className="title">
+            {title}
+          </Typography>
+        )}
+        <div className="form-controls">
+          {this.fields.map(x => (
+            <input
+              required
+              key={x}
+              type="text"
+              value={this.state[x]}
+              onChange={this.getInputHandler(x)}
+              className="input"
+              placeholder={x}
+            />
+          ))}
+          <Button
+            variant="outlined"
+            type="submit"
+            color="default"
+            size="large"
+            disabled={loading}
+            className="subscribe-btn-empty">
+            {loading ? <CircularProgress size={28} /> : button}
+          </Button>
+        </div>
+        {!!errorMessage && (
+          <Typography
+            component="p"
+            variant="body1"
+            className="error"
+            color="secondary"
+            dangerouslySetInnerHTML={{ __html: errorMessage }}
+          />
+        )}
+        {!!successMessage && (
+          <Typography
+            component="p"
+            variant="body1"
+            className="success"
+            color="primary"
+            dangerouslySetInnerHTML={{ __html: successMessage }}
+          />
+        )}
+      </Form>
+    );
+  }
+
+  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',
+      });
+    }
+  };
+
+  getInputHandler =
+    (name, state = {}) =>
+    e => {
+      this.setState(
+        Object.assign(state, {
+          [name]: e.target.value,
+        })
+      );
+    };
+}
+
+// prettier-ignore
+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/src/CookieConsent/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
+
+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: '我知道了',
+  },
+};
+
+/**
+ * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
+ * - 默认内容
+ * - 默认配置/样式
+ */
+export default function DefaultCookieConsent({ children, locale, style, ...rest }) {
+  if (locale && !translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+  return (
+    <Wrapper style={style}>
+      <CookieConsent
+        disableStyles
+        disableButtonStyles
+        ButtonComponent={Button}
+        buttonText={translations[locale].agree}
+        buttonClasses="MuiButton-contained MuiButton-containedPrimary"
+        buttonStyle={{ marginTop: 16, padding: '6px 16px' }}
+        {...rest}>
+        {children || <p style={{ margin: 0 }}>{translations[locale].content}</p>}
+      </CookieConsent>
+    </Wrapper>
+  );
+}
+
+DefaultCookieConsent.propTypes = {
+  children: PropTypes.any,
+  style: PropTypes.object,
+  locale: PropTypes.string,
+};
+
+DefaultCookieConsent.defaultProps = {
+  children: null,
+  style: {},
+  locale: 'en',
+};
+
+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/src/CountDown/index.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { getColor, mergeProps } from '../Util';
+
+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 (
+    <span className="num-group">
+      <span className="num-items">
+        {numbers.map((x, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <strong key={`num-${i}`} className="num-item">
+            {x}
+          </strong>
+        ))}
+      </span>
+      <span className="num-label">{label}</span>
+    </span>
+  );
+}
+
+export default class CountDown extends React.Component {
+  constructor(props) {
+    const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
+    super(newProps);
+    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 (
+      <Container dark={dark} {...rest}>
+        <FixWidthNumber number={days} label="D" />
+        <span className="num-sep">:</span>
+        <FixWidthNumber number={hours} label="H" />
+        <span className="num-sep">:</span>
+        <FixWidthNumber number={minutes} label="M" />
+        <span className="num-sep">:</span>
+        <FixWidthNumber number={seconds} label="S" />
+      </Container>
+    );
+  }
+}
+
+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)};
+    }
+  }
+`;