diff --git a/styles/Home.module.css b/styles/Home.module.css index b8f4c65..e8a3937 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -7,3 +7,8 @@ } +@media screen and (max-width: 800px) { + .container{ + padding: 75px 30px; + } +} \ No newline at end of file diff --git a/сomponents/card/card.module.css b/сomponents/card/card.module.css index e5e6d6c..22b173f 100644 --- a/сomponents/card/card.module.css +++ b/сomponents/card/card.module.css @@ -112,5 +112,6 @@ flex-direction: column; gap:15px; font-size: 16px; +} + -} \ No newline at end of file diff --git a/сomponents/search/index.tsx b/сomponents/search/index.tsx index 156a5bf..8282004 100644 --- a/сomponents/search/index.tsx +++ b/сomponents/search/index.tsx @@ -1,10 +1,11 @@ import React, { useState } from "react"; -import { AutoComplete, Input, Tag } from 'antd'; +import { AutoComplete, Input, InputNumber, Popover, Radio, Tag } from 'antd'; import { useAppDispatch, useAppSelector } from "../../hooks"; import { createNode, deleteNode, hints, INode, loading, nodes, products, setLoading } from "../../store/reducers/nodesInputReducer"; import { createHints, search } from "../../store/reducers/asyncActions"; import styles from "./search.module.css" - +import {CalculatorOutlined} from '@ant-design/icons'; +import 'antd/dist/antd.css'; export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ @@ -15,6 +16,7 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ const getProducts = useAppSelector(products); const getHints = useAppSelector(hints); const getLoading = useAppSelector(loading) + const [disableInput, setDisableInput] = useState(false) const [autoCompleteValue, setAutoCompleteValue] = useState("") const onChange = (text:string) =>{ if (text.length >= 3 && text.length%2 == 0){ @@ -26,7 +28,8 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ } const addTag = (value:INode) => { let color = "red" - switch((value as any).type ){ + + switch(value.type){ case "Category": color = "gold" break @@ -50,6 +53,36 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ > {value.value.length <13? value.value:value.value.slice(0,10)+"..."} + + if (value.type.split("_")[1] == "numeric"){ + let popver =
+
{value.type.split("_")[0]}
+ + + = + + + setDisableInput(true)} size="small" min={1} max={100000} defaultValue={100}/> + +
+ + tag = e?null:setDisableInput(false)} content={popver} title="Задать значение"> + { + dispatch( + deleteNode(value.value) + ) + }} + > + + {value.value.length < 13? value.value:value.value.slice(0,10)+"..."} + + + } + setTags(tags.concat([tag])) } @@ -102,6 +135,9 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ } return( null} + disabled={disableInput} options={getHints.map((e) => { const pre_str = e.value.value.slice(0, e.coordinate) const after_str = e.value.value.slice(e.coordinate+autoCompleteValue.length, e.value.value.length) @@ -122,7 +158,9 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{ dropdownMatchSelectWidth={252} > null} + style={{ width: "60vw" }} color="red-6" className={styles.search} onChange={(e)=>onChange(e.target.value)} diff --git a/сomponents/search/search.module.css b/сomponents/search/search.module.css index 6a928e3..f66abb4 100644 --- a/сomponents/search/search.module.css +++ b/сomponents/search/search.module.css @@ -18,10 +18,16 @@ } -.search input{ -} + .search.ant-input-affix-wrapper-lg{ background-color: #FBFBFB !important; border-radius: 17px !important; +} +.popover{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap:3px; } \ No newline at end of file