@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/form/style.less

@@ -1,159 +1,159 @@
-.gm-form {
-  .gm-form-group {
-    padding-bottom: 10px;
-    padding-right: 10px;
-    min-height: 40px;
-  }
-
-  .gm-form-label {
-    padding-top: 6px;
-    padding-right: 10px;
-
-    &.gm-form-label-un-top {
-      padding-top: 0;
-    }
-  }
-
-  &.form-inline {
-    display: flex;
-    flex-wrap: wrap;
-
-    .gm-form-group {
-      padding-bottom: 0;
-      min-height: auto;
-    }
-  }
-
-  .help-block {
-    margin-bottom: 0;
-  }
-
-  /* 只能作用 form-field 下面的 */
-  .gm-form-field {
-    position: relative;
-
-    & > .gm-radio-group {
-      margin: 4px 0 0;
-    }
-
-    & > .gm-checkbox-group {
-      margin: 4px 0 0;
-    }
-
-    & > .gm-switch {
-      margin-top: 4px;
-    }
-
-    & > .gm-select {
-      display: block;
-    }
-
-    .gm-form-warning-message {
-      color: var(--gm-color-danger);
-    }
-  }
-
-  .gm-form-toolTip {
-    position: absolute;
-    right: -28px;
-    top: 7px;
-  }
-
-  /** 字体大小 */
-  &.gm-form-text-sm {
-    font-size: var(--gm-size-text-sm);
-
-    .gm-form-label {
-      font-size: var(--gm-size-text-sm);
-    }
-
-    .gm-form-control {
-      font-size: var(--gm-size-text-sm);
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .gm-form {
-    .gm-form-group {
-      padding-right: 0;
-      flex-direction: column;
-
-      .gm-form-label {
-        width: auto;
-        justify-content: flex-start;
-      }
-    }
-
-    &.form-inline {
-      display: block;
-
-      .gm-form-group {
-        padding-right: 0;
-        flex-direction: column;
-      }
-    }
-
-    .gm-form-block {
-      flex-direction: column;
-    }
-  }
-}
-
-.gm-form-group-sticky-box {
-  background-color: white;
-  box-shadow: 0 -1px 5px rgba(36, 51, 81, 0.2);
-}
-
-.gm-form-group-position-absolute-box {
-  position: absolute !important;
-}
-
-.gm-form-group-position-fixed-box {
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  width: 100%;
-  transform: translateX(-50%);
-}
-
-.gm-form-panel {
-  padding: 30px 20px 0 20px;
-
-  &:first-child {
-    padding-top: 20px;
-  }
-
-  &-header {
-    padding-bottom: 2px;
-
-    &-tag {
-      width: 3px;
-      margin-top: 3px;
-      margin-bottom: 2px;
-      background: var(--gm-color-primary);
-    }
-
-    &-title {
-      margin-left: 5px;
-      font-size: 14px;
-    }
-  }
-
-  &-border {
-    height: 1px;
-    width: ~'calc(100% - 9px)';
-    margin-left: 9px;
-    border-bottom: 1px solid var(--gm-color-border);
-  }
-
-  &-content {
-    padding-top: 20px;
-
-    .gm-form {
-      .gm-form-group {
-        padding-bottom: 20px;
-      }
-    }
-  }
-}
+.gm-form {
+  .gm-form-group {
+    padding-bottom: 10px;
+    padding-right: 10px;
+    min-height: 40px;
+  }
+
+  .gm-form-label {
+    padding-top: 6px;
+    padding-right: 10px;
+
+    &.gm-form-label-un-top {
+      padding-top: 0;
+    }
+  }
+
+  &.form-inline {
+    display: flex;
+    flex-wrap: wrap;
+
+    .gm-form-group {
+      padding-bottom: 0;
+      min-height: auto;
+    }
+  }
+
+  .help-block {
+    margin-bottom: 0;
+  }
+
+  /* 只能作用 form-field 下面的 */
+  .gm-form-field {
+    position: relative;
+
+    & > .gm-radio-group {
+      margin: 4px 0 0;
+    }
+
+    & > .gm-checkbox-group {
+      margin: 4px 0 0;
+    }
+
+    & > .gm-switch {
+      margin-top: 4px;
+    }
+
+    & > .gm-select {
+      display: block;
+    }
+
+    .gm-form-warning-message {
+      color: var(--gm-color-danger);
+    }
+  }
+
+  .gm-form-toolTip {
+    position: absolute;
+    right: -28px;
+    top: 7px;
+  }
+
+  /** 字体大小 */
+  &.gm-form-text-sm {
+    font-size: var(--gm-size-text-sm);
+
+    .gm-form-label {
+      font-size: var(--gm-size-text-sm);
+    }
+
+    .gm-form-control {
+      font-size: var(--gm-size-text-sm);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .gm-form {
+    .gm-form-group {
+      padding-right: 0;
+      flex-direction: column;
+
+      .gm-form-label {
+        width: auto;
+        justify-content: flex-start;
+      }
+    }
+
+    &.form-inline {
+      display: block;
+
+      .gm-form-group {
+        padding-right: 0;
+        flex-direction: column;
+      }
+    }
+
+    .gm-form-block {
+      flex-direction: column;
+    }
+  }
+}
+
+.gm-form-group-sticky-box {
+  background-color: white;
+  box-shadow: 0 -1px 5px rgba(36, 51, 81, 0.2);
+}
+
+.gm-form-group-position-absolute-box {
+  position: absolute !important;
+}
+
+.gm-form-group-position-fixed-box {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  width: 100%;
+  transform: translateX(-50%);
+}
+
+.gm-form-panel {
+  padding: 30px 20px 0 20px;
+
+  &:first-child {
+    padding-top: 20px;
+  }
+
+  &-header {
+    padding-bottom: 2px;
+
+    &-tag {
+      width: 3px;
+      margin-top: 3px;
+      margin-bottom: 2px;
+      background: var(--gm-color-primary);
+    }
+
+    &-title {
+      margin-left: 5px;
+      font-size: 14px;
+    }
+  }
+
+  &-border {
+    height: 1px;
+    width: ~'calc(100% - 9px)';
+    margin-left: 9px;
+    border-bottom: 1px solid var(--gm-color-border);
+  }
+
+  &-content {
+    padding-top: 20px;
+
+    .gm-form {
+      .gm-form-group {
+        padding-bottom: 20px;
+      }
+    }
+  }
+}

package/src/component/form/types.ts

@@ -1,110 +1,110 @@
-import {
-  CSSProperties,
-  FormEvent,
-  FormHTMLAttributes,
-  HTMLAttributes,
-  ReactNode,
-  RefObject,
-} from 'react'
-import Form from './form'
-
-type FormBtnPosition = 'left' | 'center' | 'right'
-
-interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
-  /** 默认处理了 event.preventDefault，避免犯低级错误 */
-  onSubmit?(event: FormEvent<HTMLFormElement>): void
-  /** 在通过所有 FormItem 定义的 validate 之后调用 */
-  onSubmitValidated?(): void
-  /** 行内模式，一般用不到。目前仅在 BoxForm 内部自动使用 */
-  inline?: boolean
-  /** 去除 FormItem 默认一栏宽度的限制 */
-  disabledCol?: boolean
-  /** 自定义列宽 */
-  colWidth?: string
-  /** 标题宽度 */
-  labelWidth?: string
-  /** 只在 FormGroup 下用，用于添加一个隐藏的按钮，来响应 Enter */
-  hasButtonInGroup?: boolean
-  btnPosition?: FormBtnPosition
-}
-
-interface FormBlockProps {
-  /* 占用栏数 */
-  col?: 1 | 2 | 3
-  /* 默认由 Form 透传下来 */
-  disabledCol?: boolean
-  /* 默认由 Form 透传下来 */
-  inline?: boolean
-  className?: string
-  style?: CSSProperties
-}
-
-interface FormButtonProps {
-  /* 默认由 Form 透传下来 */
-  labelWidth?: string
-  /* 默认由 Form 透传下来 */
-  btnPosition?: FormBtnPosition
-}
-
-interface FormItemProps {
-  /* 占用栏数 */
-  col?: 1 | 2 | 3
-  /* 默认从 Form 透传下来 */
-  disabledCol?: boolean
-  /* 标题，自带`:` */
-  label?: string | ReactNode
-  tooltip?: ReactNode
-  /* 必传，会自动带上校验器 */
-  required?: boolean
-  /* 去除 label 为了和表单元素对齐的上边距 */
-  unLabelTop?: boolean
-  /* 自定义表单验证器，优先级高于 error 和 help，低于 required */
-  validate?(validator?: (value: any) => string): string
-  /**
-   * 少用，用于内部展示
-   * @deprecated
-   */
-  error?: boolean
-  /**
-   * 少用，用于内部展示
-   * @deprecated
-   */
-  help?: string
-  /* 默认由 Form 透传下来 */
-  labelWidth?: string
-  /* 默认由 Form 透传下来 */
-  colWidth?: string
-  className?: string
-  style?: CSSProperties
-  /** 警告信息 */
-  warningMessage?: ReactNode | string
-}
-
-interface FormPanelProps extends HTMLAttributes<HTMLDivElement> {
-  title?: string
-  left?: ReactNode
-  right?: ReactNode
-  showBorder?: boolean
-}
-
-interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {
-  formRefs: RefObject<Form>[]
-  onSubmit?(): void
-  onSubmitValidated?(): void
-  onCancel?(): void
-  disabled?: boolean
-  /* 确定按钮的文案，默认为保存 */
-  saveText?: string
-  actions?: ReactNode
-  absolute?: boolean
-}
-
-export type {
-  FormProps,
-  FormBlockProps,
-  FormBtnPosition,
-  FormButtonProps,
-  FormItemProps,
-  FormPanelProps,
-  FormGroupProps,
-}
+import {
+  CSSProperties,
+  FormEvent,
+  FormHTMLAttributes,
+  HTMLAttributes,
+  ReactNode,
+  RefObject,
+} from 'react'
+import Form from './form'
+
+type FormBtnPosition = 'left' | 'center' | 'right'
+
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /** 默认处理了 event.preventDefault，避免犯低级错误 */
+  onSubmit?(event: FormEvent<HTMLFormElement>): void
+  /** 在通过所有 FormItem 定义的 validate 之后调用 */
+  onSubmitValidated?(): void
+  /** 行内模式，一般用不到。目前仅在 BoxForm 内部自动使用 */
+  inline?: boolean
+  /** 去除 FormItem 默认一栏宽度的限制 */
+  disabledCol?: boolean
+  /** 自定义列宽 */
+  colWidth?: string
+  /** 标题宽度 */
+  labelWidth?: string
+  /** 只在 FormGroup 下用，用于添加一个隐藏的按钮，来响应 Enter */
+  hasButtonInGroup?: boolean
+  btnPosition?: FormBtnPosition
+}
+
+interface FormBlockProps {
+  /* 占用栏数 */
+  col?: 1 | 2 | 3
+  /* 默认由 Form 透传下来 */
+  disabledCol?: boolean
+  /* 默认由 Form 透传下来 */
+  inline?: boolean
+  className?: string
+  style?: CSSProperties
+}
+
+interface FormButtonProps {
+  /* 默认由 Form 透传下来 */
+  labelWidth?: string
+  /* 默认由 Form 透传下来 */
+  btnPosition?: FormBtnPosition
+}
+
+interface FormItemProps {
+  /* 占用栏数 */
+  col?: 1 | 2 | 3
+  /* 默认从 Form 透传下来 */
+  disabledCol?: boolean
+  /* 标题，自带`:` */
+  label?: string | ReactNode
+  tooltip?: ReactNode
+  /* 必传，会自动带上校验器 */
+  required?: boolean
+  /* 去除 label 为了和表单元素对齐的上边距 */
+  unLabelTop?: boolean
+  /* 自定义表单验证器，优先级高于 error 和 help，低于 required */
+  validate?(validator?: (value: any) => string): string
+  /**
+   * 少用，用于内部展示
+   * @deprecated
+   */
+  error?: boolean
+  /**
+   * 少用，用于内部展示
+   * @deprecated
+   */
+  help?: string
+  /* 默认由 Form 透传下来 */
+  labelWidth?: string
+  /* 默认由 Form 透传下来 */
+  colWidth?: string
+  className?: string
+  style?: CSSProperties
+  /** 警告信息 */
+  warningMessage?: ReactNode | string
+}
+
+interface FormPanelProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string
+  left?: ReactNode
+  right?: ReactNode
+  showBorder?: boolean
+}
+
+interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {
+  formRefs: RefObject<Form>[]
+  onSubmit?(): void
+  onSubmitValidated?(): void
+  onCancel?(): void
+  disabled?: boolean
+  /* 确定按钮的文案，默认为保存 */
+  saveText?: string
+  actions?: ReactNode
+  absolute?: boolean
+}
+
+export type {
+  FormProps,
+  FormBlockProps,
+  FormBtnPosition,
+  FormButtonProps,
+  FormItemProps,
+  FormPanelProps,
+  FormGroupProps,
+}