clxx 2.1.2 → 2.1.4

package/test/src/carouse-notice/index.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { CarouselNotice } from '@';
+
+export default function Index () {
+  return (
+    <div>
+      <p>轮播条目只有一条（不滚动）：</p>
+      <CarouselNotice
+        list={['第一条滚动']}
+        style={{ border: '1px solid blue' }}
+        itemStyle={{
+          color: "blue"
+        }}
+      />
+
+      <p>轮播条目为纯文本：</p>
+      <CarouselNotice
+        list={['第一条滚动', '第二条滚动测试']}
+        style={{ border: '1px solid red' }}
+      />
+
+      <p>轮播条目为任意React组件：</p>
+      <CarouselNotice
+        list={[
+          <p>
+            第一条<span style={{ color: 'pink' }}>粉色</span>滚动
+          </p>,
+          <p style={{ fontSize: '12px', color: 'red' }}>
+            第二条红色文字要小一些
+          </p>,
+          <p style={{ fontWeight: 'bold' }}>第3条滚动文字加粗</p>,
+          <p
+            onClick={() => {
+              alert('点击了第4条轮播条目');
+            }}
+            style={{ textDecoration: 'underline' }}
+          >
+            第4条可点击
+          </p>,
+        ]}
+        style={{ background: '#f0f0f0' }}
+      />
+
+      <p>轮播条目左对齐：</p>
+      <CarouselNotice
+        justify="start"
+        list={['第一条滚动', '第二条滚动测试']}
+        style={{ border: '1px solid red' }}
+      />
+
+      <p>轮播条目右对齐：</p>
+      <CarouselNotice
+        justify="end"
+        list={['第一条滚动', '第二条滚动测试']}
+        style={{ border: '1px solid red' }}
+      />
+    </div>
+  );
+}

package/test/src/clickable/index.css

@@ -0,0 +1,21 @@
+.Touchable {
+  padding: 0.1rem;
+  user-select: none;
+  .btntest {
+    margin-top: 0.5rem;
+    background-color: gray;
+    padding: 0.1rem;
+    > div {
+      padding: 0.1rem;
+      margin: 0.1rem;
+      background-color: #f0f0f0;
+      color: red;
+    }
+  }
+
+  .as {
+    margin-top: 0.2rem;
+    background-color: gray;
+    padding: 0.1rem;
+  }
+}

package/test/src/clickable/index.jsx

@@ -0,0 +1,39 @@
+import './index.css';
+import React from 'react';
+import { Clickable } from '@';
+
+export default function Index () {
+  return (
+    <div className="Touchable">
+      <Clickable className="btntest">
+        可点击元素
+        <Clickable>内嵌可点击元素</Clickable>
+        <Clickable bubble={false}>内嵌可点击元素 bubble=false</Clickable>
+        <Clickable activeStyle={{ backgroundColor: 'green', color: 'cyan' }}>
+          内嵌 activeStyle
+        </Clickable>
+        <Clickable
+          bubble={false}
+          activeStyle={{ backgroundColor: 'green', color: 'cyan' }}
+        >
+          内嵌 activeStyle bubble=false
+        </Clickable>
+      </Clickable>
+
+      <Clickable
+        className="as"
+        activeStyle={{ backgroundColor: 'green', color: 'cyan' }}
+      >
+        activeStyle
+      </Clickable>
+
+      <Clickable
+        disable
+        className="as"
+        activeStyle={{ backgroundColor: 'green', color: 'cyan' }}
+      >
+        activeStyle(禁用) disable=true
+      </Clickable>
+    </div>
+  );
+}

package/test/src/countdown/index.jsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import { Countdown, Countdowner } from "@";
+
+export default function Index () {
+  const [show1, setShow1] = useState("");
+  const [show2, setShow2] = useState("");
+  const [show2Closed, setShow2Close] = useState(false);
+  const [show3, setShow3] = useState("");
+
+  useEffect(() => {
+    const cd1 = new Countdown({
+      remain: 1000,
+      format: "his",
+      onUpdate(result) {
+        setShow1(() => `${result.h}时${result.i}分${result.s}秒`);
+      },
+    });
+    cd1.start();
+
+    const cd2 = new Countdown({
+      remain: 10,
+      format: "s",
+      onUpdate(result) {
+        setShow2(() => `${result.s}秒`);
+      },
+      onEnd() {
+        setShow2Close(() => true);
+      },
+    });
+    cd2.start();
+
+    const cd3 = new Countdown({
+      remain: 259205,
+      format: "dhis",
+      onUpdate(result) {
+        setShow3(() => `${result.d}天${result.h}时${result.i}分${result.s}秒`);
+      },
+    });
+    cd3.start();
+
+    return () => {
+      cd1.stop();
+      cd2.stop();
+      cd3.stop();
+    };
+  }, []);
+
+  return (
+    <div>
+      <p>格式：his，总时长：1000秒</p>
+      <p style={{ color: "red" }}>{show1}</p>
+      <p>格式：s，总时长：10秒</p>
+      <p style={{ color: "red" }}>
+        {show2Closed ? (
+          <span style={{ color: "green" }}> 已触发结束事件</span>
+        ) : (
+          show2
+        )}
+      </p>
+      <p>格式：dhis，总时长：259200秒</p>
+      <p style={{ color: "red" }}>{show3}</p>
+      <hr />
+      <p>下面是来自Countdowner组件的</p>
+      <Countdowner remain={100}/>
+      <Countdowner
+        remain={1234}
+        seperator="@"
+        seperatorStyle={{
+          transform: `rotate(45deg)`
+        }}
+        renderNumber={(n, key) => {
+          if (key === "i") {
+            return <strong>{n}</strong>;
+          } else {
+            return <span>{n}</span>;
+          }
+        }}
+      />
+      <Countdowner
+        remain={1234}
+        seperator="@"
+        renderSeperator={(key)=>{
+          return <span style={{border: `1px solid red`}}>{key}</span> 
+        }}
+      />
+      <Countdowner
+        remain={10}
+        containerStyle={{
+          background: "rgba(0,0,0,.2)"
+        }}
+        onEnd={()=>{console.log("已结束");}}
+      />
+    </div>
+  );
+}

package/test/src/dialog/index.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { showDialog, RowCenter } from "@";
+import style from "./index.module.css";
+
+export default function Index() {
+  return (
+    <div>
+      <p>
+        <button
+          onClick={async () => {
+            const close = await showDialog({
+              showMask: false,
+              blankClosable: true,
+              onHide: () => {
+                console.log("closed");
+              },
+              content: (
+                <RowCenter className={style.contentBox}>
+                  <button
+                    onClick={() => {
+                      close();
+                    }}
+                  >
+                    关闭
+                  </button>
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          普通弹框，没有遮罩，空白可关闭
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={async () => {
+            const close = await showDialog({
+              id: "hello",
+              className: "world",
+              type: "pullUp",
+              showMask: false,
+              blankClosable: true,
+              content: (
+                <RowCenter className={style.contentBox}>
+                  <button onClick={() => close()}>关闭</button>
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          从底部上拉出，没有遮罩，空白可关闭
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={async () => {
+            const close = await showDialog({
+              type: "pullDown",
+              content: (
+                <RowCenter className={style.contentBox}>
+                  <button onClick={() => close()}>关闭</button>
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          从顶部下拉出，有遮罩，空白不可关闭
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={async () => {
+            const close = await showDialog({
+              type: "pullRight",
+              content: (
+                <RowCenter className={style.contentBox}>
+                  <button onClick={() => close()}>关闭</button>
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          左侧往右侧拉出，有遮罩，空白不可关闭
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={async () => {
+            const close = await showDialog({
+              type: "pullLeft",
+              content: (
+                <RowCenter className={style.contentBox}>
+                  <button onClick={() => close()}>关闭</button>
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          右侧往左侧拉出，有遮罩，空白不可关闭
+        </button>
+      </p>
+    </div>
+  );
+}

package/test/src/dialog/index.module.css

@@ -0,0 +1,5 @@
+.contentBox {
+  width: 7.5rem * 0.8;
+  height: 4rem;
+  background: goldenrod;
+}

package/test/src/image-picker/index.jsx

@@ -0,0 +1,88 @@
+// import "./index.css";
+// import React from "react";
+// import { ImagePicker, SimpleImagePicker, Loading } from "@";
+
+// export default function () {
+//   return (
+//     <div>
+//       <p>网格风格的图片选择器（多选）</p>
+//       <ImagePicker
+//         gutter=".32rem"
+//         // renderPickButton={() => {
+//         //   return <span>Haha</span>;
+//         // }}
+//         multiple
+//         cols={4}
+//         // isSquare={false}
+//         onHookEachRound={() => {
+//           // 显示一个loading
+//           let loading = null;
+//           const onStartPick = () => {
+//             loading = new Loading();
+//           };
+//           const onEndPick = async () => {
+//             await loading?.close();
+//           };
+//           return { onStartPick, onEndPick };
+//         }}
+//         onFilesChange={(res) => {
+//           console.log(res);
+//         }}
+//       />
+
+//       <p>网格风格的自定义选取按钮的图片选择器（多选）</p>
+//       <ImagePicker
+//         multiple
+//         gutter={10}
+//         cols={4}
+//         maxPick={20}
+//         renderPickButton={(disabled) => {
+//           console.log(disabled);
+//           return <button>选取图片</button>;
+//         }}
+//       />
+
+//       <p>普通选择器（多选，结果需要自己处理）</p>
+//       <SimpleImagePicker
+//         multiple
+//         onHookEachRound={() => {
+//           // 显示一个loading
+//           let loading = null;
+//           const onStartPick = () => {
+//             loading = new Loading();
+//           };
+//           const onEndPick = async () => {
+//             await loading?.close();
+//           };
+//           return { onStartPick, onEndPick };
+//         }}
+//         onFilesChange={(res) => {
+//           console.log(res);
+//         }}
+//       />
+//       <p>自定义选取按钮普通选择器（单选，结果需要自己处理）</p>
+//       <SimpleImagePicker
+//         // multiple
+//         renderPickButton={() => {
+//           return <button>选取图片</button>;
+//         }}
+//         onFilesChange={(res) => {
+//           console.log(res);
+//         }}
+//       />
+//       <p>限制最大宽度（单选，结果需要自己处理）</p>
+//       <SimpleImagePicker
+//         // multiple
+//         renderPickButton={() => {
+//           return <button>选取图片</button>;
+//         }}
+//         onFilesChange={(res) => {
+//           console.log(res);
+//         }}
+//         loadImageOption={{
+//           maxWidth: 10
+//         }}
+//       />
+//     </div>
+//   );
+// }

package/test/src/index/index.jsx

@@ -0,0 +1,46 @@
+import { React } from "react";
+import { history } from "@";
+
+const pageConfig = [
+  { path: "indicator", title: "Indicator菊花转圈指示器", enable: true },
+  { path: "countdown", title: "Countdown倒计时", enable: true },
+  { path: "alert", title: "showAlert弹框功能", enable: true },
+  { path: "dialog", title: "showDialog对话框", enable: true },
+  // { path: 'layout', title: '常用布局组件', enable: false },
+  { path: "toast", title: "showToast轻提示", enable: true },
+  { path: "carouse-notice", title: "CarouseNotice轮播公告", enable: true },
+  { path: "loading", title: "showLoading加载", enable: true },
+  { path: "scrollview", title: "ScrollView滚动容器", enable: true },
+  { path: "ago", title: "Ago多久以前", enable: true },
+  { path: "overlay", title: "Overlay通用覆盖层", enable: true },
+  { path: "clickable", title: "Clickable可触摸组件", enable: true },
+  // { path: 'privacy', title: 'Privacy去标识化', enable: true },
+  { path: "autogrid", title: "AutoGrid生成自动对齐的表格", enable: true },
+];
+
+export default function Index() {
+  return (
+    <>
+      <ul className="Home">
+        {pageConfig.map((item) => {
+          return (
+            <li
+              className={item.enable ? "item" : "item-disable"}
+              key={item.path}
+              onClick={() => {
+                if (item.enable) {
+                  history.push(`/${item.path}`);
+                }
+              }}
+            >
+              {item.title}
+              <svg viewBox="0 0 1024 1024">
+                <path d="M347.687 144.188l-52.761 52.238 313.928 316.082-316.568 313.42 52.314 52.673 369.322-365.663z" />
+              </svg>
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+}

package/test/src/index.css

@@ -0,0 +1,49 @@
+  
+.backHome {
+  padding: 0.3rem;
+  border-bottom: 1px solid #ccc;
+}
+.Home {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  .item,
+  .item-disable {
+    font-size: 0.36rem;
+    padding: 0.2rem 0.3rem;
+    position: relative;
+    border-bottom: 1px solid #f5f5f5;
+    svg {
+      width: 0.48rem;
+      position: absolute;
+      top: 50%;
+      right: 0.3rem;
+      transform: translateY(-50%);
+    }
+  }
+  .item-disable {
+    color: #ddd;
+    svg {
+      path {
+        fill: #ddd;
+      }
+    }
+  }
+  .item {
+    svg {
+      path {
+        fill: #666;
+      }
+    }
+    &:active {
+      color: #007bff;
+      opacity: 0.5;
+      svg path {
+        fill: #007bff;
+      }
+    }
+  }
+}
+.demo {
+  padding: 0.3rem;
+}

package/test/src/index.jsx

@@ -0,0 +1,31 @@
+import './index.css';
+import React from 'react';
+import { createApp, history } from '@';
+import Home from './index/index';
+
+createApp({
+  target: "#root",
+  // maxDocWidth: 10000,
+  async render(pathname) {
+    let page = await import(`./${pathname}/index.jsx`);
+    if (pathname === 'index') {
+      return <Home />;
+    }
+    return (
+      <>
+        <div className="backHome">
+          <button
+            onClick={() => {
+              history.back();
+            }}
+          >
+            回到首页
+          </button>
+        </div>
+        <div className="demo">
+          <page.default />
+        </div>
+      </>
+    );
+  },
+});

package/test/src/indicator/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Indicator } from "@";
+
+export default function Index () {
+  return (
+    <div>
+      <p>常规圆角条</p>
+      <Indicator barColor="#000" />
+      <p>直角条</p>
+      <Indicator barColor="#000" rounded={false} />
+      <p>绿色条</p>
+      <Indicator barColor="green" />
+      <p>转圈速度变慢的绿色条</p>
+      <Indicator barColor="green" duration={1000} />
+      <p>20条</p>
+      <Indicator barColor="#000" barCount={20} />
+      <p>条宽度变大</p>
+      <Indicator barColor="#000" barWidth={10} />
+      <p>条宽度和高度一致</p>
+      <Indicator barColor="#000" barHeight={10} barWidth={10} barCount={16} />
+      <p>指示器尺寸变小</p>
+      <Indicator size=".4rem" barColor="#000" />
+    </div>
+  );
+}

package/test/src/loading/index.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { showLoading, showLoadingAtLeast } from "@";
+
+export default function Index () {
+  return (
+    <div>
+      <p>普通加载(5秒后自动关闭)</p>
+      <button
+        onClick={async () => {
+          const close = await showLoading();
+          window.setTimeout(close, 5000);
+        }}
+      >
+        显示Loading
+      </button>
+      <p>普通加载带提示文字(5秒后自动关闭)</p>
+      <button
+        onClick={async () => {
+          const close = await showLoading("数据加载中...");
+          window.setTimeout(close, 5000);
+        }}
+      >
+        显示Loading
+      </button>
+      <p>至少展示2000毫秒</p>
+      <button
+        onClick={async () => {
+          const close = await showLoadingAtLeast(2000);
+          await close();
+        }}
+      >
+        显示Loading
+      </button>
+    </div>
+  );
+}

package/test/src/overlay/index.jsx

@@ -0,0 +1,31 @@
+import { Overlay } from "@";
+import { useState } from "react";
+
+export default function Index () {
+  const [show1, setShow1] = useState(false);
+  const [show2, setShow2] = useState(false);
+
+  return (
+    <>
+      <p>
+        <button onClick={() => setShow1(true)}>Overlay显示在当前位置</button>
+      </p>
+      <p>
+        <button onClick={() => setShow2(true)}>
+          Overlay显示在外部（body下方）
+        </button>
+      </p>
+
+      {show1 && (
+        <Overlay onClick={() => setShow1(false)}>
+          <div style={{ color: "#fff" }}>Overlay显示在虚拟DOM中插入的位置</div>
+        </Overlay>
+      )}
+      {show2 && (
+        <Overlay outside onClick={() => setShow2(false)}>
+          <div style={{ color: "#fff" }}>Overlay显示在最外面，默认body下新创建的DOM中</div>
+        </Overlay>
+      )}
+    </>
+  );
+}

package/test/src/privacy/index.css

@@ -0,0 +1,13 @@
+.Privacy {
+  .item {
+    border-bottom: 1px solid #f0f0f0;
+    strong {
+      color: blue;
+    }
+    i {
+      font-size: .12rem;
+      color: #af2d07;
+      font-style: normal;
+    }
+  }
+}

package/test/src/privacy/index.jsx

@@ -0,0 +1,34 @@
+// import './index.css';
+// import React from 'react';
+// import { PrivacyContent } from '@';
+
+// export default function () {
+//   return (
+//     <div className="Privacy">
+//       <div className="item">
+//         <p>
+//           134<strong>56567</strong>657（手机号）
+//           <br />
+//           <i>包含模式：从第3位到第7位</i>
+//         </p>
+//         <p>
+//           <PrivacyContent start={3} end={7} type="include">
+//             13456567657
+//           </PrivacyContent>
+//         </p>
+//       </div>
+//       <div className="item">
+//         <p>
+//           <strong>42028</strong>1199509164<strong>579</strong>（身份证号）
+//           <br />
+//           <i>排除模式：排除开头5位和结尾3位</i>
+//         </p>
+//         <p>
+//           <PrivacyContent start={5} end={3} type="exclude">
+//             420281199509164579
+//           </PrivacyContent>
+//         </p>
+//       </div>
+//     </div>
+//   );
+// }