@zat-design/sisyphus-react 3.1.5 → 3.2.0-beta.1

package/es/ProForm/components/old/EnumSelect/style/index.less

@@ -1,7 +1,7 @@
 .pro-enum-select {
   .close-icon {
     position        : relative;
-    margin-left     : -31px;
+    margin-left     : calc(0px - @zaui-space-size-lg);
     margin-right    : var(--zaui-space-size-md, 14px);
     color           : #FFFFFF;
     height: 12px;
@@ -16,7 +16,6 @@
 
     > span {
       position        : relative;
-      font-size       : 8px;
       border          : none;
       border-radius   : 50%;
 
@@ -45,7 +44,7 @@
   .ant-table-thead>tr>th {
     border          : 0;
     white-space     : nowrap;
-    background-color: #F6F7F8;
+    background-color: @zaui-table-header-bg;
   }
 
   .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
@@ -69,7 +68,7 @@
   }
 
   .ant-table-tbody tr:nth-child(2n)>td {
-    background-color: #FAFAFA;
+    background-color: @zaui-table-strip-bg;
   }
 
   .ant-table-tbody>.ant-table-placeholder>td {
@@ -81,7 +80,7 @@
     >tr:hover:not(.ant-table-expanded-row, .ant-table-placeholder)>td,
     .ant-table-row-hover,
     .ant-table-row-hover>td {
-      background: #FAFAFA;
+      background: @zaui-table-hover-bg;
     }
   }
 
@@ -89,13 +88,13 @@
 
     .ant-table-row-hover,
     .ant-table-row-hover>td {
-      background: #FAFAFA;
+      background: @zaui-table-hover-bg;
     }
   }
 
   .ant-table-fixed-header {
     .ant-table-tbody tr:nth-child(n)>td {
-      background-color: #FAFAFA;
+      background-color: @zaui-table-strip-bg;
     }
 
     .ant-table-tbody tr:nth-child(2n)>td {
@@ -108,7 +107,7 @@
   }
 
   .ant-modal-footer {
-    padding: 16px;
+    padding: @zaui-space-size-md;
   }
 
 }

package/es/ProForm/components/render/Render.js

@@ -22,6 +22,7 @@ import { ReactSVG } from 'react-svg';
 import { isFunction, isString, omit } from 'lodash';
 import useShouldUpdate from '../../utils/useShouldUpdate';
 import { isTrim, isUpperCase, findOptionByValue } from '../../utils/index';
+import { useProConfig } from '../../../ProConfigProvider';
 import transformNames from '../../utils/transformNames';
 import valueTypeMap from '../../utils/valueType';
 import { useChanged } from '../../utils/useChanged';
@@ -138,7 +139,8 @@ var Render = function Render(props) {
     required: labelRequired || _required
   } : null, otherProps.isView && !requiredOnView ? {
     required: false
-  } : null, _objectSpread({}, isTrim(type, trim)), _objectSpread({}, isUpperCase(type, upperCase)), {
+  } : null, _objectSpread({}, isTrim(type, trim, useProConfig())), // 优先取传进来的，其次取ProConfigProvider配置的
+  _objectSpread({}, isUpperCase(type, upperCase)), {
     validateFirst: true
   });
   // 添加label宽度
@@ -157,7 +159,7 @@ var Render = function Render(props) {
   var lastComponentProps = _objectSpread(_objectSpread(_objectSpread({}, componentProps), _fieldProps), {}, {
     disabled: lastDisabled
   });
-  var _className = classNames((_classNames = {}, _defineProperty(_classNames, className, className), _defineProperty(_classNames, 'pro-form-item-changed', changed), _classNames));
+  var _className = classNames((_classNames = {}, _defineProperty(_classNames, className, className), _defineProperty(_classNames, 'pro-form-item-changed', changed), _defineProperty(_classNames, 'pro-form-item-width-auto', ['Switch'].includes(type)), _classNames));
   if (formItemProps.hidden === true || _show === false) {
     // 为了监听shouldUpdate  必须存在一个FormItem, 空Input解决 【[antd: Form.Item] `name` is only used for validate React element】
     return _jsx(_Form.Item, {

package/es/ProForm/components/render/RenderFields.js

@@ -3,11 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["show", "type", "viewRender", "viewType", "valueType", "formItemProps", "colProps", "formItemChildProps", "fieldProps", "disabled", "equalWith", "clearNotShow", "required"];
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { isFunction, union } from 'lodash';
+import { isBoolean, isFunction, union } from 'lodash';
 import Render from './Render';
 import * as componentMap from '../index';
 import { isSelect } from '../../utils';
 import { FieldProvider } from '../../utils/useFieldProps';
+import locale from '../../../locale';
 var RenderFields = function RenderFields(props) {
   var isView = props.isView,
     _props$columns = props.columns,
@@ -108,6 +109,7 @@ var RenderFields = function RenderFields(props) {
     }
     if (component && /*#__PURE__*/React.isValidElement(component)) {
       var _newComponent$props;
+      _type = null;
       var newComponent = component;
       var isProEditTable = (newComponent === null || newComponent === void 0 ? void 0 : (_newComponent$props = newComponent.props) === null || _newComponent$props === void 0 ? void 0 : _newComponent$props.onlyOneLineMsg) === '请先保存数据';
       TargetComponent = _isView ? viewRenderHandle || '' : component;
@@ -127,16 +129,14 @@ var RenderFields = function RenderFields(props) {
       dataSource: dataSource,
       type: _type
     });
-    var _placeholder = placeholder || "".concat(_isSelect ? '请选择' : '请输入').concat(label || formLabel || '');
+    var _placeholder = placeholder || "".concat(_isSelect ? "".concat(locale.ProForm.selectPlaceHolder) : "".concat(locale.ProForm.inputPlaceholder)).concat(label || formLabel || '');
     // 表单组件Props 兼容2.0版本
     var _fieldProps = _objectSpread(_objectSpread({
       disabled: disabled
     }, formItemChildProps), fieldProps);
-    if (formDisabled) {
+    if (isBoolean(formDisabled)) {
       _fieldProps.disabled = formDisabled;
-      // _disabled = formDisabled;
     }
-
     var componentProps = _objectSpread({
       disabled: _disabled,
       placeholder: _placeholder,
@@ -146,6 +146,10 @@ var RenderFields = function RenderFields(props) {
     if (['Switch', 'SwitchCheckbox'].includes(_type)) {
       _formItemProps.valuePropName = 'checked';
     }
+    // 时间范围placeholder处理
+    if (['RangePicker'].includes(_type) && !(fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.placeholder)) {
+      delete componentProps.placeholder;
+    }
     // 没有找到对应组件  不渲染
     if (!TargetComponent) {
       return [];
@@ -176,7 +180,7 @@ var RenderFields = function RenderFields(props) {
       value: otherProps,
       children: _jsx(Render, {
         show: show,
-        disabled: formDisabled,
+        disabled: Boolean(formDisabled),
         form: form,
         type: _type,
         originComponent: component,

package/es/ProForm/components/render/propsType.d.ts

@@ -21,7 +21,8 @@ import { AddressProps } from '../combination/ProAddressBar/propsType';
 import { ProCombinationProps } from '../combination/ProCombination/propsType';
 import { ProModalSelectPropsType as ProModalSelectProps } from '../combination/ProModalSelect/propsType';
 import { ProNumberRangeProps } from '../combination/ProNumberRange/propsType';
-import { Props as ProTimeLimitProps } from '../combination/ProTimeLimit';
+import { ProLimitProps } from '../combination/ProTimeLimit';
+import { Props as ProRangeLimitProps } from '../combination/ProRangeLimit';
 import { CheckboxPropsMap, ProEnum, PropProSelectsMap, PropRadioPropsMap } from '../../../ProEnum/propsType';
 import { PropSelectProps as ProSelectProps } from '../../../ProSelect/propsType';
 import { ProEditTableProps } from '../../../ProEditTable/propsType';
@@ -57,7 +58,7 @@ type FunctionArgs<Values> = (value: any, record: any, { form, index, namePath, o
     namePath?: NamePath;
     [key: string]: any;
 }) => any;
-type TransformToFormField<T extends ControlProps, Values> = Omit<T, 'onChange' | 'value'> & {
+type TransformToFormField<T extends ControlProps, Values> = DistributiveOmit<T, 'onChange' | 'value'> & {
     value?: T['value'];
     onChange?: (value: Parameters<T['onChange']>[0], options: Parameters<T['onChange']>[1], form: FormInstance<Values>) => void;
     onFieldChange?: FunctionArgs<Values>;
@@ -135,10 +136,10 @@ export type ColumnPropsMap<Values = any, T = 'ProForm'> = {
     fieldProps?: FieldProps<ProNumberRangeProps, Values, T>;
 } | {
     type?: 'ProRangeLimit';
-    fieldProps?: FieldProps<ProNumberRangeProps, Values, T>;
+    fieldProps?: FieldProps<ProRangeLimitProps, Values, T>;
 } | {
     type?: 'ProTimeLimit';
-    fieldProps?: FieldProps<ProTimeLimitProps, Values, T>;
+    fieldProps?: FieldProps<ProLimitProps, Values, T>;
 } | {
     type?: 'ProEnum';
     fieldProps?: ProEnumFieldProps<Values, T>;

package/es/ProForm/index.js

@@ -24,7 +24,9 @@ import { useProConfig } from '../ProConfigProvider';
 import { getLayout, splitNameStr, useControlled, initialValuesToNames } from './utils/index';
 import { useForm } from './utils/useForm';
 import { useFieldProps } from './utils/useFieldProps';
+import locale from '../locale';
 var ProForm = function ProForm(props, ref) {
+  var _localStorage;
   var _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'search' : _props$mode,
     span = props.span,
@@ -98,12 +100,12 @@ var ProForm = function ProForm(props, ref) {
       onClick: expandHandle,
       children: !openState ? _jsxs(_Space, {
         align: "center",
-        children: ["\u5C55\u5F00", _jsx(DoubleLeftOutlined, {
+        children: [locale.ProForm.unfold, _jsx(DoubleLeftOutlined, {
           className: "rotate-to-bottom"
         })]
       }) : _jsxs(_Space, {
         align: "center",
-        children: ["\u6536\u8D77", _jsx(DoubleLeftOutlined, {
+        children: [locale.ProForm.packUp, _jsx(DoubleLeftOutlined, {
           className: "rotate-to-top"
         })]
       })
@@ -179,6 +181,16 @@ var ProForm = function ProForm(props, ref) {
       })
     })) : null;
   };
+  // 国际化，非中文时默认上下布局
+  if (((_localStorage = localStorage) === null || _localStorage === void 0 ? void 0 : _localStorage.locale) && localStorage.locale !== 'zh-CN') {
+    // 一行布局时，左右布局
+    if (span === 24) {
+      otherProps.layout = otherProps.layout || 'horizontal';
+    } else {
+      // 其他布局时，上下布局
+      otherProps.layout = otherProps.layout || 'vertical';
+    }
+  }
   return _jsx(_Form, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     onKeyPress: function onKeyPress(event) {
       if (!submitOnEnter) return;

package/es/ProForm/style/index.less

@@ -11,6 +11,28 @@
 @import '../components/old/EnumSelect/style/index.less';
 
 .pro-form {
+  &.ant-form-vertical {
+    .ant-form-item .ant-form-item-label {
+      flex: none !important;
+    }
+
+    .pro-form-custom-footer {
+      display      : flex;
+      align-items  : center;
+      margin-bottom: 0;
+      height       : auto;
+      padding-top  : 6px;
+
+      .ant-space-align-center {
+        align-items: normal;
+      }
+    }
+  }
+
+  &.ant-form {
+    margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
+  }
+
   .pro-collapse-level2 {
     .ant-collapse-item {
       margin-bottom: 0 !important;
@@ -23,17 +45,17 @@
   }
 
   span.ant-input-clear-icon {
-    display: unset;
+    display   : unset;
     visibility: hidden;
   }
 
   .ant-input-affix-wrapper:hover span.ant-input-clear-icon {
-    display: unset;
+    display   : unset;
     visibility: unset;
   }
 
   .ant-input-affix-wrapper:hover span.ant-input-clear-icon[class~='ant-input-clear-icon-hidden'] {
-    display: unset;
+    display   : unset;
     visibility: hidden;
   }
 
@@ -67,8 +89,8 @@
 
   // 展开折叠按钮
   .expand-button {
-    line-height: 32px;
-    cursor: pointer;
+    line-height: @zaui-space-card;
+    cursor     : pointer;
 
     .rotate-to-top {
       transform: rotate(90deg);
@@ -80,40 +102,39 @@
   }
 
   .ant-form-item {
-    margin-bottom: 22px !important;
+    margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1)) !important;
+
+    &.pro-form-item-width-auto {
+      .ant-form-item-control-input {
+        flex-grow: inherit;
+      }
+
+      .ant-form-item-control-input-content {
+        flex: initial;
+      }
+    }
 
     .ant-form-item-tooltip {
       svg {
-        width: 14px;
-        height: 14px;
+        width         : 14px;
+        height        : 14px;
         vertical-align: bottom;
-        fill: #909090;
+        fill          : @zaui-aide-text;
       }
     }
 
     // 比较原始值场景下  不同时候的样式
     &.pro-form-item-changed {
+
       span.ant-input-affix-wrapper,
       .ant-select-selector,
       .ant-picker {
-        background: #fffaa1;
+        background: @zaui-contract-bg;
 
         input {
-          background: #fffaa1;
+          background: @zaui-contract-bg;
         }
       }
-
-      #switch {
-        background: #bfbfbf;
-      }
-    }
-
-    // 自定义label宽度场景
-    &.label-width {
-      .ant-form-item-label {
-        width: auto !important;
-        max-width: fit-content !important;
-      }
     }
 
     .ant-row {
@@ -147,9 +168,9 @@
         }
 
         .range-right {
-          width: 100%;
-          border: 1px solid #d9d9d9;
-          border-top-left-radius: 0;
+          width                    : 100%;
+          border                   : 1px solid @zaui-form-control-line;
+          border-top-left-radius   : 0;
           border-bottom-left-radius: 0;
         }
       }
@@ -160,149 +181,36 @@
     display: none;
   }
 
-  // 查看模式
-  &.mode-view {
-    // 查看模式样式覆盖
-    .ant-input[disabled] {
-      .noDisabled();
-    }
-
-    .ant-input-disabled {
-      .noDisabled();
-    }
-
-    .ant-picker.ant-picker-disabled {
-      .noDisabled();
-    }
-
-    .ant-picker-input > input[disabled] {
-      .noDisabled();
-    }
-
-    .ant-picker-suffix {
-      display: none;
-    }
-
-    .ant-input-textarea.ant-input-textarea-show-count::after {
-      display: none;
-    }
-
-    .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-      .noDisabled();
-    }
-
-    .ant-select-arrow {
-      display: none;
-    }
-
-    .ant-upload.ant-upload-disabled {
-      display: none;
-    }
-
-    .ant-switch-loading,
-    .ant-switch-disabled {
-      .ant-switch-inner {
-        .noDisabled();
-      }
-
-      .ant-switch-handle {
-        display: none;
-      }
-
-      background-color: #fff;
-      cursor: default;
-      opacity: 1;
-    }
-
-    .ant-radio-wrapper.ant-radio-wrapper-checked.ant-radio-wrapper-disabled {
-      display: block;
-
-      .ant-radio.ant-radio-checked.ant-radio-disabled {
-        display: none;
-      }
-
-      > span {
-        .noDisabled();
-        position: relative;
-        top: -3px;
-      }
-    }
-
-    .ant-radio-wrapper.ant-radio-wrapper-disabled {
-      display: none;
-    }
-
-    .ant-checkbox-wrapper.ant-checkbox-wrapper-checked.ant-checkbox-wrapper-disabled {
-      display: block;
-
-      .ant-checkbox.ant-checkbox-checked.ant-checkbox-disabled {
-        display: none;
-      }
-
-      > span {
-        .noDisabled();
-        position: relative;
-        top: -3px;
-      }
-    }
-
-    .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled {
-      display: none;
-    }
-
-    .ant-form-item-has-error {
-      .ant-form-item-explain.ant-form-item-explain-error {
-        display: none;
-      }
-    }
-
-    ::placeholder {
-      font-size: 0px;
-    }
-
-    .ant-input-affix-wrapper-disabled {
-      background-color: transparent;
-      border: none;
-    }
-
-    .ant-select-selection-placeholder {
-      display: none;
-    }
-
-    .ant-input-suffix {
-      display: none;
-    }
-  }
-
   .ant-form-item-label {
-    > label {
+    >label {
       white-space: pre-wrap;
     }
   }
 
   .suffix-value {
-    margin-left: 8px;
+    margin-left: @zaui-space-size-sm;
   }
 
   .ant-form-item-has-error {
     .group-separator {
-      color: var(--ant-error-color);
+      color       : var(--ant-error-color);
       border-color: var(--ant-error-color);
     }
 
     .site-input-split {
-      border-color: #ff4d4f;
+      border-color: @zaui-danger;
     }
   }
 
   .site-input-group-wrapper {
+
     // 范围值表单样式
     & .site-input-split {
-      text-align: center;
-      background-color: #fafafa;
+      text-align      : center;
+      background-color: @zaui-table-strip-bg;
 
       &.site-input-split-disabled {
-        background-color: #f2f2f2;
+        background-color: @zaui-disabled-bg;
       }
     }
 
@@ -344,33 +252,33 @@
       }
     }
 
-    &.ant-input-group.ant-input-group-compact > *:not(:last-child) {
+    &.ant-input-group.ant-input-group-compact>*:not(:last-child) {
       margin-right: 0;
     }
 
-    > *:first-child {
-      border-top-right-radius: 0 !important;
+    >*:first-child {
+      border-top-right-radius   : 0 !important;
       border-bottom-right-radius: 0 !important;
 
-      > .ant-select-selector {
-        border-top-right-radius: 0 !important;
+      >.ant-select-selector {
+        border-top-right-radius   : 0 !important;
         border-bottom-right-radius: 0 !important;
       }
     }
 
-    > *:last-child {
-      border-top-left-radius: 0 !important;
+    >*:last-child {
+      border-top-left-radius   : 0 !important;
       border-bottom-left-radius: 0 !important;
 
-      > .ant-select-selector {
-        border-top-left-radius: 0 !important;
+      >.ant-select-selector {
+        border-top-left-radius   : 0 !important;
         border-bottom-left-radius: 0 !important;
       }
     }
   }
 
-  .ant-input-group.ant-input-group-compact > * {
-    float: none;
+  .ant-input-group.ant-input-group-compact>* {
+    float         : none;
     vertical-align: top;
   }
 
@@ -379,17 +287,17 @@
   }
 
   .noDisabled {
-    color: #333;
-    font-size: 14px;
+    color           : @zaui-disabled-text;
+    font-size       : var(--zaui-font-size, 14px);
     background-color: transparent;
-    border: none;
-    cursor: default;
-    opacity: 1;
+    border          : none;
+    cursor          : default;
+    opacity         : 1;
   }
 
   div.pro-form-custom-footer {
-    width: unset !important;
-    height: 32px;
+    width        : unset !important;
+    height       : @zaui-space-card;
     margin-bottom: calc(var(--zaui-height-size-md, 16px) * var(--zaui-size, 1));
 
     &.pro-form-custom-footer-hidden {
@@ -398,14 +306,14 @@
   }
 
   .pro-form-view-container {
-    display: inline-block;
-    color: var(--zaui-text, #343434);
+    display   : inline-block;
+    color     : var(--zaui-text, #343434);
     word-break: break-all;
   }
 
   .pro-form-view-container_nowrap {
-    overflow: hidden;
-    white-space: nowrap;
+    overflow     : hidden;
+    white-space  : nowrap;
     text-overflow: ellipsis;
   }
 

package/es/ProForm/utils/index.d.ts

@@ -17,7 +17,7 @@ export declare const isSelect: (props: any) => any;
  * @param trim 是否移除前后空格
  * @returns {}
  */
-export declare const isTrim: (type: string, trim: boolean) => any;
+export declare const isTrim: (type: string, trim: boolean, configData: any) => any;
 /**
  * Input TextArea 小写自动转大写
  * @param type 组件类型

package/es/ProForm/utils/index.js

@@ -62,9 +62,14 @@ export var isSelect = function isSelect(props) {
  * @param trim 是否移除前后空格
  * @returns {}
  */
-export var isTrim = function isTrim(type, trim) {
+export var isTrim = function isTrim(type, trim, configData) {
+  var _state$type;
   var result = {};
-  if (['Input', 'TextArea', 'ProCombination'].includes(type) && trim) {
+  var _ref = configData || {},
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? {} : _ref$state;
+  var _trim = trim || (state === null || state === void 0 ? void 0 : (_state$type = state[type]) === null || _state$type === void 0 ? void 0 : _state$type.trim);
+  if (['Input', 'TextArea', 'ProCombination'].includes(type) && _trim) {
     result.getValueFromEvent = function (event) {
       var _event$target$value;
       if (Array.isArray(event)) {

package/es/ProForm/utils/rulesCreator.js

@@ -1,9 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { validate, regExp } from '@zat-design/utils';
 import { isNullValue } from './index';
+import locale from '../../locale';
 export var rulesCreator = function rulesCreator(rules, label, isSelect) {
   var _result;
-  var message = "".concat(isSelect ? '请选择' : '请输入', "\u6B63\u786E\u7684").concat(label || '');
+  var message = "".concat(isSelect ? "".concat(locale.ProForm.selectPlaceHolder) : "".concat(locale.ProForm.inputPlaceholder)).concat(locale.ProForm.ruleText).concat(label || '');
   var result = [];
   result = rules.map(function (ruleItem) {
     var rule = _objectSpread({}, ruleItem);

package/es/ProForm/utils/useRules.js

@@ -3,6 +3,7 @@ import { useEffect, useMemo } from 'react';
 import { isBoolean } from 'lodash';
 import { rulesCreator } from './rulesCreator';
 import { isNotFullArray, isNullArray } from './index';
+import locale from '../../locale';
 var useRules = function useRules(props) {
   var rules = props.rules,
     required = props.required,
@@ -21,7 +22,7 @@ var useRules = function useRules(props) {
         return 'required' in rule;
       }));
       if (!requiredRule) {
-        var message = isSelect ? "\u8BF7\u9009\u62E9".concat(label || '') : "\u8BF7\u8F93\u5165".concat(label || '');
+        var message = isSelect ? "".concat(locale.ProForm.selectPlaceHolder).concat(label || '') : "".concat(locale.ProForm.inputPlaceholder).concat(label || '');
         var rule = {
           required: required,
           message: message
@@ -30,7 +31,7 @@ var useRules = function useRules(props) {
         if (names === null || names === void 0 ? void 0 : names.length) {
           rule.validator = function (_, value) {
             if (!value || isNullArray(value)) {
-              return Promise.reject(new Error("\u8BF7\u586B\u5199".concat(label)));
+              return Promise.reject(new Error("".concat(locale.ProForm.inputPlaceholder).concat(label)));
             }
             return Promise.resolve();
           };
@@ -49,7 +50,7 @@ var useRules = function useRules(props) {
         validator: function validator(rules, value) {
           // 完整性校验, 空数组不校验, 数组有值且值不完整则校验不通过
           if (Array.isArray(value) && !isNullArray(value) && isNotFullArray(value, names.length)) {
-            return Promise.reject(new Error("\u8BF7\u5B8C\u6574\u586B\u5199".concat(label || '')));
+            return Promise.reject(new Error("".concat(locale.ProForm.completeText).concat(label || '')));
           }
           return Promise.resolve();
         }