From c8a020346ed8f602595e4adfd8d7e0810e97da6c Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 20 Aug 2019 16:08:07 +0300 Subject: [PATCH] web: Components: Reworked Row.People component. Changed name to RowContent. --- .../src/components/row-content/index.js | 135 +++++++++++ .../src/components/row/rows/index.js | 3 - .../src/components/row/rows/people.js | 215 ------------------ web/ASC.Web.Components/src/index.js | 4 +- .../stories/row-content/base/README.md | 41 ++++ .../base/base.row-content.stories.js | 54 +++++ .../stories/row/people/people-row.stories.js | 47 ---- 7 files changed, 232 insertions(+), 267 deletions(-) create mode 100644 web/ASC.Web.Components/src/components/row-content/index.js delete mode 100644 web/ASC.Web.Components/src/components/row/rows/index.js delete mode 100644 web/ASC.Web.Components/src/components/row/rows/people.js create mode 100644 web/ASC.Web.Storybook/stories/row-content/base/README.md create mode 100644 web/ASC.Web.Storybook/stories/row-content/base/base.row-content.stories.js delete mode 100644 web/ASC.Web.Storybook/stories/row/people/people-row.stories.js diff --git a/web/ASC.Web.Components/src/components/row-content/index.js b/web/ASC.Web.Components/src/components/row-content/index.js new file mode 100644 index 0000000000..2cf3808374 --- /dev/null +++ b/web/ASC.Web.Components/src/components/row-content/index.js @@ -0,0 +1,135 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; +import PropTypes from 'prop-types'; + +import device from '../device'; + +const truncateCss = css` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; + +const commonCss = css` + margin: 0 8px; + font-family: Open Sans; + font-size: 12px; + font-style: normal; + font-weight: 600; +`; + +const RowContainer = styled.div` + width: 100% + display: inline-flex; + + @media ${device.tablet} { + display: block; + } +`; + +const MainContainerWrapper = styled.div` + ${commonCss}; + + display: flex; + align-self: center; + margin-right: auto; + min-width: 140px; + + @media ${device.tablet} { + min-width: 140px; + margin-right: 8px; + margin-top: 6px; + } +`; + +const MainContainer = styled.div` + ${truncateCss}; + height: 20px; + margin-right: 8px; +`; + +const MainIcons = styled.div` + align-self: center; + white-space: nowrap; + `; + +const SideContainerWrapper = styled.div` + ${truncateCss}; + ${commonCss}; + + align-self: center; + width: 160px; + color: ${props => props.color && props.color}; + + @media ${device.tablet} { + display: none; + } +`; + +const TabletSideInfo = styled.div` + display: none; + + @media ${device.tablet} { + display: block; + min-width: 160px; + margin: 0 8px; + color: ${props => props.color && props.color}; + + ${commonCss}; + ${truncateCss}; + } +`; + +const getSideInfo = content => { + let info = ''; + const lastIndex = content.length - 1; + + content.map((element, index) => { + const delimiter = (index === lastIndex) ? '' : ' | '; + if (index > 1) { + info += (element.props && element.props.children) + ? element.props.children + delimiter + : ''; + } + }); + + return info; +}; + +const RowContent = props => { + //console.log("RowContent render"); + const { children } = props; + + const sideInfo = getSideInfo(children); + + return ( + + + + {children[0]} + + + {children[1]} + + + {children.map((element, index) => { + if (index > 1) { + return ( + + {element} + + ); + } + })} + + {sideInfo} + + + ) +}; + +RowContent.propTypes = { + children: PropTypes.node.isRequired +}; + +export default RowContent; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/row/rows/index.js b/web/ASC.Web.Components/src/components/row/rows/index.js deleted file mode 100644 index f9fc95f2d3..0000000000 --- a/web/ASC.Web.Components/src/components/row/rows/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import createPeople from './people'; - -export const People = createPeople(); \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/row/rows/people.js b/web/ASC.Web.Components/src/components/row/rows/people.js deleted file mode 100644 index e906ead4be..0000000000 --- a/web/ASC.Web.Components/src/components/row/rows/people.js +++ /dev/null @@ -1,215 +0,0 @@ -import React from 'react'; -import styled, { css } from 'styled-components'; -import PropTypes from 'prop-types'; - -import device from '../../device'; -import Link from '../../link'; -import { Icons } from '../../icons'; - -export default function createPeople() { - - const truncateCss = css` - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -`; - - const commonCss = css` - margin: 0 8px; - font-family: Open Sans; - font-size: 12px; - font-style: normal; - font-weight: 600; -`; - - const RowContainer = styled.div` - width: 100% - height: 50px; - display: inline-flex; - - @media ${device.tablet} { - display: block; - } -`; - - const NameWrapper = styled.div` - ${commonCss}; - - display: flex; - align-self: center; - margin-right: auto; - min-width: 140px; - - @media ${device.tablet} { - min-width: 140px; - margin-right: 8px; - margin-top: 6px; - } -`; - - const Name = styled.div` - ${truncateCss}; - height: 20px; - margin-right: 8px; -`; - - const StatusIcon = styled.div` - align-self: center; - `; - - const DepartmentWrapper = styled.div` - ${truncateCss}; - ${commonCss}; - - align-self: center; - width: 160px; - color: ${props => props.color && props.color}; - - @media ${device.tablet} { - display: none; - } -`; - - const PhoneWrapper = styled.div` - ${truncateCss}; - ${commonCss}; - - align-self: center; - width: 100px; - color: ${props => props.color && props.color}; - - @media ${device.tablet} { - display: none; - } -`; - - const EmailWrapper = styled.div` - ${truncateCss}; - ${commonCss}; - - align-self: center; - width: 160px; - color: ${props => props.color && props.color}; - - @media ${device.tablet} { - display: none; - } -`; - - const TabletSideInfo = styled.div` - display: none; - - @media ${device.tablet} { - - display: block; - min-width: 160px; - margin: 0 8px; - color: ${props => props.color && props.color}; - - ${commonCss}; - ${truncateCss}; - } -`; - - const PeopleRow = props => { - const { status, displayName, department, phone, email, onDisplayNameClick, onDepartmentClick, onPhoneClick, onEmailClick } = props; - - const nameColor = status === 'pending' ? '#A3A9AE' : '#333333'; - const sideInfoColor = status === 'pending' ? '#D0D5DA' : '#A3A9AE'; - - return ( - - - - {displayName && displayName !== '' && - - {displayName} - - } - - - {status === 'pending' && - - } - {status === 'disabled' && - - } - - - - {department && department !== '' && - - {department} - - } - - - {phone && phone !== '' && - - {phone} - - } - - - {email && email !== '' && - - {email} - - } - - - {department && department !== '' && department + ' | '} - {phone && phone !== '' && phone + ' | '} - {email && email !== '' && email} - - - ) - }; - - PeopleRow.propTypes = { - status: PropTypes.string, - displayName: PropTypes.string, - department: PropTypes.string, - phone: PropTypes.string, - email: PropTypes.string, - onDisplayNameClick: PropTypes.func, - onDepartmentClick: PropTypes.func, - onPhoneClick: PropTypes.func, - onEmailClick: PropTypes.func - }; - - return PeopleRow; -} \ No newline at end of file diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js index 78633880b0..86dfcbc1a5 100644 --- a/web/ASC.Web.Components/src/index.js +++ b/web/ASC.Web.Components/src/index.js @@ -21,7 +21,7 @@ export { default as ModalDialog } from './components/modal-dialog' export { default as Layout } from './components/layout' export { default as PageLayout } from './components/page-layout' export { default as NewPageLayout } from './components/page-layout/new' -export { default as ContentRow } from './components/content-row' +export { default as Row } from './components/row' export { default as Badge } from './components/badge' export { default as ErrorContainer } from './components/error-container' export { default as InputBlock } from './components/input-block' @@ -47,4 +47,4 @@ export { default as Calendar } from './components/calendar' export { default as Label} from './components/label' export { default as EmptyScreenContainer} from './components/empty-screen-container' export { default as CustomScrollbarsVirtualList } from './components/scrollbar/custom-scrollbars-virtual-list' -export { Row } from './components/row' \ No newline at end of file +export { default as RowContent } from './components/row-content' \ No newline at end of file diff --git a/web/ASC.Web.Storybook/stories/row-content/base/README.md b/web/ASC.Web.Storybook/stories/row-content/base/README.md new file mode 100644 index 0000000000..a4edfbea96 --- /dev/null +++ b/web/ASC.Web.Storybook/stories/row-content/base/README.md @@ -0,0 +1,41 @@ +# RowContent + +## Usage + +```js +import { RowContent } from 'asc-web-components'; +``` + +#### Description + +Required for formatted output of elements inside Row. + +To correctly display components inside RowContent, you must specify them in a certain order. + +The first and second specified components will be interpreted as Main elements. +First will be MainTitle and second MainIcons. +All subsequent components will be located on the right and are considered SideElements. + +***Consider location of components in advance, since when viewing in tablet mode, the markup will shift SideElements to second line.*** + +#### Usage + +```js + + Demo + <> + + + + Demo + Demo + 0 000 0000000 + demo@demo.com + +``` + +#### Properties + +| Props | Type | Required | Values | Default | Description | +| ---------------- | ---------- | :------: | ------ | ------- | --------------------------------------------------------- | +| `children` | `node` | ✅ | | ` ` | Components displayed inside RowContent | \ No newline at end of file diff --git a/web/ASC.Web.Storybook/stories/row-content/base/base.row-content.stories.js b/web/ASC.Web.Storybook/stories/row-content/base/base.row-content.stories.js new file mode 100644 index 0000000000..be974e0bd8 --- /dev/null +++ b/web/ASC.Web.Storybook/stories/row-content/base/base.row-content.stories.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import withReadme from 'storybook-readme/with-readme' +import Readme from './README.md' +import { RowContent, Link, Icons } from 'asc-web-components'; + +storiesOf('Components|RowContent', module) + .addDecorator(withReadme(Readme)) + .add('base', () => { + + return ( + <> + + Demo + <> + + + + Demo + Demo + 0 000 0000000 + demo@demo.com + + + Demo Demo + <> + + + <> + Demo Demo + 0 000 0000000 + demo.demo@demo.com + + + Demo Demo Demo + <> + <> + Demo Demo Demo + 0 000 0000000 + demo.demo.demo@demo.com + + + Demo Demo Demo Demo + <> + + + Demo + Demo Demo Demo Demo + 0 000 0000000 + demo.demo.demo.demo@demo.com + + + ); + }); \ No newline at end of file diff --git a/web/ASC.Web.Storybook/stories/row/people/people-row.stories.js b/web/ASC.Web.Storybook/stories/row/people/people-row.stories.js deleted file mode 100644 index 93bc1774fc..0000000000 --- a/web/ASC.Web.Storybook/stories/row/people/people-row.stories.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -//import withReadme from 'storybook-readme/with-readme' -//import Readme from './README.md' -import { Row } from 'asc-web-components'; - -storiesOf('Components|Row', module) - //.addDecorator(withReadme(Readme)) - .add('people', () => ( - <> - - - - - - - - )); \ No newline at end of file