@heliux-org/design-system-core 0.0.63 → 0.0.64

package/src/components/InlineEdit/__stories__/InlineEdit.stories.js

@@ -3,6 +3,10 @@ import InlineEdit from "../InlineEdit";
 import TextField from "../../TextField/TextField";
 import Dropdown from "../../Dropdown/Dropdown";
 import { person1, person2, person3 } from "../../Avatar/__stories__/assets";
+import Avatar from "../../Avatar/Avatar";
+import person from "../../AttentionBox/__stories__/assets/person.png";
+import { TextFieldTextType } from "../../TextField/TextFieldConstants";
+import TextAreaField from "../../TextAreaField/TextAreaField";
 
 export default {
   title: "Inputs/InlineEdit",
@@ -34,6 +38,39 @@ export const Example = {
   },
 };
 
+export const WithLabel = (args) => {
+  const [editValue, setEditValue] = useState("edit me");
+
+  return (
+    <InlineEdit
+      title="Inline Edit"
+      defaultValue={editValue}
+      aria-label="edit value"
+      {...args}
+      onConfirm={setEditValue}
+    >
+      <span>{editValue}</span>
+    </InlineEdit>
+  );
+};
+
+export const WithCustomTags = (args) => {
+  const [editValue, setEditValue] = useState("edit me");
+
+  return (
+    <InlineEdit
+      defaultValue={editValue}
+      aria-label="edit value"
+      {...args}
+      onConfirm={setEditValue}
+    >
+      <Avatar size={Avatar.sizes.MEDIUM} src={person} type={Avatar.types.IMG} />
+
+      <span>{editValue}</span>
+    </InlineEdit>
+  );
+};
+
 export const WithTextarea = {
   render: (args) => {
     const [editValue, setEditValue] = useState("edit description");
@@ -42,8 +79,19 @@ export const WithTextarea = {
       <InlineEdit
         defaultValue={editValue}
         aria-label="edit value"
-        onConfirm={setEditValue}
-        renderInput={<textarea rows={10} cols={100}></textarea>}
+        onConfirm={()=>{}}
+        onChange={setEditValue}
+        renderInput={
+          <TextAreaField
+            debounceRate={0}
+            placeholder="Type something..."
+            value={editValue}
+            autoFocus={true}
+            rows={10}
+            cols={100}
+            maxLength={200}
+          />
+        }
         {...args}
       >
         <span>{editValue}</span>
@@ -134,3 +182,34 @@ export const InForm = {
     },
   },
 };
+
+export const DateEdit = (args) => {
+  const [dateValue, setDateValue] = useState(
+    new Date().toISOString().slice(0, 10)
+  );
+
+  const handleConfirm = (value) => {
+    setDateValue(value);
+  };
+
+  return (
+    <InlineEdit
+      title="Date Edit"
+      defaultValue={dateValue}
+      onConfirm={handleConfirm}
+      renderInput={
+        <TextField
+          size={TextField.sizes.MEDIUM}
+          type={TextFieldTextType.DATE}
+        />
+      }
+      {...args}
+    >
+      <span>{dateValue}</span>
+    </InlineEdit>
+  );
+};
+
+DateEdit.args = {
+  iconsPosition: "outside",
+};