@giteeteam/apps-team-components 1.11.3 → 1.11.4

package/dist/components/common/expand-component/index.d.ts

@@ -16,7 +16,7 @@ interface ExpandProps {
     children: React.ReactNode;
     expandType?: EXPAND_TYPE_ENUM;
     editing?: boolean;
-    readonly: boolean;
+    readonly?: boolean;
 }
 declare const Expand: React.FC<ExpandProps>;
 export default Expand;

package/dist/components/common/utils.d.ts

@@ -8,4 +8,8 @@ type GetCondition = (dom: HTMLElement, className: string) => boolean;
 export declare const getParentEle: (dom: HTMLElement, className: string, conditionFunc?: GetCondition) => HTMLElement;
 export declare const getPopupContainerFun: (getPopupContainer: (node?: HTMLElement) => HTMLElement, triggerNode: HTMLElement, apply: string, page?: string) => HTMLElement;
 export declare const isChinese: (text: string) => boolean;
+export declare const REG_REGEXP: RegExp;
+export declare const isRegExp: (expression: string) => boolean;
+export declare const toRegExp: (expression: string) => RegExp;
+export declare const isPropsEqual: <T = any>(prevProps: T, nextProps: T) => boolean;
 export {};

package/dist/components/common/utils.js

@@ -1,3 +1,4 @@
+import { omit, isEqual } from 'lodash-es';
 import '../../lib/dayjs.js';
 import { DATE_TIME_FORMAT, DATE_TIME_FORMAT_SEC } from '../../lib/global.js';
 import { blue4, green4, orange4 } from '../../style/common.js';
@@ -91,5 +92,20 @@ const getPopupContainerFun = (getPopupContainer, triggerNode, apply, page) => {
 };
 const zhReg = /[\u4e00-\u9fa5]/g;
 const isChinese = (text) => zhReg.test(text);
+const REG_REGEXP = /^\/.+\/$/;
+const isRegExp = (expression) => new RegExp(REG_REGEXP).test(expression);
+const toRegExp = (expression) => {
+    if (!expression) {
+        return new RegExp(null);
+    }
+    const sliceExpression = expression.slice(1, expression.length - 1);
+    const reg = new RegExp(sliceExpression);
+    return reg;
+};
+const isPropsEqual = (prevProps, nextProps) => {
+    const prev = omit(prevProps, ['onChange']);
+    const next = omit(nextProps, ['onChange']);
+    return isEqual(prev, next);
+};
 
-export { dateFormat, defaultFilterOptions, getBackgroundColor, getNameBadge, getParentEle, getPopupContainerFun, isChinese };
+export { REG_REGEXP, dateFormat, defaultFilterOptions, getBackgroundColor, getNameBadge, getParentEle, getPopupContainerFun, isChinese, isPropsEqual, isRegExp, toRegExp };

package/dist/components/fields/base-component/types.d.ts

@@ -2,7 +2,48 @@ export interface CellProps {
     overlayClsName?: string;
     workspaceId?: string;
 }
-export interface FieldProps {
+export declare const SCREEN_TYPE: {
+    readonly View: "view";
+    readonly Create: "create";
+    readonly Edit: "edit";
+};
+export type VALUE_OF_SCREEN_TYPE = (typeof SCREEN_TYPE)[keyof typeof SCREEN_TYPE];
+export type ReadViewBaseProps = {
+    value: any;
+    options?: any[];
+    itemValues?: any;
     readonly?: boolean;
+};
+interface RegularProps {
+    message?: string;
+    expression?: string;
+}
+export interface GroupConfig {
+    groupName: string[];
+    handleGroup?: (item?: any) => string;
+}
+export interface FieldProps extends ReadViewBaseProps {
+    screenMode?: VALUE_OF_SCREEN_TYPE;
+    editMode?: boolean;
+    name?: string;
+    page?: any;
+    labelAlign?: IScreenLabelProps;
+    labelWidth?: number;
+    hiddenLabel?: boolean;
+    readonly?: boolean;
+    apply?: string;
+    validation?: RegularProps;
+    userData?: Record<string, any>;
+    searchComponent?: boolean;
+    allowNull?: boolean;
+    isGroup?: boolean;
+    groupConfig?: GroupConfig;
+    onGroupFetch?: (key: string) => any;
+    children?: React.ReactNode;
+    itemId?: string;
+    fieldKey?: string;
+    extraNode?: React.ReactNode;
+    hasExtraNode?: boolean;
 }
 export type IScreenLabelProps = 'left' | 'right' | 'top';
+export {};

package/dist/components/fields/base-component/utils.d.ts

@@ -1,2 +1,2 @@
 import { IScreenLabelProps } from './types';
-export declare const getFieldWidthStyle: (labelWidth: number, labelAlign: IScreenLabelProps, hiddenLabel: boolean, apply: string) => any;
+export declare const getFieldWidthStyle: (labelWidth: number, labelAlign: IScreenLabelProps, hiddenLabel: boolean, apply: string, hasExtraNode?: boolean) => any;

package/dist/components/fields/base-component/utils.js

@@ -1,7 +1,10 @@
-const getFieldWidthStyle = (labelWidth, labelAlign, hiddenLabel, apply) => {
+const getFieldWidthStyle = (labelWidth, labelAlign, hiddenLabel, apply, hasExtraNode = false) => {
     if (hiddenLabel) {
         labelWidth = 0;
     }
+    if (hasExtraNode) {
+        return { flex: 1 };
+    }
     if (apply !== 'cell' && labelAlign !== 'top') {
         return { width: `calc(100% - ${labelWidth}px)` };
     }

package/dist/components/fields/text/BaseField.d.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 import type { InputProps } from 'antd';
 import type { FieldProps } from '../base-component/types';
+export declare const BASE_FIELD_WIDTH = 104;
 export type BaseFieldProps = InputProps & FieldProps & {
     userData?: any;
     label?: string;
@@ -13,3 +15,5 @@ export type BaseFieldProps = InputProps & FieldProps & {
     searchComponent?: boolean;
     fieldType?: 'longText' | 'text';
 };
+declare const _default: React.NamedExoticComponent<BaseFieldProps>;
+export default _default;

package/dist/components/fields/text/BaseField.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, memo } from 'react';
+import { Overlay } from 'react-overlays';
+import { ClassNames } from '@emotion/react';
+import { message, Col, Input } from 'antd';
+import { noop } from 'lodash-es';
+import Expand, { EXPAND_TYPE_ENUM } from '../../common/expand-component/index.js';
+import OverflowTooltip from '../../common/overflow-tooltip/OverflowTooltip.js';
+import { isRegExp, toRegExp, isPropsEqual } from '../../common/utils.js';
+import useI18n from '../../../lib/hooks/useI18n.js';
+import EmptyField from '../../common/EmptyField.js';
+import { getFieldWidthStyle } from '../base-component/utils.js';
+import useViewClass from '../hooks/useViewClass.js';
+import { textStyle, hiddenHoverClass } from './style.js';
+
+const BASE_FIELD_WIDTH = 104;
+const Text = props => {
+    const { t } = useI18n();
+    const { readonly = false, placeholder, editMode = false, labelWidth = BASE_FIELD_WIDTH, labelAlign, value: propsValue, onChange = noop, apply, hiddenLabel, addonBefore = '', addonAfter = '', validation = {}, maxline = 1, screenMode, hasExtraNode, ...defaultProps } = props;
+    const [editing, setEditing] = useState(false);
+    const containerRef = useRef(null);
+    const targetRef = useRef(null);
+    const [value, setValue] = useState('');
+    const { isView, viewClassNames } = useViewClass({ screenMode, readonly, editing });
+    useEffect(() => {
+        setValue(typeof propsValue === 'string' ? propsValue : '');
+    }, [propsValue]);
+    const handleClick = useCallback(e => {
+        if (readonly)
+            return;
+        if ('tooltip' === e.target.role)
+            return;
+        setEditing(true);
+        setTimeout(() => {
+            if (!readonly && !editMode) {
+                targetRef.current && targetRef.current.focus();
+            }
+        });
+    }, [readonly, editMode]);
+    const handleBlur = useCallback(e => {
+        setTimeout(() => {
+            var _a;
+            const value = (_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim();
+            if (!editMode) {
+                setEditing(false);
+                const { expression, message: expressionMessage } = validation;
+                const isExpressionRegExp = isRegExp(expression);
+                if (expression && isExpressionRegExp && value) {
+                    const regExp = toRegExp(expression);
+                    if (regExp && !regExp.test(value)) {
+                        message.error(expressionMessage || t('global.error'));
+                        setValue(propsValue);
+                    }
+                    else {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                    }
+                }
+                else {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                }
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            }
+        });
+    }, [editMode, onChange, propsValue, validation, t]);
+    const handleChange = e => {
+        setValue(e.target.value);
+    };
+    const style = getFieldWidthStyle(labelWidth, labelAlign, hiddenLabel, apply, hasExtraNode);
+    const hiddenHover = readonly || editing || editMode || apply === 'cell' || defaultProps.name === 'name-view' || isView;
+    return (jsx(ClassNames, { children: ({ cx, css }) => (jsxs(Col, { style: style, ref: containerRef, className: cx(css(textStyle()), 'field-value', viewClassNames, { [hiddenHoverClass]: hiddenHover }), onClick: handleClick, children: [(readonly || (!editMode && !editing)) &&
+                    (value ? (isView ? (jsxs(Expand, { readonly: readonly, editing: editing, expandType: EXPAND_TYPE_ENUM.TEXT, children: [addonBefore, value, addonAfter] })) : (jsxs(OverflowTooltip, { enterable: true, title: `${addonBefore}${value}${addonAfter}`, maxline: maxline, children: [addonBefore, value, addonAfter] }))) : (jsx(EmptyField, { readonly: readonly }))), !readonly && (editMode || editing) && containerRef && (jsx(Overlay, { show: true, flip: true, rootClose: true, container: containerRef, target: containerRef, onHide: noop, children: () => (jsx("div", { className: "field-value-overlay", children: jsx(Input, { ...defaultProps, className: 'field-value-overlay-component', ref: targetRef, value: value, onChange: handleChange, onBlur: handleBlur, placeholder: placeholder, addonBefore: addonBefore, addonAfter: addonAfter }) })) }))] })) }));
+};
+Text.displayName = 'TextBaseField';
+var BaseField = memo(Text, isPropsEqual);
+
+export { BASE_FIELD_WIDTH, BaseField as default };

package/dist/components/fields/text/Cell.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CellProps } from '../base-component/types';
+import { BaseFieldProps } from './BaseField';
+export type TextProps = BaseFieldProps & CellProps;
+declare const Text: React.ForwardRefExoticComponent<import("antd").InputProps & import("../base-component/types").FieldProps & {
+    userData?: any;
+    label?: string;
+    placeholder?: string;
+    maxLength?: number;
+    value?: string;
+    description?: string;
+    onChange?: (e: React.MouseEvent) => void;
+    onBlur?: (e: React.MouseEvent) => void;
+    maxline?: 1 | 2 | 3 | 4 | 5;
+    searchComponent?: boolean;
+    fieldType?: "longText" | "text";
+} & CellProps & React.RefAttributes<any>>;
+export default Text;

package/dist/components/fields/text/Cell.js

@@ -0,0 +1,10 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React__default from 'react';
+import { Row } from 'antd';
+import BaseField from './BaseField.js';
+
+const Text = React__default.forwardRef((props, ref) => {
+    return (jsx(Row, { ref: ref, className: 'field-cell-layout', children: jsx(BaseField, { ...props, apply: "cell" }) }));
+});
+
+export { Text as default };

package/dist/components/fields/text/style.d.ts

@@ -0,0 +1,2 @@
+export declare const hiddenHoverClass: string;
+export declare const textStyle: () => string;

package/dist/components/fields/text/style.js

@@ -0,0 +1,12 @@
+import { randomClassName } from '../../../style/common.js';
+import { hoverStyle } from '../../common/style/mixin.js';
+
+const hiddenHoverClass = randomClassName('hidden-hover');
+const textStyle = () => `
+  width: 100%;
+
+  &:not(.${hiddenHoverClass}) :hover {
+    ${hoverStyle}
+`;
+
+export { hiddenHoverClass, textStyle };

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

@@ -33,6 +33,7 @@ import StatusReadView from '../fields/status/ReadView.js';
 import StoryPointReadView from '../fields/story-point/ReadView.js';
 import TagReadView from '../fields/tag/ReadView.js';
 import TeamReadView from '../fields/team/ReadView.js';
+import Text from '../fields/text/Cell.js';
 import TextReadView from '../fields/text/ReadView.js';
 import TreeReadView from '../fields/tree/ReadView.js';
 import UpdatedAtReadView from '../fields/updated-at/ReadView.js';
@@ -99,6 +100,7 @@ const getStandardEditComponents = () => {
         [FIELD_TYPE_KEY_MAPPINGS.Status]: StatusCell,
         [FIELD_TYPE_KEY_MAPPINGS.Dropdown]: DropdownCell,
         [FIELD_TYPE_KEY_MAPPINGS.Priority]: PriorityCell,
+        [FIELD_TYPE_KEY_MAPPINGS.Text]: Text,
     };
 };
 

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export { default as StatusReadView } from './components/fields/status/ReadView';
 export { default as StoryPointReadView } from './components/fields/story-point/ReadView';
 export { default as TagReadView } from './components/fields/tag/ReadView';
 export { default as TeamReadView } from './components/fields/team/ReadView';
+export { default as TextCell } from './components/fields/text/Cell';
 export { default as TextReadView } from './components/fields/text/ReadView';
 export { default as TreeReadView } from './components/fields/tree/ReadView';
 export { default as UpdatedAtReadView } from './components/fields/updated-at/ReadView';

package/dist/index.js

@@ -35,6 +35,7 @@ export { default as StatusReadView } from './components/fields/status/ReadView.j
 export { default as StoryPointReadView } from './components/fields/story-point/ReadView.js';
 export { default as TagReadView } from './components/fields/tag/ReadView.js';
 export { default as TeamReadView } from './components/fields/team/ReadView.js';
+export { default as TextCell } from './components/fields/text/Cell.js';
 export { default as TextReadView } from './components/fields/text/ReadView.js';
 export { default as TreeReadView } from './components/fields/tree/ReadView.js';
 export { default as UpdatedAtReadView } from './components/fields/updated-at/ReadView.js';

package/package.json

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