yup#mixed TypeScript Examples

The following examples show how to use yup#mixed. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: UserSettingsForm.tsx    From End-to-End-Web-Testing-with-Cypress with MIT License 6 votes vote down vote up 
validationSchema = object({
  firstName: string().required("Enter a first name"),
  lastName: string().required("Enter a last name"),
  email: string().email("Must contain a valid email address").required("Enter an email address"),
  phoneNumber: string()
    .matches(phoneRegExp, "Phone number is not valid")
    .required("Enter a phone number"),
  defaultPrivacyLevel: mixed<DefaultPrivacyLevel>().oneOf(DefaultPrivacyLevelValues),
})
Example #2
Source File: BillingForm.tsx    From storefront with MIT License 6 votes vote down vote up 
validationSchema: SchemaOf<Omit<CustomerAddressInput, 'overwrite'>> = object({
  address1: string().label('Street address').max(100).required(),
  address2: string().min(0).max(254).nullable(),
  city: string().label('City').max(25).required(),
  company: string().label('Company').min(0).max(35).nullable(),
  country: mixed().label('Country').oneOf(Object.values(CountriesEnum)).required(),
  email: string().label('Email').email().min(11).max(254).required(),
  firstName: string().label('First name').max(35).required(),
  lastName: string().label('Last name').max(35).required(),
  phone: string().label('Phone number').min(10).max(15).required(),
  postcode: string().label('Postcode').min(2).max(9).required(),
  state: string().label('State').min(0).max(254).nullable(),
})
Example #3
Source File: ShippingForm.tsx    From storefront with MIT License 6 votes vote down vote up 
validationSchema: SchemaOf<Omit<CustomerAddressInput, 'email' | 'overwrite' | 'phone'>> =
  object({
    address1: string().label('Street address').max(100).required(),
    address2: string().min(0).max(254),
    city: string().label('City').max(25).required(),
    company: string().label('Company').min(0).max(35),
    country: mixed().label('Country').oneOf(Object.values(CountriesEnum)).required(),
    firstName: string().label('First name').max(35).required(),
    lastName: string().label('Last name').max(35).required(),
    postcode: string().label('Postcode').min(2).max(9).required(),
    state: string().label('State').min(0).max(254),
  })
Example #4
Source File: commonFormSchemes.ts    From netify with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
requestBodySchema = object({
	type: mixed<'Original' | RequestBodyType>().oneOf(['Original', ...requestBodyTypesList]),
	textValue: string(),
	formValue: array().of(
		object({
			key: string().when('value', {
				is(value) {
					return !value;
				},
				then: string(),
				otherwise: string().required('Key is required when the value is not empty'),
			}),
			value: string(),
		}),
	),
})
Example #5
Source File: commonFormSchemes.ts    From netify with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
responseBodySchema = object({
	type: mixed<'Original' | ResponseBodyType>().oneOf(['Original', ...responseBodyTypesList]),
	textValue: string().when('type', {
		is: ResponseBodyType.Base64,
		then: string().matches(/^[A-Za-z0-9+/]*(={1,3})?$/, 'Invalid Base 64'),
		otherwise: string(),
	}),
	fileValue: mixed<File>().notRequired(),
})
Example #6
Source File: index.tsx    From youtube-2020-june-multi-step-form-formik with MIT License 5 votes vote down vote up 
export default function Home() {
  return (
    <Card>
      <CardContent>
        <FormikStepper
          initialValues={{
            firstName: '',
            lastName: '',
            millionaire: false,
            money: 0,
            description: '',
          }}
          onSubmit={async (values) => {
            await sleep(3000);
            console.log('values', values);
          }}
        >
          <FormikStep label="Personal Data">
            <Box paddingBottom={2}>
              <Field fullWidth name="firstName" component={TextField} label="First Name" />
            </Box>
            <Box paddingBottom={2}>
              <Field fullWidth name="lastName" component={TextField} label="Last Name" />
            </Box>
            <Box paddingBottom={2}>
              <Field
                name="millionaire"
                type="checkbox"
                component={CheckboxWithLabel}
                Label={{ label: 'I am a millionaire' }}
              />
            </Box>
          </FormikStep>
          <FormikStep
            label="Bank Accounts"
            validationSchema={object({
              money: mixed().when('millionaire', {
                is: true,
                then: number()
                  .required()
                  .min(
                    1_000_000,
                    'Because you said you are a millionaire you need to have 1 million'
                  ),
                otherwise: number().required(),
              }),
            })}
          >
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="money"
                type="number"
                component={TextField}
                label="All the money I have"
              />
            </Box>
          </FormikStep>
          <FormikStep label="More Info">
            <Box paddingBottom={2}>
              <Field fullWidth name="description" component={TextField} label="Description" />
            </Box>
          </FormikStep>
        </FormikStepper>
      </CardContent>
    </Card>
  );
}
Example #7
Source File: ruleFormSchema.ts    From netify with BSD 2-Clause "Simplified" License 5 votes vote down vote up 
ruleFormSchema = object({
	label: string().notRequired(),
	filter: object({
		url: string(),
		resourceTypes: array().of(mixed<ResourceType>().oneOf(resourceTypesList)),
		methods: array().of(mixed<RequestMethod>().oneOf(requestMethodsList)),
	}),
	actionType: mixed<RuleActionsType>().oneOf(ruleActionsTypesList),
	actionConfigs: object({
		[RuleActionsType.Breakpoint]: object({
			stage: mixed<BreakpointStage>()
				.oneOf(breakpointStagesList)
				.default(BreakpointStage.Both),
		}),
		[RuleActionsType.Mutation]: object({
			request: object({
				endpoint: string().matches(
					/^((https?:)|(\[protocol]))\/\/.+/,
					'The endpoint url should be started with a protocol (or suitable macros) and have a hostname',
				),
				method: mixed<RequestMethod>()
					.oneOf(requestMethodsList)
					.notRequired(),
				setHeaders: headersSchema,
				dropHeaders: array().of(string()),
				body: requestBodySchema,
			}),
			response: object({
				statusCode: statusCodeSchema.notRequired(),
				setHeaders: headersSchema,
				dropHeaders: array().of(string()),
				body: responseBodySchema,
			}),
		}).required(),
		[RuleActionsType.LocalResponse]: object({
			statusCode: statusCodeSchema.required('Status code is required'),
			headers: headersSchema,
			body: responseBodySchema,
		}),
		[RuleActionsType.Failure]: object({
			reason: mixed<ResponseErrorReason>().oneOf(responseErrorReasonsList),
		}),
	}).required(),
}).required()
Example #8
Source File: index.tsx    From youtube-2020-june-material-ui-themes with MIT License 4 votes vote down vote up 
export default function Home() {
  return (
    <Card>
      <CardContent>
        <FormikStepper
          initialValues={{
            firstName: "",
            lastName: "",
            millionaire: false,
            money: 0,
            description: ""
          }}
          onSubmit={async values => {
            await sleep(3000);
            console.log("values", values);
          }}
        >
          <FormikStep label="Personal Data">
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="firstName"
                component={TextField}
                label="First Name"
              />
            </Box>
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="lastName"
                component={TextField}
                label="Last Name"
              />
            </Box>
            <Box paddingBottom={2}>
              <Field
                name="millionaire"
                type="checkbox"
                component={CheckboxWithLabel}
                Label={{ label: "I am a millionaire" }}
              />
            </Box>
          </FormikStep>
          <FormikStep
            label="Bank Accounts"
            validationSchema={object({
              money: mixed().when("millionaire", {
                is: true,
                then: number()
                  .required()
                  .min(
                    1_000_000,
                    "Because you said you are a millionaire you need to have 1 million"
                  ),
                otherwise: number().required()
              })
            })}
          >
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="money"
                type="number"
                component={TextField}
                label="All the money I have"
              />
            </Box>
          </FormikStep>
          <FormikStep label="More Info">
            <Box paddingBottom={2}>
              <Field
                fullWidth
                name="description"
                component={TextField}
                label="Description"
              />
            </Box>
          </FormikStep>
        </FormikStepper>
      </CardContent>
    </Card>
  );
}