@giteeteam/apps-team-components 1.10.8 → 1.11.0-alpha.1

package/README.md

@@ -44,6 +44,7 @@ pnpm storybook
 
 | 组件库版本 | team版本 |
 | --| -- |
+| 1.11.x | >=4.43.0 |
 | 1.10.x | >=4.40.0 |
 | 1.9.x | >=4.38.0 |
 | 1.8.x | >=4.36.0 |

package/dist/components/fields/editor/ReadView.d.ts

@@ -0,0 +1,3 @@
+import { ReadViewBaseProps } from '../types';
+declare const EditorReadView: import("react").NamedExoticComponent<ReadViewBaseProps>;
+export default EditorReadView;

package/dist/components/fields/editor/ReadView.js

@@ -0,0 +1,27 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { memo, useEffect } from 'react';
+import { css } from '@emotion/react';
+import { proximaSdk } from '@giteeteam/proxima-sdk-js';
+import EmptyField from '../../common/EmptyField.js';
+
+const SPECIAL_EDITOR_KEY = '__editor__html';
+const EditorCellStyle = css `
+  &.editor-cell {
+    white-space: pre-wrap;
+    word-break: break-word;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+`;
+const EditorReadView = memo(({ itemValues, fieldKey }) => {
+    var _a;
+    const htmlStr = (_a = itemValues === null || itemValues === void 0 ? void 0 : itemValues[SPECIAL_EDITOR_KEY]) === null || _a === void 0 ? void 0 : _a[fieldKey];
+    useEffect(() => {
+        if (fieldKey && htmlStr) {
+            proximaSdk.execute('ReadViewValueChange', { fieldKey, value: htmlStr });
+        }
+    }, [htmlStr, fieldKey]);
+    return htmlStr ? (jsx("div", { className: "editor-cell", css: EditorCellStyle, dangerouslySetInnerHTML: { __html: htmlStr } })) : (jsx(EmptyField, { readonly: true }));
+});
+
+export { EditorReadView as default };

package/dist/components/fields/long-text/ReadView.d.ts

@@ -1,3 +1,6 @@
 import { ReadViewBaseProps } from '../types';
-declare const LongTextReadView: import("react").NamedExoticComponent<ReadViewBaseProps>;
+type LongTextReadViewProps = ReadViewBaseProps & {
+    isReadingTableCell?: boolean;
+};
+declare const LongTextReadView: import("react").NamedExoticComponent<LongTextReadViewProps>;
 export default LongTextReadView;

package/dist/components/fields/long-text/ReadView.js

@@ -1,12 +1,23 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { css } from '@emotion/react';
+import { proximaSdk } from '@giteeteam/proxima-sdk-js';
 import EmptyField from '../../common/EmptyField.js';
 import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip.js';
-import { whiteSpacePreStyle } from './style/index.js';
+import { whiteSpacePreStyle, textStyle } from './style/index.js';
 
-const LongTextReadView = memo(({ value, readonly }) => {
-    return (jsx(Fragment, { children: value ? (jsx(BaseOverflowTooltip, { maxline: 1, children: jsx("span", { css: css(whiteSpacePreStyle), dangerouslySetInnerHTML: { __html: value } }) })) : (jsx(EmptyField, { readonly: readonly })) }));
+const OverflowWrapper = ({ needOverflow, children }) => {
+    if (needOverflow)
+        return jsx(BaseOverflowTooltip, { maxline: 1, children: children });
+    return jsx(Fragment, { children: children });
+};
+const LongTextReadView = memo(({ value, readonly, isReadingTableCell, fieldKey }) => {
+    useEffect(() => {
+        if (fieldKey && value) {
+            proximaSdk.execute('ReadViewValueChange', { fieldKey, value });
+        }
+    }, [value, fieldKey]);
+    return (jsx(Fragment, { children: value ? (jsx(OverflowWrapper, { needOverflow: !isReadingTableCell, children: jsx("span", { css: css(whiteSpacePreStyle, textStyle), dangerouslySetInnerHTML: { __html: value } }) })) : (jsx(EmptyField, { readonly: readonly })) }));
 });
 LongTextReadView.displayName = 'LongTextReadView';
 

package/dist/components/fields/long-text/style/index.d.ts

@@ -1 +1,2 @@
 export declare const whiteSpacePreStyle = "\n  padding-top: 5px;\n  padding-bottom: 5px;\n  word-break: break-all;\n  white-space: pre-wrap;\n";
+export declare const textStyle = "\n  line-height: 22px;\n  color: #2e405e;\n";

package/dist/components/fields/long-text/style/index.js

@@ -4,5 +4,9 @@ const whiteSpacePreStyle = `
   word-break: break-all;
   white-space: pre-wrap;
 `;
+const textStyle = `
+  line-height: 22px;
+  color: #2e405e;
+`;
 
-export { whiteSpacePreStyle };
+export { textStyle, whiteSpacePreStyle };

package/dist/components/fields/status/style/index.d.ts

@@ -1,10 +1,10 @@
-export declare const readViewWrapper = "\n  display: -webkit-box;\n  align-items: center;\n  justify-content: center;\n  min-width: 62px;\n  height: 22px;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 22px;\n  text-align: center;\n  border-radius: 4px;\n";
+export declare const readViewWrapper = "\n  display: -webkit-box;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--status-cell-min-width, 62px);\n  height: 22px;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: var(--status-cell-font-weight, 600);\n  line-height: 22px;\n  text-align: center;\n  border-radius: 4px;\n";
 export declare const workflowContentStyle = "\n  max-width: 200px;\n  text-align: left;\n";
 export declare const statePopoverStyle: (antPrefix: string) => string;
 export declare const flowNextStyle = "\n  max-height: 260px;\n  padding-top: 10px;\n  overflow: auto;\n  margin: -12px;\n";
 export declare const flowWrapperStyle = "\n  padding: 4px 0;\n";
-export declare const flowStateStyle = "\n  min-width: 62px;\n  height: 24px;\n  padding: 0 18px 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 24px;\n  color: #fff;\n  text-align: center;\n  background: #cdcdcd;\n  border-radius: 4px;\n  box-shadow: none !important;\n\n  span {\n    text-decoration: none !important;\n  }\n";
-export declare const flowStateInWorkflowStyle = "\n  &.status-btn:not(.add-weights) {\n    min-width: 62px;\n    height: 22px;\n    padding: 0 8px;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 22px;\n    color: #fff;\n    text-align: center;\n    background: #cdcdcd;\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n";
+export declare const flowStateStyle = "\n  min-width: var(--status-cell-min-width, 62px);\n  height: 24px;\n  padding: 0 18px 0 8px;\n  font-size: 12px;\n  font-weight: var(--status-cell-font-weight, 600);\n  line-height: 24px;\n  color: #fff;\n  text-align: center;\n  background: #cdcdcd;\n  border-radius: 4px;\n  box-shadow: none !important;\n\n  span {\n    text-decoration: none !important;\n  }\n";
+export declare const flowStateInWorkflowStyle = "\n  &.status-btn:not(.add-weights) {\n    min-width: var(--status-cell-min-width, 62px);\n    height: 22px;\n    padding: 0 8px;\n    font-size: 12px;\n    font-weight: var(--status-cell-font-weight, 600);\n    line-height: 22px;\n    color: #fff;\n    text-align: center;\n    background: #cdcdcd;\n    border-radius: 4px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n";
 export declare const flowStateButtonStyle = "\n  &:not(.add-weights) > span {\n    display: -webkit-box;\n  }\n";
 export declare const stateBtnStyle = "\n  height: 22px;\n  line-height: 22px;\n";
 export declare const noStateStyle = "\n  color: #909aaa;\n  background: var(--color-gray-4, #F1F2F4);\n";

package/dist/components/fields/status/style/index.js

@@ -1,14 +1,14 @@
-import { statusCellMinWidth, fieldLabelColor, themeBgColorBase, gray7, blue1, gray4, gray6, gray10, blue6 } from '../../../../style/common.js';
+import { statusCellMinWidth, statusCellFontWeight, fieldLabelColor, themeBgColorBase, gray7, blue1, gray4, gray6, gray10, blue6 } from '../../../../style/common.js';
 
 const readViewWrapper = `
   display: -webkit-box;
   align-items: center;
   justify-content: center;
-  min-width: 62px;
+  min-width: ${statusCellMinWidth};
   height: 22px;
   padding: 0 8px;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: ${statusCellFontWeight};
   line-height: 22px;
   text-align: center;
   border-radius: 4px;
@@ -44,7 +44,7 @@ const flowStateStyle = `
   height: 24px;
   padding: 0 18px 0 8px;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: ${statusCellFontWeight};
   line-height: 24px;
   color: #fff;
   text-align: center;
@@ -62,7 +62,7 @@ const flowStateInWorkflowStyle = `
     height: 22px;
     padding: 0 8px;
     font-size: 12px;
-    font-weight: 600;
+    font-weight: ${statusCellFontWeight};
     line-height: 22px;
     color: #fff;
     text-align: center;

package/dist/components/fields/types.d.ts

@@ -3,4 +3,5 @@ export type ReadViewBaseProps = {
     options: any[];
     itemValues: any;
     readonly?: boolean;
+    fieldKey?: string;
 };

package/dist/components/table-components/index.js

@@ -43,6 +43,7 @@ const BaseTableCell = ({ className, cellData, column, rowData, readComponents =
     const timeoutCurrent = useRef();
     const ReadComponent = readComponents[column.cellType] || readComponents[column.componentType];
     const EditComponent = editComponents[column.cellType] || editComponents[column.componentType];
+    const fieldKey = column.dataIndex || column.dataKey || column.key;
     const handleMouseOver = useCallback(() => {
         if (!isEmpty(editComponents)) {
             timeoutCurrent.current = setTimeout(() => {
@@ -56,7 +57,7 @@ const BaseTableCell = ({ className, cellData, column, rowData, readComponents =
         return (jsx("div", { className: cls, children: jsx(EditTableCell, { Component: EditComponent, workspaceId: (_a = rowData.workspace) === null || _a === void 0 ? void 0 : _a.objectId, itemTypeId: (_b = rowData.itemType) === null || _b === void 0 ? void 0 : _b.objectId, property: property, data: data, id: rowData.objectId, readonly: readonly, objectId: objectId, text: cellData, type: column.componentType, handleChange: handleChange, dataSource: column.dataSource }) }));
     }
     if (ReadComponent) {
-        return (jsx("div", { className: cls, onMouseOver: handleMouseOver, children: jsx(ReadComponent, { readonly: readonly, value: cellData, ...column.property, userData: column.data, options: ((_c = column.data) === null || _c === void 0 ? void 0 : _c.customData) || EMPTY_ARRAY, itemValues: rowData, objectId: column.objectId, dataSource: column.dataSource }) }));
+        return (jsx("div", { className: cls, onMouseOver: handleMouseOver, children: jsx(ReadComponent, { readonly: readonly, value: cellData, ...column.property, userData: column.data, options: ((_c = column.data) === null || _c === void 0 ? void 0 : _c.customData) || EMPTY_ARRAY, itemValues: rowData, objectId: column.objectId, dataSource: column.dataSource, fieldKey: fieldKey, isReadingTableCell: column.isReadingList }) }));
     }
     const text = transferItem(cellData !== null && cellData !== void 0 ? cellData : rowData[column.dataIndex], readonly);
     return jsx("div", { className: cls, children: text });

package/dist/components/table-components/utils.js

@@ -12,6 +12,7 @@ import DataQuoteReadView from '../fields/data-quote/ReadView.js';
 import DateReadView from '../fields/date/ReadView.js';
 import DropdownCell from '../fields/dropdown/Cell.js';
 import DropdownReadView from '../fields/dropdown/ReadView.js';
+import EditorReadView from '../fields/editor/ReadView.js';
 import FileReadView from '../fields/file/ReadView.js';
 import FormulaReadView from '../fields/formula/ReadView.js';
 import HyperLinkCell from '../fields/hyper-link/ReadView.js';
@@ -88,6 +89,7 @@ const getAllReadComponents = () => {
         [FIELD_TYPE_KEY_MAPPINGS.Script]: ScriptReadView,
         [FIELD_TYPE_KEY_MAPPINGS.Tree]: TreeReadView,
         [FIELD_TYPE_KEY_MAPPINGS.Reporter]: ReporterReadView,
+        [FIELD_TYPE_KEY_MAPPINGS.Editor]: EditorReadView,
     };
     return allReadComponents;
 };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as DataQuoteReadView } from './components/fields/data-quote/Rea
 export { default as DateReadView } from './components/fields/date/ReadView';
 export { default as DropdownCell } from './components/fields/dropdown/Cell';
 export { default as DropdownReadView } from './components/fields/dropdown/ReadView';
+export { default as EditorReadView } from './components/fields/editor/ReadView';
 export { default as FileReadView } from './components/fields/file/ReadView';
 export { default as FormulaReadView } from './components/fields/formula/ReadView';
 export { default as HyperLinkReadView } from './components/fields/hyper-link/ReadView';

package/dist/index.js

@@ -14,6 +14,7 @@ export { default as DataQuoteReadView } from './components/fields/data-quote/Rea
 export { default as DateReadView } from './components/fields/date/ReadView.js';
 export { default as DropdownCell } from './components/fields/dropdown/Cell.js';
 export { default as DropdownReadView } from './components/fields/dropdown/ReadView.js';
+export { default as EditorReadView } from './components/fields/editor/ReadView.js';
 export { default as FileReadView } from './components/fields/file/ReadView.js';
 export { default as FormulaReadView } from './components/fields/formula/ReadView.js';
 export { default as HyperLinkReadView } from './components/fields/hyper-link/ReadView.js';

package/dist/style/common.d.ts

@@ -22,7 +22,8 @@ export declare const green4 = "var(--color-success-4, #4DD18B)";
 export declare const green5 = "var(--color-success-5, #29c477)";
 export declare const orange4 = "var(--color-orange-4, #ffd15e)";
 export declare const orange5 = "var(--color-orange-5, #ffbf36)";
-export declare const statusCellMinWidth = "62px";
+export declare const statusCellMinWidth = "var(--status-cell-min-width, 62px)";
+export declare const statusCellFontWeight = "var(--status-cell-font-weight, 600)";
 export declare const fieldLabelColor = "#909aaa";
 export declare const themeBgColorBase = "var(--color-gray-4, #F1F2F4)";
 export declare const randomClassName: (name: string) => string;

package/dist/style/common.js

@@ -22,7 +22,8 @@ const green4 = 'var(--color-success-4, #4DD18B)';
 const green5 = 'var(--color-success-5, #29c477)';
 const orange4 = 'var(--color-orange-4, #ffd15e)';
 const orange5 = 'var(--color-orange-5, #ffbf36)';
-const statusCellMinWidth = '62px';
+const statusCellMinWidth = 'var(--status-cell-min-width, 62px)';
+const statusCellFontWeight = 'var(--status-cell-font-weight, 600)';
 const fieldLabelColor = '#909aaa';
 const themeBgColorBase = gray4;
 const randomClassName = (name) => {
@@ -35,4 +36,4 @@ const randomClassName = (name) => {
     return `${name}_${result}`;
 };
 
-export { blue1, blue10, blue2, blue3, blue4, blue5, blue6, blue7, blue8, blue9, fieldLabelColor, gray1, gray10, gray2, gray3, gray4, gray5, gray6, gray7, gray8, gray9, green4, green5, orange4, orange5, randomClassName, statusCellMinWidth, themeBgColorBase };
+export { blue1, blue10, blue2, blue3, blue4, blue5, blue6, blue7, blue8, blue9, fieldLabelColor, gray1, gray10, gray2, gray3, gray4, gray5, gray6, gray7, gray8, gray9, green4, green5, orange4, orange5, randomClassName, statusCellFontWeight, statusCellMinWidth, themeBgColorBase };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giteeteam/apps-team-components",
-  "version": "1.10.8",
+  "version": "1.11.0-alpha.1",
   "description": "Gitee team components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",