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:
DASenkiv 2019-06-27 16:25:08 +03:00
commit db84375601
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/ASC.Web.Components/example/stories/icons/index.stories.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import withReadme from 'storybook-readme/with-readme';
import styled from '@emotion/styled';
import { withKnobs, select, color } from '@storybook/addon-knobs/react';
import { withKnobs, select, color, boolean } from '@storybook/addon-knobs/react';
import Readme from './README.md';
import {Icons} from 'asc-web-components';
@ -33,6 +33,10 @@ storiesOf('Components|Icons', module)
<IconList>
{Object.values(Icons).map((Icon, index) => {
const sizeValue = select('size', ['small', 'medium', 'big', 'scale'], 'big');
let isFill = boolean('isfill', false);
let iconColor = isFill ? {color: `${color('color', "dimgray")}`} : {};
const containerWidth =
sizeValue === 'scale'
? {
@ -43,8 +47,9 @@ storiesOf('Components|Icons', module)
<IconItem key={index}>
<IconContainer style={containerWidth}>
<Icon
isfill={isFill}
size={sizeValue}
color={color('color', "dimgray")}
{...iconColor}
/>
</IconContainer>
<span>{iconNames[index]}</span>

9
web/ASC.Web.Components/src/components/icons/svg/create-styled-icon.js
View File

@ -32,10 +32,14 @@ const getSizeStyle = size => {
};
export default function createStyledIcon(Component, displayName) {
const StyledComponent = styled(Component)(
const Icon = ({ isfill, ...props }) => (
<Component {...props}></Component>
)
const StyledComponent = styled(Icon)(
props => `
* {
fill: ${props.color};
${props.isfill ? 'fill:' + props.color : ''};
}
${getSizeStyle(props.size)}
`
@ -44,6 +48,7 @@ export default function createStyledIcon(Component, displayName) {
StyledComponent.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOf(['small', 'medium', 'big', 'scale']),
isfill: PropTypes.bool
};
return StyledComponent;
}