Best JavaScript code snippet using ladle
ChallengeWrite.js
Source:ChallengeWrite.js
1import React, { forwardRef } from "react";2import styled from "styled-components";3import { useDispatch, useSelector } from "react-redux";4import { useParams } from "react-router-dom";5// ê¸°ê° ì í ë¼ì´ë¸ë¬ë¦¬6import DatePicker from "react-datepicker";7import "react-datepicker/dist/react-datepicker.css";8import { ko } from "date-fns/esm/locale";9import { actionCreators as challengeAction } from "../redux/modules/challenge";10import { actionCreators as baseAction } from "../redux/modules/base";11import { Grid, Input, Button } from "../elements";12import plus from "../image/icons/btn_number_plus_l@2x.png";13const ChallengeWrite = (props) => {14 const dispatch = useDispatch();15 // ì¶ì² íê·¸ 리ì¤í¸ ê°ì ¸ì¤ê¸°16 const recommendList = useSelector((state) => state.search.recommend);17 console.log(recommendList);18 //ìì / ìì± ì 무 íë³19 const params = useParams();20 const target = useSelector((state) => state.challenge.target);21 console.log(target);22 const isEdit = params.challengeId ? true : false;23 // ì±ë¦°ì§ ìì í루 ì ê¹ì§ ìì ê°ë¥í¨ (ì¤ë ë ì§ë ììì¼ ë¹êµí기)24 // Header ì ì© (ìì /ìì± ë¶ê¸°)25 React.useEffect(() => {26 dispatch(baseAction.setHeader(true, isEdit ? "ìì í기" : "ê°ì¤í기"));27 if (isEdit) {28 //ìì ì´ë©´ í¹ì ì±ë¦°ì§ 1ê° ì¡°íí기 (default value ìí´)29 dispatch(challengeAction.getOneChallengeDB(+params.challengeId));30 // // 기존ì ì
ë ¥í íê·¸ ë³´ì¬ì£¼ê¸°31 // const $HashWrapOuter = document.querySelector(".HashWrapOuter");32 // const $HashWrapInner = document.createElement("span");33 // $HashWrapInner.className = "HashWrapInner";34 // // ìì ë²í¼ ë§ë¤ê¸°35 // const $HashDelete = document.createElement("a");36 // $HashDelete.className = "HashDelete";37 // /* ìì (x íì)를 í´ë¦ ì´ë²¤í¸ ê´ë ¨ ë¡ì§ */38 // $HashDelete.addEventListener("click", () => {39 // $HashWrapOuter?.removeChild($HashWrapInner);40 // console.log($HashWrapInner.innerHTML);41 // setHashArr(hashArr.filter((hashtag) => hashtag));42 // });43 // // ì
ë ¥íë íê·¸ê° ìì ê²½ì°44 // if (hashArr.length > 0) {45 // console.log(hashArr);46 // // hashArr.map((el, idx)=>{47 // // $HashWrapInner.innerHTML = e.target.value;48 // // $HashWrapOuter?.appendChild($HashWrapInner);49 // // $HashDelete.innerHTML = "x";50 // // $HashWrapInner?.appendChild($HashDelete);51 // // return null;52 // // })53 // // $HashWrapInner.innerHTML = e.target.value;54 // // $HashWrapOuter?.appendChild($HashWrapInner);55 // // $HashDelete.innerHTML = "x";56 // // $HashWrapInner?.appendChild($HashDelete);57 // // setHashArr((hashArr) => [...hashArr, hashtag]);58 // // setHashtag("");59 // }60 }61 return () => {62 dispatch(baseAction.setHeader(false, ""));63 };64 }, []);65 const [title, setTitle] = React.useState(isEdit ? target.title : "");66 const [content, setContent] = React.useState(isEdit ? target.content : "");67 const [category, setCategory] = React.useState(isEdit ? target.category : "");68 const [maxMember, setMaxMember] = React.useState(69 isEdit ? target.maxMember : ""70 );71 //ì´ë¯¸ì§ ë¶ë¶72 const [compareImage, setCompareImage] = React.useState(73 isEdit ? target.challengeImage : []74 );75 const [image, setImage] = React.useState([]);76 const [preview, setPreview] = React.useState(77 isEdit ? target.challengeImage : []78 );79 //í´ìíê·¸ ë¶ë¶80 const [hashtag, setHashtag] = React.useState(""); //onChangeë¡ ê´ë¦¬í 문ìì´81 const [hashArr, setHashArr] = React.useState(isEdit ? target.tagName : []); // í´ìíê·¸ ë´ì ë°°ì´82 // ë ì§ ì í ë¶ë¶83 const [startDate, setStartDate] = React.useState();84 const [endDate, setEndDate] = React.useState(null);85 // ë°© ê³µê° ì¬ë¶86 const [checkedInputs, setCheckedInputs] = React.useState(87 isEdit ? (target.isPrivate ? "private" : "public") : null88 );89 const [password, setPassword] = React.useState(isEdit ? target.password : "");90 // ë¹ë°ë°© ì¬ë¶ ì²´í¬ í¨ì91 const changeHandler = (checked, id) => {92 if (checked) {93 setCheckedInputs(id); // checkedê° trueì´ë©´ í´ë¹ idê°ì´ stateì ì ì¥ëë¤.94 } else {95 setCheckedInputs(null);96 }97 };98 // ë ì§ ì í input 커ì¤í
99 const CustomInput = forwardRef(({ value, onClick }, ref) => (100 <InputBox ref={ref}>101 {isEdit ? (102 <Input103 label="기ê°ì ì íí´ì£¼ì¸ì. (ë³ê²½ ë¶ê°)"104 value={`${target.startDate} - ${target.endDate}`}105 height="46px"106 onClick={onClick}107 disabled108 />109 ) : (110 <Input111 label="기ê°ì ì íí´ì£¼ì¸ì. *"112 placeholder="ìµì 2주"113 value={value}114 height="46px"115 onClick={onClick}116 />117 )}118 </InputBox>119 ));120 // íê·¸ ê´ë ¨ í¨ì121 // 1. íê·¸ ì§ì ì
ë ¥ ì122 const onKeyUp = React.useCallback(123 (e) => {124 // if (process.browser) {125 /* ìì ë¶ë¬ì¤ê¸°, ë§ë¤ê¸°*/126 const $HashWrapOuter = document.querySelector(".HashWrapOuter");127 const $HashWrapInner = document.createElement("span");128 $HashWrapInner.className = "HashWrapInner";129 // ìì ë²í¼ ë§ë¤ê¸°130 const $HashDelete = document.createElement("a");131 $HashDelete.className = "HashDelete";132 /* ìì (x íì)를 í´ë¦ ì´ë²¤í¸ ê´ë ¨ ë¡ì§ */133 $HashDelete.addEventListener("click", () => {134 $HashWrapOuter?.removeChild($HashWrapInner);135 console.log($HashWrapInner.innerHTML);136 setHashArr(hashArr.filter((hashtag) => hashtag));137 });138 /* enter í¤ ì½ë :13 */139 if (e.keyCode === 13 && e.target.value.trim() !== "") {140 if (hashArr.length > 10) {141 window.alert("íê·¸ ìì± ê°ì를 íì¸í´ì£¼ì¸ì!");142 }143 console.log("Enter Key ì
ë ¥ë¨!", e.target.value);144 $HashWrapInner.innerHTML = e.target.value;145 $HashWrapOuter?.appendChild($HashWrapInner);146 $HashDelete.innerHTML = "x";147 $HashWrapInner?.appendChild($HashDelete);148 setHashArr((hashArr) => [...hashArr, hashtag]);149 setHashtag("");150 }151 },152 [hashtag, hashArr]153 );154 // 2. ì¶ì² í¤ìë í´ë¦ ì155 const recommendClick = React.useCallback(156 (keyword) => {157 // if (process.browser) {158 /* ìì ë¶ë¬ì¤ê¸°, ë§ë¤ê¸°*/159 if (hashArr.length > 10) {160 window.alert("íê·¸ ìì± ê°ì를 íì¸í´ì£¼ì¸ì!");161 }162 const $HashWrapOuter = document.querySelector(".HashWrapOuter");163 const $HashWrapInner = document.createElement("span");164 $HashWrapInner.className = "HashWrapInner";165 // ìì ë²í¼ ë§ë¤ê¸°166 const $HashDelete = document.createElement("a");167 $HashDelete.className = "HashDelete";168 console.log("ì¶ì² í¤ìë ì
ë ¥!", keyword);169 $HashWrapInner.innerHTML = keyword;170 $HashWrapOuter?.appendChild($HashWrapInner);171 $HashDelete.innerHTML = "x";172 $HashWrapInner?.appendChild($HashDelete);173 setHashArr((hashArr) => [...hashArr, keyword]);174 setHashtag("");175 console.log(hashArr);176 /* ìì (x íì)를 í´ë¦ ì´ë²¤í¸ ê´ë ¨ ë¡ì§ */177 $HashDelete.addEventListener("click", () => {178 console.log(keyword, hashArr);179 $HashWrapOuter?.removeChild($HashWrapInner);180 console.log($HashWrapInner.innerHTML);181 setHashArr(hashArr.filter((hashtag) => hashtag));182 });183 },184 [hashtag, hashArr]185 );186 console.log(hashArr);187 // ì´ë¯¸ì§ ì
ë¡ë ë¶ë¶188 const fileInput = React.useRef();189 const selectFile = (e) => {190 const reader = new FileReader();191 const file = fileInput.current.files[0];192 console.log(file);193 // íì¼ ë´ì©ì ì½ì´ì¨ë¤.194 reader.readAsDataURL(file);195 // ì½ê¸°ê° ëëë©´ ë°ìíë ì´ë²¤í¸ í¸ë¤ë¬.196 reader.onloadend = () => {197 console.log(reader.result); // íì¼ ì»¨í
ì¸ (ë´ì©ë¬¼)198 setPreview([...preview, reader.result]);199 };200 if (file) {201 setImage([...image, file]);202 }203 };204 const deleteImage = (index) => {205 const imageArr = image.filter((el, idx) => idx !== index);206 const previewArr = preview.filter((el, idx) => idx !== index);207 setImage([...imageArr]);208 setPreview([...previewArr]);209 if (isEdit) {210 const compareArr = compareImage.filter((el, idx) => idx !== index);211 setCompareImage([...compareArr]);212 }213 };214 // ì¸ì¦ ê²ìê¸ ì¶ê°í기215 const addChallenge = () => {216 if (content === "") {217 window.alert("ë´ì©ì ì
ë ¥í´ì£¼ì¸ì!");218 return;219 }220 if (+maxMember > 30) {221 window.alert("30ëª
ì´íë¡ ë±ë¡í´ì£¼ì¸ì!");222 return;223 } else if (+maxMember === 0 || maxMember === "") {224 window.alert("ëª¨ì§ ì¸ì ì를 ì
ë ¥í´ì£¼ì¸ì!");225 return;226 }227 // ìë²ì ë³´ë´ê¸° ìí ìì
228 // í¼ë°ì´í° ìì±229 let formData = new FormData();230 // ë ì§ íì ë§ì¶°ì£¼ë í¨ì231 function dateFormat(date) {232 let month = date.getMonth() + 1;233 let day = date.getDate();234 let hour = date.getHours();235 let minute = date.getMinutes();236 let second = date.getSeconds();237 month = month >= 10 ? month : "0" + month;238 day = day >= 10 ? day : "0" + day;239 hour = hour >= 10 ? hour : "0" + hour;240 minute = minute >= 10 ? minute : "0" + minute;241 second = second >= 10 ? second : "0" + second;242 return (243 date.getFullYear() +244 "." +245 month +246 "." +247 day +248 " " +249 hour +250 ":" +251 minute +252 ":" +253 second254 );255 }256 console.log(dateFormat(startDate));257 // ë³´ë¼ ë°ì´í° 묶ì (ì´ë¯¸ì§ ì ì¸)258 const data = {259 title: title,260 content: content,261 category: category,262 maxMember: parseInt(maxMember),263 startDate: dateFormat(startDate),264 endDate: dateFormat(endDate),265 isPrivate: checkedInputs === "private" ? true : false,266 password: checkedInputs === "private" ? password : null,267 tagName: hashArr,268 };269 for (let i = 0; i < image.length; i++) {270 formData.append("challengeImage", image[i]);271 }272 formData.append(273 "challenge",274 new Blob([JSON.stringify(data)], { type: "application/json" })275 );276 for (let value of formData.values()) {277 console.log(value);278 }279 // í¼ë°ì´í°ì ì´ë¯¸ì§ì ë°ì´í° 묶ì´ì ë³´ë´ê¸°280 console.log(image);281 // formData apië íµì íë ë¶ë¶ì¼ë¡ dispatch í기(apisìì 미리 ì¤ì í´ë )282 dispatch(challengeAction.addChallengeDB(formData));283 };284 // ì¸ì¦ ê²ìê¸ ìì í기285 const editChallenge = () => {286 if (content === "") {287 window.alert("ë´ì©ì ì
ë ¥í´ì£¼ì¸ì!");288 return;289 }290 // ìë²ì ë³´ë´ê¸° ìí ìì
291 // í¼ë°ì´í° ìì±292 let formData = new FormData();293 // ë³´ë¼ ë°ì´í° 묶ì (ì´ë¯¸ì§ ì ì¸)294 const data = {295 image: compareImage,296 title: title,297 content: content,298 category: category,299 tagName: hashArr,300 };301 // í¼ë°ì´í°ì ì´ë¯¸ì§ì ë°ì´í° 묶ì´ì ë³´ë´ê¸°302 for (let i = 0; i < image.length; i++) {303 formData.append("challengeImage", image[i]);304 }305 // formData.append("challenge", data, { type: "application/json" });306 formData.append(307 "challenge",308 new Blob([JSON.stringify(data)], { type: "application/json" })309 );310 // formData apië íµì íë ë¶ë¶ì¼ë¡ dispatch í기(apisìì 미리 ì¤ì í´ë )311 dispatch(challengeAction.editChallengeDB(+params.challengeId, formData));312 };313 return (314 <Grid margin="78px 0px 0px" padding="0px" bg="#eeeeee">315 <InputContainer>316 <label317 htmlFor="select"318 style={{ fontSize: "14px", color: "#000", margin: 0 }}319 >320 ì´ë¤ 주ì ë¡ ì§ííëì? *321 </label>322 <div>323 <Select324 name="evaluation"325 onChange={(e) => {326 setCategory(e.target.value);327 }}328 value={category}329 >330 <option value="">ì¹´í
ê³ ë¦¬ ì í</option>331 <option value="ì¼ì 루í´">ì¼ì 루í´</option>332 <option value="ì´ë">ì´ë</option>333 <option value="ì¤í°ë">ì¤í°ë</option>334 <option value="ììµê´">ììµê´</option>335 <option value="íë§">íë§</option>336 <option value="취미">취미</option>337 <option value="ì
íì¼ì´">ì
íì¼ì´</option>338 <option value="í«">í«</option>339 <option value="ì¹íê²½">ì¹íê²½</option>340 </Select>341 <Input342 label="í¨ê» ì¤ì²í ìµê´ì ì ì´ì£¼ì¸ì. *"343 subLabel="ìëë°©ìê² ë¶ì¾ê°ì ì¤ ì ìë ë¨ì´ë ì¬ì©íì§ ììµëë¤."344 placeholder="ì) í루ì íë² ë¬¼ë§ì기"345 maxLength="20"346 value={title}347 _onChange={(e) => setTitle(e.target.value)}348 height="46px"349 />350 <CountBox>({title.length}/20)</CountBox>351 </div>352 <InputBox>353 <Input354 label="ì±ë¦°ì§ì ê´í ë´ì©ì ì
ë ¥í´ì£¼ì¸ì. *"355 placeholder="ì¤ëª
, ì¸ì¦ ë°©ë², ê·ì¹ ë±ì ìì ë¡ê² ì ìµëë¤."356 textarea357 maxLength="1000"358 value={content}359 _onChange={(e) => setContent(e.target.value)}360 padding="14px 35px 13px 10px"361 />362 <CountBox>({content.length}/1000)</CountBox>363 </InputBox>364 {/* íê·¸ ë¶ë¶ */}365 <InputBox>366 <p style={{ fontSize: "14px", margin: "0px 0px 10px" }}>367 í그를 ìì±í´ì£¼ì¸ì.{" "}368 <span style={{ color: "#797979" }}>(ìµë 10ê°)</span>369 </p>370 {/* íê·¸ ì
ë ¥ ë¶ë¶ */}371 <HashWrap className="HashWrap">372 {/* ëì ì¼ë¡ ìì±ëë í그를 ë´ì div */}373 <span className="HashWrapOuter"></span>374 <input375 className="HashInput"376 placeholder={377 hashArr.length > 0378 ? ""379 : "ì±ë¦°ì§ë¥¼ ì¤ëª
í ì ìë ë¨ì´ë¥¼ ì ìµëë¤."380 }381 value={hashtag}382 onChange={(e) => setHashtag(e.target.value)}383 onKeyUp={onKeyUp}384 maxLength="6"385 />386 </HashWrap>387 {/* ì¶ì²í¤ìë ë¶ë¶ */}388 <Grid margin="14px 0px" padding="0px">389 <span390 style={{391 fontSize: "13px",392 color: "#383838",393 marginRight: "10px",394 }}395 >396 ì¶ì²í¤ìë397 </span>398 {recommendList.map((el, idx) => {399 return (400 <HashButton401 key={idx}402 onClick={() => {403 recommendClick(el);404 }}405 disabled={hashArr.includes(el)}406 >407 {el}408 </HashButton>409 );410 })}411 </Grid>412 </InputBox>413 </InputContainer>414 {/* ê¸°ê° ì í ë¶ë¶ */}415 <InputContainer>416 <DatePicker417 locale={ko} // ë¬ë ¥ íê¸í418 dateFormat="yyyy.MM.dd" // ë ì§íì419 showPopperArrow={false} // popover íì´í ìì 기420 fixedHeight // ê³ ì ë heightìì ë¨ì ê³µê°ì ë¤ì ë¬ë¡ ì±ìì§ê¸°421 selected={startDate} // ë ì§ state422 startDate={startDate}423 endDate={endDate}424 selectsRange425 minDate={new Date()} // 과거 ë ì§ disable426 // inline427 // excludeDateIntervals={[428 // { start: subDays(startDate, 0), end: addDays(startDate, 14) },429 // ]}430 onChange={(dates) => {431 const [start, end] = dates;432 let range = (end - start) / (1000 * 60 * 60 * 24);433 if (end && range < 14) {434 window.alert("2주 ì´ì ì íí´ì£¼ì¸ì!");435 setStartDate("");436 } else {437 setStartDate(start);438 setEndDate(end);439 }440 }}441 customInput={<CustomInput />}442 />443 {/* ì¸ìì ì í ë¶ë¶ */}444 <InputBox>445 {isEdit ? (446 <Input447 label="ì¸ìì를 ì íí´ì£¼ì¸ì. (ë³ê²½ ë¶ê°)"448 placeholder="ìµë 30ëª
"449 value={maxMember}450 _onChange={(e) => setMaxMember(e.target.value)}451 height="46px"452 disabled453 />454 ) : (455 <Input456 label="ì¸ìì를 ì íí´ì£¼ì¸ì. *"457 placeholder="ìµë 30ëª
"458 value={maxMember}459 _onChange={(e) => {460 setMaxMember(e.target.value);461 }}462 height="46px"463 />464 )}465 </InputBox>466 {/* ì´ë¯¸ì§ ì
ë¡ë ë¶ë¶ */}467 <InputBox>468 <p style={{ fontSize: "14px", margin: "0px" }}>469 ì¬ì§ì 첨ë¶í´ì£¼ì¸ì.{" "}470 <span style={{ color: "#797979" }}>(ìµë 3ê±´)</span>471 </p>472 <p style={{ fontSize: "12px", margin: "0px", color: "#808080" }}>473 첫ë²ì§¸ ì´ë¯¸ì§ê° ëí ì´ë¯¸ì§ë¡ ë±ë¡ë©ëë¤.474 </p>475 <div476 sytle={{477 display: "flex",478 whiteSpace: "nowrap",479 overflowX: "scroll",480 }}481 >482 {preview.map((el, idx) => {483 return (484 <div485 key={idx}486 style={{487 padding: "0px",488 width: "auto",489 display: "inline-block",490 position: "relative",491 }}492 >493 <img494 src={495 preview[idx]496 ? preview[idx]497 : "https://png.pngtree.com/element_our/20190601/ourlarge/pngtree-plus-icon-image_1338383.jpg"498 }499 style={{500 width: "74px",501 height: "74px",502 margin: "17px 8px 0px 0px",503 }}504 />505 <span506 onClick={() => deleteImage(idx)}507 style={{508 position: "absolute",509 top: "12px",510 right: "12px",511 cursor: "pointer",512 }} // absoluteë¡ í기513 >514 x515 </span>516 </div>517 );518 })}519 {preview.length < 3 && (520 <ImageLabel521 className="input-file-button"522 htmlFor="input-file"523 style={{524 width: "74px",525 height: "74px",526 margin: "17px 8px 0px 0px",527 display: "inline-block",528 position: "relative",529 border: "solid 1px #808080",530 verticalAlign: "top", // ìµìë¨ì ì ë ¬ ë§ì¶ê¸°531 textAlign: "center", //ì´ë¯¸ì§ ê°ì´ë°532 }}533 >534 <img535 src={plus}536 style={{537 width: "18px",538 margin: "27px 0px 0px",539 }}540 ></img>541 </ImageLabel>542 )}543 </div>544 <input545 id="input-file"546 type="file"547 onChange={selectFile}548 ref={fileInput}549 // disabled={is_uploading}550 // multiple // ë¤ì¤ ì
ë¡ë ê°ë¥551 accept="image/*" // ì´ë¯¸ì§ì í´ë¹íë 모ë íì¼ íì© (JPG,JPEG,GIF,PNG ì í?)552 style={{ display: "none" }}553 />554 </InputBox>555 {/* ë¹ë°ë°© ì¬ë¶ */}556 <InputBox>557 {isEdit ? (558 <Grid is_flex padding="0px">559 <p>ë°© ê³µê° ì¬ë¶</p>560 <Grid is_flex width="auto">561 <Grid width="auto">562 <input563 type="checkbox"564 id="public"565 checked={checkedInputs === "public" ? true : false}566 disabled567 />568 <label htmlFor="public">ê³µê°</label>569 </Grid>570 <Grid width="auto">571 <input572 type="checkbox"573 id="private"574 checked={checkedInputs === "private" ? true : false}575 disabled576 />577 <label htmlFor="private">ë¹ë°</label>578 </Grid>579 </Grid>580 </Grid>581 ) : (582 <Grid is_flex padding="0px">583 <p>ë°© ê³µê° ì¬ë¶</p>584 <Grid is_flex width="auto">585 <Grid width="auto">586 <input587 type="checkbox"588 id="public"589 onChange={(e) => {590 changeHandler(e.currentTarget.checked, "public");591 console.log(e.currentTarget.checked);592 }}593 checked={checkedInputs === "public" ? true : false}594 />595 <label htmlFor="public">ê³µê°</label>596 </Grid>597 <Grid width="auto">598 <input599 type="checkbox"600 id="private"601 onChange={(e) => {602 changeHandler(e.currentTarget.checked, "private");603 console.log(e.currentTarget.checked);604 }}605 checked={checkedInputs === "private" ? true : false}606 />607 <label htmlFor="private">ë¹ë°</label>608 </Grid>609 </Grid>610 </Grid>611 )}612 <InputBox>613 {checkedInputs === "private" &&614 (isEdit ? (615 <Input616 // type="password"617 label="ë¹ë°ë²í¸ ì¤ì (ë³ê²½ ë¶ê°)"618 placeholder="ë¹ë°ë²í¸ë¥¼ ì
ë ¥í´ì£¼ì¸ì."619 value={password}620 _onChange={(e) => setPassword(e.target.value)}621 height="46px"622 margin="0px 0px 20px"623 disabled624 />625 ) : (626 <Input627 // type="password"628 label="ë¹ë°ë²í¸ ì¤ì "629 placeholder="ë¹ë°ë²í¸ë¥¼ ì
ë ¥í´ì£¼ì¸ì.(ì«ì 4ì리)"630 value={password}631 _onChange={(e) => setPassword(e.target.value)}632 height="46px"633 margin="0px 0px 20px"634 maxLength="4"635 />636 ))}637 </InputBox>638 </InputBox>639 </InputContainer>640 <ButtonContainer>641 {isEdit ? (642 <Button _onClick={editChallenge}>ìì í기</Button>643 ) : (644 <Button _onClick={addChallenge}>ë±ë¡í기</Button>645 )}646 </ButtonContainer>647 </Grid>648 );649};650const InputContainer = styled.div`651 background-color: #ffffff;652 padding: 0px 20px 20px;653 margin: 0px 0px 22px 0px;654`;655const ButtonContainer = styled.div`656 background-color: #ffffff;657 padding: 20px;658`;659const Select = styled.select`660 width: 335px;661 height: 46px;662 margin: 10px 20px 28px 0px;663 padding: 13px 10px;664 border: solid 1px #999;665 font-family: inherit;666 color: #808080;667 &:focus {668 outline: none;669 border: 1px solid #000;670 color: #000;671 }672 /* ë°©í¥ íì´í ìì 기 + íì´í 모ì ë°ê¾¸ê¸° */673 /* -webkit-appearance: none; 674 -moz-appearance: none;675 appearance: none;676 background: url("../image/icons/ic_dropdown@2x.png") no-repeat right 9px677 center; */678`;679const InputBox = styled.div`680 margin-top: 20px;681`;682const CountBox = styled.p`683 width: 100%;684 height: 19px;685 margin-top: 4px;686 font-size: 13px;687 text-align: right;688 color: #808080;689`;690const ImageLabel = styled.label`691 /* border: 1px solid #c0c0c0;692 border-radius: 5px;693 font-weight: 900; */694 cursor: pointer;695`;696/* emotion css íê·¸ */697const HashWrap = styled.div`698 height: 46px;699 color: rgb(52, 58, 64);700 font-size: 1.125rem;701 display: flex;702 flex-wrap: nowrap;703 letter-spacing: -0.6px;704 border: solid 1px #999;705 /* padding: 2px 2px 8px 2px; */706 // ìì±ë íê·¸ ë°ì¤ span íê·¸ css707 .HashWrapOuter {708 display: inline-block;709 vertical-align: top;710 white-space: nowrap;711 padding-left: 10px;712 margin-top: 5px;713 }714 // ìì±ë íê·¸ ë´ì©ë¬¼ span íê·¸ css715 .HashWrapInner {716 height: 22px;717 background: #ededed;718 opacity: 0.9;719 border-radius: 5px;720 margin: 5px 5px 0px 0px;721 padding: 2px 4px;722 align-items: center;723 font-weight: normal;724 font-stretch: normal;725 font-style: normal;726 font-size: 12px;727 text-align: center;728 color: #7b7b7b;729 }730 //ìì±ë íê·¸ ìì íì css731 .HashDelete {732 margin: 0px 3px 2px 4px;733 color: #000000 !important;734 font-family: inherit;735 font-weight: 700;736 cursor: pointer;737 }738 // íê·¸ ìì± input739 .HashInput {740 width: 100%;741 display: inline-block;742 vertical-align: top;743 outline: none;744 cursor: text;745 line-height: 2rem;746 /* min-width: 8rem; */747 border: none;748 font-family: inherit;749 }750`;751// ì¶ì²í¤ìë ë²í¼752const HashButton = styled.button`753 background: #ededed;754 color: #7b7b7b;755 height: 22px;756 ${(props) => (props.disabled ? `opacity: 0.5;` : `opacity: 0.9;`)};757 border-radius: 5px;758 border: none;759 margin: 5px 5px 0px 6px;760 padding: 2px 4px;761 align-items: center;762 font-weight: normal;763 font-family: inherit;764 font-size: 12px;765 text-align: center;766`;...
mapDelete.js
Source:mapDelete.js
...13 */14function mapDelete(key) {15 var data = this.__data__;16 if (isKeyable(key)) {17 return hashDelete(typeof key == 'string' ? data.string : data.hash, key);18 }19 return Map ? data.map['delete'](key) : assocDelete(data.map, key);20}...
Using AI Code Generation
1var ladle = require('ladle');2var hashDelete = ladle.hashDelete;3var hashGet = ladle.hashGet;4var hashSet = ladle.hashSet;5var hashExists = ladle.hashExists;6var hashKeys = ladle.hashKeys;7var hashValues = ladle.hashValues;8var hashLength = ladle.hashLength;9var key = 'key1';10var field = 'field1';11var value = 'value1';12var hash = 'hash1';13hashSet(key, field, value, hash, function(err, result) {14 if (err) {15 console.log('Error: ' + err);16 }17 else {18 console.log('Result: ' + result);19 }20});21hashDelete(key, field, hash, function(err, result) {22 if (err) {23 console.log('Error: ' + err);24 }25 else {26 console.log('Result: ' + result);27 }28});29hashExists(key, field, hash, function(err, result) {30 if (err) {31 console.log('Error: ' + err);32 }33 else {34 console.log('Result: ' + result);35 }36});37hashGet(key, field, hash, function(err, result) {38 if (err) {39 console.log('Error: ' + err);40 }41 else {42 console.log('Result: ' + result);43 }44});45hashKeys(key, hash, function(err, result) {46 if (err) {47 console.log('Error: ' + err);48 }49 else {50 console.log('Result: ' + result);51 }52});53hashValues(key, hash, function(err, result) {54 if (err) {55 console.log('Error: ' + err);56 }57 else {58 console.log('Result: ' + result);59 }60});61hashLength(key, hash, function(err, result) {62 if (err) {63 console.log('Error: ' + err);64 }65 else {66 console.log('Result: ' + result);67 }68});69Copyright (c) 2013-2014, Saurabh Chawla
Using AI Code Generation
1var ladle = require('ladle');2var hashDelete = ladle.hashDelete;3var hashKey = 'hashKey';4var hashField = 'hashField';5hashDelete(hashKey, hashField, function(err, response){6 if(err){7 console.log(err);8 }9 else{10 console.log(response);11 }12});13var ladle = require('ladle');14var hashExists = ladle.hashExists;15var hashKey = 'hashKey';16var hashField = 'hashField';17hashExists(hashKey, hashField, function(err, response){18 if(err){19 console.log(err);20 }21 else{22 console.log(response);23 }24});25var ladle = require('ladle');26var hashGet = ladle.hashGet;27var hashKey = 'hashKey';28var hashField = 'hashField';29hashGet(hashKey, hashField, function(err, response){30 if(err){31 console.log(err);32 }33 else{34 console.log(response);35 }36});37var ladle = require('ladle');38var hashGetAll = ladle.hashGetAll;39var hashKey = 'hashKey';40hashGetAll(hashKey, function(err, response){41 if(err){42 console.log(err);43 }44 else{45 console.log(response);46 }47});48var ladle = require('ladle');49var hashGetAllFields = ladle.hashGetAllFields;50var hashKey = 'hashKey';51hashGetAllFields(hashKey, function(err, response){52 if(err){53 console.log(err);54 }55 else{56 console.log(response);57 }58});
Using AI Code Generation
1var ladle = require('ladle');2var hashDelete = ladle.hashDelete;3hashDelete('hashKey', 'fieldKey', function(err, result) {4});5var ladle = require('ladle');6var hashDelete = ladle.hashDelete;7hashDelete('hashKey', 'fieldKey', function(err, result) {8});9var ladle = require('ladle');10var hashDelete = ladle.hashDelete;11hashDelete('hashKey', 'fieldKey', function(err, result) {12});13var ladle = require('ladle');14var hashDelete = ladle.hashDelete;15hashDelete('hashKey', 'fieldKey', function(err, result) {16});17var ladle = require('ladle');18var hashDelete = ladle.hashDelete;19hashDelete('hashKey', 'fieldKey', function(err, result) {20});21var ladle = require('ladle');22var hashDelete = ladle.hashDelete;23hashDelete('hashKey', 'fieldKey', function(err, result) {24});25var ladle = require('ladle');26var hashDelete = ladle.hashDelete;27hashDelete('hashKey', 'fieldKey', function(err, result) {28});29var ladle = require('ladle');30var hashDelete = ladle.hashDelete;31hashDelete('hashKey', 'fieldKey', function(err, result) {32});33var ladle = require('ladle');34var hashDelete = ladle.hashDelete;35hashDelete('hashKey', 'field
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!