Merge remote-tracking branch 'origin/master'

.github/workflows/publish.yml

@@ -0,0 +1,22 @@
+name: Publish to NPM
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish-gpr:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm i
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilb/uniformscomponentsantd",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "",
   "main": "src/index.js",
   "scripts": {

pages/index.js

@@ -42,6 +42,13 @@ export default function page() {
             },
           },
         },
+        patternNumberField: {
+          title: "Число с разделетилем разрядов",
+          type: "string",
+          uniforms: {
+            thousandSeparator: " "
+          },
+        },
         vehiclePassportNumber: {
           title: "Номер ПТС",
           type: "string",
@@ -84,6 +91,7 @@ export default function page() {
           ]}
         />
         <CustomAutoField name='patternTextField' />
+        <CustomAutoField name='patternNumberField' />
         <CustomAutoField name='vehiclePassportNumber' isEpts={isEpts} />
         <SubmitField value="Войти" />
       </AutoForm>

src/components/CustomAutoField/index.js

@@ -7,6 +7,7 @@ import CustomInputField from "../CustomInputField";
 import CustomNumericField from "../CustomNumericField";
 import CustomPatternField from "../CustomPatternField";
 import CustomVehiclePassportField from "../CustomVehiclePassportField";
+import CustomNumberField from "../CustomNumberField";
 
 /**
  * Кастомное поле
@@ -20,6 +21,9 @@ const CustomField = props => {
   if (props.field?.uniforms?.format) {
     Field = CustomPatternField;
   }
+  if (props.field?.uniforms?.thousandSeparator) {
+    Field = CustomNumberField;
+  }
   if (props.field?.uniforms?.pattern) {
     Field = CustomInputField;
   }

src/components/CustomNumberField/index.js

@@ -0,0 +1,148 @@
+/* eslint-disable no-unused-vars, no-param-reassign -- Отключаем eslint no-unused-vars, no-param-reassign */
+import { Badge, Form } from "antd";
+import classnames from "classnames";
+import { useRef } from "react";
+import { NumericFormat, PatternFormat } from "react-number-format";
+import { connectField } from "uniforms";
+
+import styles from "./index.module.scss";
+
+/**
+ * @param {Object} props
+ * @param {string} props.label
+ * @param {string} props.additionalLabel
+ * @param {string} props.value
+ * @param {Function} props.onChange
+ * @param {Object} props.field
+ * @param {boolean} props.disabled
+ * @param {Object} props.error
+ * @param {boolean} props.showInlineError
+ * @param {boolean} props.required
+ * @param {boolean} props.readOnly
+ * @param {Function} props.onAfterChange
+ * @param {Function} props.onBlur
+ * @param {string} props.validateStatus
+ * @param {string} props.help
+ * @param {Function} props.onCheckbox
+ * @param {Function} props.onInput
+ * @param {string} props.className
+ * @param {string} props.id
+ * @param {string} props.title
+ * @returns {JSX.Element}
+ */
+const CustomInput = ({
+  label,
+  additionalLabel,
+  value,
+  onChange,
+  field,
+  disabled,
+  error,
+  showInlineError,
+  required,
+  readOnly,
+  onAfterChange,
+  onBlur,
+  validateStatus,
+  help,
+  onCheckbox,
+  onInput,
+  className,
+  id,
+  title
+}) => {
+  const inputRef = useRef();
+
+  if (onCheckbox) {
+    value = "";
+  }
+
+  /**
+   * @param {string} newValue
+   * @returns {void}
+   */
+  const handleOnValueChange = newValue => {
+    onChange(newValue);
+    if (onAfterChange) {
+      onAfterChange(newValue);
+    }
+  };
+  const inputAdditionalLabel = additionalLabel || field.uniforms?.additionalLabel;
+
+  const numericFormatProps = field.uniforms || {};
+  const inputElement = (
+    <NumericFormat
+      id={id}
+      disabled={disabled}
+      onBlur={onBlur}
+      minLength={field.minLength || -Infinity}
+      maxLength={field.maxLength || Infinity}
+      ref={inputRef}
+      readOnly={readOnly}
+      required={required}
+      type={field.uniforms?.type || "text"}
+      value={value ?? ""}
+      allowEmptyFormatting={false}
+      className={className ? className : styles.patternInput}
+      onInput={onInput}
+      onValueChange={values => {
+        if (field.uniforms.maskedValue) {
+          handleOnValueChange(values.formattedValue);
+        } else {
+          const newValue = field.type === "string" ? values.value : values.floatValue;
+
+          handleOnValueChange(newValue);
+        }
+      }}
+      {...numericFormatProps}
+      title={title}
+    />
+  );
+
+  return (
+    <Form.Item className={styles.numericField} required={required} label={label} htmlFor={id}>
+      <div
+        className={classnames(
+          "ui",
+          {
+            disabled,
+            error,
+          },
+          inputAdditionalLabel ? "right labeled input" : "input",
+          validateStatus && styles.warningInput,
+        )}>
+        <div className={classnames("ant-form-item-control-input-content")}>
+          <div
+            className={classnames(
+              `ant-picker ${
+                error ? " ant-picker-status-error " : ""
+              }ant-picker-has-feedback ` +
+                `${styles.patternPicker}`,
+            )}>
+            <div className={classnames("ant-picker-input")}>
+              {inputElement}
+              {inputAdditionalLabel && <Badge>{inputAdditionalLabel}</Badge>}
+            </div>
+          </div>
+        </div>
+      </div>
+      {!!(error && showInlineError) && (
+        <div
+          className="ui red fluid basic pointing label"
+          style={{ color: "#ff4d4f", fontSize: "14px" }}>
+          {error.message}
+        </div>
+      )}
+      {help && (
+        <>
+          <p className={styles.helpText}>{help}</p>
+        </>
+      )}
+    </Form.Item>
+  );
+};
+
+const InputField = connectField(CustomInput);
+
+export default InputField;
+/* eslint-enable no-unused-vars, no-param-reassign -- Возвращаем eslint no-unused-vars, no-param-reassign */

src/components/CustomNumberField/index.module.scss

@@ -0,0 +1,48 @@
+.patternPicker {
+    width: 100%;
+    padding: 0;
+  }
+
+
+
+  .numericField {
+    margin-bottom: 12px;
+    position: relative;
+
+    .patternInput {
+      padding: 4px 11px 4px;
+    }
+
+    .patternInput[disabled] {
+      color: rgba(0, 0, 0, 0.25);
+      background-color: #f5f5f5;
+      border-color: #d9d9d9;
+      box-shadow: none;
+      opacity: 1;
+    }
+
+    .patternInput[disabled]:hover {
+      cursor: not-allowed;
+      border-color: #d9d9d9;
+    }
+  }
+
+  .helpText {
+    color: #faad14;
+    margin-bottom: 0;
+  }
+
+  .warningIcon {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    width: 20px;
+    height: 20px;
+    padding: 3px;
+    background-color: #fff;
+  }
+
+  .warningInput {
+    border: 1px solid #faad14;
+  }
+