112 |
113 | {icon && icon}
114 | {title}
115 |
116 | {description && {description}}
117 | {children}
118 | {close && (
119 |
131 | )}
132 |
133 | {item.value}
} 35 | renderFilter={myfilter} 36 | >10 | 11 | # AutoComplete 自动补全 12 |
13 | 14 | ## 基本用法 15 | 需要自行提供数据，以及对数据做出筛选的函数，当用户输入时，回调筛选函数进行提示。 16 | 17 | 此组件是在Input组件上做了层封装。 18 | 19 | 20 | 输入`i`字母试试自动补全功能 ↓ 21 | 22 | ```jsx 23 | const data=['yehuozhili','bigbear','nike','hello kitty','shop','eat','pikaqiu','gobigger','dell']; 24 | const myfilter=(query:string)=>{ 25 | return data.filter(name=>name.includes(query)).map(v=>({value:v})) 26 | } 27 | const AutocompleteExample =()=>{ 28 | return
39 |
41 | {item.value}
)} renderFilter={myfilter}>
61 |
63 |
87 |
89 | 94 | 95 | ## 属性详情 96 | 97 |
44 |
45 |
48 |
49 |
50 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/Badge/badge.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import Badge from './badge'
3 | import Button from '../Button'
4 | import Icon from '../Icon';
5 | import {BadgeExample} from './badge.example'
6 |
7 |
8 |
9 |
10 | 50 |
点击按钮控制角标数字增减，99以上会变成99+：
51 |
52 |
53 |
54 | 11 | 12 | # Badge 徽章 13 |
14 | 15 | badge可以单独使用，也可以包裹元素使用，包裹元素会移动到元素右上角。 16 | 17 |
20 | } type={'dark'}>
25 | } type={'danger'}>
28 |
29 |
83 |
84 |
85 |
86 |
87 |
92 | )
93 | }
94 | ```
95 |
96 |
97 | ## 属性详情
98 |
99 | 87 |
点击按钮控制角标数字增减，99以上会变成99+：
88 |
89 |
90 |
91 |
39 | {count || dot ? (
40 |
51 | );
52 | };
53 | Badge.defaultProps = {
54 | type: "danger",
55 | visible: true,
56 | dot: false,
57 | count: ""
58 | };
59 |
60 | export default Badge;
61 |
--------------------------------------------------------------------------------
/src/components/Badge/index.tsx:
--------------------------------------------------------------------------------
1 | import Badge from "./badge";
2 |
3 | export default Badge;
4 |
--------------------------------------------------------------------------------
/src/components/Button/_style.scss:
--------------------------------------------------------------------------------
1 |
2 | .btn{
3 | @include button-size($btn-padding-x,$btn-padding-y,$btn-font-size,$border-radius);
4 |
5 | background-image: none;
6 | border:$btn-border-width solid transparent;
7 | color:$body-color;
8 | cursor: pointer;
9 | display: inline-block;
10 | font-weight: $btn-font-weight;
11 | line-height:$btn-line-height;
12 | position: relative;
13 | text-align: center;
14 | transition: $btn-transition;
15 | vertical-align: middle;
16 | white-space: nowrap;
17 | &[disabled]{
18 | cursor:not-allowed;
19 | opacity: $btn-disabled-opacity;
20 | > *{
21 | pointer-events: none;
22 | }
23 | }
24 | }
25 | //size
26 |
27 | .btn-size-lg{
28 | @include button-size($btn-padding-x-lg,$btn-padding-y-lg,$btn-font-size-lg,$border-radius-lg);
29 | }
30 | .btn-size-sm{
31 | @include button-size($btn-padding-x-sm,$btn-padding-y-sm,$btn-font-size-sm,$border-radius-sm);
32 | }
33 | .btn-size-default{
34 | @include button-size($btn-padding-x,$btn-padding-y,$btn-font-size,$border-radius);
35 | }
36 | //type
37 | @each $key,$val in $theme-colors{
38 | .btn-type-#{$key}{
39 | @include button-style(nth($val, 1),nth($val,2));
40 | @include neufactory(nth($val, 1),nth($val,3),nth($val,4));
41 | }
42 | }
43 |
44 | .btn-type-link{
45 | @include neufactory($white, $neu-whiteshadow1,$neu-whiteshadow2);
46 |
47 | border:1px dashed lighten($btn-link-color,10%);
48 | color: $btn-link-color;
49 | font-weight: $font-weight-base;
50 | text-decoration: $link-decoration;
51 | &:hover{
52 | color: $btn-link-hover-color;
53 | text-decoration: $link-hover-decoration;
54 | }
55 | &:focus{
56 | text-decoration: $link-hover-decoration;
57 | }
58 | &.disabled{
59 | color:$btn-link-disabled-color;
60 | pointer-events: none;
61 | border:1px dashed $btn-link-disabled-color;
62 | }
63 | }
64 |
65 | .btn-type-neu-w-up{
66 | @include neu-white($btn-neu-normal);
67 |
68 | color: $gray-9;
69 | font-weight: $font-weight-bold;
70 | &:hover{
71 | outline: none;
72 | }
73 | &:focus{
74 | outline: none;
75 | }
76 | &.disabled{
77 | pointer-events: none;
78 | }
79 | }
80 | .btn-type-neu-w-down{
81 | @include neu-white-down($btn-neu-normal);
82 |
83 | color: $gray-9;
84 | font-weight: $font-weight-bold;
85 | &:hover{
86 | outline: none;
87 | }
88 | &:focus{
89 | outline: none;
90 | }
91 | &.disabled{
92 | pointer-events: none;
93 | }
94 | }
95 | .btn-type-neu-w-co{
96 | @include neu-white-co($btn-neu-normal);
97 |
98 | color: $gray-9;
99 | font-weight: $font-weight-bold;
100 | &:hover{
101 | outline: none;
102 | }
103 | &:focus{
104 | outline: none;
105 | }
106 | &.disabled{
107 | pointer-events: none;
108 | }
109 | }
110 | .btn-type-neu-w-fl{
111 | @include neu-white-fl($btn-neu-normal);
112 |
113 | color: $gray-9;
114 | font-weight: $font-weight-bold;
115 | &:hover{
116 | outline: none;
117 | }
118 | &:focus{
119 | outline: none;
120 | }
121 | &.disabled{
122 | pointer-events: none;
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/components/Button/button.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, fireEvent } from "@testing-library/react";
3 | import Button, { ButtonProps } from "./button";
4 |
5 | const defaultProps = {
6 | onClick: jest.fn()
7 | };
8 |
9 | const testProps: ButtonProps = {
10 | btnType: "primary",
11 | size: "lg",
12 | className: "testprops"
13 | };
14 |
15 | const disabledProps: ButtonProps = {
16 | disabled: true,
17 | onClick: jest.fn()
18 | };
19 |
20 | describe("test Button component", () => {
21 | it("should render the correct default button", () => {
22 | const wrapper = render();
23 | const ele = wrapper.getByText("hello") as HTMLButtonElement;
24 | expect(ele).toBeInTheDocument();
25 | expect(ele.tagName).toEqual("BUTTON");
26 | expect(ele).toHaveClass("btn btn-type-default");
27 | expect(ele.disabled).toBeFalsy();
28 | fireEvent.click(ele);
29 | expect(defaultProps.onClick).toHaveBeenCalled();
30 | });
31 | it("should render the correct component based on different props ", () => {
32 | const wrapper = render();
33 | const ele = wrapper.getByText("hello");
34 | expect(ele).toBeInTheDocument();
35 | expect(ele).toHaveClass("btn-type-primary testprops");
36 | });
37 | it("should render a link when btnType equal link", () => {
38 | const wrapper = render();
39 | const ele = wrapper.getByText("linkbutton");
40 | expect(ele).toBeInTheDocument();
41 | expect(ele.tagName).toEqual("A");
42 | expect(ele).toHaveClass("btn btn-type-link");
43 | });
44 | it("should render disabled when disabled set", () => {
45 | const wrapper = render();
46 | const ele = wrapper.getByText("hello") as HTMLButtonElement;
47 | expect(ele).toBeInTheDocument();
48 | expect(ele.disabled).toBeTruthy();
49 | fireEvent.click(ele);
50 | expect(disabledProps.onClick).not.toHaveBeenCalled();
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/src/components/Button/button.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, ButtonHTMLAttributes, AnchorHTMLAttributes, useEffect, useRef } from "react";
2 | import classNames from "classnames";
3 |
4 | export type ButtonSize = "lg" | "sm" | "default";
5 | export type ButtonType =
6 | | "primary"
7 | | "default"
8 | | "danger"
9 | | "secondary"
10 | | "success"
11 | | "info"
12 | | "light"
13 | | "warning"
14 | | "dark"
15 | | "link";
16 |
17 | export interface BaseButtonProps {
18 | className?: string;
19 | disabled?: boolean;
20 | /** 是否底色渐变 */
21 | lineargradient?: boolean;
22 | /** 设置按钮大小 */
23 | size?: ButtonSize;
24 | /**
25 | * 设置按钮类型
26 | */
27 | btnType?: ButtonType;
28 | /** link类型才有效的url */
29 | href?: string;
30 | /** 回调ref，组件加载完成回调ref，返回值会在卸载组件时调用 */
31 | refcallback?: (
32 | ref: React.RefObject
46 | {count}
47 |
48 | ) : null}
49 | {children ? children : null}
50 | 9 | 10 | # Card 卡片 11 |
12 | 13 | ## 基本使用 14 | 15 |
60 |
}
63 |
64 | style={{width:'300px'}}
65 | >
66 | yehuozhili
61 | bigbear-ui
62 |
67 |
70 |
73 |
76 |
77 |
78 |
76 |
92 | );
93 | }
94 |
95 | Card.defaultProps = {
96 | type: "default",
97 | cardType: "default",
98 | elevateCard: "block",
99 | imgType: "default",
100 | elevateImg: "block",
101 | bottomType: "default",
102 | elevateBottom: "block"
103 | };
104 |
105 | export default Card;
106 |
--------------------------------------------------------------------------------
/src/components/Card/index.tsx:
--------------------------------------------------------------------------------
1 | import Card from "./card";
2 |
3 | export default Card;
4 |
--------------------------------------------------------------------------------
/src/components/Carousel/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-carousel-wrapper{
2 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
3 |
4 | padding:10px;
5 | .bigbear-carousel-viewport{
6 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
7 |
8 | border-radius: 10px;
9 | display: flex;
10 | overflow: hidden;
11 | position: relative;
12 |
13 | }
14 | .bigbear-carousel-ul{
15 | align-items: center;
16 | display: flex;
17 | justify-content: center;
18 | list-style-type: none;
19 | padding:10px;
20 | .bigbear-carousel-li{
21 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
22 | @include square(16px);
23 |
24 | border-radius: 50%;
25 | cursor: pointer;
26 | margin:5px;
27 | position: relative;
28 | &::after{
29 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
30 | @include square(10px);
31 |
32 | border-radius: 50%;
33 | content: '';
34 | display: block;
35 | left:3px;
36 | opacity: 0;
37 | position: absolute;
38 | top:3px;
39 | transform: scale(0);
40 | transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
41 | }
42 | &.carousel-active::after{
43 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
44 | @include square(10px);
45 |
46 | border-radius: 50%;
47 | content: '';
48 | display: block;
49 | left:3px;
50 | opacity: 1;
51 | position: absolute;
52 | top:3px;
53 | transform: scale(1);
54 | transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
55 | }
56 | }
57 | }
58 | }
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | .left{
67 | left:300px;
68 | transform: translateX(33.333%);
69 | transition: all 0.5s ease
70 | }
71 |
72 | .left.bigbear-carousel-exit-active {
73 | transform: translateX(33.333%);
74 | transition: none;
75 | }
76 | .left.bigbear-carousel-enter {
77 | transform: translateX(33.333%);
78 | transition: all 0.5s ease;
79 | }
80 | .left.bigbear-carousel-enter-active {
81 | transform: translateX(33.333%);
82 | transition: all 0.5s ease;
83 | }
84 | .left.bigbear-carousel-enter-done{
85 | transform: translateX(0);
86 | transition: all 0.5s ease;
87 | }
88 |
89 |
90 | .right{
91 | transform: translateX(-33.333%);
92 | }
93 |
94 | .right.bigbear-carousel-exit-active {
95 | transform: translateX(-33.333%);
96 | transition: all 0.5s ease;
97 | }
98 | .right.bigbear-carousel-enter {
99 | transform: translateX(-33.333%);
100 | transition: all 0.5s ease;
101 | }
102 | .right.bigbear-carousel-enter-active {
103 | transform: translateX(0%);
104 | transition: all 0.5s ease;
105 | }
106 | .right.bigbear-carousel-enter-done{
107 | transform: translateX(0%);
108 | transition: all 0.5s ease;
109 | }
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/src/components/Carousel/index.tsx:
--------------------------------------------------------------------------------
1 | import Carousel from "./carousel";
2 |
3 | export default Carousel;
4 |
--------------------------------------------------------------------------------
/src/components/CheckBox/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-checkbox-wrapper{
2 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
3 |
4 | display: inline-block;
5 | padding: 5px;
6 | .bigbear-checkbox-label {
7 | cursor: pointer;
8 | margin:0;
9 | margin-left:5px;
10 | margin-right: 5px;
11 | position: relative;
12 | .bigbear-checkbox-input{
13 | opacity: 0;
14 | position: absolute;
15 | }
16 | .bigbear-checkbox-dot {
17 | @include square(20px);
18 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
19 |
20 | display: inline-block;
21 | position: relative;
22 | vertical-align: sub;
23 |
24 | }
25 | .bigbear-checkbox-dot::before{
26 | @include size(3px,15px);
27 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
28 |
29 | content: '';
30 | left:5px;
31 | opacity: 0;
32 | position: absolute;
33 | top:5px;
34 | transform:rotate(45deg) scale(0) translate(140%,-40%);
35 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
36 | }
37 | .bigbear-checkbox-dot::after{
38 | @include size(3px,9px);
39 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
40 |
41 | content: '';
42 | left:5px;
43 | opacity: 0;
44 | position: absolute;
45 | top:5px;
46 | transform:rotate(135deg) scale(0) translate(90%,-35%);
47 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
48 | }
49 | .bigbear-checkbox-dot.checkbox-active::before{
50 | @include size(3px,15px);
51 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
52 |
53 | content: '';
54 | left:5px;
55 | opacity: 1;
56 | position: absolute;
57 | top:5px;
58 | transform:rotate(45deg) scale(1) translate(140%,-40%);
59 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
60 | }
61 | .bigbear-checkbox-dot.checkbox-active::after{
62 | @include size(3px,9px);
63 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
64 |
65 | content: '';
66 | left:5px;
67 | opacity: 1;
68 | position: absolute;
69 | top:5px;
70 | transform:rotate(135deg) scale(1) translate(90%,-35%);
71 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
72 | }
73 | .bigbear-checkbox-value{
74 | padding:5px;
75 | text-shadow: 1px 1px 4px $neu-whiteshadow1, -1px -1px 4px $neu-whiteshadow2;
76 | }
77 | .checkbox-active ~ .bigbear-checkbox-value{
78 | color:$primary;
79 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
80 | }
81 | &.checkbox-disabled{
82 | cursor: not-allowed;
83 | opacity: 0.5;
84 | }
85 | }
86 | }
--------------------------------------------------------------------------------
/src/components/CheckBox/checkbox.example.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import CheckBox from "./checkbox";
3 |
4 | export function CheckBoxExample() {
5 | const data = ["check1", "check2", "check3"];
6 | const [state, setState] = useState
77 | {type === "default" && img}
78 |
79 | {type === "id" && (
80 |
86 |
81 |
84 | )}
85 | {idText}
83 |
87 |
91 | {bottomTitle}
88 | {bottomDescription}
89 | {children}
90 |
9 | {
12 | e[0]
13 | ? setState(new Array(data.length).fill(true))
14 | : setState(new Array(data.length).fill(false));
15 | }}
16 | >
17 |
18 | {
21 | e[i] = !e[i];
22 | setState([...e]);
23 | }}
24 | parentState={state}
25 | >
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/CheckBox/checkbox.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import CheckBox from './checkbox';
3 | import {CheckBoxExample} from './checkbox.example'
4 |
5 |
6 |
7 | 18 |
8 | 9 | # CheckBox 多选按钮 10 | 11 |
12 | 13 | ## 基本使用 14 | 15 |
60 | {
61 | e[0]?setState(new Array(data.length).fill(true)):setState(new Array(data.length).fill(false))
62 | }}>
63 |
64 |{
65 | e[i]=!e[i]
66 | setState([...e])
67 | }} parentState={state}>
68 |
69 | )
70 | }
71 | ```
72 |
73 | 64 |
56 | {data.map((value, index) => {
57 | const judgeStateIndex = parentState ? parentState[index] : state[index];
58 | return (
59 |
90 | );
91 | })}
92 |
93 | );
94 | }
95 |
96 | CheckBox.defaultProps = {
97 | data: [],
98 | text: true
99 | };
100 |
101 | export default CheckBox;
102 |
--------------------------------------------------------------------------------
/src/components/CheckBox/index.tsx:
--------------------------------------------------------------------------------
1 | import CheckBox from "./checkbox";
2 |
3 | export default CheckBox;
4 |
--------------------------------------------------------------------------------
/src/components/Divider/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-divider{
2 | clear:both;
3 | width: 100%;
4 | display: flex;
5 | margin:$divider-margin;
6 | line-height:$divider-line-height;
7 | white-space: nowrap;
8 | align-items: center;
9 | .bigbear-divider-inner {
10 | width: 100%;
11 | height: $divider-height;
12 | border-radius: 50px;
13 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
14 | &.bigbear-divider-el{
15 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
16 | }
17 | }
18 | .bigbear-divider-span{
19 | display: inline-block;
20 | padding: 0 1em;
21 | font-weight: $font-weight-bold;
22 |
23 | @include neu-textshadow($neu-whiteshadow1,$neu-whiteshadow2);
24 | }
25 | &.bigbear-divider-center::before{
26 | position: relative;
27 | content:'';
28 | height: $divider-height;
29 | border-radius: 50px;
30 | width: 50%;
31 | margin-top: $divider-height / 2;
32 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
33 | }
34 | &.bigbear-divider-center::after{
35 | position: relative;
36 | content:'';
37 | height: $divider-height;
38 | border-radius: 50px;
39 | width: 50%;
40 | margin-top: $divider-height / 2;
41 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
42 | }
43 |
44 | &.bigbear-divider-left::after{
45 | position: relative;
46 | content:'';
47 | height: $divider-height;
48 | border-radius: 50px;
49 | width: 100%;
50 | margin-top: $divider-height / 2;
51 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
52 | }
53 | &.bigbear-divider-right::before{
54 | position: relative;
55 | content:'';
56 | height: $divider-height;
57 | border-radius: 50px;
58 | width:100%;
59 | margin-top: $divider-height / 2;
60 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
61 | }
62 |
63 | &.bigbear-divider-elevate::after{
64 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
65 | }
66 | &.bigbear-divider-elevate::before{
67 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
68 | }
69 | }
--------------------------------------------------------------------------------
/src/components/Divider/divider.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import Divider from './divider'
3 |
4 |
5 |
6 |
7 |
8 | 9 | 10 | # Divider 分割线 11 |
12 | 13 | ## 基本使用 14 | 15 | 两种类型，一种凸起，一种凹下。 16 | 17 |
20 |
32 | 21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 22 |
23 |25 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 26 |
27 |29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 30 |
31 |
40 | Text
44 | Text
48 |
52 | 41 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 42 |
43 |45 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 46 |
47 |49 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 50 |
51 |
58 | Text
62 | Text
66 |
70 | 59 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 60 |
61 |63 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 64 |
65 |67 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 68 |
69 |
76 | Text
80 | Text
84 |
88 | 77 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 78 |
79 |81 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 82 |
83 |85 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. 86 |
87 |
26 | {children && {children}}
27 | {!children && (
28 |
33 | )}
34 |
35 | );
36 | }
37 |
38 | Divider.defaultProps = {
39 | elevate: true,
40 | direction: "center"
41 | };
42 | export default Divider;
43 |
--------------------------------------------------------------------------------
/src/components/Divider/index.tsx:
--------------------------------------------------------------------------------
1 | import Divider from "./divider";
2 |
3 | export default Divider;
4 |
--------------------------------------------------------------------------------
/src/components/Form/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-form{
2 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
3 |
4 | padding:20px;
5 | .bigbear-form-validate{
6 | color:$red;
7 | font-size: 13px;
8 | margin-bottom: $input-margin;
9 | margin-top: $input-margin;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/Form/form.example.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import useForm from "../../hooks/useForm";
3 | import Input from "../Input";
4 | import CheckBox from "../CheckBox";
5 | import Button from "../Button";
6 | import Form from "./form";
7 |
8 | function FormExample() {
9 | const [handleSubmit, callbackObj, validate, blurObj] = useForm([
10 | {
11 | name: "input1",
12 | validate: [{ validate: (e) => e !== "", message: "用户名不能为空" }]
13 | },
14 | {
15 | name: "input2",
16 | validate: [
17 | { validate: (e) => e !== "", message: "密码不为空" },
18 | {
19 | validate: (e) => e.length > 2 && e.length < 7,
20 | message: "密码必须大于2位或者小于7位"
21 | }
22 | ]
23 | },
24 | {
25 | name: "checkbox",
26 | validate: [
27 | {
28 | validate: (e) => e.filter((v: boolean) => v).length === 3,
29 | message: "必须3个都选上"
30 | }
31 | ]
32 | }
33 | ]);
34 | const onSubmit = (data: any) => console.log(data);
35 | return (
36 |
73 | );
74 | }
75 |
76 | export default FormExample;
77 |
--------------------------------------------------------------------------------
/src/components/Form/form.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import FormExample from './form.example';
3 | import Form from './form'
4 | import { linkTo } from '@storybook/addon-links'
5 | import Button from '../Button'
6 |
7 |
8 |
9 | 10 | 11 | # Form 表单 12 | 13 |
14 | 15 | ## 基本使用 16 | 17 | Form组件就是个壳，需要结合useForm使用，useForm相比于传统封装方法灵活性更大，性能更好。 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | 30 | 31 | 36 | 37 | ```jsx 38 | function FormExample(){ 39 | const [handleSubmit,callbackObj,validate,blurObj]=useForm([ 40 | { 41 | name:'input1', 42 | validate:[{validate:(e)=>e!=='',message:'用户名不能为空'}] 43 | }, 44 | { 45 | name: 'input2', 46 | validate:[ 47 | {validate:(e)=>e!=='',message:'密码不为空'}, 48 | {validate:(e)=>e.length>2&&e.length<7,message:'密码必须大于2位或者小于7位'} 49 | ] 50 | }, 51 | { 52 | name:'checkbox', 53 | validate:[{validate:(e)=>e.filter((v:boolean)=>v).length===3,message:'必须3个都选上'}], 54 | }]) 55 | const onSubmit=(data:any)=>console.log(data) 56 | return( 57 | 77 | ) 78 | } 79 | ``` 80 | 81 | 82 |
15 | {children && children}
16 |
17 | );
18 | }
19 |
20 | export default Form;
21 |
--------------------------------------------------------------------------------
/src/components/Form/index.tsx:
--------------------------------------------------------------------------------
1 | import Form from "./form";
2 |
3 | export default Form;
4 |
--------------------------------------------------------------------------------
/src/components/Grid/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-grid-row{
2 | display: flex;
3 | align-items: center;
4 | }
5 | .bigbear-grid-col{
6 | position: relative;
7 | }
8 |
9 |
10 | @each $key,$val in $percent {
11 | @media screen and (max-width:$media-width-xs) {
12 | .bigbear-col-xs-#{$key}{
13 | width: #{$val}#{"%"};
14 | }
15 | };
16 | }
17 | //有权重问题，分开循环
18 |
19 | @each $key,$val in $percent {
20 | @media screen and (min-width:$media-width-sm) {
21 | .bigbear-col-sm-#{$key}{
22 | width: #{$val}#{"%"};
23 | }
24 | };
25 | }
26 | @each $key,$val in $percent {
27 | @media screen and (min-width:$media-width-md) {
28 | .bigbear-col-md-#{$key}{
29 | width: #{$val}#{"%"};
30 | }
31 | };
32 |
33 | }
34 | @each $key,$val in $percent {
35 | @media screen and (min-width:$media-width-lg) {
36 | .bigbear-col-lg-#{$key}{
37 | width: #{$val}#{"%"};
38 | }
39 | };
40 | }
41 | @each $key,$val in $percent {
42 | @media screen and (min-width:$media-width-xl) {
43 | .bigbear-col-xl-#{$key}{
44 | width: #{$val}#{"%"};
45 | }
46 | };
47 | }
48 | @each $key,$val in $percent {
49 | @media screen and (min-width:$media-width-xxl) {
50 | .bigbear-col-xxl-#{$key}{
51 | width: #{$val}#{"%"};
52 | }
53 | };
54 | }
--------------------------------------------------------------------------------
/src/components/Grid/grid.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import Row,{Col} from './grid'
3 |
4 |
5 |
6 |
7 | 8 | 9 | # Grid 栅格 10 |
11 | 12 | ## 基本使用 13 | 14 | 15 | grid 是由Row与Col组成的12栅格布局。 16 | 17 | xs:<576px 18 | sm:≥576px 19 | md:≥768px 20 | lg:≥992px 21 | xl:≥1200px 22 | xxl:≥1600px 23 | 24 | Row是一行，col是行内元素。简单情况就小于576和大于576就可以了。一行相同种类数字之和等于12。 25 | 26 |
29 |
30 | 12
31 |
32 |
33 | 6
34 | 6
35 |
36 |
37 | 7
38 | 5
39 |
40 |
41 | 8
42 | 4
43 |
44 |
45 | 3
46 | 9
47 |
48 |
49 |
35 | {children}
36 |
37 | );
38 | }
39 |
40 | interface RowProps extends DOMAttributes
52 | {children}
53 |
54 | );
55 | }
56 |
57 | Row.Col = Col;
58 |
59 | export default Row;
60 |
61 | export { Col };
62 |
--------------------------------------------------------------------------------
/src/components/Grid/index.tsx:
--------------------------------------------------------------------------------
1 | import Row from "./grid";
2 |
3 | export default Row;
4 |
5 | const Col = Row.Col;
6 | export { Col };
7 |
--------------------------------------------------------------------------------
/src/components/I18n/_style.scss:
--------------------------------------------------------------------------------
1 | _
--------------------------------------------------------------------------------
/src/components/I18n/i18n.example.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import I18n, { Context } from "./i18n";
3 | import Button from "../Button";
4 | import Badge from "../Badge";
5 |
6 | const zh = {
7 | language: "语言",
8 | apple: "苹果"
9 | };
10 | const en = {
11 | language: "english language",
12 | apple: "english apple"
13 | };
14 | const combinedLibrary = {
15 | zh,
16 | en
17 | };
18 | export default function I18nExampleApp() {
19 | return (
20 |
29 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/I18n/i18n.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import I18n from './i18n';
3 | import I18nExampleApp from './i18n.example'
4 |
5 |
6 |
7 |
32 |
39 |
40 |
47 | 8 | 9 | # I18n 国际化 10 |
11 | 12 | ## 基本使用 13 | 14 | 传入默认语言和library即可。 15 | 把组件放在根节点上。 16 | 需要使用国际化地方直接useContext即可。 17 | 类组件使用Context.Consumer拿到Context上的state。 18 | 19 | 默认名需要等于combinedLibrary的key名。 20 | 进行切换时，传入的也是combinedLibrary的键名。 21 | 22 | 23 | 24 | 25 | 26 | ```jsx 27 | const zh = { 28 | language: "语言", 29 | apple: "苹果" 30 | }; 31 | const en = { 32 | language: "english language", 33 | apple: "english apple" 34 | }; 35 | const combinedLibrary = { 36 | zh, 37 | en 38 | }; 39 | export default function I18nExampleApp() { 40 | return ( 41 |
50 |
69 | );
70 | }
71 | ```
72 |
73 |
74 |
53 |
60 |
61 |
68 | 10 | 11 | # Input 输入框 12 |
13 | 14 | ## 基本用法 15 | 16 | input本身是受控组件，可以通过传递setValueCallback使得状态转移至父组件。并且还可以通过ref回调操作实例。 17 | 18 |
21 |
22 |
23 |
24 |
} append={append
}>
25 |
60 | {prepend && (
61 |
83 | );
84 | };
85 |
86 | export default Input;
87 |
--------------------------------------------------------------------------------
/src/components/InputNumber/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-inputnumber-wrapper{
2 | position: relative;
3 | display: inline-block;
4 | text-align: center;
5 | .bigbear-inputnumber-next{
6 | display: inline-block;
7 | margin-left: 5px;
8 | }
9 | .bigbear-inputnumber-prev{
10 | display: inline-block;
11 | margin-right: 5px;
12 | }
13 | .bigbear-inputnumber-main{
14 | display: inline-block;
15 | vertical-align: middle;
16 | transition:all 0.2s ease-in-out;
17 | .bigbear-input-wrapper{
18 | margin:0;
19 | font-weight: $font-weight-bold;
20 | border-radius: 5px;
21 | .bigbear-input-inner{
22 | text-align: center;
23 | width: 5px;
24 | font-size: $font-size-sm;
25 | padding:0
26 | }
27 | }
28 | }
29 | }
--------------------------------------------------------------------------------
/src/components/InputNumber/index.tsx:
--------------------------------------------------------------------------------
1 | import InputNumber from "./inputnumber";
2 |
3 | export default InputNumber;
4 |
--------------------------------------------------------------------------------
/src/components/InputNumber/inputnumber.example.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import InputNumber from "./inputnumber";
3 |
4 | export default function() {
5 | const [state, setState] = useState
62 | {prepend}
63 |
64 | )}
65 | {
72 | setValueCallback ? setValueCallback(e.target.value) : setValue(e.target.value);
73 | if (callback) callback(e);
74 | }}
75 | {...restProps}
76 | />
77 | {append && (
78 |
79 | {append}
80 |
81 | )}
82 | 8 | 9 | # InputNumber 数字输入框 10 |
11 | 12 | ## 基本使用 13 | 14 | 此组件基于Input组件封装而成。 15 | 16 |
11 | 12 | # List 列表 13 |
14 | 15 | 为了适应更多用法，类名可以单独抽离出来，需要的地方加上bigbear-list-item即可有样式 16 | 17 | ## 基本使用 18 | 19 | ```jsx 20 | export const data = [ 21 | 'Racing car sprays burning fuel into crowd.', 22 | 'Japanese princess to wed commoner.', 23 | 'Australian walks 100km after outback crash.', 24 | 'Man charged over missing wedding girl.', 25 | 'Los Angeles battles huge wildfires.', 26 | ]; 27 | ``` 28 | 29 | 30 |
- {data}
- {data}
-
55 | (
console.log(e.target)}>{index}
56 | )}>{data}{child}
- console.log(e.target)} >{data}
72 | 73 | ## 属性详情 74 | 75 |
- handleClick(e)}
68 | ref={ulref}
69 | {...restProps}
70 | >
71 | {React.Children.map(children, (child, index) => {
72 | const res = renderTemplate ? (
73 |
- 74 | {renderTemplate(child, index)} 75 | 76 | ) : ( 77 |
- 78 | {child} 79 | 80 | ); 81 | return res; 82 | })} 83 |
10 | 11 | # Menu 菜单 12 |
13 | 14 | Menu需要包裹MenuItem进行使用 15 | 16 | 17 |
18 | 19 | ## 菜单类型 mode 20 |
21 | 22 | ### 横向 horizontal 23 | 24 |
53 | 54 |
56 |
58 |
59 |
60 | 63 | 64 | ## 属性详情 65 | 66 |
-
55 |
12 | 13 | # MenuItem 菜单项 14 |
15 | 16 | MenuItem是Menu或者SubMenu的子项，使用方法见Menu和SubMenu。 17 | 18 | 19 |
21 |
22 |
23 |
24 | 27 | 28 | ## 属性详情 29 | 30 |
9 | 10 | # Message 全局提示 11 |
12 | 13 | 此组件在Alert组件上做了层封装。 14 | 15 | ## directions 方位 16 | 17 |
20 |
26 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
11 | console.log(v)}>
12 |
15 |
16 |
17 | );
18 | }
19 | export function ModalExample2() {
20 | const [state, setState] = useState(false);
21 | return (
22 | balabalabala
13 |balabalabalalalalallaa
14 |
23 | console.log(v)}
28 | >
29 |
32 |
33 |
34 | );
35 | }
36 |
37 | export function ModalExample3() {
38 | const [state, setState] = useState(false);
39 | return (
40 | balabalabala
30 |balabalabalalalalallaa
31 |
41 |
42 |
45 |
46 |
47 | );
48 | }
49 |
50 | export function ModalExample4() {
51 | const [state, setState] = useState(false);
52 | return (
53 | balabalabala
43 |balabalabalalalalallaa
44 |
54 |
55 |
66 |
67 |
68 | );
69 | }
70 |
71 | export function ModalExample5() {
72 | const [state, setState] = useState(false);
73 | return (
74 | balabalabala
56 |balabalabalalalalallaa
57 |
58 |
61 |
64 |
65 |
75 |
78 |
89 |
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/src/components/MultiSelect/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-multiselect{
2 | position: relative;
3 | width: 100%;
4 | .bigbear-multiselect-display{
5 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
6 |
7 | display: flex;
8 | padding:5px;
9 | width: 100%;
10 | .bigbear-multiselect-displaytext{
11 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
12 |
13 | border-radius: 5px;
14 | display:flex;
15 | flex-grow: 1;
16 | flex-wrap: wrap;
17 |
18 | .bigbear-alert{
19 | display: flex;
20 | flex-direction:row ;
21 | flex-wrap: nowrap;
22 | margin:2px;
23 | padding:3px;
24 | span:nth-child(1){
25 | align-items: center;
26 | display: flex;
27 | font-size: 14px;
28 | margin-right: 2px;
29 | }
30 | .btn{
31 | font-size: 14px;
32 | padding:1px 3px;
33 | position: static;
34 | }
35 | }
36 |
37 | }
38 | .bigbear-multiselect-icon{
39 | align-items: center;
40 | display: flex;
41 | margin-left: 5px;
42 | width: 10px;
43 | }
44 | }
45 | .bigbear-multiselect-options{
46 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
47 |
48 | cursor: pointer;
49 | font-weight: 700;
50 | overflow-y: auto;
51 | padding:10px;
52 | position: absolute;
53 | width: 100%;
54 | >div{
55 | @include neufactory($white,$neu-whiteshadow1,$neu-whiteshadow2);
56 | @include neufactory-hover($info,$neu-infoshadow1,$neu-infoshadow2);
57 |
58 | margin:5px;
59 | padding:5px;
60 | &:hover{
61 | color:$white;
62 | }
63 | }
64 | >.bigbear-multiselect-active{
65 | @include neufactory($primary,$neu-blueshadow1,$neu-blueshadow2);
66 |
67 | color:$white;
68 |
69 | }
70 | }
71 | &.disabled{
72 | cursor: not-allowed;
73 | opacity: .5;
74 | }
75 | }
--------------------------------------------------------------------------------
/src/components/MultiSelect/index.tsx:
--------------------------------------------------------------------------------
1 | import MultiSelect from "./multiselect";
2 |
3 | export default MultiSelect;
4 |
--------------------------------------------------------------------------------
/src/components/MultiSelect/multiselect.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import MultiSelect from './multiselect';
3 | import Icon from '../Icon'
4 |
5 |
6 |
7 | balabalabala
87 |balabalabalalalalallaa
88 |8 | 9 | # MultiSelect 多选框 10 | 11 |
12 | 13 | ## 基本使用 14 | 15 | 多选框是在alert组件上进行的封装。 16 | 17 | 多选框封装不同于别的组件库，只要传数据就可以了，避免使用上过于复杂。 18 | 19 |
22 |
24 |
32 |
34 |
44 |
46 |
56 | y)} callback={(e)=>console.log(e)}>
57 |
58 | 10 | 11 | # Pagination 分页 12 |
13 | 14 | ## 基本使用 15 | 16 | 传入总数即可使用，组件会除以每页条数得到需要展示的分页数，callback获取用户选了第几页。 17 | 18 |
9 | setState(!state)}>父组件控制状态}
11 | title="balabalabalabala"
12 | visible={state}
13 | setState={setState}
14 | >
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/Progress/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-progress-wrapper{
2 | align-items: center;
3 | display:flex;
4 | padding:5px;
5 | width: 100%;
6 | .bigbear-progress-bar{
7 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
8 |
9 | border-radius: $porgress-radius;
10 | flex:1;
11 | padding: 1px;
12 | position: relative;
13 | width: 100%;
14 | .bigbear-progress-inner{
15 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
16 |
17 | background-color: $primary;
18 | background-image: linear-gradient(to right, $primary, $info);
19 | border-radius: $porgress-radius;
20 | transition:all .4s cubic-bezier(.08,.82,.17,1) 0s ;
21 | &::before{
22 | animation: bigbear-progress-active 2.4s cubic-bezier(.23,1,.32,1) infinite;
23 | background: $white;
24 | border-radius: 10px;
25 | bottom: 0;
26 | content: '';
27 | left: 0;
28 | opacity: 0;
29 | position: absolute;
30 | right: 0;
31 | top:0;
32 | }
33 |
34 | }
35 | }
36 | .bigbear-progress-number{
37 | @include neu-textshadow($neu-whiteshadow1,$neu-whiteshadow2);
38 |
39 | display: inline-block;
40 | font-weight: $font-weight-bold;
41 | margin-left: 10px;
42 | min-width: 55px;
43 | padding: 5px;
44 | text-align: center;
45 | }
46 | }
47 |
48 | @keyframes bigbear-progress-active{
49 | 0% { opacity: 0.1;
50 | width: 0;
51 | }
52 | 20% { opacity: 0.5;
53 | width: 0;
54 | }
55 | 100% { opacity: 0;
56 | width: 100%;
57 | }
58 | }
59 |
60 |
61 | .bigbear-progress-circle{
62 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
63 |
64 | border-radius: 50%;
65 | display: inline-block;
66 | position: relative;
67 | .bigbear-progress-circle-inner{
68 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
69 |
70 | border-radius: 50%;
71 | display: inline-block;
72 | font-weight: $font-weight-bold;
73 | left: 50%;
74 | position: absolute;
75 | text-align: center;
76 | top:50%;
77 | transform: translateX(-50%) translateY(-50%);
78 | }
79 | }
--------------------------------------------------------------------------------
/src/components/Progress/index.tsx:
--------------------------------------------------------------------------------
1 | import Progress from "./progress";
2 |
3 | export default Progress;
4 |
--------------------------------------------------------------------------------
/src/components/Progress/progress.example.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Button from "../Button";
3 | import Progress from "./progress";
4 |
5 | export function ProgressExample() {
6 | const [count, setCount] = useState(30);
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 |
18 | export function Progresscircle() {
19 | const [count, setCount] = useState(1);
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Progress/progress.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import Progress from './progress';
3 | import {ProgressExample,Progresscircle}from './progress.example';
4 | import Icon from '../Icon'
5 |
6 |
7 |
8 |
9 | 10 | 11 | # Progress 进度条 12 |
13 | 14 | ## 基本使用 15 | 16 | 17 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | )
37 | }
38 | ```
39 |
40 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | )
61 | }
62 | ```
63 |
64 |
65 |
45 |
89 |
100 | );
101 | } else {
102 | return (
103 |
97 | {circleText ? circleText : `${state}%`}
98 |
99 |
104 |
119 | );
120 | }
121 | }, [cicrle, circleText, countNumber, dasharray, height, progressText, size, state]);
122 |
123 | return <>{render};
124 | }
125 |
126 | Progress.defaultProps = {
127 | countNumber: true,
128 | cicrle: false,
129 | size: 100
130 | };
131 |
132 | export default Progress;
133 |
--------------------------------------------------------------------------------
/src/components/Radio/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-radio-wrapper{
2 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
3 |
4 | display: inline-block;
5 | padding: 5px;
6 | .bigbear-radio-label {
7 | cursor: pointer;
8 | margin:0;
9 | margin-left:5px;
10 | margin-right: 5px;
11 | position: relative;
12 | .bigbear-radio-input{
13 | opacity: 0;
14 | position: absolute;
15 | }
16 | .bigbear-radio-dot {
17 | @include square(20px);
18 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
19 |
20 | border-radius: 50%;
21 | display: inline-block;
22 | position: relative;
23 | vertical-align: sub;
24 |
25 | }
26 | .bigbear-radio-dot::after{
27 | @include square(10px);
28 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
29 |
30 | border-radius:50%;
31 | content: '';
32 | left:5px;
33 | position: absolute;
34 | top:5px;
35 | transform: scale(0);
36 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
37 | }
38 | .bigbear-radio-dot.radio-active::after{
39 | @include square(10px);
40 | @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
41 |
42 | border-radius:50%;
43 | content: '';
44 | left:5px;
45 | position: absolute;
46 | top:5px;
47 | transform: scale(1);
48 | transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
49 | }
50 | .bigbear-radio-value{
51 | padding:5px;
52 | text-shadow: 1px 1px 4px $neu-whiteshadow1, -1px -1px 4px $neu-whiteshadow2;
53 | }
54 | .radio-active ~ .bigbear-radio-value{
55 | color:$primary;
56 | }
57 | &.radio-disabled{
58 | cursor: not-allowed;
59 | opacity: 0.5;
60 | }
61 | }
62 | }
--------------------------------------------------------------------------------
/src/components/Radio/index.tsx:
--------------------------------------------------------------------------------
1 | import Radio from "./radio";
2 |
3 | export default Radio;
4 |
--------------------------------------------------------------------------------
/src/components/Radio/radio.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import Radio from './radio';
3 | import Icon from '../Icon'
4 |
5 |
6 |
7 |
105 |
109 |
110 | {countNumber && (
111 |
115 | {progressText ? progressText : `${state}%`}
116 |
117 | )}
118 | 8 | 9 | # Radio 单选按钮 10 | 11 |
12 | 13 | ## 基本使用 14 | 15 | 不同于别的组件库封装，直接传个数组就可以使用，大大节约代码量。 16 | 17 | 18 |
33 | {data.map((value, index) => {
34 | return (
35 |
60 | );
61 | })}
62 |
63 | );
64 | }
65 |
66 | Radio.defaultProps = {
67 | data: []
68 | };
69 |
70 | export default Radio;
71 |
--------------------------------------------------------------------------------
/src/components/Select/_style.scss:
--------------------------------------------------------------------------------
1 | .bigbear-select{
2 | cursor: pointer;
3 | display: inline-block;
4 | margin: 10px;
5 | position: relative;
6 | vertical-align: bottom;
7 | width: 120px;
8 | .bigbear-select-display{
9 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
10 |
11 | align-items: center;
12 | display: flex;
13 | height: 30px;
14 | justify-content: space-between;
15 | padding-left: 10px;
16 | padding-right: 10px;
17 | .bigbear-select-displaytext{
18 | @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
19 |
20 | flex-grow: 1;
21 | height: 80%;
22 | overflow: hidden;
23 | padding-left: 2px;
24 | padding-right: 2px;
25 | width: 100%;
26 | }
27 | .bigbear-select-icon{
28 | margin-left: 5px;
29 | }
30 | }
31 | .bigbear-select-options{
32 | @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
33 |
34 | left:10px;
35 | position: absolute;
36 | z-index: 200;
37 | >div{
38 | @include neufactory-hover($primary,$neu-blueshadow1,$neu-blueshadow2);
39 |
40 | cursor: pointer;
41 | height: 30px;
42 | padding-left:10px;
43 | padding-right: 10px;
44 | &:hover{
45 | color:$white;
46 | }
47 | }
48 | }
49 | &.disabled{
50 | cursor: not-allowed;
51 | opacity: .5;
52 | }
53 | }
54 |
55 |
--------------------------------------------------------------------------------
/src/components/Select/index.tsx:
--------------------------------------------------------------------------------
1 | import Select from "./select";
2 |
3 | export default Select;
4 |
--------------------------------------------------------------------------------
/src/components/Select/select.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import Select from './select';
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 11 | 12 | # Select 选择框 13 | 14 |
15 | 16 | ## 基本使用 17 | 18 | 如果长文字显示不全且想显示全的，可以自行设定select的宽或者调整字体大小。 19 | 20 |
23 |
24 |
25 |
26 |
27 |
28 |
40 |
43 |
44 |
61 |
73 |
93 |
94 | );
95 | }
96 |
97 | Select.defaultProps = {
98 | icon: {
64 | if (!disabled) setOpen(!open);
65 | }}
66 | >
67 |
72 |
68 | {state}
69 |
70 | {icon ? {icon}
: null}
71 |
74 | {data.map((item, index) => {
75 | let renderRes = renderTemplate ? (
76 | renderTemplate(item, index, setState, setOpen)
77 | ) : (
78 |
92 | {
80 | setState(item);
81 | setOpen(false);
82 | }}
83 | key={index}
84 | >
85 | {" "}
86 | {item}
87 |
88 | );
89 | return renderRes;
90 | })}
91 | 8 | 9 | # Switch 开关 10 |
11 | 12 | ## 基本使用 13 | 14 | 底座和按钮都可以根据喜好换颜色！ 15 | 16 |
19 |
27 |
37 |
45 |
51 |
59 |
67 |
75 | 7 | 8 | # Transition 过渡动画 9 | 10 | 11 | ```jsx 12 |
Fade
29 | {children}
: children}
29 | 9 | 10 | # Upload 上传 11 | 12 |
13 | 14 | ## 基本使用 15 | 16 |
-
18 | {flist.map((item) => {
19 | return (
20 |
-
21 |
} 24 | title={item.filename} 25 | close={true} 26 | initiativeCloseCallback={() => onRemove(item)} 27 | > 28 | {(item.status === "upload" || item.status === "ready") && ( 29 | 30 | )} 31 |
32 | );
33 | })}
34 |
64 | {flist.map((item) => {
65 | return (
66 | {
70 | onRemove(item);
71 | }}
72 | >
73 |
74 | {item.status === "success" && (
75 | 
79 | )}
80 | {(item.status === "upload" || item.status === "ready") && (
81 |
82 |
91 |
92 | );
93 | })}
94 |
95 | );
96 | }
97 | export const MemoImageList = memo(ImageList);
98 |
--------------------------------------------------------------------------------
/src/components/VirtualList/_style.scss:
--------------------------------------------------------------------------------
1 | .virtual-container{
2 | display: flex;
3 | overflow: hidden;
4 | padding-bottom: 20px;
5 |
6 | }
7 | .virtual-custom-item{
8 | width: 100%;
9 | }
--------------------------------------------------------------------------------
/src/components/VirtualList/index.tsx:
--------------------------------------------------------------------------------
1 | import VirtualList from "./virtuallist";
2 |
3 | export default VirtualList;
4 |
--------------------------------------------------------------------------------
/src/components/VirtualList/virtuallist.example.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, useEffect } from "react";
2 | import VirtualList from "./virtuallist";
3 |
4 | function MyVirtualList() {
5 | const cRef = useRef(null);
6 | const [state, setState] = useState(null);
7 | useEffect(() => {
8 | setState(cRef.current);
9 | }, []);
10 | return (
11 |
12 |
13 | {new Array(100).fill(1).map((x, y) => (
14 |
19 |
20 | );
21 | }
22 | export default MyVirtualList;
23 |
24 | function DoubleVirtual() {
25 | const cRef = useRef(null);
26 | const [state, setState] = useState(null);
27 | useEffect(() => {
28 | setState(cRef.current);
29 | }, []);
30 | return (
31 |
15 | {y}
16 |
17 | ))}
18 |
32 |
40 | {new Array(100).fill(1).map((x, y) => (
41 |
46 |
47 | );
48 | }
49 |
50 | export { DoubleVirtual };
51 |
--------------------------------------------------------------------------------
/src/components/VirtualList/virtuallist.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import MyVirtualList,{DoubleVirtual} from './virtuallist.example'
3 | import VirtualList from './virtuallist'
4 |
5 |
6 |
7 |
42 |
44 | ))}
45 | {y}
43 | 8 | 9 | # VirtualList 虚拟列表 10 | 11 |
12 | 13 | ## 基本使用 14 | 15 | scrollDom使用ref或者document.querySelector选择都行，注意获取顺序问题。 16 | 17 | children必须是数组类型的虚拟dom，而不是封装成单一的虚拟dom(比如组件库里List封装方式)，否则无效 18 | 19 | 可视范围可能需要传动态的值，效果不好都可以传大一点。 20 | 21 | 监听scroll做了节流，节流期间停止滚动就会停止渲染，可以设置节流时间。 22 | 23 | 如果有误差想调整滚动条高度，可以设置scrollbar，增大或者减少滚动条高度。 24 | 25 | ```jsx 26 | function MyVirtualList(){ 27 | const cRef = useRef(null) 28 | const [state,setState]=useState(null) 29 | useEffect(()=>{ 30 | setState(cRef.current) 31 | },[]) 32 | return ( 33 |
34 |
35 | { new Array(100).fill(1).map((x,y)=>(
36 |
39 |
40 | )
41 | }
42 | ```
43 |
44 |
45 | {y}
37 | ))}
38 | 50 | 51 | ## 多行元素 52 | 53 | 54 | ```jsx 55 | function DoubleVirtual(){ 56 | const cRef = useRef(null) 57 | const [state,setState]=useState(null) 58 | useEffect(()=>{ 59 | setState(cRef.current) 60 | },[]) 61 | return ( 62 |
63 |
64 | { new Array(100).fill(1).map((x,y)=>(
65 |
70 |
71 | )
72 | }
73 | ```
74 |
75 |
66 |
68 | ))}
69 | {y}
67 | 80 | 81 | ## 属性详情 82 | 83 | 84 |
8 | 9 | 组件内引入，第一个参数为ref实例，也就是要判定的dom，第二个参数为如果在组件外点击需要执行的函数。 10 | 11 | ```jsx 12 | useClickOutside(Ref,()=>setDropDown([])) 13 | ``` -------------------------------------------------------------------------------- /src/hooks/useClickOutside.tsx: -------------------------------------------------------------------------------- 1 | import { RefObject, useEffect } from "react"; 2 | 3 | function useClickOutside(ref: RefObject
8 | 9 | 第一个参数为原state，第二个参数为父组件state，第三个参数为原setState，最后个参数为父组件setState 10 | 11 | ```jsx 12 | function useControlReverse
9 | 10 | ## 使用方式 11 | 12 | 组件内引入，第一个参数为组件内state,第二个参数为需要延迟时间。依赖项需改为返回值。 13 | 14 | ```jsx 15 | const debouncedValue=useDebounce(state,delay) 16 | ``` -------------------------------------------------------------------------------- /src/hooks/useDebounce.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | function useDebounce(value: any, delay = 300) { 4 | const [debounceValue, setDebouncedValue] = useState(value); 5 | useEffect(() => { 6 | const handler = setTimeout(() => { 7 | setDebouncedValue(value); 8 | }, delay); 9 | return () => { 10 | clearTimeout(handler); 11 | }; 12 | }, [value, delay]); 13 | return debounceValue; 14 | } 15 | export default useDebounce; 16 | -------------------------------------------------------------------------------- /src/hooks/useForm.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks'; 2 | import FormExample from '../components/Form/form.example'; 3 | import { linkTo } from '@storybook/addon-links' 4 | import Button from '../components/Button' 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | # useForm 表单验证器 13 | 14 |
15 | 16 | ## 基本使用 17 | 18 | 传入参数为数组，需要name和validate 19 | 20 | validate是数组，每个对象必须有validate属性和message属性，其中validate需要返回布尔值，true为通过，false会显示设定的message。 21 | 22 | useForm有4个返回值： 23 | 24 | 第一个返回值可以获取useForm里维护的状态，用于最后提交表单 25 | 26 | 第二个返回值需要搭配前面传入的name组成函数放入受控组件的onchange回调中，同时传入需要维护的值。 27 | 28 | 第三个返回值用来返回验证结果，可以输出到页面或者进行判定。 29 | 30 | 第四个返回值和第二个相似，需要搭配传入的name组成函数放入受控组件的onBlur回调中，用于对dirty状态进行检测，如果不需要dirty判定可以不用。 31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 43 | 44 | 49 | 50 | ```jsx 51 | function FormExample(){ 52 | const [handleSubmit,callbackObj,validate,blurObj]=useForm([ 53 | { 54 | name:'input1', 55 | validate:[{validate:(e)=>e!=='',message:'用户名不能为空'}] 56 | }, 57 | { 58 | name: 'input2', 59 | validate:[ 60 | {validate:(e)=>e!=='',message:'密码不为空'}, 61 | {validate:(e)=>e.length>2&&e.length<7,message:'密码必须大于2位或者小于7位'} 62 | ] 63 | }, 64 | { 65 | name:'checkbox', 66 | validate:[{validate:(e)=>e.filter((v:boolean)=>v).length===3,message:'必须3个都选上'}], 67 | }]) 68 | const onSubmit=(data:any)=>console.log(data) 69 | return( 70 | 90 | ) 91 | } 92 | ``` 93 | 94 | 95 |
9 | 10 | ## 使用方式 11 | 12 | 组件内引入，第一个参数为组件内state,第二个参数为需要延迟时间，第三个参数open,true为使用false为关闭。 13 | 14 | state为true则隐藏滚动条，false则恢复滚动。 15 | 16 | 17 | ```jsx 18 | useStopScroll(state) 19 | ``` -------------------------------------------------------------------------------- /src/hooks/useStopScroll.tsx: -------------------------------------------------------------------------------- 1 | function useStopScroll(state: boolean, delay: number, open?: boolean) { 2 | if (open) { 3 | let width = window.innerWidth - document.body.clientWidth; 4 | if (state) { 5 | document.body.style.overflow = "hidden"; 6 | document.body.style.width = `calc(100% - ${width}px)`; 7 | } else { 8 | //等动画渲染 9 | setTimeout(() => { 10 | document.body.style.overflow = "auto"; 11 | document.body.style.width = `100%`; 12 | }, delay); 13 | } 14 | } 15 | } 16 | 17 | export default useStopScroll; 18 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Button } from "./components/Button"; 2 | export { default as Icon } from "./components/Icon"; 3 | export { default as Transition } from "./components/Transition"; 4 | export { default as Menu } from "./components/Menu"; 5 | export { SubMenu, MenuItem } from "./components/Menu"; 6 | export { default as Message } from "./components/Message"; 7 | export { default as Alert } from "./components/Alert"; 8 | export { default as Input } from "./components/Input"; 9 | export { default as AutoComplete } from "./components/AutoComplete"; 10 | export { default as List } from "./components/List"; 11 | export { default as Avatar } from "./components/Avatar"; 12 | export { default as VirtualList } from "./components/VirtualList"; 13 | export { default as Badge } from "./components/Badge"; 14 | export { default as Switch } from "./components/Switch"; 15 | export { default as Select } from "./components/Select"; 16 | export { default as MultiSelect } from "./components/MultiSelect"; 17 | export { default as Radio } from "./components/Radio"; 18 | export { default as CheckBox } from "./components/CheckBox"; 19 | export { default as Form } from "./components/Form"; 20 | export { default as Pagination } from "./components/Pagination"; 21 | export { default as Carousel } from "./components/Carousel"; 22 | export { default as Table } from "./components/Table"; 23 | export { default as Modal } from "./components/Modal"; 24 | export { default as Progress } from "./components/Progress"; 25 | export { default as Popconfirm } from "./components/Popconfirm"; 26 | export { default as Layout } from "./components/Layout"; 27 | export { default as Divider } from "./components/Divider"; 28 | export { default as Row } from "./components/Grid"; 29 | export { Col } from "./components/Grid"; 30 | export { default as Upload } from "./components/Upload"; 31 | export { default as InputNumber } from "./components/InputNumber"; 32 | export { default as Card } from "./components/Card"; 33 | export { default as I18n } from "./components/I18n"; 34 | 35 | export { default as useClickOutside } from "./hooks/useClickOutside"; 36 | export { default as useDebounce } from "./hooks/useDebounce"; 37 | export { message } from "./components/Message/message"; 38 | export { default as useForm } from "./hooks/useForm"; 39 | -------------------------------------------------------------------------------- /src/page/login.example.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Form, Input, Button, message, Icon, useForm } from "../index"; 3 | import { linkTo } from "@storybook/addon-links"; 4 | 5 | function Login() { 6 | const [handleSubmit, callbackObj, validate, blurObj] = useForm([ 7 | { 8 | name: "username", 9 | validate: [{ validate: (e) => e !== "", message: "用户名不能为空" }] 10 | }, 11 | { 12 | name: "password", 13 | validate: [ 14 | { validate: (e) => e !== "", message: "密码不为空" }, 15 | { 16 | validate: (e) => e.length > 2 && e.length < 7, 17 | message: "密码必须大于2位或者小于7位" 18 | } 19 | ] 20 | } 21 | ]); 22 | const onSubmit = (data: any) => { 23 | if ( 24 | validate.username.length === 0 && 25 | validate.password.length === 0 && 26 | data && 27 | data.username && 28 | data.password 29 | ) { 30 | console.log(data); 31 | message.info("进入提交流程"); 32 | } else { 33 | message.danger("验证失败", {}); 34 | } 35 | }; 36 | return ( 37 | <> 38 |
42 | 用户登录
43 |
44 |
45 |
102 |
103 | );
104 | }
105 | export default Login;
106 |
--------------------------------------------------------------------------------
/src/page/login.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
2 | import LoginPage from './login.example';
3 |
4 |
5 |
6 |
7 | 8 | 9 | # Login Page 登录页 10 |
11 | 12 |
14 |
18 |
15 |
17 |
61 | 用户登录
62 |
63 |
64 |
117 |
118 | );
119 | }
120 | export default Login;
121 |
122 |
123 | ```
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 24 | 25 | ## 安装 26 | 使用 npm 或 yarn 安装 27 | 28 | ``` 29 | $ npm install bigbear-ui --save 30 | ``` 31 | 32 | ## 引入样式 33 | 34 | ``` 35 | import 'bigbear-ui/dist/index.css'; 36 | ``` 37 | ## 导入组件 38 | 39 | ``` 40 | import {componentName} from 'bigbear-ui'; 41 | ``` 42 | 43 | ## 在线文档 44 | 45 | https://yehuozhili.github.io/bigbear-ui/ 46 | 47 |
48 | 49 | ## 本地文档 50 | 51 | 下载代码，npm安装，使用`npm run storybook`即可获得本地文档。 52 | ``` 53 | git clone https://github.com/yehuozhili/bigbear-ui.git 54 | npm install 55 | npm run storybook 56 | ``` 57 | ## 使用scss 58 | 59 | scss放入bigbear-ui/dist/esm/styles/index.scss。scss导入了css可以不用导了。 60 | ``` 61 | @import "bigbear-ui/dist/esm/styles/index.scss"; 62 | ``` 63 | 64 | ## 使用bigbear-ui-cli 65 | 66 | 目前暂时只制作了一个模板供下载。如果需要react-router+redux+thunk以及mock数据可以使用此模板快速开发。 67 | 68 | 69 | https://www.npmjs.com/package/bigbear-ui-cli 70 | 71 | ``` 72 | npm i bigbear-ui-cli -g 73 | ``` 74 | 75 | ## 项目demo 76 | 77 | http://94.191.80.37:6698/#/ 78 | 79 |
80 | 81 | 82 | ## 制作初衷 83 | 84 | 制作一个属于自己的组件库应该是每个前端人员都有的梦想，有时候自己写出某些好的组件也想记录下来。 85 | 86 |
87 | 88 | ## 设计理念 89 | 90 | 新拟物风格早就存在，但是这种风格受限性很强，特别是对于背景色的要求，因为只有通过背景色制造的高光和加深才能制作出完美的凸起和凹下。 91 | 92 | 最初想法可能是做个浅色的风格和一个深色的风格，但是后来觉得，这样定制化过强，大部分时候，场景都是比较复杂的，也并不需要特别完美的定制效果，于是我将阴影效果进行改造，做出个比较通用的效果。 93 | 94 | 这种风格最适合做小工具，同时组件库体积又小，避免占太多空间。 95 | 96 | 97 |
98 | 99 | -------------------------------------------------------------------------------- /src/styles/_animation.scss: -------------------------------------------------------------------------------- 1 | @include zoom-animation('top', scaleY(0), scaleY(1), center top); 2 | @include zoom-animation('left', scale(.45, .45), scale(1, 1), top left); 3 | @include zoom-animation('right', scale(.45, .45), scale(1, 1), top right); 4 | @include zoom-animation('bottom', scaleY(0), scaleY(1), center bottom); 5 | @include zoom-animation('allscale',scaleY(0,0),scale(1, 1),center); 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/styles/_color.scss: -------------------------------------------------------------------------------- 1 | 2 | @each $key,$val in $main-colors { 3 | .bigbear-background-#{$key}{ 4 | background-color: $val; 5 | } 6 | .bigbear-color-#{$key}{ 7 | color:$val 8 | } 9 | } 10 | @each $key,$val in $neutral-colors { 11 | .bigbear-background-#{$key}{ 12 | background-color: $val; 13 | } 14 | .bigbear-color-#{$key}{ 15 | color:$val 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import './mixin/index'; 2 | @import "variables"; 3 | @import "reboot"; 4 | @import "./animation"; 5 | @import "./color"; 6 | 7 | //button 8 | @import "../components/Button/style"; 9 | 10 | //menu 11 | @import "../components/Menu/style"; 12 | 13 | //icon 14 | @import "../components/Icon/style"; 15 | 16 | //alert 17 | @import "../components/Alert/style"; 18 | 19 | //message 20 | @import "../components/Message/style"; 21 | 22 | //input 23 | @import "../components/Input/style"; 24 | 25 | //autocomplete 26 | @import "../components/AutoComplete/style"; 27 | 28 | //List 29 | @import "../components/List/style"; 30 | 31 | //avatar 32 | @import "../components/Avatar/style"; 33 | 34 | //virtuallist 35 | @import "../components/VirtualList/style"; 36 | 37 | //badge 38 | @import "../components/Badge/style"; 39 | 40 | //switch 41 | @import "../components/Switch/style"; 42 | 43 | //select 44 | @import "../components/Select/style"; 45 | 46 | //multiselect 47 | @import "../components/MultiSelect/style"; 48 | 49 | //radio 50 | @import "../components/Radio/style"; 51 | 52 | //checkbox 53 | @import "../components/CheckBox/style"; 54 | 55 | //form 56 | @import "../components/Form/style"; 57 | 58 | //Pagination 59 | @import "../components/Pagination/style"; 60 | 61 | //carousel 62 | @import "../components/Carousel/style"; 63 | 64 | //table 65 | @import "../components/Table/style"; 66 | 67 | //modal 68 | @import "../components/Modal/style"; 69 | 70 | //progress 71 | @import "../components/Progress/style"; 72 | 73 | //popconfirm 74 | @import "../components/Popconfirm/style"; 75 | 76 | //layout&colors 77 | @import "../components/Layout/style"; 78 | 79 | //divider 80 | @import "../components/Divider/style"; 81 | 82 | //grid 83 | @import "../components/Grid/style"; 84 | 85 | //upload 86 | @import "../components/Upload/style"; 87 | 88 | //inputnumber 89 | @import "../components/InputNumber/style"; 90 | 91 | //card 92 | @import "../components/Card/style"; -------------------------------------------------------------------------------- /src/styles/mixin/_animatemixin.scss: -------------------------------------------------------------------------------- 1 | @mixin zoom-animation( 2 | $direction: 'top', 3 | $scaleStart: scaleY(0), 4 | $scaleEnd: scaleY(1), 5 | $origin: center top, 6 | ) { 7 | .zoom-in-#{$direction}-enter { 8 | opacity: 0; 9 | transform: $scaleStart; 10 | } 11 | .zoom-in-#{$direction}-enter-active { 12 | opacity: 1; 13 | transform: $scaleEnd; 14 | transform-origin: $origin; 15 | transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms 16 | } 17 | .zoom-in-#{$direction}-appear { 18 | opacity: 0; 19 | transform: $scaleStart; 20 | } 21 | .zoom-in-#{$direction}-appear-active { 22 | opacity: 1; 23 | transform: $scaleEnd; 24 | transform-origin: $origin; 25 | transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms 26 | } 27 | .zoom-in-#{$direction}-exit { 28 | opacity: 1; 29 | } 30 | .zoom-in-#{$direction}-exit-active { 31 | opacity: 0; 32 | transform: $scaleStart; 33 | transform-origin: $origin; 34 | transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms; 35 | } 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/styles/mixin/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::before { 3 | content: ''; 4 | display: table; 5 | } 6 | &::after { 7 | clear: both; 8 | content: ''; 9 | display: table; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/styles/mixin/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($width,$height) { 2 | height: $height; 3 | width: $width; 4 | } 5 | @mixin square($size) { 6 | @include size($size,$size); 7 | } 8 | @mixin absolut-middle() { 9 | left: 50%; 10 | position: absolute; 11 | transform: translateX(-50%); 12 | } -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist", 4 | "target": "es5", 5 | "module": "esnext", 6 | "declaration": true, 7 | "jsx": "react", 8 | "moduleResolution": "node", 9 | "allowSyntheticDefaultImports": true 10 | }, 11 | "include": [ 12 | "src", 13 | ], 14 | "exclude": [ 15 | "src/**/*.stories.tsx", 16 | "src/**/*.test.tsx", 17 | "src/**/*.example.tsx" 18 | ] 19 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } --------------------------------------------------------------------------------