react-icons/ai#AiOutlineLeft JavaScript Examples
The following examples show how to use
react-icons/ai#AiOutlineLeft.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: styles.js From plataforma-sabia with MIT License | 5 votes |
|
ArrowLeftIcon = styled(AiOutlineLeft)`
margin-right: 0.5rem;
${arrowIconSize}
`
Example #2
| Source File: Calendar.js From airdnd-frontend with MIT License | 4 votes |
|
Calendar = ({
responsiveScreen,
thisMonth,
nextMonth,
thisMonthDates,
nextMonthDates,
onClickBeforeMonth,
onClickNextMonth,
checkin,
checkout,
onClickCheckDate,
onMouseenter,
onMouseLeave,
getDiff,
hoverDate,
reservedDates,
isDetailPage,
onClickWrapper,
checkAfterReserved,
checkBeforeCheckin,
beforeToday,
stayDates,
minimumStay,
isReservationBox,
...rest
}) => {
const addZero = num => ((num + '').length === 1 ? '0' + num : num);
const renderCalendar = (nowMonthDates, nowMonth) => {
const _nowMonth = addZero(nowMonth.month);
return (
<StCalendarWrapper>
<StMonth>
{nowMonth.month}월 {nowMonth.year}
</StMonth>
<StDays>
<li>일</li>
<li>월</li>
<li>화</li>
<li>수</li>
<li>목</li>
<li>금</li>
<li>토</li>
</StDays>
<StDates onMouseLeave={onMouseLeave}>
{nowMonthDates.map((date, i) => {
const _date = addZero(date);
const nowDate = `${nowMonth.year}.${_nowMonth}.${_date}`;
const dateTime = new Date(nowDate).getTime();
const reserved = reservedDates.find(v => v === nowDate);
const isAfterReserved = reserved || checkAfterReserved(dateTime);
const isCheckin = checkin === nowDate;
const isCheckout = checkout === nowDate;
const stayDate = stayDates.find(v => v === nowDate);
return (
<StDateWrapper
key={i}
onClick={onClickWrapper}
margin={nowMonth.firstDay}
darken={checkin && !isAfterReserved && getDiff(dateTime)}
checkin={isCheckin}
checkout={isCheckout}
hoverDate={hoverDate === nowDate}
stayDate={stayDate}
reserved={reserved}
beforeToday={beforeToday(dateTime)}
afterReserved={isAfterReserved && !checkout}
beforeCheckin={
isDetailPage && !checkout && checkBeforeCheckin(dateTime)
}
>
<StDateBtn
id={`dateId-${nowMonth.year}.${_nowMonth}.${_date}`}
onClick={e => onClickCheckDate(e, dateTime, reserved)}
onMouseEnter={onMouseenter}
checkin={isCheckin}
checkout={isCheckout}
hoverDate={hoverDate === nowDate && !isAfterReserved}
stayDate={stayDate}
btnType="circle"
>
{date}
</StDateBtn>
{isDetailPage && (isCheckin || isCheckout || stayDate) && (
<StTooltipWrapper>
<div className="tooltip">
<div>
{stayDates.length
? `최소 ${minimumStay}박`
: isCheckin
? '체크인 요일'
: '체크아웃 요일'}
</div>
<svg role="presentation" focusable="false">
<path className="arrow1" d="M0,0 20,0 10,10z"></path>
<path className="arrow2" d="M0,0 10,10 20,0"></path>
</svg>
</div>
</StTooltipWrapper>
)}
</StDateWrapper>
);
})}
</StDates>
</StCalendarWrapper>
);
};
return (
<>
<StWrapper isDetailPage={isDetailPage} {...rest}>
<StNextMonthBtn btnType="circle" onClick={onClickBeforeMonth}>
<AiOutlineLeft />
</StNextMonthBtn>
<StNextMonthBtn btnType="circle" onClick={onClickNextMonth}>
<AiOutlineRight />
</StNextMonthBtn>
{renderCalendar(thisMonthDates, thisMonth)}
{(!responsiveScreen || isReservationBox) &&
renderCalendar(nextMonthDates, nextMonth)}
</StWrapper>
</>
);
}
Example #3
| Source File: Navigator.js From react-portal with MIT License | 4 votes |
|
Navigator = props => {
const [isCollapsed, setIsCollapsed] = useState(false);
const [visible, setVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const Creds = getRole();
const handleSignOut = state => {
if (state) {
setIsLoading(true);
setTimeout(() => {
localStorage.clear();
props.history.push("/login");
}, 1000);
} else {
setVisible(state);
}
};
const Wrapper = styled.div`
padding: 10px 20px;
`;
const Head = styled.div`
padding-bottom: 20px;
font-size: 16px;
`;
const NoButton = styled(Button)`
background-color: #ffffff !important;
color: #1890ff !important;
border: 2px solid #1890ff !important;
`;
useEffect(() => {
if (window.innerWidth <= 568) {
setIsCollapsed(true);
}
}, []);
return (
<>
<Layout>
<Sider
width={200}
className="side-nav"
theme="dark"
trigger={null}
collapsible
collapsed={isCollapsed}
>
<div className="logo">
<img
onClick={() => setIsCollapsed(!isCollapsed)}
src={isCollapsed ? logoCollapse : logo}
width={`${isCollapsed ? "80" : "160"}`}
style={{ padding: "12px 24px", cursor: "pointer" }}
alt=""
/>
</div>
<hr style={{ margin: 0, padding: 0 }} />
<Menu
theme="dark"
height="100%"
mode="inline"
defaultSelectedKeys={"dashboard"}
>
{routes.map(route => {
if (
Creds.role === "member" &&
route.key === "participants"
) {
return null;
} else {
return (
<Menu.Item
title={route.name}
style={{
alignItems: "center"
}}
key={route.key}
onClick={() => {
localStorage.setItem(
"routeKey",
route.key
);
}}
>
<route.icon
style={{ fontSize: "18px" }}
/>
{isCollapsed ? null : (
<span
style={{
paddingLeft: "10px"
}}
>
{route.name}
</span>
)}
<Link to={route.path} />
</Menu.Item>
);
}
})}
<Menu.Item
key={"signout"}
title={"Sign-out"}
onClick={() => setVisible(true)}
>
<AiOutlineLock />
{isCollapsed ? null : (
<span style={{ paddingLeft: "10px" }}>
Sign Out
</span>
)}
</Menu.Item>
<Menu.Item
title={isCollapsed ? "Show" : "Hide"}
key={"collapse"}
onClick={() => setIsCollapsed(!isCollapsed)}
>
{isCollapsed ? (
<AiOutlineRight />
) : (
<AiOutlineLeft />
)}
{isCollapsed ? null : (
<span style={{ paddingLeft: "10px" }}>
Hide
</span>
)}
</Menu.Item>
</Menu>
</Sider>
<Layout
style={{
minHeight: "100vh",
marginLeft: `${isCollapsed ? "80px" : "200px"}`
}}
className="side-nav-layout"
>
<Content
style={{
margin: 12,
padding: 20,
background: "#f9f9f9",
minHeight: "280"
}}
>
<Switch>
<PrivateRoute
exact
path="/"
component={Dashboard}
data={Creds}
/>
<PrivateRoute
exact
path="/events"
component={EventList}
data={Creds}
/>
<PrivateRoute
exact
path="/participants"
component={ParticipantsList}
data={Creds}
/>
<PrivateRoute
exact
path="/team"
component={TeamList}
data={Creds}
/>
<PrivateRoute
exact
path="/profile"
component={Profile}
data={Creds}
/>
<PrivateRoute
exact
path="/groups"
component={ManageGroups}
data={Creds}
/>
<PrivateRoute
exact
path="/certificate"
component={AddCertificate}
data={Creds}
/>
<PrivateRoute
exact
path="/tasks/:id"
component={ManageTasks}
data={Creds}
/>
<PrivateRoute
exact
path="/task/:id"
component={Task}
data={Creds}
/>
<Redirect from="/dashboard" to="/" />
<Redirect to="/" />
</Switch>
</Content>
</Layout>
</Layout>
<Modal
visible={visible}
footer={null}
closable={false}
onCancel={() => handleSignOut(false)}
>
<IoIosArrowRoundBack
onClick={() => handleSignOut(false)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Wrapper>
<Head>
<Row>
<Col xs={5}></Col>
<Col>Do you really want to sign out ?</Col>
<Col xs={5}></Col>
</Row>
</Head>
<Row>
<Col xs={5}></Col>
<Col xs={6} style={{ paddingLeft: "8px" }}>
<NoButton
type="primary"
onClick={() => handleSignOut(false)}
>
No
</NoButton>
</Col>
<Col
xs={7}
style={{
display: "flex",
justifyContent: "flex-end"
}}
>
<Button
type="primary"
loading={isLoading}
onClick={() => handleSignOut(true)}
>
Yes
</Button>
</Col>
<Col xs={5}></Col>
</Row>
</Wrapper>
</Modal>
</>
);
}
