feat(html): add html helper for multiselecttree

telerik · Apr 21, 2023 · 006014d · 006014d
1 parent 7223f5e
commit 006014d
Show file tree

Hide file tree

Showing 13 changed files with 927 additions and 0 deletions.
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
@@ -53,6 +53,7 @@ export * from './dropdownlist/index';
 export * from './dropdowntree/index';
 export * from './maskedtextbox/index';
 export * from './multiselect/index';
+export * from './multiselecttree/index';
 export * from './numerictextbox/index';
 // export * from './rating/index';
 export * from './searchbox/index';

diff --git a/packages/html/src/multiselecttree/index.ts b/packages/html/src/multiselecttree/index.ts
@@ -0,0 +1 @@
+export * from './multiselecttree.spec';
diff --git a/packages/html/src/multiselecttree/multiselecttree.spec.tsx b/packages/html/src/multiselecttree/multiselecttree.spec.tsx
@@ -0,0 +1,150 @@
+import { classNames, States, Size, Roundness, FillMode } from '../utils';
+import {
+    Input,
+    InputClearValue,
+    InputLoadingIcon,
+    InputPrefix,
+    InputSuffix,
+    InputValidationIcon
+} from '../input';
+import { Button } from '../button';
+import { ChipList } from '../chip';
+import { Popup } from '../popup';
+
+export const MULTISELECTTREE_CLASSNAME = `k-multiselecttree`;
+
+const states = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+];
+
+const options = {
+    size: [ Size.small, Size.medium, Size.large ],
+    rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
+    fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline ],
+};
+
+const defaultProps = {
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+};
+
+export type KendoMultiSelectTreeOptions = {
+    size?: (typeof options.size)[number] | null;
+    rounded?: (typeof options.rounded)[number] | null;
+    fillMode?: (typeof options.fillMode)[number] | null;
+};
+
+export type KendoMultiSelectTreeProps = KendoMultiSelectTreeOptions & {
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+    type?: string;
+    placeholder?: string;
+    tags?: JSX.Element;
+    popup?: JSX.Element;
+    showArrowButton?: boolean;
+    opened?: boolean;
+};
+
+export type KendoMultiSelectTreeState = { [K in (typeof states)[number]]?: boolean };
+
+export const MultiSelectTree = (
+    props: KendoMultiSelectTreeProps &
+        KendoMultiSelectTreeState &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        prefix,
+        suffix,
+        placeholder,
+        tags,
+        popup,
+        size,
+        rounded,
+        fillMode,
+        showArrowButton,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        opened,
+        ...other
+    } = props;
+
+
+    return (
+        <>
+            <Input
+                {...other}
+                size={size}
+                rounded={rounded}
+                fillMode={fillMode}
+                hover={hover}
+                focus={focus}
+                valid={valid}
+                invalid={invalid}
+                required={required}
+                loading={loading}
+                disabled={disabled}
+                readonly={readonly}
+                className={classNames(props.className, MULTISELECTTREE_CLASSNAME)}
+            >
+                <InputPrefix>{prefix}</InputPrefix>
+                <ChipList size={size} className="k-input-values">
+                    <>
+                        {tags}
+                    </>
+                </ChipList>
+                <span className="k-input-inner">
+                    <span className="k-input-value-text">{placeholder}</span>
+                </span>
+                <InputValidationIcon
+                    valid={valid}
+                    invalid={invalid}
+                    loading={loading}
+                    disabled={disabled} />
+                <InputLoadingIcon
+                    loading={loading}
+                    disabled={disabled} />
+                <InputClearValue
+                    loading={loading}
+                    disabled={disabled}
+                    readonly={readonly}
+                    value={tags ? 'value' : ''} />
+                <InputSuffix>{suffix}</InputSuffix>
+                {showArrowButton && (
+                    <Button
+                        className="k-input-button"
+                        icon="caret-alt-down"
+                        rounded={null}
+                        size={size}
+                        fillMode={fillMode}
+                    />
+                )}
+            </Input>
+            { opened && popup &&
+                <Popup className="k-multiselecttree-popup">
+                    {popup}
+                </Popup>
+            }
+        </>
+    );
+};
+
+MultiSelectTree.states = states;
+MultiSelectTree.options = options;
+MultiSelectTree.className = MULTISELECTTREE_CLASSNAME;
+MultiSelectTree.defaultProps = defaultProps;
+
+export default MultiSelectTree;
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-flat.html b/packages/html/src/multiselecttree/tests/multiselecttree-flat.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelectTree Flat</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree-flat.js"></script>
+</body>
+</html>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx
@@ -0,0 +1,179 @@
+import ReactDOM from 'react-dom/client';
+import { Chip, ChipAction } from '../../chip';
+import { MultiSelectTree } from '../../multiselecttree';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        grid-template-columns: 160px repeat(2, 300px);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>MultiSelectTree Flat</span>
+            <span>MultiSelectTree Flat RTL</span>
+
+            <div>Empty</div>
+            <div>
+                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" placeholder="MultiSelectTree..." />
+            </div>
+
+            <div>Arrow button</div>
+            <div>
+                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" showArrowButton placeholder="MultiSelectTree with arrow button" />
+            </div>
+
+            <div>Normal</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
+                    )}
+                />
+            </div>
+
+            <div>Hover</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    hover
+                />
+            </div>
+
+            <div>Focus</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Focus" focus actions={ <ChipAction type="remove"/> } />
+                    )}
+                    focus
+                />
+            </div>
+
+            <div>Disabled</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    disabled
+                />
+            </div>
+
+            <div>Invalid</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                />
+            </div>
+
+            <div>Invalid + Focus</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
+                    )}
+                    invalid
+                    focus
+                />
+            </div>
+
+            <div>Loading</div>
+            <div>
+                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat" placeholder="Loading..." loading />
+            </div>
+
+            <div>Multi Line + Overflow</div>
+            <div>
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTree fillMode="flat"
+                    tags={(
+                        <>
+                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
+                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
+                        </>
+                    )}
+                />
+            </div>
+        </div>
+    </>
+);
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-opened.html b/packages/html/src/multiselecttree/tests/multiselecttree-opened.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="k-no-animations">
+<head>
+    <title>MultiSelect Opened</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css"/>
+    <link rel="stylesheet" href="/packages/html/assets/styles.css"/>
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <script src="/packages/html/dist/multiselecttree/tests/multiselecttree-opened.js"></script>
+</body>
+</html>