@gm-pc/react 1.24.9-beta.12 → 1.24.9-beta.13

package/src/component/controlled_form/items/utils.ts

@@ -1,132 +1,132 @@
-import {
-  ReactNode,
-  ReactElement,
-  isValidElement,
-  cloneElement as ReactCloneElement,
-} from 'react'
-import { Rule } from '.'
-import { getLocale } from '@gm-pc/locales'
-import { pattern } from '../../../validator/rules'
-type AnyObject = Record<any, any>
-
-export type RenderProps =
-  | undefined
-  | AnyObject
-  | ((originProps: AnyObject) => AnyObject | undefined)
-
-export function replaceElement(
-  element: ReactNode,
-  replacement: ReactNode,
-  props: RenderProps
-): ReactNode {
-  if (!isValidElement(element)) return replacement
-
-  return ReactCloneElement(
-    element,
-    typeof props === 'function' ? props(element.props || {}) : props
-  )
-}
-export function cloneElement(element: ReactNode, props?: RenderProps): ReactElement {
-  return replaceElement(element, element, props) as ReactElement
-}
-
-function isValueEmpty(value: string | [] | undefined | null) {
-  if (value === undefined || value === null) return true
-  if ((typeof value === 'string' || Array.isArray(value)) && !value.length) {
-    return true
-  }
-  return false
-}
-
-function isWhiteSpace(str: any) {
-  return /\s/.test(str)
-}
-export function getWarningMessage<T>(
-  rules: Rule<T>[] = [],
-  values: T,
-  name: string,
-  required = false
-) {
-  let warningMessage: string | ReactNode
-  // @ts-ignore
-  const value = values?.[name]
-  const isEmpty = isValueEmpty(value)
-  if (required && isEmpty) {
-    warningMessage = getLocale('请填写')
-    if (rules.length === 0) {
-      return warningMessage
-    }
-    rules.some((rule) => {
-      if (typeof rule === 'object' && rule.required) {
-        warningMessage = rule.message
-        return true
-      }
-      return false
-    })
-
-    return warningMessage
-  }
-
-  for (const rule of rules) {
-    if (typeof rule === 'object') {
-      if (rule.required && isEmpty) {
-        warningMessage = rule.message
-      }
-      /**
-       *  value有和可能字符串和数字
-       *  1. string :
-       *    { min: 1},这时候value = '',则验证不通过
-       *    { max: 2},这时候value = 'xxx',则验证不通过
-       * 2. number :
-       *    { min: 1},这时候value = 0.99,则验证不通过
-       *    { max: 2},这时候value = 2.001,则验证不通过
-       *
-       * 如果配置了len=5,字符串'xxx'长度为3，数字666666长度为6，都不等于len=5
-       */
-      if (!isEmpty) {
-        if (typeof value === 'number' || typeof value === 'string') {
-          const tempValue = typeof value === 'number' ? value : value.length
-          if (
-            (rule.len && value.toString().length !== rule.len) ||
-            ((rule.max || rule.max === 0) && tempValue > rule.max) ||
-            ((rule.min || rule.min === 0) && tempValue < rule.min)
-          ) {
-            warningMessage = rule.message
-          }
-        }
-        if (rule.pattern && !rule.pattern.test(value)) {
-          warningMessage = rule.message
-        }
-        if (rule.whitespace && isWhiteSpace(value)) {
-          warningMessage = rule.message
-        }
-        if (rule.type) {
-          switch (rule.type) {
-            case 'integer':
-              if (!Number.isInteger(Number(value))) {
-                warningMessage = rule.message
-              }
-              break
-            case 'url':
-            case 'email':
-              if (!pattern[rule.type].test(value)) {
-                warningMessage = rule.message
-              }
-              break
-            default:
-              break
-          }
-        }
-      }
-    } else {
-      if (!isEmpty) {
-        warningMessage = rule(values)
-      }
-    }
-    if (warningMessage) {
-      return warningMessage
-    }
-  }
-
-  return warningMessage
-}
+import {
+  ReactNode,
+  ReactElement,
+  isValidElement,
+  cloneElement as ReactCloneElement,
+} from 'react'
+import { Rule } from '.'
+import { getLocale } from '@gm-pc/locales'
+import { pattern } from '../../../validator/rules'
+type AnyObject = Record<any, any>
+
+export type RenderProps =
+  | undefined
+  | AnyObject
+  | ((originProps: AnyObject) => AnyObject | undefined)
+
+export function replaceElement(
+  element: ReactNode,
+  replacement: ReactNode,
+  props: RenderProps
+): ReactNode {
+  if (!isValidElement(element)) return replacement
+
+  return ReactCloneElement(
+    element,
+    typeof props === 'function' ? props(element.props || {}) : props
+  )
+}
+export function cloneElement(element: ReactNode, props?: RenderProps): ReactElement {
+  return replaceElement(element, element, props) as ReactElement
+}
+
+function isValueEmpty(value: string | [] | undefined | null) {
+  if (value === undefined || value === null) return true
+  if ((typeof value === 'string' || Array.isArray(value)) && !value.length) {
+    return true
+  }
+  return false
+}
+
+function isWhiteSpace(str: any) {
+  return /\s/.test(str)
+}
+export function getWarningMessage<T>(
+  rules: Rule<T>[] = [],
+  values: T,
+  name: string,
+  required = false
+) {
+  let warningMessage: string | ReactNode
+  // @ts-ignore
+  const value = values?.[name]
+  const isEmpty = isValueEmpty(value)
+  if (required && isEmpty) {
+    warningMessage = getLocale('请填写')
+    if (rules.length === 0) {
+      return warningMessage
+    }
+    rules.some((rule) => {
+      if (typeof rule === 'object' && rule.required) {
+        warningMessage = rule.message
+        return true
+      }
+      return false
+    })
+
+    return warningMessage
+  }
+
+  for (const rule of rules) {
+    if (typeof rule === 'object') {
+      if (rule.required && isEmpty) {
+        warningMessage = rule.message
+      }
+      /**
+       *  value有和可能字符串和数字
+       *  1. string :
+       *    { min: 1},这时候value = '',则验证不通过
+       *    { max: 2},这时候value = 'xxx',则验证不通过
+       * 2. number :
+       *    { min: 1},这时候value = 0.99,则验证不通过
+       *    { max: 2},这时候value = 2.001,则验证不通过
+       *
+       * 如果配置了len=5,字符串'xxx'长度为3，数字666666长度为6，都不等于len=5
+       */
+      if (!isEmpty) {
+        if (typeof value === 'number' || typeof value === 'string') {
+          const tempValue = typeof value === 'number' ? value : value.length
+          if (
+            (rule.len && value.toString().length !== rule.len) ||
+            ((rule.max || rule.max === 0) && tempValue > rule.max) ||
+            ((rule.min || rule.min === 0) && tempValue < rule.min)
+          ) {
+            warningMessage = rule.message
+          }
+        }
+        if (rule.pattern && !rule.pattern.test(value)) {
+          warningMessage = rule.message
+        }
+        if (rule.whitespace && isWhiteSpace(value)) {
+          warningMessage = rule.message
+        }
+        if (rule.type) {
+          switch (rule.type) {
+            case 'integer':
+              if (!Number.isInteger(Number(value))) {
+                warningMessage = rule.message
+              }
+              break
+            case 'url':
+            case 'email':
+              if (!pattern[rule.type].test(value)) {
+                warningMessage = rule.message
+              }
+              break
+            default:
+              break
+          }
+        }
+      }
+    } else {
+      if (!isEmpty) {
+        warningMessage = rule(values)
+      }
+    }
+    if (warningMessage) {
+      return warningMessage
+    }
+  }
+
+  return warningMessage
+}

package/src/component/controlled_form/stories/components/date_range_filter.tsx

@@ -1,83 +1,83 @@
-import React, { FC } from 'react'
-import { DateRangePicker, Select, Flex } from '../../../../index'
-
-interface Data {
-  type: number
-  name: string
-  expand: boolean
-  limit?: (
-    date: Date,
-    v: {
-      begin?: Date
-      end?: Date
-    }
-  ) => boolean
-}
-
-export interface DRFOnChange {
-  (value: { begin?: Date; end?: Date; dateType?: number }): void
-}
-
-interface DateRangeFilterProps {
-  data: Data[]
-  onChange?: DRFOnChange
-  value?: {
-    begin: Date
-    end: Date
-    dateType: number
-  }
-
-  className?: string
-  enabledTimeSelect?: boolean
-}
-export const DateRangeFilter: FC<DateRangeFilterProps> = ({
-  data,
-  onChange,
-  value,
-  className = '',
-  enabledTimeSelect = false,
-}) => {
-  const { begin, end, dateType } = value || {}
-
-  const handleDateChange = (begin: Date, end: Date) => {
-    onChange && onChange({ begin, end, dateType })
-  }
-
-  const handleSelectChange = (value: number) => {
-    onChange && onChange({ dateType: value })
-  }
-
-  const target = data.find((item) => {
-    return item.type === dateType
-  })
-
-  const datePart = (
-    <DateRangePicker
-      begin={begin}
-      end={end}
-      onChange={handleDateChange}
-      disabledDate={target?.limit}
-      enabledTimeSelect={enabledTimeSelect}
-    />
-  )
-
-  return (
-    <Flex>
-      <div className='gm-padding-right-5' style={{ width: '110px', marginLeft: '-10px' }}>
-        <Select
-          clean
-          value={dateType}
-          onChange={handleSelectChange}
-          className='gm-block'
-          data={data.map((v) => ({
-            value: v.type,
-            text: v.name,
-          }))}
-        />
-      </div>
-      <Flex flex none column style={{ minWidth: 'auto' }}>
-        {datePart}
-      </Flex>
-    </Flex>
-  )
-}
+import React, { FC } from 'react'
+import { DateRangePicker, Select, Flex } from '../../../../index'
+
+interface Data {
+  type: number
+  name: string
+  expand: boolean
+  limit?: (
+    date: Date,
+    v: {
+      begin?: Date
+      end?: Date
+    }
+  ) => boolean
+}
+
+export interface DRFOnChange {
+  (value: { begin?: Date; end?: Date; dateType?: number }): void
+}
+
+interface DateRangeFilterProps {
+  data: Data[]
+  onChange?: DRFOnChange
+  value?: {
+    begin: Date
+    end: Date
+    dateType: number
+  }
+
+  className?: string
+  enabledTimeSelect?: boolean
+}
+export const DateRangeFilter: FC<DateRangeFilterProps> = ({
+  data,
+  onChange,
+  value,
+  className = '',
+  enabledTimeSelect = false,
+}) => {
+  const { begin, end, dateType } = value || {}
+
+  const handleDateChange = (begin: Date, end: Date) => {
+    onChange && onChange({ begin, end, dateType })
+  }
+
+  const handleSelectChange = (value: number) => {
+    onChange && onChange({ dateType: value })
+  }
+
+  const target = data.find((item) => {
+    return item.type === dateType
+  })
+
+  const datePart = (
+    <DateRangePicker
+      begin={begin}
+      end={end}
+      onChange={handleDateChange}
+      disabledDate={target?.limit}
+      enabledTimeSelect={enabledTimeSelect}
+    />
+  )
+
+  return (
+    <Flex>
+      <div className='gm-padding-right-5' style={{ width: '110px', marginLeft: '-10px' }}>
+        <Select
+          clean
+          value={dateType}
+          onChange={handleSelectChange}
+          className='gm-block'
+          data={data.map((v) => ({
+            value: v.type,
+            text: v.name,
+          }))}
+        />
+      </div>
+      <Flex flex none column style={{ minWidth: 'auto' }}>
+        {datePart}
+      </Flex>
+    </Flex>
+  )
+}

package/src/component/controlled_form/stories/components/index.ts

@@ -1,2 +1,2 @@
-export * from './date_range_filter'
-export * from './search_filter'
+export * from './date_range_filter'
+export * from './search_filter'

package/src/component/controlled_form/stories/components/search_filter.tsx

@@ -1,52 +1,52 @@
-import React, { FC, useState } from 'react'
-import _ from 'lodash'
-import { Select, Input, Flex, ControlledFormItem } from '../../../../index'
-
-const orderSearchType = [
-  {
-    value: 1,
-    text: '按订单号',
-    key: 'serial_no',
-    desc: '输入订单号搜索',
-  },
-  {
-    value: 2,
-    text: '按商户',
-    key: 'receive_customer_id',
-    desc: '输入商户编码或商户名',
-  },
-]
-
-export const SearchFilter: FC = () => {
-  const [selected, setSelected] = useState(1)
-  const list = [...orderSearchType]
-  const target = _.find(list, (v) => v.value === selected)
-
-  return (
-    <Flex>
-      <div className='gm-padding-right-5' style={{ minWidth: '90px' }}>
-        <ControlledFormItem
-          name='searchType'
-          disabledCol
-          onFieldChange={(selected, { setFieldsValue }) => {
-            setSelected(selected)
-            if (selected === 2) {
-              setFieldsValue({
-                serial_no: 2222,
-              })
-            }
-          }}
-        >
-          <Select clean className='gm-block' data={list} />
-        </ControlledFormItem>
-      </div>
-      <Flex flex none column style={{ minWidth: 'auto' }}>
-        <ControlledFormItem name='serial_no' colWidth='290px'>
-          <Input className='form-control' placeholder={target?.desc} />
-        </ControlledFormItem>
-      </Flex>
-    </Flex>
-  )
-}
-
-export default SearchFilter
+import React, { FC, useState } from 'react'
+import _ from 'lodash'
+import { Select, Input, Flex, ControlledFormItem } from '../../../../index'
+
+const orderSearchType = [
+  {
+    value: 1,
+    text: '按订单号',
+    key: 'serial_no',
+    desc: '输入订单号搜索',
+  },
+  {
+    value: 2,
+    text: '按商户',
+    key: 'receive_customer_id',
+    desc: '输入商户编码或商户名',
+  },
+]
+
+export const SearchFilter: FC = () => {
+  const [selected, setSelected] = useState(1)
+  const list = [...orderSearchType]
+  const target = _.find(list, (v) => v.value === selected)
+
+  return (
+    <Flex>
+      <div className='gm-padding-right-5' style={{ minWidth: '90px' }}>
+        <ControlledFormItem
+          name='searchType'
+          disabledCol
+          onFieldChange={(selected, { setFieldsValue }) => {
+            setSelected(selected)
+            if (selected === 2) {
+              setFieldsValue({
+                serial_no: 2222,
+              })
+            }
+          }}
+        >
+          <Select clean className='gm-block' data={list} />
+        </ControlledFormItem>
+      </div>
+      <Flex flex none column style={{ minWidth: 'auto' }}>
+        <ControlledFormItem name='serial_no' colWidth='290px'>
+          <Input className='form-control' placeholder={target?.desc} />
+        </ControlledFormItem>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default SearchFilter