作者:张万合

邮箱：60zy@163.com

快速开始

npm

npm install vikingship-whzhang --save

use

import {Button,Menu,Icon,Upload,Select} from 'vikingship-whzhang'
import 'vikingship-whzhang/dist/index.css'

``sh

Select Component interface

interface SelectProps {
  onChange?:(value)=>void;
  placeholder?:string;
  dataSource:any;
  styles?: React.CSSProperties;
  theme?: ThemeProps;
  values?:{[key:string]:number};
}

Button Component code eg:

 //获取select组件选择数据的方法
 function handleClcik(selected){
     console.log("selected",selected)
 }
 //数据源
 const dataSource=[{title:"汽车",value:1},{title:"卡车",value:2},{title:"摩托车",value:3}]
 const values=[1,2]

<Select placeholder={"请选择"} values={values} onChange={handleClcik}  dataSource={dataSource}></Select>

Button Component interface

interface BaseButtonProps {
    className?:string;
    disabled?:boolean;
    size?:ButtonSize;
    btnType?:ButtonType;
    children:React.ReactNode;
    href?:string;

}

Button Component code eg:

<ThemeContext.Provider value={themes.blue}>
    <header className="App-header">
        <Button autoFocus={true} onClick={() => alert("hehe")}>Hello</Button>
        <Button disabled={true}>Disabled Button</Button>
        <Button btnType={ButtonType.Primary} size={ButtonSize.Large}>Large Primary</Button>
        <Button btnType={ButtonType.Danger} size={ButtonSize.Small}>Small Danger</Button>
        <Button btnType={ButtonType.Link}>Baidu Link</Button>
        <Button disabled={true} btnType={ButtonType.Link}>Disabled Link</Button>

    </header>
</ThemeContext.Provider>

Upload Component interface

interface IUploadProps {
    action:string,
    defaultFileList?:UploadFile[],
    onSuccess?:(data:any,file:any)=>void,
    onProgress?:(percentage:number,file:File)=>void,
    beforeUpload?:(file:File)=>boolean | Promise<File>,
    onChange?:(file:File)=>void;
    onError?:(err:any,file:File)=>void;
    onRemove?:(file:UploadFile)=>void;
    headers?:{[key:string]:any};
    name?:string;
    data?:{[key:string]:any};
    withCredentials?:boolean;
    multiple?:boolean;
    accept?:string,
    drag?:boolean
}

Upload Code eg:

<Upload
    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
    defaultFileList={[]}
    onProgress={(percentage, file)=>console.log(percentage,file)}
    onSuccess={(data,file)=>console.log(data,file,'success')}
    onChange={(file)=>console.log(file,'onChange')}
    onError={(err,file)=>console.log(err,file,'error')}
    beforeUpload={beforeUpload}
    name='fileName'
    data={{'key':'1'}}
    headers={{'X-powered-By':'vikingship'}}
    accept=".jpg"
    multiple
    drag={true}
>
    <Icon icon={'upload'} size={'5x'} theme={"secondary"}/>
    <br/>
    <p>drag file over to upload</p>
</Upload>

    

<Upload
    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
    defaultFileList={[]}
    onProgress={(percentage, file)=>console.log(percentage,file)}
    onSuccess={(data,file)=>console.log(data,file,'success')}
    onChange={(file)=>console.log(file,'onChange')}
    onError={(err,file)=>console.log(err,file,'error')}
    beforeUpload={beforeUpload}
    name='fileName'
    data={{'key':'1'}}
    headers={{'X-powered-By':'vikingship'}}
    accept=".jpg"
    multiple
    drag
>
    <Button btnType={ButtonType.Primary}>upload</Button>
</Upload>

Menu Component interface

export interface MenuProps {
    defaultIndex?:string,
    className?:string,
    mode?:MenuMode,
    style?:React.CSSProperties,
    onSelect?:SelectCallback,
    defaultOpenSubMenus?:string[]
}

Menu Code eg:

<Menu defaultIndex={"0"} mode={'vertical'} defaultOpenSubMenus={['3']} onSelect={(index)=>console.log(`menu component click menuItem${index}`)}>
    <MenuItem>cool lick</MenuItem>
    <MenuItem disabled={true}>cool lick 2</MenuItem>
    <MenuItem>cool lick 3</MenuItem>
    <MenuItem>cool lick 4</MenuItem>
    <SubMenu title={"subMenu"}>
        <MenuItem>cool lick 5</MenuItem>
        <MenuItem>cool lick 6</MenuItem>
    </SubMenu>
</Menu>

Select Component interface

export interface ProgressProps {
  percent: number;
  strokeHeight?: number;
  showText?: boolean;
  styles?: React.CSSProperties;
  theme?: ThemeProps;
}

Select Code eg:

<Select percent={50} strokeHeight={20} showText={true}/>

持续更新，敬请期待