Skip to content
Snippets Groups Projects
Commit 9a7a7713 authored by tspuller's avatar tspuller
Browse files

code cleanup

parent 811d37e1
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 2145 deletions
src/components/Algolia/Algolia.js deleted 100644 → 0
+ 0
− 4
View file @ 811d37e1
import Sidebar from './Sidebar';
import Footer from './Footer';
export { Sidebar, Footer };
src/components/Algolia/AlgoliaComponent.style.js deleted 100644 → 0
+ 0
− 901
View file @ 811d37e1
This diff is collapsed.
src/components/Algolia/Footer.js deleted 100644 → 0
+ 0
− 14
View file @ 811d37e1
import React from 'react';
import AlgoliaLogo from './algolia.svg';
import { FooterWrapper } from './AlgoliaComponent.style';
const Footer = () => (
<FooterWrapper className="isoAlgoliaFooter">
<span>Powred by</span>
<div className="isoLogoWrapper">
<img alt="#" src={process.env.PUBLIC_URL + AlgoliaLogo} />
</div>
</FooterWrapper>
);
export default Footer;
src/components/Algolia/RangeSlider.js deleted 100644 → 0
+ 0
− 69
View file @ 811d37e1
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connectRange } from 'react-instantsearch/connectors';
import 'rheostat/initialize';
import 'rheostat/css/rheostat.css';
import Rheostat from 'rheostat';
class Range extends Component {
static propTypes = {
min: PropTypes.number,
max: PropTypes.number,
currentRefinement: PropTypes.object,
refine: PropTypes.func.isRequired,
canRefine: PropTypes.bool.isRequired,
};
state = { currentValues: { min: this.props.min, max: this.props.max } };
componentWillReceiveProps(sliderState) {
if (sliderState.canRefine) {
this.setState({
currentValues: {
min: sliderState.currentRefinement.min,
max: sliderState.currentRefinement.max,
},
});
}
}
onValuesUpdated = sliderState => {
this.setState({
currentValues: { min: sliderState.values[0], max: sliderState.values[1] },
});
};
onChange = sliderState => {
if (
this.props.currentRefinement.min !== sliderState.values[0] ||
this.props.currentRefinement.max !== sliderState.values[1]
) {
this.props.refine({
min: sliderState.values[0],
max: sliderState.values[1],
});
}
};
render() {
const { min, max, currentRefinement } = this.props;
const { currentValues } = this.state;
return min !== max ? (
<div className="isoAlRangeSlider">
<div className="isoAlRangeNumber">
<span>{currentValues.min}</span> -<span>{currentValues.max}</span>
</div>
<Rheostat
min={min}
max={max}
values={[currentRefinement.min, currentRefinement.max]}
onChange={this.onChange}
onValuesUpdated={this.onValuesUpdated}
/>
</div>
) : null;
}
}
const RangeSlider = connectRange(Range);
export default RangeSlider;
src/components/Algolia/Sidebar.js deleted 100644 → 0
+ 0
− 70
View file @ 811d37e1
import React from 'react';
import {
RefinementList,
StarRating,
Toggle,
HierarchicalMenu,
SearchBox,
MultiRange,
ClearAll,
} from 'react-instantsearch/dom';
import RangeSlider from './RangeSlider';
import VoiceRecognition from './VoiceRecognition';
import { SidebarWrapper } from './AlgoliaComponent.style';
export default ({ setVoice }) => (
<SidebarWrapper className="isoAlgoliaSidebar">
<SearchBox translations={{ placeholder: 'Search here' }} />
<VoiceRecognition setVoice={setVoice} />
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Multi Range</h3>
<MultiRange
attributeName="price"
items={[
{ end: 10, label: '<$10' },
{ start: 10, end: 100, label: '$10-$100' },
{ start: 100, end: 500, label: '$100-$500' },
{ start: 500, label: '>$500' },
]}
/>
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle" style={{ marginBottom: 10 }}>
Slider
</h3>
<RangeSlider attributeName="price" />
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Category</h3>
<RefinementList attributeName="categories" />
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Brand</h3>
<RefinementList attributeName="brand" withSearchBox />
</div>
<div className="isoAlgoliaSidebarItem">
<HierarchicalMenu
attributes={[
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2',
]}
/>
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Rating</h3>
<StarRating attributeName="rating" style={{ background: '#ff0000' }} />
</div>
<div className="isoAlgoliaSidebarItem isoInline">
<h3 className="isoAlgoliaSidebarTitle">Toggle</h3>
<Toggle attributeName="free_shipping" label="Free Shipping" />
</div>
<ClearAll />
</SidebarWrapper>
);
src/components/Algolia/VoiceRecognition.js deleted 100644 → 0
+ 0
− 61
View file @ 811d37e1
import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import SpeechRecognition from 'react-speech-recognition';
import { VoiceSearchWrapper } from './AlgoliaComponent.style';
const propTypes = {
transcript: PropTypes.string,
resetTranscript: PropTypes.func,
browserSupportsSpeechRecognition: PropTypes.bool,
};
const options = {
autoStart: false,
};
class VoiceRecognition extends Component {
state = {
listening: false,
};
render() {
const {
transcript,
resetTranscript,
browserSupportsSpeechRecognition,
startListening,
stopListening,
setVoice,
} = this.props;
if (!browserSupportsSpeechRecognition) {
return <div />;
}
return (
<VoiceSearchWrapper className="isoVoiceSearch">
{!this.state.listening ? (
<div className="isoVoiceSearchStart">
<button
onClick={() => {
startListening();
this.setState({ listening: true });
}}
/>
<span>Start Speaking</span>
</div>
) : (
<div className="isoVoiceSearchRunning">
<button
onClick={() => {
setVoice(transcript);
resetTranscript();
stopListening();
this.setState({ listening: false });
}}
/>
{/* <span>Search</span> */}
<span>{transcript}</span>
</div>
)}
</VoiceSearchWrapper>
);
}
}
VoiceRecognition.propTypes = propTypes;
export default SpeechRecognition(options)(VoiceRecognition);
src/components/Algolia/algolia.svg deleted 100644 → 0
+ 0
− 14
View file @ 811d37e1
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="127px" viewBox="0 0 512 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<linearGradient x1="-37.754498%" y1="134.908438%" x2="130.272074%" y2="-27.6847754%" id="linearGradient-1">
<stop stop-color="#00AEFF" offset="0%"></stop>
<stop stop-color="#3369E7" offset="100%"></stop>
</linearGradient>
</defs>
<g>
<path d="M16.7,0 L110,0 C119.2,0 126.7,7.5 126.7,16.7 L126.7,110.1 C126.7,119.3 119.2,126.8 110,126.8 L16.7,126.8 C7.5,126.8 0,119.3 0,110.1 L0,16.6 C0,7.5 7.5,0 16.7,0 Z" fill="url(#linearGradient-1)"></path>
<path d="M64.8,32 C45.1,32 29,48.1 29,67.9 C29,87.7 45,103.7 64.8,103.7 C84.6,103.7 100.6,87.7 100.6,67.9 C100.6,48.1 84.6,32 64.8,32 Z M64.8,93.1 C50.9,93.1 39.6,81.8 39.6,67.9 C39.6,54 50.9,42.7 64.8,42.7 C78.7,42.7 90,53.9 90,67.9 C90,81.9 78.8,93.1 64.8,93.1 Z M64.8,47.8 L64.8,66.6 C64.8,67.1 65.4,67.5 65.9,67.3 L82.6,58.6 C83,58.4 83.1,57.9 82.9,57.6 C79.4,51.5 73,47.4 65.6,47.1 C65.2,47.1 64.8,47.4 64.8,47.8 Z M41.4,34 L39.2,31.8 C37,29.6 33.6,29.6 31.4,31.8 L28.8,34.4 C26.6,36.6 26.6,40 28.8,42.2 L31,44.4 C31.3,44.7 31.8,44.7 32.2,44.3 C33.5,42.6 34.9,40.9 36.4,39.4 C38,37.8 39.6,36.4 41.4,35.2 C41.7,34.9 41.8,34.3 41.4,34 Z M76.6,28.3 L76.6,24 C76.6,21 74.1,18.5 71.1,18.5 L58.3,18.5 C55.3,18.5 52.8,21 52.8,24 L52.8,28.5 C52.8,29 53.3,29.3 53.8,29.2 C57.4,28.2 61.1,27.6 65,27.6 C68.7,27.6 72.3,28.1 75.8,29.1 C76.1,29.1 76.6,28.8 76.6,28.3 Z" fill="#FFFFFF"></path>
<path d="M316.9,97 C316.9,107.3 314.3,114.8 309,119.5 C303.7,124.3 295.7,126.7 284.9,126.7 C280.9,126.7 272.7,125.9 266.1,124.5 L268.5,112.6 C274,113.8 281.3,114.1 285.1,114.1 C291.1,114.1 295.4,112.9 298,110.4 C300.6,107.9 301.8,104.3 301.8,99.4 L301.8,96.9 C300.3,97.6 298.3,98.4 295.9,99.1 C293.5,99.8 290.7,100.2 287.5,100.2 C283.3,100.2 279.6,99.5 276.2,98.2 C272.8,96.9 269.8,95 267.4,92.4 C265,89.9 263.1,86.7 261.7,82.9 C260.3,79.1 259.7,72.3 259.7,67.3 C259.7,62.6 260.4,56.7 261.9,52.8 C263.4,48.9 265.4,45.5 268.2,42.7 C271,39.9 274.4,37.7 278.3,36.2 C282.3,34.6 286.9,33.6 291.9,33.6 C296.8,33.6 301.3,34.2 305.7,34.9 C310.1,35.6 313.8,36.4 316.9,37.2 L316.9,97 L316.9,97 Z M275.1,67.3 C275.1,73.6 276.5,80.6 279.3,83.5 C282.1,86.4 285.6,87.9 290,87.9 C292.4,87.9 294.7,87.6 296.8,86.9 C298.9,86.2 300.6,85.5 302,84.6 L302,47.2 C300.9,47 296.4,46 292.1,45.9 C286.6,45.7 282.5,48 279.6,51.6 C276.5,55.2 275.1,61.4 275.1,67.3 Z M388.2,67.3 C388.2,72.4 387.5,76.2 386,80.4 C384.5,84.6 382.4,88.2 379.7,91.1 C377,94 373.7,96.4 369.9,98 C366.1,99.6 360.1,100.5 357.2,100.5 C354.2,100.5 348.4,99.6 344.5,98 C340.7,96.3 337.4,94.1 334.7,91.1 C332,88.1 329.9,84.6 328.3,80.4 C326.8,76.2 326,72.4 326,67.3 C326,62.2 326.7,57.3 328.2,53.2 C329.7,49 331.9,45.5 334.7,42.5 C337.5,39.5 340.8,37.3 344.5,35.7 C348.3,34.1 352.5,33.3 357,33.3 C361.5,33.3 365.7,34.1 369.6,35.7 C373.4,37.3 376.8,39.6 379.4,42.5 C382.1,45.5 384.2,49 385.8,53.2 C387.4,57.3 388.2,62.2 388.2,67.3 Z M372.8,67.3 C372.8,60.8 371.4,55.4 368.6,51.6 C365.8,47.8 361.9,45.9 357,45.9 C352.1,45.9 348.2,47.8 345.4,51.6 C342.6,55.4 341.3,60.8 341.3,67.3 C341.3,73.9 342.7,78.3 345.5,82.1 C348.3,85.9 352.2,87.8 357.1,87.8 C362,87.8 365.9,85.9 368.7,82.1 C371.5,78.3 372.8,73.9 372.8,67.3 Z M421.7,100.5 C397.1,100.6 397.1,80.6 397.1,77.4 L397.1,6.3 L412.1,3.9 L412.1,74.5 C412.1,76.3 412.1,87.8 421.8,87.8 L421.7,100.5 L421.7,100.5 Z M448.2,100.5 L433.1,100.5 L433.1,35.6 L448.2,33.2 L448.2,100.5 Z M440.6,26.1 C445.6,26.1 449.8,22 449.8,17 C449.8,12 445.7,7.9 440.6,7.9 C435.5,7.9 431.4,12 431.4,17 C431.4,22 435.6,26.1 440.6,26.1 Z M485.8,33.3 C490.8,33.3 495,33.9 498.3,35.1 C501.7,36.3 504.4,38.1 506.4,40.3 C508.4,42.5 509.8,45.5 510.7,48.6 C511.6,51.8 512,55.2 512,59 L512,97.7 C509.7,98.2 506.2,98.8 501.5,99.5 C496.8,100.2 491.5,100.5 485.7,100.5 C481.8,100.5 478.2,100.1 475,99.4 C471.8,98.7 469,97.5 466.7,95.8 C464.4,94.1 462.7,92 461.4,89.4 C460.1,86.8 459.5,83.1 459.5,79.2 C459.5,75.5 460.2,73.2 461.7,70.6 C463.2,68.1 465.1,66 467.6,64.4 C470.1,62.8 472.9,61.6 476.2,60.9 C479.5,60.2 482.9,59.9 486.4,59.9 C488.1,59.9 489.8,60 491.6,60.2 C493.4,60.4 495.4,60.7 497.4,61.2 L497.4,58.7 C497.4,57 497.2,55.3 496.8,53.8 C496.4,52.2 495.6,50.9 494.6,49.7 C493.6,48.5 492.2,47.6 490.5,46.9 C488.8,46.2 486.7,45.7 484.1,45.7 C480.6,45.7 477.5,46.1 474.6,46.6 C471.7,47.1 469.3,47.7 467.5,48.3 L465.7,36 C467.6,35.3 470.4,34.7 474,34 C477.7,33.6 481.6,33.3 485.8,33.3 Z M487,87.9 C491.6,87.9 495,87.6 497.4,87.2 L497.4,71.8 C496.6,71.6 495.4,71.3 493.8,71.1 C492.2,70.9 490.5,70.7 488.6,70.7 C486.9,70.7 485.3,70.8 483.6,71.1 C481.9,71.3 480.4,71.8 479,72.4 C477.7,73.1 476.5,74 475.7,75.2 C474.9,76.4 474.5,77.1 474.5,78.9 C474.5,82.4 475.7,84.5 478,85.8 C480.2,87.2 483.2,87.9 487,87.9 Z M190.1,33.7 C195.1,33.7 199.3,34.3 202.6,35.5 C206,36.7 208.7,38.5 210.7,40.7 C212.7,42.9 214.1,45.9 215,49 C215.9,52.2 216.3,55.6 216.3,59.4 L216.3,98.1 C214,98.6 210.5,99.2 205.8,99.9 C201.1,100.6 195.8,100.9 190,100.9 C186.1,100.9 182.5,100.5 179.3,99.8 C176.1,99.1 173.3,97.9 171,96.2 C168.7,94.5 167,92.4 165.7,89.8 C164.4,87.2 163.8,83.5 163.8,79.6 C163.8,75.9 164.5,73.6 166,71 C167.5,68.5 169.4,66.4 171.9,64.8 C174.4,63.2 177.2,62 180.5,61.3 C183.8,60.6 187.2,60.3 190.7,60.3 C192.4,60.3 194.1,60.4 195.9,60.6 C197.7,60.8 199.7,61.1 201.7,61.6 L201.7,59.1 C201.7,57.4 201.5,55.7 201.1,54.2 C200.7,52.6 199.9,51.3 198.9,50.1 C197.9,48.9 196.5,48 194.8,47.3 C193.1,46.6 191,46.1 188.4,46.1 C184.9,46.1 181.8,46.5 178.9,47 C176,47.5 173.6,48.1 171.8,48.7 L170,36.4 C171.9,35.7 174.7,35.1 178.3,34.4 C182.1,34 186,33.7 190.1,33.7 Z M191.4,88.3 C196,88.3 199.4,88 201.8,87.6 L201.8,72.2 C201,72 199.8,71.7 198.2,71.5 C196.6,71.3 194.9,71.1 193,71.1 C191.3,71.1 189.7,71.2 188,71.5 C186.3,71.7 184.8,72.2 183.4,72.8 C182,73.4 180.9,74.4 180.1,75.6 C179.3,76.8 178.9,77.5 178.9,79.3 C178.9,82.8 180.1,84.9 182.4,86.2 C184.6,87.6 187.6,88.3 191.4,88.3 Z M252.4,100.5 C227.8,100.6 227.8,80.6 227.8,77.4 L227.8,6.3 L242.8,3.9 L242.8,74.5 C242.8,76.3 242.8,87.8 252.5,87.8 L252.5,100.5 L252.4,100.5 Z" fill="#182359"></path>
</g>
</svg>
src/components/AvatarCard/AvatarCard.js deleted 100644 → 0
+ 0
− 24
View file @ 811d37e1
import React from 'react';
import CardWrapper, { Avatar, Info } from './AvatarCard.style';
const AvatarCard = ({ className, avatar, name, username }) => {
return (
<CardWrapper className={`avatar-card ${className ? className : ''}`}>
{avatar && (
<Avatar className="avatar">
<img src={avatar} alt={name} />
</Avatar>
)}
{name || username ? (
<Info className="info">
{name && <h3 className="name">{name}</h3>}
{username && <p className="username">{username}</p>}
</Info>
) : (
''
)}
</CardWrapper>
);
};
export default AvatarCard;
src/components/AvatarCard/AvatarCard.style.js deleted 100644 → 0
+ 0
− 27
View file @ 811d37e1
import styled from 'styled-components';
const CardWrapper = styled.div`
display: flex;
align-items: center;
`;
export const Avatar = styled.div`
width: 170px;
height: 170px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 4px solid #ffffff;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
`;
export const Info = styled.div`
width: calc(100% - 170px);
padding-left: 10px;
`;
export default CardWrapper;
src/components/Cart/SingleCart.js deleted 100644 → 0
+ 0
− 60
View file @ 811d37e1
import React from 'react';
import InputNumber from '../uielements/InputNumber';
import { notification } from '../index';
export default function({
price,
quantity,
image,
objectID,
cancelQuantity,
changeQuantity,
_highlightResult,
}) {
const onChange = value => {
if (!isNaN(value)) {
if (value !== quantity) {
changeQuantity(objectID, value);
}
} else {
notification('error', 'Please give valid number');
}
};
const totalPrice = (price * quantity).toFixed(2);
return (
<tr>
<td
className="isoItemRemove"
onClick={() => {
cancelQuantity(objectID);
}}
>
<a href="# ">
<i className="ion-android-close" />
</a>
</td>
<td className="isoItemImage">
<img alt="#" src={image} />
</td>
<td className="isoItemName">
<h3>{_highlightResult.name.value}</h3>
<p>{_highlightResult.description.value}</p>
</td>
<td className="isoItemPrice">
<span className="itemPricePrefix">$</span>
{price.toFixed(2)}
</td>
<td className="isoItemQuantity">
<InputNumber
min={1}
max={1000}
value={quantity}
step={1}
onChange={onChange}
/>
</td>
<td className="isoItemPriceTotal">${totalPrice}</td>
</tr>
);
}
src/components/Cart/SingleCartModal.js deleted 100644 → 0
+ 0
− 37
View file @ 811d37e1
import React from 'react';
import TopbarCartWrapper from './SingleCartModal.style';
export default function({
price,
quantity,
image,
objectID,
cancelQuantity,
_highlightResult,
}) {
return (
<TopbarCartWrapper className="isoCartItems">
<div className="isoItemImage">
<img alt="#" src={image} />
</div>
<div className="isoCartDetails">
<h3>
<a href="#!">{_highlightResult.name.value}</a>
</h3>
<p className="isoItemPriceQuantity">
<span>$</span>
<span>{price.toFixed(2)}</span>
<span className="itemMultiplier">X</span>
<span className="isoItemQuantity">{quantity}</span>
</p>
</div>
<a
className="isoItemRemove"
onClick={() => cancelQuantity(objectID)}
href="#!"
>
<i className="ion-android-close" />
</a>
</TopbarCartWrapper>
);
}
src/components/Cart/SingleCartModal.style.js deleted 100644 → 0
+ 0
− 88
View file @ 811d37e1
import styled from 'styled-components';
import { palette } from 'styled-theme';
import { transition } from '@imd/lib/helpers/style_utils';
import WithDirection from '@imd/lib/helpers/rtl';
const TopbarCartWrapper = styled.div`
width: 100%;
display: flex;
align-items: center;
padding: 15px 30px;
flex-shrink: 0;
position: relative;
border-bottom: 1px solid ${palette('border', 2)};
${transition()};
.isoItemImage {
width: 50px;
height: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.isoCartDetails {
width: 100%;
display: flex;
padding: ${props =>
props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
flex-direction: column;
text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
h3 {
margin: 0 0 5px;
line-height: 1;
a {
font-size: 13px;
font-weight: 500;
color: ${palette('text', 0)};
line-height: 1.3;
text-decoration: none;
}
}
p {
display: flex;
margin: 0;
span {
font-size: 12px;
font-weight: 400;
color: ${palette('text', 2)};
line-height: 1.2;
&.itemMultiplier {
padding: 0 3px;
}
}
}
}
.isoItemRemove {
position: absolute;
right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '15px')};
left: ${props => (props['data-rtl'] === 'rtl' ? '15px' : 'inherit')};
font-size: 13px;
font-weight: 500;
color: ${palette('text', 0)} !important;
opacity: 0;
${transition()};
}
&:hover {
background-color: ${palette('grayscale', 3)};
.isoItemRemove {
opacity: 1;
}
}
`;
export default WithDirection(TopbarCartWrapper);
src/components/Chat/InputName.js deleted 100644 → 0
+ 0
− 58
View file @ 811d37e1
import React from 'react';
import AutoComplete, { AutoCompleteOption } from '../uielements/autocomplete';
import UserItem from './InputName.style';
export default function(props) {
const [state, setState] = React.useState({
value: '',
result: [],
});
const handleSearch = value => {
const result = [];
if (value) {
props.users.forEach(user => {
if (user.name.toLowerCase().indexOf(value.toLowerCase()) > -1) {
result.push(user);
}
});
}
setState({ ...state, result, value });
};
const onSelect = id => {
if (id) {
state.result.forEach(user => {
if (user.id === id) {
setState({ ...state, value: user.name });
}
});
}
};
const { result, value } = state;
return (
<AutoComplete
value={value}
onSelect={onSelect}
onSearch={handleSearch}
placeholder="find your buddy"
style={{ marginBottom: 10 }}
>
{result.map(user => (
<AutoCompleteOption key={user.id} style={{ display: 'flex' }}>
<UserItem
onClick={() => {
setState({ ...state, value: user.name, result: [] });
props.setComposedId(user.id);
}}
>
<div className="userImg">
<img alt="#" src={user.profileImageUrl} />
</div>
<span className="suggetionText">{user.name}</span>
</UserItem>
</AutoCompleteOption>
))}
</AutoComplete>
);
}
src/components/Chat/InputName.style.js deleted 100644 → 0
+ 0
− 33
View file @ 811d37e1
import styled from 'styled-components';
import { palette } from 'styled-theme';
const UserItem = styled.div`
display: flex;
align-items: center;
.userImg {
width: 35px;
height: 35px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
margin-right: 15px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.suggetionText {
font-size: 13px;
color: ${palette('text', 0)};
font-weight: 500;
margin: 0;
}
`;
export default UserItem;
src/components/Chat/ViewProfile.js deleted 100644 → 0
+ 0
− 56
View file @ 811d37e1
import React from 'react';
import { ViewProfileWrapper, SingleInfoWrapper } from './ViewProfile.style';
const SingleInfo = ({ title, value }) => (
<SingleInfoWrapper>
<span className="viewProfileTitle">{title}</span>
<span className="viewProfileValue">{value}</span>
</SingleInfoWrapper>
);
export default function({
viewProfile,
toggleViewProfile,
toggleMobileProfile,
}) {
if (!viewProfile) {
return null;
}
const {
name,
dob,
mobileNo,
gender,
language,
profileImageUrl,
} = viewProfile;
return (
<ViewProfileWrapper>
<div className="viewProfileTopBar">
Contact Info
<span
onClick={() => {
if (toggleMobileProfile) {
toggleMobileProfile(false);
}
toggleViewProfile(false);
}}
>
<i className="ion-android-close" />
</span>
</div>
<div className="viewProfileContent">
<div className="viewProfileImage">
<img alt="#" src={profileImageUrl} />
<h1>{name}</h1>
</div>
<div className="viewProfileQuickInfo">
<SingleInfo title="Name" value={name} />
<SingleInfo title="Date of Birth" value={dob} />
<SingleInfo title="Mobile No" value={mobileNo} />
<SingleInfo title="Gender" value={gender} />
<SingleInfo title="Language" value={language} />
</div>
</div>
</ViewProfileWrapper>
);
}
src/components/Chat/ViewProfile.style.js deleted 100644 → 0
+ 0
− 80
View file @ 811d37e1
import styled from 'styled-components';
import { palette } from 'styled-theme';
const ViewProfileWrapper = styled.div`
background: #ffffff;
border: 1px solid ${palette('border', 0)};
overflow: auto;
position: absolute;
right: 0;
width: 95%;
height: 100%;
.viewProfileTopBar {
background: ${palette('grayscale', 4)};
border-bottom: 1px solid ${palette('border', 0)};
padding: 25px 20px 25px 30px;
display: flex;
justify-content: space-between;
line-height: 1;
span {
margin: 0;
margin-left: 15px;
cursor: pointer;
i {
font-size: 14px;
font-weight: normal;
}
}
}
.viewProfileContent {
padding: 30px 30px 0;
}
.viewProfileImage {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 21px;
text-align: center;
font-weight: 300;
margin-bottom: 30px;
margin-top: 10px;
color: #212121;
}
img {
height: 120px;
border-radius: 6px;
}
.viewProfileQuickInfo {
border-top: 1px solid ${palette('border', 2)};
padding-top: 40px;
}
@media only screen and (min-width: 768px) {
width: 350px;
}
`;
const SingleInfoWrapper = styled.div`
display: flex;
.viewProfileTitle {
width: 35%;
font-size: 13px;
font-weight: 500;
font-weight: light;
color: ${palette('text', 0)};
margin-bottom: 30px;
}
.viewProfileValue {
width: 65%;
text-align: right;
font-size: 13px;
color: ${palette('text', 1)};
margin-bottom: 30px;
}
`;
export { ViewProfileWrapper, SingleInfoWrapper };
src/components/Contacts/ContactCard.style.js deleted 100644 → 0
+ 0
− 236
View file @ 811d37e1
import styled from 'styled-components';
import { palette } from 'styled-theme';
import {
transition,
borderRadius,
boxShadow,
} from '@imd/lib/helpers/style_utils';
import WithDirection from '@imd/lib/helpers/rtl';
const WDContactCardWrapper = styled.div`
width: 100%;
height: calc(100% - 145px);
padding: 0 35px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
@media only screen and (max-width: 600px) {
flex-direction: column;
}
@media only screen and (max-width: 767px) {
padding: 0 20px;
}
@media only screen and (min-width: 767px) and (max-width: 990px) {
flex-direction: column;
}
.isoContactCardHead {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
flex-shrink: 0;
margin-right: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '50px'};
margin-left: ${props => (props['data-rtl'] === 'rtl' ? '50px' : 'inherit')};
flex-shrink: 0;
@media only screen and (max-width: 600px) {
margin-bottom: 20px;
}
@media only screen and (min-width: 767px) and (max-width: 990px) {
margin-bottom: 20px;
}
.isoPersonImage {
width: 120px;
height: 120px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin-bottom: 10px;
overflow: hidden;
${borderRadius('5px')};
.avatar-uploader {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.isoPersonName {
font-size: 15px;
font-weight: 500;
color: ${palette('text', 0)};
line-height: 1.5;
margin: 0;
}
}
.isoContactInfoWrapper {
width: 100%;
display: flex;
flex-direction: column;
@media only screen and (max-width: 767px) {
padding: 20px 0;
}
.isoContactCardInfos {
width: 100%;
display: flex;
flex-shrink: 0;
align-items: baseline;
flex-direction: row;
margin-bottom: 15px;
@media only screen and (max-width: 430px) {
flex-direction: column;
margin-bottom: 20px;
}
.isoInfoLabel {
font-size: 14px;
font-weight: 500;
color: ${palette('text', 0)};
line-height: 1.5;
margin: 0;
margin-right: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '15px'};
margin-left: ${props =>
props['data-rtl'] === 'rtl' ? '15px' : 'inherit'};
text-align: ${props =>
props['data-rtl'] === 'rtl' ? 'right' : 'left'};
min-width: 80px;
position: relative;
@media only screen and (max-width: 430px) {
margin-bottom: 5px;
margin-right: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '0'};
margin-left: ${props =>
props['data-rtl'] === 'rtl' ? '0' : 'inherit'};
padding-right: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '10px'};
padding-left: ${props =>
props['data-rtl'] === 'rtl' ? '10px' : 'inherit'};
min-width: 0;
}
&::after {
content: ':';
position: absolute;
right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
}
}
.isoInfoDetails {
font-size: 14px;
font-weight: 400;
color: ${palette('text', 2)};
line-height: 1.5;
margin: 0;
text-align: ${props =>
props['data-rtl'] === 'rtl' ? 'right' : 'left'};
}
input {
font-size: 14px;
font-weight: 400;
color: ${palette('text', 2)};
line-height: inherit;
height: 36px;
padding: 0 15px;
margin: 0;
border: 1px solid ${palette('border', 0)};
outline: 0 !important;
overflow: hidden;
background-color: #ffffff;
${boxShadow('none')};
${borderRadius('3px')};
${transition()};
&:focus {
border-color: ${palette('primary', 0)};
${boxShadow('0 0 0 2px rgba(68, 130, 255, 0.2)')};
outline: 0;
}
&:hover {
border-color: ${palette('primary', 0)};
}
&::-webkit-input-placeholder {
color: ${palette('grayscale', 0)};
}
&:-moz-placeholder {
color: ${palette('grayscale', 0)};
}
&::-moz-placeholder {
color: ${palette('grayscale', 0)};
}
&:-ms-input-placeholder {
color: ${palette('grayscale', 0)};
}
}
textarea {
font-size: 14px;
font-weight: 400;
color: ${palette('text', 2)};
line-height: 24px;
height: 210px;
padding: 10px 15px;
margin: 0;
border: 1px solid ${palette('border', 0)};
outline: 0 !important;
background-color: #ffffff;
${boxShadow('none')};
${borderRadius('3px')};
${transition()};
&:focus {
border-color: ${palette('primary', 0)};
${boxShadow('0 0 0 2px rgba(68, 130, 255, 0.2)')};
outline: 0;
}
&:hover {
border-color: ${palette('primary', 0)};
}
&::-webkit-input-placeholder {
color: ${palette('grayscale', 0)};
}
&:-moz-placeholder {
color: ${palette('grayscale', 0)};
}
&::-moz-placeholder {
color: ${palette('grayscale', 0)};
}
&:-ms-input-placeholder {
color: ${palette('grayscale', 0)};
}
}
}
}
`;
const ContactCardWrapper = WithDirection(WDContactCardWrapper);
export { ContactCardWrapper };
src/components/Contacts/ContactList.js deleted 100644 → 0
+ 0
− 82
View file @ 811d37e1
import React, { Component } from 'react';
import IntlMessages from '../utility/intlMessages';
import { InputSearch } from '../uielements/input';
import DeleteButton from './DeleteButton';
import { PropTypes } from 'prop-types';
import { ContactListWrapper } from './ContactList.style';
import Scrollbar from '../utility/customScrollBar';
function filterContacts(contacts, search) {
search = search.toUpperCase();
return search
? contacts.filter(contact => contact.name.toUpperCase().includes(search))
: contacts;
}
export default class ContactList extends Component {
constructor(props) {
super(props);
this.singleContact = this.singleContact.bind(this);
this.onChange = this.onChange.bind(this);
this.state = {
search: '',
};
}
singleContact(contact) {
const { seectedId, deleteContact, changeContact } = this.props;
const activeClass = seectedId === contact.id ? 'active' : '';
const onChange = () => changeContact(contact.id);
return (
<div
key={contact.id}
className={`${activeClass} isoSingleContact`}
onClick={onChange}
>
<div className="isoAvatar">
{contact.avatar ? <img alt="#" src={contact.avatar} /> : ''}
</div>
<div className="isoContactName">
<h3>{contact.name ? contact.name : 'No Name'}</h3>
</div>
<DeleteButton deleteContact={deleteContact} contact={contact} />
</div>
);
}
onChange(event) {
this.setState({ search: event.target.value });
}
render() {
const { search } = this.state;
const contacts = filterContacts(this.props.contacts, search);
return (
<ContactListWrapper className="isoContactListWrapper">
<InputSearch
placeholder={this.context.intl.formatMessage({
id: 'contactlist.searchContacts',
})}
value={search}
onChange={this.onChange}
className="isoSearchBar"
/>
{contacts && contacts.length > 0 ? (
<div className="isoContactList">
<Scrollbar
className="contactListScrollbar"
style={{ height: 'calc(100vh - 200px)' }}
>
{contacts.map(contact => this.singleContact(contact))}
</Scrollbar>
</div>
) : (
<span className="isoNoResultMsg">
{<IntlMessages id="Component.contacts.noOption" />}
</span>
)}
</ContactListWrapper>
);
}
}
ContactList.contextTypes = {
intl: PropTypes.object.isRequired,
};
src/components/Contacts/ContactList.style.js deleted 100644 → 0
+ 0
− 201
View file @ 811d37e1
import styled from 'styled-components';
import { palette } from 'styled-theme';
import {
transition,
borderRadius,
boxShadow,
} from '@imd/lib/helpers/style_utils';
import WithDirection from '@imd/lib/helpers/rtl';
const WDContactListWrapper = styled.div`
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
.isoNoResultMsg {
padding: 15px 20px;
text-align: center;
color: ${palette('secondary', 2)};
font-weight: 500;
font-size: 14px;
}
.isoSearchBar {
.ant-input {
width: 100%;
font-size: 14px;
font-weight: 400;
color: ${palette('text', 0)};
line-height: inherit;
height: 69px;
padding: 0 20px;
padding-left: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '35px'};
padding-right: ${props =>
props['data-rtl'] === 'rtl' ? '35px' : 'inherit'};
border: 0;
border-bottom: 1px solid ${palette('border', 0)};
outline: 0 !important;
overflow: hidden;
background-color: #ffffff;
${boxShadow('none')};
${borderRadius()};
${transition()};
@media only screen and (max-width: 767px) {
height: 50px;
}
&:hover,
&:focus {
border-color: ${palette('border', 0)} !important;
}
&::-webkit-input-placeholder {
color: ${palette('grayscale', 0)};
}
&:-moz-placeholder {
color: ${palette('grayscale', 0)};
}
&::-moz-placeholder {
color: ${palette('grayscale', 0)};
}
&:-ms-input-placeholder {
color: ${palette('grayscale', 0)};
}
}
}
.ant-input-suffix {
left: 10px;
right: auto;
color: ${palette('grayscale', 0)};
}
.isoContactList {
width: 100%;
display: flex;
flex-direction: column;
max-height: 100%;
overflow: hidden;
overflow-y: auto;
.contactListScrollbar {
height: calc(100vh - 200px);
@media only screen and (max-width: 767px) {
max-height: 60vh;
}
}
.isoSingleContact {
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
padding: 15px 20px;
padding-right: ${props =>
props['data-rtl'] === 'rtl' ? '20px' : '35px'};
padding-left: ${props => (props['data-rtl'] === 'rtl' ? '35px' : '20px')};
border-bottom: 1px solid ${palette('border', 0)};
text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
position: relative;
cursor: pointer;
&.active {
background-color: ${palette('secondary', 1)};
}
&:last-child {
border-bottom: 0;
}
.isoAvatar {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
margin-right: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '15px'};
margin-left: ${props =>
props['data-rtl'] === 'rtl' ? '15px' : 'inherit'};
flex-shrink: 0;
overflow: hidden;
${borderRadius('50%')};
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.isoContactName {
h3 {
font-size: 15px;
}
}
.isoNoteText {
width: calc(100% - 60px);
margin-right: ${props =>
props['data-rtl'] === 'rtl' ? 'inherit' : '20px'};
margin-left: ${props =>
props['data-rtl'] === 'rtl' ? '20px' : 'inherit'};
padding: 20px 0;
cursor: pointer;
h3 {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: ${palette('secondary', 2)};
font-weight: 500;
}
.isoNoteCreatedDate {
font-size: 13px;
color: ${palette('grayscale', 0)};
}
}
.isoDeleteBtn {
width: 24px;
height: 24px;
background-color: transparent;
flex-shrink: 0;
position: absolute;
top: 20px;
right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '5px')};
left: ${props => (props['data-rtl'] === 'rtl' ? '5px' : 'inherit')};
padding: 0;
border: 0;
font-size: 14px;
color: ${palette('grayscale', 0)};
${transition()};
&:hover {
color: ${palette('primary', 0)};
}
}
}
.isoNotlistNotice {
font-size: 14px;
font-weight: 400;
color: ${palette('grayscale', 0)};
line-height: inherit;
padding: 30px 0;
}
}
`;
const ContactListWrapper = WithDirection(WDContactListWrapper);
export { ContactListWrapper };
src/components/Contacts/DeleteButton.js deleted 100644 → 0
+ 0
− 30
View file @ 811d37e1
import React from 'react';
import Popconfirm from '../Feedback/Popconfirm';
import Button from '../uielements/button';
import notification from '../Notification';
export default function({ contact, deleteContact }) {
let name = '';
if (contact.firstName) {
name = `${contact.firstName} `;
}
if (contact.lastName) {
name = `${name}${contact.lastName}`;
}
if (!name) {
name = 'No Name';
}
return (
<Popconfirm
title={`Sure to delete ${name}?`}
okText="DELETE"
cancelText="No"
onConfirm={() => {
notification('error', `${name} Deleted`, '');
deleteContact(contact.id);
}}
>
<Button icon="close" type="default" className="isoDeleteBtn" />
</Popconfirm>
);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment