How to use setFieldValue method in storybook-root

Best JavaScript code snippet using storybook-root

ProfRecordFormComponents.js

Source:ProfRecordFormComponents.js Github

copy

Full Screen

...13 const showDatePicker = () => setDatePickerVisibility(true);14 const hideDatePicker = () => setDatePickerVisibility(false);15 const handleConfirm = (date) => {16 hideDatePicker();17 setFieldValue("date", moment(date).format("YYYY-MM-DD HH:mm"), false);18 };19 return (20 <View>21 <Text style={FormItemStyle.questionText}>請輸入日期時間</Text>22 <View>23 <TouchableOpacity onPress={showDatePicker} style={FormItemStyle.answerContainer}>24 <View style={FormItemStyle.dropDownButton}>25 <Image source={DropDown} />26 </View>27 <Text style={FormItemStyle.answerText}>{moment(values).format("YYYY-MM-DD HH:mm")}</Text>28 </TouchableOpacity>29 </View>30 <DateTimePickerModal isVisible={isDatePickerVisible} mode="datetime" onConfirm={handleConfirm} onCancel={hideDatePicker} date={moment(values).toDate()} maximumDate={new Date()} />31 </View>32 );33};34export const ExpiryDateInput = (props) => {35 const { values, setFieldValue } = props;36 const [isDatePickerVisible, setDatePickerVisibility] = useState(false);37 const showDatePicker = () => setDatePickerVisibility(true);38 const hideDatePicker = () => setDatePickerVisibility(false);39 const handleConfirm = (date) => {40 hideDatePicker();41 setFieldValue("Con_expiry_date", moment(date).format("YYYY-MM-DD"), false);42 };43 return (44 <View style={{ alignSelf: "flex-start" }}>45 <Text style={FormItemStyle.questionText}>請輸入到期日</Text>46 <View>47 <TouchableOpacity onPress={showDatePicker} style={FormItemStyle.answerContainer}>48 <View style={FormItemStyle.dropDownButton}>49 <Image source={DropDown} />50 </View>51 <Text style={FormItemStyle.answerText}>{moment(values).format("YYYY-MM-DD")}</Text>52 </TouchableOpacity>53 </View>54 <DateTimePickerModal isVisible={isDatePickerVisible} mode="date" onConfirm={handleConfirm} onCancel={hideDatePicker} date={moment(values).toDate()} minimumDate={new Date()} />55 </View>56 );57};58export const RenderNormal = (props) => {59 const { setFieldValue, error_L_SPH, error_R_SPH, error_L_CYL, error_R_CYL, error_L_Axis, error_R_Axis, error_L_PRISM, error_R_PRISM } = props;60 return (61 <>62 <SPHInput setFieldValue={setFieldValue} isLeft={false} mode="normal" />63 {error_R_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_R_SPH}</Text>}64 <CYLInput setFieldValue={setFieldValue} isLeft={false} mode="normal" error_CYL={error_R_CYL} error_Axis={error_R_Axis} />65 <PRISMInput setFieldValue={setFieldValue} isLeft={false} mode="normal" error_PRISM={error_R_PRISM} />66 <ADDInput setFieldValue={setFieldValue} isLeft={false} mode="normal" />67 <SPHInput setFieldValue={setFieldValue} isLeft={true} mode="normal" />68 {error_L_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_L_SPH}</Text>}69 <CYLInput setFieldValue={setFieldValue} isLeft={true} mode="normal" error_CYL={error_L_CYL} error_Axis={error_L_Axis} />70 <PRISMInput setFieldValue={setFieldValue} isLeft={true} mode="normal" error_PRISM={error_L_PRISM} />71 <ADDInput setFieldValue={setFieldValue} isLeft={true} mode="normal" />72 </>73 );74};75export const RenderCollapseAdj = (props) => {76 const { setFieldValue, error_L_SPH, error_R_SPH, error_L_CYL, error_R_CYL, error_L_Axis, error_R_Axis, error_L_PRISM, error_R_PRISM } = props;77 const [isCollapse, toggleisCollapse] = useState(false);78 return (79 <View>80 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>81 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入調整度數</Text>82 </TouchableOpacity>83 <Collapsible collapsed={isCollapse}>84 <View style={FormItemStyle.collpaseContainer}>85 <SPHInput setFieldValue={setFieldValue} isLeft={false} mode="adj" />86 {error_R_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_R_SPH}</Text>}87 <CYLInput setFieldValue={setFieldValue} isLeft={false} mode="adj" error_CYL={error_R_CYL} error_Axis={error_R_Axis} />88 <PRISMInput setFieldValue={setFieldValue} isLeft={false} mode="adj" error_PRISM={error_R_PRISM} />89 <ADDInput setFieldValue={setFieldValue} isLeft={false} mode="adj" />90 <SPHInput setFieldValue={setFieldValue} isLeft={true} mode="adj" />91 {error_L_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_L_SPH}</Text>}92 <CYLInput setFieldValue={setFieldValue} isLeft={true} mode="adj" error_CYL={error_L_CYL} error_Axis={error_L_Axis} />93 <PRISMInput setFieldValue={setFieldValue} isLeft={true} mode="adj" error_PRISM={error_L_PRISM} />94 <ADDInput setFieldValue={setFieldValue} isLeft={true} mode="adj" />95 </View>96 </Collapsible>97 </View>98 );99};100export const RenderCollapsePD = (props) => {101 const { handleChange, error_L_PD, error_R_PD } = props;102 const [isCollapse, toggleisCollapse] = useState(false);103 return (104 <View>105 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>106 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入瞳孔距離(PD)</Text>107 </TouchableOpacity>108 <Collapsible collapsed={isCollapse}>109 <View style={FormItemStyle.collpaseContainer}>110 <PDInput handleChange={handleChange} isLeft={false} error={error_R_PD} />111 <PDInput handleChange={handleChange} isLeft={true} error={error_L_PD} />112 </View>113 </Collapsible>114 </View>115 );116};117export const RenderCollapseVA = (props) => {118 const { setFieldValue, error_L_VA, error_R_VA } = props;119 const [isCollapse, toggleisCollapse] = useState(false);120 return (121 <View>122 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>123 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入視力(VA) (6/6)</Text>124 </TouchableOpacity>125 <Collapsible collapsed={isCollapse}>126 <View style={FormItemStyle.collpaseContainer}>127 <VAInput setFieldValue={setFieldValue} isLeft={false} error={error_R_VA} />128 <VAInput setFieldValue={setFieldValue} isLeft={true} error={error_L_VA} />129 <Text style={FormItemStyle.questionText}>請輸入雙眼視力(VA) (6/6)</Text>130 <TextInput onChangeText={(value) => setFieldValue("VA", value)} keyboardType="default" style={FormItemStyle.answerInputBox} />131 </View>132 </Collapsible>133 </View>134 );135};136export const RenderCollapseCon = (props) => {137 const { values, handleChange, setFieldValue, error_L_SPH, error_R_SPH, error_L_CYL, error_R_CYL, error_L_Axis, error_R_Axis } = props;138 const [isCollapse, toggleisCollapse] = useState(true);139 return (140 <View>141 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>142 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入隱形眼鏡度數</Text>143 </TouchableOpacity>144 <Collapsible collapsed={isCollapse}>145 <View style={FormItemStyle.collpaseContainer}>146 <BrandInput handleChange={handleChange} />147 <SPHInput setFieldValue={setFieldValue} isLeft={false} mode="con" />148 {error_R_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_R_SPH}</Text>}149 <CYLInput setFieldValue={setFieldValue} isLeft={false} mode="con" error_CYL={error_R_CYL} error_Axis={error_R_Axis} />150 <BCInput setFieldValue={setFieldValue} isLeft={false} />151 <DiaInput setFieldValue={setFieldValue} isLeft={false} />152 <SPHInput setFieldValue={setFieldValue} isLeft={true} mode="con" />153 {error_L_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_L_SPH}</Text>}154 <CYLInput setFieldValue={setFieldValue} isLeft={true} mode="con" error_CYL={error_L_CYL} error_Axis={error_L_Axis} />155 <BCInput setFieldValue={setFieldValue} isLeft={true} />156 <DiaInput setFieldValue={setFieldValue} isLeft={true} />157 </View>158 </Collapsible>159 </View>160 );161};162export const RenderCollapseFar = (props) => {163 const { setFieldValue, error_L_SPH, error_R_SPH, error_L_CYL, error_R_CYL, error_L_Axis, error_R_Axis, error_L_PRISM, error_R_PRISM } = props;164 const [isCollapse, toggleisCollapse] = useState(true);165 return (166 <View>167 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>168 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入遠距度數</Text>169 </TouchableOpacity>170 <Collapsible collapsed={isCollapse}>171 <View style={FormItemStyle.collpaseContainer}>172 <SPHInput setFieldValue={setFieldValue} isLeft={false} mode="far" />173 {error_R_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_R_SPH}</Text>}174 <CYLInput setFieldValue={setFieldValue} isLeft={false} mode="far" error_CYL={error_R_CYL} error_Axis={error_R_Axis} />175 <PRISMInput setFieldValue={setFieldValue} isLeft={false} mode="far" error_PRISM={error_R_PRISM} />176 <ADDInput setFieldValue={setFieldValue} isLeft={false} mode="far" />177 <SPHInput setFieldValue={setFieldValue} isLeft={true} mode="far" />178 {error_L_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_L_SPH}</Text>}179 <CYLInput setFieldValue={setFieldValue} isLeft={true} mode="far" error_CYL={error_L_CYL} error_Axis={error_L_Axis} />180 <PRISMInput setFieldValue={setFieldValue} isLeft={true} mode="far" error_PRISM={error_L_PRISM} />181 <ADDInput setFieldValue={setFieldValue} isLeft={true} mode="far" />182 </View>183 </Collapsible>184 </View>185 );186};187export const RenderCollapseMid = (props) => {188 const { setFieldValue, error_L_SPH, error_R_SPH, error_L_CYL, error_R_CYL, error_L_Axis, error_R_Axis, error_L_PRISM, error_R_PRISM } = props;189 const [isCollapse, toggleisCollapse] = useState(true);190 return (191 <View>192 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>193 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入中距工作度數</Text>194 </TouchableOpacity>195 <Collapsible collapsed={isCollapse}>196 <View style={FormItemStyle.collpaseContainer}>197 <DistanceInput setFieldValue={setFieldValue} mode="mid" />198 <SPHInput setFieldValue={setFieldValue} isLeft={false} mode="mid" />199 {error_R_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_R_SPH}</Text>}200 <CYLInput setFieldValue={setFieldValue} isLeft={false} mode="mid" error_CYL={error_R_CYL} error_Axis={error_R_Axis} />201 <PRISMInput setFieldValue={setFieldValue} isLeft={false} mode="mid" error_PRISM={error_R_PRISM} />202 <ADDInput setFieldValue={setFieldValue} isLeft={false} mode="mid" />203 <SPHInput setFieldValue={setFieldValue} isLeft={true} mode="mid" />204 {error_L_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_L_SPH}</Text>}205 <CYLInput setFieldValue={setFieldValue} isLeft={true} mode="mid" error_CYL={error_L_CYL} error_Axis={error_L_Axis} />206 <PRISMInput setFieldValue={setFieldValue} isLeft={true} mode="mid" error_PRISM={error_L_PRISM} />207 <ADDInput setFieldValue={setFieldValue} isLeft={true} mode="mid" />208 </View>209 </Collapsible>210 </View>211 );212};213export const RenderCollapseNear = (props) => {214 const { setFieldValue, error_L_SPH, error_R_SPH, error_L_CYL, error_R_CYL, error_L_Axis, error_R_Axis, error_L_PRISM, error_R_PRISM } = props;215 const [isCollapse, toggleisCollapse] = useState(true);216 return (217 <View>218 <TouchableOpacity onPress={() => toggleisCollapse(!isCollapse)} style={FormItemStyle.collapseButton}>219 <Text style={FormItemStyle.collapseTitle}>{isCollapse ? "展開" : "收起"}輸入近距度數</Text>220 </TouchableOpacity>221 <Collapsible collapsed={isCollapse}>222 <View style={FormItemStyle.collpaseContainer}>223 <DistanceInput setFieldValue={setFieldValue} mode="near" />224 <SPHInput setFieldValue={setFieldValue} isLeft={false} mode="near" />225 {error_R_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_R_SPH}</Text>}226 <CYLInput setFieldValue={setFieldValue} isLeft={false} mode="near" error_CYL={error_R_CYL} error_Axis={error_R_Axis} />227 <PRISMInput setFieldValue={setFieldValue} isLeft={false} mode="near" error_PRISM={error_R_PRISM} />228 <ADDInput setFieldValue={setFieldValue} isLeft={false} mode="near" />229 <SPHInput setFieldValue={setFieldValue} isLeft={true} mode="near" />230 {error_L_SPH != undefined && <Text style={FormItemStyle.errortext}>{error_L_SPH}</Text>}231 <CYLInput setFieldValue={setFieldValue} isLeft={true} mode="near" error_CYL={error_L_CYL} error_Axis={error_L_Axis} />232 <PRISMInput setFieldValue={setFieldValue} isLeft={true} mode="near" error_PRISM={error_L_PRISM} />233 <ADDInput setFieldValue={setFieldValue} isLeft={true} mode="near" />234 </View>235 </Collapsible>236 </View>237 );238};239export const DistanceInput = (props) => {240 const { setFieldValue, mode } = props;241 const TextinputHandler = (value) => {242 switch (mode) {243 case "mid":244 setFieldValue("Mid_dist", value);245 break;246 case "near":247 setFieldValue("Near_dist", value);248 break;249 }250 };251 return (252 <View>253 <Text style={FormItemStyle.questionText}>請輸入量度距離(厘米)</Text>254 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />255 </View>256 );257};258export const BrandInput = (props) => {259 const { handleChange } = props;260 return (261 <View>262 <Text style={FormItemStyle.questionText}>隱形眼鏡品牌</Text>263 <TextInput onChangeText={handleChange("Con_brand")} multiline={true} style={FormItemStyle.remarksInputBox} />264 </View>265 );266};267export const BCInput = (props) => {268 const { setFieldValue, isLeft } = props;269 const TextinputHandler = (value) => {270 setFieldValue(isLeft ? "Con_L_BC" : "Con_R_BC", value);271 };272 return (273 <View style={{ alignSelf: "center" }}>274 <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}隱形眼鏡弧度(BC)</Text>275 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />276 </View>277 );278};279export const DiaInput = (props) => {280 const { setFieldValue, isLeft } = props;281 const TextinputHandler = (value) => {282 setFieldValue(isLeft ? "Con_L_Dia" : "Con_R_Dia", value);283 };284 return (285 <View style={{ alignSelf: "center" }}>286 <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}隱形眼鏡直徑(DIA)</Text>287 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />288 </View>289 );290};291export const PRISMInput = (props) => {292 const { setFieldValue, isLeft, mode, error_PRISM } = props;293 const [symbol, Togglesymbol] = useState("BI"); //values: BI,BO,BU,BD294 const RadioButtonHandler = (value) => {295 Togglesymbol(value);296 };297 const TextinputHandler = (value) => {298 switch (mode) {299 case "normal":300 setFieldValue(isLeft ? "L_PRISM" : "R_PRISM", symbol + value);301 break;302 case "adj":303 setFieldValue(isLeft ? "Adj_L_PRISM" : "Adj_R_PRISM", symbol + value);304 break;305 case "far":306 setFieldValue(isLeft ? "Far_L_PRISM" : "Far_R_PRISM", symbol + value);307 break;308 case "mid":309 setFieldValue(isLeft ? "Mid_L_PRISM" : "Mid_R_PRISM", symbol + value);310 break;311 case "near":312 setFieldValue(isLeft ? "Near_L_PRISM" : "Near_R_PRISM", symbol + value);313 break;314 }315 };316 const QuestionText = () => {317 switch (mode) {318 case "normal":319 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}稜鏡(PRISM)</Text>;320 case "adj":321 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}調整稜鏡(PRISM)</Text>;322 case "far":323 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}遠距稜鏡(PRISM)</Text>;324 case "mid":325 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}中距稜鏡(PRISM)</Text>;326 case "near":327 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}近距稜鏡(PRISM)</Text>;328 }329 };330 return (331 <View style={{ alignSelf: "center" }}>332 {QuestionText()}333 <View style={{ flexDirection: "row", paddingLeft: 10, alignSelf: "center" }}>334 <TouchableOpacity335 style={{ flexDirection: "row", marginRight: 20 }}336 onPress={() => {337 RadioButtonHandler("BI");338 }}339 >340 <View style={symbol == "BI" ? FormItemStyle.selectedRadioButton : FormItemStyle.unselectedRadioButton} />341 <Text style={{ fontSize: 20, color: "white", fontWeight: "bold" }}>BI</Text>342 </TouchableOpacity>343 <TouchableOpacity344 style={{ flexDirection: "row", marginRight: 20 }}345 onPress={() => {346 RadioButtonHandler("BO");347 }}348 >349 <View style={symbol == "BO" ? FormItemStyle.selectedRadioButton : FormItemStyle.unselectedRadioButton} />350 <Text style={{ fontSize: 20, color: "white", fontWeight: "bold" }}>BO</Text>351 </TouchableOpacity>352 <TouchableOpacity353 style={{ flexDirection: "row", marginRight: 20 }}354 onPress={() => {355 RadioButtonHandler("BU");356 }}357 >358 <View style={symbol == "BU" ? FormItemStyle.selectedRadioButton : FormItemStyle.unselectedRadioButton} />359 <Text style={{ fontSize: 20, color: "white", fontWeight: "bold" }}>BU</Text>360 </TouchableOpacity>361 <TouchableOpacity362 style={{ flexDirection: "row", marginRight: 20 }}363 onPress={() => {364 RadioButtonHandler("BD");365 }}366 >367 <View style={symbol == "BD" ? FormItemStyle.selectedRadioButton : FormItemStyle.unselectedRadioButton} />368 <Text style={{ fontSize: 20, color: "white", fontWeight: "bold" }}>BD</Text>369 </TouchableOpacity>370 </View>371 <View style={{ flexDirection: "row", paddingLeft: 5, paddingTop: 10 }}>372 <Text style={{ color: "white", fontSize: 20, fontWeight: "bold" }}>{symbol}</Text>373 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />374 </View>375 {error_PRISM != undefined && <Text style={FormItemStyle.errortext}>{error_PRISM}</Text>}376 </View>377 );378};379export const ADDInput = (props) => {380 const { setFieldValue, isLeft, mode } = props;381 const TextinputHandler = (value) => {382 switch (mode) {383 case "normal":384 setFieldValue(isLeft ? "L_ADD" : "R_ADD", value);385 break;386 case "adj":387 setFieldValue(isLeft ? "Adj_L_ADD" : "Adj_R_ADD", value);388 break;389 case "far":390 setFieldValue(isLeft ? "Far_L_ADD" : "Far_R_ADD", value);391 break;392 case "mid":393 setFieldValue(isLeft ? "Mid_L_ADD" : "Mid_R_ADD", value);394 break;395 case "near":396 setFieldValue(isLeft ? "Near_L_ADD" : "Near_R_ADD", value);397 break;398 }399 };400 const QuestionText = () => {401 switch (mode) {402 case "normal":403 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}老花加入度(ADD)</Text>;404 case "adj":405 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}調整老花加入度(ADD)</Text>;406 case "far":407 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}遠距老花加入度(ADD)</Text>;408 case "mid":409 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}中距老花加入度(ADD)</Text>;410 case "near":411 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}近距老花加入度(ADD)</Text>;412 }413 };414 return (415 <View style={{ alignSelf: "center" }}>416 {QuestionText()}417 <View style={{ flexDirection: "row", paddingLeft: 5, paddingTop: 10 }}>418 <Text style={{ color: "white", fontSize: 20, fontWeight: "bold" }}>+</Text>419 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />420 </View>421 </View>422 );423};424export const SPHInput = (props) => {425 const { setFieldValue, isLeft, mode } = props;426 const [symbol, Togglesymbol] = useState(false); //true = positive = hyperopia427 const TextinputHandler = (value) => {428 switch (mode) {429 case "normal":430 setFieldValue(isLeft ? "L_SPH" : "R_SPH", value);431 break;432 case "adj":433 setFieldValue(isLeft ? "Adj_L_SPH" : "Adj_R_SPH", value);434 break;435 case "con":436 setFieldValue(isLeft ? "Con_L_SPH" : "Con_R_SPH", value);437 break;438 case "far":439 setFieldValue(isLeft ? "Far_L_SPH" : "Far_R_SPH", value);440 break;441 case "mid":442 setFieldValue(isLeft ? "Mid_L_SPH" : "Mid_R_SPH", value);443 break;444 case "near":445 setFieldValue(isLeft ? "Near_L_SPH" : "Near_R_SPH", value);446 break;447 }448 };449 const RadioButtonHandler = (value) => {450 Togglesymbol(value);451 switch (mode) {452 case "normal":453 setFieldValue(isLeft ? "L_symbol" : "R_symbol", value, false);454 break;455 case "adj":456 setFieldValue(isLeft ? "Adj_L_symbol" : "Adj_R_symbol", value, false);457 break;458 case "con":459 setFieldValue(isLeft ? "Con_L_symbol" : "Con_R_symbol", value, false);460 break;461 case "far":462 setFieldValue(isLeft ? "Far_L_symbol" : "Far_R_symbol", value, false);463 break;464 case "mid":465 setFieldValue(isLeft ? "Mid_L_symbol" : "Mid_R_symbol", value, false);466 break;467 case "near":468 setFieldValue(isLeft ? "Near_L_symbol" : "Near_R_symbol", value, false);469 break;470 }471 };472 const QuestionText = () => {473 switch (mode) {474 case "normal":475 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}球面度數(SPH)</Text>;476 case "adj":477 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}調整球面度數(SPH)</Text>;478 case "con":479 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}隱形眼鏡球面度數(SPH)</Text>;480 case "far":481 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}遠距球面度數(SPH)</Text>;482 case "mid":483 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}中距球面度數(SPH)</Text>;484 case "near":485 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}近距球面度數(SPH)</Text>;486 }487 };488 return (489 <View style={{ alignSelf: "center" }}>490 {QuestionText()}491 <View style={{ flexDirection: "row", paddingLeft: 10, alignSelf: "center" }}>492 <TouchableOpacity493 style={{ flexDirection: "row", marginRight: 20 }}494 onPress={() => {495 RadioButtonHandler(false);496 }}497 >498 <View style={!symbol ? FormItemStyle.selectedRadioButton : FormItemStyle.unselectedRadioButton} />499 <Text style={{ fontSize: 20, color: "white", fontWeight: "bold" }}>−</Text>500 </TouchableOpacity>501 <TouchableOpacity502 style={{ flexDirection: "row" }}503 onPress={() => {504 RadioButtonHandler(true);505 }}506 >507 <View style={symbol ? FormItemStyle.selectedRadioButton : FormItemStyle.unselectedRadioButton} />508 <Text style={{ fontSize: 20, color: "white", paddingRight: 10 }}>+</Text>509 </TouchableOpacity>510 </View>511 <View style={{ flexDirection: "row", paddingLeft: 5, paddingTop: 10 }}>512 <Text style={{ color: "white", fontSize: 20, fontWeight: "bold" }}>{symbol ? "+" : "−"}</Text>513 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />514 </View>515 </View>516 );517};518export const CYLInput = (props) => {519 const { setFieldValue, isLeft, mode, error_CYL, error_Axis } = props;520 const [isable, setIsable] = useState(false);521 const TextinputHandler = (value) => {522 if (value > 0) {523 setIsable(true);524 } else {525 setIsable(false);526 }527 switch (mode) {528 case "normal":529 setFieldValue(isLeft ? "L_CYL" : "R_CYL", value);530 break;531 case "adj":532 setFieldValue(isLeft ? "Adj_L_CYL" : "Adj_R_CYL", value);533 break;534 case "con":535 setFieldValue(isLeft ? "Con_L_CYL" : "Con_R_CYL", value);536 break;537 case "far":538 setFieldValue(isLeft ? "Far_L_CYL" : "Far_R_CYL", value);539 break;540 case "mid":541 setFieldValue(isLeft ? "Mid_L_CYL" : "Mid_R_CYL", value);542 break;543 case "near":544 setFieldValue(isLeft ? "Near_L_CYL" : "Near_R_CYL", value);545 break;546 }547 };548 const QuestionText = () => {549 switch (mode) {550 case "normal":551 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}散光度數(CYL)</Text>;552 case "adj":553 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}調整散光度數(CYL)</Text>;554 case "con":555 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}隱形眼鏡散光度數(CYL)</Text>;556 case "far":557 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}遠距散光度數(CYL)</Text>;558 case "mid":559 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}中距散光度數(CYL)</Text>;560 case "near":561 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}近距散光度數(CYL)</Text>;562 }563 };564 return (565 <View style={{ alignSelf: "center" }}>566 {QuestionText()}567 <View style={{ flexDirection: "row", paddingLeft: 5, paddingTop: 10 }}>568 <Text style={{ color: "white", fontSize: 20, fontWeight: "bold" }}>−</Text>569 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />570 </View>571 {error_CYL != undefined && <Text style={FormItemStyle.errortext}>{error_CYL}</Text>}572 <View>{isable && <AxisInput setFieldValue={setFieldValue} isLeft={isLeft} mode={mode} error={error_Axis} />}</View>573 </View>574 );575};576export const AxisInput = (props) => {577 const { setFieldValue, isLeft, mode, error } = props;578 const TextinputHandler = (value) => {579 switch (mode) {580 case "normal":581 setFieldValue(isLeft ? "L_Axis" : "R_Axis", value);582 break;583 case "adj":584 setFieldValue(isLeft ? "Adj_L_Axis" : "Adj_R_Axis", value);585 break;586 case "con":587 setFieldValue(isLeft ? "Con_L_Axis" : "Con_R_Axis", value);588 break;589 case "far":590 setFieldValue(isLeft ? "Far_L_Axis" : "Far_R_Axis", value);591 break;592 case "mid":593 setFieldValue(isLeft ? "Mid_L_Axis" : "Mid_R_Axis", value);594 break;595 case "near":596 setFieldValue(isLeft ? "Near_L_Axis" : "Near_R_Axis", value);597 break;598 }599 };600 const QuestionText = () => {601 switch (mode) {602 case "normal":603 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}散光軸度(Axis)</Text>;604 case "adj":605 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}調整散光軸度(Axis)</Text>;606 case "con":607 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}隱形眼鏡散光軸度(Axis)</Text>;608 case "far":609 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}遠距散光軸度(Axis)</Text>;610 case "mid":611 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}中距散光軸度(Axis)</Text>;612 case "near":613 return <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}近距散光軸度(Axis)</Text>;614 }615 };616 return (617 <View style={{ alignSelf: "center" }}>618 {QuestionText()}619 <TextInput onChangeText={TextinputHandler} keyboardType="numeric" style={FormItemStyle.answerInputBox} />620 {error != undefined && <Text style={FormItemStyle.errortext}>{error}</Text>}621 </View>622 );623};624export const VAInput = (props) => {625 const { setFieldValue, isLeft, error } = props;626 const TextinputHandler = (value) => {627 setFieldValue(isLeft ? "L_VA" : "R_VA", value);628 };629 return (630 <View>631 <View style={{ alignSelf: "center" }}>632 <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼的(O.S.)" : "右眼的(O.D.)"}視力(VA) (6/6)</Text>633 <TextInput onChangeText={TextinputHandler} keyboardType="default" style={FormItemStyle.answerInputBox} />634 </View>635 {error != undefined && <Text style={FormItemStyle.errortext}>{error}</Text>}636 </View>637 );638};639export const PDInput = (props) => {640 const { handleChange, isLeft, error } = props;641 return (642 <View style={{ alignSelf: "center" }}>643 <Text style={FormItemStyle.questionText}>請輸入{isLeft ? "左眼" : "右眼"}瞳孔距離(Pupillary Distance)(mm)</Text>644 <TextInput onChangeText={handleChange(isLeft ? "L_PD" : "R_PD")} keyboardType="numeric" style={FormItemStyle.answerInputBox} />645 {error != undefined && <Text style={FormItemStyle.errortext}>{error}</Text>}646 </View>647 );648};649export const RemarksInput = (props) => {650 const { handleChange } = props;651 return (652 <View style={{ flex: 1, marginBottom: 10 }}>653 <Text style={FormItemStyle.questionText}>備註</Text>654 <TextInput onChangeText={handleChange("remarks")} multiline={true} style={FormItemStyle.remarksInputBox} />655 </View>656 );657};658export const DiseasesInput = (props) => {659 const { setFieldValue } = props;660 const [selectItems, setitems] = useState([]);661 const items = [662 { id: "弱視", name: "弱視" },663 { id: "斜視", name: "斜視" },664 { id: "青光眼", name: "青光眼" },665 { id: "色盲", name: "色盲" },666 { id: "色弱", name: "色弱" },667 { id: "高眼壓", name: "高眼壓" },668 { id: "角膜弓(老年)", name: "角膜弓(老年)" },669 { id: "角膜弓(青少年)", name: "角膜弓(青少年)" },670 { id: "眼乾症", name: "眼乾症" },671 { id: "淚溢", name: "淚溢" },672 { id: "白內障", name: "白內障" },673 { id: "虹膜炎", name: "虹膜炎 " },674 { id: "翼狀胬肉", name: "翼狀胬肉" },675 { id: "後囊膜", name: "後囊膜" },676 { id: "玻璃體", name: "玻璃體" },677 { id: "黃斑病", name: "黃斑病" },678 { id: "眼簾下垂", name: "眼簾下垂" },679 { id: "瞼裂斑", name: "瞼裂斑" },680 ];681 const onSelectItemChange = (selectedItems) => {682 setitems(selectedItems);683 setFieldValue("disease", selectedItems);684 };685 return (686 <View>687 <Text style={[FormItemStyle.questionText, { marginBottom: 5 }]}>已確診眼疾</Text>688 <MultiSelect689 items={items}690 uniqueKey="id"691 onSelectedItemsChange={onSelectItemChange}692 selectedItems={selectItems}693 selectText="選擇確診眼疾"694 searchInputPlaceholderText="搜尋..."695 //onChangeInput={(text) => console.log(text)}696 tagRemoveIconColor="#CCC"697 tagBorderColor="#CCC"...

Full Screen

Full Screen

InnerForm.js

Source:InnerForm.js Github

copy

Full Screen

1import React, { useState } from 'react';2import StyledForm from './styles';3import { Formik, Form } from 'formik';4import {5 initialValues,6 validationSchema,7 randomIdGenerator,8 formatDatePicker,9 getTotal,10 generatePayDue,11 generatePaymentTerms,12 compareDate,13} from '../../utils';14import SelectOptions from './SelectOptions.js';15import TextError from './TextError';16import InputWrapper from './InputWrapper';17import ItemList from './ItemList';18import { ConnectedFocusError } from 'focus-formik-error';19import { useDispatch, useSelector } from 'react-redux';20import { closeModal, updateData } from '../../actions/dataActions';21const InnerForm = () => {22 const dispatch = useDispatch();23 const [itemListError, setItemListError] = useState(false);24 const params = useSelector(state => state.root.invoiceId);25 const selectedInvoice = JSON.parse(26 localStorage.getItem('invoiceStorage')27 ).filter(invoice => invoice.id === params)[0];28 const handleFormSubmit = values =>29 !values.itemList.length ? setItemListError(true) : setItemListError(false);30 const handleFinalizedSubmit = (values, send) => {31 const {32 streetAddress,33 city,34 postCode,35 country,36 clientName,37 clientEmail,38 clientStreetAddress,39 clientCity,40 clientPostCode,41 clientCountry,42 invoiceDate,43 paymentTerms,44 description,45 itemList,46 } = values;47 const senderAddress = {48 street: streetAddress,49 city,50 postCode,51 country,52 };53 const clientAddress = {54 street: clientStreetAddress,55 city: clientCity,56 postCode: clientPostCode,57 country: clientCountry,58 };59 const updatedItemList = itemList.map(item => ({60 ...item,61 total: item.price * item.quantity,62 }));63 const newInvoice = {64 id: params ? params : randomIdGenerator(),65 createdAt: formatDatePicker(invoiceDate),66 paymentDue: generatePayDue(67 formatDatePicker(invoiceDate),68 generatePaymentTerms(paymentTerms)69 ),70 description,71 paymentTerms: generatePaymentTerms(paymentTerms),72 clientName,73 clientEmail,74 status: send75 ? compareDate(76 generatePayDue(77 formatDatePicker(invoiceDate),78 generatePaymentTerms(paymentTerms)79 ),80 new Date()81 )82 : 'draft',83 senderAddress,84 clientAddress,85 items: updatedItemList,86 total: getTotal(itemList),87 };88 const invoiceStorage = JSON.parse(localStorage.getItem('invoiceStorage'));89 if (!params) {90 invoiceStorage.unshift(newInvoice);91 localStorage.setItem('invoiceStorage', JSON.stringify(invoiceStorage));92 dispatch(updateData(invoiceStorage));93 } else {94 const newInvoiceStorage = invoiceStorage.map(invoice =>95 invoice.id === params ? { ...newInvoice } : invoice96 );97 localStorage.setItem('invoiceStorage', JSON.stringify(newInvoiceStorage));98 dispatch(updateData(newInvoiceStorage));99 }100 document.body.style.overflowY = 'scroll';101 dispatch(closeModal());102 };103 const handleSubmit = values => {104 if (!itemListError) {105 handleFinalizedSubmit(values, true);106 }107 };108 const innerFormVariants = {109 initial: {110 x: '-100%',111 },112 animate: {113 x: '-4%',114 transition: {115 type: 'spring',116 duration: 0.5,117 },118 },119 exit: {120 x: '-100%',121 transition: {122 type: 'spring',123 duration: 0.5,124 },125 },126 };127 return (128 <Formik129 initialValues={initialValues}130 validationSchema={validationSchema}131 validateOnChange={false}132 onSubmit={values => handleSubmit(values)}133 >134 {formik => {135 const { touched, errors, setFieldValue, values, isValid } = formik;136 return (137 <StyledForm138 onClick={e => e.stopPropagation()}139 params={params}140 variants={innerFormVariants}141 >142 <Form>143 <ConnectedFocusError />144 <header>145 <h1>Create Invoice</h1>146 </header>147 <main>148 <fieldset className="bill-from">149 <legend>Bill From</legend>150 <InputWrapper151 classname="street-address"152 textContent="Street Address"153 name="streetAddress"154 errors={errors}155 touched={touched}156 value={157 selectedInvoice158 ? selectedInvoice.senderAddress.street159 : ''160 }161 setFieldValue={setFieldValue}162 />163 <InputWrapper164 classname="city"165 textContent="City"166 name="city"167 errors={errors}168 touched={touched}169 value={170 selectedInvoice ? selectedInvoice.senderAddress.city : ''171 }172 setFieldValue={setFieldValue}173 />174 <InputWrapper175 classname="post-code"176 textContent="Post Code"177 name="postCode"178 errors={errors}179 touched={touched}180 value={181 selectedInvoice182 ? selectedInvoice.senderAddress.postCode183 : ''184 }185 setFieldValue={setFieldValue}186 />187 <InputWrapper188 classname="country"189 textContent="Country"190 name="country"191 errors={errors}192 touched={touched}193 value={194 selectedInvoice195 ? selectedInvoice.senderAddress.country196 : ''197 }198 setFieldValue={setFieldValue}199 />200 </fieldset>201 <fieldset className="bill-to">202 <legend>Bill To</legend>203 <InputWrapper204 classname="client-name"205 textContent="Client's Name"206 name="clientName"207 errors={errors}208 touched={touched}209 value={selectedInvoice ? selectedInvoice.clientName : ''}210 setFieldValue={setFieldValue}211 />212 <InputWrapper213 classname="client-email"214 textContent="Client's Email"215 name="clientEmail"216 errors={errors}217 touched={touched}218 value={selectedInvoice ? selectedInvoice.clientEmail : ''}219 setFieldValue={setFieldValue}220 />221 <InputWrapper222 classname="client-street-address"223 textContent="Street Address"224 name="clientStreetAddress"225 errors={errors}226 touched={touched}227 value={228 selectedInvoice229 ? selectedInvoice.clientAddress.street230 : ''231 }232 setFieldValue={setFieldValue}233 />234 <InputWrapper235 classname="client-city"236 textContent="Client City"237 name="clientCity"238 errors={errors}239 touched={touched}240 value={241 selectedInvoice ? selectedInvoice.clientAddress.city : ''242 }243 setFieldValue={setFieldValue}244 />245 <InputWrapper246 classname="client-post-code"247 textContent="Post Code"248 name="clientPostCode"249 errors={errors}250 touched={touched}251 value={252 selectedInvoice253 ? selectedInvoice.clientAddress.postCode254 : ''255 }256 setFieldValue={setFieldValue}257 />258 <InputWrapper259 classname="client-country"260 textContent="Country"261 name="clientCountry"262 errors={errors}263 touched={touched}264 value={265 selectedInvoice266 ? selectedInvoice.clientAddress.country267 : ''268 }269 setFieldValue={setFieldValue}270 />271 <div className="dates">272 <InputWrapper273 classname="invoice-date"274 textContent="Invoice Date"275 name="invoiceDate"276 selectedDate={277 selectedInvoice ? selectedInvoice.createdAt : ''278 }279 setFieldValue={setFieldValue}280 />281 <SelectOptions282 values={values}283 setFieldValue={setFieldValue}284 selectedPaymentTerms={285 selectedInvoice ? selectedInvoice.paymentTerms : ''286 }287 />288 </div>289 <InputWrapper290 classname="description"291 textContent="Description"292 name="description"293 errors={errors}294 touched={touched}295 value={selectedInvoice ? selectedInvoice.description : ''}296 setFieldValue={setFieldValue}297 />298 <div className="item-list-wrapper">299 <h4>Item List</h4>300 <ItemList301 errors={errors}302 touched={touched}303 setItemListError={setItemListError}304 selectedItems={305 selectedInvoice ? selectedInvoice.items : ''306 }307 setFieldValue={setFieldValue}308 />309 <div className="error-messages">310 {itemListError && (311 <TextError text="At least one item must be added" />312 )}313 {!isValid && (314 <TextError text="All fields must be filled" />315 )}316 </div>317 </div>318 </fieldset>319 </main>320 <footer>321 <button322 type="button"323 className="discard-btn"324 onClick={() => {325 dispatch(closeModal());326 document.body.style.overflowY = 'scroll';327 }}328 >329 Discard330 </button>331 <button332 type="button"333 className="draft-btn"334 onClick={e => {335 e.preventDefault();336 handleFinalizedSubmit(values);337 }}338 >339 <span className="desktop">Save as Draft</span>340 <span className="mobile">Draft</span>341 </button>342 <button343 type="submit"344 className="submit-btn"345 onClick={e => handleFormSubmit(values)}346 >347 <span className="desktop">Save &amp; Send</span>348 <span className="mobile">Send</span>349 </button>350 <button351 type="button"352 className="cancel-btn"353 onClick={() => {354 dispatch(closeModal());355 document.body.style.overflowY = 'scroll';356 }}357 >358 Cancel359 </button>360 <button361 className="save-changes-btn"362 type="submit"363 onClick={() => handleFormSubmit(values)}364 >365 Save Changes366 </button>367 </footer>368 </Form>369 </StyledForm>370 );371 }}372 </Formik>373 );374};...

Full Screen

Full Screen

ES-Create-Sale-Order-SU.js

Source:ES-Create-Sale-Order-SU.js Github

copy

Full Screen

...6 var data = dataOrder(json);7 var items = data.items;8 nlapiLogExecution('DEBUG', 'data', JSON.stringify(data));9 var order = nlapiCreateRecord('salesorder' /*, { recordmode: "dynamic" }*/ );10 order.setFieldValue("entity", data.dataOrder.customerId);11 order.setFieldValue("shippingcost", 0);12 order.setFieldValue("subsidiary", "1");13 order.setFieldValue("otherrefnum", data.dataOrder.orderNumber);14 order.setFieldValue("memo", data.dataOrder.memo);15 order.setFieldValue("taxcode", '11');16 order.setFieldValue('initialamount', "0.0");17 order.setFieldValue("orderstatus", "A");18 if (items && items.length > 0) {19 for (var i = 0; i < items.length; i++) {20 nlapiLogExecution('DEBUG', 'items[i]', JSON.stringify(items[i]));21 order.selectNewLineItem("item");22 order.setCurrentLineItemValue("item", "item", items[i].itemid);23 order.setCurrentLineItemValue("item", "quantity", items[i].qty);24 order.setCurrentLineItemValue('item', 'amount', items[i].amount);25 order.setCurrentLineItemValue("item", "location", items[i].locations);26 order.commitLineItem("item");27 }28 }29 if (!data.addresses.addresses) {30 nlapiLogExecution('DEBUG', 'zip', JSON.stringify(data.addresses.postalCode));31 var subrecord = order.createSubrecord('shippingaddress');32 subrecord.setFieldValue("country", data.addresses.country);33 subrecord.setFieldValue("addressee", data.dataOrder.customer);34 subrecord.setFieldValue("addrphone", "");35 subrecord.setFieldValue("addr1", data.addresses.addr1);36 subrecord.setFieldValue("addr2", data.addresses.addr2);37 subrecord.setFieldValue("city", data.addresses.city);38 subrecord.setFieldValue("state", "");39 subrecord.setFieldValue("zip", data.addresses.postalCode);40 subrecord.setFieldValue("defaultshipping", true);41 subrecord.setFieldValue("defaultbilling", false);42 subrecord.setFieldValue("isresidential", false);43 subrecord.commit();44 } else if (data.addresses.addresses) {45 order.setFieldValue("shipaddresslist", data.addresses.addresses);46 }47 order.setFieldValue("custbodyes_so_order_portal", "T");48 var neewResponse = {}49 // nlapiLogExecution('DEBUG', 'orderId', JSON.stringify(order));50 var idOrder = nlapiSubmitRecord(order);51 if (idOrder) var rcd = nlapiLoadRecord('salesorder', idOrder);52 var soNumber = rcd.getFieldValue('tranid');53 neewResponse.idOrder = idOrder;54 neewResponse.soNumber = soNumber;55 nlapiLogExecution('DEBUG', 'response', JSON.stringify(neewResponse));56 } catch (e) {57 nlapiLogExecution('DEBUG', 'Error', JSON.stringify(e));58 }59 neewResponse = JSON.stringify(neewResponse)60 response.write(neewResponse);61}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { setFieldValue } from 'storybook-root';2import { withKnobs, text } from '@storybook/addon-knobs';3import React from 'react';4import { storiesOf } from '@storybook/react';5storiesOf('test', module)6 .addDecorator(withKnobs)7 .add('with text', () => {8 const value = text('Name', 'Arunoda');9 setFieldValue('Name', 'Arunoda');10 return <div>{value}</div>;11 });12import { getStorybook } from '@storybook/react';13import { STORY_RENDERED } from '@storybook/core-events';14import { action } from '@storybook/addon-actions';15const setFieldValue = (fieldName, fieldValue) => {16 const storybook = getStorybook();17 storybook.forEach(group => {18 group.stories.forEach(story => {19 story.events.on(STORY_RENDERED, () => {20 action('Field Value')(fieldName, fieldValue);21 });22 });23 });24};25export default setFieldValue;26import setFieldValue from 'setFieldValue';27import { configure, addDecorator } from '@storybook/react';28import { withKnobs } from '@storybook/addon-knobs';29addDecorator(withKnobs);30configure(() => {31 require('../test.js');32}, module);33const path = require('path');34module.exports = (baseConfig, env, config) => {35 config.resolve.alias['storybook-root'] = path.resolve(__dirname, '../');36 return config;37};38{39 "scripts": {40 },41 "dependencies": {42 },43 "devDependencies": {44 }45}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { setFieldValue } from 'storybook-root';2setFieldValue('myField', 'myValue');3jest.mock('storybook-root', () => ({4 setFieldValue: jest.fn(),5}));6import { setFieldValue } from 'storybook-root';7setFieldValue('myField', 'myValue');8expect(setFieldValue).toHaveBeenCalledWith('myField', 'myValue');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { setFieldValue } from 'storybook-root';2setFieldValue('input', 'value');3import { setFieldValue } from 'storybook-root';4setFieldValue('input', 'value');5import { setFieldValue } from 'storybook-root';6setFieldValue('input', 'value');7import { setFieldValue } from 'storybook-root';8setFieldValue('input', 'value');9import { setFieldValue } from 'storybook-root';10setFieldValue('input', 'value');11import { setFieldValue } from 'storybook-root';12setFieldValue('input', 'value');13import { setFieldValue } from 'storybook-root';14setFieldValue('input', 'value');15import { setFieldValue } from 'storybook-root';16setFieldValue('input', 'value');17import { setFieldValue } from 'storybook-root';18setFieldValue('input', 'value');19import { setFieldValue } from 'storybook-root';20setFieldValue('input', 'value');21import { setFieldValue } from 'storybook-root';22setFieldValue('input', 'value');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { setFieldValue } from 'storybook-root';2setFieldValue('input[name="name"]', 'my name');3import { setFieldValue } from 'storybook-root';4storiesOf('MyComponent', module).add('default', () => (5 name={text('name', 'some name')}6 onChangeName={e => setFieldValue('input[name="name"]', e.target.value)}7));8import { setFieldValue } from 'storybook-root';9storiesOf('MyComponent', module).add('default', () => (10 name={text('name', 'some name')}11 onChangeName={e => setFieldValue('input[name="name"]', e.target.value)}12));13import { setFieldValue } from 'storybook-root';14storiesOf('MyComponent', module).add('default', () => (15 name={text('name', 'some name')}16 onChangeName={e => setFieldValue('input[name="name"]', e.target.value)}17));18import { setFieldValue } from 'storybook-root';19storiesOf('MyComponent', module).add('default', () => (20 name={text('name', 'some name')}21 onChangeName={e => setFieldValue('input[name="name"]', e.target.value)}22));23import { setFieldValue } from 'storybook-root';24storiesOf('MyComponent', module).add('default', () => (25 name={text('name', 'some name')}26 onChangeName={e => setFieldValue('input[name="name"]', e.target.value)}27));28import { setFieldValue } from 'storybook-root';29storiesOf('MyComponent', module).add('default', () => (30 name={text('

Full Screen

Full Screen

Automation Testing Tutorials

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful