Orders, 2nd iteration #89
Conversation
…exists in IOrder.
… component that implements IToggle. Added two IToggle components: ToggleButton and RadioButton. And corresponding group components: ToggleButtonGroup and RadioButtonGroup, which is wery small and just extends ToggleGroup with ToggleButton and RadioButton correspondingly as their group element.
| never | ||
| > { | ||
| protected handleChange = (params: ITogglerChangeParams) => { | ||
| this.props.onChange && |
There was a problem hiding this comment.
let's create universal "change api" for all input component.
IChangable<TValue> {
props: {
value: TValue;
name: string;
onChange(params: IChangeParams<TValue>) => void;
}
}
interface IChangeParams<TValue> {
name: string;
value: TValue;
stringValue?: string;
}
| cssClasses={cssClasses} | ||
| onChange={this.handleChange} | ||
| type="radio" | ||
| name={groupName || ''} |
There was a problem hiding this comment.
all radiobuttons will have one group by default. it can be confused.
| }; | ||
|
|
||
| public render() { | ||
| const cssClasses = this.props.cssClasses |
There was a problem hiding this comment.
best way to define default props values is using defaultProps static field.
| titleBefore?: boolean; | ||
| } | ||
|
|
||
| const defaultCssClasses: ICssClasses = { |
There was a problem hiding this comment.
it should be static part of RadioButton class
|
|
||
| const state = observable({ | ||
| value: 'normal', | ||
| onChange: action.bound(function (value) { |
There was a problem hiding this comment.
please see comment about universal api for input components
| className?: string; | ||
| elementClassName?: string; | ||
| name?: string; | ||
| elementCtor: new () => TElement; |
There was a problem hiding this comment.
Commonly render not constructor. We should pass here ReactNode.
| <Tag | ||
| className="elementClassName" | ||
| title={this.getDisplayValue(x)} | ||
| groupName={this.buttonGroupName} |
There was a problem hiding this comment.
whats will happen if i pass smth without this(groupName) props ?
maybe it needs interface definition for render (elementCtor)
kind of
IToggleGroupProps<TValue, TElement implements IRadioButton>
| @@ -18,6 +18,7 @@ export interface ITogglerProps { | |||
| className?: string; | |||
| cssClasses?: ICssClasses; | |||
| onChange?: (params: ITogglerChangeParams) => void; | |||
| type?: string; | |||
There was a problem hiding this comment.
please use evident type def for this props:
type?: 'checkbox' | 'chotuteshemozhetbit' | 'smth'
There was a problem hiding this comment.
'checkbox' | 'radiobutton' i think
| @@ -48,7 +50,7 @@ export class Toggler extends React.PureComponent<ITogglerProps, never> { | |||
| <input | |||
| key="a" | |||
| name={name} | |||
| type="checkbox" | |||
| type={type || 'checkbox'} | |||
There was a problem hiding this comment.
how will it look if i pass "password" here ? ))))
| @@ -48,7 +50,7 @@ export class Toggler extends React.PureComponent<ITogglerProps, never> { | |||
| <input | |||
| key="a" | |||
| name={name} | |||
| type="checkbox" | |||
| type={type || 'checkbox'} | |||
| className={cssClasses.input} | |||
| checked={value} | |||
There was a problem hiding this comment.
here i use 'value' as external interface. please refer to comment about using checked and value together.
…otherwise - radio.
- Toggler has groupName; - ToggleButton, RadioButton implements IChengable<boolean> and has groupName; - refactor ToggleGroup; - add sg samples;
…dth to 100%. Now we can set labels width.
…llet into OrderPreviewItem
No description provided.