From 21c858b51964cb719feee11439e14ac53a4f2b39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 15:21:36 +0300 Subject: [PATCH 1/8] Edited Heading component --- src/components/typography/Heading.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/typography/Heading.tsx b/src/components/typography/Heading.tsx index a476ea4..324d888 100644 --- a/src/components/typography/Heading.tsx +++ b/src/components/typography/Heading.tsx @@ -1,9 +1,20 @@ import React from "react"; +import classNames from "classnames"; type Props = { + className?: string | undefined; children: React.ReactNode; }; -export default function Heading({ children }: Props) { - return

{children}

; +export default function Heading({ children, className }: Props) { + return ( +

+ {children} +

+ ); } From 6d36b774b2b85dcf46b73c6984631fd0c32fc598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 15:31:23 +0300 Subject: [PATCH 2/8] Aspect ratio component --- src/components/AspectRatio.tsx | 38 ++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/components/AspectRatio.tsx diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx new file mode 100644 index 0000000..be6a1b8 --- /dev/null +++ b/src/components/AspectRatio.tsx @@ -0,0 +1,38 @@ +import classNames from "classnames"; +import React from "react"; + +export type Props = { + /** + * The style of component + */ + className?: string; + /** + * The optional child + */ + children?: React.ReactNode; +}; +const AspectRatio = ({ className, children }: Props) => { + return ( +
+ {children} +
+ ); +}; + +AspectRatio.Content = function AspectRatioContent({ + className, + children, +}: Props) { + return ( +
+ {children} +
+ ); +}; + +export default AspectRatio; From 4a5afdf01ac2be31a5b3ab5a106e819218494d78 Mon Sep 17 00:00:00 2001 From: filantrop Date: Thu, 1 Sep 2022 23:56:47 +0300 Subject: [PATCH 3/8] fix icon button for select as new icons --- src/components/Select.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 1670d5d..0310de3 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -6,7 +6,7 @@ import { Fragment } from "react"; import { Listbox, Transition } from "@headlessui/react"; import classNames from "classnames"; import "../index.css"; -import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg"; +import { ReactComponent as SelectIcon } from "../assets/svg/caret-down.svg"; import { Scrollbar } from "react-scrollbars-custom"; /* -------------------------------------------------------------------------- */ @@ -98,10 +98,10 @@ function Select({ displayValueResolver ? displayValueResolver(value) : value }`} - @@ -114,12 +114,12 @@ function Select({ leaveTo="opacity-0" > - + > */} {options.map((option, id) => ( ({ }`} ))} - + {/* */} From f3ccb0523aadce6b3071e34461ca40e808dcbfd2 Mon Sep 17 00:00:00 2001 From: filantrop Date: Wed, 7 Sep 2022 14:58:40 +0300 Subject: [PATCH 4/8] fix props in component --- src/components/SearchBar.tsx | 164 +++++++++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 src/components/SearchBar.tsx diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx new file mode 100644 index 0000000..fae7a83 --- /dev/null +++ b/src/components/SearchBar.tsx @@ -0,0 +1,164 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import classNames from "classnames"; +import "../index.css"; +import { Combobox, Transition } from "@headlessui/react"; +import { Fragment, useEffect, useState } from "react"; +import { Scrollbar } from "react-scrollbars-custom"; +import { Function } from "lodash"; + +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ +type Hint = { + id: string; + caption: string; +}; + +type Props = { + onChange: (query: string) => void; + onSelected: (value: Hint) => void; + IsEmptyItems: () => React.ReactNode; + hints: Hint[]; + displayValueResolver?: (element: T) => any; + disabled?: boolean; + inGroup?: boolean; + className?: string; + maxScrollSize?: number; + elementScrollSize?: number; + placeHolder?: string; +}; +/* -------------------------------------------------------------------------- */ +/* styles */ +/* -------------------------------------------------------------------------- */ +const inputStyle = ` + w-full + cursor-default + rounded + overflow-hidden + border + border-solid + shadow-none + border-gray-100 + focus:outline-none + focus:border-gray-200 + hover:border-gray-200 + py-2 pl-3 + text-sm + text-gray-900 +`; + +const inputList = ` + absolute z-10 mt-1 w-full max-h-56 + bg-white shadow-lg + rounded py-1 + overflow-hidden + focus:outline-none + text-base + sm:text-sm`; + +const inputInGroup = [ + `border-none + hover:none + active:none + focus:none + `, +]; + +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ + +export default function SearchBar({ + onChange, + onSelected, + hints, + displayValueResolver, + disabled, + inGroup = false, + className, + maxScrollSize = 140, + elementScrollSize = 36, + placeHolder = "Search...", + IsEmptyItems, + ...props +}: Props) { + const [selected, setSelected] = useState(hints); + const [query, setQuery] = useState(""); + + useEffect(() => { + onChange(query); + }, [query, onChange]); + + const handleSelected = (value: Hint) => { + setSelected(value); + onSelected && onSelected(value); + }; + return ( +
+ +
+
+ setQuery(event.target.value)} + placeholder={placeHolder} + displayValue={(value: T) => + displayValueResolver ? displayValueResolver(value) : value + } + /> +
+
+ {query.length > 0 && ( +
+ setQuery("")} + > + + {hints.length === 0 && query !== "" ? IsEmptyItems() : null} + {/* */} + {hints.map((item: any, id: number) => ( + + classNames( + active + ? "text-gray-900 bg-blue-50" + : "font-normal ", + "cursor-default select-none relative py-2 pl-3 pr-9", + selected + ? "text-gray-900 bg-blue-100" + : "font-normal " + ) + } + value={item} + > +
{item.caption}
+ + ))} + {/* */} + + +
+ )} +
+
+ +
+ ); +} From f7a5aaf90e15446a65f1d92081cad0f96bca3c37 Mon Sep 17 00:00:00 2001 From: filantrop Date: Wed, 7 Sep 2022 15:30:31 +0300 Subject: [PATCH 5/8] fix props in component --- src/components/MainSection.tsx | 105 +++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 src/components/MainSection.tsx diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx new file mode 100644 index 0000000..3bc0ad1 --- /dev/null +++ b/src/components/MainSection.tsx @@ -0,0 +1,105 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import classNames from "classnames"; +import React from "react"; +import Inputgroup from "./Inputgroup"; +import Select from "./Select"; +import { useState } from "react"; +import { Button } from "./Button/Button"; +import { SVGSearch } from "../components/icons"; +import SearchBar from "components/SearchBar"; + +type Props = { + className?: string; + options: T[]; + hintsValues: H[]; + displayValueResolver?: (element: T) => any; +}; + +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ + +export default function MainSection({ + className, + options, + hintsValues, + displayValueResolver, + ...props +}: Props) { + const [value, setValue] = useState(options[0]); // Category + + const [hints, setHints] = useState([]); //Response list + const [onSelected, setOnSelected] = useState(""); // Selected item from response list + const [query, setQuery] = useState(""); // Query + + const onChange = (query: string) => { + //console.log(query) + setQuery(query); + setHints(hintsValues); + }; + const onClick = () => { + console.log(displayValueResolver ? displayValueResolver(value) : value); + console.log(onSelected); + console.log(query); + }; + const searchResolver = (item: any) => { + setOnSelected(item.caption); + console.log(onSelected); + }; + //empty items message + const IsEmptyItems = () => { + return

Nothing Found

; + }; + + return ( +
+
+ Scientific Library with Free Access +
+
+
Search
+
320 455
+
Items
+
+
+ +
+
+