feat(Input): Add prefix/suffix support

#10

Author: xinyao27

packages/fluent-ui-icons/src/utils/createIcon.ts

@@ -8,7 +8,7 @@ export interface JSX {
 
 function createElement(
   jsx: JSX,
-  otherProps: React.HTMLAttributes<SVGElement> = {}
+  otherProps: React.HTMLAttributes<SVGElement> & React.RefAttributes<SVGElement> = {}
 ): React.ReactSVGElement {
   const { type, props, children: childrenAttr } = jsx
   const children = childrenAttr.map((child): React.ReactSVGElement[] =>
@@ -36,18 +36,23 @@ function toHump(name: string, capitalized: boolean = true): string {
     : name.replace(/-(\w)/g, (all, letter): string => letter.toUpperCase())
 }
 
-function createIcon(jsx: JSX, componentName: string): React.FC {
-  const Icon: React.FC = ({ ...rest }: React.HTMLAttributes<SVGElement>): React.ReactElement => {
-    const style = {
-      width: '1em',
-      height: '1em',
-      display: 'inline-block',
-      fontSize: 'inherit',
-      color: 'inherit',
-      fill: 'currentColor'
+function createIcon(
+  jsx: JSX,
+  componentName: string
+): React.ForwardRefExoticComponent<React.RefAttributes<SVGElement>> {
+  const Icon = React.forwardRef<SVGElement>(
+    ({ ...rest }: React.HTMLAttributes<SVGElement>, ref): React.ReactElement => {
+      const style = {
+        width: '1em',
+        height: '1em',
+        display: 'inline-block',
+        fontSize: 'inherit',
+        color: 'inherit',
+        fill: 'currentColor'
+      }
+      return createElement(jsx, { ...rest, style, ref })
     }
-    return createElement(jsx, { ...rest, style })
-  }
+  )
   Icon.displayName = `RemixIcon${toHump(componentName)}`
   return Icon
 }

packages/fluent-ui.com/src/docs/components/Input/Input.md

@@ -80,3 +80,12 @@ Show a button to clear your input.
   )
 }
 ```
+
+## PrefixAndSuffix
+
+```jsx
+<>
+  <Input prefix="¥" suffix="RMB" />
+  <Input prefix={<Icon.UserSmileLine />} suffix={<Icon.InformationLine />} />
+</>
+```

packages/fluent-ui.com/src/docs/components/Input/Input.zh.md

@@ -80,3 +80,12 @@ langKey: "zh"
   )
 }
 ```
+
+## 前置和后置
+
+```jsx
+<>
+  <Input prefix="¥" suffix="RMB" />
+  <Input prefix={<Icon.UserSmileLine />} suffix={<Icon.InformationLine />} />
+</>
+```

packages/fluent-ui.com/src/docs/components/Input/api.md

@@ -24,3 +24,5 @@ import { Input } from '@fluent-ui/core'
 | cleared | boolean | false | Whether to display a button to clear the value of the `input` element |
 | password | boolean |  | The `input` element will be rendered as `<input type="password" />` |
 | error | boolean |  | 	If `true`, the `input` will indicate an error. |
+| prefix | React.ReactNode | null | Pre-content input box. |
+| suffix | React.ReactNode | null | Rear content input box. |

packages/fluent-ui.com/src/docs/components/Input/api.zh.md

@@ -24,3 +24,5 @@ import { Input } from '@fluent-ui/core'
 | cleared | boolean | false | 是否显示一个按钮清除输入元素的值。 |
 | password | boolean |  | `input` 元素将被渲染为 `<input type="password" />` |
 | error | boolean |  | 	如果 `true`, `input` 将会表示为错误状态。 |
+| prefix | React.ReactNode | null | 输入框的前置内容。 |
+| suffix | React.ReactNode | null | 输入框的后置内容。 |

packages/fluent-ui/src/Input/Input.styled.ts

@@ -1,6 +1,6 @@
 import { Style, Styles } from 'jss'
 import { Theme } from '../styles'
-import { InputClassProps } from './Input.type'
+import { InputClassProps, InputProps } from './Input.type'
 
 const wrapper: Style = {
   display: 'inline-block',
@@ -9,15 +9,14 @@ const wrapper: Style = {
   font: 'inherit'
 }
 
-const root = (theme: Theme) => ({
+const root = (theme: Theme): Style => ({
   outline: 'none',
   font: 'inherit',
   width: '100%',
   borderRadius: 2,
   border: '2px solid',
   borderColor: theme.colors!.standard!.default,
   transition: theme.transitions!.input,
-  // ${th.size('medium.input')},
   '&:hover': {
     borderColor: theme.colors!.standard!.dark1
   },
@@ -30,7 +29,13 @@ const root = (theme: Theme) => ({
     cursor: 'not-allowed',
     pointerEvents: 'none'
   },
-  ...theme.sizes!.medium!.input
+  ...theme.sizes!.medium!.input,
+  '&:not(:first-child)': {
+    paddingLeft: 30
+  },
+  '&:not(:last-child)': {
+    paddingRight: 30
+  }
 })
 const error = (theme: Theme): Style => ({
   borderColor: theme.colors!.error!.default,
@@ -59,9 +64,29 @@ const clearedIcon = (theme: Theme): Style => ({
   }
 })
 
+const extra = (theme: Theme): Style => ({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: theme.colors!.standard!.transparent3
+})
+const prefix = (theme: Theme): Style => ({
+  ...extra(theme),
+  left: 12
+})
+const suffix = (theme: Theme): Style => (props: InputProps): Style => ({
+  ...extra(theme),
+  right: 12 + (props.suffix && !!props.value ? 30 : 0)
+})
+
 export const styles = (theme: Theme): Styles<InputClassProps> => ({
   root: root(theme),
   error: error(theme),
   wrapper,
-  clearedIcon: clearedIcon(theme)
+  clearedIcon: clearedIcon(theme),
+  prefix: prefix(theme),
+  suffix: suffix(theme)
 })

packages/fluent-ui/src/Input/Input.tsx

@@ -24,6 +24,8 @@ const Input: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputProp
       cleared,
       password,
       error,
+      prefix = null,
+      suffix = null,
       ...rest
     } = props
 
@@ -55,14 +57,15 @@ const Input: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputProp
       (): object =>
         cleared
           ? {
-              paddingRight: clearedHeight
+              paddingRight: clearedHeight + (suffix ? 30 : 0)
             }
           : {},
-      [cleared, clearedHeight]
+      [cleared, clearedHeight, suffix]
     )
 
     return (
       <div className={classes.wrapper} style={style}>
+        {prefix && <div className={classes.prefix}>{prefix}</div>}
         <input
           className={className}
           ref={ref}
@@ -74,6 +77,7 @@ const Input: React.FC<InputProps> = React.forwardRef<HTMLInputElement, InputProp
           style={clearedInputStyle}
           {...rest}
         />
+        {suffix && <div className={classes.suffix}>{suffix}</div>}
         {cleared && (
           <Transition visible={!!value} wrapper={false}>
             <span
@@ -97,4 +101,9 @@ Input.displayName = `F${name}`
 
 Input.propTypes = InputPropTypes
 
+Input.defaultProps = {
+  prefix: null,
+  suffix: null
+}
+
 export default Input

packages/fluent-ui/src/Input/Input.type.ts

@@ -2,17 +2,23 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import { StandardProps } from '..'
 
-export type InputClassProps = 'root' | 'error' | 'wrapper' | 'clearedIcon'
+export type InputClassProps = 'root' | 'error' | 'wrapper' | 'clearedIcon' | 'prefix' | 'suffix'
 
 export interface InputProps
-  extends StandardProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement, 'onChange'> {
+  extends StandardProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement,
+    'onChange' | 'prefix'
+  > {
   value?: string
   onChange?: (value: string) => void
   placeholder?: string
   disabled?: boolean
   cleared?: boolean
   password?: boolean
   error?: boolean
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
 }
 
 export const InputPropTypes = {
@@ -22,5 +28,7 @@ export const InputPropTypes = {
   disabled: PropTypes.bool,
   cleared: PropTypes.bool,
   password: PropTypes.bool,
-  error: PropTypes.bool
+  error: PropTypes.bool,
+  prefix: PropTypes.node,
+  suffix: PropTypes.node
 }

packages/fluent-ui/src/Input/__tests__/Input.test.tsx

@@ -76,4 +76,18 @@ describe('Input', (): void => {
     expect(ref.current as HTMLInputElement).toHaveClass(classes.error)
     expect(sheets.toString()).toMatchSnapshot()
   })
+
+  test('should be support prefix', (): void => {
+    const { getByText, sheets } = render(<Input prefix={text} />)
+    expect(getByText(text)).toBeInTheDocument()
+    expect(getByText(text)).toHaveClass(classes.prefix)
+    expect(sheets.toString()).toMatchSnapshot()
+  })
+
+  test('should be support suffix', (): void => {
+    const { getByText, sheets } = render(<Input suffix={text} />)
+    expect(getByText(text)).toBeInTheDocument()
+    expect(getByText(text)).toHaveClass(classes.suffix)
+    expect(sheets.toString()).toMatchSnapshot()
+  })
 })