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

package/src/component/radio/radio_group.tsx

@@ -1,48 +1,48 @@
-import React, { CSSProperties, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { RadioGroupContext } from './util'
-import Radio, { RadioProps } from './radio'
-interface RadioGroupProps<V> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  value?: V
-  onChange?: (value: V) => void
-  name?: string
-  options?: RadioProps<V>[]
-  className?: string
-  style?: CSSProperties
-}
-
-function RadioGroup<V = any>({
-  value,
-  onChange = _.noop,
-  name,
-  options = [],
-  className,
-  children,
-  ...rest
-}: RadioGroupProps<V>) {
-  const handleChange = (rValue: V): void => {
-    console.log(value)
-    onChange(rValue)
-  }
-  const isOptions = options?.length > 0
-  return (
-    <div {...rest} className={classNames('gm-radio-group', className)}>
-      <RadioGroupContext.Provider
-        value={{
-          isInRadioGroup: true,
-          value,
-          onChange: handleChange,
-          name,
-        }}
-      >
-        {isOptions
-          ? options.map((option, index) => <Radio {...option} key={index} />)
-          : children}
-      </RadioGroupContext.Provider>
-    </div>
-  )
-}
-
-export default RadioGroup
-export type { RadioGroupProps }
+import React, { CSSProperties, HTMLAttributes } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { RadioGroupContext } from './util'
+import Radio, { RadioProps } from './radio'
+interface RadioGroupProps<V> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value?: V
+  onChange?: (value: V) => void
+  name?: string
+  options?: RadioProps<V>[]
+  className?: string
+  style?: CSSProperties
+}
+
+function RadioGroup<V = any>({
+  value,
+  onChange = _.noop,
+  name,
+  options = [],
+  className,
+  children,
+  ...rest
+}: RadioGroupProps<V>) {
+  const handleChange = (rValue: V): void => {
+    console.log(value)
+    onChange(rValue)
+  }
+  const isOptions = options?.length > 0
+  return (
+    <div {...rest} className={classNames('gm-radio-group', className)}>
+      <RadioGroupContext.Provider
+        value={{
+          isInRadioGroup: true,
+          value,
+          onChange: handleChange,
+          name,
+        }}
+      >
+        {isOptions
+          ? options.map((option, index) => <Radio {...option} key={index} />)
+          : children}
+      </RadioGroupContext.Provider>
+    </div>
+  )
+}
+
+export default RadioGroup
+export type { RadioGroupProps }

package/src/component/radio/stories.tsx

@@ -1,103 +1,103 @@
-import React from 'react'
-import Radio from './radio'
-import RadioGroup from './radio_group'
-import _ from 'lodash'
-import { observable } from 'mobx'
-import { Col, Row } from '../grid'
-
-const store = observable({
-  value: 3,
-  data: [
-    {
-      value: 1,
-      text: '广州',
-    },
-    {
-      value: 2,
-      text: '深圳',
-    },
-    {
-      value: 3,
-      text: '成都',
-      disabled: true,
-    },
-  ],
-  setValue(value: any) {
-    console.log(value)
-    this.value = value
-  },
-  checked: false,
-  setChecked(checked: any) {
-    console.log('setChecked', checked)
-    this.checked = checked
-  },
-})
-
-export const ComRadio = () => (
-  <div>
-    <div>
-      <h1>默认</h1>
-      <Radio
-        checked={store.checked}
-        onChange={() => {
-          store.setChecked(!store.checked)
-        }}
-      >
-        radio
-      </Radio>
-      <Radio
-        checked={!store.checked}
-        onChange={() => {
-          store.setChecked(!store.checked)
-        }}
-      >
-        radio
-      </Radio>
-    </div>
-    <div>
-      <h1>disabled</h1>
-      <Radio checked disabled>
-        radio
-      </Radio>
-      <Radio disabled>radio</Radio>
-    </div>
-    <div>更多同 checkbox</div>
-  </div>
-)
-
-export const ComRadioGroupForGrid = () => {
-  const two = _.groupBy(store.data, (v) => Math.floor((v.value - 1) / 2))
-
-  return (
-    <div>
-      <div>垂直布局</div>
-      <div>
-        <RadioGroup value={store.value} onChange={(value) => store.setValue(value)}>
-          {_.map(store.data, (v) => (
-            <div key={v.value}>
-              <Radio value={v.value}>{v.text}</Radio>
-            </div>
-          ))}
-        </RadioGroup>
-      </div>
-      <div>两列</div>
-      <div style={{ width: '200px' }}>
-        <RadioGroup value={store.value} onChange={(value) => store.setValue(value)}>
-          {_.map(two, (one, oneK) => (
-            <Row key={oneK}>
-              {_.map(one, (v) => (
-                <Col span={8} key={v.value}>
-                  <Radio value={v.value}>{v.text}</Radio>
-                </Col>
-              ))}
-            </Row>
-          ))}
-        </RadioGroup>
-      </div>
-    </div>
-  )
-}
-
-export default {
-  title: '表单/Radio',
-}
+import React from 'react'
+import Radio from './radio'
+import RadioGroup from './radio_group'
+import _ from 'lodash'
+import { observable } from 'mobx'
+import { Col, Row } from '../grid'
+
+const store = observable({
+  value: 3,
+  data: [
+    {
+      value: 1,
+      text: '广州',
+    },
+    {
+      value: 2,
+      text: '深圳',
+    },
+    {
+      value: 3,
+      text: '成都',
+      disabled: true,
+    },
+  ],
+  setValue(value: any) {
+    console.log(value)
+    this.value = value
+  },
+  checked: false,
+  setChecked(checked: any) {
+    console.log('setChecked', checked)
+    this.checked = checked
+  },
+})
+
+export const ComRadio = () => (
+  <div>
+    <div>
+      <h1>默认</h1>
+      <Radio
+        checked={store.checked}
+        onChange={() => {
+          store.setChecked(!store.checked)
+        }}
+      >
+        radio
+      </Radio>
+      <Radio
+        checked={!store.checked}
+        onChange={() => {
+          store.setChecked(!store.checked)
+        }}
+      >
+        radio
+      </Radio>
+    </div>
+    <div>
+      <h1>disabled</h1>
+      <Radio checked disabled>
+        radio
+      </Radio>
+      <Radio disabled>radio</Radio>
+    </div>
+    <div>更多同 checkbox</div>
+  </div>
+)
+
+export const ComRadioGroupForGrid = () => {
+  const two = _.groupBy(store.data, (v) => Math.floor((v.value - 1) / 2))
+
+  return (
+    <div>
+      <div>垂直布局</div>
+      <div>
+        <RadioGroup value={store.value} onChange={(value) => store.setValue(value)}>
+          {_.map(store.data, (v) => (
+            <div key={v.value}>
+              <Radio value={v.value}>{v.text}</Radio>
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+      <div>两列</div>
+      <div style={{ width: '200px' }}>
+        <RadioGroup value={store.value} onChange={(value) => store.setValue(value)}>
+          {_.map(two, (one, oneK) => (
+            <Row key={oneK}>
+              {_.map(one, (v) => (
+                <Col span={8} key={v.value}>
+                  <Radio value={v.value}>{v.text}</Radio>
+                </Col>
+              ))}
+            </Row>
+          ))}
+        </RadioGroup>
+      </div>
+    </div>
+  )
+}
+
+export default {
+  title: '表单/Radio',
+}

package/src/component/radio/style.less

@@ -1,56 +1,56 @@
-.gm-radio {
-  font-weight: normal;
-  cursor: pointer;
-  margin: 0;
-  user-select: none;
-
-  .gm-radio-input {
-    display: none;
-
-    & + .gm-radio-span {
-      margin-right: 5px;
-      top: 2px;
-      -webkit-appearance: none;
-      border: 1px solid var(--gm-color-default);
-      border-radius: 7px;
-      display: inline-block;
-      position: relative;
-      width: 14px;
-      height: 14px;
-    }
-
-    &:checked + .gm-radio-span {
-      border: 1px solid var(--gm-color-primary);
-
-      &::after {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        top: 2px;
-        left: 2px;
-        border-radius: 4px;
-        border: 4px solid var(--gm-color-primary);
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .gm-radio-input {
-      & + .gm-radio-span {
-        border-color: var(--gm-checkbox-radio-color-disabled);
-        background: var(--gm-color-bg-disabled);
-      }
-
-      &:checked + .gm-radio-span {
-        border-color: var(--gm-checkbox-radio-color-disabled);
-
-        &::after {
-          border-color: var(--gm-checkbox-radio-color-disabled);
-        }
-      }
-    }
-  }
-}
+.gm-radio {
+  font-weight: normal;
+  cursor: pointer;
+  margin: 0;
+  user-select: none;
+
+  .gm-radio-input {
+    display: none;
+
+    & + .gm-radio-span {
+      margin-right: 5px;
+      top: 2px;
+      -webkit-appearance: none;
+      border: 1px solid var(--gm-color-default);
+      border-radius: 7px;
+      display: inline-block;
+      position: relative;
+      width: 14px;
+      height: 14px;
+    }
+
+    &:checked + .gm-radio-span {
+      border: 1px solid var(--gm-color-primary);
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        top: 2px;
+        left: 2px;
+        border-radius: 4px;
+        border: 4px solid var(--gm-color-primary);
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .gm-radio-input {
+      & + .gm-radio-span {
+        border-color: var(--gm-checkbox-radio-color-disabled);
+        background: var(--gm-color-bg-disabled);
+      }
+
+      &:checked + .gm-radio-span {
+        border-color: var(--gm-checkbox-radio-color-disabled);
+
+        &::after {
+          border-color: var(--gm-checkbox-radio-color-disabled);
+        }
+      }
+    }
+  }
+}

package/src/component/radio/util.ts

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

package/src/component/recommend_input/index.ts

@@ -1,2 +1,2 @@
-export { default as RecommendInput } from './recommend_input'
-export type { RecommendInputProps } from './recommend_input'
+export { default as RecommendInput } from './recommend_input'
+export type { RecommendInputProps } from './recommend_input'

package/src/component/recommend_input/recommend_input.tsx

@@ -1,100 +1,100 @@
-import React, { useMemo, useRef, FC, FocusEvent, useContext } from 'react'
-import { Popover } from '../popover'
-import { Input } from '../input'
-import { List } from '../list'
-import _ from 'lodash'
-import { pinYinFilter } from '@gm-common/tool'
-import SVGCloseCircle from '../../svg/close-circle.svg'
-import classNames from 'classnames'
-import { ConfigContext, ConfigProvider } from '../config_provider'
-
-interface DataItem {
-  text: string
-}
-
-export interface RecommendInputProps {
-  data?: DataItem[]
-  onChange?(value: string): void
-  value?: string
-  disabled?: boolean
-  listHeight?: string
-  className?: string
-  placeholder?: string
-}
-
-const RecommendInput: FC<RecommendInputProps> = ({
-  onChange,
-  value,
-  data = [],
-  listHeight = '180px',
-  disabled,
-  className,
-  ...rest
-}) => {
-  const popoverRef = useRef<Popover>(null)
-  const config = useContext(ConfigContext)
-
-  // 构造list需要的数据结构
-  const _data = useMemo(() => {
-    return _.map(data, (item: DataItem) => {
-      return {
-        ...item,
-        value: item.text,
-      }
-    })
-  }, [data])
-
-  const searchData = useMemo(() => {
-    return pinYinFilter(_data, value, (item: DataItem) => item.text)
-  }, [value, _data])
-
-  const handleChange = (event: FocusEvent<HTMLInputElement>) => {
-    const changeVal = event.target.value
-
-    onChange(changeVal)
-  }
-
-  const handleSelect = (selected: string) => {
-    // 选择后隐藏
-    popoverRef.current!.apiDoSetActive(false)
-    onChange(selected)
-  }
-
-  const handleClear = () => {
-    onChange('')
-  }
-
-  return (
-    <Popover
-      ref={popoverRef}
-      type='realFocus'
-      popup={
-        searchData.length > 0 ? (
-          <ConfigProvider {...config}>
-            <List
-              data={searchData}
-              onSelect={handleSelect}
-              style={{ height: listHeight }}
-            />
-          </ConfigProvider>
-        ) : (
-          <></> // 需要element
-        )
-      }
-      disabled={disabled}
-    >
-      <div
-        {...rest}
-        className={classNames('gm-recommend-input', className, { disabled })}
-      >
-        <Input value={value} onChange={handleChange} type='text' disabled={disabled} />
-        <SVGCloseCircle
-          onClick={disabled ? _.noop : handleClear}
-          className='gm-cursor gm-recommend-input-clear-btn'
-        />
-      </div>
-    </Popover>
-  )
-}
-
-export default RecommendInput
+import React, { useMemo, useRef, FC, FocusEvent, useContext } from 'react'
+import { Popover } from '../popover'
+import { Input } from '../input'
+import { List } from '../list'
+import _ from 'lodash'
+import { pinYinFilter } from '@gm-common/tool'
+import SVGCloseCircle from '../../svg/close-circle.svg'
+import classNames from 'classnames'
+import { ConfigContext, ConfigProvider } from '../config_provider'
+
+interface DataItem {
+  text: string
+}
+
+export interface RecommendInputProps {
+  data?: DataItem[]
+  onChange?(value: string): void
+  value?: string
+  disabled?: boolean
+  listHeight?: string
+  className?: string
+  placeholder?: string
+}
+
+const RecommendInput: FC<RecommendInputProps> = ({
+  onChange,
+  value,
+  data = [],
+  listHeight = '180px',
+  disabled,
+  className,
+  ...rest
+}) => {
+  const popoverRef = useRef<Popover>(null)
+  const config = useContext(ConfigContext)
+
+  // 构造list需要的数据结构
+  const _data = useMemo(() => {
+    return _.map(data, (item: DataItem) => {
+      return {
+        ...item,
+        value: item.text,
+      }
+    })
+  }, [data])
+
+  const searchData = useMemo(() => {
+    return pinYinFilter(_data, value, (item: DataItem) => item.text)
+  }, [value, _data])
+
+  const handleChange = (event: FocusEvent<HTMLInputElement>) => {
+    const changeVal = event.target.value
+
+    onChange(changeVal)
+  }
+
+  const handleSelect = (selected: string) => {
+    // 选择后隐藏
+    popoverRef.current!.apiDoSetActive(false)
+    onChange(selected)
+  }
+
+  const handleClear = () => {
+    onChange('')
+  }
+
+  return (
+    <Popover
+      ref={popoverRef}
+      type='realFocus'
+      popup={
+        searchData.length > 0 ? (
+          <ConfigProvider {...config}>
+            <List
+              data={searchData}
+              onSelect={handleSelect}
+              style={{ height: listHeight }}
+            />
+          </ConfigProvider>
+        ) : (
+          <></> // 需要element
+        )
+      }
+      disabled={disabled}
+    >
+      <div
+        {...rest}
+        className={classNames('gm-recommend-input', className, { disabled })}
+      >
+        <Input value={value} onChange={handleChange} type='text' disabled={disabled} />
+        <SVGCloseCircle
+          onClick={disabled ? _.noop : handleClear}
+          className='gm-cursor gm-recommend-input-clear-btn'
+        />
+      </div>
+    </Popover>
+  )
+}
+
+export default RecommendInput