From 79deb6a92d42b0d111cb7036953bdcdd7a5b7772 Mon Sep 17 00:00:00 2001 From: NikolayRechkin Date: Mon, 25 Nov 2019 15:13:36 +0300 Subject: [PATCH 01/18] web: components: fixed filter input --- web/ASC.Web.Components/src/components/filter-input/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/filter-input/index.js b/web/ASC.Web.Components/src/components/filter-input/index.js index f3cc1cdd9e..3fa7e53ca2 100644 --- a/web/ASC.Web.Components/src/components/filter-input/index.js +++ b/web/ASC.Web.Components/src/components/filter-input/index.js @@ -214,7 +214,7 @@ class FilterInput extends React.Component { const filterArr = Array.from(Array.from(this.filterWrapper.current.children).find(x => x.id === 'filter-items-container').children); const filterButton = Array.from(Array.from(this.filterWrapper.current.children).find(x => x.id != 'filter-items-container').children)[0]; - if (fullWidth <= this.minWidth) { + if (fullWidth <= this.minWidth && fullWidth > 0) { this.setState({ openFilterItems: [], hideFilterItems: cloneObjectsArray(currentFilterItems) From fc911b6dfde5a113b1c7e7173252b9d5016629a1 Mon Sep 17 00:00:00 2001 From: NikolayRechkin Date: Mon, 25 Nov 2019 15:14:01 +0300 Subject: [PATCH 02/18] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 1dde10e055..2016dde059 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.190", + "version": "1.0.191", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From 00610076f26e0f5638bdabe5d2be1f54d415ca8c Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Mon, 25 Nov 2019 15:49:38 +0300 Subject: [PATCH 03/18] web: Components: Fixed DropDown component z-index --- web/ASC.Web.Components/src/components/drop-down/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index 82617d3c03..6c48663721 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -22,7 +22,7 @@ const StyledDropdown = styled.div` ${props => (props.directionY === 'bottom' && css`top: ${props => props.manualY ? props.manualY : '100%'};`)} ${props => (props.directionX === 'right' && css`right: ${props => props.manualX ? props.manualX : '0px'};`)} ${props => (props.directionX === 'left' && css`left: ${props => props.manualX ? props.manualX : '0px'};`)} - z-index: 1000; + z-index: 150; margin-top: ${props => (props.isUserPreview ? '6px' : '0px')}; margin-right: ${props => (props.isUserPreview ? '6px' : '0px')}; display: ${props => (props.isOpen || props.opened ? 'block' : 'none')}; From 9266c7968e25f2404f8f53a00bc544a4449a65eb Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 25 Nov 2019 16:06:40 +0300 Subject: [PATCH 04/18] Web: Components: added error message to text-input --- .../src/components/text-input/README.md | 42 ++++++++++--------- .../src/components/text-input/index.js | 34 +++++++++++++-- .../text-input/text-input.stories.js | 4 +- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/web/ASC.Web.Components/src/components/text-input/README.md b/web/ASC.Web.Components/src/components/text-input/README.md index 43d7b370f7..79caafe213 100644 --- a/web/ASC.Web.Components/src/components/text-input/README.md +++ b/web/ASC.Web.Components/src/components/text-input/README.md @@ -22,23 +22,25 @@ const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/]; ### Properties -| Props | Type | Required | Values | Default | Description | -| ---------------- | :------: | :------: | :-----------------------------: | :-----: | ------------------------------------------------------------------------------------------------------ | -| `id` | `string` | - | - | - | Used as HTML `id` property | -| `name` | `string` | - | - | - | Used as HTML `name` property | -| `value` | `string` | ✅ | - | - | Value of the input | -| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property | -| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` | -| `onBlur` | `func` | - | - | - | Called when field is blurred | -| `onFocus` | `func` | - | - | - | Called when field is focused | -| `isAutoFocussed` | `bool` | - | - | - | Focus the input field on initial render | -| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) | -| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content | -| `hasError` | `bool` | - | - | - | Indicates the input field has an error | -| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning | -| `placeholder` | `string` | - | - | - | Placeholder text for the input | -| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. | -| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. | -| `scale` | `bool` | - | - | - | Indicates the input field has scale | -| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border | -| `mask` | `array` | - | - | - | input text mask | +| Props | Type | Required | Values | Default | Description | +| ---------------- | :------: | :------: | :-----------------------------: | :-------: | ------------------------------------------------------------------------------------------------------ | +| `id` | `string` | - | - | - | Used as HTML `id` property | +| `name` | `string` | - | - | - | Used as HTML `name` property | +| `value` | `string` | ✅ | - | - | Value of the input | +| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property | +| `onChange` | `func` | - | - | - | Called with the new value. Required when input is not read only. Parent should pass it back as `value` | +| `onBlur` | `func` | - | - | - | Called when field is blurred | +| `onFocus` | `func` | - | - | - | Called when field is focused | +| `isAutoFocussed` | `bool` | - | - | - | Focus the input field on initial render | +| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) | +| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content | +| `hasError` | `bool` | - | - | - | Indicates the input field has an error | +| `hasWarning` | `bool` | - | - | - | Indicates the input field has a warning | +| `placeholder` | `string` | - | - | - | Placeholder text for the input | +| `type` | `string` | | `text`, `password` | `text` | Supported type of the input fields. | +| `size` | `string` | | `base`, `middle`, `big`, `huge` | `base` | Supported size of the input fields. | +| `scale` | `bool` | - | - | - | Indicates the input field has scale | +| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border | +| `mask` | `array` | - | - | - | input text mask | +| `errorMessage` | `string` | - | - | - | Error message text | +| `errorColor` | `string` | - | - | "#C96C27" | Error text color | diff --git a/web/ASC.Web.Components/src/components/text-input/index.js b/web/ASC.Web.Components/src/components/text-input/index.js index e10f34d85e..a0a4839ef1 100755 --- a/web/ASC.Web.Components/src/components/text-input/index.js +++ b/web/ASC.Web.Components/src/components/text-input/index.js @@ -4,6 +4,7 @@ import styled from 'styled-components'; import commonInputStyle from '../text-input/common-input-styles'; import MaskedInput from 'react-text-mask' import isEqual from "lodash/isEqual"; +import { Text } from "../text"; /* eslint-disable no-unused-vars */ /* eslint-disable react/prop-types */ @@ -80,6 +81,18 @@ const StyledInput = styled(Input).attrs((props) => ({ ${props => !props.withBorder && `border: none;`} `; +const ErrorLabel = styled.label` + word-wrap: break-word; + font-size: 10px; + max-width: ${props => + (props.scale && '100%') || + (props.size === 'base' && '173px') || + (props.size === 'middle' && '300px') || + (props.size === 'big' && '350px') || + (props.size === 'huge' && '500px') + }; +`; + class TextInput extends React.Component { shouldComponentUpdate(nextProps) { return !isEqual(this.props, nextProps); @@ -87,7 +100,19 @@ class TextInput extends React.Component { render() { // console.log(`TextInput render id=${this.props.id}`); - return (); + const {scale, size, errorMessage, errorColor} = this.props; + return ( + <> + + + + {errorMessage} + + + ); } } @@ -114,7 +139,9 @@ TextInput.propTypes = { isReadOnly: PropTypes.bool, hasError: PropTypes.bool, hasWarning: PropTypes.bool, - autoComplete: PropTypes.string + autoComplete: PropTypes.string, + errorMessage: PropTypes.string, + errorColor: PropTypes.string } TextInput.defaultProps = { @@ -128,7 +155,8 @@ TextInput.defaultProps = { hasWarning: false, autoComplete: 'off', withBorder: true, - keepCharPositions: false + keepCharPositions: false, + errorColor: "#C96C27" } export default TextInput diff --git a/web/ASC.Web.Components/src/components/text-input/text-input.stories.js b/web/ASC.Web.Components/src/components/text-input/text-input.stories.js index d1999e5187..3170e70c62 100644 --- a/web/ASC.Web.Components/src/components/text-input/text-input.stories.js +++ b/web/ASC.Web.Components/src/components/text-input/text-input.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { StringValue } from 'react-values'; -import { withKnobs, boolean, text, select, number } from '@storybook/addon-knobs/react'; +import { withKnobs, boolean, text, select, number, color } from '@storybook/addon-knobs/react'; import withReadme from 'storybook-readme/with-readme'; import Readme from './README.md'; import TextInput from '.'; @@ -42,6 +42,8 @@ storiesOf('Components|Input', module) withBorder={boolean('withBorder', true)} mask={text("mask", null)} value={value} + errorMessage={text("errorMessage", "Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit")} + errorColor={color('errorColor', "#C96C27")} onChange={e => { set(e.target.value); }} From 265a36a3ae6f342b8de85c697e0edff550a64181 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 25 Nov 2019 16:08:22 +0300 Subject: [PATCH 05/18] Web: Components: fixed tabs-container scroll visibility --- .../src/components/tabs-container/index.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/web/ASC.Web.Components/src/components/tabs-container/index.js b/web/ASC.Web.Components/src/components/tabs-container/index.js index 12fc93ff9b..b55fe78950 100644 --- a/web/ASC.Web.Components/src/components/tabs-container/index.js +++ b/web/ASC.Web.Components/src/components/tabs-container/index.js @@ -204,19 +204,15 @@ class TabContainer extends Component { <> - + {children.map((item, index) => (