Merge pull request mxdi9i7#69 from mxdi9i7/will/fixed-cell

Will/Cell Component

Author: mxdi9i7

src/components/Cell/index.scss

@@ -21,6 +21,7 @@ $baseClass: 'vant-cell';
   .#{$baseClass}__block {
     display: flex;
     justify-content: space-between;
+    cursor: pointer;
   }
 
   .#{$baseClass}__title,

src/components/Cell/index.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Cell from '.';
 import Tag from '../Tag';
 import '../../styles/stories.scss';
@@ -65,6 +66,17 @@ export const URL = () => (
   </div>
 );
 
+export const checkbox = () => (
+  <div className='storybook__container column grey'>
+    <Cell
+      title={{ text: 'Title', fontSize: '14px' }}
+      content={{ text: 'Content', fontSize: '12px' }}
+      description={{ text: 'description', fontSize: '12px' }}
+      checkbox={{ checkedColor: '#b90000' }}
+    />
+  </div>
+);
+
 export const OnClick = () => (
   <div className='storybook__container column grey'>
     <Cell

src/components/Cell/index.tsx

@@ -1,25 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import classnames from '../../utils/classNames';
 
 import './index.scss';
 import Icon from '../Icons';
+import Checkbox from '../Checkbox';
 import { IProps } from './types';
 
 const baseClass = 'vant-cell';
 
 const Cell = ({
+  url,
+  click,
   title,
   titleIcon,
   content,
-  contentIcon,
+  contentIcon = url || click ? { name: 'arrow', size: '12px' } : null,
   description,
+  checkbox,
   tag,
-  url,
   replace,
-  round,
-  click
+  round
 }: IProps) => {
+  const [isActive, setActive] = useState(false);
+
   const CustomTag = url ? 'a' : 'div';
   const containerProps = {
     className: classnames(`${baseClass}__container`, []),
@@ -58,6 +62,14 @@ const Cell = ({
     });
   }
 
+  if (checkbox) {
+    Object.assign(containerProps, {
+      onClick: () => {
+        setActive(!isActive);
+      }
+    });
+  }
+
   return (
     <CustomTag {...containerProps}>
       <div className={`${baseClass}__block`}>
@@ -68,14 +80,18 @@ const Cell = ({
           )}
           {tag && tag}
         </div>
-        <div {...contentProps}>
-          {content && (
-            <p style={{ fontSize: content.fontSize }}>{content.text}</p>
-          )}
-          {contentIcon && (
-            <Icon name={contentIcon.name} size={contentIcon.size} />
-          )}
-        </div>
+        {checkbox ? (
+          <Checkbox isActive={isActive} checkedColor={checkbox.checkedColor} />
+        ) : (
+          <div {...contentProps}>
+            {content && (
+              <p style={{ fontSize: content.fontSize }}>{content.text}</p>
+            )}
+            {contentIcon && (
+              <Icon name={contentIcon.name} size={contentIcon.size} />
+            )}
+          </div>
+        )}
       </div>
       {description && (
         <p style={{ fontSize: description.fontSize }}>{description.text}</p>

src/components/Cell/types.ts

@@ -4,8 +4,9 @@ export interface IProps {
   title?: { text: string; fontSize: string };
   titleIcon?: { name: string; size: string };
   content?: { text: string; fontSize: string };
-  contentIcon?: { name: string; size: string };
+  contentIcon?: { name: string; size: string } | null;
   description?: { text: string; fontSize: string };
+  checkbox?: { checkedColor: string };
   tag?: ReactElement;
   url?: string;
   replace?: boolean;

src/components/Checkbox/index.tsx

@@ -14,6 +14,7 @@ export interface IProps {
   labelText?: string;
   disabled?: boolean;
   labelDisabled?: boolean;
+  isActive?: boolean;
   changed?: Function;
   clicked?: Function;
 }
@@ -34,7 +35,8 @@ const Checkbox = ({
   labelText,
   inactiveIcon = 'passed',
   disabled,
-  labelDisabled
+  labelDisabled,
+  isActive
 }: IProps) => {
   const [isChecked, handleCheck] = useState(checked);
 
@@ -46,6 +48,10 @@ const Checkbox = ({
     return changed && changed(isChecked);
   }, [isChecked]);
 
+  useEffect(() => {
+    isActive ? handleCheck(true) : handleCheck(false);
+  }, [isActive]);
+
   const handleContainerClick = (e) => {
     e.preventDefault();
     if (!disabled && !labelDisabled) {