reza created comments comp

master
Reza_ashrafi 3 years ago
commit 37b6c90dca
  1. 17317
      package-lock.json
  2. 78
      src/components/Calendar/index.css
  3. 4
      src/components/Calendar/index.js
  4. 21
      src/components/RangeDatePicker/index.js
  5. 2
      src/components/SidebarCategoryHover/list.js
  6. 19
      src/components/SimpleDatePicker/index.js
  7. 49
      src/redux/data.js

17317
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -6,11 +6,17 @@
.DatePicker__input {
background: #fff;
border: 1px solid #ddd;
padding: 0.4em 0.8em;
font-family: inherit;
border: 1px solid rgba(0, 0, 0, 0.4);
padding: 0.6em 1.2em;
font-family:'iranSans';
text-align: center;
font-size: 12px;
border-radius: 7px;
}
.DatePicker__input:focus{
outline:1px solid #06BACE;
color: #06BACE;
}
.DatePicker__input.-rtl {
@ -20,6 +26,9 @@
.DatePicker__input::placeholder {
color: #979797;
}
.DatePicker__input:focus::placeholder{
color: #06BACE;
}
.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow {
top: auto;
@ -72,6 +81,7 @@
--cl-color-black: #444444;
--cl-color-disabled: #d4d4d4;
--cl-color-error: #ff2929;
font-family:'iranSans';
font-size: 10px;
background: rgba(245, 245, 245, 0.53);
border:1px solid #DBDBDB;
@ -85,7 +95,7 @@
width: 40em;
z-index: 10;
max-width: 90vw;
min-height: 36.7em;
min-height: 38.7em;
}
.DatePicker .Calendar,
@ -129,7 +139,7 @@
z-index: 1;
opacity: 1;
transition: 0.2s;
background-color: royalblue;
background-color: #06BACE;
}
.Calendar__monthArrowWrapper:focus {
@ -144,18 +154,18 @@
}
.Calendar__monthArrowWrapper.-left {
transform: rotate(90deg);
transform: rotate(180deg);
}
.Calendar.-rtl .Calendar__monthArrowWrapper.-left {
transform: rotate(-90deg);
transform: rotate(-180deg);
}
.Calendar__monthArrowWrapper.-right {
transform: rotate(-90deg);
transform: rotate(-0deg);
}
.Calendar.-rtl .Calendar__monthArrowWrapper.-right {
transform: rotate(90deg);
transform: rotate(0deg);
}
.Calendar__monthArrowWrapper:active .Calendar__monthArrow {
@ -163,15 +173,18 @@
}
.Calendar__monthArrow {
border-radius: 50%;
border-radius: 7px;
padding: 12px;
transition: var(--animation-duration) transform;
pointer-events: none;
background-repeat: no-repeat;
display: block;
width: 1.7em;
height: 1.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-size: 100% 100%;
width: 0.7em;
height: 0.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E"); background-size: 100% 100%;
background-color: #06BACE;
background-size: 10px;
background-position: center;
}
.Calendar__monthYearContainer {
@ -180,7 +193,7 @@
}
.Calendar__monthYear {
font-size: 1.6em;
font-size: 2em;
font-weight: 500;
display: flex;
align-items: center;
@ -457,8 +470,16 @@
.Calendar__weekDay {
display: block;
width: calc(100% / 7);
text-align: center;
text-decoration: none;
border: 0px;
color: #06BACE;
margin:0.2em;
white-space: nowrap;
}
.Calendar__weekDay[title]{
text-decoration: none;
}
.Calendar__sectionWrapper {
@ -521,7 +542,7 @@
text-align: center;
padding: calc(0.25em - 1px);
font-size: 1.6em;
border-radius: 11px;
border-radius: 7px;
transition: 0.2s;
border: 1px solid transparent;
margin:0.2em;
@ -532,6 +553,7 @@
cursor: pointer;
background-color: #F3F3F3;
color:#06BACE;
}
.Calendar__day:focus {
@ -559,36 +581,38 @@
.Calendar__day.-selected,
.Calendar__day.-selectedStart,
.Calendar__day.-selectedEnd {
background: #06BACE;
background: #006C94;
color: #fff;
}
.Calendar__day.-ltr.-selectedStart {
border-radius: 0;
border-top-left-radius: 100em;
border-bottom-left-radius: 100em;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.Calendar__day.-rtl.-selectedStart {
border-radius: 0;
border-top-right-radius: 100em;
border-bottom-right-radius: 100em;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.Calendar__day.-selectedBetween {
background: var(--cl-color-primary-light);
color: var(--cl-color-primary);
background:rgba(0, 108, 148, 0.07);
border-radius: 0;
}
.Calendar__day.-ltr.-selectedEnd {
border-top-right-radius: 100em;
border-bottom-right-radius: 100em;
border-radius: 0;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.Calendar__day.-rtl.-selectedEnd {
border-top-left-radius: 100em;
border-bottom-left-radius: 100em;
border-radius: 0;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {

@ -4,7 +4,7 @@ import {Calendar, utils} from "react-modern-calendar-datepicker";
import './index.css';
const Calender = () =>{
const SimpleCalendar = () =>{
const [selectedDay, setSelectedDay] = useState(null);
return(
<div className="flex items-center justify-center w-full my-2">
@ -20,4 +20,4 @@ const Calender = () =>{
};
export default Calender;
export default SimpleCalendar;

@ -0,0 +1,21 @@
import React, { useState } from "react";
import "../Calendar/index.css";
import DatePicker from "react-modern-calendar-datepicker";
const RangeDatePicker = () => {
const [selectedDayRange, setSelectedDayRange] = useState({
from: null,
to: null
});
return (
<DatePicker
value={selectedDayRange}
onChange={setSelectedDayRange}
inputPlaceholder="یک بازه زمانی انتخاب کنید"
shouldHighlightWeekends
locale='fa'
/>
);
};
export default RangeDatePicker;

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import _, { set } from "lodash";
import Col from "./col";
import Col from "./Col";
export default function List({ activeItem, item, setActiveItem, colLength }) {
const [cols, setCols] = useState(null);

@ -0,0 +1,19 @@
import React, { useState } from 'react';
import DatePicker from "react-modern-calendar-datepicker";
import '../Calendar/index.css';
const SimpleDatePicker = () =>{
const [selectedDay, setSelectedDay] = useState(null);
return(
<div className='flex items-center justify-center w-full my-2'>
<DatePicker
value={selectedDay}
onChange={setSelectedDay}
inputPlaceholder="انتخاب تاریخ"
shouldHighlightWeekends
locale='fa'
/>
</div>
)
}
export default SimpleDatePicker;

@ -21,8 +21,10 @@ import CircularProgressbar from "../components/CircularProgressbar";
import Stepper from "../components/Stepper";
import Product from "../components/Product";
import Navbar from "../components/Navbar";
import Calender from "../components/Calender";
import SimpleCalendar from '../components/Calendar';
import Footer from "../components/Footer";
import SimpleDatePicker from "../components/SimpleDatePicker";
import RangeDatePicker from '../components/RangeDatePicker';
const components = [
{
@ -445,14 +447,14 @@ const components = [
},
},
{
name : "Calender",
name : "SimpleCalendar",
author: "Keshavarzi",
props : [
],
content : {
name : "Calender",
component : <Calender />,
name : "SimpleCalendar",
component : <SimpleCalendar />,
code : null,
}
},
@ -477,25 +479,26 @@ const components = [
},
},
{
name: "SimpleDatePicker",
author: "Keshavarzi",
props: [],
content: {
name: "SimpleDatePicker",
component: <SimpleDatePicker />,
code: null,
},
},
{
name: "RangeDatePicker",
author: "Keshavarzi",
props: [],
content: {
name: "RangeDatePicker",
component: <div className="flex items-center justify-center w-full my-2"><RangeDatePicker /></div>,
code: null,
},
},
];
export default components;

Loading…
Cancel
Save