You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 lines
11 KiB
508 lines
11 KiB
import Button from '../components/Button'; |
|
import Tag from '../components/Tag'; |
|
import Counter from '../components/Counter'; |
|
import Input from "../components/Input"; |
|
import Search from "../components/Search"; |
|
import SearchWidthSuggest from "../components/search-with-suggest"; |
|
import Radio from "../components/Radio"; |
|
import Checkbox from "../components/Checkbox"; |
|
import SelectRadio from "../components/SelectRadio"; |
|
import SelectCheckbox from "../components/SelectCheckbox"; |
|
import Switch from "../components/Switch"; |
|
import VerticalExpandableProductFilter from "../components/VerticalExpandableProductFilter"; |
|
import SidebarCategoryHover from "../components/SidebarCategoryHover"; |
|
import Slider from '../components/Slider'; |
|
import Range from "../components/Range"; |
|
import Alert from "../components/Alert"; |
|
import Toast from "../components/Toast"; |
|
import StarRating from '../components/StarRating'; |
|
import Chart from "../components/Recharts"; |
|
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'; |
|
const components = [ |
|
{ |
|
name : "Button", |
|
author : 'Andalib', |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Button", |
|
component : <Button buttonBgColor="bg-blue-500" />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Tag", |
|
author : 'Andalib', |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Tag", |
|
component : <Tag />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name: "Input", |
|
author : "Ashrafi", |
|
props: [ |
|
{ |
|
name: "maxLength", |
|
type: "string", |
|
required: "false", |
|
description: "بیشترین تعداد کاراکتری که میتوان استفاده کرد.", |
|
defaultValue: "", |
|
}, |
|
{ |
|
name: "lang", |
|
type: "string", |
|
required: "false", |
|
description: "زبان سایت", |
|
defaultValue: "fa", |
|
}, |
|
{ |
|
name: "inputMode", |
|
type: "string", |
|
required: "false", |
|
description: "با تعیین این مقدار نوع کیبرد مشخص میشود.", |
|
defaultValue: "text", |
|
}, |
|
{ |
|
name: "label", |
|
type: "string", |
|
required: "false", |
|
description: "", |
|
defaultValue: "label", |
|
}, |
|
], |
|
content: { |
|
name: "Input", |
|
component: <Input />, |
|
code: `import React, { useState } from "react"; |
|
import _ from "lodash"; |
|
import "./index.scss"; |
|
|
|
import tick from "./tick.png"; |
|
import danger from "./danger.png"; |
|
|
|
const langDetector = (lang, option1, option2) => { |
|
return lang === "fa" ? option1 : option2; |
|
}; |
|
|
|
const inputStatusHandler = (value, focus, status, primary, success, danger) => { |
|
if (!focus) { |
|
return ""; |
|
} else { |
|
if (!value) { |
|
return primary; |
|
} else { |
|
if (status) { |
|
return success; |
|
} else { |
|
return danger; |
|
} |
|
} |
|
} |
|
}; |
|
|
|
export default function Input(props) { |
|
const [value, setValue] = useState(""); |
|
const [focusToggle, setFocusToggle] = useState(false); |
|
|
|
const { lang, theme, inputMode, label, status, maxLength, message } = props; |
|
|
|
const onChange = (val) => { |
|
setValue(val); |
|
}; |
|
|
|
return ( |
|
<div |
|
className={_.join( |
|
["input flex flex-col relative my-2", langDetector(lang, "fa", "en")], |
|
" " |
|
)} |
|
> |
|
<label |
|
className={_.join( |
|
[ |
|
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300", |
|
langDetector(lang, "right-2", "left-2"), |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"input__labelFocus", |
|
"input__labelSuccess", |
|
"input__labelDanger" |
|
), |
|
], |
|
" " |
|
)} |
|
onClick={() => setFocusToggle(true)} |
|
> |
|
{label} |
|
</label> |
|
<input |
|
type="text" |
|
inputMode={inputMode} |
|
className={_.join( |
|
[ |
|
"flex-1 border rounded-md outline-none p-2", |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"input__inputActive", |
|
"input__inputSuccess", |
|
"input__inputDanger" |
|
), |
|
"transition", |
|
], |
|
" " |
|
)} |
|
onChange={(e) => onChange(e.target.value)} |
|
value={value} |
|
onFocus={() => setFocusToggle(true)} |
|
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} |
|
maxLength={maxLength} |
|
/> |
|
{!status && value && ( |
|
<img |
|
src={danger} |
|
alt={langDetector(lang, "اشتباه", "wrong")} |
|
className={_.join( |
|
[ |
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
|
langDetector(lang, "left-2", "right-2"), |
|
], |
|
" " |
|
)} |
|
/> |
|
)} |
|
{status && value && ( |
|
<img |
|
src={tick} |
|
alt={langDetector(lang, "درست", "right")} |
|
className={_.join( |
|
[ |
|
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2", |
|
langDetector(lang, "left-2", "right-2"), |
|
], |
|
" " |
|
)} |
|
/> |
|
)} |
|
|
|
{value && !status && ( |
|
<span |
|
className={_.join( |
|
[ |
|
"input__message text-xs absolute -bottom-5", |
|
langDetector(lang, "right-2", "left-2"), |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"", |
|
"input__messageSuccess", |
|
"input__messageDanger" |
|
), |
|
"transition", |
|
], |
|
" " |
|
)} |
|
> |
|
{message} |
|
</span> |
|
)} |
|
{value && ( |
|
<span |
|
className={_.join( |
|
[ |
|
"input__length absolute -bottom-5 text-xs", |
|
langDetector(lang, "left-2", "right-2"), |
|
inputStatusHandler( |
|
value, |
|
focusToggle, |
|
status, |
|
"", |
|
"input__lengthSuccess", |
|
"input__lengthDanger" |
|
), |
|
"transition", |
|
], |
|
" " |
|
)} |
|
> |
|
{value.length + "/" + maxLength} |
|
</span> |
|
)} |
|
</div> |
|
); |
|
} |
|
|
|
Input.defaultProps = { |
|
lang : 'fa', |
|
inputMode : 'string', |
|
label : '', |
|
status : '', |
|
maxLength : '', |
|
message : '', |
|
}`, |
|
}, |
|
}, |
|
{ |
|
name: "Search", |
|
author: "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Search", |
|
component: <Search />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name: "Search with suggestion", |
|
author : "Ashrafi", |
|
props: [], |
|
content: { |
|
name: "Search with suggestion", |
|
component: <SearchWidthSuggest />, |
|
code: null, |
|
}, |
|
}, |
|
{ |
|
name : "Radio", |
|
author : "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Radio", |
|
component : <Radio />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Checkbox", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Checkbox", |
|
component : <Checkbox />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Select box - Radio", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Select box - Radio", |
|
component : <SelectRadio />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Select box - Checkbox", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Select box - Checkbox", |
|
component : <SelectCheckbox />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Switch", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Switch", |
|
component : <Switch />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Expandable products filter", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Expandable products filter", |
|
component : <VerticalExpandableProductFilter />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Sidebar catergory", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Sidebar category", |
|
component : <SidebarCategoryHover />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Slider", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Slider", |
|
component : <Slider />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Range", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Range", |
|
component : <Range />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Counter", |
|
author: "Andalib", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Counter", |
|
component : <Counter />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Alert", |
|
author: "Andalib", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Alert", |
|
component : <Alert />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Toast", |
|
author: "Andalib", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Toast", |
|
component : <Toast />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Star rating", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Star rating", |
|
component : <StarRating />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Chart", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Chart", |
|
component : <Chart />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Circular progressbar", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Circular progressbar", |
|
component : <CircularProgressbar />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Stepper", |
|
author: "Ashrafi", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Stepper", |
|
component : <Stepper />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Product", |
|
author: "Andalib", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Product", |
|
component : <Product />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Calender", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Calender", |
|
component : <Calender />, |
|
code : null, |
|
} |
|
}, |
|
{ |
|
name : "Navbar", |
|
author: "Andalib", |
|
props : [ |
|
|
|
], |
|
content : { |
|
name : "Navbar", |
|
component : <Navbar />, |
|
code : null, |
|
} |
|
}, |
|
]; |
|
|
|
export default components;
|
|
|