fix(password): pass all scale props for internally wrapped components (#732)

* fix(scale): add dunamic functions to export all props related to scale

* fix(password): pass all scale props for internally wrapped components

Author: unix

components/index.ts

@@ -200,8 +200,8 @@ export { default as useClasses } from './use-classes'
 export { default as useScale } from './use-scale'
 export { withScale, ScalePropKeys, ScaleContext } from './use-scale'
 export type {
-  ScalePropsAndInvalid,
   ScaleProps,
   ScaleConfig,
   GetScalePropsFunction,
+  GetAllScalePropsFunction,
 } from './use-scale'

components/input/__tests__/password.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { mount, shallow } from 'enzyme'
 import { Input } from 'components'
 import { nativeEvent } from 'tests/utils'
 
@@ -23,4 +23,13 @@ describe('InputPassword', () => {
     const wrapper = mount(<Input.Password hideToggle />)
     expect(wrapper.find('.input-icon').length).toBe(0)
   })
+
+  it('should be pass all native scale props', () => {
+    const width = 'calc(100% - 10px)'
+    const height = Math.random().toString(16).slice(-8)
+    const wrapper = shallow(<Input.Password w={width} h={height} />)
+    const html = wrapper.html()
+    expect(html).toContain(width)
+    expect(html).toContain(height)
+  })
 })

components/input/password.tsx

@@ -2,7 +2,7 @@ import React, { useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Props, defaultProps } from './input-props'
 import PasswordIcon from './password-icon'
 import Input from './input'
-import { withScale } from '../use-scale'
+import { useScale, withScale } from '../use-scale'
 
 interface PasswordProps extends Props {
   hideToggle?: boolean
@@ -28,6 +28,7 @@ const InputPasswordComponent = React.forwardRef<
     }: React.PropsWithChildren<InputPasswordProps> & typeof defaultProps,
     ref: React.Ref<HTMLInputElement | null>,
   ) => {
+    const { getAllScaleProps } = useScale()
     const inputRef = useRef<HTMLInputElement>(null)
     const [visible, setVisible] = useState<boolean>(false)
     useImperativeHandle(ref, () => inputRef.current)
@@ -56,7 +57,7 @@ const InputPasswordComponent = React.forwardRef<
     }, [hideToggle, visible])
 
     return (
-      <Input iconRight={icon} {...inputProps}>
+      <Input iconRight={icon} {...getAllScaleProps()} {...inputProps}>
         {children}
       </Input>
     )

components/use-scale/__tests__/scale.test.tsx

@@ -167,4 +167,30 @@ describe('UseScale', () => {
     inner = wrapper.find('#inner').getDOMNode()
     expect(inner.hasAttribute('scale')).not.toBe(true)
   })
+
+  it('should be update all native scale props', () => {
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <ScaleComponent {...props}>{children}</ScaleComponent>
+    )
+    const { result, rerender } = renderHook<any, ScaleConfig>(() => useScale(), {
+      wrapper,
+      initialProps: {},
+    })
+    let { SCALES, getAllScaleProps } = result.current
+    expect(typeof SCALES).toEqual('object')
+    expect(typeof getAllScaleProps).toEqual('function')
+    expect(typeof getAllScaleProps()).toEqual('object')
+
+    rerender({ width: '1em', height: '2em' })
+    getAllScaleProps = result.current.getAllScaleProps
+    expect(getAllScaleProps().width).toEqual('1em')
+    expect(getAllScaleProps().height).toEqual('2em')
+    expect(typeof getAllScaleProps().font).toEqual('undefined')
+
+    rerender({ px: '10px', mx: '20px' })
+    getAllScaleProps = result.current.getAllScaleProps
+    expect(getAllScaleProps().px).toEqual('10px')
+    expect(getAllScaleProps().mx).toEqual('20px')
+    expect(typeof getAllScaleProps().paddingTop).toEqual('undefined')
+  })
 })

components/use-scale/scale-context.ts

@@ -1,5 +1,37 @@
 import React from 'react'
 
+export const ScalePropKeys = [
+  'width',
+  'height',
+  'padding',
+  'margin',
+  'w',
+  'h',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'paddingBottom',
+  'pl',
+  'pr',
+  'pt',
+  'pb',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginBottom',
+  'ml',
+  'mr',
+  'mt',
+  'mb',
+  'px',
+  'py',
+  'mx',
+  'my',
+  'font',
+  'unit',
+  'scale',
+]
+
 export type ScaleProps = {
   width?: string | number
   height?: string | number
@@ -62,9 +94,12 @@ export type GetScalePropsFunction = (
   key: keyof ScaleProps | Array<keyof ScaleProps>,
 ) => ScaleProps[keyof ScaleProps]
 
+export type GetAllScalePropsFunction = () => ScaleProps
+
 export interface ScaleConfig {
   SCALES: DynamicScales
   getScaleProps: GetScalePropsFunction
+  getAllScaleProps: GetAllScalePropsFunction
   unit: string
 }
 
@@ -74,6 +109,7 @@ const defaultDynamicLayoutPipe: DynamicLayoutPipe = scale1x => {
 
 const defaultContext: ScaleConfig = {
   getScaleProps: () => undefined,
+  getAllScaleProps: () => ({}),
   SCALES: {
     pl: defaultDynamicLayoutPipe,
     pr: defaultDynamicLayoutPipe,

components/use-scale/utils.ts

@@ -1,46 +1,39 @@
-import { ScaleProps } from './scale-context'
+import {
+  GetAllScalePropsFunction,
+  GetScalePropsFunction,
+  ScaleProps,
+  ScalePropKeys,
+} from './scale-context'
 
-export type ScalePropsAndInvalid = keyof ScaleProps | 'size'
+export const generateGetScaleProps = <P>(
+  props: P & ScaleProps,
+): GetScalePropsFunction => {
+  const getScaleProps: GetScalePropsFunction = keyOrKeys => {
+    if (!Array.isArray(keyOrKeys)) return props[keyOrKeys as keyof ScaleProps]
+    let value = undefined
+    for (const key of keyOrKeys) {
+      const currentValue = props[key]
+      if (typeof currentValue !== 'undefined') {
+        value = currentValue
+      }
+    }
+    return value
+  }
+  return getScaleProps
+}
 
-export const ScalePropKeys: Array<ScalePropsAndInvalid> = [
-  'paddingLeft',
-  'pl',
-  'paddingRight',
-  'pr',
-  'paddingTop',
-  'pt',
-  'paddingBottom',
-  'pb',
-  'marginTop',
-  'mt',
-  'marginRight',
-  'mr',
-  'marginBottom',
-  'mb',
-  'marginLeft',
-  'ml',
-  'px',
-  'py',
-  'mx',
-  'my',
-  'width',
-  'height',
-  'font',
-  'unit',
-  'scale',
-  'size',
-]
-
-// export const withPureProps = <T extends Record<any, any>>(
-//   props: T,
-// ): Omit<T, ScalePropsAndInvalid> => {
-//   if (!props) return {} as Omit<T, ScalePropsAndInvalid>
-//   const keys = Object.keys(props).filter(key => key !== '')
-//   const nextProps: any = {}
-//   for (const key of keys) {
-//     if (!(ScalePropKeys as string[]).includes(key)) {
-//       nextProps[key] = props[key]
-//     }
-//   }
-//   return nextProps
-// }
+export const generateGetAllScaleProps = <P>(
+  props: P & ScaleProps,
+): GetAllScalePropsFunction => {
+  const getAllScaleProps: GetAllScalePropsFunction = () => {
+    let scaleProps: ScaleProps = {}
+    for (const key of ScalePropKeys) {
+      const value = props[key as keyof ScaleProps]
+      if (typeof value !== 'undefined') {
+        scaleProps[key as keyof ScaleProps] = value as any
+      }
+    }
+    return scaleProps
+  }
+  return getAllScaleProps
+}

components/use-scale/with-scale.tsx

@@ -1,13 +1,8 @@
 import React, { forwardRef } from 'react'
-import {
-  DynamicLayoutPipe,
-  GetScalePropsFunction,
-  ScaleConfig,
-  ScaleContext,
-  ScaleProps,
-} from './scale-context'
+import { DynamicLayoutPipe, ScaleConfig, ScaleContext, ScaleProps } from './scale-context'
 import useTheme from '../use-theme'
 import { isCSSNumberValue } from '../utils/collections'
+import { generateGetAllScaleProps, generateGetScaleProps } from './utils'
 
 const reduceScaleCoefficient = (scale: number) => {
   if (scale === 1) return scale
@@ -70,20 +65,9 @@ const withScale = <T, P = {}>(
         const customFactor = factor * Number(attrValue)
         return `calc(${customFactor} * ${unit})`
       }
-    const getScaleProps: GetScalePropsFunction = keyOrKeys => {
-      if (!Array.isArray(keyOrKeys)) return props[keyOrKeys as keyof ScaleProps]
-      let value = undefined
-      for (const key of keyOrKeys) {
-        const currentValue = props[key]
-        if (typeof currentValue !== 'undefined') {
-          value = currentValue
-        }
-      }
-      return value
-    }
 
     const value: ScaleConfig = {
-      unit,
+      unit: unit,
       SCALES: {
         pt: makeScaleHandler(paddingTop ?? pt ?? py ?? padding),
         pr: makeScaleHandler(paddingRight ?? pr ?? px ?? padding),
@@ -101,7 +85,8 @@ const withScale = <T, P = {}>(
         height: makeScaleHandler(height ?? h),
         font: makeScaleHandler(font),
       },
-      getScaleProps,
+      getScaleProps: generateGetScaleProps(props),
+      getAllScaleProps: generateGetAllScaleProps(props),
     }
 
     return (