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

package/src/component/card/stories.tsx

@@ -1,90 +1,90 @@
-import React from 'react'
-
-import Card from './card'
-
-const handleClick = () => {
-  console.log('click!')
-}
-
-export const ComCard = () => (
-  <>
-    <Card
-      className='gm-margin-10'
-      title='标题标题标题标题标题标题'
-      labelText='默认'
-      labelType='primary'
-      style={{ width: '250px' }}
-      onClick={handleClick}
-      actions={[
-        {
-          text: '功能1',
-          onClick: () => {
-            console.log('功能1')
-          },
-        },
-        {
-          text: '功能2',
-          onClick: () => {
-            console.log('功能2')
-          },
-        },
-      ]}
-    >
-      <div>描述1</div>
-      <div>描述2</div>
-      <div>描述3</div>
-    </Card>
-    <Card
-      className='gm-margin-10'
-      title='标题标题标题标题标题标题'
-      topLabelText='已激活'
-      labelText='默认'
-      labelType='primary'
-      onClick={handleClick}
-      actions={[
-        {
-          text: '功能1',
-          onClick: () => {
-            console.log('功能1')
-          },
-        },
-      ]}
-      style={{ width: '250px' }}
-    >
-      <div>描述1</div>
-      <div>描述2</div>
-      <div>描述3</div>
-    </Card>
-    <Card
-      className='gm-margin-10'
-      title='标题标题标题标题标题标题'
-      inactive
-      topLabelText='未激活'
-      labelText='默认'
-      labelType='primary'
-      onClick={handleClick}
-      actions={[
-        {
-          text: '功能1',
-          onClick: () => {
-            console.log('功能1')
-          },
-        },
-      ]}
-      style={{ width: '250px' }}
-    >
-      <div>描述1</div>
-      <div>描述2</div>
-      <div>描述3</div>
-    </Card>
-    <Card className='gm-margin-10' style={{ width: '250px' }} onClick={handleClick}>
-      <div>描述1</div>
-      <div>描述2</div>
-      <div>描述3</div>
-    </Card>
-  </>
-)
-
-export default {
-  title: '布局/Card',
-}
+import React from 'react'
+
+import Card from './card'
+
+const handleClick = () => {
+  console.log('click!')
+}
+
+export const ComCard = () => (
+  <>
+    <Card
+      className='gm-margin-10'
+      title='标题标题标题标题标题标题'
+      labelText='默认'
+      labelType='primary'
+      style={{ width: '250px' }}
+      onClick={handleClick}
+      actions={[
+        {
+          text: '功能1',
+          onClick: () => {
+            console.log('功能1')
+          },
+        },
+        {
+          text: '功能2',
+          onClick: () => {
+            console.log('功能2')
+          },
+        },
+      ]}
+    >
+      <div>描述1</div>
+      <div>描述2</div>
+      <div>描述3</div>
+    </Card>
+    <Card
+      className='gm-margin-10'
+      title='标题标题标题标题标题标题'
+      topLabelText='已激活'
+      labelText='默认'
+      labelType='primary'
+      onClick={handleClick}
+      actions={[
+        {
+          text: '功能1',
+          onClick: () => {
+            console.log('功能1')
+          },
+        },
+      ]}
+      style={{ width: '250px' }}
+    >
+      <div>描述1</div>
+      <div>描述2</div>
+      <div>描述3</div>
+    </Card>
+    <Card
+      className='gm-margin-10'
+      title='标题标题标题标题标题标题'
+      inactive
+      topLabelText='未激活'
+      labelText='默认'
+      labelType='primary'
+      onClick={handleClick}
+      actions={[
+        {
+          text: '功能1',
+          onClick: () => {
+            console.log('功能1')
+          },
+        },
+      ]}
+      style={{ width: '250px' }}
+    >
+      <div>描述1</div>
+      <div>描述2</div>
+      <div>描述3</div>
+    </Card>
+    <Card className='gm-margin-10' style={{ width: '250px' }} onClick={handleClick}>
+      <div>描述1</div>
+      <div>描述2</div>
+      <div>描述3</div>
+    </Card>
+  </>
+)
+
+export default {
+  title: '布局/Card',
+}

package/src/component/card/style.less

@@ -1,126 +1,126 @@
-.gm-card {
-  border: solid 1px var(--gm-color-border);
-  border-radius: 3px;
-  cursor: pointer;
-
-  .gm-card-header {
-    width: 100%;
-    border-bottom: solid 1px var(--gm-color-border);
-    background-color: var(--gm-color-bg-back);
-    padding: 0px 10px;
-    font-size: 14px;
-    position: relative;
-
-    .gm-card-header-title {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      word-break: break-all;
-    }
-
-    .gm-card-header-action-icon {
-      font-size: 18px;
-      position: absolute;
-      right: 10px;
-    }
-  }
-
-  .gm-card-header-inactive {
-    .gm-card-label {
-      background-color: var(--gm-card-bg-inactive);
-      color: var(--gm-color-default);
-    }
-
-    .gm-label-container-bottom {
-      border-left: 20px solid var(--gm-card-bg-inactive);
-      border-right: 20px solid var(--gm-card-bg-inactive);
-    }
-  }
-
-  .gm-label-container {
-    margin-right: 8px;
-    height: 20px;
-    position: relative;
-
-  }
-
-  .gm-label-container-bottom {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    content: ' ';
-    height: 5px;
-    border-left: 20px solid var(--gm-color-primary);
-    border-right: 20px solid var(--gm-color-primary);
-    border-bottom: 5px solid transparent;
-  }
-
-  .gm-card-label {
-    position: relative;
-    font-size: 12px;
-    min-width: 40px;
-    height: auto;
-    text-align: center;
-    color: white;
-    padding: 0 2px;
-    z-index: 1;
-    background-color: var(--gm-color-primary);
-  }
-
-  &:hover {
-    border-color: var(--gm-color-border-primary);
-
-    .gm-card-header {
-      border-color: var(--gm-color-border-primary);
-      background-color: var(--gm-color-bg-primary-light);
-      color: var(--gm-color-primary);
-
-    }
-
-    .gm-card-header-inactive {
-      color: var(--gm-color-default);
-      background-color: var(--gm-color-bg-back);
-    }
-  }
-}
-
-// ==== FormCard ====
-.gm-new-card-style {
-  vertical-align: middle;
-  background-color: #fff;
-
-  .gm-new-card-head {
-    min-height: 48px;
-    padding: 0 24px;
-    margin-bottom: -1px;
-    font-size: 14px;
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.85);
-    background: 0 0;
-    border-bottom: 1px solid #f0f0f0;
-    border-radius: 2px 2px 0 0;
-
-    .gm-new-card-title {
-      display: inline-block;
-      flex: 1;
-      padding: 16px 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .gm-new-card-extra {
-      float: right;
-      padding: 12px 0;
-    }
-  }
-
-  .gm-new-card-body {
-    min-height: 100px;
-    padding: 16px 24px;
-  }
-}
-
-.gm-new-card-border {
-  border: 1px solid #ccc;
+.gm-card {
+  border: solid 1px var(--gm-color-border);
+  border-radius: 3px;
+  cursor: pointer;
+
+  .gm-card-header {
+    width: 100%;
+    border-bottom: solid 1px var(--gm-color-border);
+    background-color: var(--gm-color-bg-back);
+    padding: 0px 10px;
+    font-size: 14px;
+    position: relative;
+
+    .gm-card-header-title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: break-all;
+    }
+
+    .gm-card-header-action-icon {
+      font-size: 18px;
+      position: absolute;
+      right: 10px;
+    }
+  }
+
+  .gm-card-header-inactive {
+    .gm-card-label {
+      background-color: var(--gm-card-bg-inactive);
+      color: var(--gm-color-default);
+    }
+
+    .gm-label-container-bottom {
+      border-left: 20px solid var(--gm-card-bg-inactive);
+      border-right: 20px solid var(--gm-card-bg-inactive);
+    }
+  }
+
+  .gm-label-container {
+    margin-right: 8px;
+    height: 20px;
+    position: relative;
+
+  }
+
+  .gm-label-container-bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    content: ' ';
+    height: 5px;
+    border-left: 20px solid var(--gm-color-primary);
+    border-right: 20px solid var(--gm-color-primary);
+    border-bottom: 5px solid transparent;
+  }
+
+  .gm-card-label {
+    position: relative;
+    font-size: 12px;
+    min-width: 40px;
+    height: auto;
+    text-align: center;
+    color: white;
+    padding: 0 2px;
+    z-index: 1;
+    background-color: var(--gm-color-primary);
+  }
+
+  &:hover {
+    border-color: var(--gm-color-border-primary);
+
+    .gm-card-header {
+      border-color: var(--gm-color-border-primary);
+      background-color: var(--gm-color-bg-primary-light);
+      color: var(--gm-color-primary);
+
+    }
+
+    .gm-card-header-inactive {
+      color: var(--gm-color-default);
+      background-color: var(--gm-color-bg-back);
+    }
+  }
+}
+
+// ==== FormCard ====
+.gm-new-card-style {
+  vertical-align: middle;
+  background-color: #fff;
+
+  .gm-new-card-head {
+    min-height: 48px;
+    padding: 0 24px;
+    margin-bottom: -1px;
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    background: 0 0;
+    border-bottom: 1px solid #f0f0f0;
+    border-radius: 2px 2px 0 0;
+
+    .gm-new-card-title {
+      display: inline-block;
+      flex: 1;
+      padding: 16px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .gm-new-card-extra {
+      float: right;
+      padding: 12px 0;
+    }
+  }
+
+  .gm-new-card-body {
+    min-height: 100px;
+    padding: 16px 24px;
+  }
+}
+
+.gm-new-card-border {
+  border: 1px solid #ccc;
 }

package/src/component/checkbox/checkbox.tsx

@@ -1,75 +1,75 @@
-import React, { ChangeEvent, useContext, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-import { CheckboxGroupContext } from './util'
-
-interface CheckboxProps<V> extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> {
-  value?: V
-  checked?: boolean
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
-  disabled?: boolean
-  indeterminate?: boolean
-  name?: string
-}
-
-function Checkbox<V = any>({
-  value,
-  checked,
-  onChange,
-  children,
-  name,
-  disabled,
-  indeterminate,
-  className,
-  style,
-  ...rest
-}: CheckboxProps<V>) {
-  const checkBoxGroupContext = useContext(CheckboxGroupContext)
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange && onChange(event)
-
-    // 代表在 CheckBoxGroup 下
-    if (checkBoxGroupContext.isInCheckboxGroup) {
-      checkBoxGroupContext.onChange(value!)
-    }
-  }
-
-  let oName = name
-  let oChecked = checked
-
-  if (checkBoxGroupContext.isInCheckboxGroup) {
-    oName = checkBoxGroupContext.name
-    oChecked = checkBoxGroupContext.value?.includes(value!)
-    if (checked !== undefined || name !== undefined || onChange !== undefined) {
-      console.warn('在 CheckBoxGroup 下，不能提供 checked name onChange')
-    }
-  }
-
-  return (
-    <label
-      {...rest}
-      className={classNames(
-        'gm-checkbox',
-        {
-          'gm-checkbox-indeterminate': !checked && indeterminate,
-          disabled,
-        },
-        className
-      )}
-    >
-      <input
-        className='gm-checkbox-input'
-        type='checkbox'
-        name={oName}
-        checked={oChecked}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      <span className='gm-checkbox-span' />
-      {children && <span className='gm-padding-lr-5'>{children}</span>}
-    </label>
-  )
-}
-
-export default Checkbox
-export type { CheckboxProps }
+import React, { ChangeEvent, useContext, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+import { CheckboxGroupContext } from './util'
+
+interface CheckboxProps<V> extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> {
+  value?: V
+  checked?: boolean
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+  indeterminate?: boolean
+  name?: string
+}
+
+function Checkbox<V = any>({
+  value,
+  checked,
+  onChange,
+  children,
+  name,
+  disabled,
+  indeterminate,
+  className,
+  style,
+  ...rest
+}: CheckboxProps<V>) {
+  const checkBoxGroupContext = useContext(CheckboxGroupContext)
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(event)
+
+    // 代表在 CheckBoxGroup 下
+    if (checkBoxGroupContext.isInCheckboxGroup) {
+      checkBoxGroupContext.onChange(value!)
+    }
+  }
+
+  let oName = name
+  let oChecked = checked
+
+  if (checkBoxGroupContext.isInCheckboxGroup) {
+    oName = checkBoxGroupContext.name
+    oChecked = checkBoxGroupContext.value?.includes(value!)
+    if (checked !== undefined || name !== undefined || onChange !== undefined) {
+      console.warn('在 CheckBoxGroup 下，不能提供 checked name onChange')
+    }
+  }
+
+  return (
+    <label
+      {...rest}
+      className={classNames(
+        'gm-checkbox',
+        {
+          'gm-checkbox-indeterminate': !checked && indeterminate,
+          disabled,
+        },
+        className
+      )}
+    >
+      <input
+        className='gm-checkbox-input'
+        type='checkbox'
+        name={oName}
+        checked={oChecked}
+        disabled={disabled}
+        onChange={handleChange}
+      />
+      <span className='gm-checkbox-span' />
+      {children && <span className='gm-padding-lr-5'>{children}</span>}
+    </label>
+  )
+}
+
+export default Checkbox
+export type { CheckboxProps }

package/src/component/checkbox/checkbox_group.tsx

@@ -1,51 +1,51 @@
-import React, { CSSProperties, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { CheckboxGroupContext } from './util'
-import Checkbox, { CheckboxProps } from './checkbox'
-interface CheckboxGroupProps<V> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  value?: V[]
-  onChange?: (value: V[]) => void
-  name?: string
-  className?: string
-  style?: CSSProperties
-  options?: CheckboxProps<V>[]
-}
-
-function CheckboxGroup<V = any>({
-  value = [],
-  onChange = _.noop,
-  name,
-  className,
-  options = [],
-  children,
-  ...rest
-}: CheckboxGroupProps<V>) {
-  const handleChange = (cValue: V): void => {
-    if (value?.includes(cValue)) {
-      onChange(_.without(value, cValue))
-    } else {
-      onChange([...value, cValue])
-    }
-  }
-  const isOptions = options.length > 0
-  return (
-    <div {...rest} className={classNames('gm-checkbox-group', className)}>
-      <CheckboxGroupContext.Provider
-        value={{
-          isInCheckboxGroup: true,
-          value,
-          onChange: handleChange,
-          name,
-        }}
-      >
-        {isOptions
-          ? options.map((option, index) => <Checkbox {...option} key={index} />)
-          : children}
-      </CheckboxGroupContext.Provider>
-    </div>
-  )
-}
-
-export default CheckboxGroup
-export type { CheckboxGroupProps }
+import React, { CSSProperties, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { CheckboxGroupContext } from './util'
+import Checkbox, { CheckboxProps } from './checkbox'
+interface CheckboxGroupProps<V> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value?: V[]
+  onChange?: (value: V[]) => void
+  name?: string
+  className?: string
+  style?: CSSProperties
+  options?: CheckboxProps<V>[]
+}
+
+function CheckboxGroup<V = any>({
+  value = [],
+  onChange = _.noop,
+  name,
+  className,
+  options = [],
+  children,
+  ...rest
+}: CheckboxGroupProps<V>) {
+  const handleChange = (cValue: V): void => {
+    if (value?.includes(cValue)) {
+      onChange(_.without(value, cValue))
+    } else {
+      onChange([...value, cValue])
+    }
+  }
+  const isOptions = options.length > 0
+  return (
+    <div {...rest} className={classNames('gm-checkbox-group', className)}>
+      <CheckboxGroupContext.Provider
+        value={{
+          isInCheckboxGroup: true,
+          value,
+          onChange: handleChange,
+          name,
+        }}
+      >
+        {isOptions
+          ? options.map((option, index) => <Checkbox {...option} key={index} />)
+          : children}
+      </CheckboxGroupContext.Provider>
+    </div>
+  )
+}
+
+export default CheckboxGroup
+export type { CheckboxGroupProps }