@zat-design/sisyphus-react 4.2.0-beta.2 → 4.2.0-beta.4

package/lib/ProTreeModal/propsType.d.ts

@@ -1,298 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-import { Service, Options } from 'ahooks/lib/useRequest/src/types';
-import type { ProFormOtherType } from '../ProForm/propsType';
-/**
- * 树数据结构
- * @description 定义树节点的数据结构
- */
-export interface ProTreeModalDataType {
-    /**
-     * 节点标签
-     * @description 显示的节点文本
-     * @default undefined
-     */
-    label: string;
-    /**
-     * 节点值
-     * @description 节点的唯一标识
-     * @default undefined
-     */
-    value: string;
-    /**
-     * 子节点
-     * @description 当前节点的子节点数组
-     * @default undefined
-     */
-    children?: ProTreeModalDataType[];
-    /**
-     * 是否禁用
-     * @description 禁用不可操作
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * 固定位置
-     * @description 处理固定场景
-     * @default undefined
-     */
-    fixed?: 'left' | 'right';
-    /**
-     * 是否可勾选
-     * @description 是否可以勾选复选框
-     * @default undefined
-     */
-    checkable?: boolean;
-    /**
-     * 自定义属性
-     * @description 可添加任意其他属性
-     * @default undefined
-     */
-    [key: string]: any;
-}
-/**
- * 值类型
- * @description 组件接受的值类型
- */
-export type ProTreeModalValueType = string | number;
-/**
- * ProTreeModal操作对象
- * @description ProTreeModal组件的操作接口
- */
-export interface ProTreeModalActionType {
-    /**
-     * 值变更方法
-     * @description 用于获取当前选中的值数组
-     * @default undefined
-     */
-    onChange: () => ProTreeModalValueType[];
-}
-/**
- * 字段名称映射
- * @description 定义树节点字段的映射关系
- */
-export interface ProTreeModalFieldNamesType {
-    /**
-     * 标签字段名
-     * @description 指定节点标签的属性名
-     * @default 'label'
-     */
-    label: string;
-    /**
-     * 值字段名
-     * @description 指定节点值的属性名
-     * @default 'value'
-     */
-    value: string;
-    /**
-     * 子节点字段名
-     * @description 指定子节点的属性名
-     * @default 'children'
-     */
-    children?: string;
-}
-/**
- * 树弹框模式
- * @description 弹框展示模式类型
- */
-export type ProTreeModalModeType = 'tree' | 'list' | 'Cascader' | 'Tree' | 'List';
-/**
- * 指定模式属性
- * @description 指定模式下的配置属性
- */
-export interface ProTreeModalAppointType {
-    /**
-     * 是否禁用
-     * @description 禁用指定项或全部项
-     * @default undefined
-     */
-    disabled?: boolean | boolean[];
-}
-/**
- * ProTreeModal组件属性
- * @description ProTreeModal组件的主要配置属性
- */
-export interface ProTreeModalType {
-    /**
-     * 选中值
-     * @description 当前选中的节点值
-     * @default undefined
-     */
-    value?: ProTreeModalValueType | string[];
-    /**
-     * 字段名称映射
-     * @description 自定义节点的字段名称映射
-     * @default { label: 'label', value: 'value', children: 'children' }
-     */
-    fieldNames?: ProTreeModalFieldNamesType;
-    /**
-     * 是否展开弹框
-     * @description 自定义控制modal的显示，此时没有trigger
-     * @default undefined
-     */
-    open?: boolean;
-    /**
-     * 列表布局
-     * @description 列表模式下一行放几个
-     * @default 24
-     */
-    span?: number;
-    /**
-     * 展示类型
-     * @description 展示模式，list为列表展示形式，tree为树形展示，appoint为指定模式
-     * @default 'list'
-     */
-    mode?: ProTreeModalModeType;
-    /**
-     * 是否指定模式
-     * @description 是否开启指定模式，开启后展示形式会不同
-     * @default false
-     */
-    appoint?: boolean;
-    /**
-     * 指定模式参数
-     * @description 指定模式下传递的额外参数
-     * @default undefined
-     */
-    appointProps?: ProTreeModalAppointType;
-    /**
-     * 值包含标签
-     * @description 开启后提交给后端的格式为 [{ label:xx, value: ""}]
-     * @default false
-     */
-    labelInValue?: boolean;
-    /**
-     * 查看模式
-     * @description 是否为查看模式，与disabled效果相同
-     * @default false
-     */
-    isView?: boolean;
-    /**
-     * 枚举代码
-     * @description 使用ProEnum的数据源
-     * @default undefined
-     */
-    code?: string;
-    /**
-     * 触发元素
-     * @description 触发弹框展开的容器
-     * @default undefined
-     */
-    trigger?: string | ReactNode;
-    /**
-     * 显示代码名称
-     * @description 是否展示code-label形式
-     * @default false
-     */
-    showCodeName?: boolean;
-    /**
-     * 数据源
-     * @description 静态数据源
-     * @default []
-     */
-    dataSource?: ProTreeModalDataType[];
-    /**
-     * 最小选择个数
-     * @description 设置最小选择个数限制
-     * @default undefined
-     */
-    min?: number;
-    /**
-     * 最大选择个数
-     * @description 设置最大选择个数限制
-     * @default undefined
-     */
-    max?: number;
-    /**
-     * 超限提示
-     * @description 超过最大数量的提示信息，如'最多为{max}个'
-     * @default undefined
-     */
-    maxMessage?: string;
-    /**
-     * 是否可拖拽
-     * @description 列表模式下已选择项是否可拖拽排序
-     * @default false
-     */
-    draggable?: boolean;
-    /**
-     * 是否禁用
-     * @description 禁用整个组件
-     * @default false
-     */
-    disabled?: any;
-    /**
-     * 弹框标题
-     * @description 弹框的标题文本
-     * @default undefined
-     */
-    title?: string | ReactNode;
-    /**
-     * 全选值
-     * @description 全选时传给后端的标识
-     * @default undefined
-     */
-    allValue?: string | number;
-    /**
-     * 占位提示
-     * @description 搜索框提示文本
-     * @default '请输入'
-     */
-    placeholder?: string;
-    /**
-     * 严格选择
-     * @description 父子节点选中状态不再关联
-     * @default false
-     */
-    checkStrictly?: boolean;
-    /**
-     * 触发器样式
-     * @description trigger元素的样式设置
-     * @default undefined
-     */
-    style?: CSSProperties;
-    /**
-     * 标签集合
-     * @description 用于标记分类的标签集合
-     * @default undefined
-     */
-    tags?: string[];
-    /**
-     * 其他属性
-     * @description 表单其他配置属性
-     * @default undefined
-     */
-    otherProps?: ProFormOtherType;
-    /**
-     * 远程请求
-     * @description 远程请求接口配置
-     * @default undefined
-     */
-    useRequest?: {
-        service?: Service<any, any>;
-        options?: Options<any, any>;
-    };
-    /**
-     * 值变化回调
-     * @description value变化的回调函数
-     * @default undefined
-     */
-    onChange?: (values: ProTreeModalValueType[] | ProTreeModalValueType) => void;
-    /**
-     * 自定义渲染
-     * @description 自定义选项内容渲染
-     * @default undefined
-     */
-    optionRender?: (item: any, searchStr: string) => string | ReactNode;
-    /**
-     * 响应数据转换
-     * @description 对后台返回数据进行格式化
-     * @default undefined
-     */
-    transformResponse?: (data: any) => ProTreeModalDataType[];
-    /**
-     * 打开状态变化
-     * @description 弹框打开/关闭回调
-     * @default undefined
-     */
-    openChange?: (open: boolean) => void;
-}

package/lib/ProTreeModal/propsType.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/ProTreeModal/style/index.less

@@ -1,414 +0,0 @@
-@import '../../style/variables.less';
-
-.pro-tree-select-drop-down-container{
-  .@{ant-prefix}-select-tree-checkbox{
-    margin-top: 0;
-  }
-}
-
-.pro-tree-modal-container .@{ant-prefix}-modal-content .@{ant-prefix}-modal-body {
-  max-height: 498px !important;
-}
-
-.pro-tree-modal {
-  .pro-enum-input-addonAfter {
-    display: flex;
-    align-items: center;
-    padding: 0px 8px;
-    background-color: var(--zaui-base-bg, #ffffff);
-    border: 1px solid #d9d9d9;
-    border-left: none;
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
-    cursor: pointer;
-    transition: none;
-    position: relative;
-    .close-icon{
-      position: absolute;
-      left: -20px;
-      background: #bfbfbf;
-      border-radius: 50%;
-      width: 12px;
-      height: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-      font-size: 8px;
-      cursor: pointer;
-      z-index: 5;
-      &:hover {
-        background: #666;
-      }
-    }
-  }
-
-  .@{ant-prefix}-space-compact {
-    // 最后一个子元素为 input 时，右上、右下圆角 8px（与左侧 select 组成紧凑形态时右侧圆角）
-    > input:last-child,
-    > .@{ant-prefix}-input:last-child {
-      border-top-right-radius: 6px !important;
-      border-bottom-right-radius: 6px !important;
-    }
-  }
-  
-  &:hover{
-    .pro-enum-input-addonAfter:not(.trigger-no-hover):not(.pro-enum-input-addonAfter-not-allowed) {
-      border-color: var(--zaui-brand-hover, #3387ff);
-      color: var(--zaui-brand-hover, #3387ff);
-    }
-    .pro-enum-input-addonAfter:not(.trigger-no-hover):not(.pro-enum-input-addonAfter-not-allowed) .pro-tree-modal-view-svg-active {
-      color: var(--zaui-brand-hover, #3387ff);
-    }
-  }
-  &-placeholder {
-    color: #939499;
-  }
-
-  .@{ant-prefix}-input-disabled {
-   border-radius: 0 !important;
-  }
-
-  .@{ant-prefix}-input-group-wrapper:hover {
-    .pro-tree-modal-view-svg {
-      color: var(--zaui-brand);
-    }
-  }
-  .pro-tree-modal-view-svg {
-    color: inherit;
-    div {
-      display: flex;
-    }
-  }
-
-  .pro-tree-modal-view-svg-active {
-    color: var(--zaui-brand, #006aff);
-  }
-
-  .pro-tree-modal-view-svg-not-allowed {
-    cursor: not-allowed;
-    div,
-    svg {
-      cursor: not-allowed;
-    }
-  }
-
-  .pro-enum-input-addonAfter-not-allowed {
-    cursor: not-allowed;
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: row;
-    height: 482px;
-    margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
-    .checked-container {
-      .@{ant-prefix}-btn {
-        &:active {
-          background: transparent;
-        }
-      }
-    }
-
-    .@{ant-prefix}-tree-checkbox {
-      align-self: flex-start;
-      margin-top: 2px;
-    }
-
-    .@{ant-prefix}-tree-switcher {
-      width: 20px;
-      line-height: 20px;
-    }
-
-    .@{ant-prefix}-tree-treenode {
-      width: 100%;
-      padding: 0;
-      padding-bottom: var(--zaui-font-size-sm, 12px);
-      color: var(--zaui-text);
-      font-size: var(--zaui-font-size, 14px);
-      line-height: 20px;
-    }
-
-    .@{ant-prefix}-tree-node-content-wrapper {
-      min-height: 20px;
-      line-height: 20px;
-    }
-
-    .@{ant-prefix}-tree-node-content-wrapper {
-      width: 100%;
-    }
-  }
-
-  &-box {
-    display: flex;
-    flex-direction: column;
-    width: 456px;
-    height: 100%;
-    color: var(--zaui-text);
-    font-size: var(--zaui-font-size, 14px);
-    line-height: 20px;
-    border: 1px solid #e6e6e6;
-    border-radius: var(--zaui-border-radius, 8px);
-
-    &:first-child {
-      margin-right: var(--zaui-space-size-md, 16px);
-    }
-
-    .pro-tree-modal-search-svg > div {
-      display: flex;
-    }
-
-    /* 修改滚动条样式 */
-    ::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-    .pro-tree-modal-tree-warp {
-      ::-webkit-scrollbar {
-        width: 16px;
-        height: auto;
-      }
-    }
-  }
-
-  &-cascader-box {
-    width: 592px;
-  }
-
-  &-cascader-box-view {
-    width: 320px;
-  }
-
-  &-search {
-    width: auto;
-    margin: var(--zaui-space-size-sm, 8px) var(--zaui-space-size-md, 16px) 0;
-  }
-
-  &-cascader-flex {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  &-cascader-warp {
-    display: flex;
-    flex-direction: column;
-    width: 350px;
-    margin-left: var(--zaui-space-size-md, 16px);
-    overflow: auto;
-
-    &:first-child {
-      width: 192px;
-      margin-left: 0;
-      border-right: 1px solid #e6e6e6;
-    }
-  }
-
-  &-box-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 40px;
-    padding: 0 var(--zaui-space-size-md, 16px);
-    background: #fafafa;
-
-    &:first-child {
-      color: #616161;
-      border-radius: 6px 0 0 6px;
-    }
-
-    .@{ant-prefix}-btn-link {
-      padding: 0;
-    }
-  }
-
-  &-tree-warp {
-    flex: 1;
-    margin: 0 var(--zaui-space-size-md, 16px);
-    padding-top: 16px;
-    overflow-y: auto;
-  }
-
-  &-checkbox-content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
-    line-height: 20px;
-    cursor: pointer;
-
-    &-look {
-      color: #333;
-    }
-
-    &-drag {
-      display: flex;
-    }
-  }
-
-  &-cascader-content {
-    margin-bottom: 0;
-    padding: 6px;
-  }
-
-  &-check-cascader-content {
-    color: var(--zaui-brand);
-    background: rgba(0, 106, 255, 0.1);
-  }
-
-  &-isView {
-    display: flex;
-    align-items: center;
-
-    .pro-tree-modal-view-svg {
-      margin-left: var(--zaui-space-size-sm, 8px);
-    }
-  }
-
-  &-tree-content {
-    margin-bottom: 0;
-  }
-
-  &-search-value {
-    color: var(--zaui-brand);
-  }
-
-  &-checkbox-close {
-    padding-left: var(--zaui-space-size-sm, 8px);
-    color: #c5c7cd;
-    font-size: var(--zaui-font-size-sm, 12px);
-  }
-
-  &-tree-node {
-    display: flex;
-    flex-direction: row;
-
-    &:last-child {
-      flex: 1;
-    }
-  }
-
-  &-tree-node-tag {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 20px;
-    margin-right: var(--zaui-space-size-sm, 8px);
-    padding: 0 var(--zaui-space-size-xs);
-    font-weight: 400;
-    line-height: 24px;
-    white-space: nowrap;
-    border-radius: var(--zaui-border-radius-card);
-
-    span {
-      font-size: var(--zaui-font-size-sm, 12px);
-      line-height: 20px;
-      text-align: center;
-      transform: scale(0.83, 0.83);
-    }
-  }
-}
-
-.pro-tree-modal-no-checks {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #939599;
-  font-weight: 400;
-  font-size: var(--zaui-font-size, 14px);
-}
-
-.pro-transfer-right {
-  .@{ant-prefix}-checkbox {
-    align-items: flex-start;
-  }
-  .checked-item.checked-item-0.disabled {
-    .disabled-icon {
-      margin: 4px 0 0 2px;
-    }
-  }
-  .checked-item {
-    margin: var(--zaui-space-size-sm, 8px) 0;
-
-    &.disabled.dragable{
-      .@{ant-prefix}-tag {
-        justify-content: flex-start;
-        .singleLine{
-          margin-left: 8px;
-        }
-      }
-    }
-    &.dragable {
-      .ant-tag {
-        & > span:first-child {
-          padding: 8px 0;
-          cursor: move;
-        }
-      }
-    }
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    .@{ant-prefix}-tag {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      height: 32px;
-      padding: 2px var(--zaui-space-size-sm, 8px);
-      color: var(--zaui-text, #343434);
-      font-size: var(--zaui-font-size, 14px);
-      background: #f2f2f2;
-      border: none;
-      border-radius: var(--zaui-border-radius, 8px);
-
-      .pro-tooltip {
-        flex: 1;
-        max-width: calc(100% - 42px);
-      }
-
-      .disabled-icon {
-        height: 20px;
-        margin-right: var(--zaui-space-size-xs, 4px);
-        margin-left: 6px;
-        margin-top: 2px;
-      }
-
-      .anticon-close {
-        margin: 0;
-        color: #999;
-        font-size: var(--zaui-font-size-sm, 12px);
-      }
-    }
-
-    &.dragable {
-      .anticon-close {
-        position: relative;
-        left: -4px;
-      }
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-
-      .pro-tooltip,
-      .anticon {
-        cursor: not-allowed;
-      }
-
-      .anticon {
-        pointer-events: none;
-      }
-    }
-
-    .drag-icon {
-      font-size: 18px;
-      color: #949599;
-    }
-  }
-}