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

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

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Input, Checkbox } from '@progress/kendo-react-inputs';
-
-const App = () => {
-  const [password, setPassword]  = React.useState<string | undefined>('')
-  const [confirmPassword, setConfirmPassword] = React.useState<string>('');
-  const [success, setSuccess] = React.useState<boolean>(false)
-
-  const usernameValidationMessage = React.useMemo<string>(
-    () => "Your username should contain only letters",
-    []
-  );
-
-  const passwordValidationMessage = React.useMemo<string>(
-    () => "Please enter password between 6 and 16 characters",
-    []
-  );
-
-  const confirmPasswordValidationMessage =  React.useMemo<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 className="k-form-fieldset">
-            <legend className="k-form-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">
-              <Checkbox
-                validityStyles={false}
-                id="ch3"
-                name="checkbox"
-                required={true}
-                label={"Sign-up to our newsletter!"}
-                          />
-            </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/checkbox/forms/kendo-react-form/func/main.tsx

@@ -1,137 +0,0 @@
-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, Checkbox } from '@progress/kendo-react-inputs';
-import { Button } from '@progress/kendo-react-buttons';
-
-const firstNameValidator: (value: any) => string = (value) => !value ?
-  "First Name is required" :
-  value.length < 7 ? "First Name should be at least 7 characters long." : "";
-
-const lastNameValidator: (value: any) => string = (value) => !value ?
-  "Last Name is required" :
-  value.length < 7 ? "Last Name should be at least 7 characters long." : "";
-
-const checkboxValidator: (value: any) => string = (value) => !value ?
-  "Terms&Conditions checkbox is required" : "";
-
-const FormInput = (fieldRenderProps) => {
-  const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, ...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}
-          ariaDescribedBy={`${hindId} ${errorId}`}
-          {...others}
-              />
-        {
-          showHint &&
-          <Hint id={hindId}>{hint}</Hint>
-        }
-        {
-          showValidationMessage &&
-          <Error id={errorId}>{validationMessage}</Error>
-        }
-      </div>
-    </FieldWrapper>
-  );
-};
-
-const FormCheckbox = (fieldRenderProps) => {
-  const { validationMessage, touched, id, valid, disabled, hint, optional, label, ...others } = fieldRenderProps;
-
-  const showValidationMessage = touched && validationMessage;
-  const showHint = !showValidationMessage && hint;
-  const fullLabel = <span>{label}{optional ? <span className={'k-label-optional'}>(Optional)</span> : ''}</span>;
-  const hindId = showHint ? `${id}_hint` : '';
-  const errorId = showValidationMessage ? `${id}_error` : '';
-
-  return (
-    <FieldWrapper>
-      <Checkbox
-        ariaDescribedBy={`${hindId} ${errorId}`}
-        label={fullLabel}
-        valid={valid}
-        id={id}
-        disabled={disabled}
-        {...others}
-          />
-      {
-              showHint &&
-              <Hint id={hindId}>{hint}</Hint>
-          }
-      {
-              showValidationMessage &&
-              <Error id={errorId}>{validationMessage}</Error>
-          }
-    </FieldWrapper>
-  );
-};
-
-const App = () => {
-  const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
-  return (
-    <Form
-      onSubmit={handleSubmit}
-      render={(formRenderProps) => (
-        <FormElement style={{ width: 400 }}>
-          <fieldset className={'k-form-fieldset'}>
-            <legend className={'k-form-legend'}>User Details</legend>
-            <Field
-              id={'firstName'}
-              name={'firstName'}
-              label={'First Name'}
-              component={FormInput}
-              validator={firstNameValidator}
-                      />
-            <Field
-              id={'lastName'}
-              name={'lastName'}
-              label={'Last Name'}
-              component={FormInput}
-              validator={lastNameValidator}
-                      />
-            <Field
-              id={'terms'}
-              name={'terms'}
-              label={'I agree with terms and conditions'}
-              hint={'Hint: By checking this, you agree to our Terms&Conditions'}
-              component={FormCheckbox}
-              validator={checkboxValidator}
-                      />
-            <div className="k-form-buttons">
-              <Button
-                themeColor={'primary'}
-                type={'submit'}
-                disabled={!formRenderProps.allowSubmit}
-                          >
-                Submit
-              </Button>
-              <Button onClick={formRenderProps.onFormReset}>
-                Clear
-              </Button>
-            </div>
-          </fieldset>
-        </FormElement>
-          )}
-      />
-  );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);
-

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

@@ -1,32 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { Checkbox } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  checkbox: any
-}
-
-class App extends React.Component {
-  state: AppState = {
-    checkbox: React.createRef()
-  }
-
-  componentDidMount() {
-    this.state.checkbox.element.focus();
-  }
-
-  render() {
-    return (
-      <div>
-        <Checkbox ref={(checkbox) => this.setState({ checkbox })} label="Initially focused" />
-        <br />
-        <Checkbox label="Secondary focused" />
-      </div>
-    )
-  }
-}
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,27 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { Checkbox } from '@progress/kendo-react-inputs';
-
-const App = () => {
-  const checkboxRef = React.useRef<any>(null);
-  
-  React.useEffect(() => {
-    if (checkboxRef.current) {
-      checkboxRef.current.focus();
-    }
-  });
-
-  return (
-    <div>
-      <Checkbox ref={checkboxRef} label="Initially focused" />
-      <br />
-      <Checkbox label="Secondary focused" />
-    </div>
-  )
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/checkbox/labels/custom/func/main.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { Checkbox } from '@progress/kendo-react-inputs';
-
-const App = () => {
-  return (
-    <div>
-      <Checkbox id={'chb1'}>
-        <label htmlFor={'chb1'} className={'k-checkbox-label'} style={{ 'display': 'inline-block' }}>
-          By clicking <a href="#">Sign Up</a>, you agree to our Terms and Conditions.
-        </label>
-      </Checkbox>
-    </div>
-  )
-}
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/checkbox/labels/setup/func/main.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { Checkbox } from '@progress/kendo-react-inputs';
-
-const App = () => {
-  return (
-    <div>
-      <Checkbox id={'chb1'} label={'Checkbox label'} />
-      <br />
-      <br />
-      <Checkbox id={'chb2'} label={'Checkbox label before'} labelPlacement={'before'} />
-    </div>
-  )
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Checkbox } from '@progress/kendo-react-inputs';
-
-const App = () => {
-  return (
-    <div>
-      <Checkbox label={'Unchecked state'}/>
-      <br />
-      <Checkbox defaultChecked={true} label={'Checked state'}/>
-      <br />
-      <Checkbox value={null} label={'Indeterminate state'}/>
-      <br />
-    </div>
-  );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorgradient/colorcontrast/class/main.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  foregroundColor: string,
-  backgroundColor: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    foregroundColor: 'rgba(49,118,122,1)',
-    backgroundColor: 'rgba(255,255,255,1)'
-  }
-
-  render() {
-    return (
-      <div className="row">
-        <div className="col-xs-12 col-md-6 example-col">
-          <p>Foreground Color</p>
-          <ColorGradient
-            value={this.state.foregroundColor}
-            onChange={this.onForegroundChange}
-            backgroundColor={this.state.backgroundColor}
-          />
-        </div>
-        <div className="col-xs-12 col-md-6 example-col">
-          <p>Background Color</p>
-          <ColorGradient
-            value={this.state.backgroundColor}
-            onChange={this.onBackgroundChange}
-            opacity={false}
-          />
-        </div>
-      </div>
-    )
-  }
-
-  onForegroundChange = (event: ColorGradientChangeEvent) => this.setState({ foregroundColor: event.value });
-
-  onBackgroundChange = (event: ColorGradientChangeEvent) => this.setState({ backgroundColor: event.value });
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorgradient/colorcontrast/func/main.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [foregroundColor, setForegroundColor] = React.useState<string>('rgba(49,118,122,1)');
-    const [backgroundColor, setBackgroundColor] = React.useState<string>('rgba(255,255,255,1)');
-
-    const handleForegroundChange = (event) => {
-        setForegroundColor(event.value);
-    };
-
-    const handleBackgroundChange = (event) => {
-        setBackgroundColor(event.value);
-    };
-
-    return (
-      <div className="row">
-        <div className="col-xs-12 col-md-6 example-col">
-          <p>Foreground Color</p>
-          <ColorGradient
-            value={foregroundColor}
-            onChange={handleForegroundChange}
-            backgroundColor={backgroundColor}
-          />
-        </div>
-        <div className="col-xs-12 col-md-6 example-col">
-          <p>Background Color</p>
-          <ColorGradient
-            value={backgroundColor}
-            onChange={handleBackgroundChange}
-            opacity={false}
-          />
-        </div>
-      </div>
-    )
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  value: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    value: 'rgba(195, 0, 47, 1)'
-  };
-
-  render() {
-    return (
-      <div>
-        <ColorGradient value={this.state.value} onChange={this.onChange} />
-      </div>
-    );
-  }
-
-  onChange = (event: ColorGradientChangeEvent) => this.setState({ value: event.value });
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,21 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [value, setValue] = React.useState<string>('rgba(195, 0, 47, 1)');
-
-    const handleOnChange = (event: ColorGradientChangeEvent) => setValue(event.value);
-
-    return (
-      <div>
-        <ColorGradient value={value} onChange={handleOnChange} />
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,17 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const value = 'rgba(195, 0, 47, 1)';
-
-    return (
-      <ColorGradient disabled={true} defaultValue={value} />
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorgradient/opacity/class/main.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  value: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    value: 'rgba(195, 0, 47, 1)'
-  };
-
-  render() {
-    return (
-      <div>
-        <div className="example-config">
-          <strong>Selected color: <span>{this.state.value}</span></strong>
-        </div>
-        <ColorGradient opacity={false} defaultValue={this.state.value} onChange={this.onChange} />
-      </div>
-    );
-  }
-
-  onChange = (event: ColorGradientChangeEvent) => this.setState({ value: event.value });
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorgradient/opacity/func/main.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [value, setValue] = React.useState<string>('rgba(195, 0, 47, 1)');
-
-    const handleOnChange = (event: ColorGradientChangeEvent) => setValue(event.value);
-
-    return (
-      <div>
-        <div className="example-config">
-          <strong>Selected color: <span>{value}</span></strong>
-        </div>
-        <ColorGradient opacity={false} defaultValue={value} onChange={handleOnChange} />
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorgradient/overview/class/main.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  value: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    value: 'rgba(195, 0, 47, 1)'
-  };
-
-  render() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <div style={{
-                backgroundColor: this.state.value,
-                width: '490px',
-                height: '290px',
-                backgroundImage: 'url("https://demos.telerik.com/kendo-ui/content/web/colorpicker/motor.png")'
-            }} />
-        <ColorGradient
-          defaultValue={this.state.value}
-          value={this.state.value}
-          onChange={this.onChange}
-          style={{ marginTop: '10px' }}
-            />
-      </div >
-    );
-  }
-
-  onChange = (event: ColorGradientChangeEvent) => {
-    this.setState({ value: event.value });
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,34 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorGradient, ColorGradientChangeEvent } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [value, setValue] = React.useState<string>('rgba(195, 0, 47, 1)');
-    
-    const handleOnChange = (event: ColorGradientChangeEvent) => {
-      setValue(event.value);
-    }
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <div style={{
-          backgroundColor: value,
-          width: '490px',
-          height: '290px',
-          backgroundImage: 'url("https://demos.telerik.com/kendo-ui/content/web/colorpicker/motor.png")'
-        }} />
-        <ColorGradient
-          defaultValue={value}
-          value={value}
-          onChange={handleOnChange}
-          style={{ marginTop: '10px' }}
-          />
-      </div >
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);