@gm-pc/react 1.25.1-beta.1 → 1.26.0-beta.0

package/src/component/grid/mixin.less

@@ -1,48 +1,48 @@
-.gm-grid-float-columns(@class) {
-  .col(@index) {
-    // initial
-    @item: ~'.gm-grid-col@{class}-@{index}';
-    .col((@index + 1), @item);
-  }
-  .col(@index, @list) when (@index =< @gm-grid-columns) {
-    // general
-    @item: ~'.gm-grid-col@{class}-@{index}';
-    .col((@index + 1), ~'@{list}, @{item}');
-  }
-  .col(@index, @list) when (@index > @gm-grid-columns) {
-    // terminal
-    @{list} {
-      flex: 0 0 auto;
-      float: left;
-    }
-  }
-  .col(1); // kickstart it
-}
-
-.gm-grid-loop-columns(@index, @class) when (@index > 0) {
-  .gm-grid-col@{class}-span-@{index} {
-    display: block;
-    box-sizing: border-box;
-    width: percentage((@index / @gm-grid-columns));
-  }
-
-  .gm-grid-col@{class}-offset-@{index} {
-    margin-left: percentage((@index / @gm-grid-columns));
-  }
-  .gm-grid-loop-columns((@index - 1), @class);
-}
-
-.gm-grid-loop-columns(@index, @class) when (@index = 0) {
-  .gm-grid-col@{class}-span-@{index} {
-    display: none;
-  }
-
-  .gm-grid-col@{class}-offset-@{index} {
-    margin-left: 0;
-  }
-}
-
-.gm-grid(@class: ~'') {
-  .gm-grid-float-columns(@class);
-  .gm-grid-loop-columns(@gm-grid-columns, @class);
-}
+.gm-grid-float-columns(@class) {
+  .col(@index) {
+    // initial
+    @item: ~'.gm-grid-col@{class}-@{index}';
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @gm-grid-columns) {
+    // general
+    @item: ~'.gm-grid-col@{class}-@{index}';
+    .col((@index + 1), ~'@{list}, @{item}');
+  }
+  .col(@index, @list) when (@index > @gm-grid-columns) {
+    // terminal
+    @{list} {
+      flex: 0 0 auto;
+      float: left;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.gm-grid-loop-columns(@index, @class) when (@index > 0) {
+  .gm-grid-col@{class}-span-@{index} {
+    display: block;
+    box-sizing: border-box;
+    width: percentage((@index / @gm-grid-columns));
+  }
+
+  .gm-grid-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @gm-grid-columns));
+  }
+  .gm-grid-loop-columns((@index - 1), @class);
+}
+
+.gm-grid-loop-columns(@index, @class) when (@index = 0) {
+  .gm-grid-col@{class}-span-@{index} {
+    display: none;
+  }
+
+  .gm-grid-col@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+}
+
+.gm-grid(@class: ~'') {
+  .gm-grid-float-columns(@class);
+  .gm-grid-loop-columns(@gm-grid-columns, @class);
+}

package/src/component/grid/row.tsx

@@ -1,27 +1,27 @@
-import React, { FC } from 'react'
-import classNames from 'classnames'
-import { RowProps } from './types'
-import { RowContext } from './util'
-import { Flex } from '../flex'
-
-const Row: FC<RowProps> = ({ gutter = 0, className, style, children, ...rest }) => {
-  const rowStyle = style || {}
-  if (typeof gutter === 'number' && gutter > 0) {
-    rowStyle.marginLeft = -gutter / 2
-    rowStyle.marginRight = -gutter / 2
-  }
-
-  return (
-    <Flex
-      row
-      wrap
-      {...rest}
-      className={classNames('gm-grid-row', className)}
-      style={rowStyle}
-    >
-      <RowContext.Provider value={{ gutter }}>{children}</RowContext.Provider>
-    </Flex>
-  )
-}
-
-export default Row
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import { RowProps } from './types'
+import { RowContext } from './util'
+import { Flex } from '../flex'
+
+const Row: FC<RowProps> = ({ gutter = 0, className, style, children, ...rest }) => {
+  const rowStyle = style || {}
+  if (typeof gutter === 'number' && gutter > 0) {
+    rowStyle.marginLeft = -gutter / 2
+    rowStyle.marginRight = -gutter / 2
+  }
+
+  return (
+    <Flex
+      row
+      wrap
+      {...rest}
+      className={classNames('gm-grid-row', className)}
+      style={rowStyle}
+    >
+      <RowContext.Provider value={{ gutter }}>{children}</RowContext.Provider>
+    </Flex>
+  )
+}
+
+export default Row

package/src/component/grid/stories.tsx

@@ -1,65 +1,65 @@
-import React, { FC } from 'react'
-import Row from './row'
-import Col from './col'
-import { ColProps } from './types'
-
-const ColBlock: FC<ColProps> = (props) => {
-  return (
-    <Col
-      {...props}
-      className='gm-bg-primary gm-text-center gm-border'
-      style={{ height: '50px' }}
-    >
-      {JSON.stringify(props)}
-    </Col>
-  )
-}
-
-export const ComGrid = () => (
-  <div className='gm-padding-10'>
-    <div>占满</div>
-    <Row>
-      <ColBlock span={24} />
-    </Row>
-    <div>三等分</div>
-    <Row>
-      <ColBlock span={8} />
-      <ColBlock span={8} />
-      <ColBlock span={8} />
-    </Row>
-    <div>偏移</div>
-    <Row>
-      <ColBlock span={8} />
-      <ColBlock span={5} offset={8} />
-      <ColBlock span={3} />
-    </Row>
-    <div>超出换行</div>
-    <Row>
-      <ColBlock span={8} />
-      <ColBlock span={8} />
-      <ColBlock span={2} />
-      <ColBlock span={8} />
-    </Row>
-    <br />
-    gutter
-    <Row gutter={8}>
-      <ColBlock span={8} />
-      <ColBlock span={8} />
-      <ColBlock span={8} />
-    </Row>
-  </div>
-)
-
-export const ComGridForResponsive = () => (
-  <div>
-    <div>响应式</div>
-    <Row>
-      <ColBlock sm={6} md={8} lg={12} />
-      <ColBlock sm={6} md={8} lg={12} />
-    </Row>
-  </div>
-)
-
-export default {
-  title: '布局/Grid',
-}
+import React, { FC } from 'react'
+import Row from './row'
+import Col from './col'
+import { ColProps } from './types'
+
+const ColBlock: FC<ColProps> = (props) => {
+  return (
+    <Col
+      {...props}
+      className='gm-bg-primary gm-text-center gm-border'
+      style={{ height: '50px' }}
+    >
+      {JSON.stringify(props)}
+    </Col>
+  )
+}
+
+export const ComGrid = () => (
+  <div className='gm-padding-10'>
+    <div>占满</div>
+    <Row>
+      <ColBlock span={24} />
+    </Row>
+    <div>三等分</div>
+    <Row>
+      <ColBlock span={8} />
+      <ColBlock span={8} />
+      <ColBlock span={8} />
+    </Row>
+    <div>偏移</div>
+    <Row>
+      <ColBlock span={8} />
+      <ColBlock span={5} offset={8} />
+      <ColBlock span={3} />
+    </Row>
+    <div>超出换行</div>
+    <Row>
+      <ColBlock span={8} />
+      <ColBlock span={8} />
+      <ColBlock span={2} />
+      <ColBlock span={8} />
+    </Row>
+    <br />
+    gutter
+    <Row gutter={8}>
+      <ColBlock span={8} />
+      <ColBlock span={8} />
+      <ColBlock span={8} />
+    </Row>
+  </div>
+)
+
+export const ComGridForResponsive = () => (
+  <div>
+    <div>响应式</div>
+    <Row>
+      <ColBlock sm={6} md={8} lg={12} />
+      <ColBlock sm={6} md={8} lg={12} />
+    </Row>
+  </div>
+)
+
+export default {
+  title: '布局/Grid',
+}

package/src/component/grid/style.less

@@ -1,27 +1,27 @@
-@import './mixin';
-
-.gm-grid-row {
-  position: relative;
-  height: auto;
-
-  .gmClearFix();
-}
-
-.gm-grid(); // 不设置size时
-.gm-grid(-sm); // 默认的
-
-@media (min-width: @gm-screen-sm-min) {
-  .gm-grid(-sm);
-}
-
-@media (min-width: @gm-screen-md-min) {
-  .gm-grid(-md);
-}
-
-@media (min-width: @gm-screen-lg-min) {
-  .gm-grid(-lg);
-}
-
-@media (min-width: @gm-screen-xl-min) {
-  .gm-grid(-xl);
-}
+@import './mixin';
+
+.gm-grid-row {
+  position: relative;
+  height: auto;
+
+  .gmClearFix();
+}
+
+.gm-grid(); // 不设置size时
+.gm-grid(-sm); // 默认的
+
+@media (min-width: @gm-screen-sm-min) {
+  .gm-grid(-sm);
+}
+
+@media (min-width: @gm-screen-md-min) {
+  .gm-grid(-md);
+}
+
+@media (min-width: @gm-screen-lg-min) {
+  .gm-grid(-lg);
+}
+
+@media (min-width: @gm-screen-xl-min) {
+  .gm-grid(-xl);
+}

package/src/component/grid/types.ts

@@ -1,35 +1,35 @@
-import { HTMLAttributes } from 'react'
-
-interface GutterSize {
-  /** 需要提供最小尺寸，小的时候才不会乱。暂时这么解决 */
-  sm: number
-  md?: number
-  lg?: number
-  xl?: number
-}
-
-type Gutter = number | GutterSize
-
-interface RowProps extends HTMLAttributes<HTMLDivElement> {
-  /* 栅栏间隔，可以写成像素值或支持响应式的对象写法，默认为10 */
-  gutter?: Gutter
-}
-
-type ColSize = number | { span?: number; offset?: number }
-
-interface ColProps extends HTMLAttributes<HTMLDivElement> {
-  /* 栅栏占位格数，为 0 时相当于 display: none */
-  span?: number
-  /* 栅栏左偏移量 */
-  offset?: number
-  /* 768px */
-  sm?: ColSize
-  /* 992px */
-  md?: ColSize
-  /* 1200px */
-  lg?: ColSize
-  /* 1920px */
-  xl?: ColSize
-}
-
-export type { Gutter, RowProps, ColProps }
+import { HTMLAttributes } from 'react'
+
+interface GutterSize {
+  /** 需要提供最小尺寸，小的时候才不会乱。暂时这么解决 */
+  sm: number
+  md?: number
+  lg?: number
+  xl?: number
+}
+
+type Gutter = number | GutterSize
+
+interface RowProps extends HTMLAttributes<HTMLDivElement> {
+  /* 栅栏间隔，可以写成像素值或支持响应式的对象写法，默认为10 */
+  gutter?: Gutter
+}
+
+type ColSize = number | { span?: number; offset?: number }
+
+interface ColProps extends HTMLAttributes<HTMLDivElement> {
+  /* 栅栏占位格数，为 0 时相当于 display: none */
+  span?: number
+  /* 栅栏左偏移量 */
+  offset?: number
+  /* 768px */
+  sm?: ColSize
+  /* 992px */
+  md?: ColSize
+  /* 1200px */
+  lg?: ColSize
+  /* 1920px */
+  xl?: ColSize
+}
+
+export type { Gutter, RowProps, ColProps }

package/src/component/grid/util.ts

@@ -1,12 +1,12 @@
-import { createContext } from 'react'
-import { Gutter } from './types'
-
-interface RowContext {
-  gutter?: Gutter
-}
-
-const RowContext = createContext<RowContext>({
-  gutter: undefined,
-})
-
-export { RowContext }
+import { createContext } from 'react'
+import { Gutter } from './types'
+
+interface RowContext {
+  gutter?: Gutter
+}
+
+const RowContext = createContext<RowContext>({
+  gutter: undefined,
+})
+
+export { RowContext }

package/src/component/icon_down_up/icon_down_up.tsx

@@ -1,22 +1,22 @@
-import React, { CSSProperties, FC } from 'react'
-import SVGDown from '../../svg/down.svg'
-import classNames from 'classnames'
-
-interface IconDownUpProps {
-  active?: boolean
-  disabled?: boolean
-  className?: string
-  style?: CSSProperties
-}
-
-const IconDownUp: FC<IconDownUpProps> = ({ active, disabled, className, style }) => {
-  return (
-    <SVGDown
-      className={classNames('gm-icon-down-up', { active, disabled }, className)}
-      style={style}
-    />
-  )
-}
-
-export default IconDownUp
-export type { IconDownUpProps }
+import React, { CSSProperties, FC } from 'react'
+import SVGDown from '../../svg/down.svg'
+import classNames from 'classnames'
+
+interface IconDownUpProps {
+  active?: boolean
+  disabled?: boolean
+  className?: string
+  style?: CSSProperties
+}
+
+const IconDownUp: FC<IconDownUpProps> = ({ active, disabled, className, style }) => {
+  return (
+    <SVGDown
+      className={classNames('gm-icon-down-up', { active, disabled }, className)}
+      style={style}
+    />
+  )
+}
+
+export default IconDownUp
+export type { IconDownUpProps }

package/src/component/icon_down_up/index.ts

@@ -1,2 +1,2 @@
-export { default as IconDownUp } from './icon_down_up'
-export type { IconDownUpProps } from './icon_down_up'
+export { default as IconDownUp } from './icon_down_up'
+export type { IconDownUpProps } from './icon_down_up'

package/src/component/icon_down_up/stories.tsx

@@ -1,21 +1,21 @@
-import React from 'react'
-import IconDownUp from './icon_down_up'
-import { observable } from 'mobx'
-
-const store = observable({
-  active: false,
-  toggle() {
-    this.active = !this.active
-  },
-})
-
-export const ComIconDownUp = () => (
-  <div>
-    <IconDownUp active={store.active} />
-    <button onClick={() => store.toggle()}>click</button>
-  </div>
-)
-
-export default {
-  title: '其他/IconDownUp',
-}
+import React from 'react'
+import IconDownUp from './icon_down_up'
+import { observable } from 'mobx'
+
+const store = observable({
+  active: false,
+  toggle() {
+    this.active = !this.active
+  },
+})
+
+export const ComIconDownUp = () => (
+  <div>
+    <IconDownUp active={store.active} />
+    <button onClick={() => store.toggle()}>click</button>
+  </div>
+)
+
+export default {
+  title: '其他/IconDownUp',
+}

package/src/component/icon_down_up/style.less

@@ -1,10 +1,10 @@
-.gm-icon-down-up {
-  transform: rotate(0deg);
-  transition: 0.2s ease all;
-
-  &.active {
-    transform: rotate(180deg);
-  }
-
-  .gmDisabledWith();
-}
+.gm-icon-down-up {
+  transform: rotate(0deg);
+  transition: 0.2s ease all;
+
+  &.active {
+    transform: rotate(180deg);
+  }
+
+  .gmDisabledWith();
+}

package/src/component/icon_expand/icon_expand.tsx

@@ -1,22 +1,22 @@
-import React, { FC, HTMLAttributes, MouseEvent } from 'react'
-import SVGCloseup from '../../svg/closeup.svg'
-import SVGExpand from '../../svg/expand.svg'
-
-interface IconExpandProps extends HTMLAttributes<HTMLDivElement> {
-  onClick(e: MouseEvent<HTMLDivElement>): void
-  active: boolean
-}
-
-const IconExpand: FC<IconExpandProps> = ({ active, onClick, ...rest }) => {
-  return (
-    <div {...rest} onClick={onClick}>
-      {active ? (
-        <SVGCloseup className='gm-icon-expand-close gm-text-primary' />
-      ) : (
-        <SVGExpand className='gm-icon-expand-expand' />
-      )}
-    </div>
-  )
-}
-
-export default IconExpand
+import React, { FC, HTMLAttributes, MouseEvent } from 'react'
+import SVGCloseup from '../../svg/closeup.svg'
+import SVGExpand from '../../svg/expand.svg'
+
+interface IconExpandProps extends HTMLAttributes<HTMLDivElement> {
+  onClick(e: MouseEvent<HTMLDivElement>): void
+  active: boolean
+}
+
+const IconExpand: FC<IconExpandProps> = ({ active, onClick, ...rest }) => {
+  return (
+    <div {...rest} onClick={onClick}>
+      {active ? (
+        <SVGCloseup className='gm-icon-expand-close gm-text-primary' />
+      ) : (
+        <SVGExpand className='gm-icon-expand-expand' />
+      )}
+    </div>
+  )
+}
+
+export default IconExpand

package/src/component/icon_expand/index.ts

@@ -1 +1 @@
-export { default as IconExpand } from './icon_expand'
+export { default as IconExpand } from './icon_expand'