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

Zalo Mini App framework

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.WithDataSource = exports.WithBrackets = exports.NoSpacing = exports.NoDivider = exports.Loading = exports.Default = exports.ClickableItems = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _ = _interopRequireDefault(require("."));
var _avatar = _interopRequireDefault(require("../avatar"));
var _icon = _interopRequireDefault(require("../icon"));
var _parameters = require("../../../../.storybook/parameters");
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) { (0, _defineProperty2["default"])(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; }
var meta = _objectSpread({
  title: "Display/List",
  component: _["default"],
  tags: ["autodocs"],
  argTypes: {}
}, _parameters.inlineFullwidthParameters);
var _default = exports["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"
}];
var Default = exports.Default = {
  name: "Mặc định",
  args: {
    children: users.map(function (user) {
      return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
        key: user.key,
        prefix: /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
          online: user.online
        }, user.avatar),
        title: user.name,
        subTitle: user.subTitle,
        suffix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          icon: user.icon
        })
      });
    })
  }
};
var WithDataSource = exports.WithDataSource = {
  name: "Dùng dataSource và renderItem",
  args: {
    dataSource: users,
    renderItem: function renderItem(item, index) {
      return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
        key: index,
        prefix: /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
          online: item.online
        }, item.avatar),
        title: item.name,
        subTitle: item.subTitle,
        suffix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          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/>"
      }
    }
  }
};
var ClickableItems = exports.ClickableItems = {
  name: "Item có thể click",
  args: {
    children: users.map(function (user) {
      return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
        key: user.key,
        prefix: /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
          online: user.online
        }, user.avatar),
        title: user.name,
        subTitle: user.subTitle,
        onClick: function onClick() {
          return alert("Xin ch\xE0o " + user.name + "!");
        },
        suffix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          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>"
      }
    }
  }
};
var NoSpacing = exports.NoSpacing = {
  name: "Không có khoảng cách",
  args: _objectSpread(_objectSpread({}, Default.args), {}, {
    noSpacing: true
  })
};
var NoDivider = exports.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}>");
        }
      }
    }
  }
};
var Loading = exports.Loading = {
  name: "Trạng thái loading",
  args: _objectSpread(_objectSpread({}, Default.args), {}, {
    loading: true
  })
};
var WithBrackets = exports.WithBrackets = {
  name: "Item có ngoặc",
  args: {
    children: users.map(function (user) {
      return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
        key: user.key,
        prefix: /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
          online: user.online
        }, user.avatar),
        title: user.name,
        brackets: user.brackets,
        subTitle: user.subTitle,
        suffix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          icon: user.icon
        })
      });
    })
  }
};