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

package/examples/checkbox/checkbox.tsx

@@ -0,0 +1,292 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import '@progress/kendo-theme-default/dist/all.css';
+
+import { Checkbox } from './../../src/main';
+
+class App extends React.Component {
+    state = {
+        value: true,
+        indeterminate: true
+    };
+
+    sectionStyles = {
+        maxWidth: 400,
+        display: 'inline-block',
+        margin: 20
+    };
+
+    _checkbox;
+
+    componentDidMount() {
+        this._checkbox.element.current && this._checkbox.element.current.focus();
+    }
+
+    toggleSwitch = (event: any) => {
+        this.setState({ value: event.value });
+    };
+
+    onSubmit = () => { return null; };
+
+    render() {
+        return (
+          <div>
+            <section style={this.sectionStyles}>
+              <form action="/action_page.php" onSubmit={this.onSubmit}>
+                <fieldset>
+                  <legend>Checkboxes props permutations</legend>
+                  <Checkbox
+                    id="ch1"
+                    value={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name1"
+                    label={'use boolean value prop as checked attribute (controlled mode)'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch2"
+                    value={'some'}
+                    checked={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name2"
+                    label={'both checked and value props results checked chb with value attribute (controlled mode)'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch3"
+                    checked={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name3"
+                    label={'controlled checked'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch4"
+                    name="name4"
+                    label={'nothing set'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch5"
+                    defaultChecked={this.state.value}
+                    name="name5"
+                    label={'defaultChecked (uncontrolled mode)'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch55"
+                    defaultValue={this.state.value}
+                    name="name5"
+                    label={'defaultValue boolean (uncontrolled mode)'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch55"
+                    defaultValue={'onn'}
+                    name="name5"
+                    label={'defaultValue string (uncontrolled mode)'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch25"
+                    name="name25"
+                    label={'required'}
+                    required={true}
+                    validationMessage="Custom Error"
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch27"
+                    name="name27"
+                    label={'required false'}
+                    required={false}
+                    validationMessage="Custom Error2"
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch26"
+                    name="name26"
+                    label={'required without validity styles'}
+                    required={true}
+                    validationMessage="Custom Error3"
+                    validityStyles={false}
+                            />
+                  <br />
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </form>
+            </section>
+
+            <section style={this.sectionStyles}>
+              <form action="/action_page.php" onSubmit={this.onSubmit}>
+                <fieldset>
+                  <legend>Disabled Checkboxes</legend>
+                  <Checkbox
+                    id="ch6"
+                    defaultChecked={true}
+                    disabled={true}
+                    tabIndex={0}
+                    name="name6"
+                    label={'disabledChecked'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch7"
+                    defaultChecked={false}
+                    disabled={true}
+                    name="name7"
+                    label={'disabledUnchecked'}
+                            />
+                  <br />
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </form>
+            </section>
+
+            <section style={this.sectionStyles}>
+              <form action="/action_page.php" onSubmit={this.onSubmit}>
+                <fieldset>
+                  <legend>Controlled Checkboxes</legend>
+                  <Checkbox
+                    id="ch8"
+                    value={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name1"
+                    label={'value'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch9"
+                    value={'some'}
+                    checked={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name2"
+                    label={'checked n value'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch10"
+                    checked={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name3"
+                    label={'checked'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch11"
+                    onChange={this.toggleSwitch}
+                    value={null}
+                    label={'indeterminate (value = null)'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch11"
+                    onChange={this.toggleSwitch}
+                    checked={null}
+                    label={'indeterminate (checked = null)'}
+                            />
+                  <br />
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </form>
+            </section>
+
+            <section style={this.sectionStyles}>
+              <form action="/action_page.php" onSubmit={this.onSubmit}>
+                <fieldset>
+                  <legend>Indeterminate Checkbox</legend>
+                  <Checkbox
+                    id="ch12"
+                    value={null}
+                    label={'indeterminate'}
+                            />
+                  <br />
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </form>
+            </section>
+
+            <section dir="rtl" style={this.sectionStyles}>
+              <form action="/action_page.php" onSubmit={this.onSubmit}>
+                <fieldset>
+                  <legend>RTL Checkboxes props permutations</legend>
+                  <Checkbox
+                    id="ch13"
+                    value={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name13"
+                    label={'value'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch14"
+                    value={'soomee'}
+                    checked={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name14"
+                    label={'checked n value'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch15"
+                    checked={this.state.value}
+                    onChange={this.toggleSwitch}
+                    name="name15"
+                    label={'checked'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch16"
+                    name="name16"
+                    label={'nothing set'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch17"
+                    defaultChecked={this.state.value}
+                    name="name17"
+                    label={'defaultChecked'}
+                            />
+
+                  <br />
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </form>
+            </section>
+
+            <section style={this.sectionStyles}>
+              <Checkbox
+                id="ch18"
+                ref={(_checkbox) => { this._checkbox = _checkbox; }}
+                label={'Test Keyboard Navigation'}
+                    />
+              <br />
+              <Checkbox
+                id="ch19"
+                labelPlacement={'before'}
+                label={'Label Placement before'}
+                    />
+              <br />
+              <Checkbox
+                id="ch20"
+                labelPlacement={'after'}
+                label={'Label Placement after'}
+                    />
+              <br />
+              <Checkbox
+                id="ch21"
+                className={'foo'}
+                label={'Custom foo class'}
+                    />
+              <br />
+            </section>
+          </div>
+        );
+    }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);

package/examples/checkbox/checkboxForm.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="checkboxForm.js"></script>
+</body>
+</html>

package/examples/checkbox/checkboxForm.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import '@progress/kendo-theme-default/dist/all.css';
+import { Error, Hint } from '@progress/kendo-react-labels';
+import { FieldWrapper } from '@progress/kendo-react-form';
+import { Button } from '@progress/kendo-react-buttons';
+
+import { Checkbox } from './../../src/main';
+import { Form, Field, FormElement } from '@progress/kendo-react-form';
+
+const FormCheckbox = (fieldRenderProps) => {
+    const { validationMessage, touched, id, valid, disabled, hint, optional, label, visited, modified, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hintId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+    const fullLabel = <a>{label}</a>;
+
+    return (
+      <FieldWrapper>
+        <Checkbox
+          ariaDescribedBy={`${hintId} ${errorId}`}
+          label={fullLabel}
+          valid={valid}
+          id={id}
+          disabled={disabled}
+          labelOptional={optional}
+          {...others}
+            />
+        {
+                showHint &&
+                <Hint id={hintId}>{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 }}>
+            <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}
+              optional={true}
+                    />
+            <div className="k-form-buttons">
+              <Button
+                themeColor={'primary'}
+                type={'submit'}
+                disabled={!formRenderProps.allowSubmit}
+                        >
+                Submit
+              </Button>
+              <Button onClick={formRenderProps.onFormReset}>
+                Clear
+              </Button>
+            </div>
+          </FormElement>
+            )}
+        />
+    );
+};
+App.displayName = 'App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);

package/examples/checkbox/checked-n-value.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="checked-n-value.js"></script>
+</body>
+</html>

package/examples/checkbox/checked-n-value.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import '@progress/kendo-theme-default/dist/all.css';
+
+import { Checkbox } from './../../src/main';
+
+class App extends React.Component {
+    state = {
+        value: true,
+        indeterminate: true
+    };
+
+    sectionStyles = {
+        maxWidth: 1000,
+        display: 'inline-block',
+        margin: 20
+    };
+
+    // _checkbox;
+
+    // componentDidMount() {
+    //     this._checkbox.element.current.focus();
+    // }
+
+    toggleSwitch = (event: any) => {
+        this.setState({ value: event.value });
+    };
+
+    onSubmit = () => { return null; };
+
+    render() {
+        return (
+          <div>
+            <section style={this.sectionStyles}>
+              <form action="/action_page.php" onSubmit={this.onSubmit}>
+                <fieldset>
+                  <legend>Checkboxes props permutations</legend>
+                  <Checkbox
+                    id="ch5555"
+                    checked={this.state.value}
+                    name="name5"
+                    label={'checked'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch5"
+                    defaultChecked={this.state.value}
+                    name="name5"
+                    label={'defaultChecked (uncontrolled mode)'}
+                            />
+                  <br />
+                  <br />
+                  <br />
+                  <Checkbox
+                    id="ch5a5"
+                    value={this.state.value}
+                    name="name5"
+                    label={'value is boolean and the `checked` property is omitted => sets the checked state of the Checkbox.'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch55"
+                    defaultValue={this.state.value}
+                    name="name5"
+                    label={'defaultValue boolean (uncontrolled mode)'}
+                            />
+                  <br />
+                  <br />
+                  <br />
+                  <Checkbox
+                    id="ch5155"
+                    value={'onn'}
+                    checked={this.state.value}
+                    name="name5"
+                    label={'value different than boolean (i.e. string) and the `checked` property is provided => value and checked are passed to the underlying `input` element.'}
+                            />
+                  <br />
+                  <Checkbox
+                    id="ch555"
+                    defaultValue={'onn'}
+                    checked={this.state.value}
+                    name="name5"
+                    label={'defaultValue string (uncontrolled mode)'}
+                            />
+                  <br />
+                  <br />
+                  <br />
+                  <Checkbox
+                    value={'some'}
+                    checked={!this.state.value}
+                    label={'unchecked when value is string and checked=false'}
+                            />
+                  <br />
+                  <Checkbox
+                    value={'some'}
+                    label={'unchecked when value is string and checked is ommited'}
+                            />
+                  <br />
+                  <Checkbox value={1} checked={true}/>
+                  <Checkbox value={['a', 'b', 'c']} checked={true}/>
+                  <Checkbox defaultValue={null}/>
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </form>
+            </section>
+          </div>
+        );
+    }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);

package/examples/checkbox/controlled-mode.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="controlled-mode.js"></script>
+</body>
+</html>

package/examples/checkbox/controlled-mode.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import '@progress/kendo-theme-default/dist/all.css';
+
+import { Checkbox } from './../../src/main';
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+  
+        this.state = {
+            value: true
+        };
+    }
+  
+    handleChange = event => {
+        console.log(event);
+        this.setState({ value: event.value });
+    };
+
+    handleButtonClick = () => {
+        console.log('button click', !this.state.value);
+        this.setState({ value: !this.state.value });
+    };
+  
+    render() {
+        return (
+          <div>
+            <button
+              className="k-button"
+              onClick={this.handleButtonClick}
+          >
+              Change value
+            </button>
+            <Checkbox
+              value={this.state.value}
+              onChange={this.handleChange}
+              label={'Controlled value'}
+          />
+
+            <Checkbox
+              checked={this.state.value}
+              onChange={this.handleChange}
+              label={'Controlled checked'}
+          />        
+
+            <div>
+              <Checkbox
+                defaultValue={true}
+                label={'Default value'}
+          />
+            </div>
+            <div>
+              <Checkbox
+                defaultChecked={false}
+                label={'Default checked'}
+          />
+            </div>
+          </div>
+        );
+    }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);
+  

package/examples/checkbox/form.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="form.js"></script>
+</body>
+</html>

package/examples/checkbox/form.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { FieldWrapper } from '@progress/kendo-react-form';
+import { Checkbox } from './../../src/main';
+import { Error, Hint } from '@progress/kendo-react-labels';
+import '@progress/kendo-theme-default/dist/all.css';
+
+import { Form, Field, FormElement } from '@progress/kendo-react-form';
+import { Button } from '@progress/kendo-react-buttons';
+
+export const FormCheckbox = (fieldRenderProps) => {
+    const { validationMessage, touched, id, valid, disabled, hint, optional, label, visited, modified, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hintId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Checkbox
+          ariaDescribedBy={`${hintId} ${errorId}`}
+          label={label}
+          labelOptional={optional}
+          valid={valid}
+          id={id}
+          disabled={disabled}
+          {...others}
+            />
+        {
+                showHint &&
+                <Hint id={hintId}>{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 }}>
+            <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}
+                    />
+            <div className="k-form-buttons">
+              <Button
+                themeColor={'primary'}
+                type={'submit'}
+                disabled={!formRenderProps.allowSubmit}
+                        >
+                Submit
+              </Button>
+              <Button onClick={formRenderProps.onFormReset}>
+                Clear
+              </Button>
+            </div>
+          </FormElement>
+            )}
+        />
+    );
+};
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);
+

package/examples/checkbox/formik.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="formik.js"></script>
+</body>
+</html>