zmp-ui/esm/components/list/index.stories.js

Zalo Mini App framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import List from ".";
import Avatar from "../avatar";
import Icon from "../icon";
import { inlineFullwidthParameters } from "../../../../.storybook/parameters";
var meta = _objectSpread({
  title: "Display/List",
  component: List,
  tags: ["autodocs"],
  argTypes: {}
}, inlineFullwidthParameters);
export default meta;
var users = [{
  name: "Đỗ Quang Minh",
  avatar: "M",
  online: true,
  key: 1,
  subTitle: "Quản lý dự án",
  brackets: "3",
  icon: "zi-calendar"
}, {
  name: "Phạm Minh Tuấn",
  avatar: "T",
  online: true,
  key: 2,
  subTitle: "Kỹ sư phần mềm",
  brackets: "2",
  icon: "zi-user"
}, {
  name: "Trần Văn An",
  avatar: "A",
  online: true,
  key: 3,
  subTitle: "Thiết kế UI/UX",
  brackets: "1",
  icon: "zi-palette"
}, {
  name: "Nguyễn Thị Lan",
  avatar: "L",
  online: false,
  key: 4,
  subTitle: "Nhân sự",
  brackets: "4",
  icon: "zi-briefcase"
}, {
  name: "Lê Thị Hồng",
  avatar: "H",
  online: false,
  key: 5,
  subTitle: "Kế toán",
  brackets: "7",
  icon: "zi-calculator"
}];
export var Default = {
  name: "Mặc định",
  args: {
    children: users.map(function (user) {
      return /*#__PURE__*/React.createElement(List.Item, {
        key: user.key,
        prefix: /*#__PURE__*/React.createElement(Avatar, {
          online: user.online
        }, user.avatar),
        title: user.name,
        subTitle: user.subTitle,
        suffix: /*#__PURE__*/React.createElement(Icon, {
          icon: user.icon
        })
      });
    })
  }
};
export var WithDataSource = {
  name: "Dùng dataSource và renderItem",
  args: {
    dataSource: users,
    renderItem: function renderItem(item, index) {
      return /*#__PURE__*/React.createElement(List.Item, {
        key: index,
        prefix: /*#__PURE__*/React.createElement(Avatar, {
          online: item.online
        }, item.avatar),
        title: item.name,
        subTitle: item.subTitle,
        suffix: /*#__PURE__*/React.createElement(Icon, {
          icon: item.icon
        })
      });
    }
  },
  parameters: {
    docs: {
      source: {
        code: "<List\n  dataSource={users}\n  renderItem={(item, index, loading) => (\n    <List.Item\n        key={index}\n        prefix={<Avatar online={item.online}>{item.avatar}</Avatar>}\n        title={item.name}\n        subTitle={item.subTitle}\n        suffix={<Icon icon={item.icon} />}\n    />\n  )}\n/>"
      }
    }
  }
};
export var ClickableItems = {
  name: "Item có thể click",
  args: {
    children: users.map(function (user) {
      return /*#__PURE__*/React.createElement(List.Item, {
        key: user.key,
        prefix: /*#__PURE__*/React.createElement(Avatar, {
          online: user.online
        }, user.avatar),
        title: user.name,
        subTitle: user.subTitle,
        onClick: function onClick() {
          return alert("Xin ch\xE0o " + user.name + "!");
        },
        suffix: /*#__PURE__*/React.createElement(Icon, {
          icon: user.icon
        })
      });
    })
  },
  parameters: {
    docs: {
      source: {
        code: "<List>\n  {users.map(user => (\n    <List.Item\n        key={user.key}\n        prefix={<Avatar online={user.online}>{user.avatar}</Avatar>}\n        title={user.name}\n        subTitle={user.subTitle}\n        onClick={() => alert(`Xin ch\xE0o ${user.name}!`)}\n        suffix={<Icon icon={user.icon} />}\n    />\n  ))}\n</List>"
      }
    }
  }
};
export var NoSpacing = {
  name: "Không có khoảng cách",
  args: _objectSpread(_objectSpread({}, Default.args), {}, {
    noSpacing: true
  })
};
export var NoDivider = {
  name: "Không có đường ngăn cách",
  args: _objectSpread(_objectSpread({}, Default.args), {}, {
    divider: false
  }),
  parameters: {
    docs: {
      source: {
        transform: function transform(code) {
          return code.replace("<List>", "<List divider={false}>");
        }
      }
    }
  }
};
export var Loading = {
  name: "Trạng thái loading",
  args: _objectSpread(_objectSpread({}, Default.args), {}, {
    loading: true
  })
};
export var WithBrackets = {
  name: "Item có ngoặc",
  args: {
    children: users.map(function (user) {
      return /*#__PURE__*/React.createElement(List.Item, {
        key: user.key,
        prefix: /*#__PURE__*/React.createElement(Avatar, {
          online: user.online
        }, user.avatar),
        title: user.name,
        brackets: user.brackets,
        subTitle: user.subTitle,
        suffix: /*#__PURE__*/React.createElement(Icon, {
          icon: user.icon
        })
      });
    })
  }
};