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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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