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

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

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input, InputChangeEvent, Switch } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  password: string,
+  confirmPassword: string,
+  success: boolean
+}
+
+class App extends React.Component {
+  state: AppState = {
+    password: '',
+    confirmPassword: '',
+    success: false
+  }
+
+  render() {
+    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";
+
+    return (
+      <div className="row example-wrapper">
+        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
+          <div className="card">
+            <div className="card-block">
+              <form className="k-form" onSubmit={this.handleSubmit}>
+                <fieldset>
+                  <legend>Create new account:</legend>
+                  <div className="mb-3">
+                    <Input
+                      validityStyles={false}
+                      name="username"
+                      style={{ width: "100%" }}
+                      label="First Name"
+                      pattern={"[A-Za-z]+"}
+                      minLength={2}
+                      required={true}
+                      validationMessage={usernameValidationMessage}
+                                    />
+                  </div>
+                  <div className="mb-3">
+                    <Input
+                      validityStyles={false}
+                      value={this.state.password}
+                      onChange={this.handleChange}
+                      name="password"
+                      type="password"
+                      style={{ width: '100%' }}
+                      label="Password"
+                      required={true}
+                      minLength={6}
+                      maxLength={18}
+                      validationMessage={passwordValidationMessage}
+                                    />
+                  </div>
+                  <div className="mb-3">
+                    <Input
+                      validityStyles={false}
+                      value={this.state.confirmPassword}
+                      onChange={this.handleChange}
+                      name="confirmPassword"
+                      type="password"
+                      style={{ width: '100%' }}
+                      label="Confirm Password"
+                      valid={!!this.state.password && this.state.password === this.state.confirmPassword}
+                      minLength={6}
+                      maxLength={18}
+                      validationMessage={confirmPasswordValidationMessage}
+                                    />
+                  </div>
+                  <div className="mb-3">
+                    <Input
+                      validityStyles={false}
+                      name="email"
+                      type="email"
+                      style={{ width: '100%' }}
+                      label="Email address"
+                      required={true}
+                                    />
+                  </div>
+                  <div className="mb-3">
+                    <Switch
+                      id="switch1"
+                      name="switch"
+                      style={{ width: '100%' }}
+                      required={true}
+                      validityStyles={false}
+                                    />
+                    <span style={{ marginLeft: 10, fontSize: 12 }}>Keep me signed in</span>
+                  </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>
+          </div>
+        </div>
+        {this.state.success && (
+        <div
+          className="alert alert-success"
+          style={{ position: 'absolute' }}
+                >
+          Form submitted!
+        </div>)}
+      </div>
+    );
+  }
+
+  handleChange = (event: InputChangeEvent) => {
+    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/switch/forms/disable-styles/func/main.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Input, Switch } 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">
+          <div className="card">
+            <div className="card-block">
+              <form className="k-form" onSubmit={handleSubmit}>
+                <fieldset>
+                  <legend>Create new account:</legend>
+                  <div className="mb-3">
+                    <Input
+                      validityStyles={false}
+                      name="username"
+                      style={{ width: "100%" }}
+                      label="First Name"
+                      pattern={"[A-Za-z]+"}
+                      minLength={2}
+                      required={true}
+                      validationMessage={usernameValidationMessage}
+                    />
+                  </div>
+                  <div className="mb-3">
+                    <Input
+                      validityStyles={false}
+                      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
+                      validityStyles={false}
+                      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
+                      validityStyles={false}
+                      name="email"
+                      type="email"
+                      style={{ width: '100%' }}
+                      label="Email address"
+                      required={true}
+                    />
+                  </div>
+                  <div className="mb-3">
+                    <Switch
+                      id="switch1"
+                      name="switch"
+                      required={true}
+                      validityStyles={false}
+                    />
+                    <span style={{ marginLeft: 10, fontSize: 12 }}>Keep me signed in</span>
+                  </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>
+          </div>
+        </div>
+        {success && (
+        <div
+          className="alert alert-success"
+          style={{ position: 'absolute' }}
+        >
+          Form submitted!
+        </div>)}
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/switch/forms/kendo-react-form/class/main.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Form, Field } from "@progress/kendo-react-form";
+import { Input, Switch } from "@progress/kendo-react-inputs";
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = value =>
+  emailRegex.test(value) ? "" : "Please enter a valid email.";
+
+class EmailInput extends React.Component {
+  render() {
+    return (
+      <div>
+        <Input {...this.props} />
+        {this.props.visited && this.props.validationMessage && (
+          <div className={"k-required"}>{this.props.validationMessage}</div>
+        )}
+      </div>
+    );
+  }
+}
+
+class MyCustomSwitch extends React.Component {
+  render() {
+    return (
+      <div onFocus={this.props.onFocus} onBlur={this.props.onBlur}>
+        <Switch
+          onChange={this.onValueChange}
+          checked={this.props.value}
+          id={this.props.id}
+        />
+        {// Display an error message after the "visited" or "touched" field is set to true.
+        this.props.visited && this.props.validationMessage && (
+          <div className={"k-required"}>{this.props.validationMessage}</div>
+        )}
+      </div>
+    );
+  }
+  onValueChange = () => {
+    // onChange callback expects argument with 'value' property
+    this.props.onChange({ value: !this.props.value });
+  };
+}
+
+const requiredValidator = value => (value ? "" : "This field is required.");
+
+class App extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={this.handleSubmit}
+        render={formRenderProps => (
+          <form onSubmit={formRenderProps.onSubmit} className={"k-form"}>
+            <fieldset>
+              <legend>Please fill in the fields:</legend>
+              <div className="mb-3">
+                <Field
+                  name={"firstName"}
+                  component={Input}
+                  label={"First name"}
+                />
+              </div>
+              <div className="mb-3">
+                <Field
+                  name={"lastName"}
+                  component={Input}
+                  label={"Last name"}
+                />
+              </div>
+              <div className="mb-3">
+                <Field
+                  name={"email"}
+                  type={"email"}
+                  component={EmailInput}
+                  label={"Email"}
+                  validator={emailValidator}
+                />
+              </div>
+              <div className="mb-3">
+                <Field
+                  name={"keepMeSignedIn"}
+                  id={"termsinput"}
+                  component={MyCustomSwitch}
+                  validator={requiredValidator}
+                />
+                <span style={{ fontSize: 12 }}>Keep me signed in</span>
+              </div>
+            </fieldset>
+            <button
+              type={"submit"}
+              className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+              disabled={!formRenderProps.allowSubmit}
+            >
+              Submit
+            </button>
+          </form>
+        )}
+      />
+    );
+  }
+  handleSubmit = dataItem => alert(JSON.stringify(dataItem, null, 2));
+}
+
+ReactDOM.render(<App />, document.querySelector("my-app"));

package/docs/examples/switch/forms/kendo-react-form/func/main.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Form, Field, FormRenderProps } from '@progress/kendo-react-form';
+import { Input, Switch } from '@progress/kendo-react-inputs';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) => (emailRegex.test(value) ? "" : "Please enter a valid email.");
+const EmailInput = (fieldRenderProps) => {
+  const { validationMessage, visited, ...others } = fieldRenderProps;
+  return (
+    <div>
+      <Input {...others} />
+      {
+        visited && validationMessage &&
+          (<div className={"k-required"}>{validationMessage}</div>)
+      }
+    </div>
+  );
+};
+
+const MyCustomSwitch = (fieldRenderProps) => {
+    const {
+        // The meta props of the Field.
+        validationMessage, touched, visited, modified, valid,
+        // The input props of the Field.
+        value, onChange, onFocus, onBlur,
+        // The custom props that you passed to the Field.
+        ...others
+    } = fieldRenderProps;
+
+    const onValueChange = React.useCallback(
+        () => {
+            // onChange callback expects argument with 'value' property
+            onChange({value: !value});
+        },
+        [onChange, value]
+    );
+
+    return (
+      <div onFocus={onFocus} onBlur={onBlur}>
+        <Switch
+          onChange={onValueChange}
+          checked={value}
+          id={others.id}
+            />
+        {
+                // Display an error message after the "visited" or "touched" field is set to true.
+                (visited && validationMessage) && (
+                <div className={'k-required'}>
+                  {validationMessage}
+                </div>
+                )
+            }
+      </div>
+    );
+};
+
+const requiredValidator = (value) => value ? '' : 'This field is required.';
+
+const App = () => {
+    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
+    return (
+      <Form
+        onSubmit={handleSubmit}
+        render={(formRenderProps: FormRenderProps) => (
+          <form onSubmit={formRenderProps.onSubmit} className={'k-form'}>
+            <fieldset>
+              <legend>Please fill in the fields:</legend>
+              <div className="mb-3">
+                <Field name={'firstName'} component={Input} label={'First name'} />
+              </div>
+
+              <div className="mb-3">
+                <Field name={'lastName'} component={Input} label={'Last name'} />
+              </div>
+
+              <div className="mb-3">
+                <Field name={"email"} type={"email"} component={EmailInput} label={"Email"} validator={emailValidator} />
+              </div>
+              <div className="mb-3">
+                <Field
+                  name={'keepMeSignedIn'}
+                  id={'termsinput'}
+                  component={MyCustomSwitch}
+                  validator={requiredValidator}
+                            />
+                <span style={{ fontSize: 12 }}>Keep me signed in</span>
+              </div>
+            </fieldset>
+            <button
+              type={'submit'}
+              className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+              disabled={!formRenderProps.allowSubmit}
+                    >
+              Submit
+            </button>
+          </form>
+        )}
+      />
+    );
+};
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);
+

package/docs/examples/switch/keyboard/class/main.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { Switch } from '@progress/kendo-react-inputs';
+
+class App extends React.Component {
+  _switch;
+
+  componentDidMount() {
+    this._switch.element.focus();
+  }
+
+  render() {
+    return (
+      <Switch ref={(_switch) => { this._switch = _switch }} />
+    )
+  }
+}
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/switch/keyboard/func/main.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { Switch } from '@progress/kendo-react-inputs';
+
+const App = () => {
+  const ref = React.useRef<Switch>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  });
+
+  return (
+    <Switch ref={ref} />
+  )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/switch/labels/func/main.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { Switch } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <Switch onLabel={"I"} offLabel={"O"} />
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/switch/overview/basic/func/main.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { Switch } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <Switch />
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea } 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}
+        />
+        <TextArea
+          size={size}
+          fillMode={fillMode}
+          rounded={rounded}
+
+          style={{width: 200}}
+        />
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+  document.querySelector('my-app')
+);

package/docs/examples/textarea/auto-sizing/func/main.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <TextArea
+        autoSize={true}
+        rows={2}
+        />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/controlled/class/main.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea, TextAreaChangeEvent } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  value: string
+}
+class App extends React.Component {
+  state: AppState = {
+    value: ''
+  }
+
+  render() {
+    return (
+      <TextArea
+        value={this.state.value}
+        onChange={this.handleChange}
+        rows={2}
+      />
+    );
+  }
+
+  handleChange = (e: TextAreaChangeEvent) => {
+    this.setState({ value: e.value });
+  };
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/controlled/func/main.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea, TextAreaChangeEvent } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [value, setValue] = React.useState<string>('');
+
+    const handleChange = (e: TextAreaChangeEvent) => {
+        console.log(e.value);
+        setValue(e.value);
+    };
+
+    return (
+      <TextArea
+        value={value}
+        onChange={handleChange}
+        rows={2}
+      />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);