ASC.Web.Components: added new component SidePanel
This commit is contained in:
parent
2d4b4834e8
commit
23f15011f9
24
web/ASC.Web.Components/src/components/side-panel/README.md
Normal file
24
web/ASC.Web.Components/src/components/side-panel/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# SidePanel
|
||||
|
||||
#### Description
|
||||
|
||||
SidePanel is used for displaying side panels
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
import { SidePanel } from 'asc-web-components';
|
||||
|
||||
<SidePanel visible={false} scale={false}/>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| --------------- | ------------------------- | :------: | -------| ------- | ------------------------------------------------ |
|
||||
| `visible` | `bool` | | | | Display side panels or not |
|
||||
| `scale` | `bool` | | | | Indicates the side panel has scale |
|
||||
| `headerContent` | `string/element/elements` | | | | Header content |
|
||||
| `bodyContent` | `string/element/elements` | | | | Body content |
|
||||
| `footerContent` | `string/element/elements` | | | | Footer content |
|
||||
| `onClose` | `func` | | | | Will be triggered when a close button is clicked |
|
||||
86
web/ASC.Web.Components/src/components/side-panel/index.js
Normal file
86
web/ASC.Web.Components/src/components/side-panel/index.js
Normal file
@ -0,0 +1,86 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components'
|
||||
import Backdrop from '../backdrop'
|
||||
import { Text } from '../text'
|
||||
import Aside from "../layout/sub-components/aside";
|
||||
|
||||
const Content = styled.div`
|
||||
padding: 0 16px 16px;
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
`;
|
||||
|
||||
const HeaderText = styled(Text.ContentHeader)`
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const CloseButton = styled.a`
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
content: ' ';
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background-color: #D8D8D8;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const Body = styled.div`
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
`;
|
||||
|
||||
const Footer = styled.div``;
|
||||
|
||||
const SidePanel = props => {
|
||||
//console.log("SidePanel render");
|
||||
const { visible, scale, headerContent, bodyContent, footerContent, onClose } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Backdrop visible={visible} onClick={onClose}/>
|
||||
<Aside visible={visible} scale={scale}>
|
||||
<Content>
|
||||
<Header>
|
||||
<HeaderText>{headerContent}</HeaderText>
|
||||
<CloseButton onClick={onClose}></CloseButton>
|
||||
</Header>
|
||||
<Body>{bodyContent}</Body>
|
||||
<Footer>{footerContent}</Footer>
|
||||
</Content>
|
||||
</Aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
SidePanel.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
scale: PropTypes.bool,
|
||||
headerContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
||||
bodyContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
||||
footerContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
||||
onClose: PropTypes.func
|
||||
}
|
||||
|
||||
export default SidePanel
|
||||
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { BooleanValue } from 'react-values'
|
||||
import { withKnobs, boolean } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import SidePanel from '.';
|
||||
import Button from '../button';
|
||||
|
||||
|
||||
storiesOf('Components|SidePanel', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => (
|
||||
<Section>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<div>
|
||||
<Button
|
||||
label="Show"
|
||||
primary={true}
|
||||
size="medium"
|
||||
onClick={(e) => {
|
||||
action('onShow')(e);
|
||||
toggle(true);
|
||||
}}
|
||||
/>
|
||||
<SidePanel
|
||||
visible={value}
|
||||
scale={boolean('scale', false)}
|
||||
headerContent="Change password"
|
||||
bodyContent={
|
||||
<div>Send the password change instruction to the <a href="mailto:asc@story.book">asc@story.book</a> email address</div>
|
||||
}
|
||||
footerContent={[
|
||||
<Button
|
||||
key="SendBtn"
|
||||
label="Send"
|
||||
primary={true}
|
||||
size="medium"
|
||||
onClick={(e) => {
|
||||
action('onOk')(e);
|
||||
toggle(false);
|
||||
}}
|
||||
/>
|
||||
]}
|
||||
onClose={e => {
|
||||
action('onClose')(e);
|
||||
toggle(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</BooleanValue>
|
||||
</Section>
|
||||
));
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import SidePanel from '.';
|
||||
|
||||
describe('<SidePanel />', () => {
|
||||
it('renders without error', () => {
|
||||
const wrapper = mount(
|
||||
<SidePanel visible={false} scale={false}/>
|
||||
);
|
||||
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
});
|
||||
@ -57,3 +57,4 @@ export { default as FieldContainer } from './components/field-container'
|
||||
export { default as utils } from './utils'
|
||||
export { default as DatePicker } from './components/date-picker'
|
||||
export { default as PasswordInput } from './components/password-input'
|
||||
export { default as SidePanel } from './components/side-panel'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user