Skip to content

Commit

Permalink
feat(ui): select styles namings refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@32penkin
32penkin authored Aug 26, 2019
1 parent 1011189 commit 6eec5ca
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 27 deletions.
38 changes: 19 additions & 19 deletions src/framework/ui/select/select.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export type SelectElement = React.ReactElement<SelectProps>;

interface State {
visible: boolean;
menuWidth: number;
optionsListWidth: number;
}

/**
Expand Down Expand Up @@ -437,7 +437,7 @@ class SelectComponent extends React.Component<SelectProps, State> {

public state: State = {
visible: false,
menuWidth: 0,
optionsListWidth: 0,
};

private strategy: SelectionStrategy;
Expand Down Expand Up @@ -520,7 +520,7 @@ class SelectComponent extends React.Component<SelectProps, State> {
private onControlMeasure = (result: MeasureResult): void => {
const width: number = result[MEASURED_CONTROL_TAG].size.width;

this.setState({ menuWidth: width });
this.setState({ optionsListWidth: width });
};

private getComponentStyle = (source: StyleType): StyleType => {
Expand All @@ -537,7 +537,7 @@ class SelectComponent extends React.Component<SelectProps, State> {
const iconStyles: StyleType = allWithPrefix(source, 'icon');
const textStyles: StyleType = allWithPrefix(source, 'text');
const placeholderStyles: StyleType = allWithPrefix(source, 'placeholder');
const menuStyles: StyleType = allWithPrefix(source, 'menu');
const optionsListStyles: StyleType = allWithPrefix(source, 'optionsList');
const labelStyle: StyleType = allWithPrefix(source, 'label');
const outlineStyles: StyleType = allWithPrefix(source, 'outline');

Expand Down Expand Up @@ -577,11 +577,11 @@ class SelectComponent extends React.Component<SelectProps, State> {
padding: outlineStyles.outlinePadding,
borderRadius: outlineStyles.outlineBorderRadius,
},
menu: {
maxHeight: menuStyles.menuMaxHeight,
borderRadius: menuStyles.menuBorderRadius,
borderColor: menuStyles.menuBorderColor,
borderWidth: menuStyles.menuBorderWidth,
optionsList: {
maxHeight: optionsListStyles.optionsListMaxHeight,
borderRadius: optionsListStyles.optionsListBorderRadius,
borderColor: optionsListStyles.optionsListBorderColor,
borderWidth: optionsListStyles.optionsListBorderWidth,
},
label: {
color: labelStyle.labelColor,
Expand Down Expand Up @@ -641,16 +641,16 @@ class SelectComponent extends React.Component<SelectProps, State> {
);
};

private renderMenuElement = (style: StyleType): SelectOptionsListElement => {
private renderOptionsListElement = (style: StyleType): SelectOptionsListElement => {
const { appearance, selectedOption, ...restProps } = this.props;
const additionalMenuStyle: StyleType = { width: this.state.menuWidth };
const additionalOptionsListStyle: StyleType = { width: this.state.optionsListWidth };

return (
<SelectOptionsList
{...restProps}
strategy={this.strategy}
key={0}
style={[styles.menu, style, additionalMenuStyle]}
style={[styles.optionsList, style, additionalOptionsListStyle]}
bounces={false}
onSelect={this.onItemSelect}
/>
Expand Down Expand Up @@ -695,27 +695,27 @@ class SelectComponent extends React.Component<SelectProps, State> {
const { label } = this.props;

return [
this.renderMenuElement(style.menu),
this.renderOptionsListElement(style.optionsList),
isValidString(label) && this.renderLabelElement(style.label),
this.renderControlElement(),
];
};

public render(): SelectElement {
const { themedStyle, style } = this.props;
const { visible, menuWidth } = this.state;
const { visible, optionsListWidth } = this.state;
const componentStyle: StyleType = this.getComponentStyle(themedStyle);
const [menuElement, labelElement, controlElement] = this.renderComponentChildren(componentStyle);
const additionalMenuStyle: StyleType = { maxWidth: menuWidth };
const [optionsListElement, labelElement, controlElement] = this.renderComponentChildren(componentStyle);
const additionalOptionsListStyle: StyleType = { maxWidth: optionsListWidth };

return (
<View style={style}>
{labelElement}
<View style={[styles.outline, componentStyle.outline]}>
<Popover
visible={visible}
content={menuElement}
style={additionalMenuStyle}
content={optionsListElement}
style={additionalOptionsListStyle}
indicatorStyle={styles.indicator}
onBackdropPress={this.setVisibility}>
{controlElement}
Expand All @@ -741,7 +741,7 @@ const styles = StyleSheet.create({
width: 0,
height: 6,
},
menu: {
optionsList: {
flexGrow: 0,
},
outlineContainer: {
Expand Down
16 changes: 8 additions & 8 deletions src/framework/ui/support/tests/mapping.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2274,16 +2274,16 @@
"iconMarginHorizontal": {
"type": "number"
},
"menuMaxHeight": {
"optionsListMaxHeight": {
"type": "number"
},
"menuBorderRadius": {
"optionsListBorderRadius": {
"type": "number"
},
"menuBorderColor": {
"optionsListBorderColor": {
"type": "string"
},
"menuBorderWidth": {
"optionsListBorderWidth": {
"type": "number"
},
"labelColor": {
Expand Down Expand Up @@ -2351,10 +2351,10 @@
"appearances": {
"default": {
"mapping": {
"menuMaxHeight": 220,
"menuBorderRadius": 4,
"menuBorderColor": "border-basic-color-4",
"menuBorderWidth": 1,
"optionsListMaxHeight": 220,
"optionsListBorderRadius": 4,
"optionsListBorderColor": "border-basic-color-4",
"optionsListBorderWidth": 1,
"borderRadius": 4,
"borderWidth": 1,
"paddingHorizontal": 8,
Expand Down

2 comments on commit 6eec5ca

@chandlervdw
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's a bug with this commit. I get a TypeError: Cannot read property 'appearances' of undefined when using a very basic version of the Select component (used with hooks):

              <Select
                  data={items}
                  selectedOption={selectedOrg}
                  onSelect={(selectedOption: SelectOption): void => {
                    setSelectedOrg(selectedOption);
                  }}
                />

it can be traced back to styleConsumer.service.js:89

@32penkin
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @chandlervdw! Please try to upgrade react-native-ui-kitten to the last beta version

Please sign in to comment.