@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
32 lines (31 loc) • 2.54 kB
JavaScript
import React from 'react';
import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
import { createStencil } from '@workday/canvas-kit-styling';
import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { useSelectInput } from './hooks/useSelectInput';
import { useSelectModel } from './hooks/useSelectModel';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { system } from '@workday/canvas-tokens-web';
const selectInputStencil = createStencil({
base: { name: "d5h45c", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
}, "select-input-f7e590");
const selectIconsStencil = createStencil({
base: { name: "d5h45d", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
}, "select-icons-c9a14d");
const hiddenSelectInputStencil = createStencil({
base: { name: "d5h45e", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;" }
}, "hidden-select-input-d9dbbc");
export const SelectInput = createSubcomponent(TextInput)({
modelHook: useSelectModel,
elemPropsHook: useSelectInput,
})(({ placeholder = 'Choose an option', inputStartIcon, formInputProps, ...elemProps }, Element, model) => {
return (React.createElement(InputGroup, { "data-width": "ck-formfield-width" },
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { "data-part": "select-start-icon-container", ...selectIconsStencil() },
React.createElement(SystemIcon, { "data-part": "select-start-icon", icon: inputStartIcon }))),
React.createElement(InputGroup.Input, { "data-part": "select-hidden-input", ...formInputProps, ...hiddenSelectInputStencil() }),
React.createElement(InputGroup.Input, { as: Element, placeholder: placeholder, "data-part": "select-visual-input", ...elemProps, ...mergeStyles(elemProps, selectInputStencil()) }),
React.createElement(InputGroup.InnerEnd, { "data-part": "select-caret-container", ...selectIconsStencil() },
React.createElement(SystemIcon, { "data-part": "select-caret-icon", icon: caretDownSmallIcon }))));
});