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

package/docs/examples/input/forms/override/func/main.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [password, setPassword] = React.useState<string>('');
+    const [confirmPassword, setConfirmPassword] = React.useState<string>('');
+    const [success, setSuccess] = React.useState<boolean>(false);
+
+    const usernameValidationMessage: string = "Your username should contain only letters!";
+    const passwordValidationMessage: string = "Please enter password between 6 and 16 characters!";
+    const confirmPasswordValidationMessage: string = "Passwords does not match!";
+
+
+    const handleChange = (event) => {
+      if (event.target.name === 'password') {
+        setPassword(event.target.value);
+      } else if (event.target.name === 'confirmPassword') {
+        setConfirmPassword(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>Create new account:</legend>
+              <div className="mb-3">
+                <Input
+                  name="username"
+                  style={{ width: "100%" }}
+                  label="First Name"
+                  pattern={"[A-Za-z]+"}
+                  minLength={2}
+                  required={true}
+                  validationMessage={usernameValidationMessage}
+                      />
+              </div>
+              <div className="mb-3">
+                <Input
+                  value={password}
+                  onChange={handleChange}
+                  name="password"
+                  type="password"
+                  style={{ width: '100%' }}
+                  label="Password"
+                  required={true}
+                  minLength={6}
+                  maxLength={18}
+                  validationMessage={passwordValidationMessage}
+                    />
+              </div>
+              <div className="mb-3">
+                <Input
+                  value={confirmPassword}
+                  onChange={handleChange}
+                  name="confirmPassword"
+                  type="password"
+                  style={{ width: '100%' }}
+                  label="Confirm Password"
+                  valid={password === confirmPassword}
+                  minLength={6}
+                  maxLength={18}
+                  validationMessage={confirmPasswordValidationMessage}
+                    />
+              </div>
+              <div className="mb-3">
+                <Input
+                  name="email"
+                  type="email"
+                  style={{ width: '100%' }}
+                  label="Email address"
+                  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/input/main/main.jsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { Input } from '@progress/kendo-react-inputs';
+
+class App extends React.Component {
+    render() {
+        return (
+          <Input />
+        )
+    }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/input/overview/func/main.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Form, Field, FormElement, FieldWrapper } from '@progress/kendo-react-form';
+import { Label, Hint, Error } from '@progress/kendo-react-labels';
+import { Input } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+
+const inputValidator = (value) => !value ?
+    "Please enter a text." : "";
+
+const FormInput = (fieldRenderProps) => {
+    const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, max, value, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hindId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
+        <div className={'k-form-field-wrap'}>
+          <Input
+            valid={valid}
+            type={type}
+            id={id}
+            disabled={disabled}
+            maxlength={max}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...others}
+                />
+          <Hint direction={'end'} style={{ position: 'absolute', right: 0 }}>{value.length} / {max}</Hint>
+          {
+                    showHint &&
+                    <Hint id={hindId}>{hint}</Hint>
+                }
+          {
+                    showValidationMessage &&
+                    <Error id={errorId}>{validationMessage}</Error>
+                }
+        </div>
+      </FieldWrapper>
+    );
+};
+
+const App = () => {
+    const max = 20;
+    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
+
+    return (
+      <Form
+        initialValues={{
+          username: ''
+        }}
+        onSubmit={handleSubmit}
+        render={(formRenderProps) => (
+          <FormElement style={{ width: 250, position: 'absolute' }}>
+            <fieldset className={'k-form-fieldset'}>
+              <Field
+                id={'username'}
+                name={'username'}
+                label={'Username:'}
+                max={max}
+                value={formRenderProps.valueGetter('username')}
+                hint={'Hint: Enter your text here'}
+                component={FormInput}
+                validator={inputValidator}
+                        />
+              <div className="k-form-buttons k-justify-content-end">
+                <Button
+                  themeColor={'primary'}
+                  type={'submit'}
+                  disabled={!formRenderProps.allowSubmit}
+                            >
+                  Send
+                </Button>
+              </div>
+            </fieldset>
+          </FormElement>
+            )}
+        />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/label/class/main.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input, NumericTextBox, TextArea } from '@progress/kendo-react-inputs';
+import { FloatingLabel } from '@progress/kendo-react-labels';
+
+class App extends React.Component {
+  state = {
+    numericValue: null,
+    inputValue: undefined,
+    textareaValue: undefined
+  }
+
+  render() {
+    return (
+      <div className="row">
+        <div className="m-2">
+          <p>NumericTextBox</p>
+          <FloatingLabel
+            label={'Expected Salary'}
+            editorId={'numeric-id'}
+            editorValue={this.state.numericValue}
+                >
+            <NumericTextBox
+              id={'numeric-id'}
+              format="c"
+              value={this.state.numericValue}
+              onChange={(e) => this.setState({ numericValue: e.value })}
+                    />
+          </FloatingLabel>
+        </div>
+        <div className="m-2">
+          <p>Input</p>
+          <FloatingLabel
+            label={'First Name'}
+            editorId={'input-id'}
+            editorValue={this.state.inputValue}
+                >
+            <Input
+              id={'input-id'}
+              value={this.state.inputValue}
+              onChange={(e) => this.setState({ inputValue: e.value })}
+                    />
+          </FloatingLabel>
+        </div>
+        <div className="m-2">
+          <p>TextArea</p>
+          <FloatingLabel
+            className={'k-textarea-container'}
+            label={'Address'}
+            editorId={'textarea-id'}
+            editorValue={this.state.textareaValue}
+                >
+            <TextArea
+              id={'textarea-id'}
+              value={this.state.textareaValue}
+              onChange={(e) => this.setState({ textareaValue: e.value })}
+                    />
+          </FloatingLabel>
+        </div>
+      </div >
+    );
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/label/func/main.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input, NumericTextBox, TextArea } from '@progress/kendo-react-inputs';
+import { FloatingLabel } from '@progress/kendo-react-labels';
+
+const App = () => {
+    const [numericValue, setNumericValue] = React.useState<any>(null);
+    const [inputValue, setInputValue] = React.useState<any>(null);
+    const [textAreaValue, setTextAreaValue] = React.useState<any>(null);
+        
+    return (
+      <div className="row">
+        <div className="m-2">
+          <p>NumericTextBox</p>
+          <FloatingLabel
+            label={'Expected Salary'}
+            editorId={'numeric-id'}
+            editorValue={numericValue}
+                >
+            <NumericTextBox
+              id={'numeric-id'}
+              format="c"
+              value={numericValue}
+              onChange={(e) => setNumericValue(e.value)}
+                    />
+          </FloatingLabel>
+        </div>
+        <div className="m-2">
+          <p>Input</p>
+          <FloatingLabel
+            label={'First Name'}
+            editorId={'input-id'}
+            editorValue={inputValue}
+          >
+            <Input
+              id={'input-id'}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.value)}
+            />
+          </FloatingLabel>
+        </div>
+        <div className="m-2">
+          <p>TextArea</p>
+          <FloatingLabel
+            className={'k-textarea-container'}
+            label={'Address'}
+            editorId={'textarea-id'}
+            editorValue={textAreaValue}
+          >
+            <TextArea
+              id={'textarea-id'}
+              value={textAreaValue}
+              onChange={(e) => setTextAreaValue(e.value)}
+            />
+          </FloatingLabel>
+        </div>
+      </div >
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/maskedtextbox/appearance/func/main.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { MaskedTextBox } from '@progress/kendo-react-inputs';
+
+import { StyleConfigurator } from './style-configurator';
+
+const App = () => {
+    const [size, setSize] = React.useState<'small' | 'medium' | 'large'>('medium');
+    const [fillMode, setFillMode] = React.useState<'solid' | 'outline' | 'flat'>('solid');
+    const [rounded, setRounded] = React.useState<'small' | 'medium' | 'large'>('medium');
+
+    return (
+      <div>
+        <StyleConfigurator
+          size={size}
+          onSizeChange={setSize}
+
+          fillMode={fillMode}
+          onFillModeChange={setFillMode}
+
+          rounded={rounded}
+          onRoundedChange={setRounded}
+        />
+        <MaskedTextBox
+          size={size}
+          fillMode={fillMode}
+          rounded={rounded}
+
+          width={200}
+          mask="(999) 000-00-00-00"
+          defaultValue="(359) 884-12-33-21"
+        />
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+  document.querySelector('my-app')
+);

package/docs/examples/maskedtextbox/disabled/func/main.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { MaskedTextBox } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <div>
+        <p>Phone number</p>
+        <MaskedTextBox
+          disabled={true}
+
+          width={200}
+          mask="(999) 000-00-00-00"
+          defaultValue="(359) 884-12-33-21"
+        />
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input, MaskedTextBox } 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"
+                  defaultValue="John"
+                  pattern="[A-Za-z]+"
+                  minLength={2}
+                  required={true}
+                                    />
+              </div>
+              <div className="mb-3">
+                <Input
+                  name="lastName"
+                  style={{ width: '100%' }}
+                  label="Last Name"
+                  defaultValue="Smith"
+                  pattern="[A-Za-z]+"
+                  minLength={2}
+                  required={true}
+                                    />
+              </div>
+              <div>
+                <MaskedTextBox
+                  name="postcode"
+                  width="100%"
+                  label="Postcode (A9 9AA)"
+                  required={true}
+                  mask="A9 9AA"
+                                    />
+              </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/maskedtextbox/forms/basic/func/main.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input, MaskedTextBox } 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"
+                  defaultValue="John"
+                  pattern="[A-Za-z]+"
+                  minLength={2}
+                  required={true}
+                                    />
+              </div>
+              <div className="mb-3">
+                <Input
+                  name="lastName"
+                  style={{ width: '100%' }}
+                  label="Last Name"
+                  defaultValue="Smith"
+                  pattern="[A-Za-z]+"
+                  minLength={2}
+                  required={true}
+                    />
+              </div>
+              <div>
+                <MaskedTextBox
+                  name="postcode"
+                  width="100%"
+                  label="Postcode (A9 9AA)"
+                  required={true}
+                  mask="A9 9AA"
+                    />
+              </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/maskedtextbox/forms/custom-message/class/main.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { MaskedTextBox, 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"
+                  defaultValue="John"
+                  required={true}
+                  pattern="[A-Za-z]+"
+                  minLength={2}
+                  validationMessage="Please enter your first name!"
+                                    />
+              </div>
+              <div className="mb-3">
+                <Input
+                  name="lastName"
+                  style={{ width: '100%' }}
+                  label="Last Name"
+                  defaultValue="Smith"
+                  required={true}
+                  pattern="[A-Za-z]+"
+                  minLength={2}
+                  validationMessage="Please enter your last name!"
+                                    />
+              </div>
+              <div>
+                <MaskedTextBox
+                  name="postcode"
+                  width="100%"
+                  required={true}
+                  validationMessage="Please enter your postcode!"
+                  label="Postcode (A9 9AA)"
+                  mask="A9 9AA"
+                                    />
+              </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')
+);