Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use useMemo method in Playwright Internal
Best JavaScript code snippet using playwright-internal
OutgoiongWebhookForm.js
Source:OutgoiongWebhookForm.js 
...62 handleRetryDelay,63 handleTriggerWordAnywhere,64 handleRunOnEdits,65 } = formHandlers;66 const retryDelayOptions = useMemo(67 () => [68 ['powers-of-ten', t('powers-of-ten')],69 ['powers-of-two', t('powers-of-two')],70 ['increments-of-two', t('increments-of-two')],71 ],72 [t],73 );74 const eventOptions = useMemo(75 () => Object.entries(outgoingEvents).map(([key, val]) => [key, t(val.label)]),76 [t],77 );78 const showChannel = useMemo(() => outgoingEvents[event].use.channel, [event]);79 const showTriggerWords = useMemo(() => outgoingEvents[event].use.triggerWords, [event]);80 const showTargetRoom = useMemo(() => outgoingEvents[event].use.targetRoom, [event]);81 const additionalFields = useMemo(82 () => ({83 ...(alias && { alias }),84 ...(emoji && { emoji }),85 ...(avatarUrl && { avatar: avatarUrl }),86 }),87 [alias, avatarUrl, emoji],88 );89 const [exampleData] = useExampleData({90 additionalFields,91 url: null,92 });93 const hilightedExampleJson = useHighlightedCode('json', JSON.stringify(exampleData, null, 2));94 return (95 <Page.ScrollableContentWithShadow96 pb='x24'97 mi='neg-x24'98 is='form'99 onSubmit={useCallback((e) => e.preventDefault(), [])}100 qa-admin-user-edit='form'101 {...props}102 >103 <Margins block='x16'>104 <Accordion width='x600' alignSelf='center'>105 <FieldGroup>106 {useMemo(107 () => (108 <Field>109 <Field.Label>{t('Event_Trigger')}</Field.Label>110 <Field.Row>111 <Select112 flexGrow={1}113 value={event}114 options={eventOptions}115 onChange={handleEvent}116 />117 </Field.Row>118 <Field.Hint>{t('Event_Trigger_Description')}</Field.Hint>119 </Field>120 ),121 [event, eventOptions, handleEvent, t],122 )}123 {useMemo(124 () => (125 <Field>126 <Field.Label display='flex' justifyContent='space-between' w='full'>127 {t('Enabled')}128 <ToggleSwitch checked={enabled} onChange={handleEnabled} />129 </Field.Label>130 </Field>131 ),132 [enabled, handleEnabled, t],133 )}134 {useMemo(135 () => (136 <Field>137 <Field.Label>{t('Name_optional')}</Field.Label>138 <Field.Row>139 <TextInput flexGrow={1} value={name} onChange={handleName} />140 </Field.Row>141 <Field.Hint>142 {t('You_should_name_it_to_easily_manage_your_integrations')}143 </Field.Hint>144 </Field>145 ),146 [handleName, name, t],147 )}148 {useMemo(149 () =>150 showChannel && (151 <Field>152 <Field.Label>{t('Channel')}</Field.Label>153 <Field.Row>154 <TextInput155 flexGrow={1}156 value={channel}157 onChange={handleChannel}158 addon={<Icon name='at' size='x20' />}159 />160 </Field.Row>161 <Field.Hint>{t('Channel_to_listen_on')}</Field.Hint>162 <Field.Hint163 dangerouslySetInnerHTML={{164 __html: t(165 'Start_with_s_for_user_or_s_for_channel_Eg_s_or_s',166 '@',167 '#',168 '@john',169 '#general',170 ),171 }}172 />173 <Field.Hint174 dangerouslySetInnerHTML={{ __html: t('Integrations_for_all_channels') }}175 />176 </Field>177 ),178 [showChannel, t, channel, handleChannel],179 )}180 {useMemo(181 () =>182 showTriggerWords && (183 <Field>184 <Field.Label>{t('Trigger_Words')}</Field.Label>185 <Field.Row>186 <TextInput flexGrow={1} value={triggerWords} onChange={handleTriggerWords} />187 </Field.Row>188 <Field.Hint>189 {t('When_a_line_starts_with_one_of_there_words_post_to_the_URLs_below')}190 </Field.Hint>191 <Field.Hint>{t('Separate_multiple_words_with_commas')}</Field.Hint>192 </Field>193 ),194 [handleTriggerWords, showTriggerWords, t, triggerWords],195 )}196 {useMemo(197 () =>198 showTargetRoom && (199 <Field>200 <Field.Label>{t('TargetRoom')}</Field.Label>201 <Field.Row>202 <TextInput flexGrow={1} value={targetRoom} onChange={handleTargetRoom} />203 </Field.Row>204 <Field.Hint>{t('TargetRoom_Description')}</Field.Hint>205 <Field.Hint206 dangerouslySetInnerHTML={{207 __html: t(208 'Start_with_s_for_user_or_s_for_channel_Eg_s_or_s',209 '@',210 '#',211 '@john',212 '#general',213 ),214 }}215 />216 </Field>217 ),218 [handleTargetRoom, showTargetRoom, t, targetRoom],219 )}220 {useMemo(221 () => (222 <Field>223 <Field.Label>{t('URLs')}</Field.Label>224 <Field.Row>225 <TextAreaInput226 rows={10}227 flexGrow={1}228 value={urls}229 onChange={handleUrls}230 addon={<Icon name='permalink' size='x20' />}231 />232 </Field.Row>233 </Field>234 ),235 [handleUrls, t, urls],236 )}237 {useMemo(238 () => (239 <Field>240 <Field.Label display='flex' justifyContent='space-between' w='full'>241 {t('Impersonate_user')}242 <ToggleSwitch checked={impersonateUser} onChange={handleImpersonateUser} />243 </Field.Label>244 </Field>245 ),246 [handleImpersonateUser, impersonateUser, t],247 )}248 {useMemo(249 () => (250 <Field>251 <Field.Label>{t('Post_as')}</Field.Label>252 <Field.Row>253 <TextInput254 flexGrow={1}255 value={username}256 onChange={handleUsername}257 addon={<Icon name='user' size='x20' />}258 />259 </Field.Row>260 <Field.Hint>261 {t('Choose_the_username_that_this_integration_will_post_as')}262 </Field.Hint>263 <Field.Hint>{t('Should_exists_a_user_with_this_username')}</Field.Hint>264 </Field>265 ),266 [handleUsername, t, username],267 )}268 {useMemo(269 () => (270 <Field>271 <Field.Label>{`${t('Alias')} (${t('optional')})`}</Field.Label>272 <Field.Row>273 <TextInput274 flexGrow={1}275 value={alias}276 onChange={handleAlias}277 addon={<Icon name='edit' size='x20' />}278 />279 </Field.Row>280 <Field.Hint>281 {t('Choose_the_alias_that_will_appear_before_the_username_in_messages')}282 </Field.Hint>283 </Field>284 ),285 [alias, handleAlias, t],286 )}287 {useMemo(288 () => (289 <Field>290 <Field.Label>{`${t('Avatar_URL')} (${t('optional')})`}</Field.Label>291 <Field.Row>292 <TextInput293 flexGrow={1}294 value={avatarUrl}295 onChange={handleAvatar}296 addon={<Icon name='user-rounded' size='x20' alignSelf='center' />}297 />298 </Field.Row>299 <Field.Hint>{t('You_can_change_a_different_avatar_too')}</Field.Hint>300 <Field.Hint>{t('Should_be_a_URL_of_an_image')}</Field.Hint>301 </Field>302 ),303 [avatarUrl, handleAvatar, t],304 )}305 {useMemo(306 () => (307 <Field>308 <Field.Label>{`${t('Emoji')} (${t('optional')})`}</Field.Label>309 <Field.Row>310 <TextInput311 flexGrow={1}312 value={emoji}313 onChange={handleEmoji}314 addon={<Icon name='emoji' size='x20' alignSelf='center' />}315 />316 </Field.Row>317 <Field.Hint>{t('You_can_use_an_emoji_as_avatar')}</Field.Hint>318 <Field.Hint dangerouslySetInnerHTML={{ __html: t('Example_s', ':ghost:') }} />319 </Field>320 ),321 [emoji, handleEmoji, t],322 )}323 {useMemo(324 () => (325 <Field>326 <Field.Label>{`${t('Token')} (${t('Optional')})`}</Field.Label>327 <Field.Row>328 <TextInput329 flexGrow={1}330 value={token}331 onChange={handleToken}332 addon={<Icon name='key' size='x20' />}333 />334 </Field.Row>335 </Field>336 ),337 [handleToken, t, token],338 )}339 {useMemo(340 () => (341 <Field>342 <Field.Label display='flex' justifyContent='space-between' w='full'>343 {t('Script_Enabled')}344 <ToggleSwitch checked={scriptEnabled} onChange={handleScriptEnabled} />345 </Field.Label>346 </Field>347 ),348 [handleScriptEnabled, scriptEnabled, t],349 )}350 {useMemo(351 () => (352 <Field>353 <Field.Label>{t('Script')}</Field.Label>354 <Field.Row>355 <TextAreaInput356 rows={10}357 flexGrow={1}358 value={script}359 onChange={handleScript}360 addon={<Icon name='code' size='x20' alignSelf='center' />}361 />362 </Field.Row>363 </Field>364 ),365 [handleScript, script, t],366 )}367 {useMemo(368 () => (369 <Field>370 <Field.Label>{t('Responding')}</Field.Label>371 <Field.Hint>{t('Response_description_pre')}</Field.Hint>372 <Field.Row>373 <Box fontScale='p1' withRichContent flexGrow={1}>374 <pre>375 <code dangerouslySetInnerHTML={{ __html: hilightedExampleJson }}></code>376 </pre>377 </Box>378 </Field.Row>379 <Field.Hint>{t('Response_description_post')}</Field.Hint>380 </Field>381 ),382 [hilightedExampleJson, t],383 )}384 </FieldGroup>385 <Accordion.Item title={t('Integration_Advanced_Settings')}>386 <FieldGroup>387 {useMemo(388 () => (389 <Field>390 <Field.Label display='flex' justifyContent='space-between' w='full'>391 {t('Integration_Retry_Failed_Url_Calls')}392 <ToggleSwitch checked={retryFailedCalls} onChange={handleRetryFailedCalls} />393 </Field.Label>394 <Field.Hint>{t('Integration_Retry_Failed_Url_Calls_Description')}</Field.Hint>395 </Field>396 ),397 [handleRetryFailedCalls, retryFailedCalls, t],398 )}399 {useMemo(400 () => (401 <Field>402 <Field.Label>{t('Retry_Count')}</Field.Label>403 <Field.Row>404 <TextInput flexGrow={1} value={retryCount} onChange={handleRetryCount} />405 </Field.Row>406 <Field.Hint>{t('Integration_Retry_Count_Description')}</Field.Hint>407 </Field>408 ),409 [handleRetryCount, retryCount, t],410 )}411 {useMemo(412 () => (413 <Field>414 <Field.Label>{t('Integration_Retry_Delay')}</Field.Label>415 <Field.Row>416 <Select417 flexGrow={1}418 value={retryDelay}419 options={retryDelayOptions}420 onChange={handleRetryDelay}421 />422 </Field.Row>423 <Field.Hint424 dangerouslySetInnerHTML={{ __html: t('Integration_Retry_Delay_Description') }}425 />426 </Field>427 ),428 [handleRetryDelay, retryDelay, retryDelayOptions, t],429 )}430 {useMemo(431 () =>432 event === 'sendMessage' && (433 <FieldGroup>434 <Field>435 <Field.Label display='flex' justifyContent='space-between' w='full'>436 {t('Integration_Word_Trigger_Placement')}437 <ToggleSwitch438 checked={triggerWordAnywhere}439 onChange={handleTriggerWordAnywhere}440 />441 </Field.Label>442 <Field.Hint>443 {t('Integration_Word_Trigger_Placement_Description')}444 </Field.Hint>...
index.js
Source:index.js
...80}) {81 const {82 strapi: { fieldApi },83 } = useStrapi();84 const attribute = useMemo(() => get(layout, ['schema', 'attributes', name], {}), [layout, name]);85 const metadatas = useMemo(() => get(layout, ['metadatas', name, 'edit'], {}), [layout, name]);86 const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);87 const type = useMemo(() => get(attribute, 'type', null), [attribute]);88 const regexpString = useMemo(() => get(attribute, 'regex', null), [attribute]);89 const temporaryErrorIdUntilBuffetjsSupportsFormattedMessage = 'app.utils.defaultMessage';90 const errorId = useMemo(() => {91 return get(formErrors, [keys, 'id'], temporaryErrorIdUntilBuffetjsSupportsFormattedMessage);92 }, [formErrors, keys]);93 const fieldName = useMemo(() => {94 return getFieldName(keys);95 }, [keys]);96 const isChildOfDynamicZone = useMemo(() => {97 const attributes = get(currentContentTypeLayout, ['schema', 'attributes'], {});98 const foundAttributeType = get(attributes, [fieldName[0], 'type'], null);99 return foundAttributeType === 'dynamiczone';100 }, [currentContentTypeLayout, fieldName]);101 const validations = useMemo(() => {102 return omit(103 attribute,104 shouldNotRunValidations ? [...validationsToOmit, 'required', 'minLength'] : validationsToOmit105 );106 }, [attribute, shouldNotRunValidations]);107 const isRequired = useMemo(() => get(validations, ['required'], false), [validations]);108 const inputType = useMemo(() => {109 return getInputType(type);110 }, [type]);111 const inputValue = useMemo(() => {112 // Fix for input file multipe113 if (type === 'media' && !value) {114 return [];115 }116 return value;117 }, [type, value]);118 const step = useMemo(() => {119 let step;120 if (type === 'float' || type === 'decimal') {121 step = 0.01;122 } else if (type === 'time' || type === 'datetime') {123 step = 30;124 } else {125 step = 1;126 }127 return step;128 }, [type]);129 const isMultiple = useMemo(() => {130 return get(attribute, 'multiple', false);131 }, [attribute]);132 const isUserAllowedToEditField = useMemo(() => {133 const joinedName = fieldName.join('.');134 if (allowedFields.includes(joinedName)) {135 return true;136 }137 if (isChildOfDynamicZone) {138 return allowedFields.includes(fieldName[0]);139 }140 const isChildOfComponent = fieldName.length > 1;141 if (isChildOfComponent) {142 const parentFieldName = take(fieldName, fieldName.length - 1).join('.');143 return allowedFields.includes(parentFieldName);144 }145 return false;146 }, [allowedFields, fieldName, isChildOfDynamicZone]);147 const isUserAllowedToReadField = useMemo(() => {148 const joinedName = fieldName.join('.');149 if (readableFields.includes(joinedName)) {150 return true;151 }152 if (isChildOfDynamicZone) {153 return readableFields.includes(fieldName[0]);154 }155 const isChildOfComponent = fieldName.length > 1;156 if (isChildOfComponent) {157 const parentFieldName = take(fieldName, fieldName.length - 1).join('.');158 return readableFields.includes(parentFieldName);159 }160 return false;161 }, [readableFields, fieldName, isChildOfDynamicZone]);162 const shouldDisplayNotAllowedInput = useMemo(() => {163 return isUserAllowedToReadField || isUserAllowedToEditField;164 }, [isUserAllowedToEditField, isUserAllowedToReadField]);165 const shouldDisableField = useMemo(() => {166 if (!isCreatingEntry) {167 const doesNotHaveRight = isUserAllowedToReadField && !isUserAllowedToEditField;168 if (doesNotHaveRight) {169 return true;170 }171 return disabled;172 }173 return disabled;174 }, [disabled, isCreatingEntry, isUserAllowedToEditField, isUserAllowedToReadField]);175 const options = useMemo(() => {176 return get(attribute, 'enum', []).map(v => {177 return (178 <option key={v} value={v}>179 {v}180 </option>181 );182 });183 }, [attribute]);184 const otherFields = useMemo(() => {185 return fieldApi.getFields();186 }, [fieldApi]);187 if (regexpString) {188 const regexp = new RegExp(regexpString);189 if (regexp) {190 validations.regex = regexp;191 }192 }193 const { description, visible } = metadatas;194 if (visible === false) {195 return null;196 }197 if (!shouldDisplayNotAllowedInput) {198 return <NotAllowedInput label={metadatas.label} />;...
PreferencesMessagesSection.js
Source:PreferencesMessagesSection.js
...55 handleClockMode,56 handleSendOnEnter,57 handleMessageViewMode,58 } = handlers;59 const timeFormatOptions = useMemo(60 () => [61 [0, t('Default')],62 [1, t('12_Hour')],63 [2, t('24_Hour')],64 ],65 [t],66 );67 const sendOnEnterOptions = useMemo(68 () => [69 ['normal', t('Enter_Normal')],70 ['alternative', t('Enter_Alternative')],71 ['desktop', t('Only_On_Desktop')],72 ],73 [t],74 );75 const messageViewModeOptions = useMemo(76 () => [77 [0, t('Normal')],78 [1, t('Cozy')],79 [2, t('Compact')],80 ],81 [t],82 );83 commitRef.current.messages = commit;84 // TODO: Weird behaviour when saving clock mode, and then changing it.85 return (86 <Accordion.Item title={t('Messages')} {...props}>87 <FieldGroup>88 {useMemo(89 () => (90 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>91 <Field.Label>{t('Unread_Tray_Icon_Alert')}</Field.Label>92 <Field.Row>93 <ToggleSwitch checked={unreadAlert} onChange={handleUnreadAlert} />94 </Field.Row>95 </Field>96 ),97 [handleUnreadAlert, t, unreadAlert],98 )}99 {useMemo(100 () => (101 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>102 <Field.Label>{t('Show_Message_In_Main_Thread')}</Field.Label>103 <Field.Row>104 <ToggleSwitch105 checked={showMessageInMainThread}106 onChange={handleShowMessageInMainThread}107 />108 </Field.Row>109 </Field>110 ),111 [handleShowMessageInMainThread, showMessageInMainThread, t],112 )}113 {useMemo(114 () => (115 <Field>116 <Field.Label>{t('Message_TimeFormat')}</Field.Label>117 <Field.Row>118 <Select value={clockMode} onChange={handleClockMode} options={timeFormatOptions} />119 </Field.Row>120 </Field>121 ),122 [clockMode, handleClockMode, t, timeFormatOptions],123 )}124 {useMemo(125 () => (126 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>127 <Field.Label>{t('Use_Emojis')}</Field.Label>128 <Field.Row>129 <ToggleSwitch checked={useEmojis} onChange={handleUseEmojis} />130 </Field.Row>131 </Field>132 ),133 [handleUseEmojis, t, useEmojis],134 )}135 {useMemo(136 () => (137 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>138 <Field.Label>{t('Convert_Ascii_Emojis')}</Field.Label>139 <Field.Row>140 <ToggleSwitch checked={convertAsciiEmoji} onChange={handleConvertAsciiEmoji} />141 </Field.Row>142 </Field>143 ),144 [convertAsciiEmoji, handleConvertAsciiEmoji, t],145 )}146 {useMemo(147 () => (148 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>149 <Field.Label>{t('Auto_Load_Images')}</Field.Label>150 <Field.Row>151 <ToggleSwitch checked={autoImageLoad} onChange={handleAutoImageLoad} />152 </Field.Row>153 </Field>154 ),155 [autoImageLoad, handleAutoImageLoad, t],156 )}157 {useMemo(158 () => (159 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>160 <Field.Label>{t('Save_Mobile_Bandwidth')}</Field.Label>161 <Field.Row>162 <ToggleSwitch checked={saveMobileBandwidth} onChange={handleSaveMobileBandwidth} />163 </Field.Row>164 </Field>165 ),166 [handleSaveMobileBandwidth, saveMobileBandwidth, t],167 )}168 {useMemo(169 () => (170 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>171 <Field.Label>{t('Collapse_Embedded_Media_By_Default')}</Field.Label>172 <Field.Row>173 <ToggleSwitch174 checked={collapseMediaByDefault}175 onChange={handleCollapseMediaByDefault}176 />177 </Field.Row>178 </Field>179 ),180 [collapseMediaByDefault, handleCollapseMediaByDefault, t],181 )}182 {useMemo(183 () => (184 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>185 <Field.Label>{t('Hide_usernames')}</Field.Label>186 <Field.Row>187 <ToggleSwitch checked={hideUsernames} onChange={handleHideUsernames} />188 </Field.Row>189 </Field>190 ),191 [handleHideUsernames, hideUsernames, t],192 )}193 {useMemo(194 () =>195 showRoles && (196 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>197 <Field.Label>{t('Hide_roles')}</Field.Label>198 <Field.Row>199 <ToggleSwitch checked={hideRoles} onChange={handleHideRoles} />200 </Field.Row>201 </Field>202 ),203 [handleHideRoles, hideRoles, showRoles, t],204 )}205 {useMemo(206 () => (207 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>208 <Field.Label>{t('Hide_flextab')}</Field.Label>209 <Field.Row>210 <ToggleSwitch checked={hideFlexTab} onChange={handleHideFlexTab} />211 </Field.Row>212 </Field>213 ),214 [handleHideFlexTab, hideFlexTab, t],215 )}216 {useMemo(217 () => (218 <Field display='flex' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>219 <Field.Label>{t('Display_avatars')}</Field.Label>220 <Field.Row>221 <ToggleSwitch checked={displayAvatars} onChange={handleDisplayAvatars} />222 </Field.Row>223 </Field>224 ),225 [handleDisplayAvatars, displayAvatars, t],226 )}227 {useMemo(228 () => (229 <Field>230 <Field.Label>{t('Enter_Behaviour')}</Field.Label>231 <Field.Row>232 <Select233 value={sendOnEnter}234 onChange={handleSendOnEnter}235 options={sendOnEnterOptions}236 />237 </Field.Row>238 <Field.Hint>{t('Enter_Behaviour_Description')}</Field.Hint>239 </Field>240 ),241 [handleSendOnEnter, sendOnEnter, sendOnEnterOptions, t],242 )}243 {useMemo(244 () => (245 <Field>246 <Field.Label>{t('View_mode')}</Field.Label>247 <Field.Row>248 <Select249 value={messageViewMode}250 onChange={handleMessageViewMode}251 options={messageViewModeOptions}252 />253 </Field.Row>254 <Field.Hint>{t('Message_view_mode_info')}</Field.Hint>255 </Field>256 ),257 [handleMessageViewMode, messageViewMode, messageViewModeOptions, t],...
player_token_info.react.js
Source:player_token_info.react.js
...16import TokenPreview from '../token_preview.react';17const PlayerTokenInfo = props => {18 const [open, SetOpen] = useState(() => false);19 const player = GameRoom.player;20 const token = useMemo(() => GameRoom.tokens.find(t => t.name == player.name));21 const color = player.color;22 const [url, urlValid, handleURL] = useUrl(player);23 const run = useMemo(() => player.run);24 const fly = useMemo(() => player.fly);25 const runDistance = e => (player.run = Math.max(0, e.target.value));26 const flyDistance = e => (player.fly = Math.max(0, e.target.value));27 const intent = useMemo(() =>28 token && token.over ? Intent.PRIMARY : Intent.NONE29 );30 const gradient = useMemo(31 () => `linear-gradient(90deg,${color} 10px, rgba(0,0,0,0) 35px)`,32 [color]33 );34 const style = useMemo(() => {35 let s = {};36 Object.assign(s, props.style);37 Object.assign(s, {38 backgroundImage: `${gradient}`,39 });40 return s;41 });42 const result = useMemo(() => (token ? token.current_roll[0] : 0));43 const roll = useMemo(() => (token ? token.current_roll[1] : 0));44 const add = useMemo(() => (token ? token.current_roll[2] : 0));45 const roll_string = useMemo(() => `${result} = ${roll}(d20) + ${add}`);46 return (47 <Callout icon={null} className='token-callout' style={style}>48 <input49 className='bp3-button token-color'50 type='color'51 value={color}52 onChange={player.OnChangeColor}53 />54 <TokenPreview token={player} />55 <FormGroup>56 <div className='space-between'>57 <ButtonGroup>58 <SButton59 title={player.name}60 onClick={() => SetOpen(!open)}61 className='token-list-name'62 text={player.name}63 />64 <SButton65 title='Move to center'66 onClick={token ? token.MoveToCenter : undefined}67 icon='inheritance'68 disabled={!token}69 />70 <SButton71 title='Zoom to'72 onClick={token ? token.CenterOn : undefined}73 icon='locate'74 disabled={!token}75 />76 <SButton77 title='Roll Initiative'78 onClick={token ? token.RollInitiative : () => {}}79 icon='random'80 />81 </ButtonGroup>82 <Tag title={roll_string}>{result}</Tag>83 </div>84 <Collapse isOpen={open} className='layer-info'>85 <FormGroup inline={false} label='Image URL'>86 <SInput87 onChange={handleURL}88 placeholder='url...'89 type='text'90 value={url}91 intent={Intent.NONE}92 />93 </FormGroup>94 <PlayerVisionInfo {...props} />95 <FormGroup96 className='formatted double-num'97 inline={false}98 label='Travel'99 >100 <SInputDistance101 value={run}102 onChange={runDistance}103 className='small-number'104 leftIcon='walk'105 />106 <SInputDistance107 value={fly}108 onChange={flyDistance}109 className='small-number'110 leftIcon='airplane'111 />112 </FormGroup>113 </Collapse>114 </FormGroup>115 </Callout>116 );117};118const PlayerVisionInfo = props => {119 const player = GameRoom.player;120 const light = useMemo(() => player.vision[0]);121 const dim = useMemo(() => player.vision[1]);122 const dark = useMemo(() => player.vision[2]);123 const lightDistance = e => (player.vision[0] = Math.max(0, e.target.value));124 const dimDistance = e => (player.vision[1] = Math.max(0, e.target.value));125 const darkDistance = e => (player.vision[2] = Math.max(0, e.target.value));126 const light_color = Player.vision_colors[0];127 const dim_color = Player.vision_colors[1];128 const dark_color = Player.vision_colors[2];129 return (130 <>131 <FormGroup className='formatted double-num' inline={false} label='Vision'>132 <SInputDistance133 value={light}134 onChange={lightDistance}135 className='small-number3'136 leftIcon='circle'...
token_info.react.js
Source:token_info.react.js
...14import SInput, { SInputNumber } from '../../components/small_input.react';15import TokenPreview from '../token_preview.react';16const TokenInfo = props => {17 const [open, SetOpen] = useState(() => false);18 const token = useMemo(() => props.token);19 const name = useMemo(() => token.name, [token.name]);20 const x = useMemo(() => token.x, [token.x]);21 const y = useMemo(() => token.y, [token.y]);22 const size = useMemo(() => token.size, [token.size]);23 const visible = useMemo(() => token.visible, [token.visible]);24 const color = useMemo(() => token.color, [token.color]);25 const [url, urlValid, handleURL] = useUrl(token);26 const intent = useMemo(() => (token.over ? Intent.PRIMARY : Intent.NONE), [27 token.over,28 ]);29 const gradient = useMemo(30 () => `linear-gradient(90deg,${color} 10px, rgba(0,0,0,0) 35px)`,31 [color]32 );33 const style = useMemo(() => ({34 backgroundImage: `${gradient}`,35 }));36 const result = useMemo(() => token.current_roll[0]);37 const roll = useMemo(() => token.current_roll[1]);38 const add = useMemo(() => token.current_roll[2]);39 const roll_string = useMemo(() => `${result} = ${roll}(d20) + ${add}`);40 return (41 <Callout42 intent={intent}43 icon={null}44 className='token-callout'45 style={style}46 >47 <input48 className='bp3-button token-color'49 type='color'50 value={color}51 onChange={token.OnChangeColor}52 />53 <TokenPreview token={token} />...
UseMemoH.jsx
Source:UseMemoH.jsx
2import ReactCode from "../../../../components/ReactCode";3export default function UseMemoH() {4 const [x, setx] = useState(0);5 const [y, sety] = useState(100);6 const multiplication = useMemo(() => {7 alert("Multiplication of x function with useMemo hook");8 return x * 200;9 }, [x]);10 return (11 <>12 <h1>useMemo hook</h1>13 <ul data-ul="what is useMemo hook">14 <li>useMemo hook is same like pure component but only for function component</li>15 <li>useMemo hook is prevent to unnecessary calling functions in component</li>16 </ul>17 <ul data-ul="useMemo syntax"></ul>18 <ReactCode19 file="Syntax"20 dot="jsx"21 code={`22 const variableName = useMemo(() => {23 //code here24 },[state (or) props variableName]);25 `}26 />27 <ul data-ul="how to use useMemo hook"></ul>28 <ReactCode29 file="Example"30 dot="jsx"31 code={`32 import React, { useState, useMemo } from "react";33 34 export default function Example() {35 const [x, setx] = useState(0);36 const [y, sety] = useState(100);37 //function without useMemo: calling every time ,every state (x,y)38 const multi = () => {39 return x * 200;40 };41 //function with useMemo: calling only x state change42 const multi = useMemo(() => {43 return x * 200;44 }, [x]);45 return (46 <>47 <p>x : {x}</p>48 <p>y : {y}</p> 49 <p>without useMemo x : {multi()}</p>50 <p>with useMemo x : {multi}</p>51 <button onClick={() => setx(x + 1)}>change x value</button>52 <button onClick={() => sety(y + 1)}>change y value</button>53 </>54 )55 }56 ...
App.js
Source:App.js
...17const App = () => {18 const [count, setCount] = useState(0);19 const click = () => setCount(count + 1);20 //21 const memoChild = useMemo(() => {22 return <Child />;23 // add a state in this dependency and it will re-render as normal24 }, []);25 const normalChild = <Child />;26 //27 return (28 <div className="App">29 <div>30 <Button onClick={click}>Increase count</Button> <>count : {count}</>31 </div>32 <header>33 <h3>Use Memo: <>{memoChild}</></h3>34 <h3>Normal Render: <>{normalChild}</></h3>35 </header>...
register.js
Source:register.js
...6 return;7 }8 registerForm({9 useCustomFieldsAdditionalForm: () =>10 useMemo(() => lazy(() => import('./CustomFieldsAdditionalFormContainer')), []),11 });12 registerForm({13 useMaxChatsPerAgent: () => useMemo(() => lazy(() => import('./MaxChatsPerAgentContainer')), []),14 });15 registerForm({16 useMaxChatsPerAgentDisplay: () =>17 useMemo(() => lazy(() => import('./MaxChatsPerAgentDisplay')), []),18 });19 registerForm({20 useEeNumberInput: () => useMemo(() => lazy(() => import('./EeNumberInput')), []),21 });22 registerForm({23 useEeTextAreaInput: () => useMemo(() => lazy(() => import('./EeTextAreaInput')), []),24 });25 registerForm({ useEeTextInput: () => useMemo(() => lazy(() => import('./EeTextInput')), []) });26 registerForm({27 useBusinessHoursMultiple: () =>28 useMemo(() => lazy(() => import('./BusinessHoursMultipleContainer')), []),29 });30 registerForm({31 useBusinessHoursTimeZone: () =>32 useMemo(() => lazy(() => import('./BusinessHoursTimeZone')), []),33 });34 registerForm({35 useContactManager: () => useMemo(() => lazy(() => import('./ContactManager')), []),36 });37 registerForm({38 useCurrentChatTags: () => useMemo(() => lazy(() => import('../tags/CurrentChatTags')), []),39 });40 registerForm({41 useDepartmentBusinessHours: () =>42 useMemo(() => lazy(() => import('./DepartmentBusinessHours')), []),43 });44 registerForm({45 useDepartmentForwarding: () => useMemo(() => lazy(() => import('./DepartmentForwarding')), []),46 });47 registerForm({48 usePrioritiesSelect: () => useMemo(() => lazy(() => import('./PrioritiesSelect')), []),49 });...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Sign in');7 await page.fill('input[name="identifier"]', 'username');8 await page.click('input[type="submit"]');9 await page.fill('input[name="password"]', 'password');10 await page.click('input[type="submit"]');11 await page.click('text=Sign in');12 await page.waitForNavigation();13 await page.click('text=Search');14 await page.fill('input[name="q"]', 'playwright');15 await page.click('input[type="submit"]');16 await page.waitForNavigation();17 await page.click('text=Playwright');18 await page.waitForNavigation();19 await page.click('text=Docs');20 await page.waitForNavigation();21 await page.click('text=API');22 await page.waitForNavigation();23 await page.click('text=Internal API');24 await page.waitForNavigation();25 await page.click('text=useMemo');26 await page.waitForNavigation();27 await browser.close();28})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: `google.png` });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: `google.png` });15 await browser.close();16})();
Using AI Code Generation
1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const results = await page.evaluate(async () => {7 const {useMemo} = require('playwright');8 return useMemo(() => {9 return 1 + 2;10 });11 });12 console.log(results);13 await browser.close();14})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const element = await page.$('text=Get started');6 const rect = await page.evaluate(element => {7 const rect = element.getBoundingClientRect();8 return {9 };10 }, element);11 console.log(rect);12 await browser.close();13})();14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch();17 const page = await browser.newPage();18 const element = await page.$('text=Get started');19 const rect = await page.evaluate(element => {20 const rect = element.getBoundingClientRect();21 return {22 };23 }, await element.evaluateHandle(element => element));24 console.log(rect);25 await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29 const browser = await chromium.launch();30 const page = await browser.newPage();31 const element = await page.$('text=Get started');32 const rect = await page.evaluate(element => {33 const rect = element.getBoundingClientRect();34 return {35 };36 }, await element.evaluateHandle(element => element));37 console.log(rect);
Using AI Code Generation
1const playwright = require('playwright');2const fs = require('fs');3(async () => {4 const browser = await playwright.chromium.launch({ headless: false });5 const context = await browser.newContext({ ignoreHTTPSErrors: true });6 const page = await context.newPage();7 await page.waitForSelector('input[name="q"]');8 await page.fill('input[name="q"]', 'Playwright');9 await page.click('input[value="Google Search"]');10 await page.waitForSelector('text="Playwright - Google Search"');11 const [response] = await Promise.all([12 page.waitForResponse('**/search**'),13 page.click('text="Next"'),14 ]);15 const body = await response.body();16 fs.writeFileSync('google-response.json', body);17 await browser.close();18})();19const playwright = require('playwright');20const fs = require('fs');21(async () => {22 const browser = await playwright.chromium.launch({ headless: false });23 const context = await browser.newContext({ ignoreHTTPSErrors: true });24 const page = await context.newPage();25 await page.waitForSelector('input[name="q"]');26 await page.fill('input[name="q"]', 'Playwright');27 await page.click('input[value="Google Search"]');28 await page.waitForSelector('text="Playwright - Google Search"');29 const [response] = await Promise.all([30 page.waitForResponse('**/search**'),31 page.click('text="Next"'),32 ]);33 const body = await response.body();34 fs.writeFileSync('google-response.json', body);35 await browser.close();36})();37const playwright = require('playwright');38const fs = require('fs');39(async () => {40 const browser = await playwright.chromium.launch({ headless: false });41 const context = await browser.newContext({ ignoreHTTPSErrors: true });42 const page = await context.newPage();43 await page.waitForSelector('input[name="q"]');44 await page.fill('input[name="q"]', 'Playwright');45 await page.click('input
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 const browser = await playwright['chromium'].launch();4 const page = await browser.newPage();5 const context = await page.context();6 const client = await context.newCDPSession(page);7 await client.send('Network.enable');8 await client.send('Network.setCacheDisabled', { cacheDisabled: true });9 await browser.close();10})();11const playwright = require('playwright');12(async () => {13 const browser = await playwright['chromium'].launch();14 const page = await browser.newPage();15 const context = await page.context();16 const client = await context.newCDPSession(page);17 await client.send('Network.enable');18 await client.send('Network.setCacheDisabled', { cacheDisabled: true });19 await browser.close();20})();21const playwright = require('playwright');22(async () => {23 const browser = await playwright['chromium'].launch();24 const page = await browser.newPage();25 const context = await page.context();26 const client = await context.newCDPSession(page);27 await client.send('Network.enable');28 await client.send('Network.setCacheDisabled', { cacheDisabled: true });29 await browser.close();30})();31const playwright = require('playwright');32(async () => {33 const browser = await playwright['chromium'].launch();34 const page = await browser.newPage();35 const context = await page.context();36 const client = await context.newCDPSession(page);37 await client.send('Network.enable');38 await client.send('Network.setCacheDisabled', { cacheDisabled: true });39 await browser.close();40})();
Using AI Code Generation
1const { usePlaywright } = require("@playwright/test");2const { test, expect } = usePlaywright();3test("Test Case 1", async ({ page }) => {4 await page.waitForSelector("text=Get Started");5 await page.click("text=Get Started");6 await page.waitForSelector("text=Install");7 await page.click("text=Install");8 await page.waitForSelector("text=Install Playwright");9 await page.click("text=Install Playwright");10 await page.waitForSelector("text=Node.js");11 await page.click("text=Node.js");12 await page.waitForSelector("text=Install");13 await page.click("text=Install");14 await page.waitForSelector("text=Playwright is a Node library to automate");15 await page.click("text=Playwright is a Node library to automate");16 await page.waitForSelector("text=Playwright is a Node library to automate");17 await page.click("text=Playwright is a Node library to automate");18 await page.waitForSelector("text=Playwright is a Node library to automate");19 await page.click("text=Playwright is a Node library to automate");20 await page.waitForSelector("text=Playwright is a Node library to automate");21 await page.click("text=Playwright is a Node library to automate");22 await page.waitForSelector("text=Playwright is a Node library to automate");23 await page.click("text=Playwright is a Node library to automate");24 await page.waitForSelector("text=Playwright is a Node library to automate");25 await page.click("text=Playwright is a Node library to automate");26 await page.waitForSelector("text=Playwright is a Node library to automate");27 await page.click("text=Playwright is a Node library to automate");28 await page.waitForSelector("text=Playwright is a Node library to automate");29 await page.click("text=Playwright is a Node library to automate");30 await page.waitForSelector("text=Playwright is a Node library to automate");31 await page.click("text=Playwright is a Node library to automate");32 await page.waitForSelector("text=Playwright is a Node library to automate");33 await page.click("text=Playwright is a Node library to automate");34 await page.waitForSelector("text=Playwright is a Node library to automate
Using AI Code Generation
1const { chromium, webkit, firefox } = require('playwright');2const { usePlaywright } = require('playwright-internal');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.screenshot({ path: `example.png` });8 await browser.close();9})();10const { chromium, webkit, firefox } = require('playwright');11const { usePlaywright } = require('playwright-internal');12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 await page.screenshot({ path: `example.png` });17 await browser.close();18})();19const { chromium, webkit, firefox } = require('playwright');20const { usePlaywright } = require('playwright-internal');21(async () => {22 const browser = await chromium.launch();23 const context = await browser.newContext();24 const page = await context.newPage();25 await page.screenshot({ path: `example.png` });26 await browser.close();27})();28const { chromium, webkit, firefox } = require('playwright');29const { usePlaywright } = require('playwright-internal');30(async () => {31 const browser = await chromium.launch();32 const context = await browser.newContext();33 const page = await context.newPage();34 await page.screenshot({ path: `example.png` });35 await browser.close();36})();37const { chromium, webkit
Using AI Code Generation
1const { use } = require('playwright');2const {useMem} = require('playwright/lib/server/chromium/crBrowser');3use(useMem);4const { chromium } = require('playwright');5(async () => {6 const browser = await chromium.launch();7 const context = await browser.newContext();8 const page = await context.newPage();9 await page.screenshot({ path: 'example.png' });10 await browser.close();11})();
Using AI Code Generation
1const { Page } = require('@playwright/test');2const { useInternal } = require('@playwright/test/lib/server/trace/recorder/recorder');3const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');4const page = new Page();5const internal = useInternal(page);6const { chromium } = require('playwright');7const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');8const browser = await chromium.launch();9const context = await browser.newContext();10const page = await context.newPage();11const { Page } = require('@playwright/test');12const { useInternal } = require('@playwright/test/lib/server/trace/recorder/recorder');13const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');14const page = new Page();15const internal = useInternal(page);16const { chromium } = require('playwright');17const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');18const browser = await chromium.launch();19const context = await browser.newContext();20const page = await context.newPage();21const { Page } = require('@playwright/test');22const { useInternal } = require('@playwright/test/lib/server/trace/recorder/recorder');23const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');24const page = new Page();25const internal = useInternal(page);26const { chromium } = require('playwright');27const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');28const browser = await chromium.launch();29const context = await browser.newContext();30const page = await context.newPage();31const { Page } = require('@playwright/test');32const { useInternal } = require('@playwright/test/lib/server/trace/recorder/recorder');33const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');34const page = new Page();35const internal = useInternal(page);36const { chromium } = require('playwright');37const { setDefaultTimeout } = require('@playwright/test/lib/utils/utils');
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
