@arcblock/ux 0.78.25 → 1.6.59

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;
+    }
+  }
+`;

package/src/Result/common.js

@@ -0,0 +1,116 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-param-reassign */
+import React from 'react';
+import useTheme from '@material-ui/core/styles/useTheme';
+import InfoIcon from '@material-ui/icons/Info';
+import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
+import Result from './result';
+import translations from './translations';
+import { useLocaleContext } from '../Locale/context';
+
+// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
+const useLocale = locale => {
+  locale = ['zh', 'en'].includes(locale) ? locale : '';
+  const { locale: localeFromContext } = useLocaleContext() || { locale: 'en' };
+  return locale || localeFromContext;
+};
+
+// 404
+export const PageNotFound = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledErrorIcon />}
+      title={translations[locale][404].title}
+      description={translations[locale][404].description}
+      {...rest}
+    />
+  );
+};
+PageNotFound.status = '404';
+
+// 403
+export const Forbidden = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledErrorIcon />}
+      title={translations[locale][403].title}
+      description={translations[locale][403].description}
+      {...rest}
+    />
+  );
+};
+Forbidden.status = '403';
+
+// 500
+export const InternalServerError = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledErrorIcon />}
+      title={translations[locale][500].title}
+      description={translations[locale][500].description}
+      {...rest}
+    />
+  );
+};
+InternalServerError.status = '500';
+
+// 通用错误
+export const Error = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledErrorIcon />}
+      title={translations[locale].error.title}
+      description={translations[locale].error.description}
+      {...rest}
+    />
+  );
+};
+Error.status = 'error';
+
+// under maintenance
+export const Maintenance = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledInfoIcon />}
+      title={translations[locale].maintenance.title}
+      description={translations[locale].maintenance.description}
+      {...rest}
+    />
+  );
+};
+Maintenance.status = 'maintenance';
+
+// coming soon
+export const ComingSoon = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledInfoIcon />}
+      title={translations[locale]['coming-soon'].title}
+      description={translations[locale]['coming-soon'].description}
+      {...rest}
+    />
+  );
+};
+ComingSoon.status = 'coming-soon';
+
+// info, 与其它 status 不同, title/description 需要使用方自己传入
+export const Info = props => {
+  return <Result icon={<StyledInfoIcon />} {...props} />;
+};
+Info.status = 'info';
+
+const StyledErrorIcon = props => {
+  const theme = useTheme();
+  return <CancelRoundedIcon style={{ color: theme.palette.error.main, fontSize: 72 }} {...props} />;
+};
+
+const StyledInfoIcon = props => {
+  const theme = useTheme();
+  return <InfoIcon style={{ color: theme.palette.info.main, fontSize: 72 }} {...props} />;
+};

package/src/Result/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Result from './result';
+import * as common from './common';
+
+const componentsKeyByStatus = Object.keys(common).reduce(
+  (acc, cur) => ({ ...acc, [common[cur].status || cur]: common[cur] }),
+  {}
+);
+
+export default function ResultWrapper({ status, ...rest }) {
+  if (status) {
+    if (componentsKeyByStatus[status]) {
+      const Component = componentsKeyByStatus[status];
+      return <Component {...rest} />;
+    }
+    throw new Error(
+      `Please provide a valid status for Result.status. Valid values are: ${Object.keys(
+        componentsKeyByStatus
+      ).join(', ')}`
+    );
+  }
+  return <Result {...rest} />;
+}
+
+ResultWrapper.propTypes = {
+  status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+ResultWrapper.defaultProps = {
+  status: '',
+};

package/src/Result/result.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@material-ui/core/Box';
+
+function Result({ icon, title, description, extra, ...rest }) {
+  return (
+    <Root {...rest}>
+      {icon}
+      {typeof title === 'string' ? (
+        <Box mt={3} fontSize={22} fontWeight={400} color="#47494E" textAlign="center">
+          {title}
+        </Box>
+      ) : (
+        title
+      )}
+
+      {typeof description === 'string' ? (
+        <Box mt={1} fontSize={14} color="#7F828B" textAlign="center">
+          {description}
+        </Box>
+      ) : (
+        description
+      )}
+
+      <Box mt={3}>{extra}</Box>
+    </Root>
+  );
+}
+
+Result.propTypes = {
+  icon: PropTypes.any,
+  title: PropTypes.any.isRequired,
+  description: PropTypes.any,
+  actions: PropTypes.any,
+  extra: PropTypes.any,
+};
+Result.defaultProps = {
+  icon: '',
+  description: '',
+  actions: null,
+  extra: null,
+};
+
+const Root = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 16px;
+
+  background-color: #f7f8fb;
+`;
+
+export default Result;

package/src/Result/translations.js

@@ -0,0 +1,56 @@
+export default {
+  en: {
+    404: {
+      title: '404 - Page Not Found',
+      description:
+        'Sorry about that, the page you are looking for does not exist or has been moved.',
+    },
+    403: {
+      title: '403 – Forbidden',
+      description: 'Sorry, you are not authorized to access this page.',
+    },
+    500: {
+      title: '500 - Internal Server Error',
+      description: 'An internal server error has occured. Please try again later.',
+    },
+    error: {
+      title: 'Application Error',
+      description: 'Something went wrong. Please try again later.',
+    },
+    maintenance: {
+      title: 'Offline for maintenance',
+      description: 'This app is undergoing maintenance right now. Please check back later.',
+    },
+    'coming-soon': {
+      title: 'Coming Soon',
+      description: "Our website is under construction. We'll be here soon with our new website.",
+    },
+  },
+
+  zh: {
+    404: {
+      title: '404 - 页面未找到',
+      description: '很抱歉，您正在寻找的页面不存在或已被移动。',
+    },
+    403: {
+      title: '403 – 禁止访问',
+      description: '很抱歉，您没有权限访问此页面。',
+    },
+    500: {
+      title: '500 - 内部服务器错误',
+      description: '发生了一个内部服务器错误。请稍后再试。',
+    },
+    error: {
+      title: 'Application Error',
+      description: '出错了, 请稍后再试。',
+    },
+    maintenance: {
+      title: '维护中',
+      description: '应用程序正在进行维护。请稍后再查看。',
+    },
+    'coming-soon': {
+      title: '即将上线',
+      description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。',
+    },
+  },
+};