Skip to content
Permalink
Browse files

Merge branch 'develop' into chore/ddw-665-rewrite-numeric-input-compo…

…nent
  • Loading branch information...
DominikGuzei committed Jun 16, 2019
2 parents 05a864b + 48914e2 commit f35a7e52424629a88caa6a24d77f90746948282f
@@ -12,6 +12,15 @@ Upcoming changes for the next release.

- `NumericInput` component was completely rewritten to be more flexible and straight forward.
[PR 114](https://github.com/input-output-hk/react-polymorph/pull/114)

0.8.7
=====

### Features

- Adds selected option render prop on Select component to override default input value format.
Adds Stepper component, theme, skin, and stories.
[PR 115](https://github.com/input-output-hk/react-polymorph/pull/115)

0.8.6
=====
@@ -20,6 +20,12 @@ const COUNTRIES_DISABLED_OPTIONS = [
{ value: 'EN-en', label: 'USA' }
];

const WALLETS = [
{ value: '100,100 ADA', label: 'Main wallet' },
{ value: '10,100.2 ADA', label: 'Spending money' },
{ value: '500,1000 ADA', label: 'Savings' },
];

test('Select renders correctly', () => {
const component = renderInSimpleTheme(
<Select options={COUNTRIES} />
@@ -102,3 +108,26 @@ test('Select uses render prop - optionRenderer', () => {
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

test('Select uses render prop - valueRenderer', () => {
const component = renderInSimpleTheme(
<Select
options={WALLETS}
optionRenderer={option => (
<div>
<div>{option.label}</div>
<div>{option.value}</div>
</div>
)}
selectionRenderer={option => (
<div>
<div>{option.label}</div>
<div>{option.value}</div>
</div>
)}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
@@ -0,0 +1,45 @@
import React from 'react';
import renderer from 'react-test-renderer';

import { Stepper } from '../source/components/Stepper';
import { renderInSimpleTheme } from './helpers/theming';

const STEPS = ['Wallet', 'Stake pool', 'Delegation', 'Activation'];

test('Stepper renders correctly', () => {
const component = renderInSimpleTheme(
<Stepper
options={STEPS}
activeStep={3}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

test('Stepper renders with custom label', () => {
const component = renderInSimpleTheme(
<Stepper
activeStep={3}
label="Setup progress"
options={STEPS}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

test('Stepper renders without label', () => {
const component = renderInSimpleTheme(
<Stepper
activeStep={3}
labelDisabled
options={STEPS}
/>
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
@@ -849,3 +849,112 @@ exports[`Select uses render prop - optionRenderer 1`] = `
</div>
</div>
`;

exports[`Select uses render prop - valueRenderer 1`] = `
<div>
<div
className="select"
>
<div
className="selectInput"
>
<div
className="root"
>

<div
className="inputWrapper"
>
<div
className="customValueWrapper"
>
<input
className="input"
onChange={[Function]}
onClick={[Function]}
readOnly={true}
value=""
/>
<div
className="customValueBlock"
/>
</div>
</div>
</div>
</div>
<div
className="options firstOptionHighlighted root isFloating isHidden"
style={null}
>
<div
className="bubble"
data-bubble-container={true}
>
<ul
className="ul"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
Object {
"maxHeight": "300px",
}
}
>
<li
aria-hidden={true}
className="option highlightedOption"
onClick={[Function]}
onMouseEnter={[Function]}
role="presentation"
>
<div>
<div>
Main wallet
</div>
<div>
100,100 ADA
</div>
</div>
</li>
<li
aria-hidden={true}
className="option"
onClick={[Function]}
onMouseEnter={[Function]}
role="presentation"
>
<div>
<div>
Spending money
</div>
<div>
10,100.2 ADA
</div>
</div>
</li>
<li
aria-hidden={true}
className="option"
onClick={[Function]}
onMouseEnter={[Function]}
role="presentation"
>
<div>
<div>
Savings
</div>
<div>
500,1000 ADA
</div>
</div>
</li>
</ul>
</div>
<span
className="arrow"
data-bubble-arrow={true}
/>
</div>
</div>
</div>
`;
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Stepper renders correctly 1`] = `null`;

exports[`Stepper renders with custom label 1`] = `null`;

exports[`Stepper renders without label 1`] = `null`;
@@ -1,7 +1,7 @@
{
"name": "react-polymorph",
"description": "React components with highly customizable logic, markup and styles.",
"version": "0.8.5",
"version": "0.8.7",
"scripts": {
"build": "cross-env npm run clean && npm run sass && npm run js",
"clean": "rimraf ./lib",
@@ -31,6 +31,8 @@ type Props = {
placeholder?: string,
readOnly: boolean,
setError?: Function,
selectedOption?: any,
selectionRenderer?: Function,
skin?: ComponentType<any>,
theme: ?Object, // will take precedence over theme in context if passed
themeId: string,
@@ -28,11 +28,12 @@ type Props = {
optionRenderer?: Function,
options: Array<any>,
placeholder?: string,
selectionRenderer?: Function,
skin?: ComponentType<any>,
theme: ?Object, // will take precedence over theme in context if passed
themeId: string,
themeOverrides: Object,
value: string
value: string,
};

type State = {
@@ -0,0 +1,75 @@
// @flow
import React, { Component } from 'react';
import type { ComponentType } from 'react';

// internal utility functions
import { createEmptyContext, withTheme } from './HOC/withTheme';
import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';

// import constants
import { IDENTIFIERS } from '.';
import type { ThemeContextProp } from './HOC/withTheme';

type Props = {
activeStep?: number,
className?: string,
context: ThemeContextProp,
label?: string,
labelDisabled?: boolean,
onStepClick?: Function,
skin?: ComponentType<any>,
steps: Array<string>,
theme: ?Object, // will take precedence over theme in context if passed
themeId: string,
themeOverrides: Object,
};

type State = {
composedTheme: Object
};

class StepperBase extends Component<Props, State> {
// define static properties
static displayName = 'Stepper';
static defaultProps = {
context: createEmptyContext(),
theme: null,
themeId: IDENTIFIERS.STEPPER,
themeOverrides: {}
};

constructor(props: Props) {
super(props);

const { context, themeId, theme, themeOverrides } = props;

this.state = {
composedTheme: composeTheme(
addThemeId(theme || context.theme, themeId),
addThemeId(themeOverrides, themeId),
context.ROOT_THEME_API
)
};
}

componentWillReceiveProps(nextProps: Props) {
didThemePropsChange(this.props, nextProps, this.setState.bind(this));
}

render() {
// destructuring props ensures only the "...rest" get passed down
const {
skin,
theme,
themeOverrides,
context,
...rest
} = this.props;

const StepperSkin = skin || context.skins[this.props.themeId];

return <StepperSkin theme={this.state.composedTheme} {...rest} />;
}
}

export const Stepper = withTheme(StepperBase);
@@ -17,6 +17,7 @@ export const IDENTIFIERS = {
PROGRESS_BAR: 'progressbar',
RADIO: 'radio',
SELECT: 'select',
STEPPER: 'stepper',
SWITCH: 'switch',
TEXT_AREA: 'textarea',
TOGGLER: 'toggler',

0 comments on commit f35a7e5

Please sign in to comment.
You can’t perform that action at this time.