feat(atoms): add align feature to the input

8base · Jul 6, 2018 · 76e6f2a · 76e6f2a
1 parent a2f8d18
commit 76e6f2a
Show file tree

Hide file tree

Showing 6 changed files with 218 additions and 14 deletions.
diff --git a/src/atoms/dataEntry/Input/Input.js b/src/atoms/dataEntry/Input/Input.js
@@ -13,6 +13,8 @@ type InputCommonProps = {
   stretch?: boolean,
   /** when true then don't show error indicator  */
   hideErrorIndicator?: boolean,
+  /** align of the input value */
+  align?: 'center' | 'left' | 'right',
   /** left icon componen */
   leftIcon?: React$Node,
   /** right icon componen */
@@ -44,12 +46,13 @@ type InputProps = {
 
 class Input extends PureComponent<InputProps> {
   static defaultProps = {
-    type: 'text',
-    square: false,
-    stretch: true,
-    hideErrorIndicator: false,
+    align: 'left',
     autoComplete: false,
     hasError: false,
+    hideErrorIndicator: false,
+    square: false,
+    stretch: true,
+    type: 'text',
   }
 
   onChange = (event: *) => {
@@ -68,11 +71,25 @@ class Input extends PureComponent<InputProps> {
   }
 
   render() {
-    const { hasError, hideErrorIndicator, autoComplete, stretch, errorText, leftIcon, rightIcon, mask, square, value, type, ...rest } = this.props;
+    const {
+      align,
+      autoComplete,
+      errorText,
+      hasError,
+      hideErrorIndicator,
+      leftIcon,
+      mask,
+      rightIcon,
+      square,
+      stretch,
+      type,
+      value,
+      ...rest } = this.props;
     const hasLeftIcon = !!leftIcon;
     const hasRightIcon = !!rightIcon;
 
     const inputProps = {
+      align,
       value,
       square,
       onChange: this.onChange,

diff --git a/src/atoms/dataEntry/Input/Input.stories.js b/src/atoms/dataEntry/Input/Input.stories.js
@@ -32,6 +32,9 @@ export default (asStory) => {
       ))
       .add('with html auto-complete', () => (
         <Input name="input" autoComplete />
+      ))
+      .add('with center align', () => (
+        <Input name="input" align="center" />
       ));
   });
 };
diff --git a/src/atoms/dataEntry/Input/Input.theme.js b/src/atoms/dataEntry/Input/Input.theme.js
@@ -21,6 +21,14 @@ const theme = createTheme(name, (colors: *): * => ({
     },
   },
 
+  modifiers: {
+    align: {
+      left: { textAlign: 'left ' },
+      right: { textAlign: 'right ' },
+      center: { textAlign: 'center ' },
+    },
+  },
+
   inputSquare: {
     width: '4rem',
     textAlign: 'center',

diff --git a/src/atoms/dataEntry/InputField/InputField.js b/src/atoms/dataEntry/InputField/InputField.js
@@ -19,6 +19,8 @@ type InputFieldProps = {|
   hideErrorLabel?: boolean,
   /** when true then don't show error indicator */
   hideErrorIndicator?: boolean,
+  /** align of the input value */
+  align?: 'center' | 'left' | 'right',
   /** form input object */
   input?: InputType,
   /** form meta object */
@@ -35,15 +37,16 @@ const theme = createTheme(name, {
 });
 
 const InputField = ({
-  square,
-  label,
-  stretch,
+  align,
   direction,
-  maxLength,
-  hideErrorLabel,
   hideErrorIndicator,
+  hideErrorLabel,
   input = {},
+  label,
+  maxLength,
   meta = {},
+  square,
+  stretch,
   ...rest
   }: InputFieldProps) => {
   const { error, touched } = meta;
@@ -54,13 +57,14 @@ const InputField = ({
     <FormField label={ label } stretch={ stretch } direction={ direction } hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
       <Input
         { ...rest }
+        align={ align }
+        hasError={ hasError }
         hideErrorIndicator={ hideErrorIndicator }
         maxLength={ maxLength }
-        square={ square }
         name={ name }
         onChange={ onChange }
+        square={ square }
         value={ value }
-        hasError={ hasError }
       />
     </FormField>
   );

diff --git a/src/atoms/dataEntry/InputField/InputField.stories.js b/src/atoms/dataEntry/InputField/InputField.stories.js
@@ -37,6 +37,9 @@ export default (asStory) => {
       ))
       .add('with square input', () => (
         <InputField direction="row" stretch={ false } square label="Input" input={{ name: 'input', onChange }} />
+      ))
+      .add('with center align', () => (
+        <InputField input={{ name: 'input', onChange }} align="center" />
       ));
   });
 };