@progress/kendo-react-inputs 5.7.0-sig.202208281415 → 5.7.0

package/docs/examples/numerictextbox/formats/func/main.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { NumericTextBox } from '@progress/kendo-react-inputs';
-import { NumberFormatOptions } from '@progress/kendo-react-intl';
-
-const App = () => {
-    const value = 5;
-    const percentage = 0.7;
-    const formatOptions: NumberFormatOptions = {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'name'
-    };
-
-    return (
-      <div>
-        <h6>Decimal</h6>
-        <NumericTextBox
-          width={200}
-          format="n2"
-          defaultValue={value}
-        />
-        <h6>Percentage</h6>
-        <NumericTextBox
-          width={200}
-          format="p"
-          defaultValue={percentage}
-          min={0}
-          max={1}
-          step={0.1}
-        />
-        <h6>Currency</h6>
-        <NumericTextBox
-          width={200}
-          defaultValue={value}
-          format="c2"
-          min={0}
-        />
-        <h6>Currency with format options</h6>
-        <NumericTextBox
-          width={200}
-          defaultValue={value}
-          min={0}
-          format={formatOptions}
-        />
-      </div>
-    );
-}
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/basic/class/main.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  success: boolean
-}
-
-class App extends React.Component {
-  state: AppState = {
-    success: false
-  };
-
-  render() {
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={this.handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  required={true}
-                                      />
-              </div>
-              <div className="mb-3">
-                <Input
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  required={true}
-                                      />
-              </div>
-              <div>
-                <NumericTextBox
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                                      />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {this.state.success && (
-          <div
-            className="alert alert-success"
-            style={{ position: 'absolute' }}
-                  >
-            Form submitted!
-          </div>)}
-      </div>
-    );
-  }
-
-  handleSubmit = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    this.setState({ success: true });
-    setTimeout(() => { this.setState({ success: false }); }, 3000);
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/basic/func/main.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [success, setSuccess] = React.useState<Boolean>(false);
-
-    const handleSubmit = (event) => {
-      event.preventDefault();
-      setSuccess(true);
-      setTimeout(() => { setSuccess(false); }, 3000);
-    }
-
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  required={true}
-                    />
-              </div>
-              <div className="mb-3">
-                <Input
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  required={true}
-                    />
-              </div>
-              <div>
-                <NumericTextBox
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                    />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {success && (
-        <div
-          className="alert alert-success"
-          style={{ position: 'absolute' }}
-        >
-          Form submitted!
-        </div>)}
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/custom-message/class/main.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  success: boolean
-}
-
-class App extends React.Component {
-  state: AppState = {
-    success: false
-  };
-
-  render() {
-    const firstNameValidationMessage: string = "Please enter your first name!";
-    const lastNameValidationMessage: string = "Please enter your first name!";
-    const ageValidationMessage: string = "Please enter your age!";
-
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={this.handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  required={true}
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  validationMessage={firstNameValidationMessage}
-                                    />
-              </div>
-              <div className="mb-3">
-                <Input
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                  required={true}
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  validationMessage={lastNameValidationMessage}
-                                    />
-              </div>
-              <div>
-                <NumericTextBox
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                  validationMessage={ageValidationMessage}
-                                    />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {this.state.success && (
-        <div
-          className="alert alert-success"
-          style={{ position: 'absolute' }}
-                >
-          Form submitted!
-        </div>)}
-      </div>
-    );
-  }
-
-  handleSubmit = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    this.setState({ success: true });
-    setTimeout(() => { this.setState({ success: false }); }, 3000);
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/custom-message/func/main.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [success, setSuccess] = React.useState<Boolean>(false);
-
-    const firstNameValidationMessage: string = "Please enter your first name!";
-    const lastNameValidationMessage: string = "Please enter your first name!";
-    const ageValidationMessage: string = "Please enter your age!";
-
-    const handleSubmit = (event) => {
-      event.preventDefault();
-      setSuccess(true);
-      setTimeout(() => { setSuccess(false); }, 3000);
-    }
-
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  required={true}
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  validationMessage={firstNameValidationMessage}
-                    />
-              </div>
-              <div className="mb-3">
-                <Input
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                  required={true}
-                  pattern={"[A-Za-z]+"}
-                  minLength={2}
-                  validationMessage={lastNameValidationMessage}
-                    />
-              </div>
-              <div>
-                <NumericTextBox
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                  validationMessage={ageValidationMessage}
-                    />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {success && (
-        <div
-          className="alert alert-success"
-          style={{ position: 'absolute' }}
-        >
-          Form submitted!
-        </div>)}
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/disable-styles/class/main.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input, NumericTextBoxChangeEvent, InputChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  firstName: string,
-  lastName: string,
-  age: number | null,
-  success: boolean
-}
-
-class App extends React.Component {
-  state: AppState = {
-    firstName: '',
-    lastName: '',
-    age: null,
-    success: false
-  };
-
-  render() {
-    const ageValidationMessage: string = "You must be over 18 years old!";
-
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={this.handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  value={this.state.firstName}
-                  onChange={this.handleChange}
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  pattern="[A-Za-z]{1,32}"
-                                    />
-              </div>
-              <div className="mb-3">
-                <Input
-                  value={this.state.lastName}
-                  onChange={this.handleChange}
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                                    />
-              </div>
-              <div>
-                <NumericTextBox
-                  validityStyles={false}
-
-                  value={this.state.age}
-                  onChange={this.handleChange}
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                  valid={!!this.state.age && this.state.age >= 18}
-                  validationMessage={this.state.age !== null
-                                            ? ageValidationMessage
-                                            : 'Please enter your age!'}
-                                    />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {this.state.success && (
-        <div
-          className="alert alert-success"
-          style={{ position: 'absolute' }}
-                >
-          Form submitted!
-        </div>)}
-      </div>
-    );
-  }
-
-  handleChange = (event: InputChangeEvent | NumericTextBoxChangeEvent) => {
-    if (event.target.name) {
-      this.setState({
-        [event.target.name]: event.target.value
-      });
-    }
-  }
-
-  handleSubmit = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    this.setState({ success: true });
-    setTimeout(() => { this.setState({ success: false }); }, 3000);
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/disable-styles/func/main.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [firstName, setFirstName] = React.useState<string>('');
-    const [lastName, setLastName] = React.useState<string>('');
-    const [age, setAge] = React.useState<number>(0);
-    const [success, setSuccess] = React.useState<boolean>(false);
-
-    const ageValidationMessage: string = "You must be over 18 years old!";
-
-    const handleChange = (event) => {
-        if (event.target.name === 'firstName') {
-          setFirstName(event.target.value);
-        } else if (event.target.name === 'lastName') {
-          setLastName(event.target.value);
-        } else if (event.target.name === 'age') {
-          setAge(event.target.value);
-        }
-    }
-
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        setSuccess(true);
-        setTimeout(() => { setSuccess(false); }, 3000);
-    }
-
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  value={firstName}
-                  onChange={handleChange}
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  pattern="[A-Za-z]{1,32}"
-                    />
-              </div>
-              <div className="mb-3">
-                <Input
-                  value={lastName}
-                  onChange={handleChange}
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                    />
-              </div>
-              <div>
-                <NumericTextBox
-                  validityStyles={false}
-                  value={age}
-                  onChange={handleChange}
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                  valid={age >= 18}
-                  validationMessage={age !== null ? ageValidationMessage : 'Please enter your age!'} />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {success && (
-        <div
-          className="alert alert-success"
-          style={{ position: 'absolute' }}
-        >
-          Form submitted!
-        </div>)}
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/numerictextbox/forms/override/class/main.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { NumericTextBox, Input, InputChangeEvent, NumericTextBoxChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  firstName: string,
-  lastName: string,
-  age: number | null,
-  success: boolean
-}
-
-class App extends React.Component {
-  state: AppState = {
-    firstName: '',
-    lastName: '',
-    age: null,
-    success: false
-  }
-
-  render() {
-    const ageValidationMessage: string = "You must be over 18 years old!";
-
-    return (
-      <div className="row example-wrapper">
-        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
-          <form className="k-form" onSubmit={this.handleSubmit}>
-            <fieldset>
-              <legend>Please fill in the fields:</legend>
-              <div className="mb-3">
-                <Input
-                  value={this.state.firstName}
-                  onChange={this.handleChange}
-                  name="firstName"
-                  style={{ width: "100%" }}
-                  label="First Name"
-                  pattern="[A-Za-z]{1,32}"
-                                    />
-              </div>
-              <div className="mb-3">
-                <Input
-                  value={this.state.lastName}
-                  onChange={this.handleChange}
-                  name="lastName"
-                  style={{ width: '100%' }}
-                  label="Last Name"
-                                    />
-              </div>
-              <div>
-                <NumericTextBox
-                  value={this.state.age}
-                  onChange={this.handleChange}
-                  name="age"
-                  width="100%"
-                  label="Age"
-                  required={true}
-                  valid={!!this.state.age && this.state.age >= 18}
-                  validationMessage={this.state.age !== null
-                                            ? ageValidationMessage
-                                            : 'Please enter your age!'}
-                                    />
-              </div>
-            </fieldset>
-            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
-          </form>
-        </div>
-        {this.state.success && (
-        <div
-          className="alert alert-success"
-          style={{ position: 'absolute' }}
-                >
-          Form submitted!
-        </div>)}
-      </div>
-    );
-  }
-
-  handleChange = (event: InputChangeEvent | NumericTextBoxChangeEvent) => {
-    if (event.target.name) {
-      this.setState({
-        [event.target.name]: event.target.value
-      });
-    }
-  }
-
-  handleSubmit = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    this.setState({ success: true });
-    setTimeout(() => { this.setState({ success: false }); }, 3000);
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);