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

package/src/component/button/stories.tsx

@@ -1,131 +1,131 @@
-import React from 'react'
-import Button from './button'
-import ButtonText from './button_text'
-
-function handleClick() {
-  console.log('click')
-  return new Promise((resolve) => setTimeout(() => resolve(), 2000))
-}
-
-export const ComButton = () => (
-  <>
-    默认
-    <>
-      <Button>默认</Button>
-      <Button type='primary'>主色</Button>
-      <Button type='success'>成功</Button>
-      <Button type='danger'>危险</Button>
-      <Button type='link'>Link</Button>
-      <Button type='link' href='#/supply_chain/purchase/analysis?tab=3' target='_blank'>
-        链接
-      </Button>
-    </>
-    <br />
-    plain
-    <>
-      <Button plain>默认</Button>
-      <Button plain type='primary'>
-        主色
-      </Button>
-      <Button plain type='success'>
-        成功
-      </Button>
-      <Button plain type='danger'>
-        危险
-      </Button>
-      <Button plain type='link'>
-        Link
-      </Button>
-    </>
-    <br />
-    disabled
-    <>
-      <Button disabled>默认</Button>
-      <Button disabled type='primary'>
-        主色
-      </Button>
-      <Button disabled type='success'>
-        成功
-      </Button>
-      <Button disabled type='danger'>
-        危险
-      </Button>
-      <Button disabled type='link'>
-        Link
-      </Button>
-      <Button disabled plain>
-        默认
-      </Button>
-      <Button disabled plain type='primary'>
-        主色
-      </Button>
-      <Button disabled plain type='success'>
-        成功
-      </Button>
-      <Button disabled plain type='danger'>
-        危险
-      </Button>
-      <Button disabled plain type='link'>
-        Link
-      </Button>
-    </>
-    <br />
-    size
-    <>
-      <Button size='small'>小的</Button>
-      <Button>默认</Button>
-      <Button size='large'>大的</Button>
-    </>
-  </>
-)
-
-export const ComButtonWithLoading = () => (
-  <>
-    loading
-    <>
-      <Button loading>loading</Button>
-    </>
-    <br />
-    onClick promise
-    <>
-      <Button onClick={handleClick}>点击显示 loading</Button>
-      <Button type='primary' onClick={handleClick}>
-        点击显示 loading
-      </Button>
-      <Button type='success' onClick={handleClick}>
-        点击显示 loading
-      </Button>
-      <Button type='danger' onClick={handleClick}>
-        点击显示 loading
-      </Button>
-    </>
-  </>
-)
-
-export const ComButtonText = () => (
-  <div>
-    <div>文本按钮</div>
-    <div>
-      <ButtonText>默认</ButtonText>
-      <ButtonText type='primary'>主色</ButtonText>
-      <ButtonText type='success'>成功</ButtonText>
-      <ButtonText type='danger'>危险</ButtonText>
-    </div>
-    <div>
-      <ButtonText disabled>默认</ButtonText>
-      <ButtonText disabled type='primary'>
-        主色
-      </ButtonText>
-      <ButtonText disabled type='success'>
-        成功
-      </ButtonText>
-      <ButtonText disabled type='danger'>
-        危险
-      </ButtonText>
-    </div>
-  </div>
-)
-
-export default {
-  title: '表单/Button',
-}
+import React from 'react'
+import Button from './button'
+import ButtonText from './button_text'
+
+function handleClick() {
+  console.log('click')
+  return new Promise((resolve) => setTimeout(() => resolve(), 2000))
+}
+
+export const ComButton = () => (
+  <>
+    默认
+    <>
+      <Button>默认</Button>
+      <Button type='primary'>主色</Button>
+      <Button type='success'>成功</Button>
+      <Button type='danger'>危险</Button>
+      <Button type='link'>Link</Button>
+      <Button type='link' href='#/supply_chain/purchase/analysis?tab=3' target='_blank'>
+        链接
+      </Button>
+    </>
+    <br />
+    plain
+    <>
+      <Button plain>默认</Button>
+      <Button plain type='primary'>
+        主色
+      </Button>
+      <Button plain type='success'>
+        成功
+      </Button>
+      <Button plain type='danger'>
+        危险
+      </Button>
+      <Button plain type='link'>
+        Link
+      </Button>
+    </>
+    <br />
+    disabled
+    <>
+      <Button disabled>默认</Button>
+      <Button disabled type='primary'>
+        主色
+      </Button>
+      <Button disabled type='success'>
+        成功
+      </Button>
+      <Button disabled type='danger'>
+        危险
+      </Button>
+      <Button disabled type='link'>
+        Link
+      </Button>
+      <Button disabled plain>
+        默认
+      </Button>
+      <Button disabled plain type='primary'>
+        主色
+      </Button>
+      <Button disabled plain type='success'>
+        成功
+      </Button>
+      <Button disabled plain type='danger'>
+        危险
+      </Button>
+      <Button disabled plain type='link'>
+        Link
+      </Button>
+    </>
+    <br />
+    size
+    <>
+      <Button size='small'>小的</Button>
+      <Button>默认</Button>
+      <Button size='large'>大的</Button>
+    </>
+  </>
+)
+
+export const ComButtonWithLoading = () => (
+  <>
+    loading
+    <>
+      <Button loading>loading</Button>
+    </>
+    <br />
+    onClick promise
+    <>
+      <Button onClick={handleClick}>点击显示 loading</Button>
+      <Button type='primary' onClick={handleClick}>
+        点击显示 loading
+      </Button>
+      <Button type='success' onClick={handleClick}>
+        点击显示 loading
+      </Button>
+      <Button type='danger' onClick={handleClick}>
+        点击显示 loading
+      </Button>
+    </>
+  </>
+)
+
+export const ComButtonText = () => (
+  <div>
+    <div>文本按钮</div>
+    <div>
+      <ButtonText>默认</ButtonText>
+      <ButtonText type='primary'>主色</ButtonText>
+      <ButtonText type='success'>成功</ButtonText>
+      <ButtonText type='danger'>危险</ButtonText>
+    </div>
+    <div>
+      <ButtonText disabled>默认</ButtonText>
+      <ButtonText disabled type='primary'>
+        主色
+      </ButtonText>
+      <ButtonText disabled type='success'>
+        成功
+      </ButtonText>
+      <ButtonText disabled type='danger'>
+        危险
+      </ButtonText>
+    </div>
+  </div>
+)
+
+export default {
+  title: '表单/Button',
+}

package/src/component/button/style.less

@@ -1,158 +1,158 @@
-.gm-btn {
-  height: 30px;
-  border-radius: 2px;
-  display: inline-flex;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 0 10px;
-  font-size: 12px;
-  line-height: 30px;
-  user-select: none;
-  flex-direction: row;
-  align-items: center;
-
-  &.gm-btn-default {
-    .gmBtnVariants(var(--gm-color-default), white, white);
-
-    border-color: var(--gm-color-border);
-
-    &.gm-btn-plain {
-      border-color: var(--gm-color-border);
-      color: var(--gm-color-default);
-    }
-  }
-
-  &.gm-btn-primary {
-    .gmBtnVariants(white, var(--gm-color-primary), var(--gm-color-primary-active));
-  }
-
-  &.gm-btn-success {
-    .gmBtnVariants(white, var(--gm-color-success), var(--gm-color-success-active));
-  }
-
-  &.gm-btn-danger {
-    .gmBtnVariants(white, var(--gm-color-danger), var(--gm-color-danger-active));
-  }
-
-  &.gm-btn-link {
-    background: transparent;
-    border-color: transparent;
-    color: var(--gm-color-link);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &.disabled,
-    &[disabled] {
-      .gmDisabled();
-    }
-  }
-
-  &.gm-btn-small {
-    height: 22px;
-    line-height: 22px;
-    font-size: 12px;
-    padding: 0 5px;
-  }
-
-  &.gm-btn-middle {
-    height: 30px;
-    line-height: 30px;
-    font-size: 12px;
-  }
-
-  &.gm-btn-large {
-    height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-  }
-
-  &.gm-btn-block {
-    display: block;
-    width: 100%;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  /** 字体大小 */
-  &.gm-btn-text-sm {
-    font-size: 14px;
-  }
-}
-
-@keyframes gm-btn-rotating {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.gmBtnVariants(@color; @brand; @brandActive) {
-  background: @brand;
-  border-color: @brand;
-  color: @color;
-
-  &.gm-btn-plain {
-    background: white;
-    border-color: @brand;
-    color: @brand;
-
-    &:hover:not([disabled]) {
-      color: white;
-    }
-  }
-
-  &:hover:not([disabled]) {
-    background: @brandActive;
-  }
-
-  &.gm-btn-default:not([disabled]):hover {
-    background: white;
-    color: var(--gm-color-primary);
-    border-color: var(--gm-color-primary);
-  }
-
-  .gmDisabledWith();
-}
-
-.gm-button-text {
-  &.gm-button-text-default {
-    .gmBtnTextVariants(var(--gm-color-default), var(--gm-color-default));
-  }
-
-  &.gm-button-text-primary {
-    .gmBtnTextVariants(var(--gm-color-primary), var(--gm-color-primary-active));
-  }
-
-  &.gm-button-text-success {
-    .gmBtnTextVariants(var(--gm-color-success), var(--gm-color-success-active));
-  }
-
-  &.gm-button-text-danger {
-    .gmBtnTextVariants(var(--gm-color-danger), var(--gm-color-danger-active));
-  }
-}
-
-.gmBtnTextVariants(@brand; @brandActive) {
-  display: inline-block;
-  white-space: nowrap;
-  cursor: pointer;
-  color: @brand;
-
-  &:hover:not(.disabled) {
-    color: @brandActive;
-  }
-
-  &.disabled {
-    .gmDisabled();
-  }
-}
+.gm-btn {
+  height: 30px;
+  border-radius: 2px;
+  display: inline-flex;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 30px;
+  user-select: none;
+  flex-direction: row;
+  align-items: center;
+
+  &.gm-btn-default {
+    .gmBtnVariants(var(--gm-color-default), white, white);
+
+    border-color: var(--gm-color-border);
+
+    &.gm-btn-plain {
+      border-color: var(--gm-color-border);
+      color: var(--gm-color-default);
+    }
+  }
+
+  &.gm-btn-primary {
+    .gmBtnVariants(white, var(--gm-color-primary), var(--gm-color-primary-active));
+  }
+
+  &.gm-btn-success {
+    .gmBtnVariants(white, var(--gm-color-success), var(--gm-color-success-active));
+  }
+
+  &.gm-btn-danger {
+    .gmBtnVariants(white, var(--gm-color-danger), var(--gm-color-danger-active));
+  }
+
+  &.gm-btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: var(--gm-color-link);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.disabled,
+    &[disabled] {
+      .gmDisabled();
+    }
+  }
+
+  &.gm-btn-small {
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    padding: 0 5px;
+  }
+
+  &.gm-btn-middle {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+  }
+
+  &.gm-btn-large {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+  }
+
+  &.gm-btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  /** 字体大小 */
+  &.gm-btn-text-sm {
+    font-size: 14px;
+  }
+}
+
+@keyframes gm-btn-rotating {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.gmBtnVariants(@color; @brand; @brandActive) {
+  background: @brand;
+  border-color: @brand;
+  color: @color;
+
+  &.gm-btn-plain {
+    background: white;
+    border-color: @brand;
+    color: @brand;
+
+    &:hover:not([disabled]) {
+      color: white;
+    }
+  }
+
+  &:hover:not([disabled]) {
+    background: @brandActive;
+  }
+
+  &.gm-btn-default:not([disabled]):hover {
+    background: white;
+    color: var(--gm-color-primary);
+    border-color: var(--gm-color-primary);
+  }
+
+  .gmDisabledWith();
+}
+
+.gm-button-text {
+  &.gm-button-text-default {
+    .gmBtnTextVariants(var(--gm-color-default), var(--gm-color-default));
+  }
+
+  &.gm-button-text-primary {
+    .gmBtnTextVariants(var(--gm-color-primary), var(--gm-color-primary-active));
+  }
+
+  &.gm-button-text-success {
+    .gmBtnTextVariants(var(--gm-color-success), var(--gm-color-success-active));
+  }
+
+  &.gm-button-text-danger {
+    .gmBtnTextVariants(var(--gm-color-danger), var(--gm-color-danger-active));
+  }
+}
+
+.gmBtnTextVariants(@brand; @brandActive) {
+  display: inline-block;
+  white-space: nowrap;
+  cursor: pointer;
+  color: @brand;
+
+  &:hover:not(.disabled) {
+    color: @brandActive;
+  }
+
+  &.disabled {
+    .gmDisabled();
+  }
+}

package/src/component/calendar/calendar.tsx

@@ -1,25 +1,25 @@
-import React, { FC } from 'react'
-import _ from 'lodash'
-
-import RangeCalendar from './range_calendar'
-import { CalendarProps } from './types'
-
-const Calendar: FC<CalendarProps> = (props) => {
-  const { selected, onSelect, ...rest } = props
-
-  const handleSelect = (begin: Date): void => {
-    onSelect && onSelect(begin)
-  }
-
-  return (
-    <RangeCalendar
-      {...rest}
-      begin={selected}
-      end={selected}
-      onSelect={handleSelect}
-      disabledYearAndMonth={undefined}
-    />
-  )
-}
-
-export default Calendar
+import React, { FC } from 'react'
+import _ from 'lodash'
+
+import RangeCalendar from './range_calendar'
+import { CalendarProps } from './types'
+
+const Calendar: FC<CalendarProps> = (props) => {
+  const { selected, onSelect, ...rest } = props
+
+  const handleSelect = (begin: Date): void => {
+    onSelect && onSelect(begin)
+  }
+
+  return (
+    <RangeCalendar
+      {...rest}
+      begin={selected}
+      end={selected}
+      onSelect={handleSelect}
+      disabledYearAndMonth={undefined}
+    />
+  )
+}
+
+export default Calendar