Skip to content

Commit 9cefd7c

Browse files
edo92edo92
committed
reformat
1 parent cf95f47 commit 9cefd7c

34 files changed

+397
-234
lines changed

‎docs/entry.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ reactComponents['Empty'] = Component6;
4646
import Component7 from '../src/Components/HzMenu.js';
4747
reactComponents['HorizontalMenu'] = Component7;
4848

49-
import Component8 from '../src/Components/Icon.js';
49+
import Component8 from '../src/Components/Icons/index.js';
5050
reactComponents['Icon'] = Component8;
5151

5252
import Component9 from '../src/Components/Link.js';

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"react-dom": "^17.0.2",
1010
"react-feather": "^2.0.9",
1111
"react-helmet": "^6.1.0",
12+
"react-icons": "^4.2.0",
1213
"react-redux": "^7.2.3",
1314
"react-router": "^5.2.0",
1415
"react-router-dom": "^5.2.0",

‎src/Components/Avatar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import styled, { css } from 'styled-components';
33
import WomenAvatar5 from 'assets/img/women_avatar5.jpg';
44

55
const figureSize = css`
6-
${({ size }) =>
6+
${({ size = 'md' }) =>
77
({
88
sm: '1.5rem',
99
md: '2.3rem',
1010
xl: '6.1rem',
11-
}[size ? size : 'md'])};
11+
}[size])};
1212
`;
1313

1414
const Figure = styled.figure`

‎src/Components/Button/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { memo } from 'react';
22
import styled, { css } from 'styled-components';
33

4-
import Icon from 'Components/Icon';
4+
import Icon from 'Components/Icons';
55

66
// Dynamic styles
77
import {

‎src/Components/Checkbox.js

+11-20
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React, { memo, useEffect, useState } from 'react';
2-
import styled, { css } from 'styled-components';
2+
import styled from 'styled-components';
33

44
import { rotate } from 'Styled/anim';
5-
import { activePrimary } from 'Styled/colors';
65
import {
7-
borderDynamic,
86
cursorDynamic,
7+
borderDynamic,
8+
bgColorDynamic,
99
} from 'Styled/dynamic';
1010

11-
const active = css`
12-
${({ checked }) => (checked ? activePrimary : '#fff')};
13-
`;
14-
1511
const Input = styled.input`
1612
height: 0;
1713
width: 0;
@@ -25,9 +21,12 @@ const Label = styled.label`
2521
display: flex;
2622
`;
2723

28-
const Indicator = styled.div`
24+
const Indicator = styled.div.attrs(({ active }) => ({
25+
activebg: active,
26+
typebg: 'base',
27+
}))`
2928
${borderDynamic};
30-
background: ${active};
29+
${bgColorDynamic};
3130
3231
width: 1rem;
3332
height: 1rem;
@@ -36,10 +35,6 @@ const Indicator = styled.div`
3635
top: -1px;
3736
border-radius: 0.2em;
3837
39-
${Input}:not(:disabled):checked & {
40-
background: #d1d1d1;
41-
}
42-
4338
&::after {
4439
content: '';
4540
position: absolute;
@@ -56,10 +51,6 @@ const Indicator = styled.div`
5651
border: solid #fff;
5752
border-width: 0 0.17em 0.18em 0;
5853
}
59-
60-
&::disabled {
61-
cursor: not-allowed;
62-
}
6354
`;
6455

6556
const LabelText = styled.span`
@@ -99,12 +90,12 @@ const Checkbox = memo(
9990
id={id}
10091
type="checkbox"
10192
name={name}
102-
value={value || state}
103-
checked={state}
93+
active={state}
10494
disabled={disabled}
95+
value={value || state}
10596
onChange={handleOnChange}
10697
/>
107-
<Indicator checked={state} />
98+
<Indicator disabled={true} active={state} />
10899
</Label>
109100
);
110101
},

‎src/Components/Drawer.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import React, { memo } from 'react';
2-
import styled from 'styled-components';
2+
import styled, { css } from 'styled-components';
33

44
import helpers from 'helpers';
55
import Button from 'Components/Button';
6-
import { slidein, slideout } from 'Styled/anim';
7-
8-
const ContainerStyles = styled.div`
9-
transition: visibility 1s ease-in;
106

11-
visibility: ${({ open }) =>
12-
open ? 'visible' : 'hidden'};
7+
import { slidein, slideout } from 'Styled/anim';
8+
import { visibleDynamic } from 'Styled/dynamic';
139

14-
${({ open }) => (open ? slidein : slideout)};
10+
const slideAnim = css`
11+
${({ visible }) => (visible ? slidein : slideout)};
1512
`;
1613

17-
const Container = styled(ContainerStyles)`
14+
const Container = styled.div`
15+
${slideAnim};
16+
${visibleDynamic};
1817
width: 350px;
1918
position: fixed;
2019
flex-direction: column;
@@ -25,6 +24,7 @@ const Container = styled(ContainerStyles)`
2524
background-color: inherit;
2625
border-radius: 5px;
2726
box-shadow: 25px 0px 30px 5px black;
27+
transition: visibility 1s ease-in;
2828
`;
2929

3030
const Wrapper = styled.div`
@@ -68,9 +68,9 @@ const Body = styled.div`
6868
*/
6969

7070
const Drawer = memo(
71-
({ open, title, toggle, className, children }) => {
71+
({ isOpen, title, toggle, className, children }) => {
7272
return (
73-
<Container className={className} open={open}>
73+
<Container className={className} visible={isOpen}>
7474
<Wrapper>
7575
<Header>
7676
<Title>

‎src/Components/Dropdown.js

+8-13
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import styled, { css } from 'styled-components';
33
import helpers from 'helpers';
44

55
import { useOnClickOutside } from 'hooks/useOnClickOutside';
6-
import { Card } from 'Styled/shared';
76
import Menu from 'Components/Menu';
87

9-
const dynamicAlign = css`
10-
text-align: ${({ align }) => align || 'center'};
11-
`;
8+
import { Card } from 'Styled/shared';
9+
import {
10+
alignDynamic,
11+
visibleDynamic,
12+
} from 'Styled/dynamic';
1213

1314
const Container = styled.div`
14-
${dynamicAlign};
15+
${alignDynamic};
1516
z-index: 12;
1617
transform: none;
1718
cursor: pointer;
@@ -37,12 +38,6 @@ const MenuContainer = styled.div`
3738
transform: none;
3839
`;
3940

40-
// Dynamic visibiliy
41-
const visibility = css`
42-
visibility: ${({ isOpen }) =>
43-
isOpen ? 'visible' : 'hidden'};
44-
`;
45-
4641
// Dynamic spacing
4742
const spaceing = css`
4843
top: ${({ top }) => top};
@@ -60,7 +55,7 @@ const transform = css`
6055
const Content = styled(ContentStyle)`
6156
${spaceing};
6257
${transform};
63-
${visibility};
58+
${visibleDynamic};
6459
`;
6560

6661
/**
@@ -118,7 +113,7 @@ const DropDown = memo(
118113

119114
<Content
120115
placement={placement}
121-
isOpen={isOpen}
116+
visible={isOpen}
122117
top={top}
123118
left={left}
124119
>

‎src/Components/Empty.js

-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44

55
import UnselectedChat from 'assets/img/unselected-chat.svg';
6-
import { TextBase } from 'Styled/base';
76
import { fontSecondary } from 'Styled/colors';
87

98
const Text = styled.p`
10-
${TextBase};
119
color: ${fontSecondary};
1210
font-size: 16px;
1311
font-weight: 300;

‎src/Components/Icon.js

-45
This file was deleted.

‎src/Components/Icons/feather.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {
2+
MessageCircle,
3+
User,
4+
Users,
5+
Star,
6+
Archive,
7+
Video,
8+
Moon,
9+
Smile,
10+
Send,
11+
Paperclip,
12+
PlusCircle,
13+
Phone,
14+
MoreHorizontal,
15+
HelpCircle,
16+
} from 'react-feather';
17+
18+
const FeatherIcon = (icon) => {
19+
const allIcons = {
20+
MessageCircle,
21+
User,
22+
Users,
23+
Phone,
24+
Star,
25+
Archive,
26+
Smile,
27+
Paperclip,
28+
Send,
29+
PlusCircle,
30+
MoreHorizontal,
31+
Video,
32+
Moon,
33+
};
34+
35+
if (!allIcons[icon]) {
36+
console.warn('base icon was not found...');
37+
return HelpCircle;
38+
}
39+
40+
return allIcons[icon];
41+
};
42+
43+
export default FeatherIcon;

‎src/Components/Icons/icon.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import FeatherIcon from './feather';
3+
import SocialIcon from './social';
4+
5+
const IconSVG = ({ icon, social, size, className }) => {
6+
let Component;
7+
8+
if (icon) {
9+
Component = FeatherIcon(icon);
10+
} else if (social) {
11+
Component = SocialIcon(social);
12+
}
13+
14+
return <Component size={size} className={className} />;
15+
};
16+
17+
export default IconSVG;

‎src/Components/Icons/index.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { memo } from 'react';
2+
import styled from 'styled-components';
3+
import IconSVG from './icon';
4+
5+
import { fontColorDynamic } from 'Styled/dynamic';
6+
import {
7+
iconColorDynamic,
8+
iconSizeDynamic,
9+
} from './styles';
10+
11+
const Wrapper = styled.span`
12+
display: flex;
13+
position: relative;
14+
`;
15+
16+
const MyIcon = styled(IconSVG)`
17+
${iconColorDynamic};
18+
${iconSizeDynamic};
19+
${fontColorDynamic};
20+
`;
21+
22+
/**
23+
*
24+
* @component
25+
* @param {String} icon icon name
26+
* @param {String} [size] size in pixels
27+
* @param {String} [color] color code
28+
* @param {String} [type] dynamic colors
29+
* @param {String} [fill] fill icon color code
30+
*/
31+
const Icon = memo(
32+
({
33+
icon,
34+
social,
35+
size,
36+
type,
37+
color,
38+
fill,
39+
className,
40+
}) => {
41+
return (
42+
<Wrapper>
43+
<MyIcon
44+
icon={icon}
45+
size={size}
46+
color={color}
47+
fill={fill}
48+
type={type}
49+
social={social}
50+
className={className}
51+
/>
52+
</Wrapper>
53+
);
54+
},
55+
);
56+
57+
export default Icon;

0 commit comments

Comments
 (0)