-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #814 from buildo/add_text_and_select_input
Add text and select input
- Loading branch information
Showing
20 changed files
with
830 additions
and
333 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/bento-design-system/src/NumberField/NumberInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { NumberFieldStateOptions, useNumberFieldState } from "@react-stately/numberfield"; | ||
| import { FieldProps } from "../Field/FieldProps"; | ||
| import { BaseNumberProps, FormatProps } from "./types"; | ||
| import { useLocale } from "@react-aria/i18n"; | ||
| import { useFormatOptions } from "./formatOptions"; | ||
| import { HTMLAttributes, useRef } from "react"; | ||
| import { useNumberField } from "@react-aria/numberfield"; | ||
| import { BaseNumberInput } from "./BaseNumberInput"; | ||
| import { AtLeast } from "../util/AtLeast"; | ||
|
|
||
| type Props = AtLeast<Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">> & | ||
| Pick< | ||
| FieldProps<number | undefined, number>, | ||
| "autoFocus" | "disabled" | "name" | "onBlur" | "onChange" | "value" | ||
| > & | ||
| BaseNumberProps & { | ||
| validationState: "valid" | "invalid"; | ||
| } & FormatProps & | ||
| Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">; | ||
|
|
||
| export function NumberInput(props: Props) { | ||
| const { locale } = useLocale(); | ||
| const formatOptions = useFormatOptions(props); | ||
| const state = useNumberFieldState({ ...props, locale, formatOptions }); | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const { inputProps } = useNumberField( | ||
| { | ||
| ...props, | ||
| isDisabled: props.disabled, | ||
| formatOptions, | ||
| }, | ||
| state, | ||
| inputRef | ||
| ); | ||
|
|
||
| return <BaseNumberInput inputProps={inputProps} inputRef={inputRef} {...props} />; | ||
| } | ||
|
|
||
| export type { Props as NumberInputProps }; |
2 changes: 1 addition & 1 deletion
2
...n-system/src/NumberInput/formatOptions.ts → ...n-system/src/NumberField/formatOptions.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Children } from "../util/Children"; | ||
| import { LocalizedString } from "../util/LocalizedString"; | ||
|
|
||
| export type BaseNumberProps = { | ||
| placeholder?: LocalizedString; | ||
| isReadOnly?: boolean; | ||
| rightAccessory?: Children; | ||
| }; | ||
|
|
||
| export type FormatProps = | ||
| | { | ||
| kind: "currency"; | ||
| currency: string; | ||
| } | ||
| | { | ||
| kind: "percentage"; | ||
| } | ||
| | { | ||
| kind?: "decimal"; | ||
| }; |
11 changes: 0 additions & 11 deletions
11
packages/bento-design-system/src/NumberInput/FormatProps.ts
This file was deleted.
Oops, something went wrong.
136 changes: 136 additions & 0 deletions
136
packages/bento-design-system/src/SelectField/BaseSelect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import Select, { MultiValue as MultiValueT, SingleValue as SingleValueT } from "react-select"; | ||
| import { useDefaultMessages } from ".."; | ||
| import { FieldProps } from "../Field/FieldProps"; | ||
| import { BentoConfigProvider, useBentoConfig } from "../BentoConfigContext"; | ||
| import { AriaLabelingProps, DOMProps } from "@react-types/shared"; | ||
| import * as selectComponents from "./components"; | ||
| import { useEffect, useRef } from "react"; | ||
| import { BaseMultiProps, BaseSelectProps, BaseSingleProps, SelectOption } from "./types"; | ||
|
|
||
| type MultiProps<A> = BaseMultiProps & | ||
| Pick<FieldProps<A[]>, "autoFocus" | "disabled" | "name" | "onBlur" | "onChange" | "value">; | ||
|
|
||
| type SingleProps<A> = BaseSingleProps & | ||
| Pick< | ||
| FieldProps<A | undefined>, | ||
| "autoFocus" | "disabled" | "name" | "onBlur" | "onChange" | "value" | ||
| >; | ||
|
|
||
| type Props<A> = BaseSelectProps<A> & { | ||
| fieldProps: AriaLabelingProps & DOMProps; | ||
| validationState: "valid" | "invalid"; | ||
| } & (SingleProps<A> | MultiProps<A>); | ||
|
|
||
| export function BaseSelect<A>(props: Props<A>) { | ||
| const dropdownConfig = useBentoConfig().dropdown; | ||
| const { defaultMessages } = useDefaultMessages(); | ||
|
|
||
| const menuPortalTarget = useRef<HTMLDivElement>(); | ||
| useEffect(() => { | ||
| if (!menuPortalTarget.current) { | ||
| menuPortalTarget.current = document.createElement("div"); | ||
| } | ||
| document.body.appendChild(menuPortalTarget.current); | ||
|
|
||
| return () => { | ||
| if (document.body.contains(menuPortalTarget.current!)) { | ||
| document.body.removeChild(menuPortalTarget.current!); | ||
| } | ||
| }; | ||
| }, [menuPortalTarget]); | ||
|
|
||
| const { | ||
| fieldProps, | ||
| validationState, | ||
| value, | ||
| onChange, | ||
| options, | ||
| onBlur, | ||
| name, | ||
| placeholder, | ||
| disabled, | ||
| isReadOnly, | ||
| isMulti, | ||
| noOptionsMessage, | ||
| autoFocus, | ||
| menuSize = dropdownConfig.defaultMenuSize, | ||
| searchable, | ||
| } = props; | ||
|
|
||
| return ( | ||
| // NOTE(gabro): SelectField has its own config for List, so we override it here using BentoConfigProvider | ||
| <BentoConfigProvider value={{ list: dropdownConfig.list }}> | ||
| <Select | ||
| id={fieldProps.id} | ||
| name={name} | ||
| aria-label={fieldProps["aria-label"]} | ||
| aria-labelledby={fieldProps["aria-labelledby"]} | ||
| isDisabled={disabled} | ||
| isReadOnly={isReadOnly || false} | ||
| autoFocus={autoFocus} | ||
| value={ | ||
| isMulti | ||
| ? options.filter((o) => ((value ?? []) as readonly A[]).includes(o.value)) | ||
| : options.find((o) => o.value === value) | ||
| } | ||
| onChange={(o) => { | ||
| if (isMulti) { | ||
| const multiValue = o as MultiValueT<SelectOption<A>>; | ||
| onChange(multiValue.map((a) => a.value)); | ||
| } else { | ||
| const singleValue = o as SingleValueT<SelectOption<A>>; | ||
| onChange(singleValue == null ? undefined : singleValue.value); | ||
| } | ||
| }} | ||
| onBlur={onBlur} | ||
| options={options | ||
| .slice() // avoid mutating the original array | ||
| .sort((a, b) => { | ||
| // In case of multi-select, we display the selected options first | ||
| if (isMulti) { | ||
| const selectedValues = (value ?? []) as readonly A[]; | ||
| const isSelected = (a: SelectOption<A>) => selectedValues.includes(a.value); | ||
| if (isSelected(a) && !isSelected(b)) { | ||
| return -1; | ||
| } | ||
| if (!isSelected(a) && isSelected(b)) { | ||
| return 1; | ||
| } | ||
| } | ||
| return 0; | ||
| })} | ||
| placeholder={placeholder} | ||
| menuPortalTarget={menuPortalTarget.current} | ||
| components={selectComponents} | ||
| openMenuOnFocus | ||
| styles={selectComponents.styles<SelectOption<A>>()} | ||
| validationState={validationState} | ||
| isMulti={isMulti} | ||
| isClearable={false} | ||
| noOptionsMessage={() => noOptionsMessage ?? defaultMessages.SelectField.noOptionsMessage} | ||
| multiValueMessage={ | ||
| props.isMulti && (!props.multiSelectMode || props.multiSelectMode === "summary") | ||
| ? props.multiValueMessage ?? defaultMessages.SelectField.multiOptionsSelected | ||
| : undefined | ||
| } | ||
| closeMenuOnSelect={!isMulti} | ||
| hideSelectedOptions={false} | ||
| menuSize={menuSize} | ||
| menuIsOpen={isReadOnly ? false : undefined} | ||
| isSearchable={isReadOnly ? false : searchable ?? true} | ||
| showMultiSelectBulkActions={isMulti ? props.showMultiSelectBulkActions : false} | ||
| clearAllButtonLabel={ | ||
| isMulti | ||
| ? props.clearAllButtonLabel ?? defaultMessages.SelectField.clearAllButtonLabel | ||
| : undefined | ||
| } | ||
| selectAllButtonLabel={ | ||
| isMulti | ||
| ? props.selectAllButtonLabel ?? defaultMessages.SelectField.selectAllButtonLabel | ||
| : undefined | ||
| } | ||
| multiSelectMode={isMulti ? props.multiSelectMode : undefined} | ||
| /> | ||
| </BentoConfigProvider> | ||
| ); | ||
| } |
Oops, something went wrong.