eiSettings
분류 전체보기
- react-hook-form 2024.06.21
- word-break: normal, break-all, keep-all 2024.06.21
- css variable - color에 사용하면 좋음: var(--LG-Red) 2024.06.21
- react agGrid 2024.06.20
- 두번째 input부터만적용 input + input { margin-top: 10px; } 2024.06.20
- input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` 2024.06.20
- explorer, folder tree 2024.06.20
- table <td rowspan="2"> 2row를, <td colspan="2"> 2column을 차지한다는 얘기 2024.06.18
- .popupModal [class="image"] exact css class match 2024.06.18
- Optional chaining (?.) 2024.06.18
react-hook-form
2024. 6. 21. 18:29 [카테고리 없음]
반응형
import { useForm } from "react-hook-form";
const { setValue, handleSubmit, control } = useForm({ mode: "all", reValidateMode: "onChange", defaultValues: { groups: [] } });
setValue("groups", []);
const date = searchDate === "undefined" ? "" : searchDate;
setIsLoading(true);
const origin = await request({ ...getEiSet, body: { corporationCode: userStore.user?.corporationCode, searchDate: date, centerType, evType: codes[centerType][evType] } });
const data = origin?.settings?.length ? origin.settings.map((item) => (item.divisions ? item : { ...item, divisions: getDefaultValue(centerType, evType).divisions })) : [getDefaultValue(centerType, evType)];
setApplyDate({ month: origin?.baseMonth ? moment(origin.baseMonth).format("YYYY.MM") : "undefined", start: origin?.startDay ? moment(origin.startDay).format("YYYY.MM.DD") : "", end: origin?.endDay ? moment(origin.endDay).format("YYYY.MM.DD") : "" });
if (origin?.baseMonth) setSearchDate(moment(origin.baseMonth).format("YYYY-MM"));
setOverIncentiveVolume(origin?.overIncentiveVolume);
setOverIncentiveVal(origin?.overIncentiveVal);
let levelObj = {};
origin?.levelSetting?.forEach((n) => (levelObj[n.levelCode] = n.levelIncentiveVal));
setLevels(levelObj);
setValue("groups", data);
반응형
word-break: normal, break-all, keep-all
2024. 6. 21. 17:51 [html, css]
반응형
반응형
'html, css' 카테고리의 다른 글
css variable - color에 사용하면 좋음: var(--LG-Red)
2024. 6. 21. 16:48 [html, css/css color]
반응형
var(--LG-Red)
https://www.w3schools.com/css/css3_variables.asp
variables.scss, $변수를 사용할 수도 있음
$primary-color-red: #bb0841;
$primary-color-red-hover: #82072e;
$primary-color-grey: #323232;
$secondary-color-gery: #fbfbfb;
$border-color-gery: #d5d5d5;
$border-color-deep: #cccccc;
$hover-color-pink: #faf1f4;
$board-color-grey: #f6f6f6;
$board-color-txt: #5f5f5f;
$backgorund-color-grey: #888888;
$line-color-grey: #d8d8d8;
$btn-color-pink: #ed5c7d;
$btn-color-grey: #828282;
$txt-color-edit: #2468c4;
$txt-color-content: #666666;
$chart-color-pink: #faf1f4;
$chart-color-grey: #d7d7d7;
$primary-color-grey: #f4f4f4;
$primary-color-black: #262626;
$primary-color-red: #a50034;
$primary-color-pink: #fff8fb;
$LG-Red: #a50034;
$Mid1-Red: #c5597b;
$Mid2-Red: #d2809a;
$Light1-Red: #ffedf3;
$Dark-Mid2-Red: #7c0328;
$White: #ffffff;
$Dark-Gray1: #333333;
$Dark-Gray2: #262626;
$Dark-Gray3: #1a1a1a;
$Mid-Gray1: #cbc8c2;
$Mid-Gray2: #7e7c77;
$Mid-Gray3: #4a4946;
$Light-Gray1: #f6f3eb;
$Light-Gray2: #f0ece4;
$Light-Gray3: #e6e1d6;
$Light-Gray-BG: #f4f4f4;
$Light-Pink-BG: #fff8fb;
$Light-Linen-BG: #ffece2;
$Light-Red-BG: #fde8e8;
$Light-Yellow-BG: #fff4d6;
$Light-Green-BG: #e9f2e5;
$Orange-Point: #ce3c0b;
$Brown-Point: #9c6800;
$Active-Red: #ea1917;
$Green: #287d00;
common.scss
:root {
--primary-color-red: #{$primary-color-red};
--primary-color-red-hover: #{$primary-color-red-hover};
--primary-color-grey: #{$primary-color-grey};
--secondary-color-gery: #{$secondary-color-gery};
--border-color-gery: #{$border-color-gery};
--border-color-deep: #{$border-color-deep};
--hover-color-pink: #{$hover-color-pink};
--board-color-grey: #{$board-color-grey};
--backgorund-color-grey: #{$backgorund-color-grey};
--line-color-grey: #{$line-color-grey};
--txt-color-edit: #{$txt-color-edit};
--txt-color-content: #{$txt-color-content};
--chart-color-pink: #{$chart-color-pink};
--chart-color-grey: #{$chart-color-grey};
--LG-Red: #{$LG-Red};
--Mid1-Red: #{$Mid1-Red};
--Mid2-Red: #{$Mid2-Red};
--Light1-Red: #{$Light1-Red};
--Dark-Mid2-Red: #{$Dark-Mid2-Red};
--White: #{$White};
--Dark-Gray1: #{$Dark-Gray1};
--Dark-Gray2: #{$Dark-Gray2};
--Dark-Gray3: #{$Dark-Gray3};
--Mid-Gray1: #{$Mid-Gray1};
--Mid-Gray2: #{$Mid-Gray2};
--Mid-Gray3: #{$Mid-Gray3};
--Light-Gray1: #{$Light-Gray1};
--Light-Gray2: #{$Light-Gray2};
--Light-Gray3: #{$Light-Gray3};
--Light-Gray-BG: #{$Light-Gray-BG};
--Light-Pink-BG: #{$Light-Pink-BG};
--Light-Linen-BG: #{$Light-Linen-BG};
--Light-Red-BG: #{$Light-Red-BG};
--Light-Yellow-BG: #{$Light-Yellow-BG};
--Light-Green-BG: #{$Light-Green-BG};
--Orange-Point: #{$Orange-Point};
--Brown-Point: #{$Brown-Point};
--Active-Red: #{$Active-Red};
--Green: #{$Green};
}
반응형
'html, css > css color' 카테고리의 다른 글
color: #ffffff(white), #000000(black) (0) | 2024.04.25 |
---|---|
color keyword: black, gray=grey, lightgray=lightgrey, gainsboro(A light bluish grey colour, 옅은푸른빛회색) (0) | 2024.04.25 |
react agGrid
2024. 6. 20. 18:20 [react]
반응형
반응형
'react' 카테고리의 다른 글
explorer, folder tree (0) | 2024.06.20 |
---|---|
react createContext, useContext, (0) | 2024.05.17 |
react map key 설정안해주면 eiSettings + - 제대로 동작안했던듯 (0) | 2024.05.14 |
Promise결과를 받아서 useMemo에 저장후 사용하려 하면 에러남, useState로 저장후에 useEffect로 감지하려고 해도 에러남 (0) | 2024.04.08 |
[페이지전환]react-router-dom<Link> window.href.location history.push()... (0) | 2024.03.27 |
두번째 input부터만적용 input + input { margin-top: 10px; }
2024. 6. 20. 17:08 [html, css/css selector]
반응형
input + input {
margin-top: 10px;
}
반응형
'html, css > css selector' 카테고리의 다른 글
.popupModal [class="image"] exact css class match (0) | 2024.06.18 |
---|---|
.table { td:nth-child(2n+2) {background-color: var(--Light-Gray-BG);}} 테이블 row 짝수마다 색깔 다르게 (0) | 2024.04.19 |
css selector(#id,.class, 자손,>자식), table tag (0) | 2019.04.19 |
input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`
2024. 6. 20. 17:06 [카테고리 없음]
반응형
input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`
반응형
explorer, folder tree
2024. 6. 20. 16:23 [react]
반응형
https://codesandbox.io/s/explorer-l44v98?file=/index.js
Explorer - CodeSandbox
Explorer by fir0j using antd, react, react-dom, react-icons, react-scripts, styled-components
codesandbox.io
위 소스는 자식이 2개 이상 있으면 2개가 한꺼번에 오픈되는 에러 있음, 아래는 에러 수정한 버젼
import React, { Fragment, useEffect, useState } from "react";
import { IoMdArrowDropright } from "react-icons/io";
import { MdArrowDropDown } from "react-icons/md";
import styled from "styled-components";
const SelectParent = styled.div`
padding: 7px 7px;
background-color: darkblue;
width: max-content;
border-radius: 4px;
margin-top: 4px;
font-weight: bolder;
color: white;
cursor: pointer;
`;
const Selectname = styled.div`
margin-top: 5px;
padding: 7px 7px;
width: fit-content;
border-radius: 4px;
cursor: default;
color: darkblue;
:hover {
background-color: #bdbaba3c;
}
`;
const Explorer = ({ parent = [], onParentClick, onNameClick /*expandOnHover = false*/ }) => {
const [newData, setNewData] = useState([]);
useEffect(() => {
setNewData(parent.map((n) => ({ ...n, expand: false })));
}, [parent]);
const handleClickOnParent = (e, data) => {
e.stopPropagation();
if (onParentClick && onParentClick instanceof Function) onParentClick(data);
const clickIdx = newData.findIndex((n) => data.name === n.name);
const clickItem = newData.find((n) => data.name === n.name);
setNewData([...newData.slice(0, clickIdx), { ...clickItem, expand: !clickItem.expand }, ...newData.slice(clickIdx + 1, newData.length)]);
};
const handleClickOnName = (e, data) => {
e.stopPropagation();
if (onNameClick && onNameClick instanceof Function) onNameClick(data);
};
return (
<>
{newData.map((item) => (
<Fragment key={item.name}>
{item.children && item.children.length ? (
<Fragment /*key={index}*/>
<SelectParent /*onMouseOver={() => (expandOnHover ? setExpand(true) : {})}*/ onClick={(e) => handleClickOnParent(e, item)}>
{item.name} <span>{!item.expand ? <IoMdArrowDropright /> : <MdArrowDropDown />} </span>
</SelectParent>
{item.expand ? (
<div style={{ paddingLeft: "1.5rem" }}>
<Explorer parent={item.children} onParentClick={onParentClick} onNameClick={onNameClick} /*expandOnHover={expandOnHover}*/ />
</div>
) : null}
</Fragment>
) : (
<Selectname onClick={(e) => handleClickOnName(e, item)}>{item.name}</Selectname>
)}
</Fragment>
))}
</>
);
};
export default Explorer;
반응형
'react' 카테고리의 다른 글
react agGrid (0) | 2024.06.20 |
---|---|
react createContext, useContext, (0) | 2024.05.17 |
react map key 설정안해주면 eiSettings + - 제대로 동작안했던듯 (0) | 2024.05.14 |
Promise결과를 받아서 useMemo에 저장후 사용하려 하면 에러남, useState로 저장후에 useEffect로 감지하려고 해도 에러남 (0) | 2024.04.08 |
[페이지전환]react-router-dom<Link> window.href.location history.push()... (0) | 2024.03.27 |
table <td rowspan="2"> 2row를, <td colspan="2"> 2column을 차지한다는 얘기
2024. 6. 18. 17:27 [html, css]
반응형
rowspan 사용예제
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">January</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>33</td>
<td>44</td>
</tr>
</table>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan
반응형
'html, css' 카테고리의 다른 글
.popupModal [class="image"] exact css class match
2024. 6. 18. 16:56 [html, css/css selector]
반응형
.popupModal [class="image"] {
text-align: center;
}
반응형
'html, css > css selector' 카테고리의 다른 글
두번째 input부터만적용 input + input { margin-top: 10px; } (0) | 2024.06.20 |
---|---|
.table { td:nth-child(2n+2) {background-color: var(--Light-Gray-BG);}} 테이블 row 짝수마다 색깔 다르게 (0) | 2024.04.19 |
css selector(#id,.class, 자손,>자식), table tag (0) | 2019.04.19 |
Optional chaining (?.)
2024. 6. 18. 12:01 [js/js syntax]
반응형
반응형