From 33f84f7c53302d61e34fe73d12d8dc10ff17e878 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 26 Oct 2021 16:50:56 +0330 Subject: [PATCH] reza added Search --- package.json | 5 +++ src/App.css | 38 ---------------- src/App.test.tsx | 1 - src/App.tsx | 22 ++-------- src/components/Search/icon.png | Bin 0 -> 857 bytes src/components/Search/index.scss | 66 ++++++++++++++++++++++++++++ src/components/Search/index.tsx | 72 +++++++++++++++++++++++++++++++ src/components/Search/x.png | Bin 0 -> 346 bytes src/global.scss | 22 ++++++++++ src/index.tsx | 6 --- src/logo.svg | 1 - src/reportWebVitals.ts | 15 ------- yarn.lock | 53 ++++++++++++++++++++++- 13 files changed, 220 insertions(+), 81 deletions(-) delete mode 100644 src/App.css create mode 100644 src/components/Search/icon.png create mode 100644 src/components/Search/index.scss create mode 100644 src/components/Search/index.tsx create mode 100644 src/components/Search/x.png create mode 100644 src/global.scss delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.ts diff --git a/package.json b/package.json index 3b08c7a..482d192 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", + "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", + "sass": "^1.43.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, @@ -39,5 +41,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/lodash": "^4.14.176" } } diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx index 2a68616..1f03afe 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; diff --git a/src/App.tsx b/src/App.tsx index a53698a..64d11c0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,10 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import './global.scss'; +import Search from './components/Search'; function App() { return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+
); } diff --git a/src/components/Search/icon.png b/src/components/Search/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..81d586c7fa7862e5d51c832c1c1a94814283778a GIT binary patch literal 857 zcmV-f1E&0mP)(+L_Ts5c;; zpmc)L3DW=bJ>?Wfw(L0WrFZD=9SN57KK*)6eoAt3#4R~uwv$0{v)SyUEpD=2uix`I zNs^WRyz2Xp`F#F5WbwV>1av3Ishr-(Dxj9O6l|&fU-tp+43}jYK!t1~`y*SLq0Y)V zS3jNu4LoB$prj!4q9`8wC>e#5GaLammHm?C0$Fr*Vz6`dCj{8?dyVIBw6($+*mqNF zrb%(KS2N{Ndo8=wRAp?UMmPiesR`(F(`B-lGtGIfJ^-@S0P?x91>ro!E;KUjx(zWn zp4;50b|$-Oo4X0_iv~_@a8&*-P<|f+e9`}Y%PyNTc?Zs7gE$)$V=-V$lxOw(EVw+> zKLp2sQw<q-}kpQEs<|s_P zYxz8l!4aTOp;e3}p|@Kk#@6Ay*;X$RqUX;cK`nC;WhXI0aGX8mApv4@36Qr&D_o`y zg}|ck+nBSy&jnYBA>XM#)>kgqgHLa8HEFvjNB#9pwv#n|x2bP`!I2OYq=eR{{Wl3g zQOOD(>nrH1M4$dr&F$FE5mtYFQD2=2?y`@AA$h`<^-bYj15hmuEvBgw<^@a{&9Q=#2XBI- zpe42^O+K37xOo8<555OTzfzGoNLUJfo&G%6}St{b6;1#6Pz1l7m{4x+3t7VWTp3+Wa7MZ z4Ji2z7qH$9YzMFxoWC;LZg;Au-ZK&iHCIjBRadA9aBsM}gQ4F&z)b;gG;kK%Q{vgh j@lnAIN{FFb*LVD1*@<&E6n{BQ00000NkvXXu0mjfUL%A| literal 0 HcmV?d00001 diff --git a/src/components/Search/index.scss b/src/components/Search/index.scss new file mode 100644 index 0000000..e6ea206 --- /dev/null +++ b/src/components/Search/index.scss @@ -0,0 +1,66 @@ +$primary: #246e8a; +$gray: #dbdbdb; + +.search { + display: flex; + flex-direction: column; + position: relative; + &__icon { + width: 27px; + position: absolute; + top: 50%; + transform: translateY(-50%); + &Fa { + left: 20px; + } + &En { + right: 20px; + } + } + + &__x { + width: 15px; + position: absolute; + top: 50%; + transform: translateY(-50%); + opacity: 0; + &Fa { + right: 15px; + } + &En { + left: 10px; + } + &Active{ + opacity: 1; + } + } + + input { + padding: 15px 40px 15px 30px; + font-size: 14px; + border: 1.7px solid $gray; + border-radius: 5px; + background-color: inherit; + &::placeholder { + color: $gray; + } + &:focus { + border-color: $primary; + outline: 0px; + color: #246e8a; + &::placeholder { + color: #246e8a; + } + } + } +} + +.en { + direction: ltr; + text-align: left; +} + +.fa { + direction: rtl; + text-align: right; +} diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx new file mode 100644 index 0000000..d50d6ec --- /dev/null +++ b/src/components/Search/index.tsx @@ -0,0 +1,72 @@ +import React, { useState } from "react"; +import _ from "lodash"; +import searchIcon from "./icon.png"; +import xIcon from "./x.png"; + +interface Types { + lang?: string; + theme?: string; +} + +const langDetector = (lang: string, option1: any, option2: any) => { + return lang === "fa" ? option1 : option2; +}; + +export default function Search(props: Types) { + const [clear, setClear] = useState(false); + const [value, setValue] = useState(""); + const { lang, theme } = props; + + const onChange = (val: string) => { + setValue(val); + if (val.length) { + setClear(true); + } else { + setClear(false); + } + }; + + return ( +
+ onChange(e.target.value)} + value={value} + placeholder={langDetector( + lang as string, + "نام کالا را جستجو کنید", + "search product name" + )} + /> + {langDetector(lang + {langDetector(lang +
+ ); +} + +Search.defaultProps = { + lang: "fa", + theme: "light", +}; diff --git a/src/components/Search/x.png b/src/components/Search/x.png new file mode 100644 index 0000000000000000000000000000000000000000..df19f25a50e39d8ff74765f1bda962aa02b85ae5 GIT binary patch literal 346 zcmV-g0j2(lP){W&YxE9d!nhdrk`veoHDE{Q3bsNmSOfGz1 @@ -10,8 +9,3 @@ ReactDOM.render( , document.getElementById('root') ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16..0000000 --- a/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/yarn.lock b/yarn.lock index 37c565f..e057573 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1771,6 +1771,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/lodash@^4.14.176": + version "4.14.176" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0" + integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ== + "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -2344,6 +2349,14 @@ anymatch@^3.0.3, anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + aproba@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" @@ -3203,6 +3216,21 @@ check-types@^11.1.1: resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f" integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ== +"chokidar@>=3.0.0 <4.0.0": + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -5191,7 +5219,7 @@ fsevents@^1.2.7: bindings "^1.5.0" nan "^2.12.1" -fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1: +fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1, fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== @@ -5276,6 +5304,13 @@ glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0: dependencies: is-glob "^4.0.1" +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" @@ -7002,7 +7037,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5: +"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -9225,6 +9260,13 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + recursive-readdir@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" @@ -9645,6 +9687,13 @@ sass-loader@^10.0.5: schema-utils "^3.0.0" semver "^7.3.2" +sass@^1.43.3: + version "1.43.3" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.43.3.tgz#aa16a69131b84f0cd23189a242571e8905f1ce43" + integrity sha512-BJnLngqWpMeS65UvlYYEuCb3/fLxDxhHtOB/gWPxs6NKrslTxGt3ZxwIvOe/0Jm4tWwM/+tIpE3wj4dLEhPDeQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"