Skip to content

Commit

Permalink
feat(divider): complete divider component
Browse files Browse the repository at this point in the history
  • Loading branch information
yehuozhili committed Jun 16, 2020
1 parent 11b1458 commit c4e24f5
Show file tree
Hide file tree
Showing 17 changed files with 603 additions and 284 deletions.
112 changes: 56 additions & 56 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
import '../src/styles/index.scss'
import { create } from '@storybook/theming';
import { addParameters, configure } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import "../src/styles/index.scss";
import { create } from "@storybook/theming";
import { addParameters, configure } from "@storybook/react";
import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
PreviewSource: 'open',
},
options: {
theme: create({
brandTitle: 'BigBear-UI',
brandUrl: 'https://github.com/yehuozhili/bigbear-ui'
}),
},
dependencies: {
withStoriesOnly: true,
hideEmpty: true,
}
docs: {
container: DocsContainer,
page: DocsPage,
PreviewSource: "open"
},
options: {
theme: create({
brandTitle: "BigBear-UI",
brandUrl: "https://github.com/yehuozhili/bigbear-ui"
})
},
dependencies: {
withStoriesOnly: true,
hideEmpty: true
}
});
const loaderFn = () => {
return [
require('../src/stories/Welcome.stories.mdx'),
require('../src/stories/color.stories.mdx'),
require('../src/components/Layout/layout.stories.mdx'),
require('../src/components/Alert/alert.stories.mdx'),
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'),
require('../src/components/CheckBox/checkbox.stories.mdx'),
require('../src/components/Select/select.stories.mdx'),
require('../src/components/MultiSelect/multiselect.stories.mdx'),
require('../src/components/AutoComplete/autocomplete.stories.mdx'),
require('../src/components/Form/form.stories.mdx'),
require('../src/components/List/list.stories.mdx'),
require('../src/components/VirtualList/virtuallist.stories.mdx'),
require('../src/components/Icon/icon.stories.mdx'),
require('../src/components/Pagination/pagination.stories.mdx'),
require('../src/components/Table/table.stories.mdx'),
require('../src/components/Modal/modal.stories.mdx'),
require('../src/components/Menu/menu.stories.mdx'),
require('../src/components/Menu/menuitem.stories.mdx'),
require('../src/components/Menu/submenu.stories.mdx'),
require('../src/components/Progress/progress.stories.mdx'),
require('../src/components/Popconfirm/popconfirm.stories.mdx'),
require('../src/components/Message/message.stories.mdx'),
require('../src/components/Transition/transition.stories.mdx'),
require('../src/hooks/useForm.stories.mdx'),
require('../src/hooks/useClickOutside.stories.mdx'),
require('../src/hooks/useDebounce.stories.mdx'),
require('../src/hooks/useStopScroll.stories.mdx'),
]
}
return [
require("../src/stories/Welcome.stories.mdx"),
require("../src/stories/color.stories.mdx"),
require("../src/components/Layout/layout.stories.mdx"),
require("../src/components/Divider/divider.stories.mdx"),
require("../src/components/Alert/alert.stories.mdx"),
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"),
require("../src/components/CheckBox/checkbox.stories.mdx"),
require("../src/components/Select/select.stories.mdx"),
require("../src/components/MultiSelect/multiselect.stories.mdx"),
require("../src/components/AutoComplete/autocomplete.stories.mdx"),
require("../src/components/Form/form.stories.mdx"),
require("../src/components/List/list.stories.mdx"),
require("../src/components/VirtualList/virtuallist.stories.mdx"),
require("../src/components/Icon/icon.stories.mdx"),
require("../src/components/Pagination/pagination.stories.mdx"),
require("../src/components/Table/table.stories.mdx"),
require("../src/components/Modal/modal.stories.mdx"),
require("../src/components/Menu/menu.stories.mdx"),
require("../src/components/Menu/menuitem.stories.mdx"),
require("../src/components/Menu/submenu.stories.mdx"),
require("../src/components/Progress/progress.stories.mdx"),
require("../src/components/Popconfirm/popconfirm.stories.mdx"),
require("../src/components/Message/message.stories.mdx"),
require("../src/components/Transition/transition.stories.mdx"),
require("../src/hooks/useForm.stories.mdx"),
require("../src/hooks/useClickOutside.stories.mdx"),
require("../src/hooks/useDebounce.stories.mdx"),
require("../src/hooks/useStopScroll.stories.mdx")
];
};
configure(loaderFn, module);

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bigbear-ui",
"version": "0.1.20",
"version": "0.1.21",
"description": "Neumorphic component library for React;基于React制作的拟物风格组件库",
"keywords": [
"component",
Expand Down
26 changes: 19 additions & 7 deletions src/components/Button/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ export type ButtonType =
| "light"
| "warning"
| "dark"
| "link"
| "link";

export interface BaseButtonProps {
className?: string;
disabled?: boolean;
/** 是否底色渐变 */
lineargradient?:boolean;
lineargradient?: boolean;
/** 设置按钮大小 */
size?: ButtonSize;
/**
Expand All @@ -28,7 +28,9 @@ export interface BaseButtonProps {
/** link类型才有效的url */
href?: string;
/** 回调ref,组件加载完成回调ref,返回值会在卸载组件时调用 */
refcallback?: (ref: React.RefObject<HTMLButtonElement & HTMLAnchorElement>) => (() => void)|undefined;
refcallback?: (
ref: React.RefObject<HTMLButtonElement & HTMLAnchorElement>
) => (() => void) | undefined;
}

type NativeButtonProps = ButtonHTMLAttributes<HTMLElement> & BaseButtonProps;
Expand All @@ -37,15 +39,25 @@ type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

export const Button: FC<ButtonProps> = (props: ButtonProps) => {
const { btnType,lineargradient, size, disabled, children, href, className, refcallback, ...restProps } = props;
const {
btnType,
lineargradient,
size,
disabled,
children,
href,
className,
refcallback,
...restProps
} = props;

const classes = classNames("btn", className, {
[`btn-type-${btnType}`]: btnType,
[`btn-size-${size}`]: size,
disabled: btnType === "link" && disabled,
[`bigbear-layout-lineargradient-${btnType}`]:lineargradient
[`bigbear-layout-lineargradient-${btnType}`]: lineargradient
});
const btnRef = useRef<HTMLButtonElement&HTMLAnchorElement>(null);
const btnRef = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
useEffect(() => {
let uninstall: any = null;
if (refcallback) {
Expand Down Expand Up @@ -78,7 +90,7 @@ Button.defaultProps = {
btnType: "default",
size: "default",
href: "/",
lineargradient:false,
lineargradient: false
};

export default Button;
69 changes: 69 additions & 0 deletions src/components/Divider/_style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.bigbear-divider{
clear:both;
width: 100%;
display: flex;
margin:$divider-margin;
line-height:$divider-line-height;
white-space: nowrap;
align-items: center;
.bigbear-divider-inner {
width: 100%;
height: $divider-height;
border-radius: 50px;
@include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
&.bigbear-divider-el{
@include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
}
}
.bigbear-divider-span{
display: inline-block;
padding: 0 1em;
font-weight: $font-weight-bold;

@include neu-textshadow($neu-whiteshadow1,$neu-whiteshadow2);
}
&.bigbear-divider-center::before{
position: relative;
content:'';
height: $divider-height;
border-radius: 50px;
width: 50%;
margin-top: $divider-height / 2;
@include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
}
&.bigbear-divider-center::after{
position: relative;
content:'';
height: $divider-height;
border-radius: 50px;
width: 50%;
margin-top: $divider-height / 2;
@include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
}

&.bigbear-divider-left::after{
position: relative;
content:'';
height: $divider-height;
border-radius: 50px;
width: 100%;
margin-top: $divider-height / 2;
@include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
}
&.bigbear-divider-right::before{
position: relative;
content:'';
height: $divider-height;
border-radius: 50px;
width:100%;
margin-top: $divider-height / 2;
@include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
}

&.bigbear-divider-elevate::after{
@include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
}
&.bigbear-divider-elevate::before{
@include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);
}
}
94 changes: 94 additions & 0 deletions src/components/Divider/divider.stories.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
import Divider from './divider'



<Meta title='LAYOUT |Divider 分割线' component={Divider} />

<br/>

# Divider 分割线
<br/>

## 基本使用

两种类型,一种凸起,一种凹下。

<Preview>
<Story name='divider'>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider></Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider elevate={false}></Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
</div>
</Story>
</Preview>

## 可以传文字并且设定方位

<Preview>
<Story name='divider3'>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider elevate={false}>Text</Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider >Text</Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
</div>
</Story>
</Preview>

<Preview>
<Story name='divider2'>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider elevate={false} direction='left'>Text</Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider direction='left' >Text</Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
</div>
</Story>
</Preview>

<Preview>
<Story name='dividerright'>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider elevate={false} direction='right'>Text</Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<Divider direction='right' >Text</Divider>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
</div>
</Story>
</Preview>


## 属性详情

<Props of={Divider} />
Loading

0 comments on commit c4e24f5

Please sign in to comment.