@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/card/src/demos/colspan.tsx

@@ -0,0 +1,80 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard
+        direction="column"
+        ghost
+        gutter={{
+          xs: 8,
+          sm: 8,
+          md: 8,
+          lg: 8,
+          xl: 8,
+          xxl: 8,
+        }}
+      >
+        <ProCard layout="center" bordered>
+          colSpan - 24
+        </ProCard>
+        <ProCard
+          colSpan={{
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 12,
+            xl: 12,
+            xxl: 24,
+          }}
+          layout="center"
+          bordered
+        >
+          colSpan - 12
+        </ProCard>
+        <ProCard
+          colSpan={{
+            xs: 24,
+            sm: 12,
+            md: 8,
+            lg: 6,
+          }}
+          layout="center"
+          bordered
+        >
+          colSpan - 8
+        </ProCard>
+        <ProCard colSpan={0} layout="center" bordered>
+          colSpan - 0
+        </ProCard>
+      </ProCard>
+      <ProCard gutter={8} title="24栅格" style={{ marginBlockStart: 8 }}>
+        <ProCard colSpan={12} layout="center" bordered>
+          colSpan-12
+        </ProCard>
+        <ProCard colSpan={6} layout="center" bordered>
+          colSpan-6
+        </ProCard>
+        <ProCard colSpan={6} layout="center" bordered>
+          colSpan-6
+        </ProCard>
+      </ProCard>
+      <ProCard style={{ marginBlockStart: 8 }} gutter={8} ghost>
+        <ProCard colSpan="200px" layout="center" bordered>
+          colSpan - 200px
+        </ProCard>
+        <ProCard layout="center" bordered>
+          Auto
+        </ProCard>
+      </ProCard>
+      <ProCard style={{ marginBlockStart: 8 }} gutter={8} ghost>
+        <ProCard bordered layout="center">
+          Auto
+        </ProCard>
+        <ProCard colSpan="30%" bordered>
+          colSpan - 30%
+        </ProCard>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/divider.tsx

@@ -0,0 +1,36 @@
+import { ProCard } from '@ant-design/pro-components';
+import { Statistic } from 'antd';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+
+const { Divider } = ProCard;
+
+export default () => {
+  const [responsive, setResponsive] = useState(false);
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <ProCard.Group title="核心指标" direction={responsive ? 'column' : 'row'}>
+        <ProCard>
+          <Statistic title="今日UV" value={79.0} precision={2} />
+        </ProCard>
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <ProCard>
+          <Statistic title="冻结金额" value={112893.0} precision={2} />
+        </ProCard>
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <ProCard>
+          <Statistic title="信息完整度" value={93} suffix="/ 100" />
+        </ProCard>
+        <Divider type={responsive ? 'horizontal' : 'vertical'} />
+        <ProCard>
+          <Statistic title="冻结金额" value={112893.0} />
+        </ProCard>
+      </ProCard.Group>
+    </RcResizeObserver>
+  );
+};

package/packages/card/src/demos/group.tsx

@@ -0,0 +1,19 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard title="卡片组展开" ghost gutter={8} collapsible>
+        <ProCard layout="center" bordered>
+          卡片内容
+        </ProCard>
+        <ProCard layout="center" bordered>
+          卡片内容
+        </ProCard>
+        <ProCard layout="center" bordered>
+          卡片内容
+        </ProCard>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/gutter.tsx

@@ -0,0 +1,29 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard gutter={[16, 16]}>
+        <ProCard colSpan="30%" title="title" headerBordered bordered>
+          300px
+        </ProCard>
+        <ProCard bordered>Auto</ProCard>
+      </ProCard>
+
+      <ProCard
+        gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
+        style={{ marginBlockStart: 16 }}
+      >
+        <ProCard bordered>Responsive</ProCard>
+        <ProCard bordered>Responsive</ProCard>
+        <ProCard bordered>Responsive</ProCard>
+      </ProCard>
+
+      <ProCard gutter={16} style={{ marginBlockStart: 16 }}>
+        <ProCard bordered>Auto</ProCard>
+        <ProCard bordered>Auto</ProCard>
+        <ProCard bordered>Auto</ProCard>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/headerBordered.tsx

@@ -0,0 +1,15 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProCard
+      title="标题"
+      extra="extra"
+      tooltip="这是提示"
+      style={{ maxWidth: 300 }}
+      headerBordered
+    >
+      内容
+    </ProCard>
+  );
+};

package/packages/card/src/demos/headless.tsx

@@ -0,0 +1,5 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return <ProCard style={{ maxWidth: 300 }}>内容</ProCard>;
+};

package/packages/card/src/demos/hoverable.tsx

@@ -0,0 +1,11 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard style={{ maxWidth: 300 }} hoverable bordered>
+        内容
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/inner.tsx

@@ -0,0 +1,32 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard title="横向内部卡片" bordered headerBordered gutter={16}>
+        <ProCard title="内部卡片标题" type="inner" bordered>
+          内部卡片内容
+        </ProCard>
+        <ProCard title="内部卡片标题" type="inner" bordered>
+          内部卡片内容
+        </ProCard>
+      </ProCard>
+
+      <ProCard
+        title="竖向内部卡片"
+        bordered
+        headerBordered
+        direction="column"
+        gutter={[0, 16]}
+        style={{ marginBlockStart: 8 }}
+      >
+        <ProCard title="内部卡片标题" type="inner" bordered>
+          内部卡片内容
+        </ProCard>
+        <ProCard title="内部卡片标题" type="inner" bordered>
+          内部卡片内容
+        </ProCard>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/layout.tsx

@@ -0,0 +1,18 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard
+        title="标题"
+        extra="extra"
+        layout="center"
+        direction="column"
+        style={{ maxWidth: 300, height: 200 }}
+      >
+        <div>123</div>
+        <div>456</div>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/loading.tsx

@@ -0,0 +1,28 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard loading style={{ maxWidth: 300 }}>
+        内容
+      </ProCard>
+
+      <ProCard
+        loading
+        style={{ maxWidth: 300, marginBlockStart: 16 }}
+        layout="center"
+      >
+        内容
+      </ProCard>
+
+      <ProCard
+        title="自定义 Loading"
+        extra="extra"
+        loading={<div>加载中</div>}
+        style={{ maxWidth: 300, marginBlockStart: 16 }}
+      >
+        内容
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/multipleLine.tsx

@@ -0,0 +1,43 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard
+        style={{ marginBlockStart: 8 }}
+        gutter={[16, 16]}
+        wrap
+        title="换行"
+      >
+        <ProCard
+          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+        <ProCard
+          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+        <ProCard
+          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+        <ProCard
+          colSpan={{ xs: 24, sm: 12, md: 12, lg: 12, xl: 12 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/responsive.tsx

@@ -0,0 +1,72 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <>
+      <ProCard style={{ marginBlockStart: 8 }} gutter={8} title="24栅格">
+        <ProCard
+          colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+        <ProCard
+          colSpan={{ xs: 20, sm: 16, md: 12, lg: 8, xl: 4 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+        <ProCard
+          colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10 }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+      </ProCard>
+      <ProCard style={{ marginBlockStart: 8 }} gutter={8} title="指定宽度px">
+        <ProCard
+          colSpan={{
+            xs: '50px',
+            sm: '100px',
+            md: '200px',
+            lg: '300px',
+            xl: '400px',
+          }}
+          layout="center"
+          bordered
+        >
+          Col
+        </ProCard>
+        <ProCard layout="center" bordered>
+          Auto
+        </ProCard>
+      </ProCard>
+
+      <ProCard
+        style={{ marginBlockStart: 8 }}
+        gutter={8}
+        title="指定宽度百分比"
+      >
+        <ProCard layout="center" bordered>
+          Auto
+        </ProCard>
+        <ProCard
+          layout="center"
+          colSpan={{
+            xs: '10%',
+            sm: '20%',
+            md: '30%',
+            lg: '40%',
+            xl: '50%',
+          }}
+          bordered
+        >
+          Col - 百分比
+        </ProCard>
+      </ProCard>
+    </>
+  );
+};

package/packages/card/src/demos/split.tsx

@@ -0,0 +1,46 @@
+import { ProCard } from '@ant-design/pro-components';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+
+export default () => {
+  const [responsive, setResponsive] = useState(false);
+
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <ProCard
+        title="复杂切分"
+        extra="2019年9月28日"
+        bordered
+        headerBordered
+        split={responsive ? 'horizontal' : 'vertical'}
+      >
+        <ProCard split="horizontal">
+          <ProCard split="horizontal">
+            <ProCard split={responsive ? 'horizontal' : 'vertical'}>
+              <ProCard title="昨日全部流量">123</ProCard>
+              <ProCard title="本月累计流量">234</ProCard>
+              <ProCard title="今年累计流量">345</ProCard>
+            </ProCard>
+            <ProCard split="vertical">
+              <ProCard title="运行中试验">12/56</ProCard>
+              <ProCard title="历史试验总数">134 个</ProCard>
+            </ProCard>
+          </ProCard>
+          <ProCard title="流量趋势">
+            <div>图表</div>
+            <div>图表</div>
+            <div>图表</div>
+            <div>图表</div>
+            <div>图表</div>
+          </ProCard>
+        </ProCard>
+        <ProCard title="流量占用情况">右侧内容</ProCard>
+      </ProCard>
+    </RcResizeObserver>
+  );
+};

package/packages/card/src/demos/split2.tsx

@@ -0,0 +1,30 @@
+import { ProCard } from '@ant-design/pro-components';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+
+export default () => {
+  const [responsive, setResponsive] = useState(false);
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <ProCard
+        title="左右分栏带标题"
+        extra="2019年9月28日"
+        split={responsive ? 'horizontal' : 'vertical'}
+        bordered
+        headerBordered
+      >
+        <ProCard title="左侧详情" colSpan="50%">
+          <div style={{ height: 360 }}>左侧内容</div>
+        </ProCard>
+        <ProCard title="流量占用情况">
+          <div style={{ height: 360 }}>右侧内容</div>
+        </ProCard>
+      </ProCard>
+    </RcResizeObserver>
+  );
+};

package/packages/card/src/demos/split23.tsx

@@ -0,0 +1,14 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProCard split="vertical">
+      <ProCard title="左侧详情" colSpan="30%">
+        左侧内容
+      </ProCard>
+      <ProCard title="左右分栏子卡片带标题" headerBordered>
+        <div style={{ height: 360 }}>右侧内容</div>
+      </ProCard>
+    </ProCard>
+  );
+};

package/packages/card/src/demos/steps-v.tsx

@@ -0,0 +1,59 @@
+import { ProCard } from '@ant-design/pro-components';
+import { Button, Space, Steps } from 'antd';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+
+const { Step } = Steps;
+
+export default () => {
+  const [current, setCurrent] = useState(0);
+  const [responsive, setResponsive] = useState(false);
+  return (
+    <RcResizeObserver
+      key="resize-observer"
+      onResize={(offset) => {
+        setResponsive(offset.width < 596);
+      }}
+    >
+      <ProCard
+        split={responsive ? 'horizontal' : 'vertical'}
+        bordered
+        style={{ height: 320 }}
+      >
+        <ProCard colSpan={responsive ? 24 : 6}>
+          <Steps
+            direction={responsive ? 'horizontal' : 'vertical'}
+            size="small"
+            current={current}
+            style={{ height: '100%' }}
+          >
+            <Step title="填写基本信息" />
+            <Step title="配置模板" />
+            <Step title="配置访问" />
+            <Step title="配置部署和调度" />
+            <Step title="预览" />
+          </Steps>
+        </ProCard>
+        <ProCard title="流量占用情况" colSpan={responsive ? 24 : 18}>
+          <Space>
+            <Button
+              key="primary"
+              type="primary"
+              onClick={() => setCurrent(current + 1)}
+              disabled={current === 5}
+            >
+              下一步
+            </Button>
+            <Button
+              key="pre"
+              onClick={() => setCurrent(current - 1)}
+              disabled={current === 0}
+            >
+              上一步
+            </Button>
+          </Space>
+        </ProCard>
+      </ProCard>
+    </RcResizeObserver>
+  );
+};

package/packages/card/src/demos/tabs-card.tsx

@@ -0,0 +1,18 @@
+import { ProCard } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProCard
+      tabs={{
+        type: 'card',
+      }}
+    >
+      <ProCard.TabPane key="tab1" tab="产品一">
+        内容一
+      </ProCard.TabPane>
+      <ProCard.TabPane key="tab2" tab="产品二">
+        内容二
+      </ProCard.TabPane>
+    </ProCard>
+  );
+};

package/packages/card/src/demos/tabs.tsx

@@ -0,0 +1,56 @@
+import type { ProCardTabsProps } from '@ant-design/pro-components';
+import { ProCard } from '@ant-design/pro-components';
+import { Select, Space } from 'antd';
+import { useState } from 'react';
+
+const { Option } = Select;
+
+export default () => {
+  const [tab, setTab] = useState('tab2');
+  const [tabPosition, setTabPosition] =
+    useState<ProCardTabsProps['tabPosition']>('top');
+
+  return (
+    <div>
+      <Space style={{ marginBlockEnd: 16 }}>
+        Tab position：
+        <Select
+          value={tabPosition}
+          onChange={(value) => setTabPosition(value)}
+          popupMatchSelectWidth={false}
+        >
+          <Option value="top">top</Option>
+          <Option value="bottom">bottom</Option>
+          <Option value="left">left</Option>
+          <Option value="right">right</Option>
+        </Select>
+      </Space>
+      <ProCard
+        tabs={{
+          tabPosition,
+          activeKey: tab,
+          items: [
+            {
+              label: `产品一`,
+              key: 'tab1',
+              children: `内容一`,
+            },
+            {
+              label: `产品二`,
+              key: 'tab2',
+              children: `内容二`,
+            },
+            {
+              label: `产品三`,
+              key: 'tab3',
+              children: `内容三`,
+            },
+          ],
+          onChange: (key) => {
+            setTab(key);
+          },
+        }}
+      />
+    </div>
+  );
+};

package/packages/card/src/index.tsx

@@ -0,0 +1,30 @@
+import type {
+  CheckCardGroupProps,
+  CheckCardProps,
+} from './components/CheckCard';
+import CheckCard from './components/CheckCard';
+import type { StatisticProps } from './components/Statistic';
+import Statistic from './components/Statistic';
+import type {
+  StatisticCardProps,
+  StatisticsCardProps,
+} from './components/StatisticCard';
+import StatisticCard from './components/StatisticCard';
+import type { ProCardProps } from './ProCard';
+import ProCard from './ProCard';
+import type { ProCardTabsProps } from './typing';
+
+import 'antd/lib/card/style';
+
+export { CheckCard, ProCard, Statistic, StatisticCard };
+export type {
+  CheckCardGroupProps,
+  CheckCardProps,
+  ProCardProps,
+  ProCardTabsProps,
+  StatisticCardProps,
+  StatisticProps,
+  StatisticsCardProps,
+};
+
+export default ProCard;