/
editable.stories.tsx
127 lines (119 loc) · 2.7 KB
/
editable.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { chakra } from "@chakra-ui/system"
import * as React from "react"
import {
useEditable,
Editable,
EditableInput,
EditablePreview,
EditableTextarea,
useEditableControls,
} from "../src"
export default {
title: "Components / Forms / Editable",
decorators: [
(Story: Function) => (
<chakra.div maxW="400px" mt="40px" mx="auto">
<Story />
</chakra.div>
),
],
}
export const UseEditableHook = () => {
const {
getInputProps,
getPreviewProps,
getCancelButtonProps,
getSubmitButtonProps,
isValueEmpty,
isEditing,
onEdit,
} = useEditable({
placeholder: "Title...",
submitOnBlur: true,
onCancel: () => console.log("cancel"),
onSubmit: () => console.log("submit"),
})
return (
<>
<input
style={{ width: "auto", background: "transparent" }}
{...getInputProps()}
/>
<span
style={{ opacity: isValueEmpty ? 0.7 : 1 }}
{...getPreviewProps()}
/>
{!isEditing && <button onClick={onEdit}>Edit</button>}
{isEditing && (
<>
<button {...getSubmitButtonProps()}>Save</button>
<button {...getCancelButtonProps({ style: { padding: 10 } })}>
Cancel
</button>
</>
)}
</>
)
}
const EditableControls = () => {
const {
isEditing,
getEditButtonProps,
getSubmitButtonProps,
getCancelButtonProps,
} = useEditableControls()
return (
<div>
{!isEditing ? (
<button {...getEditButtonProps()}>Edit</button>
) : (
<>
<button {...getSubmitButtonProps()}>Save</button>
<button {...getCancelButtonProps()}>Cancel</button>
</>
)}
</div>
)
}
export const Basic = () => (
<Editable
defaultValue="Rasengan ⚡️"
fontSize="xl"
textAlign="center"
isPreviewFocusable={false}
submitOnBlur={false}
onChange={console.log}
>
<EditablePreview />
<EditableInput />
<EditableControls />
</Editable>
)
export const CodeSandboxTopbar = () => {
return (
<chakra.div py="4" display="flex" alignItems="center">
<chakra.p fontWeight="medium">My Sandboxes</chakra.p>
<chakra.span mx="3">/</chakra.span>
<Editable defaultValue="chakra-ui-demo">
<EditableInput _focus={{ boxShadow: "none" }} />
<EditablePreview />
</Editable>
</chakra.div>
)
}
export const TextareaAsInput = () => {
return (
<Editable
defaultValue="Hello!!"
fontSize="xl"
textAlign="center"
isPreviewFocusable={false}
submitOnBlur={false}
onChange={console.log}
>
<EditablePreview />
<EditableTextarea />
<EditableControls />
</Editable>
)
}