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

package/src/component/loading/types.ts

@@ -1,30 +1,30 @@
-import { HTMLAttributes, ReactNode } from 'react'
-
-interface LoadingProps {
-  size?: string
-  type: any
-}
-
-interface LoadingChunkProps extends HTMLAttributes<HTMLDivElement> {
-  loading?: boolean
-  text?: string
-  size?: string
-  children: ReactNode
-}
-
-interface LoadingFullScreenProps {
-  text?: string
-  size?: string
-}
-
-interface LoadingFullScreenStatic {
-  render(props: LoadingFullScreenProps): void
-  hide(): void
-}
-
-export type {
-  LoadingProps,
-  LoadingChunkProps,
-  LoadingFullScreenProps,
-  LoadingFullScreenStatic,
-}
+import { HTMLAttributes, ReactNode } from 'react'
+
+interface LoadingProps {
+  size?: string
+  type: any
+}
+
+interface LoadingChunkProps extends HTMLAttributes<HTMLDivElement> {
+  loading?: boolean
+  text?: string
+  size?: string
+  children: ReactNode
+}
+
+interface LoadingFullScreenProps {
+  text?: string
+  size?: string
+}
+
+interface LoadingFullScreenStatic {
+  render(props: LoadingFullScreenProps): void
+  hide(): void
+}
+
+export type {
+  LoadingProps,
+  LoadingChunkProps,
+  LoadingFullScreenProps,
+  LoadingFullScreenStatic,
+}

package/src/component/mask/index.ts

@@ -1,2 +1,2 @@
-export { default as Mask } from './mask'
-export type { MaskProps } from './mask'
+export { default as Mask } from './mask'
+export type { MaskProps } from './mask'

package/src/component/mask/mask.tsx

@@ -1,22 +1,22 @@
-import React, { FC, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-interface MaskProps extends HTMLAttributes<HTMLDivElement> {
-  opacity?: number
-}
-
-const Mask: FC<MaskProps> = ({ opacity = 0.5, className, style, ...rest }) => {
-  return (
-    <div
-      {...rest}
-      className={classNames('gm-mask', className)}
-      style={{
-        background: `rgba(0,0,0, ${opacity})`,
-        ...style,
-      }}
-    />
-  )
-}
-
-export default Mask
-export type { MaskProps }
+import React, { FC, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+interface MaskProps extends HTMLAttributes<HTMLDivElement> {
+  opacity?: number
+}
+
+const Mask: FC<MaskProps> = ({ opacity = 0.5, className, style, ...rest }) => {
+  return (
+    <div
+      {...rest}
+      className={classNames('gm-mask', className)}
+      style={{
+        background: `rgba(0,0,0, ${opacity})`,
+        ...style,
+      }}
+    />
+  )
+}
+
+export default Mask
+export type { MaskProps }

package/src/component/mask/style.less

@@ -1,10 +1,10 @@
-.gm-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  z-index: var(--gm-z-index-mask);
-}
+.gm-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--gm-z-index-mask);
+}

package/src/component/modal/clean_modal.tsx

@@ -1,14 +1,14 @@
-import Modal from './modal'
-import { ModalStatic, ModalProps } from './types'
-import classNames from 'classnames'
-
-const CleanModal: ModalStatic = {
-  render(props: ModalProps): void {
-    Modal.render({ ...props, className: classNames('gm-modal-clean', props.className) })
-  },
-  hide(): void {
-    Modal.hide()
-  },
-}
-
-export default CleanModal
+import Modal from './modal'
+import { ModalStatic, ModalProps } from './types'
+import classNames from 'classnames'
+
+const CleanModal: ModalStatic = {
+  render(props: ModalProps): void {
+    Modal.render({ ...props, className: classNames('gm-modal-clean', props.className) })
+  },
+  hide(): void {
+    Modal.hide()
+  },
+}
+
+export default CleanModal

package/src/component/modal/index.ts

@@ -1,5 +1,5 @@
-export { default as Modal } from './modal'
-export { default as CleanModal } from './clean_modal'
-export { default as RightSideModal } from './right_side_modal'
-
-export type { ModalProps, ModalStatic, ModalSize } from './types'
+export { default as Modal } from './modal'
+export { default as CleanModal } from './clean_modal'
+export { default as RightSideModal } from './right_side_modal'
+
+export type { ModalProps, ModalStatic, ModalSize } from './types'

package/src/component/modal/modal.tsx

@@ -1,145 +1,145 @@
-import React, { FC, MouseEvent, useEffect, useRef, isValidElement } from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { ModalProps, ModalStatic } from './types'
-import EVENT_TYPE from '../../event_type'
-import { LayoutRoot, Type } from '../layout_root'
-import SVGRemove from '../../svg/remove.svg'
-
-const Modal: FC<ModalProps> & ModalStatic = ({
-  title,
-  size = 'md',
-  disableMaskClose,
-  noContentPadding,
-  noCloseBtn,
-  opacityMask,
-  onHide,
-  children,
-  className,
-  containerClassName,
-  style,
-}) => {
-  const refModal = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const doScroll = (): void => {
-      window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_SCROLL))
-    }
-
-    const handleKeydown = (event: KeyboardEvent): void => {
-      if (event.keyCode === 27) {
-        onHide && onHide()
-      }
-    }
-
-    window.document.body.addEventListener('keydown', handleKeydown)
-
-    refModal.current &&
-      refModal.current.addEventListener('scroll', _.throttle(doScroll, 200))
-
-    return () => {
-      window.document.body.removeEventListener('keydown', handleKeydown)
-      refModal.current && refModal.current.removeEventListener('scroll', doScroll)
-    }
-  }, [onHide])
-
-  const handleClose = (): void => {
-    onHide && onHide()
-  }
-
-  const handleMask = (event: MouseEvent<HTMLDivElement>): void => {
-    if (
-      !disableMaskClose &&
-      (event.target as HTMLDivElement).classList.contains('gm-modal-wrap')
-    ) {
-      handleClose()
-    }
-  }
-
-  // 拿出来，更直观点
-  const dialog = (
-    <div
-      className={classNames(
-        'gm-modal',
-        'gm-modal-' + size,
-        {
-          'gm-modal-mask-opacity': opacityMask,
-          'gm-modal-has-title': title,
-        },
-        className
-      )}
-      style={style}
-    >
-      {title && (
-        <div className='gm-modal-title-wrap'>
-          {isValidElement(title) ? title : <div className='gm-modal-title'>{title}</div>}
-        </div>
-      )}
-      {noCloseBtn || (
-        <div className='gm-modal-close gm-cursor' onClick={handleClose}>
-          <SVGRemove />
-        </div>
-      )}
-      <div
-        className={classNames('gm-modal-content', {
-          'gm-padding-0': noContentPadding,
-        })}
-      >
-        {children}
-      </div>
-    </div>
-  )
-
-  return (
-    <div className={classNames('gm-modal-container', containerClassName)}>
-      <div
-        className={classNames('gm-modal-mask', {
-          'gm-modal-mask-opacity': opacityMask,
-        })}
-      />
-      <div ref={refModal} className='gm-modal-wrap' tabIndex={-1} onClick={handleMask}>
-        {dialog}
-      </div>
-    </div>
-  )
-}
-
-// 做warning用
-let closeFlag = false
-
-Modal._render = function (props: ModalProps, type?: Type): void {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_SHOW))
-  const { onHide, ...rest } = props
-
-  function handleHide(): void {
-    closeFlag = false
-    onHide && onHide()
-    if (!closeFlag) {
-      console.warn('请在 onHide 里调用 Modal.hide。这次帮你hide')
-      Modal._hide(type || LayoutRoot.Type.MODAL)
-    }
-  }
-
-  LayoutRoot.setComponent(
-    type || LayoutRoot.Type.MODAL,
-    <Modal onHide={handleHide} {...rest} />
-  )
-}
-
-Modal._hide = function (type?: Type): void {
-  closeFlag = true
-
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_HIDE))
-  LayoutRoot.removeComponent(type || LayoutRoot.Type.MODAL)
-}
-
-Modal.render = function (props: ModalProps) {
-  Modal._render(props)
-}
-
-Modal.hide = function () {
-  Modal._hide()
-}
-
-export default Modal
-export type { ModalProps }
+import React, { FC, MouseEvent, useEffect, useRef, isValidElement } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { ModalProps, ModalStatic } from './types'
+import EVENT_TYPE from '../../event_type'
+import { LayoutRoot, Type } from '../layout_root'
+import SVGRemove from '../../svg/remove.svg'
+
+const Modal: FC<ModalProps> & ModalStatic = ({
+  title,
+  size = 'md',
+  disableMaskClose,
+  noContentPadding,
+  noCloseBtn,
+  opacityMask,
+  onHide,
+  children,
+  className,
+  containerClassName,
+  style,
+}) => {
+  const refModal = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const doScroll = (): void => {
+      window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_SCROLL))
+    }
+
+    const handleKeydown = (event: KeyboardEvent): void => {
+      if (event.keyCode === 27) {
+        onHide && onHide()
+      }
+    }
+
+    window.document.body.addEventListener('keydown', handleKeydown)
+
+    refModal.current &&
+      refModal.current.addEventListener('scroll', _.throttle(doScroll, 200))
+
+    return () => {
+      window.document.body.removeEventListener('keydown', handleKeydown)
+      refModal.current && refModal.current.removeEventListener('scroll', doScroll)
+    }
+  }, [onHide])
+
+  const handleClose = (): void => {
+    onHide && onHide()
+  }
+
+  const handleMask = (event: MouseEvent<HTMLDivElement>): void => {
+    if (
+      !disableMaskClose &&
+      (event.target as HTMLDivElement).classList.contains('gm-modal-wrap')
+    ) {
+      handleClose()
+    }
+  }
+
+  // 拿出来，更直观点
+  const dialog = (
+    <div
+      className={classNames(
+        'gm-modal',
+        'gm-modal-' + size,
+        {
+          'gm-modal-mask-opacity': opacityMask,
+          'gm-modal-has-title': title,
+        },
+        className
+      )}
+      style={style}
+    >
+      {title && (
+        <div className='gm-modal-title-wrap'>
+          {isValidElement(title) ? title : <div className='gm-modal-title'>{title}</div>}
+        </div>
+      )}
+      {noCloseBtn || (
+        <div className='gm-modal-close gm-cursor' onClick={handleClose}>
+          <SVGRemove />
+        </div>
+      )}
+      <div
+        className={classNames('gm-modal-content', {
+          'gm-padding-0': noContentPadding,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className={classNames('gm-modal-container', containerClassName)}>
+      <div
+        className={classNames('gm-modal-mask', {
+          'gm-modal-mask-opacity': opacityMask,
+        })}
+      />
+      <div ref={refModal} className='gm-modal-wrap' tabIndex={-1} onClick={handleMask}>
+        {dialog}
+      </div>
+    </div>
+  )
+}
+
+// 做warning用
+let closeFlag = false
+
+Modal._render = function (props: ModalProps, type?: Type): void {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_SHOW))
+  const { onHide, ...rest } = props
+
+  function handleHide(): void {
+    closeFlag = false
+    onHide && onHide()
+    if (!closeFlag) {
+      console.warn('请在 onHide 里调用 Modal.hide。这次帮你hide')
+      Modal._hide(type || LayoutRoot.Type.MODAL)
+    }
+  }
+
+  LayoutRoot.setComponent(
+    type || LayoutRoot.Type.MODAL,
+    <Modal onHide={handleHide} {...rest} />
+  )
+}
+
+Modal._hide = function (type?: Type): void {
+  closeFlag = true
+
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_HIDE))
+  LayoutRoot.removeComponent(type || LayoutRoot.Type.MODAL)
+}
+
+Modal.render = function (props: ModalProps) {
+  Modal._render(props)
+}
+
+Modal.hide = function () {
+  Modal._hide()
+}
+
+export default Modal
+export type { ModalProps }

package/src/component/modal/right_side_modal.tsx

@@ -1,22 +1,22 @@
-import Modal from './modal'
-import { ModalStatic, ModalProps } from './types'
-import classNames from 'classnames'
-import { LayoutRoot } from '../layout_root'
-
-const RightSideModal: Pick<ModalStatic, 'render' | 'hide'> = {
-  render(props: ModalProps): void {
-    Modal._render(
-      {
-        ...props,
-        className: classNames('gm-modal-right-side', props.className),
-        containerClassName: classNames('gm-modal-right-side-container'),
-      },
-      LayoutRoot.Type.RIGHT_SIDE_MODAL
-    )
-  },
-  hide(): void {
-    Modal._hide(LayoutRoot.Type.RIGHT_SIDE_MODAL)
-  },
-}
-
-export default RightSideModal
+import Modal from './modal'
+import { ModalStatic, ModalProps } from './types'
+import classNames from 'classnames'
+import { LayoutRoot } from '../layout_root'
+
+const RightSideModal: Pick<ModalStatic, 'render' | 'hide'> = {
+  render(props: ModalProps): void {
+    Modal._render(
+      {
+        ...props,
+        className: classNames('gm-modal-right-side', props.className),
+        containerClassName: classNames('gm-modal-right-side-container'),
+      },
+      LayoutRoot.Type.RIGHT_SIDE_MODAL
+    )
+  },
+  hide(): void {
+    Modal._hide(LayoutRoot.Type.RIGHT_SIDE_MODAL)
+  },
+}
+
+export default RightSideModal