@cloudbase/weda-ui 0.2.11 → 0.2.12

package/src/web/components/form/uploaderFile/index.css

@@ -0,0 +1,423 @@
+.weda-uploader-pc {
+  margin: 0;
+  padding: 0;
+}
+
+.weda-uploader-pc .weda-uploader-pc__title {
+  color: #000000;
+  line-height: 20px;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+/* 单张图片回显 */
+.weda-uploader-pc .weda-uploader-pc__image-box {
+  height: 100px;
+  width: 100px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  background: #f2f2f2;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.weda-uploader-pc .weda-uploader-pc__body {
+  margin-bottom: 8px;
+}
+
+.weda-uploader-pc .weda-uploader-pc__input-box {
+  margin-bottom: 8px;
+}
+.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
+  margin-bottom: 0px;
+}
+
+.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
+  margin-bottom: 0px;
+}
+.weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
+  margin-left: 8px;
+}
+
+.weda-uploader-pc .weda-uploader-pc__image-box:hover .weda-uploader-pc__action {
+  display: flex;
+}
+
+.weda-uploader-pc .weda-uploader-pc__image {
+  max-height: 100%;
+  height: auto;
+  width: 100%;
+  cursor: zoom-in;
+}
+
+.weda-uploader-pc .weda-uploader-pc__action {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.weui-uploader.horizontal {
+  display: flex;
+}
+.weui-uploader.horizontal .weui-uploader__hd {
+  display: inline-block;
+  align-self: center;
+}
+.weda-uploader-pc.horizontal {
+  display: flex;
+  justify-content: space-between;
+}
+.weui-uploader.horizontal .weui-uploader__bd {
+  padding-left: 2.28571rem;
+}
+
+/* ----上传文件----  pc */
+.weda-upload-file-pc .weda-upload-file-pc__file-item {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc__btn-descripe {
+  margin-left: 16px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-upload-file-pc .wedatea2td-list--divider > li {
+  padding: 0 !important;
+}
+
+.weda-upload-file-pc .wedatea2td-list--divider > li:nth-child(n + 2) {
+  border-top: 0;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item {
+  display: flex;
+  font-size: 14px;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item-header {
+  border: 1px solid #e7e7e7;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 16px;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item-body {
+  border-left: 1px dashed #e7e7e7;
+  border-right: 1px dashed #e7e7e7;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item-header
+  .weda-upload-file-pc--item-label {
+  border-right: 1px solid #e7e7e7;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-title {
+  width: 220px;
+  padding: 10px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-size {
+  width: 100px;
+  padding: 10px 12px;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-status {
+  width: 150px;
+  padding: 10px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action {
+  width: 160px;
+  padding: 10px 12px;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc__btn--weak {
+  border-color: #dcdcdc;
+  color: rgba(0, 0, 0, 0.9);
+  width: 88px;
+  font-size: 14px;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-status
+  .wedatea2td-icon {
+  margin-right: 8px;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-status
+  .wedatea2td-icon.wedatea2td-icon-pending-gray {
+  background-image: url(./pending.svg);
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action
+  .wedatea2td-btn {
+  font-size: 14px;
+  line-height: 22px;
+  color: #0052d9;
+  margin-right: 12px;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item
+  .weda-upload-file-pc--item-action
+  .wedatea2td-btn:last-child {
+  margin-right: 0;
+}
+
+.weda-upload-file-pc .weda-upload-file-pc--item-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 169px;
+  background: #ffffff;
+  border: 1px dashed #dcdcdc !important;
+  border-top: none !important;
+  border-radius: 0 0 2px 2px;
+}
+
+.weda-upload-file-pc
+  .weda-upload-file-pc--item-empty
+  .weda-upload-file-pc--item {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 22px;
+}
+
+/* ----上传文件----  h5 */
+.weda-upload-file-mobile {
+  width: 90%;
+  background-color: #f6f6f6;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__hd {
+  width: 100%;
+  padding: 24px 20px 8px 20px;
+  display: flex;
+  background-color: #fff;
+}
+.weda-upload-file-mobile .vertical {
+  padding: 0 20px 8px 20px;
+}
+.weda-upload-file-mobile .weda-upload-file-mobile__title {
+  font-size: 14px;
+  line-height: 20px;
+  color: #000;
+  margin-right: 20px;
+  padding-top: 6px;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__btn--weak {
+  width: 88px;
+  padding: 0 16px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  line-height: 22px;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__tips {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__bd {
+  margin-top: 8px;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__bd .wedatea2td-list > li {
+  margin-bottom: 8px;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__item {
+  width: 100%;
+  padding: 16px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__btn-group {
+  display: flex;
+}
+
+.weda-upload-file-mobile .weda-upload-file-mobile__item .wedatea2td-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__btn-group
+  .wedatea2td-icon:last-child {
+  margin-right: 0;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .wedatea2td-icon.wedatea2td-icon-delete {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/2372f6a8-2f6a-4f30-92bf-73c62a5c0ae7.svg');
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .wedatea2td-icon.wedatea2td-icon-download {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4cba5da1-cde4-40c6-a075-86eff22858a4.svg');
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .wedatea2td-icon.wedatea2td-icon-refresh {
+  background-image: url('https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/af5486eb-65e0-4536-8e51-6c68a17b71ac.svg');
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__item-left {
+  flex: 1;
+  margin-right: 16px;
+  width: 70%;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-detail {
+  display: flex;
+  align-items: center;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-name {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.9);
+  max-width: 6.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status {
+  margin-left: 24px;
+  display: flex;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status
+  .wedatea2td-icon {
+  width: 16px;
+  height: 16px;
+  background-size: 100% 100%;
+  margin-right: 0;
+}
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status
+  .wedatea2td-icon.wedatea2td-icon-fail {
+  background-image: url(./fail.svg);
+}
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status
+  .wedatea2td-icon.wedatea2td-icon-success {
+  background-image: url(./success.svg);
+}
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-status--msg {
+  width: 4.2rem;
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-foot {
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-progress {
+  margin-top: 4px;
+  border-radius: 0;
+  background-color: #e7e7e7;
+  height: 3px !important;
+  margin-bottom: 0;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-progress
+  .wedatea2td-progress__value {
+  border-radius: 0;
+  height: 3px !important;
+}
+
+.weda-upload-file-mobile
+  .weda-upload-file-mobile__item
+  .weda-upload-file-mobile__file-progress
+  .wedatea2td-progress__text {
+  display: none;
+}
+.weda-upload-file-mobile .weui-uploader-mobile__input {
+  position: absolute;
+  opacity: 0;
+  width: 92px;
+  height: 32px;
+}

package/src/web/components/form/uploaderFile/index.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { usePlatform } from '../../../utils/platform';
+import { UploadFileH5 as UploaderH5 } from './uploadFile.h5';
+import { UploadFilePc } from './uploadFile.pc';
+
+import './index.css';
+
+/**
+ * 文件组件上传，区分 h5端/pc端
+ */
+export default function UploaderFile(props) {
+  const platform = usePlatform();
+  if (props?.showType === 'pc') {
+    return <UploadFilePc {...props} />;
+  }
+  if (props?.showType === 'h5') {
+    return <UploaderH5 {...props} />;
+  }
+  return platform === 'h5' ? (
+    <UploaderH5 {...props} />
+  ) : (
+    <UploadFilePc {...props} />
+  );
+}
+
+UploaderFile.propTypes = {
+  showType: PropTypes.string, // 强制展示某个平台 pc | h5
+};

package/src/web/components/form/uploaderFile/pending.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="pc" transform="translate(-651.000000, -394.000000)">
+            <g id="上传/批量上传中备份" transform="translate(372.000000, 147.000000)">
+                <g id="内容列" transform="translate(0.000000, 107.000000)">
+                    <g transform="translate(254.000000, 126.000000)" id="编组">
+                        <g transform="translate(24.000000, 13.000000)" id="1.Bace基础/3.Icon图标/操作/move">
+                            <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="time-filled-(Background)"></path>
+                            <path d="M15,8 C15,4.13400674 11.8659935,1 8,1 C4.13400674,1 1,4.13400674 1,8 C1,11.8659935 4.13400674,15 8,15 C11.8659935,15 15,11.8659935 15,8 Z M7.5,8.3889246 L10.6466904,11.5356159 L11.3537979,10.8285084 L8.5,7.97471142 L8.5,5 L7.5,5 L7.5,8.3889246 Z" id="time-filled" fill-opacity="0.4" fill="#000000"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/web/components/form/uploaderFile/success.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1.Bace基础/3.Icon图标/操作/move</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-104.000000, -120.000000)">
+            <g id="1.Bace基础/3.Icon图标/操作/move" transform="translate(103.000000, 119.000000)">
+                <path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="check-circle-filled-(Background)"></path>
+                <path d="M15,8 C15,4.13400674 11.8659935,1 8,1 C4.13400674,1 1,4.13400674 1,8 C1,11.8659935 4.13400674,15 8,15 C11.8659935,15 15,11.8659935 15,8 Z M7,10.7069998 L11.5,6.20749998 L10.7924995,5.5 L7,9.29300022 L5.20650005,7.5 L4.5,8.20650005 L7,10.7069998 Z" id="check-circle-filled" fill="#00A870"></path>
+            </g>
+        </g>
+    </g>
+</svg>