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

package/src/component/modal/stories.tsx

@@ -1,132 +1,132 @@
-import React from 'react'
-import _ from 'lodash'
-import Modal from './modal'
-import CleanModal from './clean_modal'
-import RightSideModal from './right_side_modal'
-import { Button } from '../button'
-import { ModalSize } from './types'
-
-export const ComModal = () => (
-  <div>
-    <Button
-      type='primary'
-      onClick={() => {
-        Modal.render({
-          children:
-            '我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容',
-          title: '我是标题',
-        })
-      }}
-    >
-      show modal
-    </Button>
-  </div>
-)
-
-export const ComModalWithSize = () => {
-  function render(size: ModalSize) {
-    Modal.render({
-      size,
-      children: '我是内容',
-      title: '我是标题',
-      onHide: Modal.hide,
-    })
-  }
-
-  return (
-    <div>
-      会根据屏幕自适应
-      {_.map(['sm', 'md', 'lg', 'xl'], (size: ModalSize) => (
-        <Button type='primary' onClick={() => render(size)}>
-          size {size}
-        </Button>
-      ))}
-    </div>
-  )
-}
-
-export const ComModalWithNoContentPadding = () => (
-  <Button
-    type='primary'
-    onClick={() => {
-      Modal.render({
-        noContentPadding: true,
-        size: 'lg',
-        children: '我是内容',
-        title: '我是标题',
-        onHide: Modal.hide,
-      })
-    }}
-  >
-    noContentPadding
-  </Button>
-)
-
-export const ComModalWithOpacityMask = () => (
-  <Button
-    type='primary'
-    onClick={() => {
-      Modal.render({
-        opacityMask: true,
-        size: 'lg',
-        children: '我是内容',
-        title: '我是标题',
-        onHide: Modal.hide,
-      })
-    }}
-  >
-    opacityMask
-  </Button>
-)
-
-export const ComCleanModal = () => (
-  <Button
-    type='primary'
-    onClick={() => {
-      CleanModal.render({
-        children: <div className='gm-text-white'>啦啦啦</div>,
-        onHide: Modal.hide,
-      })
-    }}
-  >
-    CleanModal
-  </Button>
-)
-
-export const ComRightSideModal = () => (
-  <Button
-    type='primary'
-    onClick={() => {
-      RightSideModal.render({
-        title: 'asdf',
-        children: (
-          <div>
-            <div>
-              <button
-                onClick={() => {
-                  Modal.render({
-                    children: '我是内容',
-                    title: '我是标题',
-                    onHide: Modal.hide,
-                  })
-                }}
-              >
-                other modal
-              </button>
-            </div>
-            啦啦啦，下面还有滚动内容
-            <div style={{ height: '1000px' }} />
-            啦啦啦
-          </div>
-        ),
-        onHide: RightSideModal.hide,
-      })
-    }}
-  >
-    RightSideModal
-  </Button>
-)
-
-export default {
-  title: '反馈/Modal',
-}
+import React from 'react'
+import _ from 'lodash'
+import Modal from './modal'
+import CleanModal from './clean_modal'
+import RightSideModal from './right_side_modal'
+import { Button } from '../button'
+import { ModalSize } from './types'
+
+export const ComModal = () => (
+  <div>
+    <Button
+      type='primary'
+      onClick={() => {
+        Modal.render({
+          children:
+            '我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容',
+          title: '我是标题',
+        })
+      }}
+    >
+      show modal
+    </Button>
+  </div>
+)
+
+export const ComModalWithSize = () => {
+  function render(size: ModalSize) {
+    Modal.render({
+      size,
+      children: '我是内容',
+      title: '我是标题',
+      onHide: Modal.hide,
+    })
+  }
+
+  return (
+    <div>
+      会根据屏幕自适应
+      {_.map(['sm', 'md', 'lg', 'xl'], (size: ModalSize) => (
+        <Button type='primary' onClick={() => render(size)}>
+          size {size}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+export const ComModalWithNoContentPadding = () => (
+  <Button
+    type='primary'
+    onClick={() => {
+      Modal.render({
+        noContentPadding: true,
+        size: 'lg',
+        children: '我是内容',
+        title: '我是标题',
+        onHide: Modal.hide,
+      })
+    }}
+  >
+    noContentPadding
+  </Button>
+)
+
+export const ComModalWithOpacityMask = () => (
+  <Button
+    type='primary'
+    onClick={() => {
+      Modal.render({
+        opacityMask: true,
+        size: 'lg',
+        children: '我是内容',
+        title: '我是标题',
+        onHide: Modal.hide,
+      })
+    }}
+  >
+    opacityMask
+  </Button>
+)
+
+export const ComCleanModal = () => (
+  <Button
+    type='primary'
+    onClick={() => {
+      CleanModal.render({
+        children: <div className='gm-text-white'>啦啦啦</div>,
+        onHide: Modal.hide,
+      })
+    }}
+  >
+    CleanModal
+  </Button>
+)
+
+export const ComRightSideModal = () => (
+  <Button
+    type='primary'
+    onClick={() => {
+      RightSideModal.render({
+        title: 'asdf',
+        children: (
+          <div>
+            <div>
+              <button
+                onClick={() => {
+                  Modal.render({
+                    children: '我是内容',
+                    title: '我是标题',
+                    onHide: Modal.hide,
+                  })
+                }}
+              >
+                other modal
+              </button>
+            </div>
+            啦啦啦，下面还有滚动内容
+            <div style={{ height: '1000px' }} />
+            啦啦啦
+          </div>
+        ),
+        onHide: RightSideModal.hide,
+      })
+    }}
+  >
+    RightSideModal
+  </Button>
+)
+
+export default {
+  title: '反馈/Modal',
+}

package/src/component/modal/style.less

@@ -1,138 +1,138 @@
-.gm-modal-mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--gm-z-index-modal-mask);
-  background-color: rgba(0, 0, 0, 0.7);
-
-  &.gm-modal-mask-opacity {
-    background-color: rgba(0, 0, 0, 0);
-  }
-}
-
-.gm-modal-wrap {
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--gm-z-index-modal);
-  outline: 0;
-}
-
-.gm-modal {
-  position: relative;
-  background-color: white;
-  margin: 10px;
-  width: auto;
-
-  .gm-modal-close {
-    font-size: 16px;
-    padding: 10px;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  .gm-modal-title-wrap {
-    font-size: 16px;
-    padding: 10px 20px 10px 20px;
-    border-bottom: 1px solid var(--gm-color-border);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    height: var(--gm-modal-size-title-height);
-
-    .gm-modal-title {
-      border-left: 3px solid var(--gm-color-primary);
-      height: 18px;
-      line-height: 18px;
-      padding-left: 5px;
-    }
-  }
-
-  // 这里不能用overflow: auto. 不希望content出现滚动条，而是整个 scroll
-  .gm-modal-content {
-    padding: 10px;
-  }
-
-  &.gm-modal-mask-opacity {
-    border: 1px solid var(--gm-color-border);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  &.gm-modal-clean {
-    background: transparent;
-
-    .gm-modal-close {
-      display: none;
-    }
-
-    .gm-modal-content {
-      padding: 0;
-    }
-  }
-
-  &.gm-modal-right-side {
-    margin: 0 0 0 auto;
-    height: 100%;
-    overflow: hidden;
-
-    .gm-modal-content {
-      padding: 0;
-      height: 100%;
-      overflow: auto;
-    }
-
-    &.gm-modal-has-title {
-      .gm-modal-content {
-        height: calc(100% - var(--gm-modal-size-title-height));
-      }
-    }
-  }
-}
-
-.gm-modal-right-side-container {
-  .gm-modal-mask {
-    z-index: var(--gm-z-index-right-side-modal);
-  }
-
-  .gm-modal-wrap {
-    z-index: var(--gm-z-index-right-side-modal);
-  }
-}
-
-@media (min-width: 768px) {
-  .gm-modal-lg {
-    width: 600px;
-    margin: 100px auto 20px;
-  }
-
-  .gm-modal-md {
-    width: 600px;
-    margin: 100px auto 20px;
-  }
-
-  .gm-modal-sm {
-    width: 300px;
-    margin: 100px auto 20px;
-  }
-}
-
-// 限制移动端最大宽度,防止隐藏close按钮
-@media (max-device-width: 766px) and (min-device-width: 0) {
-  .gm-modal-dialog {
-    max-width: 96vw;
-    overflow: auto !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .gm-modal-lg {
-    width: 900px;
-  }
-}
+.gm-modal-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--gm-z-index-modal-mask);
+  background-color: rgba(0, 0, 0, 0.7);
+
+  &.gm-modal-mask-opacity {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+
+.gm-modal-wrap {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--gm-z-index-modal);
+  outline: 0;
+}
+
+.gm-modal {
+  position: relative;
+  background-color: white;
+  margin: 10px;
+  width: auto;
+
+  .gm-modal-close {
+    font-size: 16px;
+    padding: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .gm-modal-title-wrap {
+    font-size: 16px;
+    padding: 10px 20px 10px 20px;
+    border-bottom: 1px solid var(--gm-color-border);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: var(--gm-modal-size-title-height);
+
+    .gm-modal-title {
+      border-left: 3px solid var(--gm-color-primary);
+      height: 18px;
+      line-height: 18px;
+      padding-left: 5px;
+    }
+  }
+
+  // 这里不能用overflow: auto. 不希望content出现滚动条，而是整个 scroll
+  .gm-modal-content {
+    padding: 10px;
+  }
+
+  &.gm-modal-mask-opacity {
+    border: 1px solid var(--gm-color-border);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  &.gm-modal-clean {
+    background: transparent;
+
+    .gm-modal-close {
+      display: none;
+    }
+
+    .gm-modal-content {
+      padding: 0;
+    }
+  }
+
+  &.gm-modal-right-side {
+    margin: 0 0 0 auto;
+    height: 100%;
+    overflow: hidden;
+
+    .gm-modal-content {
+      padding: 0;
+      height: 100%;
+      overflow: auto;
+    }
+
+    &.gm-modal-has-title {
+      .gm-modal-content {
+        height: calc(100% - var(--gm-modal-size-title-height));
+      }
+    }
+  }
+}
+
+.gm-modal-right-side-container {
+  .gm-modal-mask {
+    z-index: var(--gm-z-index-right-side-modal);
+  }
+
+  .gm-modal-wrap {
+    z-index: var(--gm-z-index-right-side-modal);
+  }
+}
+
+@media (min-width: 768px) {
+  .gm-modal-lg {
+    width: 600px;
+    margin: 100px auto 20px;
+  }
+
+  .gm-modal-md {
+    width: 600px;
+    margin: 100px auto 20px;
+  }
+
+  .gm-modal-sm {
+    width: 300px;
+    margin: 100px auto 20px;
+  }
+}
+
+// 限制移动端最大宽度,防止隐藏close按钮
+@media (max-device-width: 766px) and (min-device-width: 0) {
+  .gm-modal-dialog {
+    max-width: 96vw;
+    overflow: auto !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .gm-modal-lg {
+    width: 900px;
+  }
+}

package/src/component/modal/types.ts

@@ -1,27 +1,27 @@
-import { CSSProperties, ReactNode } from 'react'
-import { Type } from '../layout_root'
-
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
-
-interface ModalProps {
-  title?: string | ReactNode
-  size?: ModalSize
-  onHide?(): void
-  disableMaskClose?: boolean
-  noContentPadding?: boolean
-  opacityMask?: boolean
-  noCloseBtn?: boolean
-  className?: string
-  containerClassName?: string
-  style?: CSSProperties
-  children: ReactNode
-}
-
-interface ModalStatic {
-  _render(props: ModalProps, type?: Type): void
-  _hide(type?: Type): void
-  render(props: ModalProps): void
-  hide(): void
-}
-
-export type { ModalProps, ModalSize, ModalStatic }
+import { CSSProperties, ReactNode } from 'react'
+import { Type } from '../layout_root'
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
+
+interface ModalProps {
+  title?: string | ReactNode
+  size?: ModalSize
+  onHide?(): void
+  disableMaskClose?: boolean
+  noContentPadding?: boolean
+  opacityMask?: boolean
+  noCloseBtn?: boolean
+  className?: string
+  containerClassName?: string
+  style?: CSSProperties
+  children: ReactNode
+}
+
+interface ModalStatic {
+  _render(props: ModalProps, type?: Type): void
+  _hide(type?: Type): void
+  render(props: ModalProps): void
+  hide(): void
+}
+
+export type { ModalProps, ModalSize, ModalStatic }