How to use useMemo method in Playwright Internal

Best JavaScript code snippet using playwright-internal

OutgoiongWebhookForm.js

Source:OutgoiongWebhookForm.js Github

copy

Full Screen

...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>...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...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} />;...

Full Screen

Full Screen

PreferencesMessagesSection.js

Source:PreferencesMessagesSection.js Github

copy

Full Screen

...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],...

Full Screen

Full Screen

player_token_info.react.js

Source:player_token_info.react.js Github

copy

Full Screen

...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'...

Full Screen

Full Screen

token_info.react.js

Source:token_info.react.js Github

copy

Full Screen

...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} />...

Full Screen

Full Screen

UseMemoH.jsx

Source:UseMemoH.jsx Github

copy

Full Screen

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 ...

Full Screen

Full Screen

App.js

Source:App.js Github

copy

Full Screen

...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>...

Full Screen

Full Screen

register.js

Source:register.js Github

copy

Full Screen

...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 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.

... 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