@cqsjjb/jjb-react-admin-component 3.1.3 → 3.2.0-beta.0

package/FileUploader/index.less

@@ -0,0 +1,198 @@
+@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
+
+.@{com-prefix-cls}-upload {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #000000d9;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: "tnum";
+  outline: 0
+}
+
+.@{com-prefix-cls}-upload p {
+  margin: 0
+}
+
+.@{com-prefix-cls}-upload-btn {
+  display: block;
+  width: 100%;
+  outline: none
+}
+
+.@{com-prefix-cls}-upload input[type=file] {
+  cursor: pointer
+}
+
+.@{com-prefix-cls}-upload.@{com-prefix-cls}-upload-select {
+  display: inline-block
+}
+
+.@{com-prefix-cls}-upload.@{com-prefix-cls}-upload-disabled {
+  color: #00000040;
+  cursor: not-allowed
+}
+
+.@{com-prefix-cls}-upload-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #000000d9;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  line-height: 1.5715
+}
+
+.@{com-prefix-cls}-upload-list:before {
+  display: table;
+  content: ""
+}
+
+.@{com-prefix-cls}-upload-list:after {
+  display: table;
+  clear: both;
+  content: ""
+}
+
+.@{com-prefix-cls}-upload-list-item {
+  position: relative;
+  height: 22.001px;
+  margin-top: 8px;
+  font-size: 14px
+}
+
+.@{com-prefix-cls}-upload-list-item-name {
+  display: inline-block;
+  width: 100%;
+  padding-left: 22px;
+  overflow: hidden;
+  line-height: 1.5715;
+  white-space: nowrap;
+  text-overflow: ellipsis
+}
+
+
+// TODO
+.@{com-prefix-cls}-upload-list-text-container {
+  transition: opacity .3s,height .3s
+}
+
+.@{com-prefix-cls}-upload-list-text-container:before {
+  display: table;
+  width: 0;
+  height: 0;
+  content: ""
+}
+// TODO
+.@{com-prefix-cls}-upload-list-text-container .@{com-prefix-cls}-upload-span {
+  display: flex;
+  flex: auto
+}
+
+.@{com-prefix-cls}-upload-list-text .@{com-prefix-cls}-upload-span {
+  display: flex;
+  align-items: center
+}
+
+.@{com-prefix-cls}-upload-list-text .@{com-prefix-cls}-upload-span>* {
+  flex: none
+}
+
+.@{com-prefix-cls}-upload-list-text .@{com-prefix-cls}-upload-list-item-name {
+  flex: auto;
+  margin: 0;
+  padding: 0 8px
+}
+
+// TODO
+.@{com-prefix-cls}-upload-list-text .@{com-prefix-cls}-upload-list-item-card-actions,.@{com-prefix-cls}-upload-list-text .@{com-prefix-cls}-upload-text-icon .@{com-prefix-cls}icon {
+  position: static;
+}
+
+.@{com-prefix-cls}-upload-list .@{com-prefix-cls}-upload-animate-inline-appear,.@{com-prefix-cls}-upload-list .@{com-prefix-cls}-upload-animate-inline-enter,.@{com-prefix-cls}-upload-list .@{com-prefix-cls}-upload-animate-inline-leave {
+  animation-duration: .3s;
+  animation-timing-function: cubic-bezier(.78,.14,.15,.86);
+  animation-fill-mode: forwards
+}
+
+.@{com-prefix-cls}-upload-list .@{com-prefix-cls}-upload-animate-inline-appear,.@{com-prefix-cls}-upload-list .@{com-prefix-cls}-upload-animate-inline-enter {
+  animation-name: uploadAnimateInlineIn
+}
+
+.@{com-prefix-cls}-upload-list .@{com-prefix-cls}-upload-animate-inline-leave {
+  animation-name: uploadAnimateInlineOut
+}
+
+@keyframes uploadAnimateInlineIn {
+  0% {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0
+  }
+}
+
+@keyframes uploadAnimateInlineOut {
+  to {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0
+  }
+}
+
+.@{com-prefix-cls}-upload-rtl {
+  direction: rtl
+}
+
+.@{com-prefix-cls}-upload-list-rtl {
+  direction: rtl
+}
+// TODO
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-list-type-text:hover .@{com-prefix-cls}-upload-list-item-name-icon-count-1 {
+  padding-right: 22px;
+  padding-left: 14px
+}
+
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-list-type-text:hover .@{com-prefix-cls}-upload-list-item-name-icon-count-2 {
+  padding-right: 22px;
+  padding-left: 28px
+}
+
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-name {
+  padding-right: 22px;
+  padding-left: 0
+}
+
+// TODO
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-card-actions {
+  right: auto;
+  left: 0
+}
+
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-card-actions .@{com-prefix-cls}icon {
+  padding-right: 0;
+  padding-left: 5px
+}
+
+// TODO
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-info {
+  padding: 0 4px 0 12px
+}
+
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-error .@{com-prefix-cls}-upload-list-item-card-actions .@{com-prefix-cls}icon {
+  padding-right: 0;
+  padding-left: 5px
+}
+
+.@{com-prefix-cls}-upload-list-rtl .@{com-prefix-cls}-upload-list-item-progress {
+  padding-right: 26px;
+  padding-left: 0
+}

package/FormilyDescriptions/index.d.ts

@@ -1,69 +1,126 @@
-// @ts-ignore
 import * as React from 'react';
-import { ComponentProps } from '../types';
+import { DescriptionsProps as AntdDescriptionsProps } from 'antd';
+import { ColumnsType } from 'antd/es/table';
 
-interface FormilyDescriptionsProps extends ComponentProps {
-  /**
-   * @description 表单配置
-   */
-  schema: any,
-  /**
-   * @description 表单数据
-   */
-  values: any,
-  /**
-   * @description 尺寸
-   */
-  size?: 'default' | 'middle' | 'small';
-  /**
-   * @description 列数，默认3
-   */
-  column?: number;
-  /**
-   * @description 自定义渲染纯文本
-   */
-  renderItemText?: (data: { text: string, name: string }) => void;
-  /**
-   * @description 图片宽度
-   */
+export type FormilyValue = string | number | boolean | null | undefined | FormilyValue[] | Record<string, any>;
+
+export type FormilySchema = {
+  // 字段编码
+  fieldCode: string;
+  // 字段数据类型
+  fieldDataTypeEnum: string
+  // 字段长度
+  fieldLength: number
+  // 字段排序
+  fieldSort: number
+  // 表单组件类型
+  formType: string
+  // 表单组件输出值格式类型枚举
+  fromComponentEnum: string
+  // 表单组件信息枚举
+  fromComponentInfoEnum: string
+  // 字段名称
+  name: string
+  // 是否必填
+  requiredEnum: "TRUE" | "FALSE"
+};
+
+export interface FormilyDescriptionsProps extends Omit<AntdDescriptionsProps, 'items'> {
+  // 表单配置 （注意不是原始配置config，而是后端转换后的配置）
+  schema: Array<FormilySchema>;   // 更严格类型，支持 Formily schema
+  // 表单值对象
+  values?: Record<string, FormilyValue>;   // 表单值对象
+  // 详情组件大小
+  size?: 'small' | 'middle' | 'default';
+  // 内部TreeSelect组件的最大标签数量
+  maxTagCount?: number;
+  // 自定义渲染文本
+  renderItemText?: (params: { text: any; name?: string }) => React.ReactNode;
+  // 内部图片宽度
   imageWidth?: number;
-  /**
-   * @description 图片高度
-   */
+  // 内部图片高度
   imageHeight?: number;
-  /**
-   * @description 图片预览配置
-   * @see https://ant.design/components/image-cn#previewtype
-   */
-  imagePreview?: boolean | {}
-  /**
-   * @description 是否显示冒号
-   * @see https://ant.design/components/descriptions-cn#descriptions
-   */
-  colon?: boolean;
-  /**
-   * @description 显示布局
-   * @see https://ant.design/components/descriptions-cn#descriptions
-   */
-  layout?: 'vertical' | 'horizontal';
-  /**
-   * @description 参考antd/description
-   * @see https://ant.design/components/descriptions-cn#descriptions
-   */
-  labelStyle?: React.CSSProperties;
-  /**
-   * @description 参考antd/description
-   * @see https://ant.design/components/descriptions-cn#descriptions
-   */
-  contentStyle?: React.CSSProperties;
-  /**
-   * @description 是否外部预览？
-   */
+  // 附件预览是打开浏览器窗口，还是当前页面
   extraFileLink?: boolean;
+  // 是否显示图片预览
+  imagePreview?: boolean;
+}
+
+export interface FormilyFieldData {
+  name: string;
+  value?: FormilyValue;
+  formType?: string;
+  tableColumns?: ColumnsType<any>;
+  children?: FormilyFieldData[];
+  fromComponentEnum?: string;
+}
+
+export interface DescriptionsRenderProps extends FormilyDescriptionsProps {
+  dataSource: FormilyFieldData[];
+}
+
+export interface ItemRenderProps extends FormilyDescriptionsProps {
+  data: FormilyFieldData;
 }
 
-interface FormilyDescriptionsFc extends React.FC<FormilyDescriptionsProps> {
+export interface RenderTextProps {
+  value: any;
+  name?: string;
+  maxTagCount?: number;
+  renderItemText?: (params: { text: any; name?: string }) => React.ReactNode;
 }
 
-declare const FormilyDescriptions: FormilyDescriptionsFc;
+export interface RenderFileItemProps {
+  url: string;
+  name: string;
+  isImage?: boolean;
+  imageWidth?: number;
+  imageHeight?: number;
+  imagePreview?: any;
+  extraFileLink?: boolean;
+  onPreview?: () => void;
+}
+
+export interface RenderImageProps {
+  url: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  imagePreview?: any;
+  extraFileLink?: boolean;
+}
+
+export interface RenderValidFileProps {
+  url: string;
+  name: string;
+  extraFileLink?: boolean;
+  onPreview?: () => void;
+}
+
+export interface RenderInvalidFileProps {
+  url: string;
+  name: string;
+}
+
+export interface RenderTableProps {
+  columns: ColumnsType<any>;
+  dataSource: any[];
+  imageWidth?: number;
+  imageHeight?: number;
+  imagePreview?: any;
+  extraFileLink?: boolean;
+  onPreview?: (url: string) => void;
+}
+
+// 命名导出
+export declare function DescriptionsRender(props: DescriptionsRenderProps): JSX.Element[];
+export declare function ItemRender(props: ItemRenderProps): JSX.Element;
+export declare function RenderText(props: RenderTextProps): JSX.Element;
+export declare function RenderFileItem(props: RenderFileItemProps): JSX.Element;
+export declare function RenderImage(props: RenderImageProps): JSX.Element;
+export declare function RenderValidFile(props: RenderValidFileProps): JSX.Element;
+export declare function RenderInvalidFile(props: RenderInvalidFileProps): JSX.Element;
+export declare function RenderTable(props: RenderTableProps): JSX.Element;
+
+// 默认导出
+declare const FormilyDescriptions: (props: FormilyDescriptionsProps) => JSX.Element;
 export default FormilyDescriptions;