feat(carousel): use prettier and complete carousel

yehuozhili · Jun 7, 2020 · 9fd3338 · 9fd3338
1 parent 31980aa
commit 9fd3338
Show file tree

Hide file tree

Showing 63 changed files with 2,774 additions and 2,032 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 100,
+    tabWidth: 4,
+    useTabs: true,
+    semi: true,
+    parser: 'typescript',
+    jsxBracketSameLine: false,
+    arrowParens: "always",
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -26,6 +26,7 @@ const loaderFn = () => {
         require('../src/components/Avatar/avatar.stories.mdx'),
         require('../src/components/Badge/badge.stories.mdx'),
         require('../src/components/Button/button.stories.mdx'),
+        require('../src/components/Carousel/carousel.stories.mdx'),
         require('../src/components/Input/input.stories.mdx'),
         require('../src/components/Switch/switch.stories.mdx'),
         require('../src/components/Radio/radio.stories.mdx'),

diff --git a/package.json b/package.json
@@ -52,7 +52,8 @@
     "build-ts": "tsc -p tsconfig.build.json",
     "build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "prepublishOnly": "npm run test:nowatch & npm run lint & npm run build & npm run changelog"
+    "prepublishOnly": "npm run test:nowatch & npm run lint & npm run build & npm run changelog",
+    "prettier": "prettier --config ./.prettierrc.js --write ./src/**/*.tsx"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/src/components/Alert/alert.tsx b/src/components/Alert/alert.tsx
@@ -1,98 +1,130 @@
-import React, { FC, useState, useEffect, ReactNode } from 'react'
-import classNames from 'classnames';
-import Button from '../Button';
-import Icon from '../Icon';
-import Transition from '../Transition';
-import { AnimationName } from '../Transition/transition';
+import React, { FC, useState, useEffect, ReactNode } from "react";
+import classNames from "classnames";
+import Button from "../Button";
+import Icon from "../Icon";
+import Transition from "../Transition";
+import { AnimationName } from "../Transition/transition";
 
-
-export interface AlertProps{
-    /**  标题 */
-    title?:string;
-    /** 类型*/
-    type?:'primary' | 'default' | 'danger'|'secondary'|'success'|'info'|'light'|'warning'|'dark'
-    /**是否有关闭按钮*/
-    close?:boolean;
-    /** 内容*/
-    description?:string|null;
-    /** 动画方向 */
-    directions?:'left'|'top'|'right'|'bottom';
-     /** 自动关闭延时时间，0表示不自动关闭 */
-    autoclosedelay?:number,
-    /** 额外类名 */
-    className?:string,
-    /** 图标 */
-    icon?:ReactNode;
-    /**启用开场动画 */
-    initAnimate?:boolean,
-    /**是否套一层div  */
-    wrapper?:boolean;
-    /** 主动关闭逻辑回调函数，如果需要主动消失，需要操作setState，或者使用上层组件的state*/
-    initiativeCloseCallback?:(setState:React.Dispatch<React.SetStateAction<boolean>>,e:React.MouseEvent<HTMLElement, MouseEvent>)=>void;
-    /** 自动关闭后的回调函数  */
-    closeCallback?:()=>void;
-    /** 使用自定义动画的类名 */
-    animateClassName?:string;
-    /** 动画持续时间*/
-    timeout?:number;
-
+export interface AlertProps {
+	/**  标题 */
+	title?: string;
+	/** 类型*/
+	type?:
+		| "primary"
+		| "default"
+		| "danger"
+		| "secondary"
+		| "success"
+		| "info"
+		| "light"
+		| "warning"
+		| "dark";
+	/**是否有关闭按钮*/
+	close?: boolean;
+	/** 内容*/
+	description?: string | null;
+	/** 动画方向 */
+	directions?: "left" | "top" | "right" | "bottom";
+	/** 自动关闭延时时间，0表示不自动关闭 */
+	autoclosedelay?: number;
+	/** 额外类名 */
+	className?: string;
+	/** 图标 */
+	icon?: ReactNode;
+	/**启用开场动画 */
+	initAnimate?: boolean;
+	/**是否套一层div  */
+	wrapper?: boolean;
+	/** 主动关闭逻辑回调函数，如果需要主动消失，需要操作setState，或者使用上层组件的state*/
+	initiativeCloseCallback?: (
+		setState: React.Dispatch<React.SetStateAction<boolean>>,
+		e: React.MouseEvent<HTMLElement, MouseEvent>
+	) => void;
+	/** 自动关闭后的回调函数  */
+	closeCallback?: () => void;
+	/** 使用自定义动画的类名 */
+	animateClassName?: string;
+	/** 动画持续时间*/
+	timeout?: number;
 }
 
-export const Alert:FC<AlertProps> = function(props:AlertProps){
-    const {title,type,timeout,description,animateClassName,directions,autoclosedelay,className,initAnimate,wrapper,closeCallback,initiativeCloseCallback}=props
-    const classes = classNames('bigbear-alert',`bigbear-alert-${type}`,className?className:'')
-    const [state,setState]=useState(!initAnimate)
-    useEffect(()=>{
-        if(initAnimate){
-            setState(true)
-        }
-        let handler:number;
-        if(autoclosedelay){
-            handler=window.setTimeout(() => {
-                setState(false)
-                if(closeCallback)closeCallback()
-            }, autoclosedelay);
-        }
-        return ()=>clearTimeout(handler)
-    },[autoclosedelay, closeCallback, initAnimate])
-    return(
-        <Transition in={state} animation={`zoom-in-${directions}` as AnimationName}
-        classNames={animateClassName?animateClassName:''}
-         timeout={timeout!} wrapper={wrapper} > 
-        <div className={classes} >
-
-           <span>
-           {
-                props.icon&&props.icon
-            }
-               {title}</span>
-            {
-                description&&<span>{description}</span>
-            }
-        {
-            props.close&&<Button btnType={type} onClick={(e)=>{
-                if(initiativeCloseCallback){
-                    initiativeCloseCallback(setState,e)
-                }else{
-                    setState(false);
-                }}}><Icon icon='times'></Icon></Button>
-
-        }
-        </div>
-        </Transition>
-    )
-}
+export const Alert: FC<AlertProps> = function(props: AlertProps) {
+	const {
+		title,
+		type,
+		timeout,
+		description,
+		animateClassName,
+		directions,
+		autoclosedelay,
+		className,
+		initAnimate,
+		wrapper,
+		closeCallback,
+		initiativeCloseCallback
+	} = props;
+	const classes = classNames(
+		"bigbear-alert",
+		`bigbear-alert-${type}`,
+		className ? className : ""
+	);
+	const [state, setState] = useState(!initAnimate);
+	useEffect(() => {
+		if (initAnimate) {
+			setState(true);
+		}
+		let handler: number;
+		if (autoclosedelay) {
+			handler = window.setTimeout(() => {
+				setState(false);
+				if (closeCallback) closeCallback();
+			}, autoclosedelay);
+		}
+		return () => clearTimeout(handler);
+	}, [autoclosedelay, closeCallback, initAnimate]);
+	return (
+		<Transition
+			in={state}
+			animation={`zoom-in-${directions}` as AnimationName}
+			classNames={animateClassName ? animateClassName : ""}
+			timeout={timeout!}
+			wrapper={wrapper}
+		>
+			<div className={classes}>
+				<span>
+					{props.icon && props.icon}
+					{title}
+				</span>
+				{description && <span>{description}</span>}
+				{props.close && (
+					<Button
+						btnType={type}
+						onClick={(e) => {
+							if (initiativeCloseCallback) {
+								initiativeCloseCallback(setState, e);
+							} else {
+								setState(false);
+							}
+						}}
+					>
+						<Icon icon="times"></Icon>
+					</Button>
+				)}
+			</div>
+		</Transition>
+	);
+};
 
-Alert.defaultProps={
-    title:'',
-    type:'default',
-    close:false,
-    description:null,
-    directions:'top',
-    autoclosedelay:0,
-    initAnimate:false,
-    wrapper:false,
-    timeout:300
-}
+Alert.defaultProps = {
+	title: "",
+	type: "default",
+	close: false,
+	description: null,
+	directions: "top",
+	autoclosedelay: 0,
+	initAnimate: false,
+	wrapper: false,
+	timeout: 300
+};
 
-export default Alert;
+export default Alert;
diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx
@@ -1,2 +1,2 @@
-import Alert from './alert'
-export default Alert;
+import Alert from "./alert";
+export default Alert;
diff --git a/src/components/AutoComplete/autocomplete.example.tsx b/src/components/AutoComplete/autocomplete.example.tsx
@@ -1,41 +1,51 @@
-import React from 'react';
-import AutoComplete, { DataSourceType } from './autocomplete'
-
-
-const data=['yehuozhili','bigbear','nike','hello kitty','shop','eat','pikaqiu','gobigger','dell'];
-const myfilter=(query:string)=>{
-    return data.filter(name=>name.includes(query)).map(v=>({value:v}))
-}
-
-
-const AutocompleteExample =()=>{
-    return <AutoComplete renderFilter={myfilter} prepend='autocomplete'
-    selectCallback={(item)=>console.log(item)}
-    callback={(e)=>console.log(e)}
-    ></AutoComplete>
-}
+import React from "react";
+import AutoComplete, { DataSourceType } from "./autocomplete";
+
+const data = [
+	"yehuozhili",
+	"bigbear",
+	"nike",
+	"hello kitty",
+	"shop",
+	"eat",
+	"pikaqiu",
+	"gobigger",
+	"dell"
+];
+const myfilter = (query: string) => {
+	return data.filter((name) => name.includes(query)).map((v) => ({ value: v }));
+};
+
+const AutocompleteExample = () => {
+	return (
+		<AutoComplete
+			renderFilter={myfilter}
+			prepend="autocomplete"
+			selectCallback={(item) => console.log(item)}
+			callback={(e) => console.log(e)}
+		></AutoComplete>
+	);
+};
 export default AutocompleteExample;
 
-
-const ToUseTemplete=()=>{
-    return (
-    <AutoComplete renderOption={(item)=>(<h1>{item.value}</h1>)} renderFilter={myfilter}></AutoComplete>
-    )
-}
-export {ToUseTemplete}
-
-
-const asyncfilter:(query: string) => Promise<DataSourceType[]>=(query:string)=>{
-    return new Promise((res)=>{
-        setTimeout(() => {
-            res(data.filter(name=>name.includes(query)).map(v=>({value:v})))
-        }, 1000);
-    })
-}
-
-
-export const AsyncTest=()=>{
-    return (
-        <AutoComplete renderFilter={asyncfilter} ></AutoComplete>
-    )
-}
+const ToUseTemplete = () => {
+	return (
+		<AutoComplete
+			renderOption={(item) => <h1>{item.value}</h1>}
+			renderFilter={myfilter}
+		></AutoComplete>
+	);
+};
+export { ToUseTemplete };
+
+const asyncfilter: (query: string) => Promise<DataSourceType[]> = (query: string) => {
+	return new Promise((res) => {
+		setTimeout(() => {
+			res(data.filter((name) => name.includes(query)).map((v) => ({ value: v })));
+		}, 1000);
+	});
+};
+
+export const AsyncTest = () => {
+	return <AutoComplete renderFilter={asyncfilter}></AutoComplete>;
+};