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

Zalo Mini App framework

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.SingleSelect = exports.SelectWithoutMask = exports.SelectWithHelperAndErrorText = exports.SelectWithDisabledOptions = exports.SelectWithCustomPlaceholder = exports.MultiSelect = exports.GroupedSelect = exports.DisabledSelect = exports.CloseOnSelect = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _ = _interopRequireDefault(require("."));
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; } /* eslint-disable sonarjs/no-duplicate-string */
var OtpGroup = _["default"].OtpGroup,
  Option = _["default"].Option;
var meta = {
  title: "Form/Select",
  component: _["default"],
  parameters: {
    layout: "centered",
    docs: {
      story: {
        inline: false
      }
    }
  },
  tags: ["autodocs"],
  argTypes: {}
};
var _default = exports["default"] = meta;
var SingleSelect = exports.SingleSelect = {
  name: "Chọn một",
  args: {
    label: "Giới tính",
    helperText: "Chọn giới tính của bạn",
    placeholder: "Chọn giới tính",
    defaultValue: "1",
    children: [/*#__PURE__*/_react["default"].createElement(Option, {
      value: "1",
      title: "Nam"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "2",
      title: "N\u1EEF"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "3",
      title: "Kh\xE1c"
    })]
  }
};
var MultiSelect = exports.MultiSelect = {
  name: "Chọn nhiều",
  args: {
    label: "Món ăn yêu thích",
    helperText: "Chọn một hoặc nhiều món ăn yêu thích",
    placeholder: "Chọn món ăn",
    multiple: true,
    defaultValue: ["1", "3"],
    children: [/*#__PURE__*/_react["default"].createElement(Option, {
      value: "1",
      title: "Ph\u1EDF"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "2",
      title: "B\xFAn b\xF2"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "3",
      title: "C\u01A1m t\u1EA5m"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "4",
      title: "B\xE1nh m\xEC"
    })]
  }
};
var DisabledSelect = exports.DisabledSelect = {
  name: "Disable cả select",
  args: {
    label: "Chọn thời gian đặt bàn",
    placeholder: "Hiện tất cả các bàn đều đã được đặt",
    disabled: true
  }
};
var SelectWithDisabledOptions = exports.SelectWithDisabledOptions = {
  name: "Disable từng option",
  args: {
    label: "Chọn thời gian đặt bàn",
    placeholder: "Chọn khung giờ",
    defaultValue: "",
    children: [/*#__PURE__*/_react["default"].createElement(Option, {
      value: "1",
      title: "08:00 - 09:00"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "2",
      title: "09:00 - 10:00",
      disabled: true
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "3",
      title: "10:00 - 11:00"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "4",
      title: "11:00 - 12:00",
      disabled: true
    })]
  }
};
var GroupedSelect = exports.GroupedSelect = {
  name: "Nhóm",
  args: {
    label: "Chọn sản phẩm",
    placeholder: "Chọn sản phẩm mong muốn",
    defaultValue: "",
    children: [/*#__PURE__*/_react["default"].createElement(OtpGroup, {
      label: "\u0110\u1ED3 u\u1ED1ng"
    }, /*#__PURE__*/_react["default"].createElement(Option, {
      value: "1",
      title: "C\xE0 ph\xEA"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "2",
      title: "Tr\xE0 s\u1EEFa"
    })), /*#__PURE__*/_react["default"].createElement(OtpGroup, {
      label: "\u0110\u1ED3 \u0103n"
    }, /*#__PURE__*/_react["default"].createElement(Option, {
      value: "3",
      title: "B\xE1nh ng\u1ECDt"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "4",
      title: "B\xE1nh m\xEC"
    }))]
  }
};
var SelectWithCustomPlaceholder = exports.SelectWithCustomPlaceholder = {
  name: "Tùy chỉnh placeholder",
  args: {
    label: "Thành phố bạn đang sống",
    placeholder: "Nhập tên thành phố",
    defaultValue: "",
    children: [/*#__PURE__*/_react["default"].createElement(Option, {
      value: "1",
      title: "H\xE0 N\u1ED9i"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "2",
      title: "\u0110\xE0 N\u1EB5ng"
    }), /*#__PURE__*/_react["default"].createElement(Option, {
      value: "3",
      title: "TP. H\u1ED3 Ch\xED Minh"
    })]
  }
};
var SelectWithHelperAndErrorText = exports.SelectWithHelperAndErrorText = {
  name: "Lỗi",
  args: _objectSpread(_objectSpread({}, SingleSelect.args), {}, {
    status: "error",
    errorText: "Giá trị không hợp lệ"
  })
};
var SelectWithoutMask = exports.SelectWithoutMask = {
  name: "Không có mask",
  args: _objectSpread(_objectSpread({}, SingleSelect.args), {}, {
    mask: false
  })
};
var CloseOnSelect = exports.CloseOnSelect = {
  name: "Đóng sau khi chọn",
  args: _objectSpread(_objectSpread({}, SingleSelect.args), {}, {
    closeOnSelect: true
  })
};