110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import { storiesOf } from "@storybook/react";
|
|
import { action } from "@storybook/addon-actions";
|
|
import { withKnobs, text, select } from "@storybook/addon-knobs/react";
|
|
import withReadme from "storybook-readme/with-readme";
|
|
import Readme from "./README.md";
|
|
import AvatarEditor from ".";
|
|
import Avatar from "../avatar";
|
|
import Section from "../../../.storybook/decorators/section";
|
|
import { boolean } from "@storybook/addon-knobs";
|
|
|
|
const displayType = ["auto", "modal", "aside"];
|
|
class AvatarEditorStory extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
isOpen: false,
|
|
userImage: null,
|
|
};
|
|
|
|
this.openEditor = this.openEditor.bind(this);
|
|
this.onClose = this.onClose.bind(this);
|
|
this.onSave = this.onSave.bind(this);
|
|
this.onLoadFile = this.onLoadFile.bind(this);
|
|
this.onImageChange = this.onImageChange.bind(this);
|
|
this.onDeleteImage = this.onDeleteImage.bind(this);
|
|
this.onLoadFile = this.onLoadFile.bind(this);
|
|
}
|
|
onDeleteImage() {
|
|
action("onDeleteImage");
|
|
}
|
|
onImageChange(img) {
|
|
action("onLoadFile");
|
|
this.setState({
|
|
userImage: img,
|
|
});
|
|
}
|
|
onLoadFile(file) {
|
|
action("onLoadFile")(file);
|
|
}
|
|
onSave(isUpdate, data) {
|
|
action("onSave")(isUpdate, data);
|
|
this.setState({
|
|
isOpen: false,
|
|
});
|
|
}
|
|
openEditor() {
|
|
this.setState({
|
|
isOpen: true,
|
|
});
|
|
}
|
|
onClose() {
|
|
action("onClose");
|
|
this.setState({
|
|
isOpen: false,
|
|
});
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Avatar
|
|
size="max"
|
|
role="user"
|
|
source={this.state.userImage}
|
|
editing={true}
|
|
editAction={this.openEditor}
|
|
/>
|
|
<AvatarEditor
|
|
visible={this.state.isOpen}
|
|
onClose={this.onClose}
|
|
onSave={this.onSave}
|
|
onDeleteImage={this.onDeleteImage}
|
|
onImageChange={this.onImageChange}
|
|
onLoadFile={this.onLoadFile}
|
|
headerLabel={text("headerLabel", "Edit Photo")}
|
|
chooseFileLabel={text(
|
|
"chooseFileLabel",
|
|
"Drop files here, or click to select files"
|
|
)}
|
|
chooseMobileFileLabel={text(
|
|
"chooseMobileFileLabel",
|
|
"Click to select files"
|
|
)}
|
|
saveButtonLabel={text("saveButtonLabel", "Save")}
|
|
saveButtonLoading={boolean("saveButtonLoading", false)}
|
|
maxSizeFileError={text(
|
|
"maxSizeFileError",
|
|
"Maximum file size exceeded"
|
|
)}
|
|
unknownTypeError={text("unknownTypeError", "Unknown image file type")}
|
|
unknownError={text("unknownError", "Error")}
|
|
displayType={select("displayType", displayType, "auto")}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
storiesOf("Components|AvatarEditor", module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(withReadme(Readme))
|
|
.add("base", () => {
|
|
return (
|
|
<Section>
|
|
<AvatarEditorStory />
|
|
</Section>
|
|
);
|
|
});
|