zmp-ui/esm/components/select/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; }
/* eslint-disable sonarjs/no-duplicate-string */

import React from "react";
import Select from ".";
var OtpGroup = Select.OtpGroup,
  Option = Select.Option;
var meta = {
  title: "Form/Select",
  component: Select,
  parameters: {
    layout: "centered",
    docs: {
      story: {
        inline: false
      }
    }
  },
  tags: ["autodocs"],
  argTypes: {}
};
export default meta;
export var 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.createElement(Option, {
      value: "1",
      title: "Nam"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "2",
      title: "N\u1EEF"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "3",
      title: "Kh\xE1c"
    })]
  }
};
export var 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.createElement(Option, {
      value: "1",
      title: "Ph\u1EDF"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "2",
      title: "B\xFAn b\xF2"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "3",
      title: "C\u01A1m t\u1EA5m"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "4",
      title: "B\xE1nh m\xEC"
    })]
  }
};
export var 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
  }
};
export var 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.createElement(Option, {
      value: "1",
      title: "08:00 - 09:00"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "2",
      title: "09:00 - 10:00",
      disabled: true
    }), /*#__PURE__*/React.createElement(Option, {
      value: "3",
      title: "10:00 - 11:00"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "4",
      title: "11:00 - 12:00",
      disabled: true
    })]
  }
};
export var 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.createElement(OtpGroup, {
      label: "\u0110\u1ED3 u\u1ED1ng"
    }, /*#__PURE__*/React.createElement(Option, {
      value: "1",
      title: "C\xE0 ph\xEA"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "2",
      title: "Tr\xE0 s\u1EEFa"
    })), /*#__PURE__*/React.createElement(OtpGroup, {
      label: "\u0110\u1ED3 \u0103n"
    }, /*#__PURE__*/React.createElement(Option, {
      value: "3",
      title: "B\xE1nh ng\u1ECDt"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "4",
      title: "B\xE1nh m\xEC"
    }))]
  }
};
export var 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.createElement(Option, {
      value: "1",
      title: "H\xE0 N\u1ED9i"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "2",
      title: "\u0110\xE0 N\u1EB5ng"
    }), /*#__PURE__*/React.createElement(Option, {
      value: "3",
      title: "TP. H\u1ED3 Ch\xED Minh"
    })]
  }
};
export var SelectWithHelperAndErrorText = {
  name: "Lỗi",
  args: _objectSpread(_objectSpread({}, SingleSelect.args), {}, {
    status: "error",
    errorText: "Giá trị không hợp lệ"
  })
};
export var SelectWithoutMask = {
  name: "Không có mask",
  args: _objectSpread(_objectSpread({}, SingleSelect.args), {}, {
    mask: false
  })
};
export var CloseOnSelect = {
  name: "Đóng sau khi chọn",
  args: _objectSpread(_objectSpread({}, SingleSelect.args), {}, {
    closeOnSelect: true
  })
};