@hsu-react/ui 0.0.1

package/lib/components/FormItem/FormUpload/index.module.less

@@ -0,0 +1,142 @@
+.upload {
+  height: 100%;
+
+  .ant-upload {
+    height: max-content;
+
+    .upBtn {
+      height: 32px;
+    }
+  }
+
+  &.inline {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+  }
+
+  .ant-upload-disabled {
+    .singleFile {
+      cursor: not-allowed;
+
+      > div {
+        background-color: rgba(0, 0, 0, 0.04);
+
+        border-color: var(--cf-border);
+
+        > span {
+          color: var(--cf-text-3) !important;
+        }
+      }
+    }
+  }
+
+  .singleFile {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 28px;
+    row-gap: 5px;
+
+    cursor: pointer;
+
+    > div {
+      display: flex;
+      align-items: center;
+
+      width: max-content;
+      height: 46px;
+
+      border: 1px solid rgba(204, 204, 204, 1);
+
+      > span {
+        &:first-child {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          width: 112px;
+          height: 100%;
+
+          font-family: Noto Sans SC;
+          font-size: 18px;
+          font-weight: 500;
+          color: rgba(51, 51, 51, 1);
+
+          border-right: 1px solid rgba(204, 204, 204, 1);
+        }
+
+        &:nth-child(2) {
+          display: flex;
+          align-items: center;
+
+          width: 226px;
+          height: 100%;
+          padding: 0px 19px;
+
+          font-family: Noto Sans SC;
+          font-size: 18px;
+          font-weight: 500;
+          color: rgba(122, 122, 122, 1);
+
+          > a {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            overflow: hidden;
+          }
+        }
+      }
+    }
+
+    > span {
+      font-family: Noto Sans SC;
+      font-size: 18px;
+      font-weight: 500;
+      color: rgba(122, 122, 122, 1);
+    }
+  }
+
+  &.ant-upload-drag {
+    height: 180px;
+
+    border-radius: 8px;
+    border: 1px dashed rgba(19, 76, 255, 0.6);
+    background: rgba(19, 76, 255, 0.02);
+
+    transition: all 0.3s;
+
+    &:hover {
+      background: rgba(19, 76, 255, 0.08);
+
+      border-color: #134cff;
+    }
+
+    .uploadIcon {
+      font-size: 40px;
+      color: #134cff;
+    }
+
+    .uploadText {
+      font-size: 14px;
+      color: #212121;
+
+      > div:first-child {
+        margin: 16px 0 8px;
+      }
+
+      > div:last-child {
+        font-size: 12px;
+        color: #8d8e99;
+      }
+    }
+  }
+}
+
+.FormUpload {
+  .ant-form-item-control-input-content {
+    > span {
+      width: 100%;
+    }
+  }
+}

package/lib/components/FormItem/ItemContainer/_hooks/useInputSize.d.ts

@@ -0,0 +1,14 @@
+interface Params {
+    inputWidth?: string | number;
+    inputMinWidth?: string | number;
+    inputHeight?: string | number;
+    inputMinHeight?: string | number;
+    height?: string | number;
+}
+export default function useInputSize(params: Params): {
+    width: string;
+    height: string;
+    minHeight: string;
+    horizontalMinWidth: string;
+};
+export {};

package/lib/components/FormItem/ItemContainer/_hooks/useInputSize.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useInputSize;
+var _react = require("react");
+function useInputSize(params) {
+  const {
+    inputWidth,
+    inputMinWidth,
+    inputHeight,
+    inputMinHeight,
+    height
+  } = params;
+  const size = (0, _react.useMemo)(() => {
+    const _inputWidth = typeof inputWidth === "number" ? `${inputWidth}px` : inputWidth;
+    const _width = _inputWidth ?? "100%";
+    const _commonHeight = typeof height === "number" ? `${height}px` : height;
+    const _input_inputHeight = typeof inputHeight === "number" ? `${inputHeight}px` : inputHeight;
+    const _height = _input_inputHeight ?? _commonHeight ?? "max-content";
+    const _input_inputMinHeight = typeof inputMinHeight === "number" ? `${inputMinHeight}px` : inputMinHeight;
+    const _minHeight = _input_inputMinHeight ?? _input_inputHeight ?? _commonHeight ?? "32px";
+    const _input_horizontalMinWidth = typeof inputMinWidth === "number" ? `${inputMinWidth}px` : inputMinWidth;
+    const _horizontalMinWidth = _input_horizontalMinWidth ?? "0px";
+    return {
+      width: _width,
+      height: _height,
+      minHeight: _minHeight,
+      horizontalMinWidth: _horizontalMinWidth
+    };
+  }, [height, inputHeight, inputMinHeight, inputMinWidth, inputWidth]);
+  return size;
+}

package/lib/components/FormItem/ItemContainer/_hooks/useLabelSize.d.ts

@@ -0,0 +1,12 @@
+interface Params {
+    labelWidth?: string | number;
+    labelHeight?: string | number;
+    labelMinHeight?: string | number;
+    height?: string | number;
+}
+export default function useLabelSize(params: Params): {
+    width: string;
+    height: string;
+    minHeight: string;
+};
+export {};

package/lib/components/FormItem/ItemContainer/_hooks/useLabelSize.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLabelSize;
+var _react = require("react");
+function useLabelSize(params) {
+  const {
+    labelWidth,
+    labelHeight,
+    labelMinHeight,
+    height
+  } = params;
+  const size = (0, _react.useMemo)(() => {
+    const _labelWidth = typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth;
+    const _width = _labelWidth ?? "auto";
+    const _commonHeight = typeof height === "number" ? `${height}px` : height;
+    const _labelHeight = typeof labelHeight === "number" ? `${labelHeight}px` : labelHeight;
+    const _height = _labelHeight ?? _commonHeight ?? "max-content";
+    const _labelMinHeight = typeof labelMinHeight === "number" ? `${labelMinHeight}px` : labelMinHeight;
+    const _minHeight = _labelMinHeight ?? _commonHeight ?? "32px";
+    return {
+      width: _width,
+      height: _height,
+      minHeight: _minHeight
+    };
+  }, [height, labelHeight, labelMinHeight, labelWidth]);
+  return size;
+}

package/lib/components/FormItem/ItemContainer/index.d.ts

@@ -0,0 +1,40 @@
+import { FormItemType } from "..";
+import { FormItemProps, TooltipProps } from "antd";
+import React, { ReactNode } from "react";
+interface TipsProps {
+    icon?: ReactNode;
+    iconClassName?: string;
+}
+export interface ItemContainerProps extends FormItemProps {
+    children?: ReactNode;
+    labelWidth?: string | number;
+    labelHeight?: string | number;
+    labelMinHeight?: string | number;
+    inputWidth?: string | number;
+    inputMinWidth?: string | number;
+    inputHeight?: string | number;
+    inputMinHeight?: string | number;
+    height?: string | number;
+    width?: string | number;
+    requiredMsg?: string;
+    layout?: "horizontal" | "vertical";
+    requiredPosition?: "before" | "after";
+    hideRequired?: boolean;
+    tips?: TipsProps & TooltipProps;
+    labelRender?: (label: ReactNode) => ReactNode;
+    horizontalAlignment?: "between" | "start";
+    labelClassName?: string;
+    disabled?: boolean;
+    en?: boolean;
+    type?: FormItemType;
+    locale?: string;
+    hasPermi?: string[];
+    labelExtra?: ReactNode;
+    labelExtraClassName?: string;
+    labelEllipsis?: boolean;
+    labelBreak?: boolean;
+    hideAdditiona?: boolean;
+    hideLabel?: boolean;
+}
+declare const ItemContainer: React.FC<ItemContainerProps>;
+export default ItemContainer;

package/lib/components/FormItem/ItemContainer/index.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("..");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
+var _cssSupports = require("../../../utils/cssSupports");
+var _hsuUtils = require("hsu-utils");
+var _useLabelSize = _interopRequireDefault(require("./_hooks/useLabelSize"));
+var _useInputSize = _interopRequireDefault(require("./_hooks/useInputSize"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ItemContainer = props => {
+  const {
+    children,
+    className,
+    required,
+    rules = [],
+    name = "",
+    labelWidth,
+    labelHeight,
+    labelMinHeight,
+    inputWidth,
+    inputMinWidth,
+    inputHeight,
+    inputMinHeight,
+    height,
+    width,
+    style,
+    requiredMsg,
+    layout = "horizontal",
+    requiredPosition = "before",
+    colon,
+    label,
+    labelRender,
+    tips = {},
+    horizontalAlignment = "start",
+    hideRequired = false,
+    labelClassName,
+    en,
+    type = "",
+    hasPermi,
+    labelExtra,
+    labelExtraClassName,
+    labelEllipsis = false,
+    labelBreak = false,
+    hideAdditiona = false,
+    hideLabel = false,
+    ...formItemProps
+  } = props;
+  const {
+    icon = "material-symbols:help",
+    iconClassName,
+    ...tipsConfig
+  } = tips;
+  const {
+    permitted
+  } = (0, _usePermissions.default)(hasPermi);
+  const cls = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
+  const legacyHasSelector = (0, _cssSupports.isLegacyHasSelectorBrowser)();
+  const _label = (0, _react.useMemo)(() => {
+    if (hideLabel) {
+      return undefined;
+    }
+    return Object.keys(tips).length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(_indexModule.default.labelContent, labelClassName),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(_indexModule.default.labelCont, {
+            [_indexModule.default.labelEllipsis]: labelEllipsis,
+            [_indexModule.default.labelBreak]: labelBreak
+          }),
+          children: label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        arrow: false,
+        placement: "top",
+        color: "#f2f4f5",
+        styles: {
+          body: {
+            color: "#131212",
+            padding: "6px 12px"
+          }
+        },
+        ...tipsConfig,
+        children: typeof icon === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: icon,
+          className: (0, _classnames.default)(_indexModule.default.tipsIcon, iconClassName),
+          onClick: e => {
+            e.stopPropagation();
+          },
+          fontSize: 16,
+          color: "#999999"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(_indexModule.default.tipsIconNode, iconClassName),
+          onClick: e => {
+            e.stopPropagation();
+          },
+          children: icon
+        })
+      })]
+    }) : label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(_indexModule.default.label, labelClassName),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(_indexModule.default.labelCont, {
+            [_indexModule.default.labelEllipsis]: labelEllipsis,
+            [_indexModule.default.labelBreak]: labelBreak
+          }),
+          children: label
+        })
+      }), labelExtra && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)(_indexModule.default.labelExtra, labelExtraClassName),
+        children: labelExtra
+      })]
+    }) : undefined;
+  }, [tips, labelClassName, label, tipsConfig, icon, iconClassName, labelExtra, labelExtraClassName, labelEllipsis, labelBreak, hideLabel]);
+  const {
+    width: _labelWidth,
+    height: _labelHeight,
+    minHeight: _labelMinHeight
+  } = (0, _useLabelSize.default)({
+    labelWidth,
+    labelHeight,
+    labelMinHeight,
+    height
+  });
+  const {
+    width: _inputWidth,
+    height: _inputHeight,
+    minHeight: _inputMinHeight,
+    horizontalMinWidth: _inputHorizontalMinWidth
+  } = (0, _useInputSize.default)({
+    inputWidth,
+    inputMinWidth,
+    inputHeight,
+    inputMinHeight,
+    height
+  });
+  if (!permitted) {
+    return null;
+  }
+
+  // 页面层 FormItemProps 的展示控制属性（如 visible）不属于 antd Form.Item，
+  // 剥离后再透传，避免被 antd 转发到 DOM 触发 React 非法属性警告。
+  const restFormItemProps = Object.fromEntries(Object.entries(formItemProps).filter(([key]) => key !== "visible"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, {
+    ...restFormItemProps,
+    name: name,
+    rules: [{
+      required,
+      message: requiredMsg ?? (en ? `${_.PlaceholderDictEn[type || "INPUT"]}` : `${_.PlaceholderDict[type || "INPUT"]}`)
+    }, ...rules],
+    className: (0, _classnames.default)({
+      [cls]: true,
+      [_indexModule.default.formItem]: true,
+      [className ?? ""]: true,
+      [_indexModule.default[layout]]: layout,
+      [_indexModule.default[requiredPosition]]: requiredPosition,
+      [_indexModule.default.hideRequired]: hideRequired,
+      [_indexModule.default[horizontalAlignment]]: layout === "horizontal" && horizontalAlignment,
+      [_indexModule.default.hasLabelContent]: !!Object.keys(tips).length,
+      [_indexModule.default.hideAdditiona]: hideAdditiona,
+      [_indexModule.default.legacyHasLabelExtra]: legacyHasSelector && layout === "vertical" && !hideLabel && !!label && !!labelExtra && !Object.keys(tips).length
+    }),
+    colon: typeof colon === "boolean" ? colon : layout === "horizontal" && requiredPosition === "before",
+    label: labelRender ? labelRender(_label) : _label,
+    style: {
+      width: typeof width === "number" ? width + "px" : width,
+      "--label-width": _labelWidth,
+      "--label-height": _labelHeight,
+      "--label-min-height": _labelMinHeight,
+      "--input-width": _inputWidth,
+      "--input-height": _inputHeight,
+      "--input-min-height": _inputMinHeight,
+      "--input-horizontal-min-width": _inputHorizontalMinWidth,
+      "--input-horizontal-flex-grow": parseInt(_inputHorizontalMinWidth) !== 0 ? 0 : 1,
+      ...style
+    },
+    children: children
+  });
+};
+var _default = exports.default = ItemContainer;