wrapped up checkbox

Author: mxdi9i7

src/components/Cell/index.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 export const BasicUsage = () => (
-  <div className='container column grey'>
+  <div className='storybook__container column grey'>
     <Cell
       title={{ text: 'Title', fontSize: '14px' }}
       content={{ text: 'Content', fontSize: '12px' }}
@@ -23,7 +23,7 @@ export const BasicUsage = () => (
 );
 
 export const cellIcon = () => (
-  <div className='container column grey'>
+  <div className='storybook__container column grey'>
     <Cell
       titleIcon={{ name: 'location-o', size: '12px' }}
       title={{ text: 'Title', fontSize: '14px' }}
@@ -34,39 +34,39 @@ export const cellIcon = () => (
 );
 
 export const cellTag = () => (
-  <div className='container column grey'>
+  <div className='storybook__container column grey'>
     <Cell
       title={{ text: 'Title', fontSize: '14px' }}
-      Tag={<Tag type='danger' text='Tag' />}
+      tag={<Tag type='danger' text='Tag' />}
       content={{ text: 'Content', fontSize: '12px' }}
     />
   </div>
 );
 
 export const roundCell = () => (
-  <div className='container column grey'>
+  <div className='storybook__container column grey'>
     <Cell title={{ text: 'Title', fontSize: '14px' }} round />
   </div>
 );
 
 export const valueOnly = () => (
-  <div className='container column grey'>
+  <div className='storybook__container column grey'>
     <Cell content={{ text: 'Content', fontSize: '14px' }} />
   </div>
 );
 
 export const URL = () => (
-  <div className='container column grey'>
+  <div className='storybook__container column grey'>
     <Cell
       title={{ text: 'URL', fontSize: '14px' }}
-      url='www.google.com'
+      url='https://www.google.com'
       replace
     />
   </div>
 );
 
-export const Active = () => (
-  <div className='container column grey'>
+export const OnClick = () => (
+  <div className='storybook__container column grey'>
     <Cell
       title={{ text: 'Click', fontSize: '14px' }}
       click={(e) => {

src/components/Cell/index.tsx

@@ -14,7 +14,7 @@ const Cell = ({
   content,
   contentIcon,
   description,
-  Tag,
+  tag,
   url,
   replace,
   round,
@@ -66,7 +66,7 @@ const Cell = ({
           {title && (
             <span style={{ fontSize: title.fontSize }}>{title.text}</span>
           )}
-          {Tag && Tag}
+          {tag && tag}
         </div>
         <div {...contentProps}>
           {content && (

src/components/Cell/types.ts

@@ -6,7 +6,7 @@ export interface IProps {
   content?: { text: string; fontSize: string };
   contentIcon?: { name: string; size: string };
   description?: { text: string; fontSize: string };
-  Tag?: ReactElement;
+  tag?: ReactElement;
   url?: string;
   replace?: boolean;
   round?: boolean;

src/components/Checkbox/index.stories.tsx

@@ -32,12 +32,17 @@ export const LabelDisable = () => (
   </div>
 );
 
-export const Events = () => (
+export const OnChange = () => (
   <div className='storybook__container'>
-    <Checkbox labelText='On Click' clicked={() => alert('clicked')} />
     <Checkbox
       labelText='On Change'
       changed={(checked) => alert(`Checkbox is checked: ${checked}`)}
     />
   </div>
 );
+
+export const OnClick = () => (
+  <div className='storybook__container'>
+    <Checkbox labelText='On Click' clicked={() => alert('clicked')} />
+  </div>
+);

src/components/Checkbox/index.tsx

@@ -22,9 +22,10 @@ const baseClass = 'vant-checkbox';
 
 // TODO: Round/Square checkbox
 // TODO: Checkbox groups
+// TODO: Checkbox in Cells (Need to get Will to finish cell component)
 
 const Checkbox = ({
-  checked,
+  checked = false,
   changed,
   clicked,
   name,
@@ -37,23 +38,27 @@ const Checkbox = ({
 }: IProps) => {
   const [isChecked, handleCheck] = useState(checked);
 
+  const handleClick = (e) => {
+    return clicked && clicked(e);
+  };
+
   useEffect(() => {
-    changed(isChecked);
+    return changed && changed(isChecked);
   }, [isChecked]);
 
   const handleContainerClick = (e) => {
     e.preventDefault();
     if (!disabled && !labelDisabled) {
       handleCheck(!isChecked);
-      clicked(e);
+      handleClick(e);
     }
   };
 
   const handleIconClick = (e) => {
     e.preventDefault();
     if (!disabled) {
       handleCheck(!isChecked);
-      clicked(e);
+      handleClick(e);
     }
   };