@cloud-app-dev/vidc 3.1.1 → 3.1.3

package/es/Modal/index.d.ts

@@ -1,7 +1,7 @@
-import { ModalProps } from './interface';
+import { IModalProps } from './interface';
 import React from 'react';
 import './index.less';
-declare function Modal({ children, className, style, getContainer, ...props }: ModalProps): JSX.Element;
+declare function Modal({ children, className, style, getContainer, ...props }: IModalProps): JSX.Element;
 declare namespace Modal {
     var defaultProps: {
         className: string;

package/es/Modal/index.js

@@ -19,7 +19,6 @@ import { __rest } from "tslib";
 import React, { useContext, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import CC from '../ConfigContext';
-import ConfigContext from '../ConfigContext';
 import "./index.css";
 
 function Modal(_a) {
@@ -88,7 +87,7 @@ function useModal() {
     }, /*#__PURE__*/React.createElement(Modal, {
       okText: "\u786E\u5B9A",
       cancelText: "\u53D6\u6D88",
-      visible: state.visible,
+      open: state.visible,
       onOk: state.onOk,
       onCancel: close,
       destroyOnClose: true,
@@ -122,11 +121,6 @@ function useModal() {
 }
 
 var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
-  var context = useContext(ConfigContext.Context);
-  var root = useMemo(function () {
-    return (context === null || context === void 0 ? void 0 : context.root) || document.body;
-  }, [context === null || context === void 0 ? void 0 : context.root]);
-
   var _useState3 = useState({
     content: null,
     visible: false,
@@ -165,16 +159,13 @@ var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
   return /*#__PURE__*/React.createElement(Modal, {
     okText: "\u786E\u5B9A",
     cancelText: "\u53D6\u6D88",
-    visible: state.visible,
+    open: state.visible,
     onOk: state.onOk,
     onCancel: close,
     destroyOnClose: true,
     title: state.title,
     width: state.width,
-    className: state.className,
-    getContainer: function getContainer() {
-      return root;
-    }
+    className: state.className
   }, state.content);
 });
 Modal.info = _Modal.info;

package/es/Modal/interface.d.ts

@@ -1,326 +1,10 @@
+import { ModalProps, ModalFuncProps } from 'antd/lib/modal/Modal';
 import * as React from 'react';
 
 declare type getContainerFunc = () => HTMLElement;
 
-export interface ModalProps {
-  /**
-   * @description 对话框是否可见
-   * @default -
-   */
-  visible?: boolean;
-
-  /**
-   * @description 确定按钮 loading
-   * @default false
-   */
-  confirmLoading?: boolean;
-
-  /**
-   * @description 标题
-   * @default -
-   */
-  title?: React.ReactNode | string;
-
-  /**
-   * @description 是否显示右上角的关闭按钮
-   * @default true
-   */
-  closable?: boolean;
-
-  /**
-   * @description 点击确定回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onOk?: (e: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * @description 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * @description 点Modal 完全关闭后的回调
-   * @type function
-   * @default -
-   */
-  afterClose?: () => void;
-
-  /**
-   * @description 垂直居中展示 Modal
-   * @default false
-   */
-  centered?: boolean;
-
-  /**
-   * @description 宽度
-   * @default 416
-   */
-  width?: string | number;
-
-  /**
-   * @description 底部内容，当不需要默认底部按钮时，可以设为 footer={null}
-   * @default (确定取消按钮)
-   */
-  footer?: React.ReactNode;
-
-  /**
-   * @description 确认按钮文字
-   * @default 确定
-   */
-  okText?: React.ReactNode;
-
-  /**
-   * @description 确认按钮类型
-   * @default primary
-   */
-  okType?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
-
-  /**
-   * @description 取消按钮文字
-   * @default 取消
-   */
-  cancelText?: React.ReactNode;
-
-  /**
-   * @description 点击蒙层是否允许关闭
-   * @default true
-   */
-  maskClosable?: boolean;
-
-  /**
-   * @description 强制渲染 Modal
-   * @default false
-   */
-  forceRender?: boolean;
-
-  /**
-   * @description 确认按钮props
-   * @type Object
-   * @default -
-   */
-  okButtonProps?: any;
-
-  /**
-   * @description 取消按钮props
-   * @type Object
-   * @default -
-   */
-  cancelButtonProps?: any;
-
-  /**
-   * @description 关闭时销毁 Modal 里的子元素
-   * @default false
-   */
-  destroyOnClose?: boolean;
-
-  /**
-   * @description 可用于设置浮层的样式，调整浮层位置等
-   * @default -
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * @description 对话框外层容器的类名
-   * @default -
-   */
-  wrapClassName?: string;
-
-  /**
-   * @description mask动画
-   * @default -
-   */
-  maskTransitionName?: string;
-
-  /**
-   * @description 动画
-   * @default -
-   */
-  transitionName?: string;
-
-  /**
-   * @description 容器类名
-   * @default -
-   */
-  className?: string;
-
-  /**
-   * @description 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom
-   * @default body
-   */
-  getContainer?: string | HTMLElement | getContainerFunc | false | null;
-
-  /**
-   * @description 设置 Modal 的 z-index
-   * @default 1000
-   */
-  zIndex?: number;
-
-  /**
-   * @description Modal body 样式
-   * @default -
-   */
-  bodyStyle?: React.CSSProperties;
-
-  /**
-   * @description 遮罩样式
-   * @default -
-   */
-  maskStyle?: React.CSSProperties;
-
-  /**
-   * @description 是否展示遮罩
-   * @default true
-   */
-  mask?: boolean;
-
-  /**
-   * @description 是否支持键盘 esc 关闭
-   * @default true
-   */
-  keyboard?: boolean;
-
-  /**
-   * @description 自定义关闭图标
-   * @default -
-   */
-  closeIcon?: React.ReactNode;
-
-  children: React.ReactNode;
-}
-export interface ModalFuncProps {
-  /**
-   * @description 容器类名
-   * @default -
-   */
-  className?: string;
-
-  /**
-   * @description 标题
-   * @default -
-   */
-  title?: React.ReactNode;
-
-  /**
-   * @description 内容
-   * @default -
-   */
-  content?: React.ReactNode;
-
-  /**
-   * @description 点击确定回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onOk?: (...args: any[]) => any;
-
-  /**
-   * @description 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调
-   * @type function(e: MouseEvent<HTMLElement>)
-   * @default -
-   */
-  onCancel?: (...args: any[]) => any;
-
-  /**
-   * @description 确认按钮props(antd ButtonProps)
-   * @type Object
-   * @default -
-   */
-  okButtonProps?: any;
-
-  /**
-   * @description 取消按钮props(antd ButtonProps)
-   * @type Object
-   * @default -
-   */
-  cancelButtonProps?: any;
-
-  /**
-   * @description 垂直居中展示 Modal
-   * @default false
-   */
-  centered?: boolean;
-
-  /**
-   * @description 宽度
-   * @default 416
-   */
-  width?: string | number;
-
-  /**
-   * @description 确认按钮文字
-   * @default 确定
-   */
-  okText?: React.ReactNode;
-
-  /**
-   * @description 确认按钮类型
-   * @default primary
-   */
-  okType?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
-
-  /**
-   * @description 取消按钮文字
-   * @default 取消
-   */
-  cancelText?: React.ReactNode;
-
-  /**
-   * @description 自定义图标
-   * @default <QuestionCircle />
-   */
-  icon?: React.ReactNode;
-
-  /**
-   * @description 是否展示遮罩
-   * @default true
-   */
-  mask?: boolean;
-
-  /**
-   * @description 点击蒙层是否允许关闭
-   * @default true
-   */
-  maskClosable?: boolean;
-
-  /**
-   * @description 设置 Modal 的 z-index
-   * @default 1000
-   */
-  zIndex?: number;
-
-  /**
-   * @description 用于设置浮层的样式，调整浮层位置等
-   * @default -
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * @description 遮罩样式
-   * @default -
-   */
-  maskStyle?: React.CSSProperties;
-
-  /**
-   * @description 是否支持键盘 esc 关闭
-   * @default true
-   */
-  keyboard?: boolean;
-
-  /**
-   * @description 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom
-   * @default body
-   */
-  getContainer?: string | HTMLElement | getContainerFunc | false | null;
-
-  /**
-   * @description 指定自动获得焦点的按钮
-   * @default ok
-   */
-  autoFocusButton?: null | 'ok' | 'cancel';
-}
+export interface IModalProps extends ModalProps {}
+export interface IModalFuncProps extends ModalFuncProps {}
 export declare type ModalFunc = (props: ModalFuncProps) => {
   destroy: () => void;
   update: (newConfig: ModalFuncProps) => void;

package/es/ThemeAntd/index.css

@@ -252,9 +252,22 @@ div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp
 div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-ellipsis {
   color: inherit;
 }
+div .cloudapp-pagination-options-quick-jumper input {
+  background-color: var(--form-bg);
+  border-color: var(--form-bd);
+}
+div .cloudapp-pagination-options-quick-jumper input:hover {
+  border-color: var(--form-active-bg);
+}
+div .cloudapp-pagination-options-quick-jumper input:focus,
+div .cloudapp-pagination-options-quick-jumper input-focused {
+  border-color: var(--form-active-bg);
+  box-shadow: none;
+}
 div .cloudapp-picker {
   background-color: var(--form-bg);
   border-radius: var(--radius1);
+  border-color: var(--form-bd);
   color: inherit;
 }
 div .cloudapp-picker:hover,
@@ -340,6 +353,15 @@ div .cloudapp-picker-separator {
 div .cloudapp-picker-range .cloudapp-picker-active-bar {
   background-color: var(--form-active-bg);
 }
+div .cloudapp-picker-time-panel-column > li.cloudapp-picker-time-panel-cell .cloudapp-picker-time-panel-cell-inner {
+  color: inherit;
+}
+div .cloudapp-picker-time-panel-column > li.cloudapp-picker-time-panel-cell-selected .cloudapp-picker-time-panel-cell-inner {
+  background-color: var(--form-active-bg);
+}
+div .cloudapp-picker-time-panel-column > li.cloudapp-picker-time-panel-cell .cloudapp-picker-time-panel-cell-inner:hover {
+  background-color: var(--form-active-bg);
+}
 div .cloudapp-popover-inner {
   border-radius: var(--radius1);
 }
@@ -424,23 +446,23 @@ div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
   box-shadow: unset;
 }
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: var(--scrollbar-track-shadow);
-  border-radius: 8px;
+  border-radius: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #ddd;
+  border-radius: var(--scrollbar-width);
+  background: var(--scrollbar-thumb-bg);
   -webkit-box-shadow: var(--scrollbar-thumb-shadow);
 }
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover-bg);
 }
 ::-webkit-scrollbar-thumb:active {
-  background: #999;
+  background: var(--scrollbar-thumb-bg);
 }
 div .cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
   border-radius: var(--radius1);
@@ -504,6 +526,14 @@ div .cloudapp-tree {
   color: inherit;
   background: transparent;
 }
+div .cloudapp-tree .cloudapp-tree-node-content-wrapper:hover {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}
+div .cloudapp .cloudapp-node-content-wrapper.cloudapp-node-selected {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}
 div .cloudapp-table {
   background-color: var(--table-bg);
   color: inherit;
@@ -512,6 +542,10 @@ div .cloudapp-table {
 div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
   background: var(--table-row-hover-color);
 }
+div .cloudapp-table-tbody > tr.cloudapp-table-row-selected > td {
+  background: var(--table-row-hover-color);
+  border-bottom-color: var(--table-bd);
+}
 div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
   background-color: var(--table-head-bg);
   border-bottom-color: var(--table-bd);
@@ -540,6 +574,12 @@ div .cloudapp-table-row-expand-icon:focus,
 div .cloudapp-table-row-expand-icon:hover {
   color: var(--primary-dark);
 }
+div .cloudapp-empty-normal {
+  color: inherit;
+}
+div .cloudapp-table-tbody > tr.cloudapp-table-placeholder:hover > td {
+  background-color: var(--table-row-hover-color);
+}
 :root {
   color: var(--color);
 }

package/es/ThemeAntd/style/pagination.css

@@ -68,3 +68,15 @@ div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp
 div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-ellipsis {
   color: inherit;
 }
+div .cloudapp-pagination-options-quick-jumper input {
+  background-color: var(--form-bg);
+  border-color: var(--form-bd);
+}
+div .cloudapp-pagination-options-quick-jumper input:hover {
+  border-color: var(--form-active-bg);
+}
+div .cloudapp-pagination-options-quick-jumper input:focus,
+div .cloudapp-pagination-options-quick-jumper input-focused {
+  border-color: var(--form-active-bg);
+  box-shadow: none;
+}

package/es/ThemeAntd/style/picker.css

@@ -1,6 +1,7 @@
 div .cloudapp-picker {
   background-color: var(--form-bg);
   border-radius: var(--radius1);
+  border-color: var(--form-bd);
   color: inherit;
 }
 div .cloudapp-picker:hover,
@@ -86,3 +87,12 @@ div .cloudapp-picker-separator {
 div .cloudapp-picker-range .cloudapp-picker-active-bar {
   background-color: var(--form-active-bg);
 }
+div .cloudapp-picker-time-panel-column > li.cloudapp-picker-time-panel-cell .cloudapp-picker-time-panel-cell-inner {
+  color: inherit;
+}
+div .cloudapp-picker-time-panel-column > li.cloudapp-picker-time-panel-cell-selected .cloudapp-picker-time-panel-cell-inner {
+  background-color: var(--form-active-bg);
+}
+div .cloudapp-picker-time-panel-column > li.cloudapp-picker-time-panel-cell .cloudapp-picker-time-panel-cell-inner:hover {
+  background-color: var(--form-active-bg);
+}

package/es/ThemeAntd/style/scrollbar.css

@@ -1,19 +1,19 @@
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: var(--scrollbar-track-shadow);
-  border-radius: 8px;
+  border-radius: var(--scrollbar-width);
 }
 ::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #ddd;
+  border-radius: var(--scrollbar-width);
+  background: var(--scrollbar-thumb-bg);
   -webkit-box-shadow: var(--scrollbar-thumb-shadow);
 }
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover-bg);
 }
 ::-webkit-scrollbar-thumb:active {
-  background: #999;
+  background: var(--scrollbar-thumb-bg);
 }

package/es/ThemeAntd/style/table.css

@@ -6,6 +6,10 @@ div .cloudapp-table {
 div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
   background: var(--table-row-hover-color);
 }
+div .cloudapp-table-tbody > tr.cloudapp-table-row-selected > td {
+  background: var(--table-row-hover-color);
+  border-bottom-color: var(--table-bd);
+}
 div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
   background-color: var(--table-head-bg);
   border-bottom-color: var(--table-bd);
@@ -34,3 +38,9 @@ div .cloudapp-table-row-expand-icon:focus,
 div .cloudapp-table-row-expand-icon:hover {
   color: var(--primary-dark);
 }
+div .cloudapp-empty-normal {
+  color: inherit;
+}
+div .cloudapp-table-tbody > tr.cloudapp-table-placeholder:hover > td {
+  background-color: var(--table-row-hover-color);
+}

package/es/ThemeAntd/style/tree.css

@@ -2,3 +2,11 @@ div .cloudapp-tree {
   color: inherit;
   background: transparent;
 }
+div .cloudapp-tree .cloudapp-tree-node-content-wrapper:hover {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}
+div .cloudapp .cloudapp-node-content-wrapper.cloudapp-node-selected {
+  background-color: transparent;
+  border-bottom: 1px solid var(--secondary2);
+}

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/theme-config.ts

@@ -3,9 +3,9 @@ export const themeConfig = `
     --primary: #248FFA;
     --primary-light: #248FFA;
     --primary-dark: #227BD5;
-    --secondary1: #6D8EFB;
-    --secondary1-light: #86A2FF;
-    --secondary1-dark: #5D7FF0;
+    --secondary1: #e8b127;
+    --secondary1-light: #e8b127;
+    --secondary1-dark: #e8b127;
     --secondary2: #33AAFF;
     --secondary2-light: #61BDFF;
     --secondary2-dark: #2194E5;
@@ -42,10 +42,15 @@ export const themeConfig = `
     --fs: 14px;
     --fs-small: 12px;
     --fs-large: 20px;
-    --color: rgba(0,0,0,1);
-    --color-dark: #000000;
-    --color-light: rgba(255,255,255,1);
-    --color-disabled: rgba(0,0,0,0.26);
+    --bd:rgba(255, 255, 255, 0.3);
+    --color:#ffffff;
+    --color1:#ffffff;
+    --color2:#fefefe;
+    --color3:#eeeeee;
+    --color4:#999999;
+    --color5:#666666;
+    --color6:#333333;
+    --color7:#000000;
     --shadow1: 2px 0 10px 0 rgba(0,0,0,0.06);
     --shadow2: 2px 0 10px 0 rgba(0,0,0,0.06);
     --shadow3: 2px 0 10px 0 rgba(0,0,0,0.06);