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

package/src/component/switch/style.less

@@ -1,60 +1,60 @@
-.gm-switch {
-  position: relative;
-  -webkit-appearance: none;
-  outline: none;
-  height: var(--gm-switch-size-height);
-  border-radius: calc(var(--gm-switch-size-height) / 2);
-  background-color: var(--gm-color-bg-switch);
-
-  &::before {
-    position: absolute;
-    content: '';
-    top: 1px;
-    left: 1px;
-    width: calc(var(--gm-switch-size-height) - 2px);
-    height: calc(var(--gm-switch-size-height) - 2px);
-    border-radius: 50%;
-    background-color: #fff;
-    transition: all 0.35s;
-  }
-
-  &::after {
-    content: attr(data-text);
-    color: white;
-    padding-left: calc(var(--gm-switch-size-height) + 2px);
-    line-height: calc(var(--gm-switch-size-height) + 2px);
-    transition: all 0.35s;
-  }
-}
-
-input.gm-switch {
-  margin: 0;
-}
-
-.gm-switch:checked {
-  background-color: var(--gm-color-primary);
-
-  &::before {
-    left: 100%;
-    transform: translateX(-100%);
-    margin-left: -1px;
-  }
-
-  &::after {
-    padding-left: 6px;
-  }
-
-  .gmDisabledWith();
-
-  &.gm-switch-primary {
-    background-color: var(--gm-color-primary);
-  }
-
-  &.gm-switch-success {
-    background-color: var(--gm-color-success);
-  }
-
-  &.gm-switch-danger {
-    background-color: var(--gm-color-bg-danger);
-  }
-}
+.gm-switch {
+  position: relative;
+  -webkit-appearance: none;
+  outline: none;
+  height: var(--gm-switch-size-height);
+  border-radius: calc(var(--gm-switch-size-height) / 2);
+  background-color: var(--gm-color-bg-switch);
+
+  &::before {
+    position: absolute;
+    content: '';
+    top: 1px;
+    left: 1px;
+    width: calc(var(--gm-switch-size-height) - 2px);
+    height: calc(var(--gm-switch-size-height) - 2px);
+    border-radius: 50%;
+    background-color: #fff;
+    transition: all 0.35s;
+  }
+
+  &::after {
+    content: attr(data-text);
+    color: white;
+    padding-left: calc(var(--gm-switch-size-height) + 2px);
+    line-height: calc(var(--gm-switch-size-height) + 2px);
+    transition: all 0.35s;
+  }
+}
+
+input.gm-switch {
+  margin: 0;
+}
+
+.gm-switch:checked {
+  background-color: var(--gm-color-primary);
+
+  &::before {
+    left: 100%;
+    transform: translateX(-100%);
+    margin-left: -1px;
+  }
+
+  &::after {
+    padding-left: 6px;
+  }
+
+  .gmDisabledWith();
+
+  &.gm-switch-primary {
+    background-color: var(--gm-color-primary);
+  }
+
+  &.gm-switch-success {
+    background-color: var(--gm-color-success);
+  }
+
+  &.gm-switch-danger {
+    background-color: var(--gm-color-bg-danger);
+  }
+}

package/src/component/switch/switch.tsx

@@ -1,127 +1,127 @@
-import React, { CSSProperties, Component, ChangeEvent, createRef } from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-interface SwitchProps {
-  type?: string
-  checked?: boolean
-  disabled?: boolean
-  on?: string
-  off?: string
-  onChange?(checked: boolean): void
-  className?: string
-  style?: CSSProperties
-}
-
-interface SwitchState {
-  checked: boolean
-  labelWidth: number | null
-  isReady: boolean
-}
-
-class Switch extends Component<SwitchProps, SwitchState> {
-  static displayName = 'Switch'
-  static defaultProps = {
-    type: 'default',
-    on: '',
-    off: '',
-    onChange: _.noop,
-  }
-
-  readonly state: SwitchState = {
-    checked: this.props.checked,
-    labelWidth: null,
-    isReady: false,
-  }
-
-  private _inputOffRef = createRef<HTMLInputElement>()
-  private _inputOnRef = createRef<HTMLInputElement>()
-
-  componentDidMount() {
-    // 初始化后开始计算on和off的宽度，取较大值作为switch开关的宽度
-    const labelWidth =
-      this._inputOffRef.current!.offsetWidth >= this._inputOnRef.current!.offsetWidth
-        ? this._inputOffRef.current!.offsetWidth + 7
-        : this._inputOnRef.current!.offsetWidth + 7
-    this.setState({
-      labelWidth: Math.max(labelWidth, 34),
-      isReady: true,
-    })
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: Readonly<SwitchProps>) {
-    if ('checked' in nextProps) {
-      this.setState({
-        checked: nextProps.checked,
-      })
-    }
-  }
-
-  setChecked(checked: boolean): void {
-    if (!('checked' in this.props)) {
-      this.setState({
-        checked,
-      })
-    }
-    const { onChange } = this.props
-    onChange && onChange(checked)
-  }
-
-  private _handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    if (this.props.disabled) {
-      return
-    }
-    this.setChecked(event.target.checked)
-  }
-
-  render() {
-    const {
-      className, // checked, onChange, // eslint-disable-line
-      type,
-      disabled,
-      on,
-      off,
-      ...rest
-    } = this.props
-
-    let style: CSSProperties = {
-      width: this.state.labelWidth as number,
-    }
-
-    if ('style' in rest) {
-      style = Object.assign({}, style, rest.style)
-    }
-
-    return (
-      <>
-        <input
-          {...rest}
-          data-text={this.state.checked ? on : off}
-          ref={this._inputOffRef}
-          className={classNames('gm-switch gm-switch-' + type, className, {
-            disabled,
-          })}
-          style={style}
-          data-attr={this.state.labelWidth}
-          disabled={disabled}
-          type='checkbox'
-          checked={this.state.checked}
-          onChange={this._handleChange}
-        />
-        {!this.state.isReady && (
-          <input
-            data-text={this.state.checked ? off : on}
-            ref={this._inputOnRef}
-            className='gm-switch'
-            type='checkbox'
-            style={{ position: 'fixed', visibility: 'hidden' }}
-          />
-        )}
-      </>
-    )
-  }
-}
-
-export default Switch
-export type { SwitchProps }
+import React, { CSSProperties, Component, ChangeEvent, createRef } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+interface SwitchProps {
+  type?: string
+  checked?: boolean
+  disabled?: boolean
+  on?: string
+  off?: string
+  onChange?(checked: boolean): void
+  className?: string
+  style?: CSSProperties
+}
+
+interface SwitchState {
+  checked: boolean
+  labelWidth: number | null
+  isReady: boolean
+}
+
+class Switch extends Component<SwitchProps, SwitchState> {
+  static displayName = 'Switch'
+  static defaultProps = {
+    type: 'default',
+    on: '',
+    off: '',
+    onChange: _.noop,
+  }
+
+  readonly state: SwitchState = {
+    checked: this.props.checked,
+    labelWidth: null,
+    isReady: false,
+  }
+
+  private _inputOffRef = createRef<HTMLInputElement>()
+  private _inputOnRef = createRef<HTMLInputElement>()
+
+  componentDidMount() {
+    // 初始化后开始计算on和off的宽度，取较大值作为switch开关的宽度
+    const labelWidth =
+      this._inputOffRef.current!.offsetWidth >= this._inputOnRef.current!.offsetWidth
+        ? this._inputOffRef.current!.offsetWidth + 7
+        : this._inputOnRef.current!.offsetWidth + 7
+    this.setState({
+      labelWidth: Math.max(labelWidth, 34),
+      isReady: true,
+    })
+  }
+
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps: Readonly<SwitchProps>) {
+    if ('checked' in nextProps) {
+      this.setState({
+        checked: nextProps.checked,
+      })
+    }
+  }
+
+  setChecked(checked: boolean): void {
+    if (!('checked' in this.props)) {
+      this.setState({
+        checked,
+      })
+    }
+    const { onChange } = this.props
+    onChange && onChange(checked)
+  }
+
+  private _handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    if (this.props.disabled) {
+      return
+    }
+    this.setChecked(event.target.checked)
+  }
+
+  render() {
+    const {
+      className, // checked, onChange, // eslint-disable-line
+      type,
+      disabled,
+      on,
+      off,
+      ...rest
+    } = this.props
+
+    let style: CSSProperties = {
+      width: this.state.labelWidth as number,
+    }
+
+    if ('style' in rest) {
+      style = Object.assign({}, style, rest.style)
+    }
+
+    return (
+      <>
+        <input
+          {...rest}
+          data-text={this.state.checked ? on : off}
+          ref={this._inputOffRef}
+          className={classNames('gm-switch gm-switch-' + type, className, {
+            disabled,
+          })}
+          style={style}
+          data-attr={this.state.labelWidth}
+          disabled={disabled}
+          type='checkbox'
+          checked={this.state.checked}
+          onChange={this._handleChange}
+        />
+        {!this.state.isReady && (
+          <input
+            data-text={this.state.checked ? off : on}
+            ref={this._inputOnRef}
+            className='gm-switch'
+            type='checkbox'
+            style={{ position: 'fixed', visibility: 'hidden' }}
+          />
+        )}
+      </>
+    )
+  }
+}
+
+export default Switch
+export type { SwitchProps }

package/src/component/table_select/index.ts

@@ -1,2 +1,2 @@
-export { default as TableSelect } from './table_select'
-export type { TableSelectProps, TableSelectDataItem, TableSelectColumn } from './types'
+export { default as TableSelect } from './table_select'
+export type { TableSelectProps, TableSelectDataItem, TableSelectColumn } from './types'

package/src/component/table_select/stories.tsx

@@ -1,97 +1,97 @@
-import React from 'react'
-import TableSelect from './table_select'
-import { observable } from 'mobx'
-import _ from 'lodash'
-
-const data = [
-  {
-    purchase_price_limit: null,
-    std_unit_name: '斤',
-    sale_ratio: 3,
-    category_id_1: 'A3978',
-    settle_supplier_name: '水果供应商',
-    spu_id: 'C874502',
-    sku_id: 'D13944575',
-    sale_unit_name: '包',
-    category_id_2: 'B19074',
-    category_id_2_name: '甘蓝类',
-    settle_supplier_id: 'T13251',
-    sku_name: '大白菜',
-    station_id: 'T7936',
-    category_id_1_name: '蔬菜',
-    max_stock_unit_price: null,
-  },
-  {
-    purchase_price_limit: null,
-    std_unit_name: '斤',
-    sale_ratio: 1,
-    category_id_1: 'A3978',
-    settle_supplier_name: '水果供应商',
-    spu_id: 'C874502',
-    sku_id: 'D3628124',
-    sale_unit_name: '斤',
-    category_id_2: 'B19074',
-    category_id_2_name: '甘蓝类',
-    settle_supplier_id: 'T13251',
-    sku_name: '小白菜',
-    station_id: 'T7936',
-    category_id_1_name: '蔬菜',
-    max_stock_unit_price: null,
-  },
-]
-
-const columns = [
-  {
-    Header: 'id',
-    accessor: 'original.sku_id',
-    width: 100,
-  },
-  {
-    Header: '名字',
-    accessor: 'original.sku_name',
-    width: 100,
-  },
-  {
-    Header: '供应商',
-    accessor: 'original.settle_supplier_name',
-    width: 100,
-  },
-  {
-    Header: '加粗',
-    accessor: 'original.sku_name',
-    width: 100,
-    Cell: (cellProps: any) => {
-      return <strong>{cellProps.original.original.sku_name}</strong>
-    },
-  },
-]
-
-const mapData = _.map(data, (v) => ({
-  value: v.sku_id,
-  text: v.sku_name,
-  original: v,
-}))
-
-const store = observable({
-  selected: mapData[0],
-  setSelect(selected: any) {
-    this.selected = selected
-  },
-})
-
-export const ComTableSelect = () => (
-  <div style={{ width: '600px' }}>
-    <TableSelect
-      data={mapData}
-      columns={columns}
-      selected={store.selected}
-      onSelect={(selected) => {
-        store.setSelect(selected)
-      }}
-    />
-  </div>
-)
-
-export default {
-  title: '表单/TableSelect',
-}
+import React from 'react'
+import TableSelect from './table_select'
+import { observable } from 'mobx'
+import _ from 'lodash'
+
+const data = [
+  {
+    purchase_price_limit: null,
+    std_unit_name: '斤',
+    sale_ratio: 3,
+    category_id_1: 'A3978',
+    settle_supplier_name: '水果供应商',
+    spu_id: 'C874502',
+    sku_id: 'D13944575',
+    sale_unit_name: '包',
+    category_id_2: 'B19074',
+    category_id_2_name: '甘蓝类',
+    settle_supplier_id: 'T13251',
+    sku_name: '大白菜',
+    station_id: 'T7936',
+    category_id_1_name: '蔬菜',
+    max_stock_unit_price: null,
+  },
+  {
+    purchase_price_limit: null,
+    std_unit_name: '斤',
+    sale_ratio: 1,
+    category_id_1: 'A3978',
+    settle_supplier_name: '水果供应商',
+    spu_id: 'C874502',
+    sku_id: 'D3628124',
+    sale_unit_name: '斤',
+    category_id_2: 'B19074',
+    category_id_2_name: '甘蓝类',
+    settle_supplier_id: 'T13251',
+    sku_name: '小白菜',
+    station_id: 'T7936',
+    category_id_1_name: '蔬菜',
+    max_stock_unit_price: null,
+  },
+]
+
+const columns = [
+  {
+    Header: 'id',
+    accessor: 'original.sku_id',
+    width: 100,
+  },
+  {
+    Header: '名字',
+    accessor: 'original.sku_name',
+    width: 100,
+  },
+  {
+    Header: '供应商',
+    accessor: 'original.settle_supplier_name',
+    width: 100,
+  },
+  {
+    Header: '加粗',
+    accessor: 'original.sku_name',
+    width: 100,
+    Cell: (cellProps: any) => {
+      return <strong>{cellProps.original.original.sku_name}</strong>
+    },
+  },
+]
+
+const mapData = _.map(data, (v) => ({
+  value: v.sku_id,
+  text: v.sku_name,
+  original: v,
+}))
+
+const store = observable({
+  selected: mapData[0],
+  setSelect(selected: any) {
+    this.selected = selected
+  },
+})
+
+export const ComTableSelect = () => (
+  <div style={{ width: '600px' }}>
+    <TableSelect
+      data={mapData}
+      columns={columns}
+      selected={store.selected}
+      onSelect={(selected) => {
+        store.setSelect(selected)
+      }}
+    />
+  </div>
+)
+
+export default {
+  title: '表单/TableSelect',
+}

package/src/component/table_select/style.less

@@ -1,20 +1,20 @@
-.gm-table-select-popup {
-  .gm-list.gm-list-group {
-    .gm-list-label {
-      background: var(--gm-table-color-bg-head);
-    }
-
-    .gm-list-item {
-      padding: 8px 10px 5px 10px;
-    }
-  }
-
-  .gm-table-select-list-head {
-    min-height: 40px;
-  }
-
-  .gm-table-select-list-item {
-    min-height: 40px;
-    position: relative;
-  }
-}
+.gm-table-select-popup {
+  .gm-list.gm-list-group {
+    .gm-list-label {
+      background: var(--gm-table-color-bg-head);
+    }
+
+    .gm-list-item {
+      padding: 8px 10px 5px 10px;
+    }
+  }
+
+  .gm-table-select-list-head {
+    min-height: 40px;
+  }
+
+  .gm-table-select-list-item {
+    min-height: 40px;
+    position: relative;
+  }
+}