Web: Components: added story of Checkbox, fix passing props
This commit is contained in:
parent
4b3e491e95
commit
9ae9d7132e
@ -129,7 +129,6 @@ class Wrapper extends React.Component {
|
||||
});
|
||||
}
|
||||
render() {
|
||||
console.log(this.props);
|
||||
const {
|
||||
unknownError,
|
||||
unknownTypeError,
|
||||
|
@ -69,7 +69,7 @@ export default {
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import Calendar from "@appserver/components/calendar";
|
||||
import Calendar from "@appserver/components/calendar";
|
||||
|
||||
<Calendar
|
||||
onChange={(date) => {
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
maxDate={new Date("3000/01/01")}
|
||||
locale="ru"
|
||||
/>
|
||||
`,
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -97,6 +97,7 @@ const Template = (args) => {
|
||||
selectedDate={new Date(args.selectedDate)}
|
||||
openToDate={new Date(args.openToDate)}
|
||||
minDate={new Date(args.minDate)}
|
||||
locale="en"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -77,7 +77,9 @@ const CalendarStyle = styled.div`
|
||||
|
||||
.calendar-month_selected-day {
|
||||
background-color: ${(props) =>
|
||||
props.theme.calendar.selectedDay.backgroundColor};
|
||||
props.color
|
||||
? props.color
|
||||
: props.theme.calendar.selectedDay.backgroundColor};
|
||||
border-radius: ${(props) => props.theme.calendar.selectedDay.borderRadius};
|
||||
cursor: ${(props) => props.theme.calendar.selectedDay.cursor};
|
||||
color: ${(props) => props.theme.calendar.selectedDay.color};
|
||||
|
@ -1,5 +1,105 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
|
||||
import Checkbox from "./";
|
||||
|
||||
export default {
|
||||
title: "Components/Checkbox",
|
||||
component: Checkbox,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: { component: "Custom checkbox input" },
|
||||
source: {
|
||||
code: `
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
|
||||
<Checkbox
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
label="label"
|
||||
isChecked={false}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Used as HTML id property" },
|
||||
isChecked: {
|
||||
description: "The checked property sets the checked state of a checkbox",
|
||||
},
|
||||
isDisabled: { description: "Disables the Checkbox input " },
|
||||
isIndeterminate: {
|
||||
description:
|
||||
"If true, this state is shown as a rectangle in the checkbox",
|
||||
},
|
||||
label: { description: "Label of the input" },
|
||||
name: { description: "Used as HTML `name` property" },
|
||||
onChange: {
|
||||
description: "Will be triggered whenever an CheckboxInput is clicked ",
|
||||
action: "onChange",
|
||||
},
|
||||
style: { description: "Accepts css style " },
|
||||
value: { description: "Value of the input" },
|
||||
title: { description: "Title " },
|
||||
truncate: { description: "Disables word wrapping" },
|
||||
},
|
||||
};
|
||||
|
||||
class Wrapper extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isChecked: false,
|
||||
};
|
||||
}
|
||||
|
||||
onChange = (e) => {
|
||||
this.props.onChange(e);
|
||||
this.setState({ isChecked: !this.state.isChecked });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Checkbox
|
||||
{...this.props}
|
||||
isChecked={this.props.isChecked || this.state.isChecked}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
const Template = (args) => {
|
||||
return <Wrapper {...args} />;
|
||||
};
|
||||
|
||||
const AllCheckboxesTemplate = (args) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat( auto-fill, minmax(120px, 1fr) )",
|
||||
gridGap: "16px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox />
|
||||
<Checkbox isChecked={true} />
|
||||
<Checkbox isDisabled={true} />
|
||||
<Checkbox isIndeterminate={true} />
|
||||
<Checkbox label="Some label" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
export const AllCheckboxStates = AllCheckboxesTemplate.bind({});
|
||||
/*import { storiesOf } from "@storybook/react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { BooleanValue } from "react-values";
|
||||
import { withKnobs, boolean, text } from "@storybook/addon-knobs/react";
|
||||
@ -31,4 +131,4 @@ storiesOf("Components|Input", module)
|
||||
)}
|
||||
</BooleanValue>
|
||||
</Section>
|
||||
));
|
||||
));*/
|
||||
|
Loading…
Reference in New Issue
Block a user