IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
Daniil Senkiv 2019-10-18 11:30:35 +03:00
commit 1c5dd5bdb8
16 changed files with 177 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js
View File

@ -21,10 +21,7 @@ class RadioField extends React.Component {
radioIsDisabled,
radioOnChange,
tooltipContent,
tooltipMaxWidth,
tooltipOffsetRight,
tooltipId
tooltipContent
} = this.props;
return (
@ -33,9 +30,6 @@ class RadioField extends React.Component {
hasError={hasError}
labelText={labelText}
tooltipContent={tooltipContent}
tooltipMaxWidth={tooltipMaxWidth}
tooltipOffsetRight={tooltipOffsetRight}
tooltipId={tooltipId}
>
<RadioButtonGroup
name={radioName}

8
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
View File

@ -32,10 +32,7 @@ class TextChangeField extends React.Component {
buttonOnClick,
buttonTabIndex,
tooltipContent,
tooltipId,
tooltipMaxWidth,
tooltipOffsetRight
tooltipContent
} = this.props;
return (
@ -44,9 +41,6 @@ class TextChangeField extends React.Component {
hasError={hasError}
labelText={labelText}
tooltipContent={tooltipContent}
tooltipId={tooltipId}
tooltipMaxWidth={tooltipMaxWidth}
tooltipOffsetRight={tooltipOffsetRight}
>
<InputContainer>
<TextInput

6
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -508,9 +508,6 @@ class UpdateUserForm extends React.Component {
tooltipContent={<Text.Body fontSize={13}>{t("EmailPopupHelper")}</Text.Body>}
tooltipMaxWidth={312}
tooltipOffsetRight={100}
tooltipId="EmailTooltip"
/>
<TextChangeField
labelText={`${t("Password")}:`}
@ -583,9 +580,6 @@ class UpdateUserForm extends React.Component {
radioOnChange={this.onUserTypeChange}
tooltipContent={tooltipTypeContent}
tooltipMaxWidth={340}
tooltipOffsetRight={120}
tooltipId="TypeTooltip"
/>
<DateField
calendarHeaderContent={t("CalendarSelectDate")}

2
web/ASC.Web.Components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.136",
"version": "1.0.138",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

6
web/ASC.Web.Components/src/components/field-container/README.md
View File

@ -21,11 +21,9 @@ Responsive form field container
#### Properties
| Props | Type | Required | Values | Default | Description |
| -------------- | -------- | :------: | ------ | ------- | -------------------------------------------- |
| ---------------- | ------------------ | :------: | ------ | ------- | -------------------------------------------- |
| `isVertical` | `bool` | - | - | false | Vertical or horizontal alignment |
| `isRequired` | `bool` | - | - | false | Indicates that the field is required to fill |
| `hasError` | `bool` | - | - | false | Indicates that the field is incorrect |
| `labelText` | `string` | - | - | - | Field label text |
| `tooltipId` | `string` | - | - | - | Tooltip id |
| `tooltipEvent` | `string` | - | - | - | Tooltip event |
| `iconButton` | `string` | - | - | - | Tooltip icon button |
| `tooltipContent` | `object or string` | ✅ | - | - | Tooltip content |

2
web/ASC.Web.Components/src/components/field-container/field-container.stories.js
View File

@ -54,7 +54,6 @@ storiesOf("Components|FieldContainer", module)
hasError={boolean("hasError", false)}
labelText={text("labelText", "Name:")}
tooltipContent={"tooltipContent"}
tooltipId={"tooltipId_1"}
>
<TextInput
value={value}
@ -73,7 +72,6 @@ storiesOf("Components|FieldContainer", module)
hasError={boolean("hasError", false)}
labelText={text("labelText", "Name:")}
tooltipContent={"tooltipContent2"}
tooltipId={"tooltipId_2"}
>
<TextInput
value={value}

74
web/ASC.Web.Components/src/components/field-container/index.js
View File

@ -3,9 +3,7 @@ import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import { tablet } from "../../utils/device";
import Label from "../label";
import IconButton from "../icon-button";
import Tooltip from "../tooltip";
import { handleAnyClick } from "../../utils/event";
import HelpButton from "../help-button";
const horizontalCss = css`
display: flex;
@ -62,43 +60,8 @@ const Container = styled.div`
class FieldContainer extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false };
this.ref = React.createRef();
this.refTooltip = React.createRef();
//console.log(`FieldContainer constructor(${this.helperId})`, props, this.ref);
}
afterShow = () => {
//console.log(`afterShow ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
this.setState({ isOpen: true }, () => {
handleAnyClick(true, this.handleClick);
});
};
afterHide = () => {
//console.log(`afterHide ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
if (this.state.isOpen) {
this.setState({ isOpen: false }, () => {
handleAnyClick(false, this.handleClick);
});
}
};
handleClick = e => {
//console.log(`handleClick ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
if (!this.ref.current.contains(e.target)) {
//console.log(`hideTooltip() tooltipId=${this.props.tooltipId}`, this.refTooltip.current);
this.refTooltip.current.hideTooltip();
}
};
componentWillUnmount() {
handleAnyClick(false, this.handleClick);
}
render() {
const {
isVertical,
@ -107,10 +70,7 @@ class FieldContainer extends React.Component {
hasError,
labelText,
children,
tooltipContent,
tooltipOffsetRight,
tooltipMaxWidth,
tooltipId
tooltipContent
} = this.props;
return (
@ -124,30 +84,9 @@ class FieldContainer extends React.Component {
className="field-label"
/>
{tooltipContent && (
<div ref={this.ref}>
<IconButton
data-tip=""
data-for={tooltipId}
data-event="click focus"
className="icon-button"
isClickable={true}
iconName="QuestionIcon"
size={13}
<HelpButton
tooltipContent={tooltipContent}
/>
<Tooltip
id={tooltipId}
reference={this.refTooltip}
effect="solid"
place="top"
offsetRight={tooltipOffsetRight}
maxWidth={tooltipMaxWidth}
afterShow={this.afterShow}
afterHide={this.afterHide}
globalEventOff={true}
>
{tooltipContent}
</Tooltip>
</div>
)}
</div>
<div className="field-body">{children}</div>
@ -169,10 +108,7 @@ FieldContainer.propTypes = {
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
tooltipOffsetRight: PropTypes.number,
tooltipMaxWidth: PropTypes.number,
tooltipId: PropTypes.string
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
};
export default FieldContainer;

23
web/ASC.Web.Components/src/components/help-button/README.md Normal file
View File

@ -0,0 +1,23 @@
# Buttons: HelpButton
## Usage
```js
import { HelpButton } from "asc-web-components";
```
#### Description
HelpButton is used for a action on a page.
#### Usage
```js
<HelpButton tooltipContent="tooltipContent" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ---------------- | ------------------ | :------: | ------ | ------- | --------------- |
| `tooltipContent` | `object or string` | ✅ | - | - | Tooltip content |

26
web/ASC.Web.Components/src/components/help-button/help-button.stories.js Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import HelpButton from ".";
import Section from "../../../.storybook/decorators/section";
storiesOf("Components|Buttons", module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add("help button", () => {
return (
<Section>
<div style={{marginTop: 70, marginLeft: 70}}>
<HelpButton tooltipContent="tooltipContent" />
</div>
<div style={{marginTop: 20, marginLeft: 70}}>
<HelpButton tooltipContent="tooltipContent_2" />
</div>
<div style={{marginTop: 20, marginLeft: 70}}>
<HelpButton tooltipContent="tooltipContent_3" />
</div>
</Section>
);
});

12
web/ASC.Web.Components/src/components/help-button/help-button.test.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { mount } from 'enzyme';
import HelpButton from '.';
describe('<HelpButton />', () => {
it('renders without error', () => {
const wrapper = mount(
<HelpButton tooltipContent="You tooltip content" />
);
expect(wrapper).toExist();
});
});

87
web/ASC.Web.Components/src/components/help-button/index.js Normal file
View File

@ -0,0 +1,87 @@
import React from "react";
import PropTypes from "prop-types";
import IconButton from "../icon-button";
import Tooltip from "../tooltip";
import { handleAnyClick } from "../../utils/event";
import uniqueId from "lodash/uniqueId";
class HelpButton extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false };
this.ref = React.createRef();
this.refTooltip = React.createRef();
this.id = uniqueId();
}
afterShow = () => {
this.refTooltip.current.updatePosition();
//console.log(`afterShow ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
this.setState({ isOpen: true }, () => {
handleAnyClick(true, this.handleClick);
});
};
afterHide = () => {
//console.log(`afterHide ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
if (this.state.isOpen) {
this.setState({ isOpen: false }, () => {
handleAnyClick(false, this.handleClick);
});
}
};
handleClick = e => {
//console.log(`handleClick ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
if (!this.ref.current.contains(e.target)) {
//console.log(`hideTooltip() tooltipId=${this.props.tooltipId}`, this.refTooltip.current);
this.refTooltip.current.hideTooltip();
}
};
componentWillUnmount() {
handleAnyClick(false, this.handleClick);
}
render() {
const { tooltipContent } = this.props;
return (
<div ref={this.ref}>
<IconButton
id={this.id}
className="icon-button"
isClickable={true}
iconName="QuestionIcon"
size={13}
/>
<Tooltip
id={this.id}
reference={this.refTooltip}
effect="solid"
place="top"
offsetRight={110}
afterShow={this.afterShow}
afterHide={this.afterHide}
>
{tooltipContent}
</Tooltip>
</div>
);
}
}
HelpButton.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
tooltipOffsetRight: PropTypes.number,
tooltipMaxWidth: PropTypes.number,
tooltipId: PropTypes.string
};
export default HelpButton;

9
web/ASC.Web.Components/src/components/icon-button/index.js
View File

@ -128,7 +128,8 @@ class IconButton extends React.PureComponent {
isDisabled,
isFill,
isClickable,
onClick
onClick,
id
} = this.props;
return (
@ -141,6 +142,9 @@ class IconButton extends React.PureComponent {
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
isClickable={typeof onClick === "function" || isClickable}
data-tip=""
data-event="click focus"
data-for={id}
//{...this.props}
>
{React.createElement(Icons[this.state.currentIconName], {
@ -168,7 +172,8 @@ IconButton.propTypes = {
onClick: PropTypes.func,
onMouseEnter: PropTypes.func,
onMouseDown: PropTypes.func,
onMouseUp: PropTypes.func
onMouseUp: PropTypes.func,
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};
IconButton.defaultProps = {

7
web/ASC.Web.Components/src/components/label/README.md
View File

@ -35,10 +35,3 @@ Component displays the field name in the form
| `truncate` | `bool` | - | - | false | Disables word wrapping |
| `htmlFor` | `string` | - | - | - | The field ID to which the label is attached |
| `text` | `string` | - | - | - | Text |
| `tooltipId` | `string` | - | - | - | Tooltip id |
| `tooltipEvent` | `string` | - | - | - | Tooltip event |
| `iconButton` | `string` | - | - | - | Tooltip icon button |

29
web/ASC.Web.Components/src/components/tooltip/all.stories.js
View File

@ -3,15 +3,12 @@ import { storiesOf } from "@storybook/react";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import Tooltip from "./";
import IconButton from "../icon-button";
import Section from "../../../.storybook/decorators/section";
import Link from "../link";
import { Text } from "../text";
const BodyStyle = { marginTop: 100, marginLeft: 50, position: "absolute" };
const headerStyle = { marginTop: 70, marginLeft: 15, position: "absolute" };
const BodyStyle_2 = { marginTop: 70, marginLeft: 200, position: "absolute" };
const BodyStyle_3 = { marginTop: 70, marginLeft: 400 };
const BodyStyle = { marginTop: 70, marginLeft: 50, position: "absolute" };
const BodyStyle_2 = { marginTop: 70, marginLeft: 250 };
const arrayUsers = [
{
@ -51,25 +48,7 @@ storiesOf("Components|Tooltip", module)
.add("all", () => {
return (
<Section>
<h5 style={headerStyle}>Click on me</h5>
<IconButton
data-for="tooltipContent"
data-tip="You tooltip content"
data-event="click focus"
isClickable={true}
size={13}
iconName="QuestionIcon"
style={BodyStyle}
/>
<Tooltip
id="tooltipContent"
effect="solid"
place="top"
maxWidth={320}
/>
<div style={BodyStyle_2}>
<div style={BodyStyle}>
<h5 style={{ marginLeft: -5 }}>Hover on me</h5>
<Link data-for="link" data-tip="Bob Johnston">
Bob Johnston
@ -87,7 +66,7 @@ storiesOf("Components|Tooltip", module)
</div>
</Tooltip>
<div style={BodyStyle_3}>
<div style={BodyStyle_2}>
<h5 style={{ marginLeft: -5 }}>Hover group</h5>
<Link data-for="group" data-tip={0}>
Bob

4
web/ASC.Web.Components/src/components/tooltip/index.js
View File

@ -71,11 +71,9 @@ class Tooltip extends Component {
left: offsetLeft
}}
wrapper="div"
resizeHide={true}
scrollHide={true}
afterShow={afterShow}
isCapture={true}
afterHide={afterHide}
isCapture={true}
>
{children}
</ReactTooltip>

1
web/ASC.Web.Components/src/index.js
View File

@ -58,4 +58,5 @@ 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 Tooltip } from './components/tooltip'
export { default as HelpButton } from './components/help-button'