IlyaSobolev/DocSpace-client
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:
Nikita Gopienko 2019-08-01 10:50:42 +03:00
commit 1cdeef8a3b
18 changed files with 230 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/ASC.Web.Components/src/components/avatar/index.js
View File

@ -13,13 +13,13 @@ const StyledAvatar = styled.div`
(props.size === 'big' && '82px') ||
(props.size === 'medium' && '48px') ||
(props.size === 'small' && '32px')
};
};
height: ${props =>
(props.size === 'max' && '160px') ||
(props.size === 'big' && '82px') ||
(props.size === 'medium' && '48px') ||
(props.size === 'small' && '32px')
};
};
font-family: 'Open Sans';
font-style: normal;
@ -32,25 +32,25 @@ const RoleWrapper = styled.div`
(props.size === 'big' && '-2px') ||
(props.size === 'medium' && '0px') ||
(props.size === 'small' && '-2px')
};
};
bottom: ${props =>
(props.size === 'max' && '0px') ||
(props.size === 'big' && '4px') ||
(props.size === 'medium' && '0px') ||
(props.size === 'small' && '3px')
};
};
width: ${props =>
(props.size === 'max' && '24px') ||
(props.size === 'big' && '12px') ||
(props.size === 'medium' && '12px') ||
(props.size === 'small' && '12px')
};
};
height: ${props =>
(props.size === 'max' && '24px') ||
(props.size === 'big' && '12px') ||
(props.size === 'medium' && '12px') ||
(props.size === 'small' && '12px')
};
};
`;
const ImageStyled = styled.img`
@ -59,7 +59,7 @@ const ImageStyled = styled.img`
border-radius: 50%;
`;
const AvatarWrapper= styled.div`
const AvatarWrapper = styled.div`
border-radius: 50%;
height: 100%;
background-color: ${avatarBackground};
@ -84,7 +84,7 @@ const NamedAvatar = styled.div`
(props.size === 'big' && '34px') ||
(props.size === 'medium' && '20px') ||
(props.size === 'small' && '12px')
};
};
color: ${whiteColor};
`;
@ -130,30 +130,38 @@ const EditLink = styled.a`
-webkit-text-overflow: ellipsis;
`;
const EmptyIcon = styled(Icons.CameraIcon)`
border-radius: '50%';
`;
const getInitials = userName => {
const initials = userName
? userName
.split(/\s/)
.reduce((response, word) => response += word.slice(0, 1), '')
.substring(0, 2)
: "";
return initials;
};
const Avatar = React.memo(props => {
//console.log("Avatar render");
const {size, source, userName, role, editing, editLabel, editAction} = props;
const { size, source, userName, role, editing, editLabel, editAction } = props;
const setNamedAvatar = userName => {
let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,2)
return (
<NamedAvatar {...props}>{initials}</NamedAvatar>
);
};
const initials = getInitials(userName);
return (
<StyledAvatar {...props}>
<AvatarWrapper {...props}>
{source !== '' && <ImageStyled src={source} />}
{(source === '' && userName !== '') && setNamedAvatar(userName)}
{(source === '' && userName === '') && <Icons.CameraIcon size='scale' style={{borderRadius: '50%'}} />}
{(source === '' && userName !== '') && <NamedAvatar {...props}>{initials}</NamedAvatar>}
{(source === '' && userName === '') && <EmptyIcon size='scale' />}
</AvatarWrapper>
{editing && (size === 'max') &&
{editing && (size === 'max') &&
<EditContainer {...props}>
<EditLink title={editLabel} onClick={editAction}>{editLabel}</EditLink>
</EditContainer>}
<RoleWrapper {... props}>
<RoleWrapper {...props}>
{role === 'guest' && <Icons.GuestIcon size='scale' />}
{role === 'admin' && <Icons.AdministratorIcon size='scale' />}
{role === 'owner' && <Icons.OwnerIcon size='scale' />}
@ -164,7 +172,7 @@ const Avatar = React.memo(props => {
Avatar.propTypes = {
size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),
role: PropTypes.oneOf(['owner', 'admin','guest', 'user']),
role: PropTypes.oneOf(['owner', 'admin', 'guest', 'user']),
source: PropTypes.string,
editLabel: PropTypes.string,
userName: PropTypes.string,

14
web/ASC.Web.Components/src/components/badge/index.js
View File

@ -14,25 +14,21 @@ const StyledBadge = styled.div`
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
display: ${props => props.number > 0 ? 'inline-block' : 'none'};
user-select: none;
`;
const Badge = props => {
//console.log("Badge render");
const onClick = (e) => {
const onClick = e => {
if (props.onClick) {
e.stopPropagation();
props.onClick(e);
}
}
};
return (
props.number > 0
? <StyledBadge {...props} onClick={onClick}>{props.number}</StyledBadge>
: ""
);
return (<StyledBadge {...props} onClick={onClick}>{props.number}</StyledBadge>);
};
Badge.propTypes = {

8
web/ASC.Web.Components/src/components/button/index.js
View File

@ -28,7 +28,7 @@ const hoverCss = css`
`}
`;
const ButtonWrapper = ({primary, isHovered, isClicked, isDisabled, isLoading, ...props}) => <button type="button" {...props}></button>;
const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled, isLoading, ...props}) => <button type="button" {...props}></button>;
const StyledButton = styled(ButtonWrapper).attrs((props) => ({
disabled: props.isDisabled || props.isLoading ? 'disabled' : '',
@ -60,6 +60,8 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
: (props.primary ? '#A6DCF2' : '#FFFFFF'))
};
${props => props.scale && `width: 100%;`}
padding: ${props =>
(props.size === 'big' && (props.primary
? (props.icon
@ -195,6 +197,7 @@ Button.propTypes = {
label: PropTypes.string,
primary: PropTypes.bool,
size: PropTypes.oneOf(['base', 'medium', 'big']),
scale: PropTypes.bool,
icon: PropTypes.node,
tabIndex: PropTypes.number,
@ -204,13 +207,14 @@ Button.propTypes = {
isDisabled: PropTypes.bool,
isLoading: PropTypes.bool,
onClick: PropTypes.func.isRequired,
onClick: PropTypes.func,
};
Button.defaultProps = {
label: '',
primary: false,
size: 'base',
scale: false,
icon: null,
tabIndex: -1,

15
web/ASC.Web.Components/src/components/combobox/index.js
View File

@ -50,13 +50,16 @@ class ComboBox extends React.PureComponent {
stopAction = (e) => e.preventDefault();
toggle = (isOpen) => this.setState({ isOpen: isOpen });
comboBoxClick = () => {
this.setState({ option: this.props.option });
this.toggle(!this.state.isOpen);
this.setState({
option: this.props.option,
isOpen: !this.state.isOpen
});
};
optionClick = (option) => {
option.onClick && option.onClick();
this.toggle(!this.state.isOpen);
this.setState({ boxLabel: option.label });
this.setState({
boxLabel: option.label,
isOpen: !this.state.isOpen
});
this.props.onSelect && this.props.onSelect(option);
};
@ -100,7 +103,7 @@ class ComboBox extends React.PureComponent {
{this.state.options.map((option) =>
<DropDownItem {...option}
disabled={option.label === this.state.boxLabel}
onClick={() => this.optionClick(option)}
onClick={this.optionClick.bind(this, option)}
/>
)}
</DropDown>

8
web/ASC.Web.Components/src/components/content-row/index.js
View File

@ -80,6 +80,7 @@ class ContentRow extends React.PureComponent {
this.handleContextMenu = this.handleContextMenu.bind(this);
this.changeCheckbox = this.changeCheckbox.bind(this);
this.getOptions = this.getOptions.bind(this);
};
componentDidMount() {
@ -110,9 +111,12 @@ class ContentRow extends React.PureComponent {
}
};
getOptions = () => this.props.contextOptions;
render() {
//console.log("ContentRow render");
const { avatarRole, avatarSource, avatarName, contextOptions, children } = this.props;
const { avatarRole, avatarSource, avatarName, children } = this.props;
return (
<StyledContentRow {...this.props}>
@ -127,7 +131,7 @@ class ContentRow extends React.PureComponent {
<StyledContent>{children}</StyledContent>
{this.props.hasOwnProperty("contextOptions") &&
<StyledOptionButton>
<ContextMenuButton directionX='right' getData={() => contextOptions} />
<ContextMenuButton directionX='right' getData={this.getOptions} />
</StyledOptionButton>
}
</StyledContentRow>

37
web/ASC.Web.Components/src/components/context-menu-button/index.js
View File

@ -25,6 +25,8 @@ class ContextMenuButton extends React.PureComponent {
this.handleClick = this.handleClick.bind(this);
this.stopAction = this.stopAction.bind(this);
this.toggle = this.toggle.bind(this);
this.onIconButtonClick = this.onIconButtonClick.bind(this);
this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
}
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
@ -49,6 +51,23 @@ class ContextMenuButton extends React.PureComponent {
}
}
onIconButtonClick = () => {
if(!this.props.isDisabled) {
this.setState({
data: this.props.getData(),
isOpen: !this.state.isOpen
});
}
else {
this.stopAction
}
}
onDropDownItemClick = (item) => {
item.onClick && item.onClick();
this.toggle(!this.state.isOpen);
}
render() {
//console.log("ContextMenuButton render");
return (
@ -63,14 +82,7 @@ class ContextMenuButton extends React.PureComponent {
iconClickName={this.props.iconClickName}
isFill={false}
isDisabled={this.props.isDisabled}
onClick={
!this.props.isDisabled
? () => {
this.setState({ data: this.props.getData()});
this.toggle(!this.state.isOpen);
}
: this.stopAction
}
onClick={this.onIconButtonClick}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
onMouseOver={this.props.onMouseOver}
@ -78,13 +90,10 @@ class ContextMenuButton extends React.PureComponent {
/>
<DropDown directionX={this.props.directionX || 'left'} isOpen={this.state.isOpen}>
{
this.state.data.map(item =>
<DropDownItem
this.state.data.map(item =>
<DropDownItem
{...item}
onClick={() => {
item.onClick && item.onClick();
this.toggle(!this.state.isOpen);
}}
onClick={this.onDropDownItemClick.bind(this, item)}
/>
)
}

5
web/ASC.Web.Components/src/components/date-input/index.js
View File

@ -14,6 +14,7 @@ const DateInput = props => {
const iconClick = function(){
this.onClick();
};
return (
<StyledDatePicker>
<DatePicker
@ -25,9 +26,9 @@ const DateInput = props => {
isReadOnly={props.readOnly}
hasError={props.hasError}
hasWarning={props.hasWarning}
iconName={"CalendarEmptyIcon"}
iconName="CalendarEmptyIcon"
isIconFill={true}
iconColor={"#A3A9AE"}
iconColor="#A3A9AE"
onIconClick={iconClick}
scale={true}
/>

57
web/ASC.Web.Components/src/components/filter-input/index.js
View File

@ -27,7 +27,7 @@ const StyledComboBox = styled(ComboBox)`
class FilterInput extends React.Component {
constructor(props) {
super(props);
this.state = {
sortDirection: false,
sortId: this.props.getSortData().length > 0 ? this.props.getSortData()[0].id : "",
@ -42,32 +42,33 @@ class FilterInput extends React.Component {
this.onSortDirectionClick = this.onSortDirectionClick.bind(this);
this.onSearch = this.onSearch.bind(this);
this.setFilterTimer = this.setFilterTimer.bind(this);
this.onSearchChanged = this.onSearchChanged.bind(this);
}
getSortData(){
getSortData() {
let _this = this;
let d = this.props.getSortData();
d.map(function(item){
d.map(function (item) {
item.key = item.id;
item.onClick = (e) => _this.onClickSortItem(e, item);
item.onClick = _this.onClickSortItem.bind(_this, item);
return item;
});
return d;
}
onClickSortItem(e, item){
this.setState({ sortId: item.id});
onClickSortItem(item) {
this.setState({ sortId: item.id });
this.onFilter(this.state.filterValue, item.id, this.state.sortDirection ? "asc" : "desc");
}
onSortDirectionClick(e){
onSortDirectionClick(e) {
this.onFilter(this.state.filterValue, this.state.sortId, !this.state.sortDirection ? "asc" : "desc")
this.setState({ sortDirection: !this.state.sortDirection});
this.setState({ sortDirection: !this.state.sortDirection });
}
onSearch(result){
this.setState({ filterValue: result.filterValue});
onSearch(result) {
this.setState({ filterValue: result.filterValue });
this.onFilter(result.filterValue, this.state.sortId, this.state.sortDirection ? "asc" : "desc")
}
onFilter(filterValue, sortId, sortDirection){
onFilter(filterValue, sortId, sortDirection) {
let result = {
inputValue: this.state.searchText,
filterValue: filterValue,
@ -87,12 +88,19 @@ class FilterInput extends React.Component {
}, this.props.refreshTimeout);
}
render(){
onSearchChanged(e) {
this.setState({ searchText: e.target.value })
if (this.props.autoRefresh)
this.setFilterTimer();
}
render() {
//console.log("FilterInput render");
return(
return (
<StyledFilterInput>
<StyledSearchInput>
<SearchInput
<SearchInput
id={this.props.id}
isDisabled={this.props.isDisabled}
size={this.props.size}
@ -100,19 +108,14 @@ class FilterInput extends React.Component {
isNeedFilter={true}
getFilterData={this.props.getFilterData}
placeholder={this.props.placeholder}
onSearchClick={(result) => {this.onSearch(result)}}
onChangeFilter={(result) => {this.onSearch(result)}}
onSearchClick={this.onSearch}
onChangeFilter={this.onSearch}
value={this.state.searchText}
onChange={(e) => {
this.setState({searchText: e.target.value})
if(this.props.autoRefresh)
this.setFilterTimer();
}}
onChange={this.onSearchChanged}
/>
</StyledSearchInput>
<StyledComboBox
<StyledComboBox
options={this.getSortData()}
isDisabled={this.props.isDisabled}
>
@ -128,10 +131,10 @@ class FilterInput extends React.Component {
onClick={this.onSortDirectionClick}
/>
</StyledIconButton>
</StyledComboBox>
</StyledFilterInput>
);
}
};

2
web/ASC.Web.Components/src/components/group-button/index.js
View File

@ -175,7 +175,7 @@ class GroupButton extends React.PureComponent {
</StyledDropdownToggle>
<DropDown isOpen={this.state.isOpen}>
{React.Children.map(children, (child) =>
<DropDownItem {...child.props} onClick={() => this.dropDownItemClick(child)} />)}
<DropDownItem {...child.props} onClick={this.dropDownItemClick.bind(this, child)} />)}
</DropDown>
</>
: <StyledDropdownToggle {...this.props}>{label}</StyledDropdownToggle>

4
web/ASC.Web.Components/src/components/group-buttons-menu/index.js
View File

@ -135,7 +135,7 @@ class GroupButtonsMenu extends React.PureComponent {
isSelect={item.isSelect}
onSelect={item.onSelect}
fontWeight={item.fontWeight}
onClick={() => this.groupButtonClick(item)}
onClick={this.groupButtonClick.bind(this, item)}
{...this.props}
>
{item.children}
@ -148,7 +148,7 @@ class GroupButtonsMenu extends React.PureComponent {
<DropDownItem
key={`moreNavItem-${i}`}
label={item.label}
onClick={() => this.groupButtonClick(item)}
onClick={this.groupButtonClick.bind(this, item)}
/>
)}
</GroupButton>

92
web/ASC.Web.Components/src/components/input-block/index.js
View File

@ -9,7 +9,7 @@ import commonInputStyle from '../text-input/common-input-styles';
const iconNames = Object.keys(Icons);
const Input = ({ isAutoFocussed, isDisabled, isReadOnly, hasError, hasWarning, iconName, scale, ...props }) => <input {...props}/>;
const Input = ({ isAutoFocussed, isDisabled, isReadOnly, hasError, hasWarning, iconName, scale, ...props }) => <input {...props} />;
const StyledTextInput = styled(Input)`
border: none;
`;
@ -49,67 +49,78 @@ const StyledInputGroup = styled(CustomInputGroup)`
const InputBlock = React.forwardRef((props, ref) => {
//console.log("InputBlock render");
const {onChange, value, children, size } = props;
const { onChange, value, children, size } = props;
let iconButtonSize = 0;
if(typeof props.iconSize == "number" && props.iconSize > 0){
if (typeof props.iconSize == "number" && props.iconSize > 0) {
iconButtonSize = props.iconSize;
}else{
} else {
switch (size) {
case 'base':
iconButtonSize = 15;
iconButtonSize = 15;
break;
case 'middle':
iconButtonSize = 18;
iconButtonSize = 18;
break;
case 'big':
iconButtonSize = 21;
iconButtonSize = 21;
break;
case 'huge':
iconButtonSize = 24;
iconButtonSize = 24;
break;
default:
break;
}
}
const onIconClick = (e) => {
props.onIconClick && props.onIconClick(e, value);
}
return (
<StyledInputGroup hasError={props.hasError} hasWarning={props.hasWarning} isDisabled={props.isDisabled} scale={props.scale} size={props.size}>
<StyledInputGroup hasError={props.hasError} hasWarning={props.hasWarning} isDisabled={props.isDisabled} scale={props.scale} size={props.size}>
<InputGroupAddon addonType="prepend">
<StyledChildrenBlock>
{children}
</StyledChildrenBlock>
</InputGroupAddon>
<StyledTextInput
value={value}
isDisabled={props.isDisabled}
hasError={props.hasError}
hasWarning={props.hasWarning}
placeholder={props.placeholder}
tabIndex={props.tabIndex}
type={props.type}
maxLength={props.maxLength}
onBlur={props.onBlur}
onFocus={props.onFocus}
readOnly={props.isReadOnly}
autoFocus={props.autoFocus}
autoComplete={props.autoComplete}
size={props.size}
scale={props.scale}
onChange={onChange}
<StyledTextInput
value={value}
isDisabled={props.isDisabled}
hasError={props.hasError}
hasWarning={props.hasWarning}
placeholder={props.placeholder}
tabIndex={props.tabIndex}
type={props.type}
maxLength={props.maxLength}
onBlur={props.onBlur}
onFocus={props.onFocus}
readOnly={props.isReadOnly}
autoFocus={props.autoFocus}
autoComplete={props.autoComplete}
size={props.size}
scale={props.scale}
onChange={onChange}
as={TextInput}
/>
{
iconNames.includes(props.iconName)
&&
<InputGroupAddon addonType="append">
<StyledIconBlock>
<IconButton size={iconButtonSize} color={props.iconColor} iconName={props.iconName} isFill={props.isIconFill} isDisabled={props.isDisabled} onClick={(e) => props.onIconClick(e, value)}/>
</StyledIconBlock>
</InputGroupAddon>
}
as={TextInput}
/>
{
iconNames.includes(props.iconName)
&&
<InputGroupAddon addonType="append">
<StyledIconBlock>
<IconButton
size={iconButtonSize}
color={props.iconColor}
iconName={props.iconName}
isFill={props.isIconFill}
isDisabled={props.isDisabled}
onClick={onIconClick} />
</StyledIconBlock>
</InputGroupAddon>
}
</StyledInputGroup>
);
});
@ -167,8 +178,7 @@ InputBlock.defaultProps = {
iconName: "",
iconColor: "#ffffff",
isIconFill: false,
isDisabled: false,
onIconClick: (e) => console.log("Icon click")
isDisabled: false
}
export default InputBlock

8
web/ASC.Web.Components/src/components/layout/sub-components/nav.js
View File

@ -22,15 +22,19 @@ const StyledNav = styled.nav`
}
`;
const StyledScrollbar = styled(Scrollbar)`
width: ${props => props.opened ? 240 : 56};
`;
const Nav = React.memo(props => {
console.log("Nav render");
const { opened, onMouseEnter, onMouseLeave, children } = props;
return (
<StyledNav opened={opened} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Scrollbar stype="smallWhite" style={{ width: opened ? 240 : 56 }}>
<StyledScrollbar stype="smallWhite">
{children}
</Scrollbar>
</StyledScrollbar>
</StyledNav>
);
});

20
web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js
View File

@ -20,6 +20,8 @@ class ProfileActions extends React.PureComponent {
this.handleClick = this.handleClick.bind(this);
this.toggle = this.toggle.bind(this);
this.getUserRole = this.getUserRole.bind(this);
this.onAvatarClick = this.onAvatarClick.bind(this);
this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
};
handleClick = (e) => {
@ -53,6 +55,15 @@ class ProfileActions extends React.PureComponent {
return "user";
};
onAvatarClick = () => {
this.toggle(!this.state.opened);
}
onDropDownItemClick = (action) => {
action.onClick && action.onClick();
this.toggle(!this.state.opened);
}
render() {
console.log("Layout sub-component ProfileActions render");
return (
@ -62,9 +73,7 @@ class ProfileActions extends React.PureComponent {
role={this.getUserRole(this.state.user)}
source={this.state.user.avatarSmall}
userName={this.state.user.userName}
onClick={() => {
this.toggle(!this.state.opened);
}}
onClick={this.onAvatarClick}
/>
<DropDown
isUserPreview
@ -83,10 +92,7 @@ class ProfileActions extends React.PureComponent {
this.state.userActions.map(action =>
<DropDownItem
{...action}
onClick={() => {
action.onClick && action.onClick();
this.toggle(!this.state.opened);
}}
onClick={this.onDropDownItemClick.bind(this, action)}
/>
)
}

30
web/ASC.Web.Components/src/components/link/index.js
View File

@ -127,6 +127,7 @@ class Link extends React.PureComponent {
this.stopAction = this.stopAction.bind(this);
this.toggleDropdown = this.toggleDropdown.bind(this);
this.toggleHovered = this.toggleHovered.bind(this);
this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
}
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggleDropdown(false);
@ -135,8 +136,10 @@ class Link extends React.PureComponent {
toggleHovered = (isHovered) => this.setState({ isHovered: isHovered });
onMouseAction = () => this.props.dropdownType === 'appearDottedAfterHover' && this.toggleHovered(!this.state.isHovered);
clickToSpan = () => {
this.setState({ data: this.props.data });
this.toggleDropdown(!this.state.isOpen);
this.setState({
data: this.props.data,
isOpen: !this.state.isOpen
});
}
clickToSpanWithHandleEvent = (e) => {
this.stopAction(e);
@ -153,18 +156,30 @@ class Link extends React.PureComponent {
document.removeEventListener("click", this.handleClick)
}
componentDidUpdate(prevProps) {
// Store prevId in state so we can compare when props change.
// Clear out previously-loaded data (so we don't render stale stuff).
if (this.props.dropdownType !== prevProps.dropdownType) {
this.setState({ isDropdown: this.props.dropdownType != 'none' });
if (this.props.isOpen !== prevProps.isOpen) {
this.setState({
isDropdown: this.props.dropdownType != 'none',
isOpen: this.props.isOpen
});
}
else {
this.setState({ isDropdown: this.props.dropdownType != 'none' });
}
}
if (this.props.isOpen !== prevProps.isOpen) {
else if (this.props.isOpen !== prevProps.isOpen) {
this.toggleDropdown(this.props.isOpen);
}
}
onDropDownItemClick = (item) => {
item.onClick && item.onClick();
this.toggleDropdown(!this.state.isOpen);
}
render() {
console.log("Link render");
return (
@ -194,10 +209,7 @@ class Link extends React.PureComponent {
this.state.data.map(item =>
<DropDownItem
{...item}
onClick={() => {
item.onClick && item.onClick();
this.toggleDropdown(!this.state.isOpen);
}}
onClick={this.onDropDownItemClick.bind(this.props, item)}
/>
)
}

5
web/ASC.Web.Storybook/stories/buttons/base/README.md
View File

@ -22,8 +22,9 @@ Button is used for a action on a page.
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `label` | `string` | - | - | - | Button text |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `size` | `oneOf` | - | `base`, `middle`, `big` | `base` | Size of button |
| `scale` | `bool` | - | - | false | Scale width of button to 100% |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `isLoading` | `bool` | - | - | - | Tells when the button should show loader icon |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |

1
web/ASC.Web.Storybook/stories/buttons/base/base.button.stories.js
View File

@ -24,6 +24,7 @@ storiesOf('Components|Buttons', module)
label={text('label', 'Base button')}
primary={boolean('primary', true)}
size={select('size', sizeOptions, 'big')}
scale={boolean('scale', false)}
isLoading={boolean('isLoading', false)}
isHovered={boolean('isHovered', false)}

20
web/ASC.Web.Storybook/stories/input/combobox/README.md
View File

@ -9,7 +9,22 @@ Custom combo box input
```js
import { ComboBox } from 'asc-web-components';
<ComboBox options={options} isDisabled={false}/>
const options = [
{
key: '0',
label: '25 per page'
},
{
key: '1',
label: '50 per page',
},
{
key: '2',
label: '100 per page'
}
];
<ComboBox options={options} isDisabled={false} onSelect={option => console.log('selected', option)}/>
```
#### Properties
@ -19,4 +34,5 @@ import { ComboBox } from 'asc-web-components';
| `options` | `array` | ✅ | - | - | Combo box options |
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border |
| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default |
| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default |
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |

4
web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js
View File

@ -5,8 +5,9 @@ import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import Section from '../../../.storybook/decorators/section';
import { ComboBox } from 'asc-web-components'
import { action } from '@storybook/addon-actions';
let options = [
const options = [
{
key: '0',
label: '25 per page'
@ -28,6 +29,7 @@ storiesOf('Components|Input', module)
<Section>
<ComboBox
options={options}
onSelect={option => action("Selected option")(option)}
isDisabled={boolean('isDisabled', false)}
withBorder={boolean('withBorder', true)}
/>