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

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

@@ -1,129 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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')
-);