update 4 files and delete 1 file

master
mahdi andalib 2 years ago
parent 91c964b3f4
commit 809e5c33d0
  1. 1
      package.json
  2. 0
      src/components/Alert/index.scss
  3. 46
      src/components/Checkbox/index.js
  4. 39
      src/components/ProgressBar/CircularProgressbar/index.js
  5. 25
      src/components/ProgressBar/index.js
  6. 60
      src/index.scss
  7. 22
      src/redux/data.js
  8. 5
      yarn.lock

@ -24,6 +24,7 @@
"react": "17", "react": "17",
"react-apexcharts": "^1.3.9", "react-apexcharts": "^1.3.9",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
"react-circular-progressbar": "^2.0.4",
"react-dom": "17", "react-dom": "17",
"react-hook-form": "^7.30.0", "react-hook-form": "^7.30.0",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",

@ -0,0 +1,46 @@
// it has style inside index.scss ---> // Start CheckBox Component && end CheckBox Component
import React from "react";
export default function Checkbox(props) {
return (
<div>
<svg className="w-0 h-0 absolute pointer-events-none select-none">
<symbol id="check" viewBox="0 0 12 10">
<polyline
points="1.5 6 4.5 9 10.5 1"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
></polyline>
</symbol>
</svg>
<div
className="checkbox-container flex flex-wrap justify-center items-center hover:bg-inherit border-box"
style={{ color: "#000", height: "30px" }}
>
<input
className="checkbox-input absolute hidden"
id="apples"
type="checkbox"
checked={props.checked}
/>
<label
className="checkbox flex rounded-sm transition-all duration-100 cursor-pointer select-none overflow-hidden"
style={{ padding: "6px 8px" }}
htmlFor="apples"
>
<span
className="align-bottom"
style={{ transform: "translate3d(0, 0, 0)" }}
>
<svg width="12px" height="10px">
<use xlinkHref="#check"></use>
</svg>
</span>
</label>
</div>
</div>
);
}

@ -0,0 +1,39 @@
import React from "react";
import {
CircularProgressbar,
buildStyles,
CircularProgressbarWithChildren,
} from "react-circular-progressbar";
function CustomCircularProgressbar() {
const percentage = 66;
return (
<>
<h2>درست کار نکرد!!!</h2>
<div style={{ width: 200, height: 200 }}>
<CircularProgressbar value={percentage} text={percentage} />
</div>
<div className="" style={{ width: 200, height: 200, marginTop: 20 }}>
<CircularProgressbarWithChildren
value={80}
styles={buildStyles({
pathColor: "#f00",
trailColor: "transparent",
// strokeLinecap: "butt",
})}
>
<CircularProgressbar
value={70}
styles={buildStyles({
trailColor: "transparent",
// strokeLinecap: "butt",
})}
/>
</CircularProgressbarWithChildren>
</div>
</>
);
}
export default CustomCircularProgressbar;

@ -0,0 +1,25 @@
import React, { useState } from "react";
import CircularProgressbar from "./CircularProgressbar";
function ProgressBar() {
const list = {
1: <CircularProgressbar />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="w-20 bg-gray-200 mb-10"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default ProgressBar;

@ -1031,6 +1031,66 @@ $white: #fff;
// * end vodProductDesign Component // * end vodProductDesign Component
// TODO Start CheckBox Component
.checkbox-container * {
box-sizing: border-box;
}
.checkbox:not(:last-child) {
margin-right: 6px;
}
.checkbox span:first-child {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: scale(1);
border: 1px solid #cccfdb;
transition: all 0.3s ease;
}
.checkbox span:first-child svg {
position: absolute;
top: 3px;
left: 2px;
fill: none;
stroke: #fff;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transform: translate3d(0, 0, 0);
}
.checkbox span:last-child {
padding-left: 8px;
line-height: 18px;
}
.checkbox:hover span:first-child {
border-color: #0077ff;
}
.checkbox-input:checked + .checkbox span:first-child {
background: #0077ff;
border-color: #0077ff;
animation: zoom-in-out 0.3s ease;
}
.checkbox-input:checked + .checkbox span:first-child svg {
stroke-dashoffset: 0;
}
@keyframes zoom-in-out {
50% {
transform: scale(0.9);
}
}
// * end CheckBox Component
// ? class for selectbox inside -->> CustomSelectBox <<-- // ? class for selectbox inside -->> CustomSelectBox <<--
.customizeSelect { .customizeSelect {
background-position: left 0.5rem center; background-position: left 0.5rem center;

@ -9,9 +9,11 @@ import Banners from "../components/Banners";
import Blog from "../components/Blog"; import Blog from "../components/Blog";
import CardTrelloDesign from "../components/CardTrelloDesign"; import CardTrelloDesign from "../components/CardTrelloDesign";
import ChartDesign from "../components/ChartDesign"; import ChartDesign from "../components/ChartDesign";
import ProgressBar from "../components/ProgressBar";
// mini components // mini components
import MiniComponents from "../components/MiniComponents"; import MiniComponents from "../components/MiniComponents";
import Checkbox from "../components/Checkbox";
// import ButtonDesign from "./components/buttonDesign/ButtonDesign"; // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
// import ProductDesign from "./components/productDesign/ProductDesign"; // import ProductDesign from "./components/productDesign/ProductDesign";
@ -213,6 +215,26 @@ const components = [
code: null, code: null,
}, },
}, },
{
name: "Checkbox",
author: "Ashrafi",
props: [],
content: {
name: "Checkbox",
component: <Checkbox />,
code: null,
},
},
{
name: "Progress Bar",
author: "Ashrafi-Andalib",
props: [],
content: {
name: "Progress Bar",
component: <ProgressBar />,
code: null,
},
},
// mini components // mini components
{ {
name: "Mini Components", name: "Mini Components",

@ -7657,6 +7657,11 @@ react-beautiful-dnd@^13.1.0:
redux "^4.0.4" redux "^4.0.4"
use-memo-one "^1.1.1" use-memo-one "^1.1.1"
react-circular-progressbar@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz#5b04a9cf6be8c522c180e4e99ec6db63677335b0"
integrity sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww==
react-date-object@^2.1.5: react-date-object@^2.1.5:
version "2.1.5" version "2.1.5"
resolved "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.5.tgz" resolved "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.5.tgz"

Loading…
Cancel
Save