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

package/src/component/selection/stories.tsx

@@ -1,45 +1,45 @@
-import React from 'react'
-import Selection from './selection'
-
-export const ComSelection = () => (
-  <div>
-    <Selection onSelect={(selected) => console.log(selected)} placeholder='请选择' />
-    <div>disabled</div>
-    <Selection
-      disabled
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={(selected) => console.log(selected)}
-      placeholder='请选择'
-    />
-    <div>renderSelected</div>
-    <Selection
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={(selected) => console.log(selected)}
-      renderSelected={(item) => item.text + 'lalala'}
-    />
-    <div>clean</div>
-    <Selection
-      clean
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={(selected) => console.log(selected)}
-      placeholder='请选择'
-    />
-    <div>disabledClose</div>
-    <Selection
-      disabledClose
-      selected={{ value: 0, text: '选中项' }}
-      onSelect={(selected) => console.log(selected)}
-      placeholder='请选择'
-    />
-    <div>noInput</div>
-    <Selection
-      onSelect={(selected) => console.log(selected)}
-      placeholder='请选择'
-      noInput
-    />
-  </div>
-)
-
-export default {
-  title: '其他/Selection',
-}
+import React from 'react'
+import Selection from './selection'
+
+export const ComSelection = () => (
+  <div>
+    <Selection onSelect={(selected) => console.log(selected)} placeholder='请选择' />
+    <div>disabled</div>
+    <Selection
+      disabled
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={(selected) => console.log(selected)}
+      placeholder='请选择'
+    />
+    <div>renderSelected</div>
+    <Selection
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={(selected) => console.log(selected)}
+      renderSelected={(item) => item.text + 'lalala'}
+    />
+    <div>clean</div>
+    <Selection
+      clean
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={(selected) => console.log(selected)}
+      placeholder='请选择'
+    />
+    <div>disabledClose</div>
+    <Selection
+      disabledClose
+      selected={{ value: 0, text: '选中项' }}
+      onSelect={(selected) => console.log(selected)}
+      placeholder='请选择'
+    />
+    <div>noInput</div>
+    <Selection
+      onSelect={(selected) => console.log(selected)}
+      placeholder='请选择'
+      noInput
+    />
+  </div>
+)
+
+export default {
+  title: '其他/Selection',
+}

package/src/component/selection/style.less

@@ -1,65 +1,65 @@
-.gm-selection {
-  position: relative;
-  vertical-align: middle;
-  height: var(--gm-size-form-height);
-
-  .gm-selection-selected {
-    padding-right: 20px;
-    cursor: pointer;
-    line-height: 18px;
-  }
-
-  .gm-selection-icon {
-    position: absolute;
-    display: block;
-    line-height: 1;
-    top: 10px;
-    right: 6px;
-    color: var(--gm-color-desc);
-    font-size: 10px;
-    cursor: pointer;
-  }
-
-  .gm-selection-close-icon {
-    display: none;
-    right: 6px;
-  }
-
-  .gm-selection-down-up {
-    right: 6px;
-  }
-
-  &:hover {
-    .gm-selection-close-icon {
-      display: block;
-    }
-
-    .gm-selection-fun-icon {
-      display: none;
-    }
-  }
-
-  &.disabled {
-    .gm-selection-close-icon {
-      .gmDisabled();
-    }
-  }
-
-  &.gm-selection-disabled-close {
-    .gm-selection-selected {
-      padding-right: 20px;
-    }
-  }
-
-  &.gm-selection-disabled-clean {
-    .gm-selection-selected {
-      padding-right: 20px;
-      border: 1px solid transparent;
-    }
-  }
-
-  /** 字体大小 */
-  &.gm-selection-text-sm {
-    font-size: var(--gm-size-text-sm);
-  }
-}
+.gm-selection {
+  position: relative;
+  vertical-align: middle;
+  height: var(--gm-size-form-height);
+
+  .gm-selection-selected {
+    padding-right: 20px;
+    cursor: pointer;
+    line-height: 18px;
+  }
+
+  .gm-selection-icon {
+    position: absolute;
+    display: block;
+    line-height: 1;
+    top: 10px;
+    right: 6px;
+    color: var(--gm-color-desc);
+    font-size: 10px;
+    cursor: pointer;
+  }
+
+  .gm-selection-close-icon {
+    display: none;
+    right: 6px;
+  }
+
+  .gm-selection-down-up {
+    right: 6px;
+  }
+
+  &:hover {
+    .gm-selection-close-icon {
+      display: block;
+    }
+
+    .gm-selection-fun-icon {
+      display: none;
+    }
+  }
+
+  &.disabled {
+    .gm-selection-close-icon {
+      .gmDisabled();
+    }
+  }
+
+  &.gm-selection-disabled-close {
+    .gm-selection-selected {
+      padding-right: 20px;
+    }
+  }
+
+  &.gm-selection-disabled-clean {
+    .gm-selection-selected {
+      padding-right: 20px;
+      border: 1px solid transparent;
+    }
+  }
+
+  /** 字体大小 */
+  &.gm-selection-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
+}

package/src/component/steps/index.ts

@@ -1,2 +1,2 @@
-export { default as Steps } from './steps'
-export type { StepsProps, StepsDataOptions } from './steps'
+export { default as Steps } from './steps'
+export type { StepsProps, StepsDataOptions } from './steps'

package/src/component/steps/steps.tsx

@@ -1,61 +1,61 @@
-import React, { FC, HTMLAttributes, ReactNode } from 'react'
-import { Flex } from '../flex'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-interface StepProps {
-  title?: string
-  description?: ReactNode
-  index: number
-}
-
-const Step: FC<StepProps> = (props) => {
-  const { title, description, index } = props
-
-  return (
-    <Flex row className='gm-steps-step gm-margin-top-5'>
-      <Flex column alignCenter className='gm-margin-right-10'>
-        <div className='gm-steps-step-icon'>{index}</div>
-        <div className='gm-flex-flex gm-steps-step-tag gm-margin-top-5' />
-      </Flex>
-      <div className='gm-flex-flex'>
-        {title && <div className='gm-steps-step-title'>{title}</div>}
-        {description && <div className='gm-steps-step-description'>{description}</div>}
-      </div>
-    </Flex>
-  )
-}
-
-export interface StepsProps extends HTMLAttributes<HTMLDivElement> {
-  data: StepsDataOptions[]
-}
-
-export interface StepsDataOptions {
-  title?: string
-  description?: ReactNode
-}
-
-const Steps: FC<StepsProps> = (props) => {
-  const { data, className, ...rest } = props
-
-  const renderStep = () => {
-    return _.map(data, (item, index) => {
-      return (
-        <Step
-          index={index + 1}
-          title={item.title}
-          description={item.description}
-          key={`step ${index}`}
-        />
-      )
-    })
-  }
-
-  return (
-    <div {...rest} className={classNames('gm-steps', className)}>
-      {renderStep()}
-    </div>
-  )
-}
-
-export default Steps
+import React, { FC, HTMLAttributes, ReactNode } from 'react'
+import { Flex } from '../flex'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+interface StepProps {
+  title?: string
+  description?: ReactNode
+  index: number
+}
+
+const Step: FC<StepProps> = (props) => {
+  const { title, description, index } = props
+
+  return (
+    <Flex row className='gm-steps-step gm-margin-top-5'>
+      <Flex column alignCenter className='gm-margin-right-10'>
+        <div className='gm-steps-step-icon'>{index}</div>
+        <div className='gm-flex-flex gm-steps-step-tag gm-margin-top-5' />
+      </Flex>
+      <div className='gm-flex-flex'>
+        {title && <div className='gm-steps-step-title'>{title}</div>}
+        {description && <div className='gm-steps-step-description'>{description}</div>}
+      </div>
+    </Flex>
+  )
+}
+
+export interface StepsProps extends HTMLAttributes<HTMLDivElement> {
+  data: StepsDataOptions[]
+}
+
+export interface StepsDataOptions {
+  title?: string
+  description?: ReactNode
+}
+
+const Steps: FC<StepsProps> = (props) => {
+  const { data, className, ...rest } = props
+
+  const renderStep = () => {
+    return _.map(data, (item, index) => {
+      return (
+        <Step
+          index={index + 1}
+          title={item.title}
+          description={item.description}
+          key={`step ${index}`}
+        />
+      )
+    })
+  }
+
+  return (
+    <div {...rest} className={classNames('gm-steps', className)}>
+      {renderStep()}
+    </div>
+  )
+}
+
+export default Steps

package/src/component/steps/stories.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import Steps from './steps'
-
-export const ComSteps = () => (
-  <Steps
-    data={[
-      { title: '第一步' },
-      { title: '第二步', description: '这是第二步' },
-      { title: '第三步', description: '这是第三步' },
-      { title: '第四步', description: '这是第四步这是第四步这是第四步' },
-    ]}
-    style={{ width: '300px' }}
-  />
-)
-
-export default {
-  title: '布局/Steps',
-}
+import React from 'react'
+import Steps from './steps'
+
+export const ComSteps = () => (
+  <Steps
+    data={[
+      { title: '第一步' },
+      { title: '第二步', description: '这是第二步' },
+      { title: '第三步', description: '这是第三步' },
+      { title: '第四步', description: '这是第四步这是第四步这是第四步' },
+    ]}
+    style={{ width: '300px' }}
+  />
+)
+
+export default {
+  title: '布局/Steps',
+}

package/src/component/steps/style.less

@@ -1,39 +1,39 @@
-@gm-icon-diameter: 18px;
-
-.gm-steps {
-  .gm-steps-step {
-    &:first-child {
-      margin-top: 0 !important;
-    }
-
-    // 线条
-    .gm-steps-step-tag {
-      width: 1px;
-      height: 25px;
-      background: var(--gm-color-primary);
-    }
-
-    &:last-child .gm-steps-step-tag {
-      display: none;
-    }
-
-    .gm-steps-step-icon {
-      border: 1px var(--gm-color-primary) solid;
-      border-radius: 50%;
-      line-height: @gm-icon-diameter;
-      text-align: center;
-      width: @gm-icon-diameter;
-      height: @gm-icon-diameter;
-      color: var(--gm-color-primary);
-    }
-
-    .gm-steps-step-title {
-      height: @gm-icon-diameter + 2; // 加上icon边框宽度
-      line-height: @gm-icon-diameter + 2; // 加上icon边框宽度
-    }
-
-    .gm-steps-step-description {
-      color: var(--gm-color-desc);
-    }
-  }
-}
+@gm-icon-diameter: 18px;
+
+.gm-steps {
+  .gm-steps-step {
+    &:first-child {
+      margin-top: 0 !important;
+    }
+
+    // 线条
+    .gm-steps-step-tag {
+      width: 1px;
+      height: 25px;
+      background: var(--gm-color-primary);
+    }
+
+    &:last-child .gm-steps-step-tag {
+      display: none;
+    }
+
+    .gm-steps-step-icon {
+      border: 1px var(--gm-color-primary) solid;
+      border-radius: 50%;
+      line-height: @gm-icon-diameter;
+      text-align: center;
+      width: @gm-icon-diameter;
+      height: @gm-icon-diameter;
+      color: var(--gm-color-primary);
+    }
+
+    .gm-steps-step-title {
+      height: @gm-icon-diameter + 2; // 加上icon边框宽度
+      line-height: @gm-icon-diameter + 2; // 加上icon边框宽度
+    }
+
+    .gm-steps-step-description {
+      color: var(--gm-color-desc);
+    }
+  }
+}

package/src/component/storage/index.ts

@@ -1 +1 @@
-export { default as Storage, LocalStorage, SessionStorage } from './storage'
+export { default as Storage, LocalStorage, SessionStorage } from './storage'

package/src/component/storage/storage.ts

@@ -1,7 +1,7 @@
-import { StorageFactory } from '@gm-common/tool'
-
-const LocalStorage = new StorageFactory('_gm-pc_', window.localStorage)
-const SessionStorage = new StorageFactory('_gm-pc_', window.sessionStorage)
-
-export { SessionStorage, LocalStorage }
-export default LocalStorage
+import { StorageFactory } from '@gm-common/tool'
+
+const LocalStorage = new StorageFactory('_gm-pc_', window.localStorage)
+const SessionStorage = new StorageFactory('_gm-pc_', window.sessionStorage)
+
+export { SessionStorage, LocalStorage }
+export default LocalStorage

package/src/component/storage/stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-
-export const ComStorage = () => <div>实时存储 见 @gm-common/storage</div>
-
-export default {
-  title: '其他/Storage',
-}
+import React from 'react'
+
+export const ComStorage = () => <div>实时存储 见 @gm-common/storage</div>
+
+export default {
+  title: '其他/Storage',
+}

package/src/component/switch/index.ts

@@ -1,2 +1,2 @@
-export { default as Switch } from './switch'
-export type { SwitchProps } from './switch'
+export { default as Switch } from './switch'
+export type { SwitchProps } from './switch'

package/src/component/switch/stories.tsx

@@ -1,39 +1,39 @@
-import React from 'react'
-import Switch from './switch'
-import { observable } from 'mobx'
-
-const store = observable({
-  checked: false,
-  toggle() {
-    this.checked = !this.checked
-  },
-})
-
-export const ComSwitch = () => (
-  <div>
-    <Switch
-      checked={store.checked}
-      onChange={() => {
-        store.toggle()
-      }}
-    />
-    <Switch
-      checked={store.checked}
-      onChange={() => {
-        store.toggle()
-      }}
-      on='上架'
-      off='下架'
-    />
-    <div>
-      <Switch checked />
-      <Switch checked type='primary' />
-      <Switch checked type='success' />
-      <Switch checked type='danger' />
-    </div>
-  </div>
-)
-
-export default {
-  title: '表单/Switch',
-}
+import React from 'react'
+import Switch from './switch'
+import { observable } from 'mobx'
+
+const store = observable({
+  checked: false,
+  toggle() {
+    this.checked = !this.checked
+  },
+})
+
+export const ComSwitch = () => (
+  <div>
+    <Switch
+      checked={store.checked}
+      onChange={() => {
+        store.toggle()
+      }}
+    />
+    <Switch
+      checked={store.checked}
+      onChange={() => {
+        store.toggle()
+      }}
+      on='上架'
+      off='下架'
+    />
+    <div>
+      <Switch checked />
+      <Switch checked type='primary' />
+      <Switch checked type='success' />
+      <Switch checked type='danger' />
+    </div>
+  </div>
+)
+
+export default {
+  title: '表单/Switch',
+}