chore(table): adds editable cell stories

innovaccer · Sep 18, 2020 · d2d815f · d2d815f
1 parent 0574bad
commit d2d815f
Show file tree

Hide file tree

Showing 2 changed files with 332 additions and 0 deletions.
diff --git a/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx b/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Schema } from '../../Grid';
+// @ts-ignore
+import iconImg from './image.png';
+import { GridCellProps } from '../../GridCell';
+import { PlaceholderParagraph, EditableInput } from '@/index';
+
+const schema: Schema = [
+  {
+    name: 'name',
+    displayName: 'Name',
+    width: '40%',
+    resizable: true,
+    tooltip: true,
+    // pinned: 'left',
+    separator: true,
+    translate: a => ({
+      title: `${a.firstName} ${a.lastName}`,
+      firstName: a.firstName,
+      lastName: a.lastName
+    }),
+    filters: [
+      { label: 'A-G', value: 'a-g' },
+      { label: 'H-R', value: 'h-r' },
+      { label: 'S-Z', value: 's-z' },
+    ],
+    // comparator: (a, b) => (
+    //   a.lastName.localeCompare(b.lastName) && a.firstName.localeCompare(b.firstName)
+    // ),
+    onFilterChange: (a, filters) => {
+      for (const filter of filters) {
+        switch (filter) {
+          case 'a-g':
+            if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
+            break;
+          case 'h-r':
+            if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
+            break;
+          case 's-z':
+            if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
+            break;
+        }
+      }
+      return false;
+    },
+    // cellType: 'AVATAR'
+    cellType: 'AVATAR_WITH_TEXT',
+  },
+  {
+    name: 'email',
+    displayName: 'Email',
+    width: 250,
+    resizable: true,
+    sorting: false,
+    // separator: true,
+    // pinned: 'left',
+    // align: 'center',
+    // comparator: (a, b) => a.email.title.localeCompare(b.email.title),
+    cellType: 'WITH_META_LIST'
+    // image: iconImg,
+  },
+  {
+    name: 'gender',
+    displayName: 'Gender',
+    width: 180,
+    resizable: true,
+    // separator: true,
+    comparator: (a, b) => a.gender.localeCompare(b.gender),
+    cellType: 'STATUS_HINT',
+    translate: a => ({
+      title: a.gender,
+      statusAppearance: (a.gender === 'Female') ? 'alert' : 'success'
+    }),
+    filters: [
+      { label: 'Male', value: 'male' },
+      { label: 'Female', value: 'female' },
+    ],
+    onFilterChange: (a, filters) => {
+      for (const filter of filters) {
+        if (a.gender.toLowerCase() === filter) return true;
+      }
+      return false;
+    },
+  },
+  {
+    name: 'icon',
+    displayName: 'Icon',
+    width: 100,
+    resizable: true,
+    align: 'center',
+    cellType: 'ICON',
+    translate: _ => ({
+      icon: 'events'
+    })
+    // separator: true,
+    // status: "success"
+  },
+  {
+    name: 'customCell',
+    displayName: 'Custom Cell',
+    width: 200,
+    resizable: true,
+    // pinned: 'right',
+    // separator: true,
+    cellRenderer: (props: GridCellProps) => {
+      const { loading } = props;
+
+      if (loading) return <PlaceholderParagraph length="medium" />;
+
+      const [weight, setWeight] = React.useState('');
+
+      const onChangeWeight = (value: string) => {
+        setWeight(value);
+      };
+
+      return (
+        <EditableInput
+          placeholder="Add Weight"
+          value={weight}
+          onChange={onChangeWeight}
+          size="tiny"
+        />
+      );
+    }
+    // status: "success"
+  },
+];
+
+export default schema;
diff --git a/core/components/organisms/table/__stories__/variants/withEditableCell.story.tsx b/core/components/organisms/table/__stories__/variants/withEditableCell.story.tsx
@@ -0,0 +1,203 @@
+import * as React from 'react';
+import loaderSchema from '@/components/organisms/grid/__stories__/_common_/loaderSchema';
+import data from '@/components/organisms/grid/__stories__/_common_/data';
+import editableSchema from '@/components/organisms/grid/__stories__/_common_/editableSchema';
+import { Card, Table } from '@/index';
+import { AsyncTable, SyncTable } from '../_common_/types';
+import { action } from '@storybook/addon-actions';
+
+export const withEditableCell = () => {
+  return (
+    <div
+      style={{
+        height: '350px',
+      }}
+    >
+      <Card className="h-100">
+        <Table
+          loaderSchema={loaderSchema}
+          data={data}
+          schema={editableSchema}
+          withHeader={true}
+          withCheckbox={true}
+          onSelect={(rowIndex, selected, selectedList, selectAll) => action(`on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(selectedList)} selectAll: ${selectAll}`)()}
+          headerOptions={{
+            withSearch: true
+          }}
+          onSearch={(currData, searchTerm) => {
+            return currData.filter(d =>
+              d.firstName.toLowerCase().match(searchTerm.toLowerCase())
+              || d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+            );
+          }}
+          withPagination={true}
+          pageSize={5}
+          onPageChange={newPage => action(`on-page-change:- ${newPage}`)()}
+        />
+      </Card>
+    </div>
+  );
+};
+
+const customCode = `
+() => {
+  const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '40%',
+      resizable: true,
+      separator: true,
+      tooltip: true,
+      translate: a => ({
+        title: \`\${a.firstName} \${a.lastName}\`,
+        firstName: a.firstName,
+        lastName: a.lastName
+      }),
+      filters: [
+        { label: 'A-G', value: 'a-g' },
+        { label: 'H-R', value: 'h-r' },
+        { label: 'S-Z', value: 's-z' },
+      ],
+      onFilterChange: (a, filters) => {
+        for (const filter of filters) {
+          switch (filter) {
+            case 'a-g':
+              if (a.firstName[0].toLowerCase() >= 'a' && a.firstName[0].toLowerCase() <= 'g') return true;
+              break;
+            case 'h-r':
+              if (a.firstName[0].toLowerCase() >= 'h' && a.firstName[0].toLowerCase() <= 'r') return true;
+              break;
+            case 's-z':
+              if (a.firstName[0].toLowerCase() >= 's' && a.firstName[0].toLowerCase() <= 'z') return true;
+              break;
+          }
+        }
+        return false;
+      },
+      cellType: 'AVATAR_WITH_TEXT',
+    },
+    {
+      name: 'email',
+      displayName: 'Email',
+      width: 350,
+      resizable: true,
+      sorting: false,
+      cellType: 'WITH_META_LIST'
+    },
+    {
+      name: 'gender',
+      displayName: 'Gender',
+      width: 200,
+      resizable: true,
+      comparator: (a, b) => a.gender.localeCompare(b.gender),
+      cellType: 'STATUS_HINT',
+      translate: a => ({
+        title: a.gender,
+        statusAppearance: (a.gender === 'Female') ? 'alert' : 'success'
+      }),
+      filters: [
+        { label: 'Male', value: 'male' },
+        { label: 'Female', value: 'female' },
+      ],
+      onFilterChange: (a, filters) => {
+        for (const filter of filters) {
+          if (a.gender.toLowerCase() === filter) return true;
+        }
+        return false;
+      },
+    },
+    {
+      name: 'icon',
+      displayName: 'Icon',
+      width: 100,
+      resizable: true,
+      align: 'center',
+      cellType: 'ICON',
+      translate: _ => ({
+        icon: 'events'
+      })
+    },
+    {
+      name: 'customCell',
+      displayName: 'Custom Cell',
+      width: 200,
+      resizable: true,
+      separator: true,
+      cellRenderer: (props) => {
+        const { loading } = props;
+
+        if (loading) return (
+          <PlaceholderParagraph length="medium" />
+        );
+
+        const [weight, setWeight] = React.useState('');
+
+        const onChangeWeight = (value) => {
+          setWeight(value);
+        };
+
+        return (
+          <EditableInput
+            placeholder="Add Weight"
+            value={weight}
+            onChange={onChangeWeight}
+            size="tiny"
+          />
+        );
+      }
+    },
+  ];
+
+  const loaderSchema = ${JSON.stringify(loaderSchema, null, 4)};
+
+  return (
+    <div
+      style={{
+        height: '350px',
+      }}
+    >
+      <Card className="h-100">
+        <Table
+          loaderSchema={loaderSchema}
+          data={data}
+          schema={schema}
+          withHeader={true}
+          headerOptions={{
+            withSearch: true
+          }}
+          onSearch={(currData, searchTerm) => {
+            return currData.filter(d =>
+              d.firstName.toLowerCase().match(searchTerm.toLowerCase())
+              || d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+            );
+          }}
+          withCheckbox={true}
+          onSelect={(rowIndex, selected, selectedList, selectAll) => console.log(\`on-select:- rowIndex: \${rowIndex} selected: \${selected} selectedList: \${JSON.stringify(selectedList)} selectAll: \${selectAll}\`)}
+          withPagination={true}
+          pageSize={5}
+          onPageChange={newPage => console.log(\`on-page-change:- \${newPage}\`)}
+        />
+      </Card>
+    </div>
+  );
+};
+`;
+
+export default {
+  title: 'Organisms|Table/Variants',
+  component: Table,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        props: {
+          components: { AsyncTable, SyncTable },
+          exclude: ['showHead']
+        }
+      }
+    }
+  }
+};