From f4888391e88530062be32461ba339562cd5dd726 Mon Sep 17 00:00:00 2001 From: Yauhen Date: Fri, 23 Aug 2019 11:13:43 +0300 Subject: [PATCH] refactor(ui): dropdown styles and refactor --- src/framework/ui/index.ts | 14 +- .../select.component.tsx} | 183 +-- .../select.spec.tsx} | 148 +- .../selectGroupOption.component.tsx} | 56 +- .../selectOption.component.tsx} | 16 +- .../selectOptionsList.component.tsx} | 42 +- .../selection.strategy.ts | 54 +- src/framework/ui/support/tests/mapping.json | 1306 ++++++++--------- .../src/navigation/navigation.component.tsx | 4 +- .../ui/screen/dropdown/dropdown.container.tsx | 30 - .../dropdown/dropdownShowcase.component.tsx | 49 - .../src/ui/screen/home.component.tsx | 2 +- src/playground/src/ui/screen/index.ts | 2 +- .../src/ui/screen/select/select.container.tsx | 30 + .../select/selectShowcase.component.tsx | 49 + .../ui/screen/{dropdown => select}/type.tsx | 58 +- 16 files changed, 1026 insertions(+), 1017 deletions(-) rename src/framework/ui/{dropdown/dropdown.component.tsx => select/select.component.tsx} (80%) rename src/framework/ui/{dropdown/dropdown.spec.tsx => select/select.spec.tsx} (64%) rename src/framework/ui/{dropdown/dropdownGroup.component.tsx => select/selectGroupOption.component.tsx} (64%) rename src/framework/ui/{dropdown/droppdownItem.component.tsx => select/selectOption.component.tsx} (90%) rename src/framework/ui/{dropdown/dropdownMenu.component.tsx => select/selectOptionsList.component.tsx} (62%) rename src/framework/ui/{dropdown => select}/selection.strategy.ts (59%) delete mode 100644 src/playground/src/ui/screen/dropdown/dropdown.container.tsx delete mode 100644 src/playground/src/ui/screen/dropdown/dropdownShowcase.component.tsx create mode 100644 src/playground/src/ui/screen/select/select.container.tsx create mode 100644 src/playground/src/ui/screen/select/selectShowcase.component.tsx rename src/playground/src/ui/screen/{dropdown => select}/type.tsx (68%) diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts index 75cc9fae2..1c90e85da 100644 --- a/src/framework/ui/index.ts +++ b/src/framework/ui/index.ts @@ -1,3 +1,5 @@ +import { SelectOption } from '@kitten/ui/select/select.component'; + export { Avatar, AvatarProps, @@ -29,12 +31,12 @@ export { CheckBoxElement, } from './checkbox/checkbox.component'; export { - Dropdown, - DropdownProps, - DropdownElement, - DropdownOption, -} from './dropdown/dropdown.component'; -export { DropdownItemType } from './dropdown/droppdownItem.component'; + Select, + SelectProps, + SelectElement, + SelectOption, +} from './select/select.component'; +export { SelectOptionType } from './select/selectOption.component'; export { Icon, IconProps, diff --git a/src/framework/ui/dropdown/dropdown.component.tsx b/src/framework/ui/select/select.component.tsx similarity index 80% rename from src/framework/ui/dropdown/dropdown.component.tsx rename to src/framework/ui/select/select.component.tsx index 6b8afce90..29c8b1bf8 100644 --- a/src/framework/ui/dropdown/dropdown.component.tsx +++ b/src/framework/ui/select/select.component.tsx @@ -31,10 +31,10 @@ import { } from '../text/text.component'; import { Popover } from '../popover/popover.component'; import { - DropdownMenu, - DropdownMenuElement, -} from './dropdownMenu.component'; -import { DropdownItemType } from './droppdownItem.component'; + SelectOptionsList, + SelectOptionsListElement, +} from './selectOptionsList.component'; +import { SelectOptionType } from './selectOption.component'; import { MeasureNode, MeasureResult, @@ -54,16 +54,16 @@ import { Chevron } from '../support/components'; type IconElement = React.ReactElement; type ControlElement = React.ReactElement; type IconProp = (style: ImageStyle, visible: boolean) => IconElement; -type DropdownChildren = [DropdownMenuElement, TextElement, ControlElement]; +type SelectChildren = [SelectOptionsListElement, TextElement, ControlElement]; -export type DropdownOption = Array | DropdownItemType; +export type SelectOption = Array | SelectOptionType; const MEASURED_CONTROL_TAG: string = 'Control'; interface ComponentProps { - data: DropdownItemType[]; + data: SelectOptionType[]; multiSelect?: boolean; - selectedOption?: DropdownOption; + selectedOption?: SelectOption; textStyle?: StyleProp; placeholder?: string; placeholderStyle?: StyleProp; @@ -71,13 +71,13 @@ interface ComponentProps { labelStyle?: StyleProp; controlStyle?: StyleProp; icon?: IconProp; - onSelect: (option: DropdownOption, event?: GestureResponderEvent) => void; + onSelect: (option: SelectOption, event?: GestureResponderEvent) => void; status?: string; - renderItem?: (item: ListRenderItemInfo) => React.ReactElement; + renderItem?: (item: ListRenderItemInfo) => React.ReactElement; } -export type DropdownProps = StyledComponentProps & TouchableOpacityProps & ComponentProps; -export type DropdownElement = React.ReactElement; +export type SelectProps = StyledComponentProps & TouchableOpacityProps & ComponentProps; +export type SelectElement = React.ReactElement; interface State { visible: boolean; @@ -85,7 +85,7 @@ interface State { } /** - * Styled Dropdown (Select) component. + * Styled Select (Select) component. * * @extends React.Component * @@ -95,18 +95,18 @@ interface State { * @property {string} status - Determines the status of the component. * Can be `primary`, `success`, `info`, `warning` or `danger`. * - * @property {boolean} multiSelect - Determines `multi-select` behavior of the Dropdown component. + * @property {boolean} multiSelect - Determines `multi-select` behavior of the Select component. * - * @property {DropdownOption} selectedOption - Determines selected option of the Dropdown. - * Can be `DropdownItemType` or `DropdownItemType[]` It depends on `multiSelect` property. + * @property {SelectOption} selectedOption - Determines selected option of the Select. + * Can be `SelectOptionType` or `SelectOptionType[]` It depends on `multiSelect` property. * - * @property {DropdownItemType[]} data - Determines items of the Dropdown component. + * @property {SelectOptionType[]} data - Determines items of the Select component. * - * @property {(option: DropdownOption, event?: GestureResponderEvent) => void} onSelect - Fires on option selection. + * @property {(option: SelectOption, event?: GestureResponderEvent) => void} onSelect - Fires on option selection. * Returns selected option/options. * - * @property {(item: ListRenderItemInfo) => React.ReactElement} renderItem - Property for - * rendering custom dropdown items. + * @property {(item: ListRenderItemInfo) => React.ReactElement} renderItem - Property for + * rendering custom select items. * * @property {StyleProp} label - Determines the `label` of the component. * @@ -134,18 +134,18 @@ interface State { * ``` * import React from 'react'; * import { - * Dropdown, - * DropdownItemType, - * DropdownOption, + * Select, + * SelectOptionType, + * SelectOption, * } from '@kitten/ui'; * * interface State { - * selectedOption: DropdownOption; + * selectedOption: SelectOption; * } * - * export class DropdownContainer extends React.Component { + * export class SelectContainer extends React.Component { * - * private items: DropdownItemType[] = [ + * private items: SelectOptionType[] = [ * { text: 'Option 1' }, * { text: 'Option 2' }, * { text: 'Option 3' }, @@ -159,13 +159,13 @@ interface State { * selectedOption: null, * }; * - * private onSelect = (selectedOption: DropdownOption): void => { + * private onSelect = (selectedOption: SelectOption): void => { * this.setState({ selectedOption }); * }; * * public render(): React.ReactNode { * return ( - * { + * export class SelectContainer extends React.Component { * - * private items: DropdownItemType[] = [ + * private items: SelectOptionType[] = [ * { text: 'Option 1' }, * { text: 'Option 2' }, * { text: 'Option 3' }, @@ -205,13 +205,13 @@ interface State { * selectedOption: [], * }; * - * private onSelect = (selectedOption: DropdownOption): void => { + * private onSelect = (selectedOption: SelectOption): void => { * this.setState({ selectedOption }); * }; * * public render(): React.ReactNode { * return ( - * { + * export class SelectContainer extends React.Component { * - * private items: DropdownItemType[] = [ + * private items: SelectOptionType[] = [ * { text: 'Option 1' }, * { text: 'Option 2' }, * { text: 'Option 3' }, @@ -252,13 +252,13 @@ interface State { * selectedOption: null, * }; * - * private onSelect = (selectedOption: DropdownOption): void => { + * private onSelect = (selectedOption: SelectOption): void => { * this.setState({ selectedOption }); * }; * * public render(): React.ReactNode { * return ( - * { + * export class SelectContainer extends React.Component { * - * private items: DropdownItemType[] = [ + * private items: SelectOptionType[] = [ * { text: 'Option 1' }, * { text: 'Option 2' }, * { text: 'Option 3' }, @@ -305,7 +305,7 @@ interface State { * selectedOption: null, * }; * - * private onSelect = (selectedOption: DropdownOption): void => { + * private onSelect = (selectedOption: SelectOption): void => { * this.setState({ selectedOption }); * }; * @@ -323,7 +323,7 @@ interface State { * * public render(): React.ReactNode { * return ( - * { + * export class SelectContainer extends React.Component { * - * private items: DropdownItemType[] = [ + * private items: SelectOptionType[] = [ * { text: 'Option 1' }, * { text: 'Option 2', textStyle: styles.customOptionStyle }, * { text: 'Option 3' }, @@ -364,19 +364,19 @@ interface State { * selectedOption: null, * }; * - * private onSelect = (selectedOption: DropdownOption): void => { + * private onSelect = (selectedOption: SelectOption): void => { * this.setState({ selectedOption }); * }; * * public render(): React.ReactNode { * return ( - * { +class SelectComponent extends React.Component { - static styledComponentName: string = 'Dropdown'; - static defaultProps: Partial = { + static styledComponentName: string = 'Select'; + static defaultProps: Partial = { placeholder: 'Select Option', multiSelect: false, }; @@ -443,7 +443,7 @@ class DropdownComponent extends React.Component { private strategy: SelectionStrategy; private iconAnimation: Animated.Value; - constructor(props: DropdownProps) { + constructor(props: SelectProps) { super(props); const { multiSelect, selectedOption } = props; this.strategy = multiSelect ? @@ -451,7 +451,7 @@ class DropdownComponent extends React.Component { this.iconAnimation = new Animated.Value(-180); } - private onItemSelect = (option: DropdownItemType, event: GestureResponderEvent): void => { + private onItemSelect = (option: SelectOptionType, event: GestureResponderEvent): void => { const { onSelect } = this.props; onSelect(this.strategy.select(option, this.setVisibility)); @@ -524,7 +524,16 @@ class DropdownComponent extends React.Component { }; private getComponentStyle = (source: StyleType): StyleType => { - const controlStyles: StyleType = allWithPrefix(source, 'control'); + const { + backgroundColor, + borderColor, + borderWidth, + minHeight, + minWidth, + paddingHorizontal, + paddingVertical, + borderRadius, + } = source; const iconStyles: StyleType = allWithPrefix(source, 'icon'); const textStyles: StyleType = allWithPrefix(source, 'text'); const placeholderStyles: StyleType = allWithPrefix(source, 'placeholder'); @@ -534,14 +543,14 @@ class DropdownComponent extends React.Component { return { control: { - backgroundColor: controlStyles.controlBackgroundColor, - borderColor: controlStyles.controlBorderColor, - borderWidth: controlStyles.controlBorderWidth, - minHeight: controlStyles.controlMinHeight, - minWidth: controlStyles.controlMinWidth, - paddingHorizontal: controlStyles.controlPaddingHorizontal, - paddingVertical: controlStyles.controlPaddingVertical, - borderRadius: controlStyles.controlBorderRadius, + backgroundColor: backgroundColor, + borderColor: borderColor, + borderWidth: borderWidth, + minHeight: minHeight, + minWidth: minWidth, + paddingHorizontal: paddingHorizontal, + paddingVertical: paddingVertical, + borderRadius: borderRadius, }, icon: { height: iconStyles.iconHeight, @@ -592,8 +601,6 @@ class DropdownComponent extends React.Component { }; private renderDefaultIconElement = (style: ImageStyle): IconElement => { - const { visible } = this.state; - const rotateInterpolate = this.iconAnimation.interpolate({ inputRange: [-180, 0], outputRange: ['-180deg', '0deg'], @@ -635,12 +642,12 @@ class DropdownComponent extends React.Component { ); }; - private renderMenuElement = (style: StyleType): DropdownMenuElement => { + private renderMenuElement = (style: StyleType): SelectOptionsListElement => { const { appearance, selectedOption, ...restProps } = this.props; const additionalMenuStyle: StyleType = { width: this.state.menuWidth }; return ( - { ); }; - private renderComponentChildren = (style: StyleType): DropdownChildren => { + private renderComponentChildren = (style: StyleType): SelectChildren => { const { label } = this.props; return [ @@ -695,7 +702,7 @@ class DropdownComponent extends React.Component { ]; }; - public render(): DropdownElement { + public render(): SelectElement { const { themedStyle, style } = this.props; const { visible, menuWidth } = this.state; const componentStyle: StyleType = this.getComponentStyle(themedStyle); @@ -748,4 +755,4 @@ const styles = StyleSheet.create({ }, }); -export const Dropdown = styled(DropdownComponent); +export const Select = styled(SelectComponent); diff --git a/src/framework/ui/dropdown/dropdown.spec.tsx b/src/framework/ui/select/select.spec.tsx similarity index 64% rename from src/framework/ui/dropdown/dropdown.spec.tsx rename to src/framework/ui/select/select.spec.tsx index 31bb6c90a..8a6fffbb3 100644 --- a/src/framework/ui/dropdown/dropdown.spec.tsx +++ b/src/framework/ui/select/select.spec.tsx @@ -14,10 +14,10 @@ import { StyleType, } from '@kitten/theme'; import { - Dropdown, - DropdownOption, -} from './dropdown.component'; -import { DropdownItemType } from './droppdownItem.component'; + Select, + SelectOption, +} from './select.component'; +import { SelectOptionType } from './selectOption.component'; import { CheckBox } from '../checkbox/checkbox.component'; import { mapping, @@ -31,7 +31,7 @@ const stringify = (obj: any): string => JSON.stringify(obj); const iconClosedUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/arrow-ios-downward.png'; const iconOpenedUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/arrow-ios-upward.png'; -const data: DropdownItemType[] = [ +const data: SelectOptionType[] = [ { text: 'Option 1' }, { text: 'Option 2', disabled: true }, { @@ -50,38 +50,38 @@ const data: DropdownItemType[] = [ ]; interface Props { - dropdownLabel?: string; - dropdownPlaceholder?: string; - dropdownDisabled?: boolean; + selectLabel?: string; + selectPlaceholder?: string; + selectDisabled?: boolean; multiSelectDisabled?: boolean; labelStyle?: StyleType; placeholderStyle?: StyleType; controlStyle?: StyleType; - onDropdownPress?: () => void; - onDropdownPressIn?: () => void; - onDropdownPressOut?: () => void; - onDropdownLongPress?: () => void; + onSelectPress?: () => void; + onSelectPressIn?: () => void; + onSelectPressOut?: () => void; + onSelectLongPress?: () => void; onMultiSelectPress?: () => void; } interface State { - dropdownSelected: DropdownOption; - dropdownMultiSelected: DropdownOption; + selectSelected: SelectOption; + selectMultiSelected: SelectOption; } class TestApplication extends React.Component { public state: State = { - dropdownSelected: null, - dropdownMultiSelected: [], + selectSelected: null, + selectMultiSelected: [], }; - private onDropdownSelect = (dropdownSelected: DropdownOption): void => { - this.setState({ dropdownSelected }); + private onSelectSelect = (selectSelected: SelectOption): void => { + this.setState({ selectSelected }); }; - private onDropdownMultiSelect = (dropdownMultiSelected: DropdownOption): void => { - this.setState({ dropdownMultiSelected }); + private onSelectMultiSelect = (selectMultiSelected: SelectOption): void => { + this.setState({ selectMultiSelected }); }; private renderIcon = (style: StyleType, visible: boolean): React.ReactElement => { @@ -97,43 +97,43 @@ class TestApplication extends React.Component { public render(): React.ReactNode { const { - onDropdownPress, + onSelectPress, onMultiSelectPress, - dropdownLabel, - dropdownPlaceholder, - dropdownDisabled, + selectLabel, + selectPlaceholder, + selectDisabled, multiSelectDisabled, - onDropdownPressIn, - onDropdownPressOut, - onDropdownLongPress, + onSelectPressIn, + onSelectPressOut, + onSelectLongPress, } = this.props; return ( - - ); @@ -142,59 +142,59 @@ class TestApplication extends React.Component { } -describe('@ dropdown component checks', () => { +describe('@ select component checks', () => { - it('* dropdown onPress have been called', () => { - const onDropdownPress = jest.fn(); + it('* select onPress have been called', () => { + const onSelectPress = jest.fn(); const onMultiSelectPress = jest.fn(); const application: RenderAPI = render( , ); - fireEvent.press(application.getAllByType(Dropdown)[0]); - fireEvent.press(application.getAllByType(Dropdown)[1]); - expect(onDropdownPress).toHaveBeenCalled(); + fireEvent.press(application.getAllByType(Select)[0]); + fireEvent.press(application.getAllByType(Select)[1]); + expect(onSelectPress).toHaveBeenCalled(); expect(onMultiSelectPress).toHaveBeenCalled(); }); it('* disabled props checks', () => { - const onDropdownPress = jest.fn(); + const onSelectPress = jest.fn(); const onMultiSelectPress = jest.fn(); const application: RenderAPI = render( , ); fireEvent.press(application.getAllByType(TouchableOpacity)[0]); - expect(onDropdownPress).toHaveBeenCalled(); + expect(onSelectPress).toHaveBeenCalled(); fireEvent.press(application.getAllByType(TouchableOpacity)[1]); expect(onMultiSelectPress).toHaveBeenCalledTimes(0); }); - it('* dropdown default onSelect works properly', () => { - const expectedSelectedOption: DropdownItemType = { text: 'Option 1' }; - const onDropdownPress = jest.fn(); + it('* select default onSelect works properly', () => { + const expectedSelectedOption: SelectOptionType = { text: 'Option 1' }; + const onSelectPress = jest.fn(); const application: RenderAPI = render( - , + , ); fireEvent.press(application.getAllByType(TouchableOpacity)[0]); fireEvent.press(application.getAllByText(expectedSelectedOption.text)[0].parent); - const { selectedOption } = application.getAllByType(Dropdown)[0].props; + const { selectedOption } = application.getAllByType(Select)[0].props; expect(stringify(selectedOption)).toBe(stringify(expectedSelectedOption)); }); - it('* dropdown multiSelect onSelect works properly', () => { - const expectedSelectedOption: DropdownItemType[] = [ + it('* select multiSelect onSelect works properly', () => { + const expectedSelectedOption: SelectOptionType[] = [ { text: 'Option 4' }, { text: 'Option 32' }, ]; @@ -206,7 +206,7 @@ describe('@ dropdown component checks', () => { fireEvent.press(application.getAllByType(TouchableOpacity)[1]); fireEvent(application.getAllByText(expectedSelectedOption[0].text)[0], 'onChange'); fireEvent(application.getAllByText(expectedSelectedOption[1].text)[0], 'onChange'); - const { selectedOption } = application.getAllByType(Dropdown)[1].props; + const { selectedOption } = application.getAllByType(Select)[1].props; expect(stringify(selectedOption)).toBe(stringify(expectedSelectedOption)); }); @@ -226,7 +226,7 @@ describe('@ dropdown component checks', () => { }); it('* multiSelect group selected works properly', () => { - const expectedSelectedOption: DropdownItemType[] = [ + const expectedSelectedOption: SelectOptionType[] = [ { text: 'Option 32' }, { text: 'Option 33' }, ]; @@ -247,15 +247,15 @@ describe('@ dropdown component checks', () => { expect(stringify(selected2)).toBe(stringify([])); }); - it('* dropdown onPress* handling', () => { - const onDropdownPressIn = jest.fn(); - const onDropdownPressOut = jest.fn(); - const onDropdownLongPress = jest.fn(); + it('* select onPress* handling', () => { + const onSelectPressIn = jest.fn(); + const onSelectPressOut = jest.fn(); + const onSelectLongPress = jest.fn(); const application: RenderAPI = render( , ); @@ -263,9 +263,9 @@ describe('@ dropdown component checks', () => { fireEvent(application.getAllByType(TouchableOpacity)[0], 'pressOut'); fireEvent(application.getAllByType(TouchableOpacity)[0], 'longPress'); - expect(onDropdownPressIn).toHaveBeenCalled(); - expect(onDropdownPressOut).toHaveBeenCalled(); - expect(onDropdownLongPress).toHaveBeenCalled(); + expect(onSelectPressIn).toHaveBeenCalled(); + expect(onSelectPressOut).toHaveBeenCalled(); + expect(onSelectLongPress).toHaveBeenCalled(); }); it('* text props checks', () => { @@ -273,8 +273,8 @@ describe('@ dropdown component checks', () => { const passedPlaceholder: string = 'Placeholder'; const application: RenderAPI = render( , ); diff --git a/src/framework/ui/dropdown/dropdownGroup.component.tsx b/src/framework/ui/select/selectGroupOption.component.tsx similarity index 64% rename from src/framework/ui/dropdown/dropdownGroup.component.tsx rename to src/framework/ui/select/selectGroupOption.component.tsx index 26b58ada7..bfc27d924 100644 --- a/src/framework/ui/dropdown/dropdownGroup.component.tsx +++ b/src/framework/ui/select/selectGroupOption.component.tsx @@ -15,17 +15,17 @@ import { StyleType, } from '@kitten/theme'; import { - DropdownItem, - DropdownItemElement, - DropdownItemProps, - DropdownItemType, -} from './droppdownItem.component'; + SelectOption, + SelectOptionElement, + SelectOptionProps, + SelectOptionType, +} from './selectOption.component'; import { SelectionStrategy } from './selection.strategy'; interface ComponentProps { multiSelect?: boolean; strategy: SelectionStrategy; - renderItem?: (item: ListRenderItemInfo) => React.ReactElement; + renderItem?: (item: ListRenderItemInfo) => React.ReactElement; } interface MainItemStatus { @@ -33,23 +33,23 @@ interface MainItemStatus { indeterminate: boolean; } -export type DropdownGroupProps = ComponentProps & Partial & StyledComponentProps; -export type DropdownGroupElement = React.ReactElement; +export type SelectGroupOptionProps = ComponentProps & Partial & StyledComponentProps; +export type SelectGroupOptionElement = React.ReactElement; -export class DropdownGroupComponent extends React.Component { +class SelectGroupOptionComponent extends React.Component { - static styledComponentName: string = 'DropdownGroup'; + static styledComponentName: string = 'SelectGroupOption'; private getComponentStyle = (source: StyleType): StyleType => { const { - itemPaddingLeft, + itemPaddingHorizontal, ...containerStyles } = source; return { container: containerStyles, item: { - paddingLeft: itemPaddingLeft, + paddingHorizontal: itemPaddingHorizontal, }, }; }; @@ -70,9 +70,9 @@ export class DropdownGroupComponent extends React.Component } }; - private renderSubItem = (option: DropdownItemType, index: number): DropdownItemElement => { + private renderSubItem = (option: SelectOptionType, index: number): SelectOptionElement => { const { item, renderItem, strategy, ...restProps } = this.props; - const returningOption: ListRenderItemInfo = { + const returningOption: ListRenderItemInfo = { item: option, index: index, separators: null, @@ -80,7 +80,7 @@ export class DropdownGroupComponent extends React.Component const selected: boolean = strategy.isSelected(option); return renderItem ? renderItem(returningOption) : ( - ); }; - private renderSubItemsElements = (): DropdownItemElement[] => { + private renderSubItemsElements = (): SelectOptionElement[] => { const { item, themedStyle } = this.props; const { item: itemStyle } = this.getComponentStyle(themedStyle); return item.items - .map((option: DropdownItemType, index: number) => { - const element: DropdownItemElement = this.renderSubItem(option, index); + .map((option: SelectOptionType, index: number) => { + const element: SelectOptionElement = this.renderSubItem(option, index); return React.cloneElement(element, { ...option, @@ -104,14 +104,14 @@ export class DropdownGroupComponent extends React.Component }); }; - private renderMultiSelectMainElement = (subItemsElements: DropdownItemElement[]): DropdownItemElement => { + private renderMultiSelectMainElement = (subItemsElements: SelectOptionElement[]): SelectOptionElement => { const { item, ...restProps } = this.props; const subItemsSelectedStatusArray: boolean[] = subItemsElements - .map((subItem: DropdownItemElement) => subItem.props.selected); + .map((subItem: SelectOptionElement) => subItem.props.selected); const itemStatus: MainItemStatus = this.getMainItemStatus(subItemsSelectedStatusArray); return ( - ); }; - private renderDefaultMainElement = (): DropdownItemElement => { + private renderDefaultMainElement = (): SelectOptionElement => { const { item } = this.props; return ( - ); }; - private renderMainElement = (subItemsElements: DropdownItemElement[]): DropdownItemElement => { + private renderMainElement = (subItemsElements: SelectOptionElement[]): SelectOptionElement => { const { multiSelect } = this.props; return multiSelect ? this.renderMultiSelectMainElement(subItemsElements) : this.renderDefaultMainElement(); }; - public render(): DropdownGroupElement { + public render(): SelectGroupOptionElement { const { themedStyle } = this.props; const { container } = this.getComponentStyle(themedStyle); - const subItemsElements: DropdownItemElement[] = this.renderSubItemsElements(); - const mainElement: DropdownItemElement = this.renderMainElement(subItemsElements); + const subItemsElements: SelectOptionElement[] = this.renderSubItemsElements(); + const mainElement: SelectOptionElement = this.renderMainElement(subItemsElements); return ( @@ -151,5 +151,5 @@ export class DropdownGroupComponent extends React.Component } } -export const DropdownGroup = styled(DropdownGroupComponent); +export const SelectGroupOption = styled(SelectGroupOptionComponent); diff --git a/src/framework/ui/dropdown/droppdownItem.component.tsx b/src/framework/ui/select/selectOption.component.tsx similarity index 90% rename from src/framework/ui/dropdown/droppdownItem.component.tsx rename to src/framework/ui/select/selectOption.component.tsx index 5d1b1a3b1..8fc086685 100644 --- a/src/framework/ui/dropdown/droppdownItem.component.tsx +++ b/src/framework/ui/select/selectOption.component.tsx @@ -31,26 +31,26 @@ type TextElement = React.ReactElement; type DefaultItemElement = React.ReactElement; type MultiSelectItemElement = React.ReactElement; -export interface DropdownItemType { +export interface SelectOptionType { text: string; textStyle?: TextStyle; disabled?: boolean; - items?: DropdownItemType[]; + items?: SelectOptionType[]; } export interface ComponentProps { - item: DropdownItemType; + item: SelectOptionType; selected?: boolean; indeterminate?: boolean; multiSelect?: boolean; } -export type DropdownItemProps = ComponentProps & StyledComponentProps & TouchableTypeReturningProps; -export type DropdownItemElement = React.ReactElement; +export type SelectOptionProps = ComponentProps & StyledComponentProps & TouchableTypeReturningProps; +export type SelectOptionElement = React.ReactElement; -class DropdownItemComponent extends React.Component { +class SelectOptionComponent extends React.Component { - static styledComponentName: string = 'DropdownItem'; + static styledComponentName: string = 'SelectOption'; private onPress = (event: GestureResponderEvent) => { const { item, onPress } = this.props; @@ -193,4 +193,4 @@ const styles = StyleSheet.create({ text: {}, }); -export const DropdownItem = styled(DropdownItemComponent); +export const SelectOption = styled(SelectOptionComponent); diff --git a/src/framework/ui/dropdown/dropdownMenu.component.tsx b/src/framework/ui/select/selectOptionsList.component.tsx similarity index 62% rename from src/framework/ui/dropdown/dropdownMenu.component.tsx rename to src/framework/ui/select/selectOptionsList.component.tsx index 0cd3c67d0..f08ed7f07 100644 --- a/src/framework/ui/dropdown/dropdownMenu.component.tsx +++ b/src/framework/ui/select/selectOptionsList.component.tsx @@ -15,48 +15,48 @@ import { ListProps, } from '../list/list.component'; import { - DropdownItem, - DropdownItemType, - DropdownItemElement, -} from './droppdownItem.component'; + SelectOption, + SelectOptionType, + SelectOptionElement, +} from './selectOption.component'; import { - DropdownGroup, - DropdownGroupElement, -} from './dropdownGroup.component'; + SelectGroupOption, + SelectGroupOptionElement, +} from './selectGroupOption.component'; import { SelectionStrategy } from './selection.strategy'; -type DefaultMenuItemElement = DropdownItemElement | DropdownGroupElement; +type DefaultMenuItemElement = SelectOptionElement | SelectGroupOptionElement; type MenuItemElement = DefaultMenuItemElement | React.ReactElement; export interface ComponentProps { - data: DropdownItemType[]; + data: SelectOptionType[]; multiSelect?: boolean; strategy: SelectionStrategy; - renderItem?: (item: ListRenderItemInfo) => React.ReactElement; - onSelect: (option: DropdownItemType, event?: GestureResponderEvent) => void; + renderItem?: (item: ListRenderItemInfo) => React.ReactElement; + onSelect: (option: SelectOptionType, event?: GestureResponderEvent) => void; } -export type DropdownMenuProps = Partial & ComponentProps; -export type DropdownMenuElement = React.ReactElement; +export type SelectOptionsListProps = Partial & ComponentProps; +export type SelectOptionsListElement = React.ReactElement; -export class DropdownMenu extends React.Component { +export class SelectOptionsList extends React.Component { - private areThereSubItems = (dropdownItem: DropdownItemType): boolean => { + private areThereSubItems = (dropdownItem: SelectOptionType): boolean => { const { items } = dropdownItem; return items && items.length !== 0; }; - private onSelect = (option: DropdownItemType, event?: GestureResponderEvent): void => { + private onSelect = (option: SelectOptionType, event?: GestureResponderEvent): void => { this.props.onSelect(option, event); }; - private renderDefaultItem = (info: ListRenderItemInfo): DefaultMenuItemElement => { + private renderDefaultItem = (info: ListRenderItemInfo): DefaultMenuItemElement => { const { renderItem, multiSelect, strategy } = this.props; const selected: boolean = strategy.isSelected(info.item); return this.areThereSubItems(info.item) ? ( - { onPress={this.onSelect} /> ) : ( - { ); }; - private renderItem = (info: ListRenderItemInfo): MenuItemElement => { + private renderItem = (info: ListRenderItemInfo): MenuItemElement => { const { renderItem } = this.props; return renderItem ? renderItem(info) : this.renderDefaultItem(info); }; - public render(): DropdownMenuElement { + public render(): SelectOptionsListElement { const { style, ...restProps } = this.props; return ( diff --git a/src/framework/ui/dropdown/selection.strategy.ts b/src/framework/ui/select/selection.strategy.ts similarity index 59% rename from src/framework/ui/dropdown/selection.strategy.ts rename to src/framework/ui/select/selection.strategy.ts index 39b40573a..d9ca7381c 100644 --- a/src/framework/ui/dropdown/selection.strategy.ts +++ b/src/framework/ui/select/selection.strategy.ts @@ -1,23 +1,23 @@ -import { DropdownItemType } from './droppdownItem.component'; +import { SelectOptionType } from './selectOption.component'; export interface SelectionStrategy { - selectedOption: DropdownItemType | DropdownItemType[]; - isSelected: (item: DropdownItemType) => boolean; - select: (option: DropdownItemType, callback?: () => void) => DropdownItemType | DropdownItemType[]; + selectedOption: SelectOptionType | SelectOptionType[]; + isSelected: (item: SelectOptionType) => boolean; + select: (option: SelectOptionType, callback?: () => void) => SelectOptionType | SelectOptionType[]; getPlaceholder: (placeholder: string) => string; } export class MultiSelectStrategy implements SelectionStrategy { - public selectedOption: DropdownItemType[]; + public selectedOption: SelectOptionType[]; - constructor(options: DropdownItemType | DropdownItemType[]) { + constructor(options: SelectOptionType | SelectOptionType[]) { if (Array.isArray(options)) { this.selectedOption = options; } } - public select(option: DropdownItemType, callback?: () => void): DropdownItemType[] { + public select(option: SelectOptionType, callback?: () => void): SelectOptionType[] { const subOptionsExist: boolean = this.areThereSubOptions(option); if (subOptionsExist) { @@ -29,9 +29,9 @@ export class MultiSelectStrategy implements SelectionStrategy { return this.selectedOption; } - private selectDefaultOption(option: DropdownItemType): void { + private selectDefaultOption(option: SelectOptionType): void { const optionAlreadyExist: boolean = this.selectedOption - .some((item: DropdownItemType) => { + .some((item: SelectOptionType) => { return item === option; }); if (optionAlreadyExist) { @@ -41,20 +41,20 @@ export class MultiSelectStrategy implements SelectionStrategy { } } - private selectOptionWithSubOptions(option: DropdownItemType): void { + private selectOptionWithSubOptions(option: SelectOptionType): void { const subOptionsAlreadyExist: boolean = this.selectedOption - .some((item: DropdownItemType) => { + .some((item: SelectOptionType) => { return option.items - .some((subItem: DropdownItemType) => { + .some((subItem: SelectOptionType) => { return subItem === item; }); }); if (subOptionsAlreadyExist) { - option.items.forEach((subItem: DropdownItemType) => this.removeOption(subItem)); + option.items.forEach((subItem: SelectOptionType) => this.removeOption(subItem)); } else { - const enabledItems: DropdownItemType[] = option.items - .filter((item: DropdownItemType) => { + const enabledItems: SelectOptionType[] = option.items + .filter((item: SelectOptionType) => { return !item.disabled; }); this.selectedOption = this.selectedOption.concat(enabledItems); @@ -64,7 +64,7 @@ export class MultiSelectStrategy implements SelectionStrategy { public getPlaceholder(placeholder: string): string { if (this.isSelectedOptionExist()) { return this.selectedOption - .map((item: DropdownItemType) => { + .map((item: SelectOptionType) => { return item && item.text; }) .join(', '); @@ -73,9 +73,9 @@ export class MultiSelectStrategy implements SelectionStrategy { } } - public isSelected(item: DropdownItemType): boolean { + public isSelected(item: SelectOptionType): boolean { return this.selectedOption - .some((option: DropdownItemType) => { + .some((option: SelectOptionType) => { return option === item; }); } @@ -84,9 +84,9 @@ export class MultiSelectStrategy implements SelectionStrategy { return this.selectedOption && this.selectedOption.length !== 0; } - private removeOption(option: DropdownItemType): void { + private removeOption(option: SelectOptionType): void { const index: number = this.selectedOption - .findIndex((item: DropdownItemType) => { + .findIndex((item: SelectOptionType) => { return item === option; }); if (index !== -1) { @@ -94,22 +94,22 @@ export class MultiSelectStrategy implements SelectionStrategy { } } - private areThereSubOptions(option: DropdownItemType): boolean { + private areThereSubOptions(option: SelectOptionType): boolean { return option.items && option.items.length !== 0; } } export class SingleSelectStrategy implements SelectionStrategy { - public selectedOption: DropdownItemType; + public selectedOption: SelectOptionType; - constructor(options: DropdownItemType | DropdownItemType[]) { + constructor(options: SelectOptionType | SelectOptionType[]) { if (!Array.isArray(options)) { this.selectedOption = options; } } - public select(option: DropdownItemType, callback?: () => void): DropdownItemType { + public select(option: SelectOptionType, callback?: () => void): SelectOptionType { this.selectedOption = option; callback(); return this.selectedOption; @@ -123,9 +123,9 @@ export class SingleSelectStrategy implements SelectionStrategy { } } - public isSelected(item: DropdownItemType): boolean { + public isSelected(item: SelectOptionType): boolean { if (this.hasOptionSubItems(item)) { - return item.items.some((option: DropdownItemType) => { + return item.items.some((option: SelectOptionType) => { return this.isSelected(option); }); } else { @@ -133,7 +133,7 @@ export class SingleSelectStrategy implements SelectionStrategy { } } - private hasOptionSubItems(option: DropdownItemType): boolean { + private hasOptionSubItems(option: SelectOptionType): boolean { return option.items && option.items.length !== 0; } } diff --git a/src/framework/ui/support/tests/mapping.json b/src/framework/ui/support/tests/mapping.json index 78dff736b..409f5f5ea 100644 --- a/src/framework/ui/support/tests/mapping.json +++ b/src/framework/ui/support/tests/mapping.json @@ -1144,47 +1144,29 @@ } } }, - "Dropdown": { + "Input": { "meta": { "scope": "all", "parameters": { - "controlMinWidth": { - "type": "number" - }, - "controlMinHeight": { - "type": "number" - }, - "controlPaddingHorizontal": { - "type": "number" - }, - "controlPaddingVertical": { - "type": "number" - }, - "controlBorderRadius": { + "paddingVertical": { "type": "number" }, - "controlBorderColor": { - "type": "string" - }, - "controlBorderWidth": { + "paddingHorizontal": { "type": "number" }, - "controlBackgroundColor": { - "type": "string" - }, - "placeholderMarginHorizontal": { + "minHeight": { "type": "number" }, - "placeholderFontSize": { + "borderRadius": { "type": "number" }, - "placeholderLineHeight": { + "borderWidth": { "type": "number" }, - "placeholderFontWeight": { + "borderColor": { "type": "string" }, - "placeholderColor": { + "backgroundColor": { "type": "string" }, "textMarginHorizontal": { @@ -1202,52 +1184,61 @@ "textColor": { "type": "string" }, + "placeholderColor": { + "type": "string" + }, "iconWidth": { "type": "number" }, "iconHeight": { "type": "number" }, + "iconMarginHorizontal": { + "type": "number" + }, "iconTintColor": { "type": "string" }, - "iconMarginHorizontal": { - "type": "number" + "labelColor": { + "type": "string" }, - "menuMaxHeight": { + "labelFontSize": { "type": "number" }, - "menuBorderRadius": { + "labelLineHeight": { "type": "number" }, - "menuBorderColor": { + "labelFontWeight": { "type": "string" }, - "menuBorderWidth": { + "labelMarginBottom": { "type": "number" }, - "labelColor": { + "captionMarginTop": { + "type": "number" + }, + "captionColor": { "type": "string" }, - "labelFontSize": { + "captionFontSize": { "type": "number" }, - "labelLineHeight": { + "captionLineHeight": { "type": "number" }, - "labelFontWeight": { + "captionFontWeight": { "type": "string" }, - "labelMarginBottom": { + "captionIconWidth": { "type": "number" }, - "outlinePadding": { + "captionIconHeight": { "type": "number" }, - "outlineBorderRadius": { + "captionIconMarginRight": { "type": "number" }, - "outlineBackgroundColor": { + "captionIconTintColor": { "type": "string" } }, @@ -1259,7 +1250,7 @@ "variantGroups": { "status": { "primary": { - "default": true + "default": false }, "success": { "default": false @@ -1281,7 +1272,7 @@ "priority": 0, "scope": "all" }, - "active": { + "focused": { "default": false, "priority": 1, "scope": "all" @@ -1291,46 +1282,47 @@ "appearances": { "default": { "mapping": { - "menuMaxHeight": 220, - "menuBorderRadius": 4, - "menuBorderColor": "border-basic-color-4", - "menuBorderWidth": 1, - "controlBorderRadius": 4, - "controlBorderWidth": 1, - "controlPaddingHorizontal": 8, - "controlBorderColor": "border-basic-color-3", - "controlBackgroundColor": "background-basic-color-2", - "controlMinHeight": 48, - "controlPaddingVertical": 7, - "placeholderMarginHorizontal": 8, - "placeholderColor": "text-hint-color", - "placeholderFontWeight": "text-paragraph-1-font-weight", - "placeholderFontSize": "text-subtitle-1-font-size", - "placeholderLineHeight": "text-paragraph-1-line-height", + "paddingVertical": 7, + "paddingHorizontal": 8, + "minHeight": 48, + "borderRadius": 4, + "borderWidth": 2, + "borderColor": "border-basic-color-3", + "backgroundColor": "background-basic-color-2", "textMarginHorizontal": 8, - "textColor": "border-alternative-color-1", - "textFontWeight": "text-subtitle-1-font-weight", "textFontSize": "text-subtitle-1-font-size", "textLineHeight": "text-subtitle-1-line-height", + "textFontWeight": "normal", + "textColor": "text-hint-color", + "placeholderColor": "text-hint-color", "iconWidth": 24, "iconHeight": 24, "iconMarginHorizontal": 8, - "iconTintColor": "text-hint-color", + "iconTintColor": "icon-hint-color", "labelColor": "text-hint-color", + "labelFontSize": "text-label-font-size", + "labelLineHeight": "text-label-line-height", + "labelFontWeight": "text-label-font-weight", "labelMarginBottom": 4, - "outlineBackgroundColor": "transparent", - "outlinePadding": 4, - "outlineBorderRadius": 4, + "captionMarginTop": 4, + "captionColor": "text-hint-color", + "captionFontSize": "text-caption-1-font-size", + "captionLineHeight": "text-caption-1-line-height", + "captionFontWeight": "text-caption-1-font-weight", + "captionIconWidth": 10, + "captionIconHeight": 10, + "captionIconMarginRight": 8, + "captionIconTintColor": "icon-hint-color", "state": { - "active": { - "outlineBackgroundColor": "outline-color", - "controlBackgroundColor": "background-basic-color-1", - "iconTintColor": "border-alternative-color-1" + "focused": { + "textColor": "text-basic-color", + "borderColor": "border-primary-color-1", + "iconTintColor": "icon-active-color" }, "disabled": { - "controlBorderColor": "border-basic-color-4", - "placeholderColor": "text-disabled-color", + "borderColor": "border-basic-color-3", "textColor": "text-disabled-color", + "placeholderColor": "text-disabled-color", "iconTintColor": "icon-disabled-color" } } @@ -1338,37 +1330,72 @@ "variantGroups": { "status": { "primary": { + "borderColor": "color-primary-default", + "iconTintColor": "color-primary-default", + "captionColor": "color-primary-default", + "captionIconTintColor": "color-primary-default", "state": { - "active": { - "controlBorderColor": "color-primary-default" + "focused": { + "borderColor": "color-primary-focus", + "iconTintColor": "color-primary-focus", + "captionColor": "color-primary-focus", + "captionIconTintColor": "color-primary-focus" } } }, "success": { + "borderColor": "color-success-default", + "iconTintColor": "color-success-default", + "captionColor": "color-success-default", + "captionIconTintColor": "color-success-default", "state": { - "active": { - "controlBorderColor": "color-success-default" + "focused": { + "borderColor": "color-success-focus", + "iconTintColor": "color-success-focus", + "captionColor": "color-success-focus", + "captionIconTintColor": "color-success-focus" } } }, "info": { + "borderColor": "color-info-default", + "iconTintColor": "color-info-default", + "captionColor": "color-info-default", + "captionIconTintColor": "color-info-default", "state": { - "active": { - "controlBorderColor": "color-info-default" + "focused": { + "borderColor": "color-info-focus", + "iconTintColor": "color-info-focus", + "captionColor": "color-info-focus", + "captionIconTintColor": "color-info-focus" } } }, "warning": { + "borderColor": "color-warning-default", + "iconTintColor": "color-warning-default", + "captionColor": "color-warning-default", + "captionIconTintColor": "color-warning-default", "state": { - "active": { - "controlBorderColor": "color-warning-default" + "focused": { + "borderColor": "color-warning-focus", + "iconTintColor": "color-warning-focus", + "captionColor": "color-warning-focus", + "captionIconTintColor": "color-warning-focus" } } }, "danger": { + "borderColor": "color-danger-default", + "iconTintColor": "color-danger-default", + "captionColor": "color-danger-default", + "captionIconTintColor": "color-danger-default", "state": { - "active": { - "controlBorderColor": "color-danger-default" + "focused": { + "borderColor": "color-danger-focus", + "iconTintColor": "color-danger-focus", + "captionColor": "color-danger-focus", + "captionIconTintColor": "color-danger-focus" } } } @@ -1377,7 +1404,84 @@ } } }, - "DropdownItem": { + "Layout": { + "meta": { + "scope": "mobile", + "parameters": { + "backgroundColor": { + "type": "string" + } + }, + "appearances": { + "default": { + "default": true + } + }, + "variantGroups": { + "level": { + "1": { + "default": true + }, + "2": { + "default": false + }, + "3": { + "default": false + }, + "4": { + "default": false + } + } + }, + "states": {} + }, + "appearances": { + "default": { + "mapping": {}, + "variantGroups": { + "level": { + "1": { + "backgroundColor": "background-basic-color-1" + }, + "2": { + "backgroundColor": "background-basic-color-2" + }, + "3": { + "backgroundColor": "background-basic-color-3" + }, + "4": { + "backgroundColor": "background-basic-color-4" + } + } + } + } + } + }, + "List": { + "meta": { + "scope": "all", + "parameters": { + "backgroundColor": { + "type": "string" + } + }, + "appearances": { + "default": { + "default": true + } + }, + "variantGroups": {}, + "states": {} + }, + "appearances": { + "default": { + "mapping": { + "backgroundColor": "background-basic-color-2" + } + } + } + }, + "ListItem": { "meta": { "scope": "all", "parameters": { @@ -1390,26 +1494,50 @@ "backgroundColor": { "type": "string" }, - "multiSelectBackgroundColor": { - "type": "string" - }, - "multiSelectTextColor": { - "type": "string" - }, - "textMarginHorizontal": { + "iconWidth": { "type": "number" }, - "textFontSize": { + "iconHeight": { "type": "number" }, - "textLineHeight": { + "iconMarginHorizontal": { "type": "number" }, - "textFontWeight": { + "iconTintColor": { "type": "string" }, - "textColor": { + "titleMarginHorizontal": { + "type": "number" + }, + "titleFontSize": { + "type": "number" + }, + "titleLineHeight": { + "type": "number" + }, + "titleFontWeight": { + "type": "string" + }, + "titleColor": { + "type": "string" + }, + "descriptionColor": { + "type": "string" + }, + "descriptionFontSize": { + "type": "number" + }, + "descriptionFontWeight": { "type": "string" + }, + "descriptionLineHeight": { + "type": "number" + }, + "descriptionMarginHorizontal": { + "type": "number" + }, + "accessoryMarginHorizontal": { + "type": "number" } }, "appearances": { @@ -1419,19 +1547,9 @@ }, "variantGroups": {}, "states": { - "disabled": { - "default": false, - "priority": 0, - "scope": "all" - }, "active": { "default": false, - "priority": 1, - "scope": "all" - }, - "selected": { - "default": false, - "priority": 2, + "priority": 0, "scope": "all" } } @@ -1441,40 +1559,49 @@ "mapping": { "paddingHorizontal": 8, "paddingVertical": 8, - "textMarginHorizontal": 8, "backgroundColor": "background-basic-color-1", - "multiSelectBackgroundColor": "background-basic-color-1", - "multiSelectTextColor": "background-alternative-color-1", - "textFontSize": "text-subtitle-1-font-size", - "textFontWeight": "text-subtitle-1-font-weight", - "textLineHeight": "text-subtitle-2-line-height", - "textColor": "background-alternative-color-1", + "iconWidth": 40, + "iconHeight": 40, + "iconMarginHorizontal": 8, + "iconTintColor": "text-hint-color", + "titleMarginHorizontal": 8, + "titleFontSize": "text-subtitle-2-font-size", + "titleFontWeight": "text-subtitle-2-font-weight", + "titleLineHeight": "text-subtitle-2-line-height", + "titleColor": "text-basic-color", + "descriptionMarginHorizontal": 8, + "descriptionFontSize": "text-caption-1-font-size", + "descriptionFontWeight": "text-caption-1-font-weight", + "descriptionLineHeight": "text-caption-1-line-height", + "descriptionColor": "text-hint-color", + "accessoryMarginHorizontal": 8, "state": { "active": { - "backgroundColor": "background-basic-color-2" - }, - "selected": { - "textColor": "text-alternate-color", - "backgroundColor": "color-primary-default" - }, - "disabled": { - "textColor": "text-hint-color", - "multiSelectTextColor": "text-hint-color" + "backgroundColor": "background-basic-color-3" } } } } } }, - "DropdownGroup": { + "OverflowMenu": { "meta": { "scope": "all", "parameters": { + "borderRadius": { + "type": "number" + }, "backgroundColor": { "type": "string" }, - "itemPaddingLeft": { + "dividerHeight": { + "type": "number" + }, + "dividerBackgroundColor": { "type": "number" + }, + "indicatorBackgroundColor": { + "type": "string" } }, "appearances": { @@ -1482,43 +1609,34 @@ "default": true } }, - "variantGroups": {}, - "states": {} + "states": {}, + "variantGroups": {} }, "appearances": { "default": { "mapping": { + "borderRadius": 12, "backgroundColor": "background-basic-color-1", - "itemPaddingLeft": 20 + "dividerHeight": 1, + "dividerBackgroundColor": "border-basic-color-3", + "indicatorBackgroundColor": "transparent" } } } }, - "Input": { + "OverflowMenuItem": { "meta": { "scope": "all", "parameters": { - "paddingVertical": { - "type": "number" - }, - "paddingHorizontal": { - "type": "number" - }, "minHeight": { "type": "number" }, - "borderRadius": { + "paddingVertical": { "type": "number" }, - "borderWidth": { + "paddingHorizontal": { "type": "number" }, - "borderColor": { - "type": "string" - }, - "backgroundColor": { - "type": "string" - }, "textMarginHorizontal": { "type": "number" }, @@ -1534,9 +1652,6 @@ "textColor": { "type": "string" }, - "placeholderColor": { - "type": "string" - }, "iconWidth": { "type": "number" }, @@ -1548,48 +1663,6 @@ }, "iconTintColor": { "type": "string" - }, - "labelColor": { - "type": "string" - }, - "labelFontSize": { - "type": "number" - }, - "labelLineHeight": { - "type": "number" - }, - "labelFontWeight": { - "type": "string" - }, - "labelMarginBottom": { - "type": "number" - }, - "captionMarginTop": { - "type": "number" - }, - "captionColor": { - "type": "string" - }, - "captionFontSize": { - "type": "number" - }, - "captionLineHeight": { - "type": "number" - }, - "captionFontWeight": { - "type": "string" - }, - "captionIconWidth": { - "type": "number" - }, - "captionIconHeight": { - "type": "number" - }, - "captionIconMarginRight": { - "type": "number" - }, - "captionIconTintColor": { - "type": "string" } }, "appearances": { @@ -1597,32 +1670,14 @@ "default": true } }, - "variantGroups": { - "status": { - "primary": { - "default": false - }, - "success": { - "default": false - }, - "info": { - "default": false - }, - "warning": { - "default": false - }, - "danger": { - "default": false - } - } - }, + "variantGroups": {}, "states": { "disabled": { "default": false, "priority": 0, "scope": "all" }, - "focused": { + "active": { "default": false, "priority": 1, "scope": "all" @@ -1632,262 +1687,59 @@ "appearances": { "default": { "mapping": { - "paddingVertical": 7, - "paddingHorizontal": 8, "minHeight": 48, - "borderRadius": 4, - "borderWidth": 2, - "borderColor": "border-basic-color-3", - "backgroundColor": "background-basic-color-2", + "paddingVertical": 12, + "paddingHorizontal": 8, "textMarginHorizontal": 8, - "textFontSize": "text-subtitle-1-font-size", - "textLineHeight": "text-subtitle-1-line-height", - "textFontWeight": "normal", - "textColor": "text-hint-color", - "placeholderColor": "text-hint-color", + "textFontSize": "text-subtitle-2-font-size", + "textLineHeight": "text-subtitle-2-line-height", + "textFontWeight": "text-subtitle-2-font-weight", + "textColor": "text-basic-color", "iconWidth": 24, "iconHeight": 24, "iconMarginHorizontal": 8, - "iconTintColor": "icon-hint-color", - "labelColor": "text-hint-color", - "labelFontSize": "text-label-font-size", - "labelLineHeight": "text-label-line-height", - "labelFontWeight": "text-label-font-weight", - "labelMarginBottom": 4, - "captionMarginTop": 4, - "captionColor": "text-hint-color", - "captionFontSize": "text-caption-1-font-size", - "captionLineHeight": "text-caption-1-line-height", - "captionFontWeight": "text-caption-1-font-weight", - "captionIconWidth": 10, - "captionIconHeight": 10, - "captionIconMarginRight": 8, - "captionIconTintColor": "icon-hint-color", + "iconTintColor": "text-basic-color", "state": { - "focused": { - "textColor": "text-basic-color", - "borderColor": "border-primary-color-1", - "iconTintColor": "icon-active-color" + "active": { + "textColor": "text-primary-color", + "iconTintColor": "text-primary-color" }, "disabled": { - "borderColor": "border-basic-color-3", "textColor": "text-disabled-color", - "placeholderColor": "text-disabled-color", - "iconTintColor": "icon-disabled-color" + "iconTintColor": "text-disabled-color" } } + } + } + } + }, + "Popover": { + "meta": { + "scope": "all", + "parameters": { + "minWidth": { + "type": "number" }, - "variantGroups": { - "status": { - "primary": { - "borderColor": "color-primary-default", - "iconTintColor": "color-primary-default", - "captionColor": "color-primary-default", - "captionIconTintColor": "color-primary-default", - "state": { - "focused": { - "borderColor": "color-primary-focus", - "iconTintColor": "color-primary-focus", - "captionColor": "color-primary-focus", - "captionIconTintColor": "color-primary-focus" - } - } - }, - "success": { - "borderColor": "color-success-default", - "iconTintColor": "color-success-default", - "captionColor": "color-success-default", - "captionIconTintColor": "color-success-default", - "state": { - "focused": { - "borderColor": "color-success-focus", - "iconTintColor": "color-success-focus", - "captionColor": "color-success-focus", - "captionIconTintColor": "color-success-focus" - } - } - }, - "info": { - "borderColor": "color-info-default", - "iconTintColor": "color-info-default", - "captionColor": "color-info-default", - "captionIconTintColor": "color-info-default", - "state": { - "focused": { - "borderColor": "color-info-focus", - "iconTintColor": "color-info-focus", - "captionColor": "color-info-focus", - "captionIconTintColor": "color-info-focus" - } - } - }, - "warning": { - "borderColor": "color-warning-default", - "iconTintColor": "color-warning-default", - "captionColor": "color-warning-default", - "captionIconTintColor": "color-warning-default", - "state": { - "focused": { - "borderColor": "color-warning-focus", - "iconTintColor": "color-warning-focus", - "captionColor": "color-warning-focus", - "captionIconTintColor": "color-warning-focus" - } - } - }, - "danger": { - "borderColor": "color-danger-default", - "iconTintColor": "color-danger-default", - "captionColor": "color-danger-default", - "captionIconTintColor": "color-danger-default", - "state": { - "focused": { - "borderColor": "color-danger-focus", - "iconTintColor": "color-danger-focus", - "captionColor": "color-danger-focus", - "captionIconTintColor": "color-danger-focus" - } - } - } - } - } - } - } - }, - "Layout": { - "meta": { - "scope": "mobile", - "parameters": { - "backgroundColor": { - "type": "string" - } - }, - "appearances": { - "default": { - "default": true - } - }, - "variantGroups": { - "level": { - "1": { - "default": true - }, - "2": { - "default": false - }, - "3": { - "default": false - }, - "4": { - "default": false - } - } - }, - "states": {} - }, - "appearances": { - "default": { - "mapping": {}, - "variantGroups": { - "level": { - "1": { - "backgroundColor": "background-basic-color-1" - }, - "2": { - "backgroundColor": "background-basic-color-2" - }, - "3": { - "backgroundColor": "background-basic-color-3" - }, - "4": { - "backgroundColor": "background-basic-color-4" - } - } - } - } - } - }, - "List": { - "meta": { - "scope": "all", - "parameters": { - "backgroundColor": { - "type": "string" - } - }, - "appearances": { - "default": { - "default": true - } - }, - "variantGroups": {}, - "states": {} - }, - "appearances": { - "default": { - "mapping": { - "backgroundColor": "background-basic-color-2" - } - } - } - }, - "ListItem": { - "meta": { - "scope": "all", - "parameters": { - "paddingVertical": { - "type": "number" - }, - "paddingHorizontal": { - "type": "number" - }, - "backgroundColor": { - "type": "string" - }, - "iconWidth": { + "minHeight": { "type": "number" }, - "iconHeight": { + "maxWidth": { "type": "number" }, - "iconMarginHorizontal": { + "borderRadius": { "type": "number" }, - "iconTintColor": { + "backgroundColor": { "type": "string" }, - "titleMarginHorizontal": { - "type": "number" - }, - "titleFontSize": { - "type": "number" - }, - "titleLineHeight": { + "indicatorWidth": { "type": "number" }, - "titleFontWeight": { - "type": "string" - }, - "titleColor": { - "type": "string" - }, - "descriptionColor": { - "type": "string" - }, - "descriptionFontSize": { + "indicatorHeight": { "type": "number" }, - "descriptionFontWeight": { + "indicatorBackgroundColor": { "type": "string" - }, - "descriptionLineHeight": { - "type": "number" - }, - "descriptionMarginHorizontal": { - "type": "number" - }, - "accessoryMarginHorizontal": { - "type": "number" } }, "appearances": { @@ -1896,96 +1748,47 @@ } }, "variantGroups": {}, - "states": { - "active": { - "default": false, - "priority": 0, - "scope": "all" - } - } + "states": {} }, "appearances": { "default": { "mapping": { - "paddingHorizontal": 8, - "paddingVertical": 8, + "minWidth": 56, + "minHeight": 32, + "maxWidth": 256, + "borderRadius": 8, "backgroundColor": "background-basic-color-1", - "iconWidth": 40, - "iconHeight": 40, - "iconMarginHorizontal": 8, - "iconTintColor": "text-hint-color", - "titleMarginHorizontal": 8, - "titleFontSize": "text-subtitle-2-font-size", - "titleFontWeight": "text-subtitle-2-font-weight", - "titleLineHeight": "text-subtitle-2-line-height", - "titleColor": "text-basic-color", - "descriptionMarginHorizontal": 8, - "descriptionFontSize": "text-caption-1-font-size", - "descriptionFontWeight": "text-caption-1-font-weight", - "descriptionLineHeight": "text-caption-1-line-height", - "descriptionColor": "text-hint-color", - "accessoryMarginHorizontal": 8, - "state": { - "active": { - "backgroundColor": "background-basic-color-3" - } - } + "indicatorWidth": 6, + "indicatorHeight": 6, + "indicatorBackgroundColor": "background-basic-color-1" } } } }, - "OverflowMenu": { + "Radio": { "meta": { "scope": "all", "parameters": { - "borderRadius": { + "width": { "type": "number" }, - "backgroundColor": { - "type": "string" + "height": { + "type": "number" }, - "dividerHeight": { + "borderRadius": { "type": "number" }, - "dividerBackgroundColor": { + "borderWidth": { "type": "number" }, - "indicatorBackgroundColor": { + "borderColor": { "type": "string" - } - }, - "appearances": { - "default": { - "default": true - } - }, - "states": {}, - "variantGroups": {} - }, - "appearances": { - "default": { - "mapping": { - "borderRadius": 12, - "backgroundColor": "background-basic-color-1", - "dividerHeight": 1, - "dividerBackgroundColor": "border-basic-color-3", - "indicatorBackgroundColor": "transparent" - } - } - } - }, - "OverflowMenuItem": { - "meta": { - "scope": "all", - "parameters": { - "minHeight": { - "type": "number" }, - "paddingVertical": { - "type": "number" + "backgroundColor": { + "type": "string" }, - "paddingHorizontal": { - "type": "number" + "textColor": { + "type": "string" }, "textMarginHorizontal": { "type": "number" @@ -1999,20 +1802,29 @@ "textFontWeight": { "type": "string" }, - "textColor": { - "type": "string" - }, "iconWidth": { "type": "number" }, "iconHeight": { "type": "number" }, - "iconMarginHorizontal": { + "iconBorderRadius": { "type": "number" }, "iconTintColor": { "type": "string" + }, + "outlineWidth": { + "type": "number" + }, + "outlineHeight": { + "type": "number" + }, + "outlineBorderRadius": { + "type": "number" + }, + "outlineBackgroundColor": { + "type": "string" } }, "appearances": { @@ -2020,76 +1832,176 @@ "default": true } }, - "variantGroups": {}, + "variantGroups": { + "status": { + "primary": { + "default": false + }, + "success": { + "default": false + }, + "info": { + "default": false + }, + "warning": { + "default": false + }, + "danger": { + "default": false + } + } + }, "states": { - "disabled": { + "checked": { "default": false, "priority": 0, "scope": "all" }, - "active": { + "disabled": { "default": false, "priority": 1, "scope": "all" + }, + "active": { + "default": false, + "priority": 2, + "scope": "all" } } }, "appearances": { "default": { "mapping": { - "minHeight": 48, - "paddingVertical": 12, - "paddingHorizontal": 8, - "textMarginHorizontal": 8, + "borderWidth": 1, + "backgroundColor": "background-basic-color-3", + "borderColor": "border-basic-color-4", + "textColor": "text-basic-color", + "iconTintColor": "transparent", + "outlineBackgroundColor": "transparent", + "width": 24, + "height": 24, + "iconWidth": 16, + "iconHeight": 16, + "outlineWidth": 40, + "outlineHeight": 40, + "borderRadius": 12, + "iconBorderRadius": 8, + "outlineBorderRadius": 20, + "textMarginHorizontal": 12, "textFontSize": "text-subtitle-2-font-size", "textLineHeight": "text-subtitle-2-line-height", "textFontWeight": "text-subtitle-2-font-weight", - "textColor": "text-basic-color", - "iconWidth": 24, - "iconHeight": 24, - "iconMarginHorizontal": 8, - "iconTintColor": "text-basic-color", "state": { "active": { - "textColor": "text-primary-color", - "iconTintColor": "text-primary-color" + "borderColor": "border-basic-color-4", + "outlineBackgroundColor": "outline-color" + }, + "checked": { + "borderColor": "color-primary-default", + "iconTintColor": "color-primary-default" }, "disabled": { - "textColor": "text-disabled-color", - "iconTintColor": "text-disabled-color" + "backgroundColor": "background-basic-color-2", + "borderColor": "border-basic-color-3", + "textColor": "text-disabled-color" + }, + "checked.active": { + "borderColor": "color-primary-focus" + }, + "checked.disabled": { + "iconTintColor": "background-basic-color-4", + "textColor": "text-disabled-color" + } + } + }, + "variantGroups": { + "status": { + "primary": { + "borderColor": "color-primary-default", + "state": { + "active": { + "borderColor": "color-primary-active" + }, + "checked": { + "borderColor": "color-primary-default", + "iconTintColor": "color-primary-default" + }, + "checked.active": { + "borderColor": "color-primary-focus" + } + } + }, + "success": { + "borderColor": "color-success-default", + "state": { + "active": { + "borderColor": "color-success-active" + }, + "checked": { + "borderColor": "color-success-default", + "iconTintColor": "color-success-default" + }, + "checked.active": { + "borderColor": "color-success-focus" + } + } + }, + "info": { + "borderColor": "color-info-default", + "state": { + "active": { + "borderColor": "color-info-active" + }, + "checked": { + "borderColor": "color-info-default", + "iconTintColor": "color-info-default" + }, + "checked.active": { + "borderColor": "color-info-focus" + } + } + }, + "warning": { + "borderColor": "color-warning-default", + "state": { + "active": { + "borderColor": "color-warning-active" + }, + "checked": { + "borderColor": "color-warning-default", + "iconTintColor": "color-warning-default" + }, + "checked.active": { + "borderColor": "color-warning-focus" + } + } + }, + "danger": { + "borderColor": "color-danger-default", + "state": { + "active": { + "borderColor": "color-danger-active" + }, + "checked": { + "borderColor": "color-danger-default", + "iconTintColor": "color-danger-default" + }, + "checked.active": { + "borderColor": "color-danger-focus" + } + } } } } } } }, - "Popover": { + "RadioGroup": { "meta": { "scope": "all", "parameters": { - "minWidth": { - "type": "number" - }, - "minHeight": { - "type": "number" - }, - "maxWidth": { - "type": "number" - }, - "borderRadius": { - "type": "number" - }, - "backgroundColor": { - "type": "string" - }, - "indicatorWidth": { - "type": "number" - }, - "indicatorHeight": { + "padding": { "type": "number" - }, - "indicatorBackgroundColor": { - "type": "string" } }, "appearances": { @@ -2103,41 +2015,52 @@ "appearances": { "default": { "mapping": { - "minWidth": 56, - "minHeight": 32, - "maxWidth": 256, - "borderRadius": 8, - "backgroundColor": "background-basic-color-1", - "indicatorWidth": 6, - "indicatorHeight": 6, - "indicatorBackgroundColor": "background-basic-color-1" + "padding": 0 } } } }, - "Radio": { + "Select": { "meta": { "scope": "all", "parameters": { - "width": { + "minWidth": { "type": "number" }, - "height": { + "minHeight": { "type": "number" }, - "borderRadius": { + "paddingHorizontal": { "type": "number" }, - "borderWidth": { + "paddingVertical": { + "type": "number" + }, + "borderRadius": { "type": "number" }, "borderColor": { "type": "string" }, + "borderWidth": { + "type": "number" + }, "backgroundColor": { "type": "string" }, - "textColor": { + "placeholderMarginHorizontal": { + "type": "number" + }, + "placeholderFontSize": { + "type": "number" + }, + "placeholderLineHeight": { + "type": "number" + }, + "placeholderFontWeight": { + "type": "string" + }, + "placeholderColor": { "type": "string" }, "textMarginHorizontal": { @@ -2152,22 +2075,49 @@ "textFontWeight": { "type": "string" }, + "textColor": { + "type": "string" + }, "iconWidth": { "type": "number" }, "iconHeight": { "type": "number" }, - "iconBorderRadius": { + "iconTintColor": { + "type": "string" + }, + "iconMarginHorizontal": { "type": "number" }, - "iconTintColor": { + "menuMaxHeight": { + "type": "number" + }, + "menuBorderRadius": { + "type": "number" + }, + "menuBorderColor": { "type": "string" }, - "outlineWidth": { + "menuBorderWidth": { "type": "number" }, - "outlineHeight": { + "labelColor": { + "type": "string" + }, + "labelFontSize": { + "type": "number" + }, + "labelLineHeight": { + "type": "number" + }, + "labelFontWeight": { + "type": "string" + }, + "labelMarginBottom": { + "type": "number" + }, + "outlinePadding": { "type": "number" }, "outlineBorderRadius": { @@ -2185,7 +2135,7 @@ "variantGroups": { "status": { "primary": { - "default": false + "default": true }, "success": { "default": false @@ -2202,19 +2152,14 @@ } }, "states": { - "checked": { - "default": false, - "priority": 0, - "scope": "all" - }, "disabled": { "default": false, - "priority": 1, + "priority": 0, "scope": "all" }, "active": { "default": false, - "priority": 2, + "priority": 1, "scope": "all" } } @@ -2222,122 +2167,84 @@ "appearances": { "default": { "mapping": { + "menuMaxHeight": 220, + "menuBorderRadius": 4, + "menuBorderColor": "border-basic-color-4", + "menuBorderWidth": 1, + "borderRadius": 4, "borderWidth": 1, - "backgroundColor": "background-basic-color-3", - "borderColor": "border-basic-color-4", - "textColor": "text-basic-color", - "iconTintColor": "transparent", + "paddingHorizontal": 8, + "borderColor": "border-basic-color-3", + "backgroundColor": "background-basic-color-2", + "minHeight": 48, + "paddingVertical": 7, + "placeholderMarginHorizontal": 8, + "placeholderColor": "text-hint-color", + "placeholderFontWeight": "text-paragraph-1-font-weight", + "placeholderFontSize": "text-subtitle-1-font-size", + "placeholderLineHeight": "text-paragraph-1-line-height", + "textMarginHorizontal": 8, + "textColor": "border-alternative-color-1", + "textFontWeight": "text-subtitle-1-font-weight", + "textFontSize": "text-subtitle-1-font-size", + "textLineHeight": "text-subtitle-1-line-height", + "iconWidth": 24, + "iconHeight": 24, + "iconMarginHorizontal": 8, + "iconTintColor": "text-hint-color", + "labelColor": "text-hint-color", + "labelMarginBottom": 4, "outlineBackgroundColor": "transparent", - "width": 24, - "height": 24, - "iconWidth": 16, - "iconHeight": 16, - "outlineWidth": 40, - "outlineHeight": 40, - "borderRadius": 12, - "iconBorderRadius": 8, - "outlineBorderRadius": 20, - "textMarginHorizontal": 12, - "textFontSize": "text-subtitle-2-font-size", - "textLineHeight": "text-subtitle-2-line-height", - "textFontWeight": "text-subtitle-2-font-weight", + "outlinePadding": 4, + "outlineBorderRadius": 4, "state": { "active": { - "borderColor": "border-basic-color-4", - "outlineBackgroundColor": "outline-color" - }, - "checked": { - "borderColor": "color-primary-default", - "iconTintColor": "color-primary-default" + "outlineBackgroundColor": "outline-color", + "backgroundColor": "background-basic-color-1", + "iconTintColor": "border-alternative-color-1" }, "disabled": { - "backgroundColor": "background-basic-color-2", - "borderColor": "border-basic-color-3", - "textColor": "text-disabled-color" - }, - "checked.active": { - "borderColor": "color-primary-focus" - }, - "checked.disabled": { - "iconTintColor": "background-basic-color-4", - "textColor": "text-disabled-color" + "borderColor": "border-basic-color-4", + "placeholderColor": "text-disabled-color", + "textColor": "text-disabled-color", + "iconTintColor": "icon-disabled-color" } } }, "variantGroups": { "status": { "primary": { - "borderColor": "color-primary-default", "state": { "active": { - "borderColor": "color-primary-active" - }, - "checked": { - "borderColor": "color-primary-default", - "iconTintColor": "color-primary-default" - }, - "checked.active": { - "borderColor": "color-primary-focus" + "borderColor": "color-primary-default" } } }, "success": { - "borderColor": "color-success-default", "state": { "active": { - "borderColor": "color-success-active" - }, - "checked": { - "borderColor": "color-success-default", - "iconTintColor": "color-success-default" - }, - "checked.active": { - "borderColor": "color-success-focus" + "borderColor": "color-success-default" } } }, "info": { - "borderColor": "color-info-default", "state": { "active": { - "borderColor": "color-info-active" - }, - "checked": { - "borderColor": "color-info-default", - "iconTintColor": "color-info-default" - }, - "checked.active": { - "borderColor": "color-info-focus" + "borderColor": "color-info-default" } } }, "warning": { - "borderColor": "color-warning-default", "state": { "active": { - "borderColor": "color-warning-active" - }, - "checked": { - "borderColor": "color-warning-default", - "iconTintColor": "color-warning-default" - }, - "checked.active": { - "borderColor": "color-warning-focus" + "borderColor": "color-warning-default" } } }, "danger": { - "borderColor": "color-danger-default", "state": { "active": { - "borderColor": "color-danger-active" - }, - "checked": { - "borderColor": "color-danger-default", - "iconTintColor": "color-danger-default" - }, - "checked.active": { - "borderColor": "color-danger-focus" + "borderColor": "color-danger-default" } } } @@ -2346,11 +2253,14 @@ } } }, - "RadioGroup": { + "SelectGroupOption": { "meta": { "scope": "all", "parameters": { - "padding": { + "backgroundColor": { + "type": "string" + }, + "itemPaddingHorizontal": { "type": "number" } }, @@ -2365,7 +2275,97 @@ "appearances": { "default": { "mapping": { - "padding": 0 + "backgroundColor": "background-basic-color-1", + "itemPaddingHorizontal": 20 + } + } + } + }, + "SelectOption": { + "meta": { + "scope": "all", + "parameters": { + "paddingVertical": { + "type": "number" + }, + "paddingHorizontal": { + "type": "number" + }, + "backgroundColor": { + "type": "string" + }, + "multiSelectBackgroundColor": { + "type": "string" + }, + "multiSelectTextColor": { + "type": "string" + }, + "textMarginHorizontal": { + "type": "number" + }, + "textFontSize": { + "type": "number" + }, + "textLineHeight": { + "type": "number" + }, + "textFontWeight": { + "type": "string" + }, + "textColor": { + "type": "string" + } + }, + "appearances": { + "default": { + "default": true + } + }, + "variantGroups": {}, + "states": { + "disabled": { + "default": false, + "priority": 0, + "scope": "all" + }, + "active": { + "default": false, + "priority": 1, + "scope": "all" + }, + "selected": { + "default": false, + "priority": 2, + "scope": "all" + } + } + }, + "appearances": { + "default": { + "mapping": { + "paddingHorizontal": 8, + "paddingVertical": 8, + "textMarginHorizontal": 8, + "backgroundColor": "background-basic-color-1", + "multiSelectBackgroundColor": "background-basic-color-1", + "multiSelectTextColor": "background-alternative-color-1", + "textFontSize": "text-subtitle-1-font-size", + "textFontWeight": "text-subtitle-1-font-weight", + "textLineHeight": "text-subtitle-2-line-height", + "textColor": "background-alternative-color-1", + "state": { + "active": { + "backgroundColor": "background-basic-color-2" + }, + "selected": { + "textColor": "text-alternate-color", + "backgroundColor": "color-primary-default" + }, + "disabled": { + "textColor": "text-hint-color", + "multiSelectTextColor": "text-hint-color" + } + } } } } diff --git a/src/playground/src/navigation/navigation.component.tsx b/src/playground/src/navigation/navigation.component.tsx index 45116ce36..049c54c2b 100644 --- a/src/playground/src/navigation/navigation.component.tsx +++ b/src/playground/src/navigation/navigation.component.tsx @@ -24,7 +24,7 @@ import { LayoutContainer, SampleContainer, ModalContainer, - DropdownContainer, + SelectContainer, SpinnerContainer, IconContainer, } from '../ui/screen'; @@ -40,7 +40,6 @@ const AppNavigator = createStackNavigator({ ['Button']: ButtonContainer, ['Button Group']: ButtonGroupContainer, ['Checkbox']: CheckBoxContainer, - ['Dropdown']: DropdownContainer, ['Icon']: IconContainer, ['Input']: InputContainer, ['Layout']: LayoutContainer, @@ -56,6 +55,7 @@ const AppNavigator = createStackNavigator({ ['Top Navigation']: TopNavigationContainer, ['Overflow Menu']: OverflowMenuContainer, ['Sample']: SampleContainer, + ['Select']: SelectContainer, ['Modal']: ModalContainer, }, { initialRouteName: 'Home', diff --git a/src/playground/src/ui/screen/dropdown/dropdown.container.tsx b/src/playground/src/ui/screen/dropdown/dropdown.container.tsx deleted file mode 100644 index 8072181e4..000000000 --- a/src/playground/src/ui/screen/dropdown/dropdown.container.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { - DropdownProps, - DropdownElement, -} from '@kitten/ui'; -import { ShowcaseContainer } from '../common/showcase.container'; -import { DropdownShowcase } from './dropdownShowcase.component'; -import { - dropdownShowcase, - dropdownSettings, -} from './type'; - -export class DropdownContainer extends React.Component { - - private renderItem = (props: DropdownProps): DropdownElement => { - return ( - - ); - }; - - public render(): React.ReactNode { - return ( - - - ); - } -} diff --git a/src/playground/src/ui/screen/dropdown/dropdownShowcase.component.tsx b/src/playground/src/ui/screen/dropdown/dropdownShowcase.component.tsx deleted file mode 100644 index 342bbfb23..000000000 --- a/src/playground/src/ui/screen/dropdown/dropdownShowcase.component.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { StyleSheet } from 'react-native'; -import { - Dropdown, - DropdownOption, - DropdownProps, - DropdownElement, -} from '@kitten/ui'; - -interface DropdownShowcaseComponentState { - selectedOption: DropdownOption; -} - -class DropdownShowcaseComponent extends React.Component { - - public constructor(props: DropdownProps) { - super(props); - this.state = { - selectedOption: props.multiSelect ? [] : null, - }; - } - - private setSelectedOption = (selectedOption: DropdownOption): void => { - this.setState({ selectedOption }); - }; - - public render(): DropdownElement { - return ( - - ); - } -} - -const styles = StyleSheet.create({ - dropdown: { - width: 200, - }, -}); - -export const DropdownShowcase = (props: DropdownProps): DropdownElement => { - return ( - - ); -}; diff --git a/src/playground/src/ui/screen/home.component.tsx b/src/playground/src/ui/screen/home.component.tsx index ae810c7a4..630c5bc32 100644 --- a/src/playground/src/ui/screen/home.component.tsx +++ b/src/playground/src/ui/screen/home.component.tsx @@ -22,7 +22,6 @@ export const routes: RouteType[] = [ { name: 'Button Group' }, { name: 'Checkbox' }, { name: 'Icon' }, - { name: 'Dropdown' }, { name: 'Input' }, { name: 'Layout' }, { name: 'List' }, @@ -38,6 +37,7 @@ export const routes: RouteType[] = [ { name: 'Top Navigation' }, { name: 'Overflow Menu' }, { name: 'Sample' }, + { name: 'Select' }, ]; type Props = ThemedComponentProps & NavigationScreenProps; diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts index f4cfaac3d..e2f4677e3 100644 --- a/src/playground/src/ui/screen/index.ts +++ b/src/playground/src/ui/screen/index.ts @@ -19,5 +19,5 @@ export { TopNavigationContainer } from './topNavigation/topNavigation.container' export { OverflowMenuContainer } from './overflowMenu/overflowMenu.container'; export { SampleContainer } from './sample/sample.container'; export { ModalContainer } from './modal/modal.container'; -export { DropdownContainer } from './dropdown/dropdown.container'; +export { SelectContainer } from './select/select.container'; export { default as Home } from './home.component'; diff --git a/src/playground/src/ui/screen/select/select.container.tsx b/src/playground/src/ui/screen/select/select.container.tsx new file mode 100644 index 000000000..e70e462b2 --- /dev/null +++ b/src/playground/src/ui/screen/select/select.container.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { + SelectProps, + SelectElement, +} from '@kitten/ui'; +import { ShowcaseContainer } from '../common/showcase.container'; +import { SelectShowcase } from './selectShowcase.component'; +import { + selectShowcase, + selectSettings, +} from './type'; + +export class SelectContainer extends React.Component { + + private renderItem = (props: SelectProps): SelectElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + + ); + } +} diff --git a/src/playground/src/ui/screen/select/selectShowcase.component.tsx b/src/playground/src/ui/screen/select/selectShowcase.component.tsx new file mode 100644 index 000000000..ffcacdc4b --- /dev/null +++ b/src/playground/src/ui/screen/select/selectShowcase.component.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { + Select, + SelectOption, + SelectProps, + SelectElement, +} from '@kitten/ui'; + +interface SelectShowcaseComponentState { + selectedOption: SelectOption; +} + +class SelectShowcaseComponent extends React.Component { + + public constructor(props: SelectProps) { + super(props); + this.state = { + selectedOption: props.multiSelect ? [] : null, + }; + } + + private setSelectedOption = (selectedOption: SelectOption): void => { + this.setState({ selectedOption }); + }; + + public render(): SelectElement { + return ( +