@gm-pc/react 1.25.0-beta.0 → 1.25.1-beta.0

package/src/component/checkbox/index.ts

@@ -1,5 +1,5 @@
-export { default as Checkbox } from './checkbox'
-export { default as CheckboxGroup } from './checkbox_group'
-
-export type { CheckboxProps } from './checkbox'
-export type { CheckboxGroupProps } from './checkbox_group'
+export { default as Checkbox } from './checkbox'
+export { default as CheckboxGroup } from './checkbox_group'
+
+export type { CheckboxProps } from './checkbox'
+export type { CheckboxGroupProps } from './checkbox_group'

package/src/component/checkbox/stories.tsx

@@ -1,152 +1,152 @@
-import React from 'react'
-import Checkbox from './checkbox'
-import CheckboxGroup from './checkbox_group'
-import { observable } from 'mobx'
-import { Col, Row } from '../grid'
-import _ from 'lodash'
-
-const store = observable({
-  value: [1, 4],
-  data: [
-    {
-      value: 1,
-      text: '广州',
-    },
-    {
-      value: 2,
-      text: '深圳',
-      disabled: true,
-    },
-    {
-      value: 3,
-      text: '成都',
-    },
-    {
-      value: 4,
-      text: '东莞',
-      disabled: true,
-    },
-    {
-      value: 5,
-      text: '珠海',
-    },
-    {
-      value: 6,
-      text: '惠州',
-    },
-  ],
-  setValue(value: any) {
-    console.log(value)
-    this.value = value
-  },
-  checked: false,
-  setChecked() {
-    this.checked = !this.checked
-  },
-})
-
-export const ComCheckbox = () => (
-  <div>
-    <div>
-      <div>默认</div>
-      <Checkbox
-        checked={store.checked}
-        onChange={() => {
-          store.setChecked()
-        }}
-      >
-        选中 checked true
-      </Checkbox>
-      <Checkbox
-        checked={!store.checked}
-        onChange={() => {
-          store.setChecked()
-        }}
-      >
-        checked false
-      </Checkbox>
-      <Checkbox
-        indeterminate
-        checked={store.checked}
-        onChange={() => {
-          store.setChecked()
-        }}
-      >
-        checked indeterminate
-      </Checkbox>
-    </div>
-    <div>
-      <div>disabled</div>
-      <Checkbox checked disabled>
-        checked true
-      </Checkbox>
-      <Checkbox disabled>checked false</Checkbox>
-      <Checkbox indeterminate disabled>
-        checked indeterminate
-      </Checkbox>
-    </div>
-  </div>
-)
-
-export const ComCheckboxGroup = () => (
-  <CheckboxGroup
-    name='city'
-    value={store.value}
-    onChange={(value) => {
-      store.setValue(value)
-    }}
-  >
-    {store.data.map((v) => (
-      <Checkbox key={v.value} value={v.value} disabled={v.disabled}>
-        {v.text}
-      </Checkbox>
-    ))}
-  </CheckboxGroup>
-)
-
-export const ComCheckboxGroupForGrid = () => {
-  const two = _.groupBy(store.data, (v) => Math.floor((v.value - 1) / 2))
-  console.log(two)
-  return (
-    <div>
-      <div>垂直布局</div>
-      <div>
-        <CheckboxGroup
-          value={store.value}
-          onChange={(value) => {
-            store.setValue(value)
-          }}
-        >
-          {_.map(store.data, (v) => (
-            <div key={v.value}>
-              <Checkbox value={v.value}>{v.text}</Checkbox>
-            </div>
-          ))}
-        </CheckboxGroup>
-      </div>
-      <div>两列</div>
-      <div style={{ width: '200px' }}>
-        <CheckboxGroup
-          value={store.value}
-          onChange={(value) => {
-            store.setValue(value)
-          }}
-        >
-          {_.map(two, (one) => (
-            <Row>
-              {_.map(one, (v) => (
-                <Col span={8} key={v.value}>
-                  <Checkbox value={v.value}>{v.text}</Checkbox>
-                </Col>
-              ))}
-            </Row>
-          ))}
-        </CheckboxGroup>
-      </div>
-    </div>
-  )
-}
-
-export default {
-  title: '表单/Checkbox',
-}
+import React from 'react'
+import Checkbox from './checkbox'
+import CheckboxGroup from './checkbox_group'
+import { observable } from 'mobx'
+import { Col, Row } from '../grid'
+import _ from 'lodash'
+
+const store = observable({
+  value: [1, 4],
+  data: [
+    {
+      value: 1,
+      text: '广州',
+    },
+    {
+      value: 2,
+      text: '深圳',
+      disabled: true,
+    },
+    {
+      value: 3,
+      text: '成都',
+    },
+    {
+      value: 4,
+      text: '东莞',
+      disabled: true,
+    },
+    {
+      value: 5,
+      text: '珠海',
+    },
+    {
+      value: 6,
+      text: '惠州',
+    },
+  ],
+  setValue(value: any) {
+    console.log(value)
+    this.value = value
+  },
+  checked: false,
+  setChecked() {
+    this.checked = !this.checked
+  },
+})
+
+export const ComCheckbox = () => (
+  <div>
+    <div>
+      <div>默认</div>
+      <Checkbox
+        checked={store.checked}
+        onChange={() => {
+          store.setChecked()
+        }}
+      >
+        选中 checked true
+      </Checkbox>
+      <Checkbox
+        checked={!store.checked}
+        onChange={() => {
+          store.setChecked()
+        }}
+      >
+        checked false
+      </Checkbox>
+      <Checkbox
+        indeterminate
+        checked={store.checked}
+        onChange={() => {
+          store.setChecked()
+        }}
+      >
+        checked indeterminate
+      </Checkbox>
+    </div>
+    <div>
+      <div>disabled</div>
+      <Checkbox checked disabled>
+        checked true
+      </Checkbox>
+      <Checkbox disabled>checked false</Checkbox>
+      <Checkbox indeterminate disabled>
+        checked indeterminate
+      </Checkbox>
+    </div>
+  </div>
+)
+
+export const ComCheckboxGroup = () => (
+  <CheckboxGroup
+    name='city'
+    value={store.value}
+    onChange={(value) => {
+      store.setValue(value)
+    }}
+  >
+    {store.data.map((v) => (
+      <Checkbox key={v.value} value={v.value} disabled={v.disabled}>
+        {v.text}
+      </Checkbox>
+    ))}
+  </CheckboxGroup>
+)
+
+export const ComCheckboxGroupForGrid = () => {
+  const two = _.groupBy(store.data, (v) => Math.floor((v.value - 1) / 2))
+  console.log(two)
+  return (
+    <div>
+      <div>垂直布局</div>
+      <div>
+        <CheckboxGroup
+          value={store.value}
+          onChange={(value) => {
+            store.setValue(value)
+          }}
+        >
+          {_.map(store.data, (v) => (
+            <div key={v.value}>
+              <Checkbox value={v.value}>{v.text}</Checkbox>
+            </div>
+          ))}
+        </CheckboxGroup>
+      </div>
+      <div>两列</div>
+      <div style={{ width: '200px' }}>
+        <CheckboxGroup
+          value={store.value}
+          onChange={(value) => {
+            store.setValue(value)
+          }}
+        >
+          {_.map(two, (one) => (
+            <Row>
+              {_.map(one, (v) => (
+                <Col span={8} key={v.value}>
+                  <Checkbox value={v.value}>{v.text}</Checkbox>
+                </Col>
+              ))}
+            </Row>
+          ))}
+        </CheckboxGroup>
+      </div>
+    </div>
+  )
+}
+
+export default {
+  title: '表单/Checkbox',
+}

package/src/component/checkbox/style.less

@@ -1,73 +1,73 @@
-.gm-checkbox {
-  font-weight: normal;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
-
-  .gm-checkbox-input {
-    display: none;
-
-    & + .gm-checkbox-span {
-      position: relative;
-      top: 2px;
-      background-color: #fff;
-      -webkit-appearance: none;
-      border: 1px solid var(--gm-color-default);
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      transition: background-color 0.1s linear;
-      border-radius: var(--gm-size-border-radius);
-    }
-
-    &:checked + .gm-checkbox-span {
-      border: 1px solid var(--gm-color-primary);
-      background-color: var(--gm-color-primary);
-
-      &::after {
-        content: '';
-        position: absolute;
-        width: 8px;
-        height: 5px;
-        top: 3px;
-        left: 2px;
-        border-left: 2px solid #fff;
-        border-bottom: 2px solid #fff;
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-  &.gm-checkbox-indeterminate {
-    .gm-checkbox-input + .gm-checkbox-span {
-      &::after {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        top: 2px;
-        left: 2px;
-        border: 4px solid var(--gm-color-primary);
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .gm-checkbox-input {
-      & + .gm-checkbox-span {
-        border-color: var(--gm-checkbox-radio-color-disabled);
-        background: var(--gm-color-bg-disabled);
-      }
-
-      &:checked + .gm-checkbox-span {
-        border-color: var(--gm-checkbox-radio-color-disabled);
-
-        &::after {
-          border-color: var(--gm-checkbox-radio-color-disabled);
-        }
-      }
-    }
-  }
-}
+.gm-checkbox {
+  font-weight: normal;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+
+  .gm-checkbox-input {
+    display: none;
+
+    & + .gm-checkbox-span {
+      position: relative;
+      top: 2px;
+      background-color: #fff;
+      -webkit-appearance: none;
+      border: 1px solid var(--gm-color-default);
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      transition: background-color 0.1s linear;
+      border-radius: var(--gm-size-border-radius);
+    }
+
+    &:checked + .gm-checkbox-span {
+      border: 1px solid var(--gm-color-primary);
+      background-color: var(--gm-color-primary);
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 5px;
+        top: 3px;
+        left: 2px;
+        border-left: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &.gm-checkbox-indeterminate {
+    .gm-checkbox-input + .gm-checkbox-span {
+      &::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        top: 2px;
+        left: 2px;
+        border: 4px solid var(--gm-color-primary);
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .gm-checkbox-input {
+      & + .gm-checkbox-span {
+        border-color: var(--gm-checkbox-radio-color-disabled);
+        background: var(--gm-color-bg-disabled);
+      }
+
+      &:checked + .gm-checkbox-span {
+        border-color: var(--gm-checkbox-radio-color-disabled);
+
+        &::after {
+          border-color: var(--gm-checkbox-radio-color-disabled);
+        }
+      }
+    }
+  }
+}

package/src/component/checkbox/util.ts

@@ -1,19 +1,19 @@
-import React from 'react'
-import _ from 'lodash'
-
-interface CheckboxGroupContext<V> {
-  /** 用来表示 Checkbox 被 CheckboxGroup 包着 */
-  isInCheckboxGroup: boolean
-  value: V[]
-  name?: string
-  onChange: (value: V) => void
-}
-
-const CheckboxGroupContext = React.createContext<CheckboxGroupContext<any>>({
-  isInCheckboxGroup: false,
-  value: [],
-  name: undefined,
-  onChange: _.noop,
-})
-
-export { CheckboxGroupContext }
+import React from 'react'
+import _ from 'lodash'
+
+interface CheckboxGroupContext<V> {
+  /** 用来表示 Checkbox 被 CheckboxGroup 包着 */
+  isInCheckboxGroup: boolean
+  value: V[]
+  name?: string
+  onChange: (value: V) => void
+}
+
+const CheckboxGroupContext = React.createContext<CheckboxGroupContext<any>>({
+  isInCheckboxGroup: false,
+  value: [],
+  name: undefined,
+  onChange: _.noop,
+})
+
+export { CheckboxGroupContext }

package/src/component/collapse/collapse.tsx

@@ -1,27 +1,27 @@
-import React, { FC, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
-  active: boolean
-}
-
-const Collapse: FC<CollapseProps> = ({ active, className, style, children, ...rest }) => {
-  return (
-    <div
-      {...rest}
-      className={classNames('gm-collapse', className)}
-      style={{
-        transition: active ? '0.5s ease all' : 'inherit',
-        height: active ? 'inherit' : '0',
-        opacity: active ? 1 : 0,
-        overflow: active ? 'inherit' : 'hidden',
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default Collapse
-export type { CollapseProps }
+import React, { FC, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+interface CollapseProps extends HTMLAttributes<HTMLDivElement> {
+  active: boolean
+}
+
+const Collapse: FC<CollapseProps> = ({ active, className, style, children, ...rest }) => {
+  return (
+    <div
+      {...rest}
+      className={classNames('gm-collapse', className)}
+      style={{
+        transition: active ? '0.5s ease all' : 'inherit',
+        height: active ? 'inherit' : '0',
+        opacity: active ? 1 : 0,
+        overflow: active ? 'inherit' : 'hidden',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Collapse
+export type { CollapseProps }

package/src/component/collapse/index.ts

@@ -1,2 +1,2 @@
-export { default as Collapse } from './collapse'
-export type { CollapseProps } from './collapse'
+export { default as Collapse } from './collapse'
+export type { CollapseProps } from './collapse'

package/src/component/collapse/stories.tsx

@@ -1,21 +1,21 @@
-import React from 'react'
-import Collapse from './collapse'
-import { observable } from 'mobx'
-
-const store = observable({
-  active: true,
-  toggleActive() {
-    this.active = !this.active
-  },
-})
-
-export const ComCollapse = () => (
-  <div>
-    <button onClick={() => store.toggleActive()}>toggle</button>
-    <Collapse active={store.active}>啦啦啦啦</Collapse>
-  </div>
-)
-
-export default {
-  title: '布局/Collapse',
-}
+import React from 'react'
+import Collapse from './collapse'
+import { observable } from 'mobx'
+
+const store = observable({
+  active: true,
+  toggleActive() {
+    this.active = !this.active
+  },
+})
+
+export const ComCollapse = () => (
+  <div>
+    <button onClick={() => store.toggleActive()}>toggle</button>
+    <Collapse active={store.active}>啦啦啦啦</Collapse>
+  </div>
+)
+
+export default {
+  title: '布局/Collapse',
+}

package/src/component/color_picker/color_list.ts

@@ -1,34 +1,34 @@
-import { getLocale } from '@gm-pc/locales'
-
-const COLOR_LIST = [
-  {
-    value: '#e02020',
-    text: getLocale('红色'),
-  },
-  {
-    value: '#fa6400',
-    text: getLocale('橙色'),
-  },
-  {
-    value: '#f7b500',
-    text: getLocale('黄色'),
-  },
-  {
-    value: '#6dd400',
-    text: getLocale('绿色'),
-  },
-  {
-    value: '#0091ff',
-    text: getLocale('蓝色'),
-  },
-  {
-    value: '#b620e0',
-    text: getLocale('紫色'),
-  },
-  {
-    value: '#6d7278',
-    text: getLocale('灰色'),
-  },
-]
-
-export default COLOR_LIST
+import { getLocale } from '@gm-pc/locales'
+
+const COLOR_LIST = [
+  {
+    value: '#e02020',
+    text: getLocale('红色'),
+  },
+  {
+    value: '#fa6400',
+    text: getLocale('橙色'),
+  },
+  {
+    value: '#f7b500',
+    text: getLocale('黄色'),
+  },
+  {
+    value: '#6dd400',
+    text: getLocale('绿色'),
+  },
+  {
+    value: '#0091ff',
+    text: getLocale('蓝色'),
+  },
+  {
+    value: '#b620e0',
+    text: getLocale('紫色'),
+  },
+  {
+    value: '#6d7278',
+    text: getLocale('灰色'),
+  },
+]
+
+export default COLOR_LIST